jketreno/peddlers-of-ketran
1
0
Fork 0
Code Issues 42 Activity

Style tweaks in house rules

Browse Source
This commit is contained in:
James Ketr 2025-10-04 15:11:02 -07:00
parent d36716e8d8
commit 7d0f5ac016
1 changed files with 99 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

237
client/src/HouseRules.tsx
View File

@ -1,11 +1,4 @@
import React, { import React, { useState, useEffect, useContext, useRef, useMemo, useCallback } from "react";
useState,
useEffect,
useContext,
useRef,
useMemo,
useCallback,
} from "react";
import equal from "fast-deep-equal"; import equal from "fast-deep-equal";
import Paper from "@mui/material/Paper"; import Paper from "@mui/material/Paper";
@ -56,12 +49,8 @@ const Volcano: React.FC<VolcanoProps> = ({ sendJsonMessage, rules, field, disabl
Math.random() > 0.5 Math.random() > 0.5
? Math.floor(8 + Math.random() * 5) /* Do not include 7 */ ? Math.floor(8 + Math.random() * 5) /* Do not include 7 */
: Math.floor(2 + Math.random() * 5); /* Do not include 7 */ : Math.floor(2 + Math.random() * 5); /* Do not include 7 */
const [number, setNumber] = useState<number>( const [number, setNumber] = useState<number>(field in rules && "number" in rules[field] ? rules[field].number : init);
field in rules && "number" in rules[field] ? rules[field].number : init const [gold, setGold] = useState<boolean>(field in rules && "gold" in rules[field] ? rules[field].gold : false);
);
const [gold, setGold] = useState<boolean>(
field in rules && "gold" in rules[field] ? rules[field].gold : false
);
console.log(`house-rules - ${field} - `, rules[field]); console.log(`house-rules - ${field} - `, rules[field]);
@ -138,75 +127,62 @@ const Volcano: React.FC<VolcanoProps> = ({ sendJsonMessage, rules, field, disabl
gap: 2, gap: 2,
}} }}
> >
<img <img src={volcanoTile} alt={"Volcano"} style={{ width: "100px", height: "100px" }} />
src={volcanoTile}
alt={"Volcano"}
style={{ width: "100px", height: "100px" }}
/>
<div> <div>
The Volcano replaces the Desert. When the Volcano erupts, roll a die The Volcano replaces the Desert. When the Volcano erupts, roll a die to determine the direction the lava will
to determine the direction the lava will flow. One of the six flow. One of the six intersections on the Volcano tile will be affected. If there is a settlement on the
intersections on the Volcano tile will be affected. If there is a selected intersection, it is destroyed!
settlement on the selected intersection, it is destroyed!
</div> </div>
</Box> </Box>
<div> <div>
Remove it from the board (its owner may rebuild it later). If a city is Remove it from the board (its owner may rebuild it later). If a city is located there, it is reduced to a
located there, it is reduced to a settlement! Replace the city with a settlement! Replace the city with a settlement of its owner&apos;s color. If he has no settlements remaining, the
settlement of its owner&apos;s color. If he has no settlements city is destroyed instead.
remaining, the city is destroyed instead.
</div>
<div>
The presence of the Robber on the Volcano does not prevent the Volcano
from erupting.
</div> </div>
<div>The presence of the Robber on the Volcano does not prevent the Volcano from erupting.</div>
<div> <div>
Roll <b>{number}</b> and the Volcano erupts! Roll <b>{number}</b> and the Volcano erupts!
<Button onClick={() => update(+1)}>up</Button>&nbsp;/&nbsp; <Button onClick={() => update(+1)}>up</Button>&nbsp;/&nbsp;
<Button onClick={() => update(-1)}> down</Button> <Button onClick={() => update(-1)}> down</Button>
</div> </div>
<Paper sx={{ flexGrow: 1, width: "100%" }}> {/* <Paper sx={{ flexGrow: 1, width: "100%" }}> */}
<Table> <Table>
<TableRow>
<TableCell>
<b>Volcanoes have gold!</b>
<br />
Volcano can produce resources when its number is rolled.
</TableCell>
<TableCell>
<Switch
size={"small"}
className="RuleSwitch"
checked={gold}
onChange={() => toggleGold()}
{...{ disabled }}
/>
</TableCell>
</TableRow>
{gold && (
<TableRow> <TableRow>
<TableCell> <TableCell colSpan={3}>
<b>Volcanoes have gold!</b> <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
<br /> <div>
Volcano can produce resources when its number is rolled. Volcanoes tend to be rich in valuable minerals such as gold or gems. Each settlement that is adjacent
</TableCell> to the Volcano when it erupts may produce any one of the five resources it&apos;s owner desires.
<TableCell> </div>
<Switch <div>
size={"small"} Each city adjacent to the Volcano may produce any two resources. This resource production is taken
className="RuleSwitch" before the results of the volcano eruption are resolved. Note that while the Robber can not prevent the
checked={gold} Volcano from erupting, he does prevent any player from producing resources from the Volcano hex if he
onChange={() => toggleGold()} has been placed there.
{...{ disabled }} </div>
/> </Box>
</TableCell> </TableCell>
</TableRow> </TableRow>
{gold && ( )}
<TableRow> </Table>
<TableCell colSpan={3}> {/* </Paper> */}
<Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
<div>
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&apos;s owner desires.
</div>
<div>
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.
</div>
</Box>
</TableCell>
</TableRow>
)}
</Table>
</Paper>
</Box> </Box>
); );
}; };
@ -249,15 +225,18 @@ const VictoryPoints: React.FC<VictoryPointsProps> = ({ sendJsonMessage, rules, f
}; };
return ( return (
<Box className="VictoryPoints" sx={{display: 'flex', flexDirection: 'column', gap: 2, marginTop: 2}}> <Box className="VictoryPoints" sx={{ display: "flex", flexDirection: "column", gap: 2, marginTop: 2 }}>
<Box> <Box>
The first to reach <b>{points}</b> points wins! The first to reach <b>{points}</b> points wins!
<Button onClick={() => update(+1)}>up</Button>&nbsp;/&nbsp; <Button onClick={() => update(+1)}>up</Button>&nbsp;/&nbsp;
<Button onClick={() => update(-1)}> down</Button> <Button onClick={() => update(-1)}> down</Button>
</Box> </Box>
<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! This flexible twist of a rule lets you customize the number of Victory Points needed to claim victory, whether
</Box> 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> </Box>
); );
}; };
@ -267,10 +246,7 @@ interface HouseRulesProps {
setHouseRulesActive: React.Dispatch<React.SetStateAction<boolean>>; setHouseRulesActive: React.Dispatch<React.SetStateAction<boolean>>;
} }
const HouseRules: React.FC<HouseRulesProps> = ({ const HouseRules: React.FC<HouseRulesProps> = ({ houseRulesActive, setHouseRulesActive }) => {
houseRulesActive,
setHouseRulesActive,
}) => {
const { ws, name, sendJsonMessage } = useContext(GlobalContext); const { ws, name, sendJsonMessage } = useContext(GlobalContext);
const [rules, setRules] = useState<any>({}); const [rules, setRules] = useState<any>({});
const [state, setState] = useState<any>({}); const [state, setState] = useState<any>({});
@ -360,29 +336,25 @@ const HouseRules: React.FC<HouseRulesProps> = ({
description: "Customize how many Victory Points are required to win.", description: "Customize how many Victory Points are required to win.",
category: "rules", category: "rules",
defaultChecked: false, defaultChecked: false,
element: ( element: <VictoryPoints sendJsonMessage={sendJsonMessage} rules={rules} field={"victory-points"} />,
<VictoryPoints sendJsonMessage={sendJsonMessage} rules={rules} field={"victory-points"} />
),
}, },
{ {
key: "tiles-start-facing-down", key: "tiles-start-facing-down",
label: "Tiles start facing down", label: "Tiles start facing down",
description: description: "Resource tiles start upside-down while placing starting settlements.",
"Resource tiles start upside-down while placing starting settlements.",
category: "board", category: "board",
defaultChecked: false, defaultChecked: false,
element: ( element: (
<div> <div>
Once all players have placed their initial settlements and roads, Once all players have placed their initial settlements and roads, the tiles are flipped and you discover
the tiles are flipped and you discover what the resources are. what the resources are.
</div> </div>
), ),
}, },
{ {
key: "most-developed", key: "most-developed",
label: "You are so developed!", label: "You are so developed!",
description: description: "The player with the most development cards (more than 4) receives 2VP.",
"The player with the most development cards (more than 4) receives 2VP.",
category: "expansion", category: "expansion",
defaultChecked: false, defaultChecked: false,
element: ( element: (
@ -398,12 +370,10 @@ const HouseRules: React.FC<HouseRulesProps> = ({
type="most-developed" type="most-developed"
/> />
<Typography variant="body2"> <Typography variant="body2">
This card rewards the player who amasses more than 4 development This card rewards the player who amasses more than 4 development cards with a glorious 2 Victory Points,
cards with a glorious 2 Victory Points, turning your strategic turning your strategic savvy into a medieval masterpiece complete with towering cities and bustling
savvy into a medieval masterpiece complete with towering cities fields. Picture yourself snagging this beautifully illustrated card—featuring hardworking villagers and a
and bustling fields. Picture yourself snagging this beautifully majestic castle!
illustrated card—featuring hardworking villagers and a majestic
castle!
</Typography> </Typography>
</Box> </Box>
), ),
@ -411,8 +381,7 @@ const HouseRules: React.FC<HouseRulesProps> = ({
{ {
key: "port-of-call", key: "port-of-call",
label: "Another round of port?", label: "Another round of port?",
description: description: "The player with the most harbor ports (more than 2) receives 2VP.",
"The player with the most harbor ports (more than 2) receives 2VP.",
category: "expansion", category: "expansion",
defaultChecked: false, defaultChecked: false,
element: ( element: (
@ -428,15 +397,11 @@ const HouseRules: React.FC<HouseRulesProps> = ({
type="port-of-call" type="port-of-call"
/> />
<Typography variant="body2"> <Typography variant="body2">
Raise your mugs and hoist the sails! This lively card rewards Raise your mugs and hoist the sails! This lively card rewards the most seasoned seafarer among the
the most seasoned seafarer among the settlers. When you control settlers. When you control more than two harbor ports, you claim this card and earn 2 Victory Points as a
more than two harbor ports, you claim this card and earn 2 tribute to your mastery of the seas. But beware — other ambitious captains are watching closely! The
Victory Points as a tribute to your mastery of the seas. But moment someone else builds a larger network of harbors, they’ll steal both the card and the glory right
beware — other ambitious captains are watching closely! The from under your nose. Keep those ships moving and never let your rivals toast to your downfall!
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> </Typography>
</Box> </Box>
), ),
@ -444,8 +409,7 @@ const HouseRules: React.FC<HouseRulesProps> = ({
{ {
key: "slowest-turn", key: "slowest-turn",
label: "Why you play so slow?", label: "Why you play so slow?",
description: description: "The player with the longest turn idle time (longer than 2 minutes) so far loses 2VP.",
"The player with the longest turn idle time (longer than 2 minutes) so far loses 2VP.",
category: "expansion", category: "expansion",
defaultChecked: false, defaultChecked: false,
element: ( element: (
@ -461,11 +425,9 @@ const HouseRules: React.FC<HouseRulesProps> = ({
type="longest-turn" type="longest-turn"
/> />
<Typography variant="body2" sx={{ marginTop: "1rem" }}> <Typography variant="body2" sx={{ marginTop: "1rem" }}>
If your turn idle time drags on past 2 minutes, you’re slapped If your turn idle time drags on past 2 minutes, you’re slapped with a -2 Victory Points penalty and
with a -2 Victory Points penalty and handed this charming handed this charming card—featuring industrious villagers raking hay with a castle looming in the
card—featuring industrious villagers raking hay with a castle background—until someone even slower takes it from you with a sheepish grin!
looming in the background—until someone even slower takes it
from you with a sheepish grin!
</Typography> </Typography>
</Box> </Box>
), ),
@ -478,49 +440,39 @@ const HouseRules: React.FC<HouseRulesProps> = ({
defaultChecked: false, defaultChecked: false,
element: ( element: (
<div> <div>
If you roll doubles, players get those resources and then you must If you roll doubles, players get those resources and then you must roll again.
roll again. <Box sx={{ display: "block", fontWeight: "bold", pt: 1, pb: 1 }}>Note:</Box>
<Box sx={{ display: "block", fontWeight: "bold", pt: 1, pb: 1 }}> This stacks with Two and Twelve are Synonyms. So if you roll double ones (2), you get resources for 2 and
Note: 12, then roll again!
</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> </div>
), ),
}, },
{ {
key: "twelve-and-two-are-synonyms", key: "twelve-and-two-are-synonyms",
label: "Twelve and Two are synonyms", label: "Twelve and Two are synonyms",
description: description: "If twelve is rolled, two scores as well. And vice-versa.",
"If twelve is rolled, two scores as well. And vice-versa.",
category: "rolling", category: "rolling",
defaultChecked: false, defaultChecked: false,
element: ( element: (
<div> <div>
If you roll a twelve or two, resources are triggered for both. If you roll a twelve or two, resources are triggered for both.
<Box sx={{ display: "block", fontWeight: "bold", pt: 1, pb: 1 }}> <Box sx={{ display: "block", fontWeight: "bold", pt: 1, pb: 1 }}>Note:</Box> This stacks with Roll Double,
Note: Roll Again. So if you roll double sixes (12), you get resources for 2 and 12, then roll again!
</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> </div>
), ),
}, },
{ {
key: "robin-hood-robber", key: "robin-hood-robber",
label: "Robin Hood robber", label: "Robin Hood robber",
description: description: "Robbers can't steal from players with two or less victory points.",
"Robbers can't steal from players with two or less victory points.",
category: "rules", category: "rules",
defaultChecked: false, defaultChecked: false,
element: ( element: (
<Typography variant="body2"> <Typography variant="body2">
This rule turns the robber into a noble thief, forbidding him from This rule turns the robber into a noble thief, forbidding him from pilfering resources from players with
pilfering resources from players with two or fewer Victory two or fewer Victory Points—leaving the underdogs safe while the wealthier lords tremble. Watch as the
Points—leaving the underdogs safe while the wealthier lords tables turn with a wink and a grin, adding a layer of strategy where protecting the little guy might just
tremble. Watch as the tables turn with a wink and a grin, adding a be the key to your own rise to power!
layer of strategy where protecting the little guy might just be
the key to your own rise to power!
</Typography> </Typography>
), ),
}, },
@ -563,7 +515,7 @@ const HouseRules: React.FC<HouseRulesProps> = ({
return ( return (
<React.Fragment key={item.key}> <React.Fragment key={item.key}>
<TableRow> <TableRow sx={{ borderTop: "1px solid lightgray" }}>
<TableCell sx={{ width: "50px" }}> <TableCell sx={{ width: "50px" }}>
{/* Fixed width for image */} {/* Fixed width for image */}
<img <img
@ -589,8 +541,17 @@ const HouseRules: React.FC<HouseRulesProps> = ({
</TableCell> </TableCell>
</TableRow> </TableRow>
{checked && ( {checked && (
<TableRow> <TableRow
<TableCell colSpan={3}>{item.element}</TableCell> sx={{
boxShadow: "inset 0 3px 5px -3px rgba(0,0,0,0.5), inset 0 -3px 5px -3px rgba(0,0,0,0.5)",
backgroundColor: "rgba(0,0,0,0.1)",
}}
>
<TableCell colSpan={3}>
<Paper elevation={3} sx={{ p: 1, m: 0.5, fontSize: "0.8rem" }}>
{item.element}
</Paper>
</TableCell>
</TableRow> </TableRow>
)} )}
</React.Fragment> </React.Fragment>