110 lines
2.3 KiB
TypeScript
110 lines
2.3 KiB
TypeScript
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
|
|
);
|