diff --git a/client/public/assets/its-your-turn.mp3 b/client/public/assets/its-your-turn.mp3 new file mode 100755 index 0000000..0d52c09 Binary files /dev/null and b/client/public/assets/its-your-turn.mp3 differ diff --git a/client/public/assets/volcano-eruption.mp3 b/client/public/assets/volcano-eruption.mp3 new file mode 100755 index 0000000..2a709e4 Binary files /dev/null and b/client/public/assets/volcano-eruption.mp3 differ diff --git a/client/src/App.js b/client/src/App.js index 5a02827..8e328fa 100755 --- a/client/src/App.js +++ b/client/src/App.js @@ -27,6 +27,7 @@ import { Trade } from "./Trade.js"; import { Winner } from "./Winner.js"; import { HouseRules } from "./HouseRules.js"; import { Dice } from "./Dice.js"; +import { assetsPath } from "./Common.js"; import history from "./history.js"; import "./App.css"; @@ -43,6 +44,9 @@ const Pip = () => { } */ +let audioEffects = { +}; + const Table = () => { const params = useParams(); const [ gameId, setGameId ] = useState(params.gameId ? params.gameId : undefined); @@ -58,6 +62,7 @@ const Table = () => { const [state, setState] = useState(undefined); const [color, setColor] = useState(undefined); const [priv, setPriv] = useState(undefined); + const [turn, setTurn] = useState(undefined); const [buildActive, setBuildActive] = useState(false); const [tradeActive, setTradeActive] = useState(false); const [cardActive, setCardActive] = useState(undefined); @@ -65,7 +70,7 @@ const Table = () => { const [winnerDismissed, setWinnerDismissed] = useState(undefined); const [global, setGlobal] = useState({}); const [count, setCount] = useState(0); - const fields = [ 'id', 'state', 'color', 'name', 'private', 'dice' ]; + const fields = [ 'id', 'state', 'color', 'name', 'private', 'dice', 'turn' ]; const onWsOpen = (event) => { console.log(`ws: open`); @@ -148,6 +153,9 @@ const Table = () => { if ('dice' in data.update && !equal(data.update.dice, dice)) { setDice(data.update.dice); } + if ('turn' in data.update && !equal(data.update.turn, turn)) { + setTurn(data.update.turn); + } if ('color' in data.update && data.update.color !== color) { console.log(`App - setting color: ${color}`); setColor(data.update.color); @@ -329,6 +337,54 @@ const Table = () => { console.log(`board - (app) - Render with ws: ${ws ? '!' : ''}NULL, connection: ${connection ? '!' : ''}NULL`); + 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; + } else { + if (!audioEffects.volcano.hasPlayed) { + audioEffects.volcano.hasPlayed = true; + audioEffects.volcano.play(); + } + } + } else { + if (audioEffects.volcano) { + audioEffects.volcano.hasPlayed = false; + } + } + }, [state]); + + 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; + } else { + if (!audioEffects.yourTurn.hasPlayed) { + audioEffects.yourTurn.hasPlayed = true; + audioEffects.yourTurn.play(); + } + } + } else { + if (audioEffects.yourTurn) { + audioEffects.yourTurn.hasPlayed = false; + } + } + }, [turn]); + return { /* */ }
diff --git a/client/src/Board.js b/client/src/Board.js index c33d15e..4aac5e6 100644 --- a/client/src/Board.js +++ b/client/src/Board.js @@ -530,16 +530,16 @@ const Board = () => { let div; if (tile.type === 'wheat') { - div = <> + ; + tile={tile} + />
; } else { div = { if (field in rules) { setGold('gold' in rules[field] ? rules[field].gold : false); setNumber('number' in rules[field] ? rules[field].number : init); + let update = false; + if (!('gold' in rules[field])) { + rules[field].gold = false; + update = true; + } + if (!('number' in rules[field])) { + rules[field].number = init; + update = true; + } + + if (update) { + ws.send(JSON.stringify({ + type: 'rules', + rules: rules + })); + } } - }, [rules, field, init]); + }, [rules, field, init, ws]); const toggleGold = () => { rules[field].gold = !gold;