From 5cd124b24fda11a11ffb296b9386059eece50701 Mon Sep 17 00:00:00 2001
From: James Ketrenos <james_eikona@ketrenos.com>
Date: Sat, 5 Feb 2022 14:54:19 -0800
Subject: [PATCH] Corner roads are correct. Have not tested corner banks

Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
---
 client/src/Board.js    | 23 +++++++++++++++++++++--
 server/routes/games.js |  9 +++++----
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/client/src/Board.js b/client/src/Board.js
index 7d9e306..2325d0e 100644
--- a/client/src/Board.js
+++ b/client/src/Board.js
@@ -47,6 +47,7 @@ const Board = ({ game }) => {
     };
     return <div className="Road"
       onClick={onClick}
+      data-index={road.index}
       style={{
         transform: `translate(-50%, -50%) rotate(${road.angle}deg)`,
         top: `${road.top}px`,
@@ -57,19 +58,37 @@ const Board = ({ game }) => {
   
   const Corner = ({corner}) => {
     const onClick = (event) => {
-      console.log(`Corner clicked: ${corner.index}`);
-      const nodes = document.querySelectorAll('.Corner.Selected');
+      console.log(`Corner ${corner.index}:`, game.layout.corners[corner.index]);
+      let 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.corners[corner.index].roads.forEach(index => {
+        const el = document.querySelector(`.Road[data-index="${index}"]`);
+        if (!el) {
+          console.log(`Unable to find road[${index}]`);
+        } else {
+          el.classList.add('Selected');
+        }
+      });
+
       event.target.classList.toggle('Selected');
       event.target.setAttribute("data-color", game.color);
     };
     return <div className="Corner"
       onClick={onClick}
+      data-index={corner.index}
       style={{
         top: `${corner.top}px`,
         left: `${corner.left}px`
diff --git a/server/routes/games.js b/server/routes/games.js
index b9f4469..e057f48 100755
--- a/server/routes/games.js
+++ b/server/routes/games.js
@@ -121,7 +121,7 @@ const Road = (corners) => {
     corners: corners, /* 2 */
     data: undefined
   }
-}
+};
 
 const layout = {
   tiles: [
@@ -269,7 +269,7 @@ const layout = {
     /* 30 */ Corner([41,43,45],[]),
     /* 31 */ Corner([31,43,44],[]),
     /* 32 */ Corner([44,46,48],[]),
-    /* 33 */ Corner([43,46,47],[]),
+    /* 33 */ Corner([34,46,47],[]),
     /* 34 */ Corner([47,49,51],[]),
     /* 35 */ Corner([37,49,50],[]),
     /* 36 */ Corner([50,53,52],[7]),
@@ -280,7 +280,7 @@ const layout = {
     /* 40 */ Corner([45,55,56],[]),
     /* 41 */ Corner([56,58,60],[]),
     /* 42 */ Corner([48,58,59],[]),
-    /* 43 */ Corner([59,61,43],[]),
+    /* 43 */ Corner([59,61,63],[]),
     /* 44 */ Corner([51,61,62],[]),
     /* 45 */ Corner([62,65,64],[8]),
     /* 46 */ Corner([52,65],[7,8]),
@@ -1009,7 +1009,8 @@ const sendGame = async (req, res, game, error) => {
     name: session.name,
     color: session.color,
     order: (session.color in game.players) ? game.players[session.color].order : 0,
-    sessions: reducedSessions
+    sessions: reducedSessions,
+    layout: layout
   });
 
   return res.status(200).send(playerGame);