From b8195b6b8ba3a7305132840071aa1e7da76b71fd Mon Sep 17 00:00:00 2001
From: James Ketrenos <james_eikona@ketrenos.com>
Date: Thu, 3 Feb 2022 21:41:26 -0800
Subject: [PATCH] Color selection test working

Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
---
 client/src/Board.css | 14 +++++++++++++-
 client/src/Board.js  |  2 ++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/client/src/Board.css b/client/src/Board.css
index 39aed27..d74b4c5 100644
--- a/client/src/Board.css
+++ b/client/src/Board.css
@@ -85,6 +85,18 @@
 }
 
 .Selected {
-  background-color: rgba(255, 238, 0, 0.5);
+  background-color: rgba(0, 0, 0, 0.5);
   box-shadow: 5px 5px 5px black;
+}
+.Selected[data-color='R'] {
+  background-color: rgba(255, 0, 0, 0.5);
+}
+.Selected[data-color='O'] {
+  background-color: rgba(255, 196, 0, 0.5);
+}
+.Selected[data-color='W'] {
+  background-color: rgba(255, 255, 255, 0.5);
+}
+.Selected[data-color='B'] {
+  background-color: rgba(0, 0, 255, 0.5);
 }
\ No newline at end of file
diff --git a/client/src/Board.js b/client/src/Board.js
index 5d380bd..3ac061d 100644
--- a/client/src/Board.js
+++ b/client/src/Board.js
@@ -41,6 +41,7 @@ const Board = ({ game }) => {
           el.classList.remove('Selected');
         }
       }
+      event.target.setAttribute("data-color", game.color);
       event.target.classList.toggle('Selected');
     };
     return <div className="Road"
@@ -64,6 +65,7 @@ const Board = ({ game }) => {
         }
       }
       event.target.classList.toggle('Selected');
+      event.target.setAttribute("data-color", game.color);
     };
     return <div className="Corner"
       onClick={onClick}