diff --git a/client/src/HouseRules.js b/client/src/HouseRules.js index b796a63..821c262 100644 --- a/client/src/HouseRules.js +++ b/client/src/HouseRules.js @@ -15,46 +15,45 @@ const Volcano = ({ ws, rules, field, disabled }) => { const init = (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(rules[field].number || init); - const [gold, setGold] = useState(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]); - if (!(field in rules)) { - rules[field] = {}; + useEffect(() => { + setGold(rules[field].gold); + setNumber(rules[field].number); + }, [rules, field]); + + const toggleGold = () => { + rules[field].gold = !gold; + setGold(rules[field].gold); + + ws.send(JSON.stringify({ + type: 'rules', + rules: rules + })); }; - const update = (value) => { - let number = (rules[field].number || init) + value; - if (number < 2 || number > 12) { + const update = (delta) => { + let value = number + delta; + if (value < 2 || value > 12) { return; } /* Number to trigger Volcano cannot be 7 */ - if (number === 7) { - number = value > 0 ? 8 : 6; + if (value === 7) { + value = delta > 0 ? 8 : 6; } - setNumber(number); + setNumber(value); + rules[field].number = value; + ws.send(JSON.stringify({ + type: 'rules', + rules: rules + })); }; - useEffect(() => { - if (rules[field].gold !== gold) { - rules[field].gold = gold; - ws.send(JSON.stringify({ - type: 'rules', - rules: rules - })); - } - }, [ rules, ws, gold, field ]); - - useEffect(() => { - if (rules[field].number !== number) { - rules[field].number = number; - ws.send(JSON.stringify({ - type: 'rules', - rules: rules - })); - } - }, [rules, ws, number, field]); - return
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! @@ -78,7 +77,7 @@ const Volcano = ({ ws, rules, field, disabled }) => { size={'small'} className="RuleSwitch" checked={gold} - onChange={(e) => setGold(!gold)} + onChange={(e) => toggleGold()} {...{ disabled }} />