cohost/html/ttt.tsx

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")} />);