cohost/html/ttt.tsx

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