Fixed lots of bugs found in beta testing

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

client/src/Chat.css

@@ -39,6 +39,12 @@
   align-items: center;
 }
 
+.ChatList .MuiTypography-body1 > div {
+  align-items: center;
+  display: inline-flex;
+  flex-wrap: wrap;
+}
+
 .ChatList .System .MuiTypography-body1 {
   margin-left: 1em;
 }
@@ -75,6 +81,8 @@
   border: 2px solid #444;
   border-radius: 2px;
   margin-right: 0.5rem;
+  margin-top: 0.5rem;
+  top: -0.25rem;
 }
 
 .ChatList .Resource > div {

client/src/Chat.js

@@ -81,17 +81,23 @@ const Chat = ({ table }) => {
   }
 
   const messages = table.game && table.game.chat.map((item, index) => {
-    let message;
+    let lines = item.message.split('.');
+    const message = lines.map((line, index) => {
+      if (line.trim() === '') {
+        return;
+      }
       /* If the date is in the future, set it to now */
-    const dice = item.message.match(/^(.*rolled )([1-6])(, ([1-6]))?(.*)$/);
+      const dice = line.match(/^(.*rolled )([1-6])(, ([1-6]))?(.*)$/);
       if (dice) {
         if (dice[4]) {
-        message = <>{dice[1]}<Dice pips={dice[2]}/>, <Dice pips={dice[4]}/>{dice[5]}</>;
+          return <div key={`line-${index}`}>{dice[1]}<Dice pips={dice[2]}/>, 
+            <Dice pips={dice[4]}/>{dice[5]}.</div>;
         } else {
-        message = <>{dice[1]}<Dice pips={dice[2]}/>{dice[5]}</>;
+          return <div key={`line-${index}`}>{dice[1]}<Dice pips={dice[2]}/>{dice[5]}.</div>;
         }
-    } else {
+      } 
-      let start = item.message;
+      
+      let start = line, message;
       while (start) {
         const resource = start.match(/^(.*)(([0-9]+) (wood|sheep|wheat|stone|brick),?)(.*)$/);
         if (resource) {
@@ -103,7 +109,8 @@ const Chat = ({ table }) => {
           start = '';
         }
       }
-    }
+      return <div key={`line-${index}`}>{ message }.</div>;
+    });
 
     return (
       <ListItem key={`msg-${item.date}`} className={item.color ? '' : 'System'}>

client/src/Placard.js

@@ -2,7 +2,7 @@ import React from "react";
 import "./Placard.css";
 import { assetsPath } from './Common.js';
 
-const Placard = ({table, type, active, disabled}) => {
+const Placard = ({table, type, active, disabled, count}) => {
   const dismissClicked = (event) => {
     table.setState({ buildActive: false });
   }
@@ -36,7 +36,8 @@ const Placard = ({table, type, active, disabled}) => {
   };
 
   let buttons;
-  switch (active ? type : undefined) {
+  if (!disabled && active) {
+    switch (type) {
     case 'orange':
     case 'red':
     case 'white':
@@ -54,9 +55,10 @@ const Placard = ({table, type, active, disabled}) => {
       buttons = <></>;
       break;
     }
+  }
 
-  return (
+  if (!disabled) {
-    <div className={`Placard${active ? ' Selected' : ''}`}
+    return <div className={`Placard${active ? ' Selected' : ''}`}
       onClick={table ? buildClicked : undefined}
       disabled={disabled}
       data-type={type}
@@ -64,7 +66,14 @@ const Placard = ({table, type, active, disabled}) => {
         backgroundImage:`url(${assetsPath}/gfx/placard-${type}.png)`
       }}
     >{buttons}</div>
-  );
+  } else {
+    return <div className={`Placard${active ? ' Selected' : ''}`}
+      disabled={disabled}
+      data-type={type}
+      style={{
+        backgroundImage:`url(${assetsPath}/gfx/placard-${type}.png)`
+      }}>{ count &&  <div className="Right">{count}</div> }</div>
+  }
 };
 
 export default Placard;

client/src/PlayersStatus.css

@@ -122,11 +122,29 @@
   box-sizing: border-box;
   border-radius: 2px;
   border: 1px solid #fff;
-  margin: 0 0.25rem 0 0;
+  margin: 0 0.75rem 0 0;
 }
 
 .PlayersStatus.ActivePlayer .Placard {
-  margin-left: 0.25rem;
+  margin-left: 0.75rem;
+}
+
+.PlayersStatus .Placard > div.Right {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  top: -0.5rem;
+  right: -1.25rem;
+  border-radius: 50%;
+  border: 1px solid white;
+  background-color: rgb(36, 148, 46);
+  font-size: 0.75rem;
+  width: 1.25rem;
+  height: 1.25rem;
+  text-align: center;
+  line-height: 1rem;
+  filter: brightness(150%);
 }
 
 .PlayersStatus .Points {

client/src/PlayersStatus.js

@@ -22,10 +22,11 @@ const Player = ({ table, color, onClick, reverse }) => {
     : undefined;
   let points = <></>;
   if (player.points && reverse) {
-    points = <><b>{player.points}</b><Resource type={'progress-back'} count={player.points} disabled/></>;
+    points = <><b>{player.points}</b><Resource type={'progress-back'} 
+      count={player.points} disabled/></>;
   } else if (player.points) {
-    points = <><Resource type={'progress-back'} count={player.points} disabled/><b>{player.points}</b></>;
+    points = <><Resource type={'progress-back'} count={player.points} 
-
+      disabled/><b>{player.points}</b></>;
   }
   
   const longestRoad = game.longestRoad && game.longestRoad === color ?
@@ -33,6 +34,7 @@ const Player = ({ table, color, onClick, reverse }) => {
         disabled
         active={false}
         type='longest-road'
+        count={game.longestRoadLength}
       /> : undefined;
 
     const largestArmy = game.largestArmy && game.largestArmy === color ?
@@ -40,6 +42,7 @@ const Player = ({ table, color, onClick, reverse }) => {
         disabled
         active={false}
         type='largest-army'
+        count={game.largestArmySize}
       /> : undefined;
   
   return <div className="Player">
@@ -58,19 +61,21 @@ const Player = ({ table, color, onClick, reverse }) => {
             { !reverse && <>
               { largestArmy }
               { longestRoad }
-              { armyCards }
+              { !largestArmy && armyCards }
               { developmentCards }
             </> }
             { reverse && <>
               { developmentCards }
-              { armyCards }
+              { !largestArmy && armyCards }
               { longestRoad }
               { largestArmy }
             </> }
           </div>
         </> }
       </div>
-      <div className={`${onClick ? 'Normal' : 'Shrunken'}`}><BoardPieces onClick={onClick} table={table} color={color}/></div>
+      <div className={`${onClick ? 'Normal' : 'Shrunken'}`}>
+        <BoardPieces onClick={onClick} table={table} color={color}/>
+      </div>
     </div>
 };
 
@@ -91,7 +96,8 @@ const PlayersStatus = ({ table, onClick, color, active }) => {
       color={color}/>;
   } else {
     players = Object.getOwnPropertyNames(game.players)
-    .filter(color => game.players[color].status === 'Active' && game.color !== color)
+    .filter(color => game.players[color].status === 'Active' 
+      && game.color !== color)
     .map(color => {
       const player = game.players[color];
       return <Player
@@ -102,7 +108,11 @@ const PlayersStatus = ({ table, onClick, color, active }) => {
     });
   }
 
-  return <div className={`PlayersStatus ${active ? 'ActivePlayer' : ''}`}>{ players }</div>;
+  return (
+    <div className={`PlayersStatus ${active ? 'ActivePlayer' : ''}`}>
+      { players }
+    </div>
+  );
 }
 
 export default PlayersStatus;

client/src/Table.css

@@ -173,7 +173,7 @@
 }
 
 .Stack:not(:first-child) {
-  margin-left: -3em;
+  margin-left: -3.5em;
   transition: margin-left 1s ease-in-out 0.25s;
 }
 
@@ -182,7 +182,7 @@
 }
 
 .Stack > *:not(:first-child) {
-  margin-left: -4.5em;
+  margin-left: -4em;
 }
   
 .Hand {

client/src/Table.js

@@ -902,7 +902,16 @@ class Table extends React.Component {
 
       development = [];
       for (let type in stacks) {
-        const cards = stacks[type].map(card => <Development
+        const cards = stacks[type]
+          .sort((A, B) => {
+            if (A.played) {
+              return -1;
+            }
+            if (B.played) {
+              return +1;
+            }
+            return 0;
+          }).map(card => <Development
           onClick={() => this.cardClicked(card)}
           card={card}
           table={this}

client/src/Trade.js

@@ -357,7 +357,7 @@ const Trade = ({table}) => {
     }
     const _gets = source.gets.length ? source.gets.map((get, index) => {
         if (get.type === 'bank') {
-          return <span key={`get-bank-${index}`}><b>4</b> of any resource </span>;
+          return <span key={`get-bank-${index}`}><b>{get.count}</b> of any resource </span>;
         }
         return <Resource key={`get-${get.type}-${index}`} disabled label type={get.type} count={get.count}/>;
       }) : 'nothing';

server/routes/games.js

@@ -1227,6 +1227,7 @@ const calculateRoadLengths = (game, session) => {
     }
   } else {
     game.longestRoad = null;
+    game.longestRoadLength = 0;
   }