/** @jsxImportSource https://esm.sh/react */ import { Chess, Move, Square } from "npm:chess.js"; import minify from "npm:css-simple-minifier"; import { renderToString } from "npm:react-dom/server"; class StaticChess { size = 8; rows = Array.from({ length: this.size }, (_, i) => i); squares = Array.from({ length: this.size }, (_, i) => i); constructor() {} async fetch(req: Request): Promise { const gameInfo = parseURL(req.url); if (gameInfo === undefined) { return new Response("Not Found", { status: 404, headers: { "cache-control": "max-age=86400, public" } }); } const game = new Game(gameInfo.game, gameInfo.selected); return new Response( renderToString( Static Chess

Static Chess

info - reset

{this.rows.map(row => (

{this.squares.map(square => game.squareContent(row, square))}

))}

{game.selected ? "Click a highted square to move the selected piece, or select a different piece." : `It is ${{ w: "white", b: "black" }[game.game.turn()]}'s turn. Click a piece to make a move.`}

, ), { headers: { "content-type": "text/html", "cache-control": "max-age=86400, public" } }, ); } } class Game { game: Chess; selected?: string; selectable: string[]; board; nextMoves: { [key: string]: Move }; fen: string; constructor(game: Chess, selected?: string) { this.game = game; this.selected = selected; this.board = game.board(); this.fen = game.fen().replaceAll(" ", "_"); this.nextMoves = {}; this.selectable = game.moves({ verbose: true }).map((m) => m.from.toString()); if (this.selected) { var moves = game.moves({ square: selected as Square, verbose: true, }); for (const move of moves) { this.nextMoves[move.to] = move; } } } squareContent(row: number, square: number) { const pos = indexToPos(row, square); const color = this.board[row][square]?.color; let className = "square"; if (color) className += " " + color; if (this.selected) { if (this.nextMoves[pos]) className += " highlight"; if (this.selected == pos) className += " selected highlight"; } const squareContent = (() => { if (this.selectable.includes(pos)) { return {pieces[this.board[row][square]?.type]}; } const nextMove = this.nextMoves[pos]; if (nextMove !== undefined) { return ( {pieces[this.board[row][square]?.type]} ); } return {pieces[this.board[row][square]?.type]}; })(); return (

{squareContent}

); } } const pieces = { "p": "♟︎", "r": "♜", "b": "♝", "n": "♞", "k": "♚", "q": "♛", }; const indexToPos = (row: number, col: number): string => { row = 8 - row; return `${String.fromCharCode(97 + col)}${row}`; }; const parseURL = (url: string): { game: Chess; selected?: string } | undefined => { const u = new URL(url); if (u.pathname.length === 1) { return { game: new Chess() }; } const parts = u.pathname.split("/").filter(x => x !== ""); let fen, selected; if (parts.length === 8) { fen = parts.join("/"); } else if (parts.length === 9) { fen = parts.slice(0, -1).join("/"); selected = parts[8]; } else { return; } fen = fen.replaceAll("_", " "); console.log(fen); return { game: new Chess(fen), selected: selected }; }; const CSS = ` body { text-align: center; font-family: sans-serif; margin-top: 30px; } div { box-sizing: border-box; } .board { display: flex; flex-direction: column; max-width: 500px; margin: 30px auto; border: 1px solid #333; } .info { max-width: 500px; margin: 10px auto; } .row { width: 100%; display: flex; flex-direction: row; } .square { width: calc(100% / 8); aspect-ratio: 1 / 1; font-size: 3.3em; position: relative; } .square a, .square span { border: 2px solid #00000000; text-decoration: none; color: inherit; display: block; box-sizing: border-box; width: 100%; height: 100%; position: absolute; } @media (hover) { .square a:hover { border: 2px solid #ddd; } } .square.selected a { border: 2px solid #ddd; } .square.w { color: white; } .board .row:nth-child(odd) .highlight.square:nth-child(even), .board .row:nth-child(even) .highlight.square:nth-child(odd){ background-color: #506d53; } .board .row:nth-child(odd) .highlight.square:nth-child(odd), .board .row:nth-child(even) .highlight.square:nth-child(even){ background-color: #607d63; } .board .row:nth-child(odd) .square:nth-child(even), .board .row:nth-child(even) .square:nth-child(odd){ background-color: #868686; } .board .row:nth-child(odd) .square:nth-child(odd), .board .row:nth-child(even) .square:nth-child(even){ background-color: #acacac; }`; const sc = new StaticChess(); export default sc.fetch.bind(sc);

staticChess