diff --git a/client/src/Board.js b/client/src/Board.js index 3a486da..65734cd 100644 --- a/client/src/Board.js +++ b/client/src/Board.js @@ -528,11 +528,7 @@ const Board = () => { borderOrder, borders, pipOrder, pips, tileOrder, tiles ]); - useEffect(() => { - if (!turn) { - return; - } - + if (turn) { let nodes = document.querySelectorAll('.Active'); for (let i = 0; i < nodes.length; i++) { nodes[i].classList.remove('Active'); @@ -550,13 +546,9 @@ const Board = () => { nodes[i].classList.add('Active'); } } - }, [ turn ]); + } - useEffect(() => { - if (!placements) { - return; - } - + if (placements) { /* Set color and type based on placement data from the server */ placements.corners.forEach((corner, index) => { const el = document.querySelector(`.Corner[data-index="${index}"]`); @@ -637,25 +629,23 @@ const Board = () => { }); } } - }, [ placements, turn]); - - useEffect(() => { - let nodes = document.querySelectorAll(`.Pip.Robber`); - for (let i = 0; i < nodes.length; i++) { - nodes[i].classList.remove('Robber'); - [ 'Robert', 'Roberta', 'Velocirobber' ].forEach(robberName => - nodes[i].classList.remove(robberName) - ); - } + } - if (robber !== undefined) { - const el = document.querySelector(`.Pip[data-index="${robber}"]`); - if (el) { - el.classList.add('Robber'); - el.classList.add(robberName); - } - } - }, [ robber, robberName ]); + let nodes = document.querySelectorAll(`.Pip.Robber`); + for (let i = 0; i < nodes.length; i++) { + nodes[i].classList.remove('Robber'); + [ 'Robert', 'Roberta', 'Velocirobber' ].forEach(robberName => + nodes[i].classList.remove(robberName) + ); + } + + if (robber !== undefined) { + const el = document.querySelector(`.Pip[data-index="${robber}"]`); + if (el) { + el.classList.add('Robber'); + el.classList.add(robberName); + } + } const canAction = (action) => { return (turn && Array.isArray(turn.actions) && turn.actions.indexOf(action) !== -1);