127 lines
3.8 KiB
JavaScript
127 lines
3.8 KiB
JavaScript
import React, { useState, useEffect, useContext, useRef, useMemo, useCallback } from "react";
|
|
import equal from "fast-deep-equal";
|
|
|
|
import Paper from '@material-ui/core/Paper';
|
|
import Button from '@material-ui/core/Button';
|
|
import Switch from '@material-ui/core/Switch';
|
|
|
|
import "./HouseRules.css";
|
|
|
|
import { GlobalContext } from "./GlobalContext.js";
|
|
|
|
const HouseRules = ({ houseRulesActive, setHouseRulesActive }) => {
|
|
const { ws } = useContext(GlobalContext);
|
|
const [houseRules, setHouseRules] = useState(undefined);
|
|
const [state, setState] = useState(undefined);
|
|
const fields = useMemo(() => [
|
|
'state', 'rules'
|
|
], []);
|
|
const onWsMessage = (event) => {
|
|
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 !== state) {
|
|
setState(data.update.state);
|
|
}
|
|
if ('rules' in data.update && !equal(data.update.rules, rules)) {
|
|
setHouseRules(data.update.rules);
|
|
}
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
};
|
|
const refWsMessage = useRef(onWsMessage);
|
|
useEffect(() => { refWsMessage.current = onWsMessage; });
|
|
useEffect(() => {
|
|
if (!ws) { return; }
|
|
const cbMessage = e => refWsMessage.current(e);
|
|
ws.addEventListener('message', cbMessage);
|
|
return () => {
|
|
ws.removeEventListener('message', cbMessage);
|
|
}
|
|
}, [ws, refWsMessage]);
|
|
useEffect(() => {
|
|
if (!ws) { return; }
|
|
ws.send(JSON.stringify({
|
|
type: 'get',
|
|
fields
|
|
}));
|
|
}, [ws, fields]);
|
|
|
|
const dismissClicked = useCallback((event) => {
|
|
setHouseRulesActive(false);
|
|
/*
|
|
ws.send(JSON.stringify({
|
|
type: 'goto-lobby'
|
|
}));
|
|
}*/
|
|
}, [setHouseRulesActive]);//ws, HouseRulesDismissed, setHouseRulesDismissed]);
|
|
|
|
if (!houseRulesActive) {
|
|
return <></>;
|
|
}
|
|
|
|
const setRule = (event, key) => {
|
|
console.log(event, key);
|
|
};
|
|
|
|
const rules = [ {
|
|
title: `Tiles start facing down`,
|
|
description: `Flip resource tiles upside - down while placing starting settlements.`,
|
|
}, {
|
|
title: `Bribery`,
|
|
description: `Dissuade enemies from robbing you by offering resources voluntarily.`,
|
|
}, {
|
|
title: `King of the Hill`,
|
|
description: `Keep your lead for one full turn after you reach max victory points.`,
|
|
}, {
|
|
title: `Everyone gets one re-roll`,
|
|
description: `Each player gets one chance re - roll at any point.`,
|
|
}, {
|
|
title: `The Bridge`,
|
|
description: `Build a super-bridge across one resource tile.`,
|
|
}, {
|
|
title: `Discard desert`,
|
|
description: `Scrap the desert in favour of an additional resource tile.`,
|
|
}, {
|
|
title: `Roll double, roll again`,
|
|
description: `Roll again if you roll two of the same number.`,
|
|
}, {
|
|
title: `Robin Hood robber`,
|
|
description: `Robbers can't steal from players with fewer than two victory points.`,
|
|
}, {
|
|
title: `Crime and Punishment`,
|
|
description: `Change how the robber works to make Catan more or less competitive.`,
|
|
}, {
|
|
title: `Credit`,
|
|
description: `Trade with resources you don't have.`,
|
|
} ].map(item => {
|
|
item.key = item.title
|
|
.replace(/( +)|[,]/g, '-')
|
|
.toLowerCase();
|
|
const disabled = (state !== 'lobby'),
|
|
checked = houseRules && item.key in houseRules;
|
|
return <div className="HouseRule" key={item.key}>
|
|
<div><b>{item.title}</b>: {item.description}</div>
|
|
<Switch checked={checked}
|
|
onChange={(e) => setRule(e, item.key)}
|
|
{...{disabled}} />
|
|
</div>
|
|
});
|
|
|
|
return (
|
|
<div className="HouseRules">
|
|
<Paper>
|
|
<div className="Title">House Rules</div>
|
|
<div style={{display: 'flex', flexDirection: 'column'}}>
|
|
{ rules }
|
|
</div>
|
|
<Button onClick={dismissClicked}>Close</Button>
|
|
</Paper>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export { HouseRules }; |