GameBoard: show slected board stones
This commit is contained in:
parent
f27eafa3f0
commit
758e7ce10f
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
|
@ -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,
|
||||||
|
};
|
||||||
}
|
}
|
@ -7,6 +7,7 @@ export const gamesInitialState = {
|
|||||||
newGame: {
|
newGame: {
|
||||||
opponentName: '',
|
opponentName: '',
|
||||||
opponentColor: '',
|
opponentColor: '',
|
||||||
|
board: null,
|
||||||
message: '',
|
message: '',
|
||||||
},
|
},
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user