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}) => {
+      const 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={{...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`
-        }}
       ><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`,

server/routes/games.js

@@ -4414,11 +4414,11 @@ const setBeginnerGame = (game) => {
   game.robber = 9;
       
   game.pipOrder = [
-    5, 1, 6, 
+        5, 1, 6, 
-  7, 2, 9, 11, 
+      7, 2, 9, 11, 
- 12, 8, 18, 3, 4,
+    12, 8, 18, 3, 4,
-  10, 16, 13, 0, 
+      10, 16, 13, 0,
-    14, 15, 17
+        14, 15, 17
   ];
   game.signature = gameSignature(game);
 }