Added Dice as icons

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

README.md

@@ -179,6 +179,11 @@ Chat is available at all times by registered players
 * Set "Ready" for player
 * All ready? state == active
 
+## License attribution
+
+The dice faces (dice-six-faces-*.svg) are Copyright https://delapouite.com/ and licensed
+as [CC-BY-3.0](https://creativecommons.org/licenses/by/3.0/).
+
 ## Active
 
 * 

client/src/Board.css

@@ -64,6 +64,12 @@
   filter: brightness(150%);
 }
 
+.Dice {
+  width: 1rem;
+  height: 1rem;
+  background-color: black;
+}
+
 .Game {
   display: inline-flex;
   flex-direction: column;
@@ -71,7 +77,6 @@
   width: 40vw;
   max-height: 100vh;
   overflow: hidden;
-  min-width: 100vw;
   max-width: 40vw;
   z-index: 100;
   padding: 0.5em;
@@ -87,7 +92,7 @@
   margin-bottom: 0.5em;
 }
 
-.lobby {
+.Game .lobby {
   width: 100vw;
 }
 

client/src/Board.js

@@ -70,6 +70,21 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
+const Dice = ({ pips }) => {
+  let name;
+  switch (pips) {
+  case 1: name = 'one'; break;
+  case 2: name = 'two'; break;
+  case 3: name = 'three'; break;
+  case 4: name = 'four'; break;
+  case 5: name = 'five'; break;
+  case 6: name = 'six'; break;
+  }
+  return (
+    <img className="Dice" src={`${assetsPath}/dice-six-faces-${name}.svg`}/>
+  );
+}
+
 const PlayerColor = ({ color }) => {
   const classes = useStyles();
   return (
@@ -1350,7 +1365,7 @@ class Board extends React.Component {
           if (!player.order) {
             message = <>{message}You need to roll for game order. Click&nbsp;<b>Roll Dice</b>&nbsp;below.</>;
           } else {
-            message = <>{message}You rolled&nbsp;<b>{player.order}</b>&nbsp;for game order. Waiting for all players.</>;
+            message = <>{message}You rolled <Dice pips={player.order}/> for game order. Waiting for all players to roll.</>;
             message = <>{message}<br/><b>THIS IS THE END OF THE FUNCTIONALITY SO FAR</b></>;
           }
         }