From b7acd7344059fb8c1b99aa165c887227d6992e62 Mon Sep 17 00:00:00 2001
From: James Ketrenos <james_eikona@ketrenos.com>
Date: Tue, 8 Mar 2022 11:03:55 -0800
Subject: [PATCH] Fixed lots of bugs found in beta testing

Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
---
 client/src/Chat.css          |  8 ++++++
 client/src/Chat.js           | 29 ++++++++++++--------
 client/src/Placard.js        | 53 +++++++++++++++++++++---------------
 client/src/PlayersStatus.css | 22 +++++++++++++--
 client/src/PlayersStatus.js  | 26 ++++++++++++------
 client/src/Table.css         |  4 +--
 client/src/Table.js          | 11 +++++++-
 client/src/Trade.js          |  2 +-
 server/routes/games.js       |  1 +
 9 files changed, 109 insertions(+), 47 deletions(-)

diff --git a/client/src/Chat.css b/client/src/Chat.css
index fc2faf0..b133e22 100644
--- a/client/src/Chat.css
+++ b/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 {
diff --git a/client/src/Chat.js b/client/src/Chat.js
index 851f28d..12b0e15 100644
--- a/client/src/Chat.js
+++ b/client/src/Chat.js
@@ -81,17 +81,23 @@ const Chat = ({ table }) => {
   }
 
   const messages = table.game && table.game.chat.map((item, index) => {
-    let message;
-    /* If the date is in the future, set it to now */
-    const dice = item.message.match(/^(.*rolled )([1-6])(, ([1-6]))?(.*)$/);
-    if (dice) {
-      if (dice[4]) {
-        message = <>{dice[1]}<Dice pips={dice[2]}/>, <Dice pips={dice[4]}/>{dice[5]}</>;
-      } else {
-        message = <>{dice[1]}<Dice pips={dice[2]}/>{dice[5]}</>;
+    let lines = item.message.split('.');
+    const message = lines.map((line, index) => {
+      if (line.trim() === '') {
+        return;
       }
-    } else {
-      let start = item.message;
+      /* If the date is in the future, set it to now */
+      const dice = line.match(/^(.*rolled )([1-6])(, ([1-6]))?(.*)$/);
+      if (dice) {
+        if (dice[4]) {
+          return <div key={`line-${index}`}>{dice[1]}<Dice pips={dice[2]}/>, 
+            <Dice pips={dice[4]}/>{dice[5]}.</div>;
+        } else {
+          return <div key={`line-${index}`}>{dice[1]}<Dice pips={dice[2]}/>{dice[5]}.</div>;
+        }
+      } 
+      
+      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'}>
diff --git a/client/src/Placard.js b/client/src/Placard.js
index 46fe033..36011bb 100644
--- a/client/src/Placard.js
+++ b/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,27 +36,29 @@ const Placard = ({table, type, active, disabled}) => {
   };
 
   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;
+  if (!disabled && active) {
+    switch (type) {
+    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' : ''}`}
+
+  if (!disabled) {
+    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;
diff --git a/client/src/PlayersStatus.css b/client/src/PlayersStatus.css
index 38e53f1..c9c220c 100644
--- a/client/src/PlayersStatus.css
+++ b/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 {
diff --git a/client/src/PlayersStatus.js b/client/src/PlayersStatus.js
index e3af5b0..4b47915 100644
--- a/client/src/PlayersStatus.js
+++ b/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;
\ No newline at end of file
diff --git a/client/src/Table.css b/client/src/Table.css
index c4d196c..c01d3d7 100755
--- a/client/src/Table.css
+++ b/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 {
diff --git a/client/src/Table.js b/client/src/Table.js
index f8fc7ec..523ea79 100755
--- a/client/src/Table.js
+++ b/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}
diff --git a/client/src/Trade.js b/client/src/Trade.js
index 6bc66f0..98d0d70 100644
--- a/client/src/Trade.js
+++ b/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';
diff --git a/server/routes/games.js b/server/routes/games.js
index b36856a..6c9b30f 100755
--- a/server/routes/games.js
+++ b/server/routes/games.js
@@ -1227,6 +1227,7 @@ const calculateRoadLengths = (game, session) => {
     }
   } else {
     game.longestRoad = null;
+    game.longestRoadLength = 0;
   }