Display Volcano and assign Pip roll Number

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

client/src/Board.js

@@ -452,6 +452,13 @@ const Board = () => {
           left: x,
           order: order
         };
+        if ('volcano' in rules
+          && rules[`volcano`].enabled
+          && pip.roll === 7) {
+          pip.order = pips.findIndex(
+            pip => pip.roll === rules[`volcano`].number);
+          pip.roll = rules[`volcano`].number;
+        }
         const div = <Pip
           pip={pip}
           key={`pip-${order}`}
@@ -471,16 +478,24 @@ const Board = () => {
     };
   
     const Tile = ({tile}) => {
-      return <div className="Tile"
+      const style = {
-        data-index={tile.index}
-        style={{
         top: `${tile.top}px`,
         left: `${tile.left}px`,
         width: `${tileImageWidth}px`,
         height: `${tileImageHeight}px`,
         backgroundImage: `url(${assetsPath}/gfx/tiles-${tile.type}.png)`,
         backgroundPositionY: `-${tile.card * tileHeight}px`
-        }}
+      };
+
+      if (tile.type === 'volcano') {
+        style.transform = `rotate(-90deg)`;
+        style.top = `${tile.top + 6}px`;
+        style.transformOrigin = '0% 50%';
+      }
+
+      return <div className="Tile"
+        data-index={tile.index}
+        style={{...style}}
       ><div className="Tile-Shape"/></div>;
     };
 
@@ -493,6 +508,12 @@ const Board = () => {
         const tile = Object.assign({},
           tiles[order],
           { index: index++, left: x, top: y});
+        if ('volcano' in rules
+          && rules[`volcano`].enabled
+          && tile.type === 'desert') {
+          tile.type = 'volcano';
+          tile.card = 0;
+        }
         if ('tiles-start-facing-down' in rules
           && rules[`tiles-start-facing-down`].enabled
           && state !== 'normal'

client/src/HouseRules.js

@@ -300,7 +300,7 @@ const HouseRules = ({ houseRulesActive, setHouseRulesActive }) => {
             disabled: state !== 'lobby'
           }
         } />,
-        implemented: false,
+        implemented: true,
       }, {
         title: `Don't keep paying those soldiers!`,
         key: `mercenaries`,