diff --git a/client/public/assets/its-your-turn.mp3 b/client/public/assets/its-your-turn.mp3 index 0d52c09..27ef092 100755 Binary files a/client/public/assets/its-your-turn.mp3 and b/client/public/assets/its-your-turn.mp3 differ diff --git a/client/public/assets/robber.mp3 b/client/public/assets/robber.mp3 new file mode 100755 index 0000000..ee9c2c2 Binary files /dev/null and b/client/public/assets/robber.mp3 differ diff --git a/client/public/assets/volcano-eruption.mp3 b/client/public/assets/volcano-eruption.mp3 index 2a709e4..025342e 100755 Binary files a/client/public/assets/volcano-eruption.mp3 and b/client/public/assets/volcano-eruption.mp3 differ diff --git a/client/src/App.js b/client/src/App.js index 8e328fa..f720725 100755 --- a/client/src/App.js +++ b/client/src/App.js @@ -47,6 +47,18 @@ const Pip = () => { let audioEffects = { }; +const loadAudio = (src) => { + const audio = document.createElement("audio"); + audio.src = `${assetsPath}/${src}`; + audio.setAttribute("preload", "auto"); + audio.setAttribute("controls", "none"); + audio.style.display = "none"; + document.body.appendChild(audio); + audio.play(); + audio.hasPlayed = true; + return audio; +} + const Table = () => { const params = useParams(); const [ gameId, setGameId ] = useState(params.gameId ? params.gameId : undefined); @@ -340,14 +352,7 @@ const Table = () => { 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; + audioEffects.volcano = loadAudio('volcano-eruption.mp3'); } else { if (!audioEffects.volcano.hasPlayed) { audioEffects.volcano.hasPlayed = true; @@ -364,26 +369,34 @@ const Table = () => { 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; + audioEffects.yourTurn = loadAudio('its-your-turn.mp3'); } else { if (!audioEffects.yourTurn.hasPlayed) { audioEffects.yourTurn.hasPlayed = true; audioEffects.yourTurn.play(); } } - } else { + } else if (turn) { if (audioEffects.yourTurn) { audioEffects.yourTurn.hasPlayed = false; } } - }, [turn]); + + if (turn && turn.roll === 7) { + if (!audioEffects.robber) { + audioEffects.robber = loadAudio('robber.mp3'); + } else { + if (!audioEffects.robber.hasPlayed) { + audioEffects.robber.hasPlayed = true; + audioEffects.robber.play(); + } + } + } else if (turn) { + if (audioEffects.robber) { + audioEffects.robber.hasPlayed = false; + } + } + }, [turn, color]); return { /* */ }