Implement House Rule enable/disable of Volcano mode

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

client/src/HouseRules.css

@@ -59,7 +59,7 @@
   align-items: center;
 }
 
-.HouseRules .VictoryPoints > button {
+.HouseRules .HouseRule button {
   cursor: pointer;
   padding: 0.5rem;
   border-radius: 0.5rem;
@@ -70,7 +70,7 @@
   min-width: 5rem;
 }
 
-.HouseRules .VictoryPoints > button:hover {
+.HouseRules .HouseRule button:hover {
   background-color: #eee;
 }
 

client/src/HouseRules.js

@@ -9,6 +9,88 @@ import "./HouseRules.css";
 
 import { GlobalContext } from "./GlobalContext.js";
 
+/* Volcano based on https://www.ultraboardgames.com/catan/the-volcano.php */
+const Volcano = ({ ws, rules, field, disabled }) => {
+  const init = (Math.random() > 0.5) 
+    ? Math.floor(7 + Math.random() * 6)
+    : Math.floor(1 + Math.random() * 6);
+  const [number, setNumber] = useState(rules[field].number || init);
+  const [gold, setGold] = useState(rules[field].gold || false);
+  console.log(`house-rules - ${field} - `, rules[field]);
+
+  if (!(field in rules)) {
+    rules[field] = {
+      number: init,
+      gold: gold
+    }
+  };
+
+  const update = (value) => {
+    let number = (rules[field].number || init) + value;
+    if (number < 1 || number > 12) {
+      return;
+    }
+    /* Number to trigger Volcano cannot be 7 */
+    if (number === 7) {
+      number = value > 0 ? 8 : 6;
+    }
+    if (number !== rules[field].number) {
+      setNumber(number);
+      rules[field].number = number;
+      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 ]);
+ 
+  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!
+    </div>
+    <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'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 {number} and the Volcano erupts!
+      <button onClick={() => update(+1)}>up</button>&nbsp;/&nbsp;
+      <button onClick={() => update(-1)}> down</button>
+    </div>
+    <div className="HouseSelector">
+      <div><b>Volcanoes have gold!</b>: Volcano can produce resources when its number is rolled.</div>
+      <div>
+        <Switch
+          size={'small'}
+          className="RuleSwitch"
+          checked={gold}
+          onChange={(e) => setGold(!gold)}
+          {...{ disabled }} />
+      </div>
+    </div>
+    <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'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>
+  </div>;
+}
+
 const VictoryPoints = ({ ws, rules, field }) => {
   const minVP = 10;
   const [points, setPoints] = useState(rules[field].points || minVP);
@@ -97,12 +179,7 @@ const HouseRules = ({ houseRulesActive, setHouseRulesActive }) => {
 
   const dismissClicked = useCallback((event) => {
     setHouseRulesActive(false);
-    /*
-      ws.send(JSON.stringify({
-        type: 'goto-lobby'
-      }));
-    }*/
-  }, [setHouseRulesActive]);//ws, HouseRulesDismissed, setHouseRulesDismissed]);
+  }, [setHouseRulesActive]);
 
   console.log(`house-rules - render - `, { rules });
   
@@ -204,15 +281,35 @@ const HouseRules = ({ houseRulesActive, setHouseRulesActive }) => {
         ws, rules,
         field: `crime-and-punishment`
       }} />,
-    }, {
-      title: `Credit`,
-      key: `credit`,
-      description: `Trade with resources you don't have.`,
-      element: <NotImplemented {...{
-        ws, rules,
-        field: `credit`
-      }} />,
-    } ]
+      }, {
+        title: `Credit? Debt? You bebt!`,
+        key: `credit`,
+        description: `Trade with resources you don't have.`,
+        element: <NotImplemented {...{
+          ws, rules,
+          field: `credit`
+        }} />,
+      }, {
+        title: `Volcanoes are a lava fun!`,
+        key: `volcano`,
+        description: `A volcano is on the island! Let the lava flow!`,
+        element: <Volcano {
+          ...{
+            ws, rules,
+            field: `volcano`,
+            disabled: state !== 'lobby'
+          }
+        } />,
+        implemented: false,
+      }, {
+        title: `Don't keep paying those soldiers!`,
+        key: `mercenaries`,
+        description: `Disband a soldier and pick two resources to receive as tribute. If you no longer have the Longest Army, you lose it.`,
+        element: <NotImplemented {...{
+          ws, rules,
+          field: `credit`
+        }} />,
+      } ]
     .filter(item => item.implemented)
     .sort((A, B) => {
       if (A.implemented && B.implemented) {
@@ -237,8 +334,8 @@ const HouseRules = ({ houseRulesActive, setHouseRulesActive }) => {
       return <div className="HouseRule"
         data-enabled={
           rules
-        && item.key in rules 
-        && rules[item.key].enabled}
+          && item.key in rules 
+          && rules[item.key].enabled}
         data-disabled={disabled} 
         key={item.key}
         data-key={item.key}>

server/routes/games.js

@@ -2631,6 +2631,35 @@ const setRules = (game, session, rules) => {
         `${getName(session)} has ${rules[rule].enabled ? 'en' : 'dis'}abled the Roll Double, Roll Again house rule.`);
       game.rules[rule] = rules[rule];
       break;
+    case 'volcano':
+      if (!rules[rule].enabled) {
+        addChatMessage(game, null,
+          `${getName(session)} has disabled the Volcano ` +
+          `house rule.`);
+      } else {
+        if (!(rule in game.rules) || !game.rules[rule].enabled) {
+          addChatMessage(game, null,
+            `${getName(session)} enabled the Volcano ` +
+            `house rule with roll set to ` +
+            `${rules[rule].number} and 'Volanoes have gold' mode ` +
+            `${rules[rule].gold ? 'en' : 'dis'}abled.`);
+        } else {
+          if (game.rules[rule].number !== rules[rule].number) {
+            addChatMessage(game, null,
+              `${getName(session)} set the Volcano roll to ` +
+              `${rules[rule].number}`);
+          }
+        
+          if (game.rules[rule].gold !== rules[rule].gold) {
+              addChatMessage(game, null,
+                `${getName(session)} has ` +
+                `${rules[rule].gold ? 'en' : 'dis'}abled the ` +
+                `'Volcanoes have gold' mode.`);
+          }
+        }
+      }
+      game.rules[rule] = rules[rule];
+      break;
     case 'twelve-and-two-are-synonyms':
       addChatMessage(game, null,
         `${getName(session)} has ${rules[rule].enabled ? 'en' : 'dis'}abled the Twelve and Two are Synonyms house rule.`);