jketreno/peddlers-of-ketran
1
0
Fork 0
Code Issues 42 Activity

Move direct DOM outside of useEffect

Browse Source 
Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
This commit is contained in:
James Ketrenos 2022-03-12 15:41:33 -08:00
parent dac755cad0
commit d7c3aa2668
1 changed files with 19 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
client/src/Board.js
View File

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