78 lines
2.3 KiB
TypeScript
78 lines
2.3 KiB
TypeScript
import { Html, debug_render } from "./html.ts";
|
|
import { Component } from "./jsx/jsx-runtime.ts";
|
|
|
|
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: Component = ({ board, turn = 0 }) => (
|
|
<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: Component = ({ board, idx, turn }) => (
|
|
<div class="row">
|
|
<Cell board={board} idx={idx + 0} turn={turn} />
|
|
<Cell board={board} idx={idx + 1} turn={turn} />
|
|
<Cell board={board} idx={idx + 2} turn={turn} />
|
|
</div>
|
|
);
|
|
|
|
const Cell: Component = ({ board, idx, turn }) => {
|
|
const square = get_square(board, idx);
|
|
return square == "empty" && turn != "game over" ? (
|
|
<details class="cell empty">
|
|
<summary></summary>
|
|
<SuccBoard board={board} idx={idx} turn={turn} />
|
|
</details>
|
|
) : (
|
|
<div class={`cell ${square}`}>{square != "empty" && square}</div>
|
|
);
|
|
};
|
|
|
|
const SuccBoard: Component = ({ board, idx, turn }) => {
|
|
const square = square_of_turn(turn);
|
|
|
|
return (
|
|
<Board
|
|
board={set_square(board, idx, square)}
|
|
turn={game_over(board) ? "game over" : 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;
|
|
}
|
|
|
|
debug_render(<Board board={set_square(empty_board, 4, "x")} />);
|