Fixed rule display for house rules

client/src/HouseRules.tsx

@@ -186,14 +186,18 @@ const HouseRules: React.FC<HouseRulesProps> = ({ houseRulesActive }) => {
   const { ws, name } = useContext(GlobalContext);
   const [rules, setRules] = useState<any>({});
   const [state, setState] = useState<any>({});
+  const [gameState, setGameState] = useState<string>('');
   const [ruleElements, setRuleElements] = useState<React.ReactElement[]>([]);
 
-  const fields = useMemo(() => ["rules"], []);
+  const fields = useMemo(() => ["state", "rules"], []);
   const onWsMessage = (event: MessageEvent) => {
     const data = JSON.parse(event.data);
     switch (data.type) {
       case "game-update":
         console.log(`house-rules - game-update: `, data.update);
+        if ("state" in data.update && data.update.state !== gameState) {
+          setGameState(data.update.state);
+        }
         if ("rules" in data.update && !equal(rules, data.update.rules)) {
           setRules(data.update.rules);
         }
@@ -259,44 +263,50 @@ const HouseRules: React.FC<HouseRulesProps> = ({ houseRulesActive }) => {
     const ruleList = [
       {
         key: "volcano",
-        label: "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={!state["volcano"] || !state["volcano"].enabled} />
+          <Volcano ws={ws} rules={rules} field={"volcano"} disabled={gameState !== 'lobby'} />
         ),
       },
       {
         key: "victory-points",
-        label: "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",
+        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: "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: "Most Ports",
+        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",
+       label: "Why you play so slowf",
+       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" />,
@@ -304,6 +314,7 @@ const HouseRules: React.FC<HouseRulesProps> = ({ houseRulesActive }) => {
       {
         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>,
@@ -311,6 +322,7 @@ const HouseRules: React.FC<HouseRulesProps> = ({ houseRulesActive }) => {
       {
         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>,
@@ -318,6 +330,7 @@ const HouseRules: React.FC<HouseRulesProps> = ({ houseRulesActive }) => {
       {
         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: <></>,
@@ -339,6 +352,7 @@ const HouseRules: React.FC<HouseRulesProps> = ({ houseRulesActive }) => {
 
         return (
           <div key={item.key} className="HouseSelector">
+            <div><b>{item.label}</b>: {item.description}</div>
             <div>
               <Switch
                 size={"small"}
@@ -346,16 +360,15 @@ const HouseRules: React.FC<HouseRulesProps> = ({ houseRulesActive }) => {
                 checked={checked}
                 id={item.key}
                 onChange={(e) => setRule(e, item.key)}
-                {...{ disabled: !name }}
+                disabled={gameState !== 'lobby' || !name}
               />
-              <label htmlFor={item.key}>{item.label}</label>
             </div>
             {checked && item.element}
           </div>
         );
       })
     );
-  }, [rules, setRules, setRuleElements, state, ws, setRule, name]);
+  }, [rules, setRules, setRuleElements, state, ws, setRule, name, gameState]);
 
   if (!houseRulesActive) {
     return <></>;