From 016423aeb6de5ea12a335ddc355272292b618621 Mon Sep 17 00:00:00 2001
From: djmil <andriy@djmil.dev>
Date: Fri, 17 Nov 2023 12:18:30 +0100
Subject: [PATCH] GameBoard: show user name

---
 webapp/src/components/Checkers.css       | 2 +-
 webapp/src/container/Games.jsx           | 2 +-
 webapp/src/container/games/GameBoard.jsx | 9 +++++----
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/webapp/src/components/Checkers.css b/webapp/src/components/Checkers.css
index 5c6cf83..0739a43 100644
--- a/webapp/src/components/Checkers.css
+++ b/webapp/src/components/Checkers.css
@@ -16,7 +16,7 @@
 }
 
 .Tile.black {
-    background: lightgray;
+    background: darkgray;
 }
 
 .Tile.white {
diff --git a/webapp/src/container/Games.jsx b/webapp/src/container/Games.jsx
index ed2337b..38406f4 100644
--- a/webapp/src/container/Games.jsx
+++ b/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>
 
diff --git a/webapp/src/container/games/GameBoard.jsx b/webapp/src/container/games/GameBoard.jsx
index 65173b5..dad8c10 100644
--- a/webapp/src/container/games/GameBoard.jsx
+++ b/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>
   )
 }