From ff35c7fbbced94a5fbeef0f3010f704361e5769b Mon Sep 17 00:00:00 2001
From: James Ketrenos <james_eikona@ketrenos.com>
Date: Mon, 31 Oct 2022 17:14:29 -0700
Subject: [PATCH] Add animations turn off

Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
---
 client/.env         |  2 +-
 client/src/App.js   | 25 +++++++++++++++++++++----
 client/src/Board.js | 31 +++++++++++++++++--------------
 3 files changed, 39 insertions(+), 19 deletions(-)

diff --git a/client/.env b/client/.env
index 550b42b..2b48535 100644
--- a/client/.env
+++ b/client/.env
@@ -1,3 +1,3 @@
 PUBLIC_URL=/ketr.ketran
-HOST=nuc.ketrenos.com
+HOST=localhost
 DANGEROUSLY_DISABLE_HOST_CHECK='true'
diff --git a/client/src/App.js b/client/src/App.js
index 08aed7f..9c7c97d 100755
--- a/client/src/App.js
+++ b/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/> }
diff --git a/client/src/Board.js b/client/src/Board.js
index 8e72a00..5f2bb9e 100644
--- a/client/src/Board.js
+++ b/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 */