Add better per-player stats

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

client/src/BoardPieces.css

@@ -2,12 +2,12 @@
   display: flex;
   flex-direction: column;
   position: absolute;
+  align-items: flex-end;
   height: 6rem;
-  left: 1rem;
+  right: 30rem;
-  bottom: 8rem; /* 1rem over top of Resource cards in hand */
+  bottom: 11rem; /* 1rem over top of Resource cards in hand */
   width: 20rem;
   z-index: 1000;
-  border-bottom: 1px solid black;
   padding-bottom: 0.5rem;
   margin-bottom: 0.5rem;
 }

client/src/PlayersStatus.css

@@ -3,13 +3,19 @@
   flex-direction: column;
   position: absolute;
   left: 1rem;
-  bottom: 15rem;
+  bottom: 7rem;
-  border-bottom: 1px solid black;
   margin-bottom: 0.5rem;
   color: #d0d0d0;
   pointer-events: none;
 }
 
+.PlayersStatus.ActivePlayer {
+  right: 30rem;
+  bottom: 11rem; /* 1rem over top of Resource cards in hand */
+  align-items: flex-end;
+  pointer-events: all;
+}
+
 .PlayersStatus .Player {
   margin-bottom: 0.5rem;
 }
@@ -23,6 +29,7 @@
 .PlayersStatus .What {
   margin-left: 0.25rem;
   margin-top: 0.25rem;
+  margin-right: 0.25rem;
 }
 
 .PlayersStatus .PlayerColor {
@@ -36,11 +43,75 @@
   display: flex;
 }
 
-.PlayersStatus .Shrunken .BoardPieces {
+.PlayersStatus .Normal {
-  transform-origin: 0 100%;
+  position: relative;
-  transform: scale(0.75);
+  height: 7rem;
+  display: flex;
+}
+
+.PlayersStatus .Shrunken {
+  position: relative;
+  height: 5.75rem;
+  display: flex;
+}
+
+.PlayersStatus .BoardPieces {
+  align-items: flex-end;
   bottom: 0;
-  left: 0;
+  right: 0;
   border-bottom: none;
   margin-bottom: 0;
+}
+
+.PlayersStatus .Shrunken .BoardPieces {
+  align-items: flex-start;
+  left: 0;
+  transform-origin: 0 100%;
+  transform: scale(0.75);
+}
+
+.PlayersStatus .Resource {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-around;
+  height: 3rem;
+  width: 2.1rem;
+  background-size: contain;
+  pointer-events: none;
+  margin: 0 0.125rem;
+  border-radius: 2px;
+  filter: brightness(150%);
+}
+
+
+.PlayersStatus .Points .Resource {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-around;
+  height: 1rem;
+  width: 1rem;
+  pointer-events: none;
+  border-radius: 50%;
+  border: 2px solid #444;
+  background-size: 130%;
+  margin-left: -0.625rem;
+  margin-bottom: 0.5rem;
+}
+
+.PlayersStatus .Points .Resource:first-child {
+  margin-left: 0;
+}
+
+.PlayersStatus .Resource > div {
+  position: absolute;
+  top: -0.5rem;
+  right: -0.5rem;
+  border-radius: 50%;
+  border: 1px solid white;
+  background-color: rgb(36, 148, 46);
+  font-size: 0.75rem;
+  width: 1rem;
+  height: 1rem;
+  text-align: center;
+  line-height: 1rem;
 }

client/src/PlayersStatus.js

@@ -5,37 +5,54 @@ import BoardPieces from './BoardPieces.js';
 import { getPlayerName } from './Common.js';
 import PlayerColor from './PlayerColor.js';
 
-const Player = ({ table, color }) => {
+const Player = ({ table, color, onClick }) => {
- 
   const player = table.game.players[color];
+ 
+  const developmentCards = player.unplayed ? <Resource label={true} type={'progress-back'} count={player.unplayed} disabled/> : <></>;
+  const armyCards = player.army ? <Resource label={true} type={'army-1'} count={player.army} disabled/> : <></>;
+  const points = player.points ? 
+    <Resource type={'progress-back'} count={player.points} disabled/> : <></>;
+  
   return <div className="Player">
       <div className="Who">
         <PlayerColor color={color}/>{getPlayerName(table.game.sessions, color)}
       </div>
       <div className="What">
-        <div>Victory points: {player.points}</div>
+        <div className="Points">{points}</div>
-        <div>Development cards: {player.unplayed}</div>
+        { developmentCards }
-        <div>Army: {player.army}</div>
+        { armyCards }
-        <div className="Shrunken"><BoardPieces table={table} color={color}/></div>
       </div>
+      <div className={`${onClick ? 'Normal' : 'Shrunken'}`}><BoardPieces onClick={onClick} table={table} color={color}/></div>
     </div>
 };
 
-const PlayersStatus = ({ table }) => {
+const PlayersStatus = ({ table, onClick, color, className }) => {
   if (!table.game) {
     return <></>;
   }
 
-  const players = Object.getOwnPropertyNames(table.game.players)
+  let players;
-  .filter(color => table.game.players[color].status === 'Active' && table.game.color !== color)
+  if (color) {
-  .map(color => {
     const player = table.game.players[color];
-    return <Player
+    players = <Player
+      onClick={onClick}
       key={`PlayerStatus-${getPlayerName(table.game.sessions, color)}`}
       table={table}
       color={color}/>;
-  });
+  } else {
-  return <div className="PlayersStatus">{ players }</div>;
+    players = Object.getOwnPropertyNames(table.game.players)
+    .filter(color => table.game.players[color].status === 'Active' && table.game.color !== color)
+    .map(color => {
+      const player = table.game.players[color];
+      return <Player
+        onClick={onClick}
+        key={`PlayerStatus-${getPlayerName(table.game.sessions, color)}`}
+        table={table}
+        color={color}/>;
+    });
+  }
+
+  return <div className={`PlayersStatus ${className ? className : ''}`}>{ players }</div>;
 }
 
 export default PlayersStatus;

client/src/Table.css

@@ -321,6 +321,7 @@
 }
 
 .Placard {
+  z-index: 30000; /* over the top of the BuildPieces */
   position: relative;
   width: 9.4em;
   height: 11.44em;

client/src/Table.js

@@ -994,7 +994,9 @@ class Table extends React.Component {
           <Board table={this} game={game}/>
           { player !== undefined && <>
             <PlayersStatus table={this}/>
-            <BoardPieces onClick={this.buildItem} table={this} color={this.game.color}/>
+            <PlayersStatus className="ActivePlayer"
+              onClick={this.buildItem} 
+              table={this} color={this.game.color}/>
             <div className="BottomBar">
               <div className="Hand">
                 <Resource type="wood" count={player.wood}/>