diff --git a/client/src/Board.js b/client/src/Board.js index 8743dde..3702447 100644 --- a/client/src/Board.js +++ b/client/src/Board.js @@ -32,6 +32,65 @@ const Board = ({ game }) => { borderImageWidth = (2 + 2/3) * tileImageWidth, /* 2.667 * .Tile.width */ borderImageHeight = borderImageWidth * 0.29; /* 0.29 * .Border.height */ + const Tile = ({tile}) => { + const onClick = (event) => { + console.log(`Tile clicked: ${tile.index}`); + let nodes = document.querySelectorAll('.Tile.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'); + } + } + 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'); + } + } + game.layout.tiles[tile.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'); + } + }); + game.layout.tiles[tile.index].roads.forEach(index => { + const el = document.querySelector(`.Road[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'); + }; + + return