Minor tweaks to UI gameplay

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

client/src/App.css

@@ -57,11 +57,18 @@ body {
 }
 
 .Table .WarningDialog .Warning {
+  display: flex;
+  flex-direction: column;
+  padding: 0.25rem;
+}
+
+.Table .WarningDialog .Warning > div {
   display: flex;
   padding: 1rem;
 }
 
 
+
 .Table .PlayersStatus {
   z-index: 5000;
 }

client/src/App.js

@@ -304,7 +304,10 @@ const Table = () => {
               </Paper>
             </div> }
             { warning && <div className="WarningDialog">
-              <Paper className="Warning">{ warning }</Paper>
+              <Paper className="Warning">
+                <div>{ warning }</div>
+                <Button onClick={() => { setWarning("")}}>dismiss</Button>
+              </Paper>
             </div> }
             { state === 'normal' && <SelectPlayer/> }
             { color && state === 'game-order' && <GameOrder/> }

client/src/Board.css

@@ -162,13 +162,13 @@
 .Board .Option .Tile-Shape,
 .Board .Option .Corner-Shape,
 .Board .Option .Road-Shape {
-  background-color: rgba(255, 255, 255, 0.5) !important;
+/*  background-color: rgba(255, 255, 255, 0.5) !important;*/
 }
 
 .Board .Option .Tile-Shape:hover,
 .Board .Option .Corner-Shape:hover,
 .Board .Option .Road-Shape :hover{
-  background-color: rgba(255, 255, 255, 0.75) !important;
+ /* background-color: rgba(255, 255, 255, 0.75) !important; */
 }
 
 .Robber .Pip-Shape {
@@ -217,19 +217,19 @@
 }
 
 .Road[data-longest="5"] {
-  filter: drop-shadow(0px 0px 5px black);
+  filter: brightness(110%) drop-shadow(0px 0px 5px black);
 }
 .Road[data-longest="6"] {
-  filter: drop-shadow(0px 0px 6px black);
+  filter: brightness(120%) drop-shadow(0px 0px 6px black);
 }
 .Road[data-longest="7"] {
-  filter: drop-shadow(0px 0px 7px black);
+  filter: brightness(130%) drop-shadow(0px 0px 7px black);
 }
 .Road[data-longest="8"] {
-  filter: drop-shadow(0px 0px 8px black);
+  filter: brightness(140%) drop-shadow(0px 0px 8px black);
 }
 .Road[data-longest="9"] {
-  filter: drop-shadow(0px 0px 9px black);
+  filter: brightness(150%) drop-shadow(0px 0px 9px black);
 }
 .Road[data-longest="10"],
 .Road[data-longest="11"],
@@ -237,7 +237,7 @@
 .Road[data-longest="13"],
 .Road[data-longest="14"],
 .Road[data-longest="15"] {
-  filter: drop-shadow(0px 0px 10px black);
+  filter: brightness(160%) drop-shadow(0px 0px 10px black);
 }
 
 .Board .Selected {
@@ -264,3 +264,40 @@
 [data-color='B'] > .Road-Shape {
   background-color: rgba(0, 0, 255, 1);
 }
+
+/*
+@keyframes blink {
+  from {  
+    filter: brightness(90%);
+    opacity: 1;
+  }
+
+  50% {
+    filter: brightness(150%);
+  }
+
+  to {
+    filter: brightness(150%);
+    opacity: 0.5;
+  }
+}
+*/
+.Board .Option:hover {
+  filter: brightness(100%) drop-shadow(0 0 2px black);
+  opacity: 1;
+  /*
+  animation-play-state: paused;
+  */
+}
+
+.Board .Option {
+  filter: brightness(200%) drop-shadow(0 0 3px rgba(255, 0, 255, 1));
+  opacity: 1;
+  /*
+  transition-timing-function: ease-in-out;
+  animation-duration: 0.5s;
+  animation-name: blink;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+  */
+}

client/src/Board.js

@@ -54,6 +54,8 @@ const Board = () => {
     'placements', 'turn', 'state', 'color', 'longestRoadLength'
   ], []);
 
+  console.log(`board - render ws is ${!ws ? 'NULL' : (ws.readyState === ws.OPEN ? 'OPEN' : '!OPEN')}`);
+
   const onWsMessage = (event) => {
     const data = JSON.parse(event.data);
     switch (data.type) {
@@ -608,6 +610,7 @@ const Board = () => {
             return;
           }
           el.classList.add('Option');
+          el.setAttribute('data-color', turn.color);
         });
       }
       if (turn.limits['corners']) {
@@ -617,6 +620,7 @@ const Board = () => {
             return;
           }
           el.classList.add('Option');
+          el.setAttribute('data-color', turn.color);
         });
       }
       if (turn.limits['tiles']) {

client/src/Hand.js

@@ -95,7 +95,7 @@ const Hand = ({buildActive, setBuildActive, setCardActive}) => {
           if (B.played) {
             return +1;
           }
-          return 0;
+          return B.turn - A.turn; /* Put playable cards on top */
         }).map(card => <Development
         onClick={() => cardClicked(card)}
         card={card}

client/src/PlayersStatus.js

@@ -18,6 +18,10 @@ const Player = ({ player, onClick, reverse, color,
     ? <Resource label={true} type={'progress-back'} 
         count={player.unplayed} disabled/>
     : undefined;
+  const resourceCards = player.resources
+    ? <Resource label={true} type={'resource-back'}
+    count={player.resources} disabled/>
+    : undefined;
   const armyCards = player.army 
     ? <Resource label={true} type={'army-1'} count={player.army} disabled/>
     : undefined;
@@ -38,13 +42,13 @@ const Player = ({ player, onClick, reverse, color,
         count={player.longestRoad}
       /> : undefined;
 
-    const largestArmyPlacard = largestArmy && largestArmy === color ?
-      <Placard
-        disabled
-        active={false}
-        type='largest-army'
-        count={player.army}
-      /> : undefined;
+  const largestArmyPlacard = largestArmy && largestArmy === color ?
+    <Placard
+      disabled
+      active={false}
+      type='largest-army'
+      count={player.army}
+    /> : undefined;
 
   return <div className="Player">
     <div className="Who">
@@ -64,8 +68,10 @@ const Player = ({ player, onClick, reverse, color,
             { longestRoadPlacard }
             { !largestArmyPlacard && armyCards }
             { developmentCards }
+            { resourceCards }
           </> }
           { reverse && <>
+            { resourceCards }
             { developmentCards }
             { !largestArmyPlacard && armyCards }
             { longestRoadPlacard }

client/src/Winner.js

@@ -101,6 +101,8 @@ const Winner = () => {
       Throughout the game, the robber stole <b>{winner.robberStole}</b> resources: 
       <div>{stolen}</div>
     </div>;
+  } else {
+    robber = <div>The robber never stole any resources from anyone!</div>;
   }
 
   const averageSeconds = Math.floor(winner.totalTime / turnCount / 1000),

server/routes/games.js

@@ -2054,14 +2054,15 @@ const buyDevelopment = (game, session) => {
   card.turn = game.turns;
   player.development.push(card);
 
+  sendUpdateToPlayer(game, session, {
+    private: session.player
+  });
+
   sendUpdateToPlayers(game, {
     chat: game.chat,
     activities: game.activities,
     players: getFilteredPlayers(game)
   });
-  sendUpdateToPlayer(game, session, {
-    private: session.player
-  });
 }
 
 const playCard = (game, session, card) => {