diff --git a/client/src/Board.js b/client/src/Board.js index 2325d0e..8743dde 100644 --- a/client/src/Board.js +++ b/client/src/Board.js @@ -35,13 +35,30 @@ const Board = ({ game }) => { const Road = ({road}) => { const onClick = (event) => { console.log(`Road clicked: ${road.index}`); - const nodes = document.querySelectorAll('.Road.Selected'); + let nodes = document.querySelectorAll('.Road.Selected'); for (let i = 0; i < nodes.length; i++) { const el = nodes[i]; if (el !== event.target) { el.classList.remove('Selected'); } } + nodes = document.querySelectorAll('.Corner.Selected'); + for (let i = 0; i < nodes.length; i++) { + const el = nodes[i]; + if (el !== event.target) { + el.classList.remove('Selected'); + } + } + + game.layout.roads[road.index].corners.forEach(index => { + const el = document.querySelector(`.Corner[data-index="${index}"]`); + if (!el) { + console.log(`Unable to find corner[${index}]`); + } else { + el.classList.add('Selected'); + } + }); + event.target.setAttribute("data-color", game.color); event.target.classList.toggle('Selected'); }; @@ -53,7 +70,7 @@ const Board = ({ game }) => { top: `${road.top}px`, left: `${road.left}px` }} - >; + >{road.index}; }; const Corner = ({corner}) => { @@ -93,7 +110,7 @@ const Board = ({ game }) => { top: `${corner.top}px`, left: `${corner.left}px` }} - >{corner.index}; + >; }; const generateRoads = () => { @@ -374,10 +391,10 @@ const Board = ({ game }) => { { tiles } { pips } { game && <> -