diff --git a/client/src/PlayersStatus.css b/client/src/PlayersStatus.css
index 26d0581..38e53f1 100644
--- a/client/src/PlayersStatus.css
+++ b/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;
@@ -150,4 +167,9 @@
height: 1rem;
text-align: center;
line-height: 1rem;
+}
+
+.PlayersStatus .Points b {
+ margin-right: 0.25rem;
+ margin-left: 0.25rem;
}
\ No newline at end of file
diff --git a/client/src/PlayersStatus.js b/client/src/PlayersStatus.js
index 1e001a8..31c3ff3 100644
--- a/client/src/PlayersStatus.js
+++ b/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 ? : <>>;
- const armyCards = player.army ? : <>>;
- const points = player.points ?
- : <>>;
+ const developmentCards = player.unplayed ? : undefined;
+ const armyCards = player.army ? : undefined;
+ let points = <>>;
+ if (player.points && reverse) {
+ points = <>{player.points}>;
+ } else if (player.points) {
+ points = <>{player.points}>;
+
+ }
const longestRoad = game.longestRoad && game.longestRoad === color ?
: <>>;
+ /> : undefined;
const largestArmy = game.largestArmy && game.largestArmy === color ?
: <>>;
+ /> : undefined;
return
{getPlayerName(game.sessions, color)}
+ { game.color === color &&
Longest road: {player.longestRoad}
}
{points}
-
- { !reverse && <>
- { largestArmy }
- { longestRoad }
- { armyCards }
- { developmentCards }
- > }
- { reverse && <>
- { developmentCards }
- { armyCards }
- { longestRoad }
- { largestArmy }
- > }
-
+ { largestArmy || longestRoad || armyCards || developmentCards && <>
+
+ { !reverse && <>
+ { largestArmy }
+ { longestRoad }
+ { armyCards }
+ { developmentCards }
+ > }
+ { reverse && <>
+ { developmentCards }
+ { armyCards }
+ { longestRoad }
+ { largestArmy }
+ > }
+
+ > }
diff --git a/client/src/ViewCard.js b/client/src/ViewCard.js
index 2fc7b09..33bb0ef 100644
--- a/client/src/ViewCard.js
+++ b/client/src/ViewCard.js
@@ -87,23 +87,23 @@ const ViewCard = ({table, card}) => {
});
canPlay = points >= 10;
if (!canPlay && !card.played) {
- description = <>{description}You do not have enough victory points to play this card yet.
>;
+ description = <>{description}You do not have enough victory points to play this card yet. You can currently reach {points} points.
>;
}
} else {
canPlay = card.turn < table.game.turns;
if (!canPlay) {
- description = <>{description}You can not play this card until your next turn.
>;
+ description = <>{description}You can not play this card until your next turn.
>;
}
if (canPlay) {
canPlay = table.game.player.playedCard !== table.game.turns;
if (!canPlay) {
- description = <>{description}You have already played a development card this turn.
>;
+ description = <>{description}You have already played a development card this turn.
>;
}
}
}
if (card.played) {
- description = <>{description}You have already played this card.
>;
+ description = <>{description}You have already played this card.
>;
canPlay = false;
}
diff --git a/client/src/Winner.js b/client/src/Winner.js
index 3c64e66..3031b53 100644
--- a/client/src/Winner.js
+++ b/client/src/Winner.js
@@ -29,6 +29,7 @@ const Winner = ({table, color}) => {
{name} won the game after {Math.floor(table.game.turns / playerCount)} turns. They
had {player.potential} unplayed Victory Point card(s).
>;
+
for (let key in table.game.players) {
if (key === color) {
continue;
diff --git a/server/routes/games.js b/server/routes/games.js
index a851ce0..41f0939 100755
--- a/server/routes/games.js
+++ b/server/routes/games.js
@@ -1206,7 +1206,7 @@ const calculateRoadLengths = (game, session) => {
}
console.log({ longestPlayers });
-
+
if (longestPlayers.length > 0) {
if (longestPlayers.length === 1) {
game.longestRoadLength = longestRoad;
@@ -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;