GameBoard: show slected board stones

This commit is contained in:
djmil 2023-11-16 22:03:11 +01:00
parent f27eafa3f0
commit 758e7ce10f
4 changed files with 103 additions and 66 deletions

View File

@ -18,30 +18,36 @@ export const Color = {
/* /*
* Stone * Stone
*/ */
export function Stone({ color }) { export function Stone({ color, type }) {
switch (color) { switch (color) {
case Color.white: case Color.white:
return WhiteStone(); return <WhiteStone type={type} />;
case Color.black: case Color.black:
return BlackStone(); return <BlackStone type={type} />;
case '': case '':
case undefined: case undefined:
case null: case null:
return; // no color :) return; // no stone :)
default: default:
console.warn("Unknown color: ", color) console.warn("Unknown color: ", color)
} }
} }
export function WhiteStone() { export function WhiteStone({ type }) {
return <span className="Stone white"></span> if (type === 'KING')
return <span className="Stone white king"></span>
else
return <span className="Stone white man"></span>
} }
export function BlackStone() { export function BlackStone({ type }) {
return <span className="Stone black"></span> if (type === 'KING')
return <span className="Stone white king"></span>
else
return <span className="Stone black man"></span>
} }
/* /*
@ -59,67 +65,98 @@ export function Player({ color, name }) {
/* /*
* Board * Board
*/ */
export function Board() { export function Board({ game }) {
const board = (game && game.board && typeof game.board === 'object') ? game.board : defaultBoard();
return <div className='Board'> return <div className='Board'>
<div className='row'> <div className='row'>
<BlackTile /> <WhiteTile id={0} stone={WhiteStone()} /> <BlackTile /> <WhiteTile id={1} stone={board[1]} />
<BlackTile /> <WhiteTile id={1} stone={WhiteStone()} /> <BlackTile /> <WhiteTile id={2} stone={board[2]} />
<BlackTile /> <WhiteTile id={2} stone={WhiteStone()} /> <BlackTile /> <WhiteTile id={3} stone={board[3]} />
<BlackTile /> <WhiteTile id={4} stone={WhiteStone()} /> <BlackTile /> <WhiteTile id={4} stone={board[4]} />
</div> </div>
<div className='row'> <div className='row'>
<WhiteTile id={5} stone={WhiteStone()} /> <BlackTile /> <WhiteTile id={5} stone={board[5]} /> <BlackTile />
<WhiteTile id={6} stone={WhiteStone()} /> <BlackTile /> <WhiteTile id={6} stone={board[6]} /> <BlackTile />
<WhiteTile id={7} stone={WhiteStone()} /> <BlackTile /> <WhiteTile id={7} stone={board[7]} /> <BlackTile />
<WhiteTile id={8} stone={WhiteStone()} /> <BlackTile /> <WhiteTile id={8} stone={board[8]} /> <BlackTile />
</div> </div>
<div className='row'> <div className='row'>
<BlackTile /> <WhiteTile id={9} stone={WhiteStone()} /> <BlackTile /> <WhiteTile id={9} stone={board[9]} />
<BlackTile /> <WhiteTile id={10} stone={WhiteStone()} /> <BlackTile /> <WhiteTile id={10} stone={board[10]} />
<BlackTile /> <WhiteTile id={11} stone={WhiteStone()} /> <BlackTile /> <WhiteTile id={11} stone={board[11]} />
<BlackTile /> <WhiteTile id={12} stone={WhiteStone()} /> <BlackTile /> <WhiteTile id={12} stone={board[12]} />
</div> </div>
<div className='row'> <div className='row'>
<WhiteTile id={13} stone={null} /> <BlackTile /> <WhiteTile id={13} stone={board[13]} /> <BlackTile />
<WhiteTile id={14} stone={null} /> <BlackTile /> <WhiteTile id={14} stone={board[14]} /> <BlackTile />
<WhiteTile id={15} stone={null} /> <BlackTile /> <WhiteTile id={15} stone={board[15]} /> <BlackTile />
<WhiteTile id={16} stone={null} /> <BlackTile /> <WhiteTile id={16} stone={board[16]} /> <BlackTile />
</div> </div>
<div className='row'> <div className='row'>
<BlackTile /> <WhiteTile id={17} stone={null} /> <BlackTile /> <WhiteTile id={17} stone={board[17]} />
<BlackTile /> <WhiteTile id={18} stone={null} /> <BlackTile /> <WhiteTile id={18} stone={board[18]} />
<BlackTile /> <WhiteTile id={19} stone={null} /> <BlackTile /> <WhiteTile id={19} stone={board[19]} />
<BlackTile /> <WhiteTile id={20} stone={null} /> <BlackTile /> <WhiteTile id={20} stone={board[20]} />
</div> </div>
<div className='row'> <div className='row'>
<WhiteTile id={21} stone={BlackStone()} /> <BlackTile /> <WhiteTile id={21} stone={board[21]} /> <BlackTile />
<WhiteTile id={22} stone={BlackStone()} /> <BlackTile /> <WhiteTile id={22} stone={board[22]} /> <BlackTile />
<WhiteTile id={23} stone={BlackStone()} /> <BlackTile /> <WhiteTile id={23} stone={board[23]} /> <BlackTile />
<WhiteTile id={24} stone={BlackStone()} /> <BlackTile /> <WhiteTile id={24} stone={board[24]} /> <BlackTile />
</div> </div>
<div className='row'> <div className='row'>
<BlackTile /> <WhiteTile id={25} stone={BlackStone()} /> <BlackTile /> <WhiteTile id={25} stone={board[25]} />
<BlackTile /> <WhiteTile id={26} stone={BlackStone()} /> <BlackTile /> <WhiteTile id={26} stone={board[26]} />
<BlackTile /> <WhiteTile id={27} stone={BlackStone()} /> <BlackTile /> <WhiteTile id={27} stone={board[27]} />
<BlackTile /> <WhiteTile id={28} stone={BlackStone()} /> <BlackTile /> <WhiteTile id={28} stone={board[28]} />
</div> </div>
<div className='row'> <div className='row'>
<WhiteTile id={29} stone={BlackStone()} /> <BlackTile /> <WhiteTile id={29} stone={board[29]} /> <BlackTile />
<WhiteTile id={30} stone={BlackStone()} /> <BlackTile /> <WhiteTile id={30} stone={board[30]} /> <BlackTile />
<WhiteTile id={31} stone={BlackStone()} /> <BlackTile /> <WhiteTile id={31} stone={board[31]} /> <BlackTile />
<WhiteTile id={32} stone={BlackStone()} /> <BlackTile /> <WhiteTile id={32} stone={board[32]} /> <BlackTile />
</div> </div>
</div> </div>
} }
function defaultBoard() {
return {
1: { color: "BLACK", type: "MAN" },
2: { color: "BLACK", type: "MAN" },
3: { color: "BLACK", type: "MAN" },
4: { color: "BLACK", type: "MAN" },
5: { color: "BLACK", type: "MAN" },
6: { color: "BLACK", type: "MAN" },
7: { color: "BLACK", type: "MAN" },
8: { color: "BLACK", type: "MAN" },
9: { color: "BLACK", type: "MAN" },
10: { color: "BLACK", type: "MAN" },
11: { color: "BLACK", type: "MAN" },
12: { color: "BLACK", type: "MAN" },
21: { color: "WHITE", type: "MAN" },
22: { color: "WHITE", type: "MAN" },
23: { color: "WHITE", type: "MAN" },
24: { color: "WHITE", type: "MAN" },
25: { color: "WHITE", type: "MAN" },
26: { color: "WHITE", type: "MAN" },
27: { color: "WHITE", type: "MAN" },
28: { color: "WHITE", type: "MAN" },
29: { color: "WHITE", type: "MAN" },
30: { color: "WHITE", type: "MAN" },
31: { color: "WHITE", type: "MAN" },
32: { color: "WHITE", type: "MAN" },
}
}
function WhiteTile({ id, stone }) { function WhiteTile({ id, stone }) {
return ( return (
<div className='Tile white' <div className='Tile white'
onClick={() => console.log('click', id)} onClick={() => console.log('click', id)}
> >
{stone} <Stone color={stone?.color} type={stone?.type} />
</div> </div>
); );
} }

View File

@ -10,23 +10,16 @@ export function Create({ onClick }) {
const hasOpponent = games.newGame.opponentName && games.newGame.opponentColor; const hasOpponent = games.newGame.opponentName && games.newGame.opponentColor;
const prepareNewGameRequest = () => { const validateNewGame = () => {
if (!hasOpponent) if (!hasOpponent)
return alert("You have to select an opponent"); return alert("You have to select an opponent");
const reqParams = { onClick(games.newGame);
opponentName: games.newGame.opponentName,
opponentColor: games.newGame.opponentColor,
board: null, // default board configuration
message: games.newGame.message
}
onClick(reqParams);
} }
return ( return (
<button className={'Create' + (hasOpponent ? ' ready' : '')} <button className={'Create' + (hasOpponent ? ' ready' : '')}
onClick={prepareNewGameRequest} onClick={validateNewGame}
> >
<Wobler text="Create" dance={games.isPushingNewGame} /> <Wobler text="Create" dance={games.isPushingNewGame} />
</button> </button>

View File

@ -9,30 +9,36 @@ export default function GameBoard() {
const games = useContext(GamesContext); const games = useContext(GamesContext);
const { pathname } = useLocation(); const { pathname } = useLocation();
const [opponentName, opponentColor, myColor] = (() => { const game = (() => {
if (matchPath('/games/new', pathname)) if (matchPath('/games/new', pathname))
return [games.newGame.opponentName, games.newGame.opponentColor, Color.opposite(games.newGame.opponentColor)]; return gameFrom(games.newGame);
let selectedGame;
if (matchPath('/games/proposal', pathname)) if (matchPath('/games/proposal', pathname))
selectedGame = games.findGame({ uuid: games.proposal.selectedUUID }); return games.findGame({ uuid: games.proposal.selectedUUID });
else if (matchPath('/games/active', pathname)) else if (matchPath('/games/active', pathname))
selectedGame = games.findGame({ uuid: games.active.selectedUUID }); return games.findGame({ uuid: games.active.selectedUUID });
else if (matchPath('/games/archive', pathname)) else if (matchPath('/games/archive', pathname))
selectedGame = games.findGame({ uuid: games.archive.selectedUUID }); return games.findGame({ uuid: games.archive.selectedUUID });
if (selectedGame) return {}; // defaults
return [selectedGame?.opponentName, Color.opposite(selectedGame?.myColor), selectedGame?.myColor];
else
return ['', Color.white, Color.black]; // defaults
})(); // <<-- Execute })(); // <<-- Execute
const opponentColor = Color.opposite(game?.myColor);
console.log("game", game)
return ( return (
<div className='GameBoard'> <div className='GameBoard'>
<Player color={opponentColor} name={opponentName} /> <Player color={opponentColor || Color.white} name={game?.opponentName} />
<Board /> <Board game={game} />
<Player color={myColor} name={opponentName ? 'MyName' : ''} /> <Player color={game?.myColor || Color.black} name={game?.opponentName ? 'MyName' : ''} />
</div> </div>
) )
}
function gameFrom(newGame) {
return {
myColor: Color.opposite(newGame.opponentColor),
opponentName: newGame.opponentName,
opponentColor: newGame.opponentColor,
board: newGame.board,
};
} }

View File

@ -7,6 +7,7 @@ export const gamesInitialState = {
newGame: { newGame: {
opponentName: '', opponentName: '',
opponentColor: '', opponentColor: '',
board: null,
message: '', message: '',
}, },