diff --git a/client/src/Board.css b/client/src/Board.css
index dc3c21b..5d4c628 100755
--- a/client/src/Board.css
+++ b/client/src/Board.css
@@ -13,8 +13,7 @@
}
.PlayerColor {
- position: relative;
- top: -0.25em;
+ display: inline-flex;
justify-content: center;
align-items: center;
width: 1em;
@@ -24,6 +23,7 @@
border-radius: 0.625em;
border-width: 1px;
border-style: solid;
+ text-align: center;
}
.PlayerColor > div {
@@ -123,6 +123,13 @@
cursor: pointer;
}
+.Players .PlayerToggle {
+ min-width: 5em;
+ display: inline-flex;
+ align-items: end;
+ flex-direction: column;
+}
+
.PlayerName {
padding: 0.5em;
}
@@ -226,6 +233,11 @@ button {
display: inline-flex;
}
+.Message .PlayerColor {
+ position: relative;
+ top: -0.25em;
+}
+
.PlayerName {
display: flex;
align-items: center;
diff --git a/client/src/Board.js b/client/src/Board.js
index e7cd736..750c15b 100755
--- a/client/src/Board.js
+++ b/client/src/Board.js
@@ -447,6 +447,16 @@ const Players = ({ board }) => {
const name = getPlayerName(board.game.sessions, color),
selectable = item.status === 'Not active' || board.game.color === color;
item.lastActive = item.lastActive > Date.now() ? Date.now() : item.lastActive;
+ let toggleText;
+ if (selectable) {
+ if (board.game.state !== 'lobby') {
+ toggleText = 'Exit to lobby.';
+ } else {
+ toggleText = item.status === 'Not active'
+ ? Play as {board.game.color ? ' instead' : ''}.
+ : Stop playing as .;
+ }
+ }
players.push((
{
{ item.status !== 'Not active' && }
>)} />
{ selectable &&
-
+
+
+ {toggleText}
+
}
));