diff --git a/client/src/HouseRules.tsx b/client/src/HouseRules.tsx index ef7f157..47f299b 100644 --- a/client/src/HouseRules.tsx +++ b/client/src/HouseRules.tsx @@ -186,14 +186,18 @@ const HouseRules: React.FC = ({ houseRulesActive }) => { const { ws, name } = useContext(GlobalContext); const [rules, setRules] = useState({}); const [state, setState] = useState({}); + const [gameState, setGameState] = useState(''); const [ruleElements, setRuleElements] = useState([]); - 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 = ({ 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: ( - + ), }, { 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: , }, { 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:
Once all players have placed their initial settlements and roads, the tiles are flipped and you discover what the resources are.
, }, { 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: , }, { 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: , }, { 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: , @@ -304,6 +314,7 @@ const HouseRules: React.FC = ({ 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:
If you roll doubles, players get those resources and then you must roll again.
, @@ -311,6 +322,7 @@ const HouseRules: React.FC = ({ 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:
If you roll a twelve or two, resources are triggered for both.
, @@ -318,6 +330,7 @@ const HouseRules: React.FC = ({ 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 = ({ houseRulesActive }) => { return (
+
{item.label}: {item.description}
= ({ houseRulesActive }) => { checked={checked} id={item.key} onChange={(e) => setRule(e, item.key)} - {...{ disabled: !name }} + disabled={gameState !== 'lobby' || !name} /> -
{checked && item.element}
); }) ); - }, [rules, setRules, setRuleElements, state, ws, setRule, name]); + }, [rules, setRules, setRuleElements, state, ws, setRule, name, gameState]); if (!houseRulesActive) { return <>;