Fixed placard layout

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

client/src/Placard.css

@@ -0,0 +1,54 @@
+.Placard {
+  display: flex;
+  position: relative;
+  width: 9.4em;
+  height: 11.44em;
+  background-position: center left;
+  background-repeat: no-repeat;
+  background-size: cover;
+  margin: 0.25em 0;
+  display: inline-block;
+  display: flex;
+  flex-direction: column;
+  justify-items: space-between;
+  pointer-events: none;
+}
+
+.Placard > div {
+  box-sizing: border-box;
+  margin: 0 0.9em;
+}
+
+.Placard:not([disabled]) {
+  cursor: pointer;
+  pointer-events: all;
+}
+
+.Placard.Selected {
+  filter: brightness(110%);
+  transform-origin: 100% 100%;
+  transform: scale(1.5);
+  z-index: 10000;
+}
+
+.Placard > div:nth-child(1) {
+  height: 15.5%;
+}
+
+.Placard > div:nth-child(2),
+.Placard > div:nth-child(3),
+.Placard > div:nth-child(4),
+.Placard > div:nth-child(5) {
+    height: 15.25%;
+}
+
+.Placard > div:nth-child(6) {
+  flex: 1;
+}
+
+.Placard > div:hover:nth-child(2),
+.Placard > div:hover:nth-child(3),
+.Placard > div:hover:nth-child(4),
+.Placard > div:hover:nth-child(5) {
+  background-color: #ffffff40;
+}

client/src/Placard.js

@@ -0,0 +1,70 @@
+import React from "react";
+import "./Placard.css";
+import { assetsPath } from './Common.js';
+
+const Placard = ({table, type, active, disabled}) => {
+  const dismissClicked = (event) => {
+    table.setState({ buildActive: false });
+  }
+
+  const buildClicked = (event) => {
+    if (!type.match(/^l.*/)) {
+      if (!table.state.buildActive) {
+        table.setState({ buildActive: true });
+      }
+    }
+  };
+
+  const roadClicked = (event) => {
+    table.buyRoad();
+    table.setState({ buildActive: false });
+  };
+
+  const settlementClicked = (event) => {
+    table.buySettlement();
+    table.setState({ buildActive: false });
+  };
+
+  const cityClicked = (event) => {
+    table.buyCity();
+    table.setState({ buildActive: false });
+  };
+
+  const developmentClicked = (event) => {
+    table.buyDevelopment();
+    table.setState({ buildActive: false });
+  };
+
+  let buttons;
+  switch (active ? type : undefined) {
+  case 'orange':
+  case 'red':
+  case 'white':
+  case 'blue':
+    buttons = <>
+      <div onClick={dismissClicked}/>
+      <div onClick={roadClicked}/>
+      <div onClick={settlementClicked}/>
+      <div onClick={cityClicked}/>
+      <div onClick={developmentClicked}/>
+      <div onClick={dismissClicked}/>
+    </>;
+    break;
+  default:
+    buttons = <></>;
+    break;
+  }
+  
+  return (
+    <div className={`Placard${active ? ' Selected' : ''}`}
+      onClick={table ? buildClicked : undefined}
+      disabled={disabled}
+      data-type={type}
+      style={{
+        backgroundImage:`url(${assetsPath}/gfx/placard-${type}.png)`
+      }}
+    >{buttons}</div>
+  );
+};
+
+export default Placard;

client/src/PlayersStatus.js

@@ -13,8 +13,13 @@ const Player = ({ table, color, onClick, reverse }) => {
   const game = table.game;
   const player = game.players[color];
  
-  const developmentCards = player.unplayed ? <Resource label={true} type={'progress-back'} count={player.unplayed} disabled/> : undefined;
+  const developmentCards = player.unplayed
-  const armyCards = player.army ? <Resource label={true} type={'army-1'} count={player.army} disabled/> : undefined;
+    ? <Resource label={true} type={'progress-back'} 
+        count={player.unplayed} disabled/>
+    : undefined;
+  const armyCards = player.army 
+    ? <Resource label={true} type={'army-1'} count={player.army} disabled/>
+    : undefined;
   let points = <></>;
   if (player.points && reverse) {
     points = <><b>{player.points}</b><Resource type={'progress-back'} count={player.points} disabled/></>;
@@ -42,9 +47,13 @@ const Player = ({ table, color, onClick, reverse }) => {
         <PlayerColor color={color}/>{getPlayerName(game.sessions, color)}
       </div>
       <div className="What">
-        { game.color === color && <div className="LongestRoad">Longest road: {player.longestRoad}</div> }
+        { game.color === color &&
+          <div className="LongestRoad">
+            Longest road: {player.longestRoad ? player.longestRoad : 0}
+          </div>
+        }
         <div className="Points">{points}</div>
-        { largestArmy || longestRoad || armyCards || developmentCards && <>
+        { (largestArmy || longestRoad || armyCards || developmentCards) && <>
           <div className="Has">
             { !reverse && <>
               { largestArmy }

client/src/notes.md

@@ -0,0 +1,27 @@
+
+Game Order
+---
+
+If game-order active, show Game Order dialog.
+
+Game Order dialog:
+
+* List all active players
+* List each active player's roll
+* Sort order as player roll comes in
+* Message indicates what is going on
+
+Roll dice
+
+R 6
+O 5
+W 5
+B 3
+
+O 6
+W 6
+
+O 3
+W 5
+
+Final order: R W O B