From 81082ff460063cd2a0c23b5fe26a591617ea0d8c Mon Sep 17 00:00:00 2001
From: James Ketrenos <james_eikona@ketrenos.com>
Date: Sun, 30 Jan 2022 16:17:41 -0800
Subject: [PATCH] Add selection description

Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
---
 client/src/Board.css | 16 ++++++++++++++--
 client/src/Board.js  | 15 ++++++++++++++-
 2 files changed, 28 insertions(+), 3 deletions(-)

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'
+          ? <span>Play as <PlayerColor color={color}/>{board.game.color ? ' instead' : ''}.</span>
+          : <span>Stop playing as <PlayerColor color={color}/>.</span>;
+      }
+    }
     players.push((
       <ListItem
         data-selectable={selectable} 
@@ -460,7 +470,10 @@ const Players = ({ board }) => {
             { item.status !== 'Not active' && <Moment fromNow date={item.lastActive}/>}
           </>)} />
         { selectable &&
-          <Switch edge="end" checked={board.game.color === color}/>
+          <div className='PlayerToggle'>
+            <Switch edge="end" checked={board.game.color === color}/>
+            {toggleText}
+          </div>
         }
       </ListItem>
     ));