\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",[117],"3fb56536-8804-11f0-96ed-0224a6c84d84","README.md","59e622a4-252d-11f0-8a67-569c3dd06744",["D",1756821227845],1,"\n

Static Chess

\n\n

\n\nCheck it out here: https://chess.maxmcd.com \n\nPlain, brutalist, no bloat chess. Every page is only html and css. Every chess move is made by clicking a link. Send a link to your friend and they'll send you one back to make your move. No silly animations or slick interactivity to trip up your gameplay. When Google indexes this site will we successfully compute all possible chess moves? \n\nFunctionality is quite limited, and things might be broken. Please let me know if you find bugs!\n\nInspired by [this HN discussion](https://news.ycombinator.com/item?id=39456467) about sites that have all possible game states of tic-tac-toe. \n\nI plan on extending this to support real gameplay. I think it could be a nice simple interface for long form games with friends. Might also be fun to add a static AI to play against. Feel free to PR any changes if you'd like to see something added. \n\n\n\n",[134],"pulls",0,"forks",8,"envVars",{"_148":141,"_150":141},"connections",{"_148":141,"_149":141},"count","unfilledCount","emptyCount",{"_20":133,"_13":134,"_118":135,"_119":-5,"_120":21,"_121":124,"_122":38,"_22":157,"_29":137,"_125":102,"_127":138,"_129":76,"_130":-5,"_154":158,"_90":159},{"_20":116,"_13":117,"_118":47,"_119":-5,"_120":21,"_121":30,"_122":38,"_22":153,"_29":124,"_125":126,"_127":128,"_129":76,"_130":131,"_154":155,"_90":156},["D",1756821247998],"children",[],[117],["D",1756821227845],[],[134],["D",1745953716026],{"_11":12,"_88":84},{"_11":12,"_82":-5,"_83":84,"_44":45,"_85":86,"_87":76},{"_29":30,"_13":26,"_20":21,"_27":28,"_31":-5,"_32":-5,"_77":-5,"_78":-5,"_79":-5,"_80":14,"_81":12},"ctx",{"_69":-5,"_110":197,"_198":199,"_200":201,"_202":76,"_203":76,"_204":76,"_205":38,"_206":-5,"_207":-7,"_208":-7,"_209":141,"_210":76,"_211":76,"_212":-5,"_213":76,"_214":76,"_215":76,"_216":-5},"ENV",{"_168":169,"_170":171,"_172":26,"_173":174,"_175":176,"_177":178,"_179":180,"_181":182,"_183":184,"_185":186,"_187":188,"_189":190,"_191":192,"_193":194,"_195":196},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Branches1

Branches
1