diff --git a/client/src/HouseRules.tsx b/client/src/HouseRules.tsx index aa40278..5045611 100644 --- a/client/src/HouseRules.tsx +++ b/client/src/HouseRules.tsx @@ -1,11 +1,4 @@ -import React, { - useState, - useEffect, - useContext, - useRef, - useMemo, - useCallback, -} from "react"; +import React, { useState, useEffect, useContext, useRef, useMemo, useCallback } from "react"; import equal from "fast-deep-equal"; import Paper from "@mui/material/Paper"; @@ -56,12 +49,8 @@ const Volcano: React.FC = ({ sendJsonMessage, rules, field, disabl Math.random() > 0.5 ? Math.floor(8 + Math.random() * 5) /* Do not include 7 */ : Math.floor(2 + Math.random() * 5); /* Do not include 7 */ - const [number, setNumber] = useState( - field in rules && "number" in rules[field] ? rules[field].number : init - ); - const [gold, setGold] = useState( - field in rules && "gold" in rules[field] ? rules[field].gold : false - ); + const [number, setNumber] = useState(field in rules && "number" in rules[field] ? rules[field].number : init); + const [gold, setGold] = useState(field in rules && "gold" in rules[field] ? rules[field].gold : false); console.log(`house-rules - ${field} - `, rules[field]); @@ -138,75 +127,62 @@ const Volcano: React.FC = ({ sendJsonMessage, rules, field, disabl gap: 2, }} > - {"Volcano"} + {"Volcano"}
- The Volcano replaces the Desert. When the Volcano erupts, roll a die - to determine the direction the lava will flow. One of the six - intersections on the Volcano tile will be affected. If there is a - settlement on the selected intersection, it is destroyed! + The Volcano replaces the Desert. When the Volcano erupts, roll a die to determine the direction the lava will + flow. One of the six intersections on the Volcano tile will be affected. If there is a settlement on the + selected intersection, it is destroyed!
- Remove it from the board (its owner may rebuild it later). If a city is - located there, it is reduced to a settlement! Replace the city with a - settlement of its owner's color. If he has no settlements - remaining, the city is destroyed instead. -
-
- The presence of the Robber on the Volcano does not prevent the Volcano - from erupting. + Remove it from the board (its owner may rebuild it later). If a city is located there, it is reduced to a + settlement! Replace the city with a settlement of its owner's color. If he has no settlements remaining, the + city is destroyed instead.
+
The presence of the Robber on the Volcano does not prevent the Volcano from erupting.
Roll {number} and the Volcano erupts!  / 
- - + {/* */} +
+ + + Volcanoes have gold! +
+ Volcano can produce resources when its number is rolled. + + + toggleGold()} + {...{ disabled }} + /> + + + {gold && ( - - Volcanoes have gold! -
- Volcano can produce resources when its number is rolled. - - - toggleGold()} - {...{ disabled }} - /> + + +
+ Volcanoes tend to be rich in valuable minerals such as gold or gems. Each settlement that is adjacent + to the Volcano when it erupts may produce any one of the five resources it's owner desires. +
+
+ Each city adjacent to the Volcano may produce any two resources. This resource production is taken + before the results of the volcano eruption are resolved. Note that while the Robber can not prevent the + Volcano from erupting, he does prevent any player from producing resources from the Volcano hex if he + has been placed there. +
+ - {gold && ( - - - -
- Volcanoes tend to be rich in valuable minerals such as gold - or gems. Each settlement that is adjacent to the Volcano - when it erupts may produce any one of the five resources - it's owner desires. -
-
- Each city adjacent to the Volcano may produce any two - resources. This resource production is taken before the - results of the volcano eruption are resolved. Note that - while the Robber can not prevent the Volcano from erupting, - he does prevent any player from producing resources from the - Volcano hex if he has been placed there. -
- - - - )} -
- + )} + + {/* */} ); }; @@ -249,15 +225,18 @@ const VictoryPoints: React.FC = ({ sendJsonMessage, rules, f }; return ( - + - The first to reach {points} points wins! -  /  - + The first to reach {points} points wins! +  /  + - 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! - + 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! + ); }; @@ -267,10 +246,7 @@ interface HouseRulesProps { setHouseRulesActive: React.Dispatch>; } -const HouseRules: React.FC = ({ - houseRulesActive, - setHouseRulesActive, -}) => { +const HouseRules: React.FC = ({ houseRulesActive, setHouseRulesActive }) => { const { ws, name, sendJsonMessage } = useContext(GlobalContext); const [rules, setRules] = useState({}); const [state, setState] = useState({}); @@ -360,29 +336,25 @@ const HouseRules: React.FC = ({ description: "Customize how many Victory Points are required to win.", category: "rules", defaultChecked: false, - element: ( - - ), + element: , }, { key: "tiles-start-facing-down", label: "Tiles start facing down", - description: - "Resource tiles start upside-down while placing starting settlements.", + 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. + 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: "You are so developed!", - description: - "The player with the most development cards (more than 4) receives 2VP.", + description: "The player with the most development cards (more than 4) receives 2VP.", category: "expansion", defaultChecked: false, element: ( @@ -398,12 +370,10 @@ const HouseRules: React.FC = ({ type="most-developed" /> - 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! + 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! ), @@ -411,8 +381,7 @@ const HouseRules: React.FC = ({ { key: "port-of-call", label: "Another round of port?", - description: - "The player with the most harbor ports (more than 2) receives 2VP.", + description: "The player with the most harbor ports (more than 2) receives 2VP.", category: "expansion", defaultChecked: false, element: ( @@ -428,15 +397,11 @@ const HouseRules: React.FC = ({ type="port-of-call" /> - 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! + 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! ), @@ -444,8 +409,7 @@ const HouseRules: React.FC = ({ { 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.", + description: "The player with the longest turn idle time (longer than 2 minutes) so far loses 2VP.", category: "expansion", defaultChecked: false, element: ( @@ -461,11 +425,9 @@ const HouseRules: React.FC = ({ type="longest-turn" /> - 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! + 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! ), @@ -478,49 +440,39 @@ const HouseRules: React.FC = ({ defaultChecked: false, element: (
- If you roll doubles, players get those resources and then you must - roll again. - - Note: - - 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! + If you roll doubles, players get those resources and then you must roll again. + Note: + 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!
), }, { 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: (
If you roll a twelve or two, resources are triggered for both. - - Note: - {" "} - This stacks with Roll Double, Roll Again. So if you roll double - sixes (12), you get resources for 2 and 12, then roll again! + Note: This stacks with Roll Double, + Roll Again. So if you roll double sixes (12), you get resources for 2 and 12, then roll again!
), }, { key: "robin-hood-robber", label: "Robin Hood robber", - description: - "Robbers can't steal from players with two or less victory points.", + description: "Robbers can't steal from players with two or less victory points.", category: "rules", defaultChecked: false, element: ( - This rule turns the robber into a noble thief, forbidding him from - pilfering resources from players with two or fewer Victory - Points—leaving the underdogs safe while the wealthier lords - tremble. Watch as the tables turn with a wink and a grin, adding a - layer of strategy where protecting the little guy might just be - the key to your own rise to power! + This rule turns the robber into a noble thief, forbidding him from pilfering resources from players with + two or fewer Victory Points—leaving the underdogs safe while the wealthier lords tremble. Watch as the + tables turn with a wink and a grin, adding a layer of strategy where protecting the little guy might just + be the key to your own rise to power! ), }, @@ -563,7 +515,7 @@ const HouseRules: React.FC = ({ return ( - + {/* Fixed width for image */} = ({ {checked && ( - - {item.element} + + + + {item.element} + + )}