\n \n \n Code on Val Town\n \n

Static Chess

\n \n info\n {\" \"}\n - reset\n

\n {this.rows.map((row) => (\n

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

\n ))}\n

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

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

\n {squareContent}\n

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