Show hand

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

client/src/Table.css

@@ -13,13 +13,13 @@
   display: flex;
   position: absolute;
   left: 0;
-  right: 40vw;
+  right: 0;/*40vw;*/
   bottom: 0;
   top: 0;
   justify-content: center;
   align-items: center;
   background: rgba(0,0,0,0.5);
-  z-index: 1000;
+  z-index: 0;/*1000*/
 }
 
 .WaitingForPlayer .Title {

client/src/Table.js

@@ -900,13 +900,22 @@ class Table extends React.Component {
   }
 
   render() {
-    const game = this.state.game;
+    const game = this.state.game,
+      player = game ? game.player : undefined
 
     return (
       <div className="Table">
         
+        <div style={{display: "inline-flex", flex: 1, flexDirection: "column"}}>
         <Board table={this} game={game}/>
-
+        { player !== undefined && <div className="Hand'">
+          <Resource type="wood" count={player.wood}/>
+          <Resource type="wheat" count={player.wheat}/>
+          <Resource type="stone" count={player.stone}/>
+          <Resource type="brick" count={player.brick}/>
+          <Resource type="sheep" count={player.sheep}/>
+        </div> }
+        </div>
         { game && <div className={'Game ' + game.state}>
           <Paper className="Message">{ this.state.message }</Paper>
           {(this.state.pickName || !game.name) && <PlayerName table={this}/> }
@@ -930,13 +939,7 @@ class Table extends React.Component {
           <div className="Cards">
             { game && game.state === "active" && <>
               <div>In hand</div>
-              <div className="Hand">
-                <Resource type="wood" count={this.state.wood}/>
-                <Resource type="wheat" count={this.state.wheat}/>
-                <Resource type="stone" count={this.state.stone}/>
-                <Resource type="brick" count={this.state.brick}/>
-                <Resource type="sheep" count={this.state.sheep}/>
-              </div>
+            
               <div>Available to play</div>
               <div className="Hand">
                 <Development type="monopoly" count="1"/>

server/routes/games.js

@@ -1069,6 +1069,7 @@ const sendGame = async (req, res, game, error) => {
     name: session.name,
     color: session.color,
     order: (session.color in game.players) ? game.players[session.color].order : 0,
+    player: session.player,
     sessions: reducedSessions,
     layout: layout
   });