From 95db2475b2a89b96c8dc8882bdbacc06820ac876 Mon Sep 17 00:00:00 2001
From: James Ketrenos <james_git@ketrenos.com>
Date: Fri, 26 Sep 2025 18:39:28 -0700
Subject: [PATCH] HouseRules.tsx is fully functional!

---
 client/src/HouseRules.tsx | 297 ++++++++++++++++++++++++--------------
 client/src/Placard.tsx    |  14 +-
 2 files changed, 199 insertions(+), 112 deletions(-)

diff --git a/client/src/HouseRules.tsx b/client/src/HouseRules.tsx
index baff1b4..e0d0fe3 100644
--- a/client/src/HouseRules.tsx
+++ b/client/src/HouseRules.tsx
@@ -32,6 +32,7 @@ import volcanoTile from "./assets/single-volcano.png";
 import { GlobalContext } from "./GlobalContext";
 import { Placard } from "./Placard";
 import Box from "@mui/material/Box/Box";
+import { Typography } from "@mui/material";
 
 const categoryImages: { [key: string]: string } = {
   board: boardImg,
@@ -256,11 +257,16 @@ const VictoryPoints: React.FC<VictoryPointsProps> = ({ ws, rules, field }) => {
   };
 
   return (
-    <div className="VictoryPoints">
-      <b>{points}</b> points.
+    <Box className="VictoryPoints" sx={{display: 'flex', flexDirection: 'column', gap: 2, marginTop: 2}}>
+      <Box>
+      The first to reach <b>{points}</b> points wins!
       <Button onClick={() => update(+1)}>up</Button>&nbsp;/&nbsp;
       <Button onClick={() => update(-1)}> down</Button>
-    </div>
+      </Box>
+      <Box>
+        This flexible twist of a rule lets you customize the number of Victory Points needed to claim victory, whether youre aiming for a quick 7-point skirmish or a marathon 12-point conquest. Adjust the goal to match your mood—keep it low for a fast-paced showdown or crank it up for an epic battle of strategy and luck, ensuring every game feels fresh and perfectly suited to your crew’s competitive spirit!
+        </Box>
+    </Box>
   );
 };
 
@@ -269,7 +275,10 @@ interface HouseRulesProps {
   setHouseRulesActive: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
-const HouseRules: React.FC<HouseRulesProps> = ({ houseRulesActive, setHouseRulesActive }) => {
+const HouseRules: React.FC<HouseRulesProps> = ({
+  houseRulesActive,
+  setHouseRulesActive,
+}) => {
   const { ws, name } = useContext(GlobalContext);
   const [rules, setRules] = useState<any>({});
   const [state, setState] = useState<any>({});
@@ -340,108 +349,184 @@ const HouseRules: React.FC<HouseRulesProps> = ({ houseRulesActive, setHouseRules
   );
 
   const ruleList = useMemo(
-    () => [
-      {
-        key: "volcano",
-        label: "Volcanoes are a lava fun!",
-        description: "A volcano is on the island! Let the lava flow!",
-        category: "board",
-        defaultChecked: false,
-        element: (
-          <Volcano
-            ws={ws}
-            rules={rules}
-            field={"volcano"}
-            disabled={gameState !== "lobby"}
-          />
-        ),
-      },
-      {
-        key: "victory-points",
-        label: "More victory points",
-        description: "Customize how many Victory Points are required to win.",
-        category: "rules",
-        defaultChecked: false,
-        element: (
-          <VictoryPoints ws={ws} rules={rules} field={"victory-points"} />
-        ),
-      },
-      {
-        key: "tiles-start-facing-down",
-        label: "Tiles start facing down",
-        description:
-          "Resource tiles start upside-down while placing starting settlements.",
-        category: "board",
-        defaultChecked: false,
-        element: (
-          <div>
-            Once all players have placed their initial settlements and roads,
-            the tiles are flipped and you discover what the resources are.
-          </div>
-        ),
-      },
-      {
-        key: "most-developed",
-        label: "You are so developed!",
-        description:
-          "The player with the most development cards (more than 4) receives 2VP.",
-        category: "expansion",
-        defaultChecked: false,
-        element: <Placard type="most-developed" />,
-      },
-      {
-        key: "port-of-call",
-        label: "Another round of port?",
-        description:
-          "The player with the most harbor ports (more than 2) receives 2VP.",
-        category: "expansion",
-        defaultChecked: false,
-        element: <Placard type="port-of-call" />,
-      },
-      {
-        key: "slowest-turn",
-        label: "Why you play so slow?",
-        description:
-          "The player with the longest turn idle time (longer than 2 minutes) so far loses 2VP.",
-        category: "expansion",
-        defaultChecked: false,
-        element: <Placard type="longest-turn" />,
-      },
-      {
-        key: "roll-double-roll-again",
-        label: "Roll double, roll again",
-        description: "Roll again if you roll two of the same number.",
-        category: "rolling",
-        defaultChecked: false,
-        element: (
-          <div>
-            If you roll doubles, players get those resources and then you must
-            roll again.
-          </div>
-        ),
-      },
-      {
-        key: "twelve-and-two-are-synonyms",
-        label: "Twelve and Two are synonyms",
-        description: "If twelve is rolled, two scores as well. And vice-versa.",
-        category: "rolling",
-        defaultChecked: false,
-        element: (
-          <div>
-            If you roll a twelve or two, resources are triggered for both.
-          </div>
-        ),
-      },
-      {
-        key: "robin-hood-robber",
-        label: "Robin Hood robber",
-        description:
-          "Robbers can't steal from players with two or less victory points.",
-        category: "rules",
-        defaultChecked: false,
-        element: <></>,
-      },
-    ].sort((a, b) => a.category.localeCompare(b.category)),
+    () =>
+      [
+        {
+          key: "volcano",
+          label: "Volcanoes are a lava fun!",
+          description: "A volcano is on the island! Let the lava flow!",
+          category: "board",
+          defaultChecked: false,
+          element: (
+            <Volcano
+              ws={ws}
+              rules={rules}
+              field={"volcano"}
+              disabled={gameState !== "lobby"}
+            />
+          ),
+        },
+        {
+          key: "victory-points",
+          label: "More victory points",
+          description: "Customize how many Victory Points are required to win.",
+          category: "rules",
+          defaultChecked: false,
+          element: (
+            <VictoryPoints ws={ws} rules={rules} field={"victory-points"} />
+          ),
+        },
+        {
+          key: "tiles-start-facing-down",
+          label: "Tiles start facing down",
+          description:
+            "Resource tiles start upside-down while placing starting settlements.",
+          category: "board",
+          defaultChecked: false,
+          element: (
+            <div>
+              Once all players have placed their initial settlements and roads,
+              the tiles are flipped and you discover what the resources are.
+            </div>
+          ),
+        },
+        {
+          key: "most-developed",
+          label: "You are so developed!",
+          description:
+            "The player with the most development cards (more than 4) receives 2VP.",
+          category: "expansion",
+          defaultChecked: false,
+          element: (
+            <Box sx={{ display: "block", flexDirection: "column" }}>
+              <Placard
+                sx={{
+                  float: "left",
+                  shapeOutside: "inset(0)" /* Text wraps the full rectangle */,
+                  clipPath: "inset(0)" /* Ensures proper wrapping area */,
+                  marginRight: "1rem",
+                  marginBottom: "1rem",
+                }}
+                type="most-developed"
+              />
+              <Typography variant="body2">
+                This card rewards the player who amasses more than 4 development
+                cards with a glorious 2 Victory Points, turning your strategic
+                savvy into a medieval masterpiece complete with towering cities
+                and bustling fields. Picture yourself snagging this beautifully
+                illustrated card—featuring hardworking villagers and a majestic
+                castle!
+              </Typography>
+            </Box>
+          ),
+        },
+        {
+          key: "port-of-call",
+          label: "Another round of port?",
+          description:
+            "The player with the most harbor ports (more than 2) receives 2VP.",
+          category: "expansion",
+          defaultChecked: false,
+          element: (
+            <Box sx={{ display: "block", flexDirection: "column" }}>
+              <Placard
+                sx={{
+                  float: "left",
+                  shapeOutside: "inset(0)" /* Text wraps the full rectangle */,
+                  clipPath: "inset(0)" /* Ensures proper wrapping area */,
+                  marginRight: "1rem",
+                  marginBottom: "1rem",
+                }}
+                type="port-of-call"
+              />
+              <Typography variant="body2">
+                Raise your mugs and hoist the sails! This lively card rewards
+                the most seasoned seafarer among the settlers. When you control
+                more than two harbor ports, you claim this card and earn 2
+                Victory Points as a tribute to your mastery of the seas. But
+                beware — other ambitious captains are watching closely! The
+                moment someone else builds a larger network of harbors, they’ll
+                steal both the card and the glory right from under your nose.
+                Keep those ships moving and never let your rivals toast to your
+                downfall!
+              </Typography>
+            </Box>
+          ),
+        },
+        {
+          key: "slowest-turn",
+          label: "Why you play so slow?",
+          description:
+            "The player with the longest turn idle time (longer than 2 minutes) so far loses 2VP.",
+          category: "expansion",
+          defaultChecked: false,
+          element: (
+            <Box sx={{ display: "block", flexDirection: "column" }}>
+              <Placard
+                sx={{
+                  float: "left",
+                  shapeOutside: "inset(0)" /* Text wraps the full rectangle */,
+                  clipPath: "inset(0)" /* Ensures proper wrapping area */,
+                  marginRight: "1rem",
+                  marginBottom: "1rem",
+                }}
+                type="longest-turn"
+              />
+              <Typography variant="body2" sx={{ marginTop: "1rem" }}>
+                If your turn idle time drags on past 2 minutes, you’re slapped
+                with a -2 Victory Points penalty and handed this charming
+                card—featuring industrious villagers raking hay with a castle
+                looming in the background—until someone even slower takes it
+                from you with a sheepish grin!
+              </Typography>
+            </Box>
+          ),
+        },
+        {
+          key: "roll-double-roll-again",
+          label: "Roll double, roll again",
+          description: "Roll again if you roll two of the same number.",
+          category: "rolling",
+          defaultChecked: false,
+          element: (
+            <div>
+              If you roll doubles, players get those resources and then you must
+              roll again.
+              <Box sx={{ display: "block", fontWeight: "bold", pt: 1, pb: 1 }}>
+                Note:
+              </Box>
+              This stacks with Two and Twelve are Synonyms. So if you roll double ones (2), you get resources for 2 and 12, then roll again!
+            </div>
+          ),
+        },
+        {
+          key: "twelve-and-two-are-synonyms",
+          label: "Twelve and Two are synonyms",
+          description:
+            "If twelve is rolled, two scores as well. And vice-versa.",
+          category: "rolling",
+          defaultChecked: false,
+          element: (
+            <div>
+              If you roll a twelve or two, resources are triggered for both.
+              <Box sx={{ display: "block", fontWeight: "bold", pt: 1, pb: 1 }}>
+                Note:
+              </Box>{" "}
+              This stacks with Roll Double, Roll Again. So if you roll double
+              sixes (12), you get resources for 2 and 12, then roll again!
+            </div>
+          ),
+        },
+        {
+          key: "robin-hood-robber",
+          label: "Robin Hood robber",
+          description:
+            "Robbers can't steal from players with two or less victory points.",
+          category: "rules",
+          defaultChecked: false,
+          element: <></>,
+        },
+      ].sort((a, b) => a.category.localeCompare(b.category)),
     [rules, setRules, state, ws, setRule, name, gameState]
   );
 
diff --git a/client/src/Placard.tsx b/client/src/Placard.tsx
index 8b979b6..be6a0ad 100644
--- a/client/src/Placard.tsx
+++ b/client/src/Placard.tsx
@@ -2,6 +2,8 @@ import React, { useContext, useCallback } from "react";
 import "./Placard.css";
 import { assetsPath } from "./Common";
 import { GlobalContext } from "./GlobalContext";
+import { SxProps, useTheme } from '@mui/material/styles';
+import Box from "@mui/material/Box/Box";
 
 type PlacardProps = {
   type?: string;
@@ -10,9 +12,10 @@ type PlacardProps = {
   buildActive?: boolean;
   setBuildActive?: (b: boolean) => void;
   className?: string;
+  sx?: SxProps;
 };
 
-const Placard: React.FC<PlacardProps> = ({ type, disabled, count, buildActive, setBuildActive, className }) => {
+const Placard: React.FC<PlacardProps> = ({ type, disabled, count, buildActive, setBuildActive, className, sx }) => {
   const { ws } = useContext(GlobalContext);
   const sendMessage = useCallback(
     (data: Record<string, unknown>) => {
@@ -85,20 +88,19 @@ const Placard: React.FC<PlacardProps> = ({ type, disabled, count, buildActive, s
 
   if (!disabled) {
     return (
-      <div
+      <Box sx={{...sx, ...style}}
         className={`Placard${buildActive ? " Selected" : ""} ${className || ""}`}
         onClick={buildClicked}
         data-type={t}
-        style={style}
       >
         {buttons}
-      </div>
+      </Box>
     );
   }
   return (
-    <div className={`Placard${buildActive ? " Selected" : ""} ${className || ""}`} data-type={t} style={style}>
+    <Box sx={{...sx, ...style}} className={`Placard${buildActive ? " Selected" : ""} ${className || ""}`} data-type={t}>
       {count && <div className="Right">{count}</div>}
-    </div>
+    </Box>
   );
 };