Tiles are all correctly referencing roads and corners

Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>

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 <div className="Tile"
+      onClick={onClick}
+      data-index={tile.index}
+      style={{
+        top: `${tile.top}px`,
+        left: `${tile.left}px`,
+        width: `${tileImageWidth}px`, 
+        height: `${tileImageHeight}px`,         
+          backgroundImage: `url(${assetsPath}/gfx/tiles-${tile.type}.png)`,
+        backgroundPositionY: `-${tile.card*tileHeight}px`
+        }}
+    >{tile.index}</div>;
+  };
+
   const Road = ({road}) => {
     const onClick = (event) => {
       console.log(`Road clicked: ${road.index}`);
@@ -70,7 +129,7 @@ const Board = ({ game }) => {
         top: `${road.top}px`,
         left: `${road.left}px`
       }}
-    >{road.index}</div>;
+    ></div>;
   };
   
   const Corner = ({corner}) => {
@@ -291,19 +350,14 @@ const Board = ({ game }) => {
       x = -(rows[row] - 1) * 0.5 * tileHeight;
     let index = 0;
     return game.tileOrder.map(order => {
-      const tile = game.tiles[order];
+      const tile = Object.assign({},
-      let div = <div
+        game.tiles[order],
+        { index: index++, left: x, top: y});
+
+      let div = <Tile
         key={`${tile.type}-${tile.card}`}
-        className="Tile"
+        tile={tile}
-        style={{
+        />;
-          width: `${tileImageWidth}px`, 
-          height: `${tileImageHeight}px`,         
-          top: `${y}px`,
-          left: `${x}px`,
-          backgroundImage: `url(${assetsPath}/gfx/tiles-${tile.type}.png)`,
-          backgroundPositionY: `-${tile.card*tileHeight}px`
-        }}
-      ></div>;
      
       if (++rowCount === rows[row]) {
         row++;
@@ -394,7 +448,7 @@ const Board = ({ game }) => {
           <div className="Corners" disabled={true || game.state !== 'active'}>
             { corners }
           </div>
-          <div className="Roads" disabled={game.state !== 'active'}>
+          <div className="Roads" disabled={true || game.state !== 'active'}>
             { roads }
           </div>
         </> }

server/routes/games.js

@@ -134,7 +134,7 @@ const layout = {
     Tile([ 11, 12, 13, 23, 22, 21], [ 16, 17, 21, 32, 30, 18]),
     Tile([ 13, 14, 15, 25, 24, 23], [ 19, 20, 22, 35, 33, 21]),
 
-    Tile([ 16, 17, 18, 29, 28, 27], [ 23, 24, 18, 40, 39, 25]),
+    Tile([ 16, 17, 18, 29, 28, 27], [ 23, 24, 28, 40, 39, 25]),
     Tile([ 18, 19, 20, 31, 30, 29], [ 26, 27, 31, 43, 41, 28]),
     Tile([ 20, 21, 22, 33, 32, 31], [ 29, 30, 34, 46, 44, 31]),
     Tile([ 22, 23, 24, 35, 34, 33], [ 32, 33, 37, 49, 47, 34]),