Add animations turn off

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

client/.env

@@ -1,3 +1,3 @@
 PUBLIC_URL=/ketr.ketran
-HOST=nuc.ketrenos.com
+HOST=localhost
 DANGEROUSLY_DISABLE_HOST_CHECK='true'

client/src/App.js

@@ -28,7 +28,7 @@ import { Winner } from "./Winner.js";
 import { HouseRules } from "./HouseRules.js";
 import { Dice } from "./Dice.js";
 import { assetsPath } from "./Common.js";
-import { Sheep } from "./Sheep.js";
+//import { Sheep } from "./Sheep.js";
 
 import history from "./history.js";
 import "./App.css";
@@ -84,6 +84,11 @@ const Table = () => {
   const [winnerDismissed, setWinnerDismissed] = useState(undefined);
   const [global, setGlobal] = useState({});
   const [count, setCount] = useState(0);
+  const [audio, setAudio] = useState(
+    localStorage.getItem('audio') ?
+      localStorage.getItem('audio') : false); 
+  const [animations, setAnimations] = useState(
+    localStorage.getItem('animations') || false);
   const [volume, setVolume] = useState(
     localStorage.getItem('volume') ? 
     parseFloat(localStorage.getItem('volume')) : 0.5);
@@ -421,7 +426,7 @@ const Table = () => {
         audioEffects.knights.hasPlayed = false;
       }
     }
-  }, [turn, color, volume]);
+  }, [state, turn, color, volume]);
 
   useEffect(() => {
     for (let key in audioEffects) {
@@ -473,13 +478,19 @@ const Table = () => {
           <ChooseCard/>
         </div>
         
-        <Board/>          
+        <Board animations={animations}/>          
         <PlayersStatus/>
         <PlayersStatus active={true}/>
         <Hand {...{buildActive, setBuildActive, setCardActive}}/>
       </div>
       <div className="Sidebar">
         { name !== "" && volume !== undefined && <Paper className="Volume">
+          <div>Audio effects</div> <input type="checkbox" id="audio" 
+            name="audio" defaultChecked={audio ? true : false} onInput={(e) => {
+              const value = !audio;
+              localStorage.setItem('audio', value);
+              setAudio(value)
+          }}/>
           <div>Sound effects volume</div> <input type="range" id="volume" name="volume"
           value={volume * 100}
           min="0" max="100" onInput={(e) => {
@@ -488,7 +499,13 @@ const Table = () => {
             localStorage.setItem('volume', alpha);
             setVolume(alpha);
           }}/>
-        </Paper>}
+          <div>Animations</div> <input type="checkbox" id="animations"
+            name="animations" defaultChecked={animations ? true : false} onInput={(e) => {
+              const value = !animations;
+              localStorage.setItem('animations', value);
+              setAnimations(value)
+            }} />
+           </Paper>}
         { name !== "" && <PlayerList/> }
         <Trade {...{tradeActive, setTradeActive}}/>
         { name !== "" && <Chat/> }

client/src/Board.js

@@ -34,7 +34,7 @@ const clearTooltip = () => {
   document.querySelector('.Board .Tooltip').style.display = 'none';
 };
 
-const Board = () => {
+const Board = ({ animations }) => {
   const { ws } = useContext(GlobalContext);
   const board = useRef();
   const [transform, setTransform] = useState(1.);
@@ -554,24 +554,27 @@ const Board = () => {
         
         if (tile.type === 'wheat') {
           div = <div key={`tile-${order}`}>
+            { animations &&
             <Flock count={Math.floor(1 + animationSeeds[index] * 2)}
-          style={{
-            top: `${tile.top - tileImageHeight * 0.5}px`,
-            left: `${tile.left - tileImageWidth * 0.5}px`,
-            width: `${tileImageWidth}px`,
-            height: `${tileImageHeight}px`
-          }}/><Tile
-            tile={tile}
-          /></div>;
-        } else if (tile.type === 'sheep') {
-          div = <div key={`tile-${order}`}>
-            <Herd count={Math.floor(1 + animationSeeds[index] * 4)}
               style={{
                 top: `${tile.top - tileImageHeight * 0.5}px`,
                 left: `${tile.left - tileImageWidth * 0.5}px`,
                 width: `${tileImageWidth}px`,
                 height: `${tileImageHeight}px`
-              }} /><Tile
+              }}/> } <Tile
+            tile={tile}
+          /></div>;
+        } else if (tile.type === 'sheep') {
+          div = <div key={`tile-${order}`}>
+            { animations && 
+              <Herd count={Math.floor(1 + animationSeeds[index] * 4)}
+                style={{
+                  top: `${tile.top - tileImageHeight * 0.5}px`,
+                  left: `${tile.left - tileImageWidth * 0.5}px`,
+                  width: `${tileImageWidth}px`,
+                  height: `${tileImageHeight}px`
+                }} /> 
+            }<Tile
               tile={tile}
             /></div>;
         } else {
@@ -696,7 +699,7 @@ const Board = () => {
     signature, generated,
     pips, pipOrder, borders, borderOrder, tiles, tileOrder,
     animationSeeds,
-    ws, state, rules
+    ws, state, rules, animations
   ]);
  
   /* Re-render turn info after every render */