chess skeleton almost?

html/chessboard.tsx

@@ -1,4 +1,5 @@
-import { Main, mk_class_wrapper, render_and_copy } from "./common.tsx";
+import { Fragment } from "preact";
+import { Main, render_and_copy } from "./common.tsx";
 
 // const Movable
 
@@ -20,9 +21,10 @@ const piece_names = {
     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<keyof typeof piece_names, [number, number][]> = {
+const start_pos: Record<PieceName, [number, number][]> = {
     br: [
         [0, 0],
         [7, 0],
@@ -55,10 +57,10 @@ const start_pos: Record<keyof typeof piece_names, [number, number][]> = {
     wp: new Array(8).fill(null).map((_, i) => [i, 6]),
 };
 
-const get_src = (piece: keyof typeof piece_names): string =>
+const get_src = (piece: PieceName): string =>
     `https://elo-worldle.pyrope.net/piece-${piece}.png`;
 
-const get_alt = (piece: keyof typeof piece_names): string =>
+const get_alt = (piece: PieceName): string =>
     `the ${piece_names[piece]}, lovinly pixeled by tom7`;
 
 const Piece = ({
@@ -75,6 +77,22 @@ const 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} />
@@ -85,6 +103,7 @@ render_and_copy(
         <Row n={5} />
         <Row n={6} />
         <Row n={7} />
+        <Pieces />
     </Main>,
     true
 );