Color objects based on player color

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

client/src/Board.js

@@ -844,6 +844,36 @@ class Board extends React.Component {
     }, 250);
   }
 
+  getPlayerColors() {
+    switch (this.game.color) {
+    case "O":
+      return {
+        strokeStyle: "rgb(128, 64, 32)",
+        fillStyle: "rgb(255, 64, 0)"
+      }
+    case "R":
+      return {
+        strokeStyle: "rgb(255, 64, 64)",
+        fillStyle: "rgb(255, 0, 0)"
+      }
+    case "W":
+      return {
+        strokeStyle: "rgb(64, 64, 64)",
+        fillStyle: "rgb(255, 255, 255)"
+      }
+    case "B":
+      return {
+        strokeStyle: "rgb(64, 64, 255)",
+        fillStyle: "rgb(0, 0, 255)"
+      }
+    default:
+      return {
+        strokeStyle: "rgb(16, 16, 16)",
+        fillStyle: "rgb(64, 64, 64)"
+      }
+    };
+  }
+
   drawFrame() {
     if (!this.canvas || !this.table) {
       return;
@@ -959,16 +989,18 @@ class Board extends React.Component {
 
     if (this.closest.tile) {
       ctx.save();
+
+      Object.assign(ctx, this.getPlayerColors());
+
       ctx.translate(this.closest.tile.pos.x, this.closest.tile.pos.y);
-      ctx.strokeStyle = "red";
+      /* draw circle hovered current tile 
       ctx.beginPath();
       ctx.arc(0, 0, tileHeight * 0.5, 0, Math.PI * 2.);
       ctx.stroke();
+      */
 
       /* road */
       let angle = Math.round(this.closest.info.angle / (Math.PI / 3.)) * (Math.PI / 3.);
-      ctx.strokeStyle = "rgb(64, 64, 255)";
-      ctx.fillStyle = "rgb(0, 0, 255)";
       ctx.rotate(angle);
       ctx.translate(-tileHeight * 0.5, 0);
       ctx.beginPath();
@@ -982,8 +1014,6 @@ class Board extends React.Component {
       angle = (this.closest.info.angle - Math.PI / 6.);
       angle = Math.round(angle / (Math.PI / 3.)) * (Math.PI / 3.);
       angle += Math.PI / 6.;
-      ctx.strokeStyle = "rgb(64, 64, 255)";
-      ctx.fillStyle = "rgb(0, 0, 255)";
       ctx.rotate(angle);
       ctx.translate(-tileWidth * 0.5, 0);
       ctx.rotate(-angle);