Added PlayerColor icons into messages

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

client/src/Board.css

@@ -11,6 +11,26 @@
   position: absolute;
 }
 
+.PlayerColor {
+  position: relative;
+  top: -0.25em;
+  justify-content: center;
+  align-items: center;
+  width: 1em;
+  height: 1em;
+  padding: 0.125em;
+  margin: 0 0.25em;
+  border-radius: 0.625em;
+  border-width: 1px;
+  border-style: solid;
+}
+
+.PlayerColor > div {
+  font-weight: bold;
+  overflow: hidden;
+  font-size: 0.75rem;
+}
+
 .Cards {
   display: inline-block;
   position: absolute;
@@ -170,7 +190,7 @@
 }
 
 .Message {
-  display: inline-block;
+  display: inline;
   align-items: left;
   justify-content: left;
   background-color: rgba(224, 224, 224);
@@ -180,7 +200,7 @@
 }
 
 .Message div {
-  display: inline-block;
+  display: inline-flex;
 }
 
 .PlayerName {

client/src/Board.js

@@ -13,7 +13,7 @@ import { deepOrange, lightBlue, red, grey } from '@material-ui/core/colors';
 import Avatar from '@material-ui/core/Avatar';
 import Switch from '@material-ui/core/Switch';
 import Moment from 'react-moment';
-import moment from 'moment';
+//import moment from 'moment';
 
 /* Start of withRouter polyfill */
 // https://reactrouter.com/docs/en/v6/faq#what-happened-to-withrouter-i-need-it
@@ -62,8 +62,8 @@ const useStyles = makeStyles((theme) => ({
     backgroundColor: deepOrange[500],
   },
   W: {
-    color: theme.palette.getContrastText(grey[100]),
-    backgroundColor: grey[100],
+    color: theme.palette.getContrastText(grey[500]),
+    backgroundColor: grey[500],
   },
   B: {
     color: theme.palette.getContrastText(lightBlue[500]),
@@ -71,6 +71,52 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
+const PlayerColor = ({ color }) => {
+  const colors = getPlayerColors(color)
+  return (
+    <div className="PlayerColor" 
+      style={{
+        backgroundColor: colors.fillStyle,
+        borderColor: colors.strokeStyle,
+        color: colors.strokeStyle
+      }}>
+        <div>{color}</div>
+    </div>
+  );
+};
+
+const getPlayerColors = (color) => {
+  switch (color) {
+  case "O":
+    return {
+      strokeStyle: "white",
+      fillStyle: "#ff5722"
+    }
+  case "R":
+    return {
+      strokeStyle: "white",
+      fillStyle: "#f44336"
+    }
+  case "W":
+    return {
+      strokeStyle: "black",
+      fillStyle: "#9e9e9e"
+    }
+  case "B":
+    return {
+      strokeStyle: "black",
+      fillStyle: "#03a9f4"
+    }
+  default:
+    return {
+      strokeStyle: "rgb(16, 16, 16)",
+      fillStyle: "rgb(64, 64, 64)"
+    }
+  };
+};
+
+
+
 const hexagonRatio = 1.1547005,
   tileHeight = 0.16,
   tileWidth = tileHeight * hexagonRatio,
@@ -626,7 +672,7 @@ class Board extends React.Component {
     }).then((res) => {
       if (res.status >= 400) {
         console.log(res);
-        throw new Error(`Unable to load game`);
+        throw new Error(`Server temporarily unreachable.`);
       }
       return res.json();
     }).then((game) => {
@@ -871,45 +917,18 @@ class Board extends React.Component {
         this.canvas.style.width = `${this.width}px`;
         this.canvas.style.height = `${this.height}px`;
       }
-      this.cards.style.top = `${offset}px`;
-      this.cards.style.width = `${this.width}px`;
-      this.cards.style.height = `${this.heigh}tpx`;
+
+      if (this.cards && this.cards.style) { 
+        this.cards.style.top = `${offset}px`;
+        this.cards.style.width = `${this.width}px`;
+        this.cards.style.height = `${this.heigh}tpx`;
+      }
 
       this.updateSizeTimer = 0;
       this.drawFrame();
     }, 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;
@@ -1026,7 +1045,7 @@ class Board extends React.Component {
     if (this.closest.tile) {
       ctx.save();
 
-      Object.assign(ctx, this.getPlayerColors());
+      Object.assign(ctx, getPlayerColors(this.game.color));
 
       ctx.translate(this.closest.tile.pos.x, this.closest.tile.pos.y);
       /* draw circle hovered current tile 
@@ -1305,7 +1324,7 @@ class Board extends React.Component {
         if (!this.game.color) {
           message.push((<div key={'message-'+(++key)}>You need to pick your color.</div>));
         } else {
-          message.push((<div key={'message-'+(++key)}>You have selected&nbsp;<b>{this.game.color}</b>.</div>));
+          message.push((<div key={'message-'+(++key)}>You have selected <PlayerColor color={this.game.color}/>.</div>));
         }
         message.push((<div key={'message-'+(++key)}>You can chat with other players below.</div>));
         if (this.game.active < 2) {