Count initial roads against road count

Do not give up longest road if not split and there is a tie

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

client/src/PlayersStatus.css

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   position: absolute;
-  left: 1rem;
+  left: 0;
   bottom: 7rem;
   margin-bottom: 0.5rem;
   color: #d0d0d0;
@@ -43,11 +43,15 @@
 }
 
 .PlayersStatus .What {
-  margin: 0.25rem;
+  margin: 0 0.5rem;
   display: flex;
   flex-direction: column;
 }
 
+.PlayersStatus .What > div {
+  margin-top: 0.25rem;
+}
+
 .PlayersStatus.ActivePlayer .What {
   align-items: flex-end;
 }
@@ -61,12 +65,15 @@
   position: relative;
   height: 4.75rem;
   display: flex;
+  margin-left: 0.5rem;
+  margin-top: 0.25rem;
 }
 
 .PlayersStatus .Normal {
   position: relative;
   height: 7rem;
   display: flex;
+  margin-right: 0.5rem;
 }
 
 
@@ -110,6 +117,7 @@
   */
   width: 3rem;
   height: 3.64rem;
+  background-position: center;
   background-size: 108%;
   box-sizing: border-box;
   border-radius: 2px;
@@ -121,6 +129,11 @@
   margin-left: 0.25rem;
 }
 
+.PlayersStatus .Points {
+  display: flex;
+  margin-top: 0.25rem;
+}
+
 .PlayersStatus .Points .Resource {
   display: inline-flex;
   align-items: center;
@@ -138,6 +151,10 @@
   margin-left: 0;
 }
 
+.PlayersStatus .Stack:not(:first-child) {
+  margin-left: 0;
+}
+
 .PlayersStatus .Resource > div {
   position: absolute;
   top: -0.5rem;
@@ -151,3 +168,8 @@
   text-align: center;
   line-height: 1rem;
 }
+
+.PlayersStatus .Points b {
+  margin-right: 0.25rem;
+  margin-left: 0.25rem;
+}

client/src/PlayersStatus.js

@@ -13,45 +13,53 @@ const Player = ({ table, color, onClick, reverse }) => {
   const game = table.game;
   const player = game.players[color];
  
-  const developmentCards = player.unplayed ? <Resource label={true} type={'progress-back'} count={player.unplayed} disabled/> : <></>;
+  const developmentCards = player.unplayed ? <Resource label={true} type={'progress-back'} count={player.unplayed} disabled/> : undefined;
-  const armyCards = player.army ? <Resource label={true} type={'army-1'} count={player.army} disabled/> : <></>;
+  const armyCards = player.army ? <Resource label={true} type={'army-1'} count={player.army} disabled/> : undefined;
-  const points = player.points ? 
+  let points = <></>;
-    <Resource type={'progress-back'} count={player.points} disabled/> : <></>;
+  if (player.points && reverse) {
+    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></>;
+
+  }
   
   const longestRoad = game.longestRoad && game.longestRoad === color ?
       <Placard
         disabled
         active={false}
         type='longest-road'
-      /> : <></>;
+      /> : undefined;
 
     const largestArmy = game.largestArmy && game.largestArmy === color ?
       <Placard
         disabled
         active={false}
         type='largest-army'
-      /> : <></>;
+      /> : undefined;
   
   return <div className="Player">
       <div className="Who">
         <PlayerColor color={color}/>{getPlayerName(game.sessions, color)}
       </div>
       <div className="What">
+        { game.color === color && <div className="LongestRoad">Longest road: {player.longestRoad}</div> }
         <div className="Points">{points}</div>
-        <div className="Has">
+        { largestArmy || longestRoad || armyCards || developmentCards && <>
-          { !reverse && <>
+          <div className="Has">
-            { largestArmy }
+            { !reverse && <>
-            { longestRoad }
+              { largestArmy }
-            { armyCards }
+              { longestRoad }
-            { developmentCards }
+              { armyCards }
-          </> }
+              { developmentCards }
-          { reverse && <>
+            </> }
-            { developmentCards }
+            { reverse && <>
-            { armyCards }
+              { developmentCards }
-            { longestRoad }
+              { armyCards }
-            { largestArmy }
+              { longestRoad }
-          </> }
+              { largestArmy }
-        </div>
+            </> }
+          </div>
+        </> }
       </div>
       <div className={`${onClick ? 'Normal' : 'Shrunken'}`}><BoardPieces onClick={onClick} table={table} color={color}/></div>
     </div>

client/src/ViewCard.js

@@ -87,23 +87,23 @@ const ViewCard = ({table, card}) => {
     });
     canPlay = points >= 10;
     if (!canPlay && !card.played) {
-      description = <>{description}<p>You do not have enough victory points to play this card yet.</p></>;
+      description = <>{description}<div>You do not have enough victory points to play this card yet. You can currently reach <b>{points}</b> points.</div></>;
     }
   } else {
     canPlay = card.turn < table.game.turns;
     if (!canPlay) {
-      description = <>{description}<p>You can not play this card until your next turn.</p></>;
+      description = <>{description}<div>You can not play this card until your next turn.</div></>;
     }
     if (canPlay) {
       canPlay = table.game.player.playedCard !== table.game.turns;
       if (!canPlay) {
-        description = <>{description}<p>You have already played a development card this turn.</p></>;
+        description = <>{description}<div>You have already played a development card this turn.</div></>;
       }
     }
   }
   
   if (card.played) {
-    description = <>{description}<p>You have already played this card.</p></>;
+    description = <>{description}<div>You have already played this card.</div></>;
     canPlay = false;
   }
 

client/src/Winner.js

@@ -29,6 +29,7 @@ const Winner = ({table, color}) => {
     <div><PlayerColor color={color}/> {name} won the game after {Math.floor(table.game.turns / playerCount)} turns. They
     had <b>{player.potential}</b> unplayed Victory Point card(s).</div>
     </>;
+    
   for (let key in table.game.players) {
     if (key === color) {
       continue;

server/routes/games.js

@@ -1223,7 +1223,7 @@ const calculateRoadLengths = (game, session) => {
         addChatMessage(game, session, `${names.join(', ')} are tied for longest ` +
           `road (${longestRoad})!`);
       }
-      game.longestRoad = null;
+      /* Do not reset the longest road! Current Longest is still longest! */
     }
   } else {
     game.longestRoad = null;