Fix #30 - Show available pieces on board

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

client/src/Board.css

@@ -15,7 +15,7 @@
   top: 50%;
 }
 
-.Tile {
+.Board .Tile {
   z-index: 5; /* Below Road and Corner */
   position: absolute;
   background-position-y: 0px;
@@ -74,7 +74,7 @@
   pointer-events: none;
 }
 
-.Corner {
+.Board .Corner {
   filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.75));
   z-index: 20; /* Above Tile, below Road */
   position: absolute;
@@ -106,7 +106,7 @@
   clip-path: polygon(15% 0%,39% 23%,39% 52%,100% 56%,100% 74%,100% 100%,80% 100%,63% 100%,62% 75%,46% 75%,47% 100%,0% 100%,0% 24%);
 }
 
-.Road {
+.Board .Road {
   position: absolute;
   display: flex;
   align-items: center;
@@ -155,21 +155,21 @@ div[disabled] .Option {
   pointer-events: none;
 }
 
-.Option {
+.Board .Option {
   cursor: pointer;
   pointer-events: all;
   filter: brightness(115%);
 }
 
-.Option .Tile-Shape,
-.Option .Corner-Shape,
-.Option .Road-Shape {
+.Board .Option .Tile-Shape,
+.Board .Option .Corner-Shape,
+.Board .Option .Road-Shape {
   background-color: rgba(255, 255, 255, 0.5) !important;
 }
 
-.Option .Tile-Shape:hover,
-.Option .Corner-Shape:hover,
-.Option .Road-Shape :hover{
+.Board .Option .Tile-Shape:hover,
+.Board .Option .Corner-Shape:hover,
+.Board .Option .Road-Shape :hover{
   background-color: rgba(255, 255, 255, 0.75) !important;
 }
 

client/src/PlayerColor.js

@@ -1,39 +1,14 @@
 
 import React from "react";
 import Avatar from '@material-ui/core/Avatar';
-import { makeStyles } from '@material-ui/core/styles';
-import { orange,lightBlue, red, grey } from '@material-ui/core/colors';
+
+import { useStyles } from './Styles.js';
 
 import "./PlayerColor.css";
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    display: 'flex',
-    '& > *': {
-      margin: theme.spacing(1),
-    },
-  },
-  R: {
-    color: theme.palette.getContrastText(red[500]),
-    backgroundColor: red[500],
-  },
-  O: {
-    color: theme.palette.getContrastText(orange[500]),
-    backgroundColor: orange[500],
-  },
-  W: {
-    color: theme.palette.getContrastText(grey[50]),
-    backgroundColor: grey[50],
-  },
-  B: {
-    color: theme.palette.getContrastText(lightBlue[500]),
-    backgroundColor: lightBlue[500],
-  },
-}));
-
-
 const PlayerColor = ({ color }) => {
   const classes = useStyles();
+
   return (
     <Avatar className={['PlayerColor', classes[color]].join(' ')}/>
   );

client/src/Table.css

@@ -36,7 +36,6 @@
   background-image:url("./assets/woman-robber.png"); 
 }
 
-
 .BottomBar {
   display: flex;
   margin-right: 30rem;

client/src/Table.js

@@ -20,6 +20,7 @@ import Chat from './Chat.js';
 import { CircularProgress } from "@material-ui/core";
 import 'moment-timezone';
 import Activities from './Activities.js';
+import BoardPieces from './BoardPieces.js';
 
 /* Start of withRouter polyfill */
 // https://reactrouter.com/docs/en/v6/faq#what-happened-to-withrouter-i-need-it
@@ -992,7 +993,8 @@ class Table extends React.Component {
         
         <div style={{display: "inline-flex", flex: 1, flexDirection: "column"}}>
           <Board table={this} game={game}/>
-          { player !== undefined && 
+          { player !== undefined && <>
+            <BoardPieces table={this}/>
             <div className="BottomBar">
               <div className="Hand">
                 <Resource type="wood" count={player.wood}/>
@@ -1023,7 +1025,7 @@ class Table extends React.Component {
                 disabled={!game || !game.turn || !game.turn.roll}
                 table={this} type={`${color}`}/>
             </div>
-          }
+          </> }
           { player === undefined && <div className="BottomBar"></div>}
         </div>
 

client/src/Winner.css

@@ -32,8 +32,20 @@
 
 .Winner .Description {
   padding: 1em;
-  max-width: 20vw;
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.Winner .Description > div {
+  display: inline;
+  margin-bottom: 1rem;
+  line-height: 1.25rem;  
+}
+
+.Winner .Description b {
+  margin: 0;/* 0.25rem;*/
 }
 
 .Winner .Resource {

client/src/Winner.js

@@ -24,9 +24,10 @@ const Winner = ({table, color}) => {
     }
   }
   
-  let description = <>Congratulations, <b>{name}</b>!
-    <p><PlayerColor color={color}/> {name} won the game after {Math.floor(table.game.turns / playerCount)} turns. They
-    had <b>{player.potential}</b> unplayed Victory Point card(s).</p>
+  let description = <>
+    <div>Congratulations, <b>{name}</b>!</div>
+    <div><PlayerColor color={color}/> {name} won the game after {Math.floor(table.game.turns / playerCount)} turns. They
+    had <b>{player.potential}</b> unplayed Victory Point card(s).</div>
     </>;
   for (let key in table.game.players) {
     if (key === color) {
@@ -38,10 +39,10 @@ const Winner = ({table, color}) => {
     }
     let line = <><PlayerColor color={key}/> {getPlayerName(table.game.sessions, key)} finished with {tmp.points} victory points.
      They had <b>{tmp.potential}</b> unplayed Victory Point card(s).</>
-    description = <>{description}<p>{line}</p></>;
+    description = <>{description}<div>{line}</div></>;
   }
 
-  description = <>{description}<p>If everyone goes back to the Lobby, you can play again.</p></>;
+  description = <>{description}<div>If everyone goes back to the Lobby, you can play again.</div></>;
 
   return (
     <div className="Winner">