Add volume control

Fix random seed at start

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

client/src/App.js

@@ -82,6 +82,7 @@ const Table = () => {
   const [winnerDismissed, setWinnerDismissed] = useState(undefined);
   const [global, setGlobal] = useState({});
   const [count, setCount] = useState(0);
+  const [volume, setVolume] = useState(0.5);
   const fields = [ 'id', 'state', 'color', 'name', 'private', 'dice', 'turn' ];
 
   const onWsOpen = (event) => {
@@ -353,6 +354,7 @@ const Table = () => {
     if (state === 'volcano') {
       if (!audioEffects.volcano) {
         audioEffects.volcano = loadAudio('volcano-eruption.mp3');
+        audioEffects.volcano.volume = volume * volume;
       } else {
         if (!audioEffects.volcano.hasPlayed) {
           audioEffects.volcano.hasPlayed = true;
@@ -370,6 +372,7 @@ const Table = () => {
     if (turn && turn.color === color) {
       if (!audioEffects.yourTurn) {
         audioEffects.yourTurn = loadAudio('its-your-turn.mp3');
+        audioEffects.yourTurn.volume = volume * volume;
       } else {
         if (!audioEffects.yourTurn.hasPlayed) {
           audioEffects.yourTurn.hasPlayed = true;
@@ -385,6 +388,7 @@ const Table = () => {
     if (turn && turn.roll === 7) {
       if (!audioEffects.robber) {
         audioEffects.robber = loadAudio('robber.mp3');
+        audioEffects.robber.volume = volume * volume;
       } else {
         if (!audioEffects.robber.hasPlayed) {
           audioEffects.robber.hasPlayed = true;
@@ -400,6 +404,7 @@ const Table = () => {
     if (turn && turn.actions && turn.actions.indexOf('playing-knight') !== -1) {
       if (!audioEffects.knights) {
         audioEffects.knights = loadAudio('the-knights-who-say-ni.mp3');
+        audioEffects.knights.volume = volume * volume;
       } else {
         if (!audioEffects.knights.hasPlayed) {
           audioEffects.knights.hasPlayed = true;
@@ -411,7 +416,13 @@ const Table = () => {
         audioEffects.knights.hasPlayed = false;
       }
     }
-  }, [turn, color]);
+  }, [turn, color, volume]);
+
+  useEffect(() => {
+    for (let key in audioEffects) {
+      audioEffects[key].volume = volume * volume;
+    }
+  }, [volume]);
   
   return <GlobalContext.Provider value={global}>
     { /* <PingPong/> */ }
@@ -463,6 +474,15 @@ const Table = () => {
         <Hand {...{buildActive, setBuildActive, setCardActive}}/>
       </div>
       <div className="Sidebar">
+        { name !== "" && volume !== undefined && <Paper className="Volume">
+          <div>Sound effects volume</div> <input type="range" id="volume" name="volume"
+          value={volume * 100}
+          min="0" max="100" onInput={(e) => {
+            const alpha = e.currentTarget.value / 100;
+
+            setVolume(alpha);
+          }}/>
+        </Paper>}
         { name !== "" && <PlayerList/> }
         <Trade {...{tradeActive, setTradeActive}}/>
         { name !== "" && <Chat/> }

client/src/Board.css

@@ -49,6 +49,14 @@
   opacity: 0.9;
 }
 
+.Volume {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-top: 0.1rem;
+  padding: 0.25rem 0.5rem;
+}
+
 .Pip {
   z-index: 50; /* Above Tile (5,10), Road (12), Corner (20) */
   position: absolute;

client/src/Board.js

@@ -123,6 +123,7 @@ const Board = () => {
         console.log(`board - setting new animationSeeds`);
         setAnimationSeeds(data.update.animationSeeds);
       }
+      
       if ('tileOrder' in data.update && !equal(data.update.tileOrder, tileOrder)) {
         console.log(`board - setting new tileOrder`);
         setTileOrder(data.update.tileOrder);

server/routes/games.js

@@ -4711,7 +4711,10 @@ const setBeginnerGame = (game) => {
        18, 8, 15
   ];
   game.robber = 9;
-      
+  game.animationSeeds = [];
+  for (let i = 0, p = 0; i < game.tileOrder.length; i++) {
+    game.animationSeeds.push(Math.random());
+  }
   game.pipOrder = [
         5, 1, 6, 
       7, 2, 9, 11,