Updated Volcano for legibility

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

client/src/Board.css

@@ -41,6 +41,11 @@
   transform: translate(-50%, -50%);
 }
 
+.Pip.Volcano {
+  margin-left: -8px;
+  transform: scale(0.5);
+}
+
 .Pip.Option {
   filter: brightness(150%);
 }

client/src/Board.js

@@ -416,7 +416,7 @@ const Board = () => {
       return;
     }
     console.log(`board - Generate pip, border, and tile elements`);
-    const Pip = ({pip}) => {
+    const Pip = ({pip, className}) => {
       const onPipClicked = (pip) => {
         if (!ws) { console.error(`board - sendPlacement - ws is NULL`); return; }
         ws.send(JSON.stringify({
@@ -424,7 +424,7 @@ const Board = () => {
         }));
       };
     
-      return <div className="Pip"
+      return <div className={`Pip ${className}`}
         onClick={() => { onPipClicked(pip) }}
         data-roll={pip.roll}
         data-index={pip.index}
@@ -445,6 +445,7 @@ const Board = () => {
       let index = 0;
       let pip;
       return pipOrder.map(order => {
+        let volcano = false;
         pip = {
           roll: pips[order].roll,
           index: index++,
@@ -458,8 +459,9 @@ const Board = () => {
           pip.order = pips.findIndex(
             pip => pip.roll === rules[`volcano`].number);
           pip.roll = rules[`volcano`].number;
+          volcano = true;
         }
-        const div = <Pip
+        const div = <Pip className={volcano ? "Volcano" : ""}
           pip={pip}
           key={`pip-${order}`}
         />;

client/src/HouseRules.js

@@ -212,9 +212,9 @@ const HouseRules = ({ houseRulesActive, setHouseRulesActive }) => {
     setRuleElements([{
       title: `Why you play so slow?`,
       key: `slowest-turn`,
-      description: `The player with the slowest turn so far receives -2VP.`,
-      element: <Placard type="slowest-turn"/>,
-      implemented: false
+      description: `The player with the longest turn so far receives -2VP.`,
+      element: <Placard type="longest-turn"/>,
+      implemented: true
     }, {
         title: `More victory points`,
         key: `victory-points`,