Added audio effects

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

client/src/App.js

@@ -27,6 +27,7 @@ import { Trade } from "./Trade.js";
 import { Winner } from "./Winner.js";
 import { HouseRules } from "./HouseRules.js";
 import { Dice } from "./Dice.js";
+import { assetsPath } from "./Common.js";
 
 import history from "./history.js";
 import "./App.css";
@@ -43,6 +44,9 @@ const Pip = () => {
 }
 */
 
+let audioEffects = {
+};  
+
 const Table = () => {
   const params = useParams();
   const [ gameId, setGameId ] = useState(params.gameId ? params.gameId : undefined);
@@ -58,6 +62,7 @@ const Table = () => {
   const [state, setState] = useState(undefined);
   const [color, setColor] = useState(undefined);
   const [priv, setPriv] = useState(undefined);
+  const [turn, setTurn] = useState(undefined);
   const [buildActive, setBuildActive] = useState(false);
   const [tradeActive, setTradeActive] = useState(false);
   const [cardActive, setCardActive] = useState(undefined);
@@ -65,7 +70,7 @@ const Table = () => {
   const [winnerDismissed, setWinnerDismissed] = useState(undefined);
   const [global, setGlobal] = useState({});
   const [count, setCount] = useState(0);
-  const fields = [ 'id', 'state', 'color', 'name', 'private', 'dice' ];
+  const fields = [ 'id', 'state', 'color', 'name', 'private', 'dice', 'turn' ];
 
   const onWsOpen = (event) => {
     console.log(`ws: open`);
@@ -148,6 +153,9 @@ const Table = () => {
       if ('dice' in data.update && !equal(data.update.dice, dice)) {
         setDice(data.update.dice);
       }
+      if ('turn' in data.update && !equal(data.update.turn, turn)) {
+        setTurn(data.update.turn);
+      }
       if ('color' in data.update && data.update.color !== color) {
         console.log(`App - setting color: ${color}`);
         setColor(data.update.color);
@@ -329,6 +337,54 @@ const Table = () => {
 
   console.log(`board - (app) - Render with ws: ${ws ? '!' : ''}NULL, connection: ${connection ? '!' : ''}NULL`);
 
+  useEffect(() => {
+    if (state === 'volcano') {
+      if (!audioEffects.volcano) {
+        audioEffects.volcano = document.createElement("audio");
+        audioEffects.volcano.src = `${assetsPath}/volcano-eruption.mp3`;
+        audioEffects.volcano.setAttribute("preload", "auto");
+        audioEffects.volcano.setAttribute("controls", "none");
+        audioEffects.volcano.style.display = "none";
+        document.body.appendChild(audioEffects.volcano);
+        audioEffects.volcano.play();
+        audioEffects.volcano.hasPlayed = true;
+      } else {
+        if (!audioEffects.volcano.hasPlayed) {
+          audioEffects.volcano.hasPlayed = true;
+          audioEffects.volcano.play();
+        }
+      }
+    } else {
+      if (audioEffects.volcano) {
+        audioEffects.volcano.hasPlayed = false;
+      }
+    }
+  }, [state]);
+
+  useEffect(() => {
+    if (turn && turn.color === color) {
+      if (!audioEffects.yourTurn) {
+        audioEffects.yourTurn = document.createElement("audio");
+        audioEffects.yourTurn.src = `${assetsPath}/its-your-turn.mp3`;
+        audioEffects.yourTurn.setAttribute("preload", "auto");
+        audioEffects.yourTurn.setAttribute("controls", "none");
+        audioEffects.yourTurn.style.display = "none";
+        document.body.appendChild(audioEffects.yourTurn);
+        audioEffects.yourTurn.play();
+        audioEffects.yourTurn.hasPlayed = true;
+      } else {
+        if (!audioEffects.yourTurn.hasPlayed) {
+          audioEffects.yourTurn.hasPlayed = true;
+          audioEffects.yourTurn.play();
+        }
+      }
+    } else {
+      if (audioEffects.yourTurn) {
+        audioEffects.yourTurn.hasPlayed = false;
+      }
+    }
+  }, [turn]);
+  
   return <GlobalContext.Provider value={global}>
     { /* <PingPong/> */ }
     <div className="Table">

client/src/Board.js

@@ -530,16 +530,16 @@ const Board = () => {
         let div;
         
         if (tile.type === 'wheat') {
-          div = <><Flock count={Math.floor(Math.random() * 4)}
+          div = <div key={`tile-${order}`}>
+            <Flock count={Math.floor(Math.random() * 4)}
           style={{
             top: `${tile.top - tileImageHeight * 0.5}px`,
             left: `${tile.left - tileImageWidth * 0.5}px`,
             width: `${tileImageWidth}px`,
             height: `${tileImageHeight}px`
           }}/><Tile
-          key={`tile-${order}`}
-          tile={tile}
-          /></>;
+            tile={tile}
+          /></div>;
         } else {
           div = <Tile
             key={`tile-${order}`}

client/src/HouseRules.js

@@ -26,8 +26,24 @@ const Volcano = ({ ws, rules, field, disabled }) => {
     if (field in rules) {
       setGold('gold' in rules[field] ? rules[field].gold : false);
       setNumber('number' in rules[field] ? rules[field].number : init);
+      let update = false;
+      if (!('gold' in rules[field])) {
+        rules[field].gold = false;
+        update = true;
+      }
+      if (!('number' in rules[field])) {
+        rules[field].number = init;
+        update = true;
+      }
+
+      if (update) {
+        ws.send(JSON.stringify({
+          type: 'rules',
+          rules: rules
+        }));
+      }
     }
-  }, [rules, field, init]);
+  }, [rules, field, init, ws]);
 
   const toggleGold = () => {
     rules[field].gold = !gold;