HouseRules.tsx is fully functional!

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">
+    <Box className="VictoryPoints" sx={{display: 'flex', flexDirection: 'column', gap: 2, marginTop: 2}}>
-      <b>{points}</b> points.
+      <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,7 +349,8 @@ const HouseRules: React.FC<HouseRulesProps> = ({ houseRulesActive, setHouseRules
   );
 
   const ruleList = useMemo(
-    () => [
+    () =>
+      [
         {
           key: "volcano",
           label: "Volcanoes are a lava fun!",
@@ -387,7 +397,28 @@ const HouseRules: React.FC<HouseRulesProps> = ({ houseRulesActive, setHouseRules
             "The player with the most development cards (more than 4) receives 2VP.",
           category: "expansion",
           defaultChecked: false,
-        element: <Placard type="most-developed" />,
+          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",
@@ -396,7 +427,31 @@ const HouseRules: React.FC<HouseRulesProps> = ({ houseRulesActive, setHouseRules
             "The player with the most harbor ports (more than 2) receives 2VP.",
           category: "expansion",
           defaultChecked: false,
-        element: <Placard type="port-of-call" />,
+          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",
@@ -405,7 +460,27 @@ const HouseRules: React.FC<HouseRulesProps> = ({ houseRulesActive, setHouseRules
             "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" />,
+          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",
@@ -417,18 +492,28 @@ const HouseRules: React.FC<HouseRulesProps> = ({ houseRulesActive, setHouseRules
             <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.",
+          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>
           ),
         },

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>
   );
 };