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> <Pieces /> <Row n={0} /> <Row n={1} /> <Row n={2} /> <Row n={3} /> <Row n={4} /> <Row n={5} /> <Row n={6} /> <Row n={7} /> </Main>, true );