Start using Placard for building

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

client/src/Board.css

@@ -130,7 +130,7 @@
 .Option {
   cursor: pointer;
   pointer-events: all;
-  filter: brightness(150%);
+  filter: brightness(115%);
 }
 
 .Option .Pip-Shape,

client/src/Table.css

@@ -396,6 +396,14 @@
   margin: 0.25em;
   display: inline-block;
 }
+.Placard:not([disabled]) {
+  cursor: pointer;
+}
+.Placard.Selected {
+  filter: brightness(110%);
+  transform-origin: 100% 100%;
+  transform: scale(1.5);
+}
 
 .Development {
   position: relative;

client/src/Table.js

@@ -93,9 +93,17 @@ const PlayerColor = ({ color }) => {
   );
 };
   
-const Placard = ({type}) => {
+const Placard = ({table, type}) => {
-  return (
+  const buildClicked = (event) => {
+    if (table) {
+      table.buildClicked(event);
+    }
+  };
+
+ return (
     <div className="Placard"
+      onClick={buildClicked}
+      data-type={type}
       style={{
         backgroundImage:`url(${assetsPath}/gfx/placard-${type}.png)`
       }}
@@ -150,6 +158,7 @@ const Resource = ({ type, count }) => {
 const Chat = ({ table }) => {
   const [lastTop, setLastTop] = useState(0),
     [autoScroll, setAutoscroll] = useState(true),
+    [latest, setLatest] = useState(''),
     [scrollTime, setScrollTime] = useState(0);
  
   const chatInput = (event) => {
@@ -241,6 +250,12 @@ const Chat = ({ table }) => {
     );
   });
 
+  if (table.game && table.game.chat && 
+    table.game.chat[table.game.chat.length - 1].date !== latest) {
+    setLatest(table.game.chat[table.game.chat.length - 1].date);
+    setAutoscroll(true);
+  }
+
   const name = table.game ? table.game.name : "Why no game?";
 
   return (
@@ -372,6 +387,10 @@ const SelectPlayer = ({table, players}) => {
 };
 
 const Action = ({ table }) => {
+  const buildClicked = (event) => {
+    table.buildClicked(event);
+  };
+
   const discardClick = (event) => {
     const nodes = document.querySelectorAll('.Hand .Selected'),
       discarding = { wheat: 0, brick: 0, sheep: 0, stone: 0, wood: 0 };
@@ -414,8 +433,8 @@ const Action = ({ table }) => {
         <Button disabled={table.game.color ? true : false} onClick={() => {table.setState({ pickName: true})}}>Change name</Button>    </> }
       { table.game.state === 'normal' && <>
         <Button disabled={(table.game.turn.color !== table.game.color || table.game.turn.roll) ? true : false} onClick={rollClick}>Roll Dice</Button>
-        <Button disabled>Trade</Button>
+        <Button disabled={table.game.turn.roll === 0}>Trade</Button>
-        <Button disabled>Build</Button>
+        <Button disabled={table.game.turn.roll === 0} onClick={buildClicked}>Build</Button>
         { table.game.turn.roll === 7 && player && player.mustDiscard > 0 &&
           <Button onClick={discardClick}>Discard</Button>
         }
@@ -552,6 +571,7 @@ class Table extends React.Component {
     this.updateMessage = this.updateMessage.bind(this);
     this.gameSignature = this.gameSignature.bind(this);
     this.sendAction = this.sendAction.bind(this);
+    this.buildClicked = this.buildClicked.bind(this);
     
     this.mouse = { x: 0, y: 0 };
     this.radius = 0.317;
@@ -718,6 +738,28 @@ class Table extends React.Component {
     });
   }
 
+  buildClicked(event) {
+    console.log("Build clicked");
+    const game = this.state.game,
+      player = game ? game.player : undefined
+    let color;
+    switch (game ? game.color : undefined) {
+    case "O": color = "orange"; break;
+    case "R": color = "red"; break;
+    case "B": color = "blue"; break;
+    case "W": color = "white"; break;
+    }
+
+    const nodes = document.querySelectorAll(`.Placard.Selected`);
+    for (let i = 0; i < nodes.length; i++) {
+      nodes[i].classList.remove('Selected');
+    }
+    const placard = document.querySelector(`.Placard[data-type="${color}"]`);
+    if (placard) {
+      placard.classList.add('Selected');
+    } 
+  };
+
   placeRobber(robber) {
     return this.sendAction('place-robber', robber);
   };
@@ -1013,7 +1055,7 @@ class Table extends React.Component {
                 <Resource type="brick" count={player.brick}/>
                 <Resource type="sheep" count={player.sheep}/>
               </div>
-              <Placard type={`${color}`}/>
+              <Placard disabled={!game || game.turn.roll === 0} table={this} type={`${color}`}/>
             </div>}
         </div>