diff --git a/client/src/BoardPieces.css b/client/src/BoardPieces.css
index 49c1ece..30d2acc 100644
--- a/client/src/BoardPieces.css
+++ b/client/src/BoardPieces.css
@@ -2,12 +2,12 @@
display: flex;
flex-direction: column;
position: absolute;
+ align-items: flex-end;
height: 6rem;
- left: 1rem;
- bottom: 8rem; /* 1rem over top of Resource cards in hand */
+ right: 30rem;
+ bottom: 11rem; /* 1rem over top of Resource cards in hand */
width: 20rem;
z-index: 1000;
- border-bottom: 1px solid black;
padding-bottom: 0.5rem;
margin-bottom: 0.5rem;
}
diff --git a/client/src/PlayersStatus.css b/client/src/PlayersStatus.css
index 6981ba9..b77b043 100644
--- a/client/src/PlayersStatus.css
+++ b/client/src/PlayersStatus.css
@@ -3,13 +3,19 @@
flex-direction: column;
position: absolute;
left: 1rem;
- bottom: 15rem;
- border-bottom: 1px solid black;
+ bottom: 7rem;
margin-bottom: 0.5rem;
color: #d0d0d0;
pointer-events: none;
}
+.PlayersStatus.ActivePlayer {
+ right: 30rem;
+ bottom: 11rem; /* 1rem over top of Resource cards in hand */
+ align-items: flex-end;
+ pointer-events: all;
+}
+
.PlayersStatus .Player {
margin-bottom: 0.5rem;
}
@@ -23,6 +29,7 @@
.PlayersStatus .What {
margin-left: 0.25rem;
margin-top: 0.25rem;
+ margin-right: 0.25rem;
}
.PlayersStatus .PlayerColor {
@@ -36,11 +43,75 @@
display: flex;
}
-.PlayersStatus .Shrunken .BoardPieces {
- transform-origin: 0 100%;
- transform: scale(0.75);
+.PlayersStatus .Normal {
+ position: relative;
+ height: 7rem;
+ display: flex;
+}
+
+.PlayersStatus .Shrunken {
+ position: relative;
+ height: 5.75rem;
+ display: flex;
+}
+
+.PlayersStatus .BoardPieces {
+ align-items: flex-end;
bottom: 0;
- left: 0;
+ right: 0;
border-bottom: none;
margin-bottom: 0;
+}
+
+.PlayersStatus .Shrunken .BoardPieces {
+ align-items: flex-start;
+ left: 0;
+ transform-origin: 0 100%;
+ transform: scale(0.75);
+}
+
+.PlayersStatus .Resource {
+ display: inline-flex;
+ align-items: center;
+ justify-content: space-around;
+ height: 3rem;
+ width: 2.1rem;
+ background-size: contain;
+ pointer-events: none;
+ margin: 0 0.125rem;
+ border-radius: 2px;
+ filter: brightness(150%);
+}
+
+
+.PlayersStatus .Points .Resource {
+ display: inline-flex;
+ align-items: center;
+ justify-content: space-around;
+ height: 1rem;
+ width: 1rem;
+ pointer-events: none;
+ border-radius: 50%;
+ border: 2px solid #444;
+ background-size: 130%;
+ margin-left: -0.625rem;
+ margin-bottom: 0.5rem;
+}
+
+.PlayersStatus .Points .Resource:first-child {
+ margin-left: 0;
+}
+
+.PlayersStatus .Resource > div {
+ position: absolute;
+ top: -0.5rem;
+ right: -0.5rem;
+ border-radius: 50%;
+ border: 1px solid white;
+ background-color: rgb(36, 148, 46);
+ font-size: 0.75rem;
+ width: 1rem;
+ height: 1rem;
+ text-align: center;
+ line-height: 1rem;
}
\ No newline at end of file
diff --git a/client/src/PlayersStatus.js b/client/src/PlayersStatus.js
index f6c21f4..26b963b 100644
--- a/client/src/PlayersStatus.js
+++ b/client/src/PlayersStatus.js
@@ -5,37 +5,54 @@ import BoardPieces from './BoardPieces.js';
import { getPlayerName } from './Common.js';
import PlayerColor from './PlayerColor.js';
-const Player = ({ table, color }) => {
-
+const Player = ({ table, color, onClick }) => {
const player = table.game.players[color];
+
+ const developmentCards = player.unplayed ?