From e116f6a33ac023337c50c5fe0ff37961f8094d15 Mon Sep 17 00:00:00 2001
From: James Ketrenos <james_eikona@ketrenos.com>
Date: Tue, 8 Feb 2022 14:48:28 -0800
Subject: [PATCH] Show hand

Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
---
 client/src/Table.css   |  4 ++--
 client/src/Table.js    | 21 ++++++++++++---------
 server/routes/games.js |  1 +
 3 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/client/src/Table.css b/client/src/Table.css
index 8659b1c..71debb8 100755
--- a/client/src/Table.css
+++ b/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 {
diff --git a/client/src/Table.js b/client/src/Table.js
index 2d70f38..78d0e54 100755
--- a/client/src/Table.js
+++ b/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"/>
diff --git a/server/routes/games.js b/server/routes/games.js
index 85737d0..f4ad761 100755
--- a/server/routes/games.js
+++ b/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
   });