GameBoard: show user name

webapp/src/components/Checkers.css

@@ -16,7 +16,7 @@
 }
 
 .Tile.black {
-    background: lightgray;
+    background: darkgray;
 }
 
 .Tile.white {

webapp/src/container/Games.jsx

@@ -26,7 +26,7 @@ export default function Games({ context: { gamesReducer, gamesApi }, players })
         <div className='right-side'>
           <ActionPanel gamesApi={gamesApi} />
           {/* <GameMessage /> */}
-          <GameBoard />
+          <GameBoard username={players.currentUser} />
           <Message2Opponent dispatchGames={dispatchGames} />
         </div>
 

webapp/src/container/games/GameBoard.jsx

@@ -5,7 +5,7 @@ import { GamesContext } from '../../context/games';
 import { Color, Player, Board } from '../../components/Checkers';
 import './GameBoard.css';
 
-export default function GameBoard() {
+export default function GameBoard({ username }) {
   const games = useContext(GamesContext);
   const { pathname } = useLocation();
 
@@ -24,12 +24,13 @@ export default function GameBoard() {
   })(); // <<-- Execute
 
   const opponentColor = Color.opposite(game?.myColor);
-console.log("game", game)
+  const [opponentName, myName] = game?.opponentName ? [game.opponentName, username] : ['', ''];
+
   return (
     <div className='GameBoard'>
-      <Player color={opponentColor || Color.white} name={game?.opponentName} />
+      <Player color={opponentColor || Color.white} name={opponentName} />
       <Board game={game} />
-      <Player color={game?.myColor || Color.black} name={game?.opponentName ? 'MyName' : ''} />
+      <Player color={game?.myColor || Color.black} name={myName} />
     </div>
   )
 }