GameBoard: show user name

This commit is contained in:
djmil 2023-11-17 12:18:30 +01:00
parent 75b72a580d
commit 016423aeb6
3 changed files with 7 additions and 6 deletions

View File

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

View File

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

View File

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