import { analyticsHandlerWrapper } from "https://esm.town/v/maxm/valTownAnalytics";
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<Response> {
if (new URL(req.url).pathname === "/robots.txt") {
return new Response("User-agent: *\nDisallow: /");
}
const gameInfo = parseURL(req.url);
if (gameInfo === undefined) {
return new Response("Not Found", { status: 404 });
}
const game = new Game(gameInfo.game, gameInfo.selected);
return new Response(
renderToString(
<html>
<head>
<title>Static Chess</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="https://fav.farm/♟️" />
<style>{minify(CSS)}</style>
</head>
<body>
<div id="code-on-vt-host">
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.3/gh-fork-ribbon.min.css"
/>
<a
href="https://www.val.town/v/maxm/staticChess"
rel="source"
target="_blank"
className="github-fork-ribbon"
data-ribbon="Code on Val Town"
title="Code on Val Town"
>
Code on Val Town
</a>
</div>
<h1>Static Chess</h1>
<div>
<a href="https://www.val.town/v/maxm/staticChess">info</a> - <a href="/">reset</a>
</div>
<div className="board">
{this.rows.map(row => (
<div key={row} className="row">{this.squares.map(square => game.squareContent(row, square))}</div>
))}
</div>
<div className="info">
{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.`}
</div>
</body>
</html>,
),
{ headers: { "content-type": "text/html; charset=utf-8;" } },
);
}
}
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;
You did not check if it's checkmate/stalemate. For example after
@tianshuo nice, thank you.
Also going to add this link here: https://lobste.rs/s/ttyfuk/static_chess#c_e0sq0q And this one: https://news.ycombinator.com/item?id=40348343
Should fix these bugs and consider making the described changes.
my first reaction before clicking the link was "but does it have en passant"?
great work, nonetheless
I might be missing something here, where is the import for the
Gameconstructor used here: https://www.val.town/v/maxm/staticChess#L21And actually, for that matter, where is
parseURLcoming from? That doesn't seem to be defined either. (https://www.val.town/v/maxm/staticChess#L17)@nbbaier I tried to clean things up a little by breaking them out, but it does make the code a littler harder to understand. If you scroll past the StaticChess class Game and parseURL are defined lower down in the file.
@maxm - ah yeah, now I see that. Don't know why I didn't just ⌘+F sigh