- make nxn grid tic tac toe game
- circle player first, cross player second, take turns
- when there is a winner, open dialog to declare winner, stop taking turns
- allow tic tac toe game nxn to be configurable.
- url
cellSize
and gameSize
to configure the nxn game.
- cells (nxn background cells), i.e.
[{row: 0, col: 0}, {row: 0, col: 1}), {row: 0,col: 2)}, ...]
- pieces (players pieces), there are two players
O
(circle) and X
(cross): i.e. [{row: 0, col: 0, label: 'O'}, {row: 0, col: 1, label: 'X'}), {row: 0, col: 2, label: 'O')}, ...]
- winning-pieces (players winning pieces)
export const Game = () => {
const game: Partial<UseGame> = useGameSetting();
return (
<GameProvider game={game}>
<GameBoard>
<GameCells />
<GamePieces label="O" />
<GamePieces label="X" />
<GameToast />
</GameBoard>
</GameProvider>
);
};
![winner](./docs/winner.png)