Improving House Rules UX

client/src/App.tsx

@@ -26,6 +26,7 @@ import { assetsPath } from "./Common";
 // history replaced by react-router's useNavigate
 import "./App.css";
 import equal from "fast-deep-equal";
+import { Box } from "@mui/material";
 
 type AudioEffect = HTMLAudioElement & { hasPlayed?: boolean };
 const audioEffects: Record<string, AudioEffect | undefined> = {};
@@ -407,7 +408,7 @@ const Table: React.FC = () => {
           )}
         </div>
         <div className="Game">
-          <div className="Dialogs">
+          <Box className="Dialogs">
             {error && (
               <div className="Dialog ErrorDialog">
                 <Paper className="Error">
@@ -454,11 +455,15 @@ const Table: React.FC = () => {
             {state === "normal" && <SelectPlayer />}
             {color && state === "game-order" && <GameOrder />}
 
-            {!winnerDismissed && <Winner {...{ winnerDismissed, setWinnerDismissed }} />}
+            {!winnerDismissed && (
-            {houseRulesActive && <HouseRules {...{ houseRulesActive, setHouseRulesActive }} />}
+              <Winner {...{ winnerDismissed, setWinnerDismissed }} />
+            )}
+            {houseRulesActive && (
+              <HouseRules {...{ houseRulesActive, setHouseRulesActive }} />
+            )}
             <ViewCard {...{ cardActive, setCardActive }} />
             <ChooseCard />
-          </div>
+          </Box>
 
           <Board animations={animations} />
           <PlayersStatus active={false} />
@@ -489,7 +494,9 @@ const Table: React.FC = () => {
                 min="0"
                 max="100"
                 onInput={(e) => {
-                  const alpha = parseFloat((e.currentTarget as HTMLInputElement).value) / 100;
+                  const alpha =
+                    parseFloat((e.currentTarget as HTMLInputElement).value) /
+                    100;
 
                   localStorage.setItem("volume", alpha.toString());
                   setVolume(alpha);
@@ -516,13 +523,25 @@ const Table: React.FC = () => {
               tradeActive: boolean;
               setTradeActive: (v: boolean) => void;
             }>;
-            return <TradeComponent tradeActive={tradeActive} setTradeActive={setTradeActive} />;
+            return (
+              <TradeComponent
+                tradeActive={tradeActive}
+                setTradeActive={setTradeActive}
+              />
+            );
           })()}
           {name !== "" && <Chat />}
           {/* name !== "" && <VideoFeeds/> */}
           {loaded && (
             <Actions
-              {...{ buildActive, setBuildActive, tradeActive, setTradeActive, houseRulesActive, setHouseRulesActive }}
+              {...{
+                buildActive,
+                setBuildActive,
+                tradeActive,
+                setTradeActive,
+                houseRulesActive,
+                setHouseRulesActive,
+              }}
             />
           )}
         </div>

client/src/HouseRules.tsx

@@ -11,6 +11,10 @@ import equal from "fast-deep-equal";
 import Paper from "@mui/material/Paper";
 import Button from "@mui/material/Button";
 import Switch from "@mui/material/Switch";
+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 "./HouseRules.css";
 
@@ -396,52 +400,47 @@ const HouseRules: React.FC<HouseRulesProps> = ({ houseRulesActive }) => {
   }
 
   return (
-    <Paper
+    <Paper sx={{ p: 1, maxWidth: 600, margin: "1rem auto", flexDirection: "column", display: "flex" }} className="HouseRules" elevation={3}>
-      className="HouseRules"
-      sx={{
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "center",
-        alignItems: "center",
-        maxHeight: "100dvh",
-        overflow: "hidden",
-      }}
-    >
-      <Box className="Title">House Rules</Box>
-      <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 });
-          }
     
-          return (
+      <DialogTitle>House Rules</DialogTitle>
-            <div key={item.key} className="HouseSelector">
+      <DialogContent>
-              <div>
+        <Box sx={{ display: "flex", flexDirection: "column" }}>
-                <b>{item.label}</b>: {item.description}
+          {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>
-              <div>
+            );
-                <Switch
+          })}
-                  size={"small"}
+        </Box>
-                  className="RuleSwitch"
+      </DialogContent>
-                  checked={checked}
+      <DialogActions>
-                  id={item.key}
+        <Button onClick={dismissClicked}>Close</Button>
-                  onChange={(e) => setRule(e, item.key)}
+      </DialogActions>
-                  disabled={gameState !== "lobby" || !name}
-                />
-              </div>
-              {checked && item.element}
-            </div>
-          );
-        })}
-      </Box>
-      <Button onClick={dismissClicked}>Close</Button>
     </Paper>
   );
 };