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

Improving House Rules UX

Browse Source
This commit is contained in:
James Ketr 2025-09-25 12:06:57 -07:00
parent a3425b3178
commit 25bb7d05a5
2 changed files with 69 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
client/src/App.tsx
View File

@ -26,6 +26,7 @@ import { assetsPath } from "./Common";
// history replaced by react-router's useNavigate
import "./App.css";
import equal from "fast-deep-equal";
import { Box } from "@mui/material";
type AudioEffect = HTMLAudioElement & { hasPlayed?: boolean };
const audioEffects: Record<string, AudioEffect | undefined> = {};
@ -407,7 +408,7 @@ const Table: React.FC = () => {
)}
</div>
<div className="Game">
<div className="Dialogs">
<Box className="Dialogs">
{error && (
<div className="Dialog ErrorDialog">
<Paper className="Error">
@ -454,11 +455,15 @@ const Table: React.FC = () => {
{state === "normal" && <SelectPlayer />}
{color && state === "game-order" && <GameOrder />}
{!winnerDismissed && <Winner {...{ winnerDismissed, setWinnerDismissed }} />}
{houseRulesActive && <HouseRules {...{ houseRulesActive, setHouseRulesActive }} />}
{!winnerDismissed && (
<Winner {...{ winnerDismissed, setWinnerDismissed }} />
)}
{houseRulesActive && (
<HouseRules {...{ houseRulesActive, setHouseRulesActive }} />
)}
<ViewCard {...{ cardActive, setCardActive }} />
<ChooseCard />
</div>
</Box>
<Board animations={animations} />
<PlayersStatus active={false} />
@ -489,7 +494,9 @@ const Table: React.FC = () => {
min="0"
max="100"
onInput={(e) => {
const alpha = parseFloat((e.currentTarget as HTMLInputElement).value) / 100;
const alpha =
parseFloat((e.currentTarget as HTMLInputElement).value) /
100;
localStorage.setItem("volume", alpha.toString());
setVolume(alpha);
@ -516,13 +523,25 @@ const Table: React.FC = () => {
tradeActive: boolean;
setTradeActive: (v: boolean) => void;
}>;
return <TradeComponent tradeActive={tradeActive} setTradeActive={setTradeActive} />;
return (
<TradeComponent
tradeActive={tradeActive}
setTradeActive={setTradeActive}
/>
);
})()}
{name !== "" && <Chat />}
{/* name !== "" && <VideoFeeds/> */}
{loaded && (
<Actions
{...{ buildActive, setBuildActive, tradeActive, setTradeActive, houseRulesActive, setHouseRulesActive }}
{...{
buildActive,
setBuildActive,
tradeActive,
setTradeActive,
houseRulesActive,
setHouseRulesActive,
}}
/>
)}
</div>

87
client/src/HouseRules.tsx
View File

@ -11,6 +11,10 @@ import equal from "fast-deep-equal";
import Paper from "@mui/material/Paper";
import Button from "@mui/material/Button";
import Switch from "@mui/material/Switch";
import Dialog from "@mui/material/Dialog";
import DialogTitle from "@mui/material/DialogTitle";
import DialogContent from "@mui/material/DialogContent";
import DialogActions from "@mui/material/DialogActions";
// import "./HouseRules.css";
@ -396,52 +400,47 @@ const HouseRules: React.FC<HouseRulesProps> = ({ houseRulesActive }) => {
}
return (
<Paper
className="HouseRules"
sx={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
maxHeight: "100dvh",
overflow: "hidden",
}}
>
<Box className="Title">House Rules</Box>
<Box sx={{ display: "flex", flexDirection: "column" }}>
{ruleList.map((item) => {
const defaultChecked = item.defaultChecked;
if (!(item.key in rules)) {
rules[item.key] = {
enabled: defaultChecked,
};
}
const checked = rules[item.key].enabled;
if (checked !== state[item.key]) {
setState({ ...state, [item.key]: checked });
}
<Paper sx={{ p: 1, maxWidth: 600, margin: "1rem auto", flexDirection: "column", display: "flex" }} className="HouseRules" elevation={3}>
<DialogTitle>House Rules</DialogTitle>
<DialogContent>
<Box sx={{ display: "flex", flexDirection: "column" }}>
{ruleList.map((item) => {
const defaultChecked = item.defaultChecked;
if (!(item.key in rules)) {
rules[item.key] = {
enabled: defaultChecked,
};
}
const checked = rules[item.key].enabled;
if (checked !== state[item.key]) {
setState({ ...state, [item.key]: checked });
}
return (
<div key={item.key} className="HouseSelector">
<div>
<b>{item.label}</b>: {item.description}
return (
<div key={item.key} className="HouseSelector">
<div>
<b>{item.label}</b>: {item.description}
</div>
<div>
<Switch
size={"small"}
className="RuleSwitch"
checked={checked}
id={item.key}
onChange={(e) => setRule(e, item.key)}
disabled={gameState !== "lobby" || !name}
/>
</div>
{checked && item.element}
</div>
<div>
<Switch
size={"small"}
className="RuleSwitch"
checked={checked}
id={item.key}
onChange={(e) => setRule(e, item.key)}
disabled={gameState !== "lobby" || !name}
/>
</div>
{checked && item.element}
</div>
);
})}
</Box>
<Button onClick={dismissClicked}>Close</Button>
);
})}
</Box>
</DialogContent>
<DialogActions>
<Button onClick={dismissClicked}>Close</Button>
</DialogActions>
</Paper>
);
};