GameBoard: show slected board stones
This commit is contained in:
parent
f27eafa3f0
commit
758e7ce10f
@ -18,30 +18,36 @@ export const Color = {
|
||||
/*
|
||||
* Stone
|
||||
*/
|
||||
export function Stone({ color }) {
|
||||
export function Stone({ color, type }) {
|
||||
switch (color) {
|
||||
case Color.white:
|
||||
return WhiteStone();
|
||||
return <WhiteStone type={type} />;
|
||||
|
||||
case Color.black:
|
||||
return BlackStone();
|
||||
return <BlackStone type={type} />;
|
||||
|
||||
case '':
|
||||
case undefined:
|
||||
case null:
|
||||
return; // no color :)
|
||||
return; // no stone :)
|
||||
|
||||
default:
|
||||
console.warn("Unknown color: ", color)
|
||||
}
|
||||
}
|
||||
|
||||
export function WhiteStone() {
|
||||
return <span className="Stone white">⛀</span>
|
||||
export function WhiteStone({ type }) {
|
||||
if (type === 'KING')
|
||||
return <span className="Stone white king">⛁</span>
|
||||
else
|
||||
return <span className="Stone white man">⛀</span>
|
||||
}
|
||||
|
||||
export function BlackStone() {
|
||||
return <span className="Stone black">⛂</span>
|
||||
export function BlackStone({ type }) {
|
||||
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
|
||||
*/
|
||||
export function Board() {
|
||||
export function Board({ game }) {
|
||||
|
||||
const board = (game && game.board && typeof game.board === 'object') ? game.board : defaultBoard();
|
||||
|
||||
return <div className='Board'>
|
||||
<div className='row'>
|
||||
<BlackTile /> <WhiteTile id={0} stone={WhiteStone()} />
|
||||
<BlackTile /> <WhiteTile id={1} stone={WhiteStone()} />
|
||||
<BlackTile /> <WhiteTile id={2} stone={WhiteStone()} />
|
||||
<BlackTile /> <WhiteTile id={4} stone={WhiteStone()} />
|
||||
<BlackTile /> <WhiteTile id={1} stone={board[1]} />
|
||||
<BlackTile /> <WhiteTile id={2} stone={board[2]} />
|
||||
<BlackTile /> <WhiteTile id={3} stone={board[3]} />
|
||||
<BlackTile /> <WhiteTile id={4} stone={board[4]} />
|
||||
</div>
|
||||
<div className='row'>
|
||||
<WhiteTile id={5} stone={WhiteStone()} /> <BlackTile />
|
||||
<WhiteTile id={6} stone={WhiteStone()} /> <BlackTile />
|
||||
<WhiteTile id={7} stone={WhiteStone()} /> <BlackTile />
|
||||
<WhiteTile id={8} stone={WhiteStone()} /> <BlackTile />
|
||||
<WhiteTile id={5} stone={board[5]} /> <BlackTile />
|
||||
<WhiteTile id={6} stone={board[6]} /> <BlackTile />
|
||||
<WhiteTile id={7} stone={board[7]} /> <BlackTile />
|
||||
<WhiteTile id={8} stone={board[8]} /> <BlackTile />
|
||||
</div>
|
||||
<div className='row'>
|
||||
<BlackTile /> <WhiteTile id={9} stone={WhiteStone()} />
|
||||
<BlackTile /> <WhiteTile id={10} stone={WhiteStone()} />
|
||||
<BlackTile /> <WhiteTile id={11} stone={WhiteStone()} />
|
||||
<BlackTile /> <WhiteTile id={12} stone={WhiteStone()} />
|
||||
<BlackTile /> <WhiteTile id={9} stone={board[9]} />
|
||||
<BlackTile /> <WhiteTile id={10} stone={board[10]} />
|
||||
<BlackTile /> <WhiteTile id={11} stone={board[11]} />
|
||||
<BlackTile /> <WhiteTile id={12} stone={board[12]} />
|
||||
</div>
|
||||
<div className='row'>
|
||||
<WhiteTile id={13} stone={null} /> <BlackTile />
|
||||
<WhiteTile id={14} stone={null} /> <BlackTile />
|
||||
<WhiteTile id={15} stone={null} /> <BlackTile />
|
||||
<WhiteTile id={16} stone={null} /> <BlackTile />
|
||||
<WhiteTile id={13} stone={board[13]} /> <BlackTile />
|
||||
<WhiteTile id={14} stone={board[14]} /> <BlackTile />
|
||||
<WhiteTile id={15} stone={board[15]} /> <BlackTile />
|
||||
<WhiteTile id={16} stone={board[16]} /> <BlackTile />
|
||||
</div>
|
||||
|
||||
<div className='row'>
|
||||
<BlackTile /> <WhiteTile id={17} stone={null} />
|
||||
<BlackTile /> <WhiteTile id={18} stone={null} />
|
||||
<BlackTile /> <WhiteTile id={19} stone={null} />
|
||||
<BlackTile /> <WhiteTile id={20} stone={null} />
|
||||
<BlackTile /> <WhiteTile id={17} stone={board[17]} />
|
||||
<BlackTile /> <WhiteTile id={18} stone={board[18]} />
|
||||
<BlackTile /> <WhiteTile id={19} stone={board[19]} />
|
||||
<BlackTile /> <WhiteTile id={20} stone={board[20]} />
|
||||
</div>
|
||||
<div className='row'>
|
||||
<WhiteTile id={21} stone={BlackStone()} /> <BlackTile />
|
||||
<WhiteTile id={22} stone={BlackStone()} /> <BlackTile />
|
||||
<WhiteTile id={23} stone={BlackStone()} /> <BlackTile />
|
||||
<WhiteTile id={24} stone={BlackStone()} /> <BlackTile />
|
||||
<WhiteTile id={21} stone={board[21]} /> <BlackTile />
|
||||
<WhiteTile id={22} stone={board[22]} /> <BlackTile />
|
||||
<WhiteTile id={23} stone={board[23]} /> <BlackTile />
|
||||
<WhiteTile id={24} stone={board[24]} /> <BlackTile />
|
||||
</div>
|
||||
<div className='row'>
|
||||
<BlackTile /> <WhiteTile id={25} stone={BlackStone()} />
|
||||
<BlackTile /> <WhiteTile id={26} stone={BlackStone()} />
|
||||
<BlackTile /> <WhiteTile id={27} stone={BlackStone()} />
|
||||
<BlackTile /> <WhiteTile id={28} stone={BlackStone()} />
|
||||
<BlackTile /> <WhiteTile id={25} stone={board[25]} />
|
||||
<BlackTile /> <WhiteTile id={26} stone={board[26]} />
|
||||
<BlackTile /> <WhiteTile id={27} stone={board[27]} />
|
||||
<BlackTile /> <WhiteTile id={28} stone={board[28]} />
|
||||
</div>
|
||||
<div className='row'>
|
||||
<WhiteTile id={29} stone={BlackStone()} /> <BlackTile />
|
||||
<WhiteTile id={30} stone={BlackStone()} /> <BlackTile />
|
||||
<WhiteTile id={31} stone={BlackStone()} /> <BlackTile />
|
||||
<WhiteTile id={32} stone={BlackStone()} /> <BlackTile />
|
||||
<WhiteTile id={29} stone={board[29]} /> <BlackTile />
|
||||
<WhiteTile id={30} stone={board[30]} /> <BlackTile />
|
||||
<WhiteTile id={31} stone={board[31]} /> <BlackTile />
|
||||
<WhiteTile id={32} stone={board[32]} /> <BlackTile />
|
||||
</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 }) {
|
||||
return (
|
||||
<div className='Tile white'
|
||||
onClick={() => console.log('click', id)}
|
||||
>
|
||||
{stone}
|
||||
<Stone color={stone?.color} type={stone?.type} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -10,23 +10,16 @@ export function Create({ onClick }) {
|
||||
|
||||
const hasOpponent = games.newGame.opponentName && games.newGame.opponentColor;
|
||||
|
||||
const prepareNewGameRequest = () => {
|
||||
const validateNewGame = () => {
|
||||
if (!hasOpponent)
|
||||
return alert("You have to select an opponent");
|
||||
|
||||
const reqParams = {
|
||||
opponentName: games.newGame.opponentName,
|
||||
opponentColor: games.newGame.opponentColor,
|
||||
board: null, // default board configuration
|
||||
message: games.newGame.message
|
||||
}
|
||||
|
||||
onClick(reqParams);
|
||||
onClick(games.newGame);
|
||||
}
|
||||
|
||||
return (
|
||||
<button className={'Create' + (hasOpponent ? ' ready' : '')}
|
||||
onClick={prepareNewGameRequest}
|
||||
onClick={validateNewGame}
|
||||
>
|
||||
<Wobler text="Create" dance={games.isPushingNewGame} />
|
||||
</button>
|
||||
|
||||
@ -9,30 +9,36 @@ export default function GameBoard() {
|
||||
const games = useContext(GamesContext);
|
||||
const { pathname } = useLocation();
|
||||
|
||||
const [opponentName, opponentColor, myColor] = (() => {
|
||||
const game = (() => {
|
||||
if (matchPath('/games/new', pathname))
|
||||
return [games.newGame.opponentName, games.newGame.opponentColor, Color.opposite(games.newGame.opponentColor)];
|
||||
|
||||
let selectedGame;
|
||||
return gameFrom(games.newGame);
|
||||
|
||||
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))
|
||||
selectedGame = games.findGame({ uuid: games.active.selectedUUID });
|
||||
return games.findGame({ uuid: games.active.selectedUUID });
|
||||
else if (matchPath('/games/archive', pathname))
|
||||
selectedGame = games.findGame({ uuid: games.archive.selectedUUID });
|
||||
return games.findGame({ uuid: games.archive.selectedUUID });
|
||||
|
||||
if (selectedGame)
|
||||
return [selectedGame?.opponentName, Color.opposite(selectedGame?.myColor), selectedGame?.myColor];
|
||||
else
|
||||
return ['', Color.white, Color.black]; // defaults
|
||||
return {}; // defaults
|
||||
})(); // <<-- Execute
|
||||
|
||||
const opponentColor = Color.opposite(game?.myColor);
|
||||
console.log("game", game)
|
||||
return (
|
||||
<div className='GameBoard'>
|
||||
<Player color={opponentColor} name={opponentName} />
|
||||
<Board />
|
||||
<Player color={myColor} name={opponentName ? 'MyName' : ''} />
|
||||
<Player color={opponentColor || Color.white} name={game?.opponentName} />
|
||||
<Board game={game} />
|
||||
<Player color={game?.myColor || Color.black} name={game?.opponentName ? 'MyName' : ''} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function gameFrom(newGame) {
|
||||
return {
|
||||
myColor: Color.opposite(newGame.opponentColor),
|
||||
opponentName: newGame.opponentName,
|
||||
opponentColor: newGame.opponentColor,
|
||||
board: newGame.board,
|
||||
};
|
||||
}
|
||||
@ -7,6 +7,7 @@ export const gamesInitialState = {
|
||||
newGame: {
|
||||
opponentName: '',
|
||||
opponentColor: '',
|
||||
board: null,
|
||||
message: '',
|
||||
},
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user