Lost of fixes'

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

client/src/Board.css

@@ -125,27 +125,24 @@
 .Option {
   cursor: pointer;
   pointer-events: all;
-}
+  filter: brightness(150%);
-
-.Option .Pip-Shape,
-.Option .Tile-Shape,
-.Option .Corner-Shape,
-.Option .Road-Shape {
-  background-color: rgba(255, 255, 255, 0.5);
 }
 
 .Robber .Pip-Shape,
 .Pip-Shape:hover {
   clip-path: circle(45%); /* show through the border */
+  background-color:#e7c099;
   background-size: contain;
-  background-position: center;
+  background-position: center; 
   background-image:url("./assets/woman-robber.png"); 
 }
 
 .Tile-Shape:hover,
 .Corner-Shape:hover,
 .Road-Shape:hover {
-  background-color: white;
+/*  background-color: white;*/
+  filter: brightness(150%);
+
 }
 
 .Board .Selected {

client/src/Board.js

@@ -92,7 +92,7 @@ const Board = ({ table, game }) => {
       return;
     };
 
-  return <div className={`Pip${pip.robber ? ' Robber' : ''}`}
+  return <div className="Pip"
       onClick={onClick}
       data-roll={pip.roll}
       data-index={pip.index}
@@ -458,7 +458,7 @@ const Board = ({ table, game }) => {
   }
   
   if (game) {
-    let nodes = document.querySelectorAll(`.Pip .Robber`);
+    let nodes = document.querySelectorAll(`.Pip.Robber`);
     for (let i = 0; i < nodes.length; i++) {
       nodes[i].classList.remove('Robber');
     }

client/src/Table.css

@@ -8,6 +8,11 @@
   background-image: url("./assets/tabletop.png");
 }
 
+.BottomBar {
+  display: flex;
+  margin-right: 40vw;
+  justify-content: space-between;
+}
 
 .WaitingForPlayer {
   display: flex;
@@ -126,8 +131,33 @@
   transition: margin-left 1s ease-in-out 0.25s, margin-right 1s ease-in-out 0.25s;
 }
 
+.Stack > *:not(:first-child) {
+  margin-left: -4.5em;
+}
+
+.Hand:hover .Stack:hover > *:not(:first-child) {
+  /*  margin-left: -2em; */
+  }
+  
+.Hand:hover .Stack:hover:not(:last-child) > *:last-child {
+/*  margin-right: 3em; */
+}
+  
+.Hand {
+  display: flex;
+  min-height: calc(7.2em + 0.5em);
+}
+
+.Hand > button {
+  align-self: center;
+  justify-self: center;
+}
+
+.Placard:hover {
+  filter: brightness(105%);
+}
+
 .Development:hover,
-.Placard:hover,
 .Resource:hover {
   filter: brightness(150%);
 }
@@ -301,28 +331,6 @@
   flex-grow: 1;
 }
 
-.Stack > *:not(:first-child) {
-  margin-left: -4.5em;
-}
-
-.Hand {
-  display: flex;
-  min-height: calc(7.2em + 0.5em);
-}
-
-.Hand > button {
-  align-self: center;
-  justify-self: center;
-}
-
-.Hand:hover .Stack:hover > *:not(:first-child) {
-  margin-left: -2em;
-}
-
-.Hand:hover .Stack:hover:not(:last-child) > *:last-child {
-  margin-right: 3em;
-}
-
 .Placard {
   position: relative;
   width: 9.4em;

client/src/Table.js

@@ -93,14 +93,14 @@ const PlayerColor = ({ color }) => {
   );
 };
   
-class Placard extends React.Component {
+const Placard = ({type}) => {
-  render() {
+  return (
-    return (
+    <div className="Placard"
-      <div className="Placard"
+      style={{
-        style={{backgroundImage:`url(${assetsPath}/gfx/placard-${this.props.type}.png)`}}>
+        backgroundImage:`url(${assetsPath}/gfx/placard-${type}.png)`
-      </div>
+      }}
-    );
+    />
-  }
+  );
 };
 
 class Development extends React.Component {
@@ -947,19 +947,29 @@ class Table extends React.Component {
   render() {
     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;
+    }
     return (
       <div className="Table">
         
         <div style={{display: "inline-flex", flex: 1, flexDirection: "column"}}>
           <Board table={this} game={game}/>
-          { player !== undefined && <div className="Hand">
+          { player !== undefined && 
-            <Resource type="wood" count={player.wood}/>
+            <div className="BottomBar">
-            <Resource type="wheat" count={player.wheat}/>
+              <div className="Hand">
-            <Resource type="stone" count={player.stone}/>
+                <Resource type="wood" count={player.wood}/>
-            <Resource type="brick" count={player.brick}/>
+                <Resource type="wheat" count={player.wheat}/>
-            <Resource type="sheep" count={player.sheep}/>
+                <Resource type="stone" count={player.stone}/>
-          </div> }
+                <Resource type="brick" count={player.brick}/>
+                <Resource type="sheep" count={player.sheep}/>
+              </div>
+              <Placard type={`${color}`}/>
+            </div>}
         </div>
 
         { game && <div className={'Game ' + game.state}>
@@ -1004,19 +1014,8 @@ class Table extends React.Component {
                 </div>
               </div>
               <div className="Hand">
-                <Placard type="largest-army" count="1"/>
+                <Placard type="largest-army"/>
-                <Placard type="longest-road" count="1"/>
+                <Placard type="longest-road"/>
-              </div>
-              <div className="Statistics">
-                <div>Stats</div>
-                <div>
-                  <div>Points: 7</div>
-                  <div>Cards: {this.state.total} </div>
-                  <div>Roads remaining: 4</div>
-                  <div>Longest road: 7</div>
-                  <div>Cities remaining: 4</div>
-                  <div>Settlements remaining: 5</div>
-                </div>
               </div>
             </> }
           </div>

server/routes/games.js

@@ -1139,7 +1139,7 @@ const sendGame = async (req, res, game, error) => {
   
   /* If the current turn is a robber placement, and everyone has
    * discarded, set the limits for where the robber can be placed */
-  if (game.turn.roll === 7) {
+  if (game.turn && game.turn.roll === 7) {
     let move = true;
     for (let color in game.players) {
       const discard = game.players[color].mustDiscard;
@@ -1157,6 +1157,7 @@ const sendGame = async (req, res, game, error) => {
         game.turn.limits.pips.push(i);
       }
     } else {
+      game.turn.limits = {};
       game.turn.actions = [];
     }
   }