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, {
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<VolcanoProps> = ({ 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<number>(
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 [number, setNumber] = useState<number>(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);
console.log(`house-rules - ${field} - `, rules[field]);
@ -138,75 +127,62 @@ const Volcano: React.FC<VolcanoProps> = ({ sendJsonMessage, rules, field, disabl
gap: 2,
}}
>
<img
src={volcanoTile}
alt={"Volcano"}
style={{ width: "100px", height: "100px" }}
/>
<img src={volcanoTile} alt={"Volcano"} style={{ width: "100px", height: "100px" }} />
<div>
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!
</div>
</Box>
<div>
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&apos;s color. If he has no settlements
remaining, the city is destroyed instead.
</div>
<div>
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&apos;s color. If he has no settlements 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>
Roll <b>{number}</b> and the Volcano erupts!
<Button onClick={() => update(+1)}>up</Button>&nbsp;/&nbsp;
<Button onClick={() => update(-1)}> down</Button>
</div>
<Paper sx={{ flexGrow: 1, width: "100%" }}>
<Table>
{/* <Paper sx={{ flexGrow: 1, width: "100%" }}> */}
<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>
<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 colSpan={3}>
<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>
{gold && (
<TableRow>
<TableCell colSpan={3}>
<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>
)}
</Table>
{/* </Paper> */}
</Box>
);
};
@ -249,15 +225,18 @@ const VictoryPoints: React.FC<VictoryPointsProps> = ({ sendJsonMessage, rules, f
};
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>
The first to reach <b>{points}</b> points wins!
<Button onClick={() => update(+1)}>up</Button>&nbsp;/&nbsp;
<Button onClick={() => update(-1)}> down</Button>
The first to reach <b>{points}</b> points wins!
<Button onClick={() => update(+1)}>up</Button>&nbsp;/&nbsp;
<Button onClick={() => update(-1)}> down</Button>
</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>
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>
);
};
@ -267,10 +246,7 @@ 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, sendJsonMessage } = useContext(GlobalContext);
const [rules, setRules] = 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.",
category: "rules",
defaultChecked: false,
element: (
<VictoryPoints sendJsonMessage={sendJsonMessage} rules={rules} field={"victory-points"} />
),
element: <VictoryPoints sendJsonMessage={sendJsonMessage} rules={rules} field={"victory-points"} />,
},
{
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: (
<div>
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.
</div>
),
},
{
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<HouseRulesProps> = ({
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!
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>
),
@ -411,8 +381,7 @@ const HouseRules: React.FC<HouseRulesProps> = ({
{
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<HouseRulesProps> = ({
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!
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>
),
@ -444,8 +409,7 @@ const HouseRules: React.FC<HouseRulesProps> = ({
{
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<HouseRulesProps> = ({
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!
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>
),
@ -478,49 +440,39 @@ const HouseRules: React.FC<HouseRulesProps> = ({
defaultChecked: false,
element: (
<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!
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!
<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>
),
},
{
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: (
<Typography variant="body2">
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!
</Typography>
),
},
@ -563,7 +515,7 @@ const HouseRules: React.FC<HouseRulesProps> = ({
return (
<React.Fragment key={item.key}>
<TableRow>
<TableRow sx={{ borderTop: "1px solid lightgray" }}>
<TableCell sx={{ width: "50px" }}>
{/* Fixed width for image */}
<img
@ -589,8 +541,17 @@ const HouseRules: React.FC<HouseRulesProps> = ({
</TableCell>
</TableRow>
{checked && (
<TableRow>
<TableCell colSpan={3}>{item.element}</TableCell>
<TableRow
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>
)}
</React.Fragment>