/** @jsxImportSource https://esm.sh/react */ import { render } from "https://deno.land/x/resvg_wasm/mod.ts"; import { html } from "https://esm.town/v/stevekrouse/html"; import { reloadOnSaveFetchMiddleware } from "https://esm.town/v/stevekrouse/reloadOnSave"; import { renderToString } from "npm:react-dom/server"; const GREEN = "#6aaa64"; const YELLOW = "#c9b458"; const GRAY = "#787c7e"; const LIGHT_GRAY = "#d3d6da"; // TODO - more words const wordleWords = [ "array", "cache", "class", "clone", "codec", "debug", "fetch", "frame", "gigot", "index", "input", "logic", "patch", "query", "proxy", "regex", "route", "stack", "token", "tuple", ]; interface Game { answer: string; guesses: string[]; currentGuess: string; } function encodeGame(game: Game): string { return btoa(JSON.stringify(game)); } function decodeGame(encoded: string): Game { return JSON.parse(atob(encoded)); } function nextStateEncoded(url, game: Game, action: string): string | undefined { const next = nextState(game, action); return next ? `https://${url}/${encodeGame(next)}` : undefined; } function nextState(game: Game, action: string): Game | undefined { // TODO - check if action is valid and return null if not, ie no link const { answer, guesses, currentGuess } = game; if (guesses.some((guess) => [...guess].some((x, i) => x === action && !answer.includes(action)))) { return null; } if (answer === guesses.at(-1)) return null; if (action === "Enter" && currentGuess.length !== 5) return null; if (action === "Enter") { return { ...game, guesses: [...game.guesses, currentGuess], currentGuess: "", }; } if (action === "Delete") { return { ...game, currentGuess: currentGuess.slice(0, -1), }; } if (currentGuess.length === 5) return null; return { ...game, currentGuess: currentGuess + action, }; } function rightPad(str: string, length: number): string { return str + " ".repeat(length - str.length); } function letterColor({ answer, guesses }: Game, letter: string): string { if (guesses.some((guess) => [...guess].some((x, i) => x === letter && answer[i] === letter))) { return GREEN; } if ( guesses.some((guess) => [...guess].some((x, i) => x === letter && answer[i] !== letter && answer.includes(letter))) ) { return YELLOW; } if (guesses.some((guess) => [...guess].some((x, i) => x === letter && !answer.includes(letter)))) { return GRAY; } return LIGHT_GRAY; } async function handler(req: Request): Promise { const url = new URL(req.url); if (url.pathname === "/") { let newGame = { answer: wordleWords[Math.floor(Math.random() * wordleWords.length)], guesses: [], currentGuess: "", }; return Response.redirect(`https://${url.hostname}/${encodeGame(newGame)}`); } if (url.pathname.startsWith("/image")) { const game = decodeGame(url.pathname.slice(7)); return new Response( await render(generateWordleBoardSVG(game)), { headers: { "Content-Type": "image/png", }, }, ); } const game = decodeGame(url.pathname.slice(1)); const { answer, guesses, currentGuess } = game; return html(renderToString( Static Wordle

Static Wordle

new game {" "} | view code on val town

{[0, 1, 2, 3, 4, 5].map( (x) => (

{[...(guesses.length === x ? rightPad(currentGuess, 5) : guesses[x] ?? " ")].map( (letter, i) => (

i ? "1px solid black" : "1px solid " + LIGHT_GRAY, color: x < guesses.length ? "white" : "black", fontWeight: "bold", fontSize: "1.4em", margin: 2, }} > {letter.toUpperCase()}

), )}

{[ ["q", "w", "e", "r", "t", "y", "u", "i", "o", "p"], ["a", "s", "d", "f", "g", "h", "j", "k", "l"], ["Enter", "z", "x", "c", "v", "b", "n", "m", "Delete"], // "⌫" ].map(row => (

{row.map( (letter) => ( {letter} ), )}

))}

{guesses.length > 0 && (

{guesses.map(guess => ( {guess} ))}

Create a new game for a friend where the answer is 👆

)} , )); } function generateWordleBoardSVG({ guesses, answer, currentGuess }) { const GREEN = "#6aaa64"; const YELLOW = "#c9b458"; const GRAY = "#787c7e"; const LIGHT_GRAY = "#d3d6da"; const tileSize = 40; const gap = 5; const createTileSVG = (letter, fill, stroke, textColor, x, y) => `` + `${letter.toUpperCase()}`; const rows = Array.from({ length: 6 }, (_, rowIndex) => { // Create array for 6 rows const rowGuess = guesses[rowIndex] || (rowIndex === guesses.length ? currentGuess : "").padEnd(5, " "); const isCurrentGuessRow = rowIndex === guesses.length; let currentX = gap; // Reset x for each new row const tiles = Array.from(rowGuess).map((letter, colIndex) => { const x = currentX; const y = rowIndex * (tileSize + gap) + gap; // Calculate y based on rowIndex currentX += tileSize + gap; let fill = "white"; let stroke = isCurrentGuessRow && colIndex < currentGuess.length ? "black" : LIGHT_GRAY; let textColor = "black"; if (!isCurrentGuessRow) { if (letter === answer[colIndex]) fill = GREEN; else if (answer.includes(letter)) fill = YELLOW; else if (letter !== " ") fill = GRAY; if (fill !== "white") textColor = "white"; } return createTileSVG(letter, fill, stroke, textColor, x, y); }).join(""); return tiles; }).join(""); return ``; } // export default reloadOnSaveFetchMiddleware(handler); // for debugging export default handler;

staticWordle