Add selection description

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

client/src/Board.css

@@ -13,8 +13,7 @@
 }
 
 .PlayerColor {
-  position: relative;
+  display: inline-flex;
-  top: -0.25em;
   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;

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>
     ));