cohost/html/chessboard.tsx

import { Fragment } from "preact";
import { Main, render_and_copy } from "./common.tsx";

// const Movable

const Row = ({ n }: { n: number }) => (
    <div class={`row ${n % 2 == 0 ? "light" : "dark"}-first`}></div>
);

const piece_names = {
    bb: "black bishop",
    bk: "black king",
    bn: "black knight",
    bp: "black pawn",
    bq: "black queen",
    br: "black rook",
    wb: "white bishop",
    wk: "white king",
    wn: "white knight",
    wp: "white pawn",
    wq: "white queen",
    wr: "white rook",
} as const;
type PieceName = keyof typeof piece_names;

// there's some dedup that could be done but eh
const start_pos: Record<PieceName, [number, number][]> = {
    br: [
        [0, 0],
        [7, 0],
    ],
    bn: [
        [1, 0],
        [6, 0],
    ],
    bb: [
        [2, 0],
        [5, 0],
    ],
    bq: [[3, 0]],
    bk: [[4, 0]],
    bp: new Array(8).fill(null).map((_, i) => [i, 1]),
    wr: [
        [0, 7],
        [7, 7],
    ],
    wn: [
        [1, 7],
        [6, 7],
    ],
    wb: [
        [2, 7],
        [5, 7],
    ],
    wq: [[3, 7]],
    wk: [[4, 7]],
    wp: new Array(8).fill(null).map((_, i) => [i, 6]),
};

const get_src = (piece: PieceName): string =>
    `https://elo-worldle.pyrope.net/piece-${piece}.png`;

const get_alt = (piece: PieceName): string =>
    `the ${piece_names[piece]}, lovinly pixeled by tom7`;

const Piece = ({
    piece,
    width,
    height,
}: {
    piece: keyof typeof piece_names;
    width: string;
    height: string;
}) => (
    <div class="piece-container" style={{ width, height }}>
        <img class="piece" src={get_src(piece)} alt={get_alt(piece)} />
    </div>
);

const Pieces = () => {
    const pieces = [];
    for (const [piece, poss] of Object.entries(start_pos)) {
        for (const [x, y] of poss) {
            pieces.push(
                <Piece
                    piece={piece as PieceName}
                    width={12.5 * (x + 1) + "%"}
                    height={12.5 * (y + 1) + "%"}
                />
            );
        }
    }
    return <Fragment children={pieces} />;
};

render_and_copy(
    <Main>
        <Row n={0} />
        <Row n={1} />
        <Row n={2} />
        <Row n={3} />
        <Row n={4} />
        <Row n={5} />
        <Row n={6} />
        <Row n={7} />
        <Pieces />
    </Main>,
    true
);