djmil/corda-checkers
djmil/corda-checkers
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases Wiki Activity

GameBoard: show user name

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
webapp/src/components/Checkers.css
View File

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

2
webapp/src/container/Games.jsx
View File

@ -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>

9
webapp/src/container/games/GameBoard.jsx
View File

@ -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>
)
}