Fix volcano toggling

Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>

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 <div className="Volcano">
     <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!
@@ -78,7 +77,7 @@ const Volcano = ({ ws, rules, field, disabled }) => {
           size={'small'}
           className="RuleSwitch"
           checked={gold}
-          onChange={(e) => setGold(!gold)}
+          onChange={(e) => toggleGold()}
           {...{ disabled }} />
       </div>
     </div>