diff --git a/client/src/App.js b/client/src/App.js index 52f6368..6e4a2a1 100755 --- a/client/src/App.js +++ b/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 { /* */ } @@ -463,6 +474,15 @@ const Table = () => {
+ { name !== "" && volume !== undefined && +
Sound effects volume
{ + const alpha = e.currentTarget.value / 100; + + setVolume(alpha); + }}/> +
} { name !== "" && } { name !== "" && } diff --git a/client/src/Board.css b/client/src/Board.css index 0d24913..5c45ec5 100644 --- a/client/src/Board.css +++ b/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; diff --git a/client/src/Board.js b/client/src/Board.js index 8511054..eb7907f 100644 --- a/client/src/Board.js +++ b/client/src/Board.js @@ -119,10 +119,11 @@ const Board = () => { setBorderOrder(data.update.borderOrder); } - if ('animationSeeds' in data.update && !equal(data.update.animationSeeds, animationSeeds)) { - console.log(`board - setting new animationSeeds`); - setAnimationSeeds(data.update.animationSeeds); - } + if ('animationSeeds' in data.update && !equal(data.update.animationSeeds, animationSeeds)) { + 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); diff --git a/server/games/.keep b/server/games/.keep deleted file mode 100644 index e69de29..0000000 diff --git a/server/routes/games.js b/server/routes/games.js index 174aac5..18c1b17 100755 --- a/server/routes/games.js +++ b/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,