From 279fc687180845bebff5ca1514cbfe5c887e7e35 Mon Sep 17 00:00:00 2001
From: James Ketrenos <james_git@ketrenos.com>
Date: Thu, 25 Sep 2025 12:13:00 -0700
Subject: [PATCH] Impelemented missing House Rules

---
 client/src/HouseRules.tsx | 81 +++++++++++++++++++++++----------------
 1 file changed, 48 insertions(+), 33 deletions(-)

diff --git a/client/src/HouseRules.tsx b/client/src/HouseRules.tsx
index 31ed75a..83355c2 100644
--- a/client/src/HouseRules.tsx
+++ b/client/src/HouseRules.tsx
@@ -15,12 +15,16 @@ import Dialog from "@mui/material/Dialog";
 import DialogTitle from "@mui/material/DialogTitle";
 import DialogContent from "@mui/material/DialogContent";
 import DialogActions from "@mui/material/DialogActions";
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableContainer from "@mui/material/TableContainer";
+import TableRow from "@mui/material/TableRow";
 
 // import "./HouseRules.css";
 
 import { GlobalContext } from "./GlobalContext";
 import { Placard } from "./Placard";
-import { Box } from "@mui/material";
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
@@ -404,39 +408,50 @@ const HouseRules: React.FC<HouseRulesProps> = ({ houseRulesActive }) => {
     
       <DialogTitle>House Rules</DialogTitle>
       <DialogContent>
-        <Box sx={{ display: "flex", flexDirection: "column" }}>
-          {ruleList.map((item) => {
-            const defaultChecked = item.defaultChecked;
-            if (!(item.key in rules)) {
-              rules[item.key] = {
-                enabled: defaultChecked,
-              };
-            }
-            const checked = rules[item.key].enabled;
-            if (checked !== state[item.key]) {
-              setState({ ...state, [item.key]: checked });
-            }
+        <TableContainer>
+          <Table>
+            <TableBody>
+              {ruleList.map((item) => {
+                const defaultChecked = item.defaultChecked;
+                if (!(item.key in rules)) {
+                  rules[item.key] = {
+                    enabled: defaultChecked,
+                  };
+                }
+                const checked = rules[item.key].enabled;
+                if (checked !== state[item.key]) {
+                  setState({ ...state, [item.key]: checked });
+                }
 
-            return (
-              <div key={item.key} className="HouseSelector">
-                <div>
-                  <b>{item.label}</b>: {item.description}
-                </div>
-                <div>
-                  <Switch
-                    size={"small"}
-                    className="RuleSwitch"
-                    checked={checked}
-                    id={item.key}
-                    onChange={(e) => setRule(e, item.key)}
-                    disabled={gameState !== "lobby" || !name}
-                  />
-                </div>
-                {checked && item.element}
-              </div>
-            );
-          })}
-        </Box>
+                return (
+                  <React.Fragment key={item.key}>
+                    <TableRow>
+                      <TableCell>
+                        <b>{item.label}</b>
+                      </TableCell>
+                      <TableCell>{item.description}</TableCell>
+                      <TableCell>
+                        <Switch
+                          size={"small"}
+                          className="RuleSwitch"
+                          checked={checked}
+                          id={item.key}
+                          onChange={(e) => setRule(e, item.key)}
+                          disabled={gameState !== "lobby" || !name}
+                        />
+                      </TableCell>
+                    </TableRow>
+                    {checked && (
+                      <TableRow>
+                        <TableCell colSpan={3}>{item.element}</TableCell>
+                      </TableRow>
+                    )}
+                  </React.Fragment>
+                );
+              })}
+            </TableBody>
+          </Table>
+        </TableContainer>
       </DialogContent>
       <DialogActions>
         <Button onClick={dismissClicked}>Close</Button>