99 lines
2.5 KiB
TypeScript
99 lines
2.5 KiB
TypeScript
import { render_and_copy } from "./common.tsx";
|
|
|
|
type Square = "x" | "o" | "empty";
|
|
type Row = [Square, Square, Square];
|
|
type Board = [Row, Row, Row];
|
|
type SquareIdx = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
|
|
|
|
const empty_row: Row = ["empty", "empty", "empty"];
|
|
const empty_board: Board = [empty_row, empty_row, empty_row];
|
|
//{ board: [r1, r2, r3] }
|
|
|
|
const square_of_turn = (turn: number): Square => (turn % 2 == 0 ? "x" : "o");
|
|
function game_over([[s1, s2, s3], [s4, s5, s6], [s7, s8, s9]]: Board): boolean {
|
|
return true;
|
|
}
|
|
|
|
// TODO: strike out and such
|
|
const Board = ({ board, turn = 0 }: { board: Board; turn?: number }) => (
|
|
<div class="state">
|
|
{game_over(board) ? (
|
|
<div class="whose-turn game-over">Game over!</div>
|
|
) : (
|
|
<div class="whose-turn">It's {square_of_turn(turn)}'s turn!</div>
|
|
)}
|
|
<div class="board">
|
|
<Row board={board} idx={0} turn={turn} />
|
|
<Row board={board} idx={1} turn={turn} />
|
|
<Row board={board} idx={2} turn={turn} />
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
const Row = ({
|
|
board,
|
|
idx,
|
|
turn,
|
|
}: {
|
|
board: Board;
|
|
idx: number;
|
|
turn: number;
|
|
}) => (
|
|
<div class="row">
|
|
<Cell board={board} idx={(idx + 0) as SquareIdx} turn={turn} />
|
|
<Cell board={board} idx={(idx + 1) as SquareIdx} turn={turn} />
|
|
<Cell board={board} idx={(idx + 2) as SquareIdx} turn={turn} />
|
|
</div>
|
|
);
|
|
|
|
const Cell = ({
|
|
board,
|
|
idx,
|
|
turn,
|
|
}: {
|
|
board: Board;
|
|
idx: SquareIdx;
|
|
turn: number | "game over";
|
|
}) => {
|
|
if (turn == "game over") {
|
|
return <div class="cell empty"></div>;
|
|
}
|
|
const square = get_square(board, idx);
|
|
return square == "empty" ? (
|
|
<details class="cell empty">
|
|
<summary></summary>
|
|
<SuccBoard board={board} idx={idx} turn={turn} />
|
|
</details>
|
|
) : (
|
|
<div class={`cell ${square}`}>{square}</div>
|
|
);
|
|
};
|
|
|
|
const SuccBoard = ({
|
|
board,
|
|
idx,
|
|
turn,
|
|
}: {
|
|
board: Board;
|
|
idx: SquareIdx;
|
|
turn: number;
|
|
}) => {
|
|
const square = square_of_turn(turn);
|
|
|
|
return <Board board={set_square(board, idx, square)} turn={turn + 1} />;
|
|
};
|
|
|
|
function get_square(board: Board, idx: SquareIdx): Square {
|
|
return board[Math.floor(idx / 3)][idx % 3];
|
|
}
|
|
|
|
function set_square(board: Board, idx: SquareIdx, to: Square): Board {
|
|
const new_board = JSON.parse(JSON.stringify(board)) as Board;
|
|
|
|
new_board[Math.floor(idx / 3)][idx % 3] = to;
|
|
|
|
return new_board;
|
|
}
|
|
|
|
render_and_copy(<Board board={set_square(empty_board, 4, "x")} />);
|