\n \n \n \n",[],[227,237],"85d3e2f7-481e-49c3-9a18-f565a8d98166","favicon.svg","019f9aba-fced-74dc-b6a6-170a808d083c",["D",1785007373549],"\n",[],[227,245],"905e2e85-8aa8-484c-b77f-29e32c67dea6","api.ts","773cffa4-885e-11f1-b759-1607ee4eb77e",9,["D",1785007473389],"import type { Cell, CheckResult, Puzzle } from \"./types.ts\";\n\nexport interface PuzzleOptions {\n rows?: number;\n cols?: number;\n wordCount?: number;\n minLen?: number;\n maxLen?: number;\n}\n\nexport async function newPuzzle(opts: PuzzleOptions = {}): Promise {\n const res = await fetch(\"/api/puzzle\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(opts),\n });\n if (!res.ok) throw new Error(`Failed to create puzzle (${res.status})`);\n return res.json();\n}\n\nexport async function checkPath(id: string, path: Cell[]): Promise {\n const res = await fetch(\"/api/check\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ id, path }),\n });\n if (!res.ok) throw new Error(`Check failed (${res.status})`);\n return res.json();\n}\n\nexport async function getSolution(id: string): Promise<{ word: string; path: Cell[] }[]> {\n const res = await fetch(`/api/solution/${id}`);\n if (!res.ok) throw new Error(`Failed to load solution (${res.status})`);\n const data = await res.json();\n return data.words;\n}\n",[],[227,252],"5bf89419-41b2-4103-bd1c-cd2230c722d0","Grid.tsx","8a03ab88-885e-11f1-bfd2-1607ee4eb77e","019f9aba-fced-74dc-b6a6-0a1ae671be68",10,["D",1785007504888],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useCallback, useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport type { Cell, Found } from \"../types.ts\";\n\ninterface GridProps {\n grid: (string | null)[][];\n found: Found[]; // already-solved words, drawn permanently\n onSubmit: (path: Cell[]) => void;\n flash: { path: Cell[]; ok: boolean } | null; // transient wrong/right feedback\n}\n\nconst CELL = 48; // px\nconst GAP = 6; // px\n\nconst cellKey = (c: Cell) => `${c.r},${c.c}`;\nconst adjacent = (a: Cell, b: Cell) =>\n Math.max(Math.abs(a.r - b.r), Math.abs(a.c - b.c)) === 1;\n\n// A palette of pleasant colors for solved words.\nconst WORD_COLORS = [\n \"#f97316\",\n \"#0ea5e9\",\n \"#22c55e\",\n \"#a855f7\",\n \"#ec4899\",\n \"#eab308\",\n \"#14b8a6\",\n \"#ef4444\",\n];\n\nexport function Grid({ grid, found, onSubmit, flash }: GridProps) {\n const rows = grid.length;\n const cols = grid[0]?.length ?? 0;\n const [drag, setDrag] = useState([]);\n const dragging = useRef(false);\n const wrapRef = useRef(null);\n\n // Map every cell that belongs to a solved word -> its color.\n const solvedColor = new Map();\n found.forEach((f, i) => {\n const color = WORD_COLORS[i % WORD_COLORS.length];\n for (const cell of f.path) solvedColor.set(cellKey(cell), color);\n });\n\n const inDrag = new Set(drag.map(cellKey));\n\n const cellFromPoint = useCallback((x: number, y: number): Cell | null => {\n const el = document.elementFromPoint(x, y) as HTMLElement | null;\n const attr = el?.closest(\"[data-cell]\")?.getAttribute(\"data-cell\");\n if (!attr) return null;\n const [r, c] = attr.split(\",\").map(Number);\n if (grid[r]?.[c] == null) return null; // empty cell — not selectable\n return { r, c };\n }, [grid]);\n\n const extend = useCallback((cell: Cell) => {\n setDrag((prev) => {\n if (prev.length === 0) return [cell];\n const last = prev[prev.length - 1];\n if (last.r === cell.r && last.c === cell.c) return prev;\n // Backtrack: hovering the previous cell removes the last one.\n if (prev.length >= 2) {\n const prevPrev = prev[prev.length - 2];\n if (prevPrev.r === cell.r && prevPrev.c === cell.c) return prev.slice(0, -1);\n }\n // Otherwise only extend to an adjacent, unused cell.\n if (!adjacent(last, cell)) return prev;\n if (prev.some((p) => p.r === cell.r && p.c === cell.c)) return prev;\n return [...prev, cell];\n });\n }, []);\n\n const start = useCallback((cell: Cell) => {\n dragging.current = true;\n setDrag([cell]);\n }, []);\n\n const end = useCallback(() => {\n if (!dragging.current) return;\n dragging.current = false;\n setDrag((prev) => {\n if (prev.length >= 2) onSubmit(prev);\n return [];\n });\n }, [onSubmit]);\n\n // Global pointer listeners so the drag keeps working outside a single cell.\n useEffect(() => {\n const move = (e: PointerEvent) => {\n if (!dragging.current) return;\n e.preventDefault();\n const cell = cellFromPoint(e.clientX, e.clientY);\n if (cell) extend(cell);\n };\n const up = () => end();\n globalThis.addEventListener(\"pointermove\", move, { passive: false });\n globalThis.addEventListener(\"pointerup\", up);\n globalThis.addEventListener(\"pointercancel\", up);\n return () => {\n globalThis.removeEventListener(\"pointermove\", move);\n globalThis.removeEventListener(\"pointerup\", up);\n globalThis.removeEventListener(\"pointercancel\", up);\n };\n }, [cellFromPoint, extend, end]);\n\n const flashSet = new Set((flash?.path ?? []).map(cellKey));\n\n const width = cols * CELL + (cols - 1) * GAP;\n const height = rows * CELL + (rows - 1) * GAP;\n const center = (i: number) => i * (CELL + GAP) + CELL / 2;\n\n // Build SVG polyline points for the in-progress drag path.\n const dragPoints = drag.map((c) => `${center(c.c)},${center(c.r)}`).join(\" \");\n\n return (\n \n {/* Connector lines for solved words + current drag */}\n \n {found.map((f, i) => (\n `${center(c.c)},${center(c.r)}`).join(\" \")}\n fill=\"none\"\n stroke={WORD_COLORS[i % WORD_COLORS.length]}\n strokeWidth={10}\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n opacity={0.35}\n />\n ))}\n {drag.length >= 2 && (\n \n )}\n \n\n {/* Cells */}\n {grid.map((row, r) =>\n row.map((letter, c) => {\n if (letter == null) {\n return (\n \n );\n }\n const k = `${r},${c}`;\n const solved = solvedColor.get(k);\n const selected = inDrag.has(k);\n const isFlash = flashSet.has(k);\n let bg = \"#ffffff\";\n let fg = \"#1f2937\";\n let border = \"#e5e7eb\";\n if (solved) {\n bg = solved;\n fg = \"#ffffff\";\n border = solved;\n }\n if (selected) {\n bg = \"#2563eb\";\n fg = \"#ffffff\";\n border = \"#1d4ed8\";\n }\n if (isFlash) {\n bg = flash!.ok ? \"#16a34a\" : \"#dc2626\";\n fg = \"#ffffff\";\n border = bg;\n }\n return (\n {\n e.preventDefault();\n start({ r, c });\n }}\n className=\"absolute rounded-lg flex items-center justify-center font-bold text-lg cursor-pointer transition-colors\"\n style={{\n left: c * (CELL + GAP),\n top: r * (CELL + GAP),\n width: CELL,\n height: CELL,\n background: bg,\n color: fg,\n border: `2px solid ${border}`,\n boxShadow: \"0 1px 2px rgba(0,0,0,0.06)\",\n }}\n >\n {letter}\n \n );\n })\n )}\n \n );\n}\n",[],[227,268,260],"components","6127248d-980a-4a58-9eb3-c838663ef559","Clues.tsx","91941e3c-885e-11f1-a9a0-1607ee4eb77e",11,["D",1785007517565],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport type { Found } from \"../types.ts\";\n\ninterface CluesProps {\n clues: number[]; // sorted word lengths\n found: Found[];\n}\n\n/**\n * Show one \"slot\" per word. Each slot displays either the word's length (as\n * boxes) if unsolved, or the revealed word once found. We greedily match found\n * words to clue slots by length so each found word ticks off one clue.\n */\nexport function Clues({ clues, found }: CluesProps) {\n // Count how many found words we have of each length, to mark slots solved.\n const foundByLen = new Map();\n for (const f of found) {\n const arr = foundByLen.get(f.word.length) ?? [];\n arr.push(f.word);\n foundByLen.set(f.word.length, arr);\n }\n // Clone so we can pop as we assign.\n const remaining = new Map();\n for (const [len, arr] of foundByLen) remaining.set(len, arr.slice());\n\n return (\n

\n {found.length} / {clues.length} found\n

\n {clues.map((len, i) => {\n const pool = remaining.get(len);\n const solvedWord = pool && pool.length ? pool.shift() : undefined;\n return (\n

\n {len}\n {Array.from({ length: len }).map((_, j) => (\n \n {solvedWord ? solvedWord[j] : \"•\"}\n \n ))}\n

\n );\n })}\n

\n );\n}\n",[],[227,268,270],"2815097a-2f61-456a-b030-be969cfe60bb","App.tsx","019f9aba-fced-74dc-b6a6-0c8462cc2e84",12,["D",1785007545826],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useCallback, useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { Grid } from \"./Grid.tsx\";\nimport { Clues } from \"./Clues.tsx\";\nimport { checkPath, getSolution, newPuzzle, type PuzzleOptions } from \"../api.ts\";\nimport type { Cell, Found, Puzzle } from \"../types.ts\";\n\ntype Difficulty = \"easy\" | \"medium\" | \"hard\";\n\nconst DIFFICULTIES: Record = {\n easy: { label: \"Easy\", rows: 6, cols: 6, wordCount: 3, minLen: 4, maxLen: 6 },\n medium: { label: \"Medium\", rows: 7, cols: 7, wordCount: 5, minLen: 4, maxLen: 7 },\n hard: { label: \"Hard\", rows: 8, cols: 8, wordCount: 7, minLen: 5, maxLen: 8 },\n};\n\nconst cellKey = (c: Cell) => `${c.r},${c.c}`;\n\nexport function App() {\n const [difficulty, setDifficulty] = useState(\"medium\");\n const [puzzle, setPuzzle] = useState(null);\n const [found, setFound] = useState([]);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(null);\n const [flash, setFlash] = useState<{ path: Cell[]; ok: boolean } | null>(null);\n const [message, setMessage] = useState(null);\n const [revealed, setRevealed] = useState(false);\n const flashTimer = useRef(null);\n\n const load = useCallback(async (diff: Difficulty) => {\n setLoading(true);\n setError(null);\n setFound([]);\n setFlash(null);\n setMessage(null);\n setRevealed(false);\n try {\n const p = await newPuzzle(DIFFICULTIES[diff]);\n setPuzzle(p);\n } catch (e) {\n setError(e instanceof Error ? e.message : String(e));\n } finally {\n setLoading(false);\n }\n }, []);\n\n useEffect(() => {\n load(difficulty);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const showFlash = useCallback((path: Cell[], ok: boolean) => {\n if (flashTimer.current) clearTimeout(flashTimer.current);\n setFlash({ path, ok });\n flashTimer.current = globalThis.setTimeout(() => setFlash(null), 600);\n }, []);\n\n const foundKeys = new Set(found.flatMap((f) => f.path.map(cellKey)));\n\n const onSubmit = useCallback(async (path: Cell[]) => {\n if (!puzzle || revealed) return;\n // Ignore paths that touch already-solved cells.\n if (path.some((c) => foundKeys.has(cellKey(c)))) return;\n try {\n const res = await checkPath(puzzle.id, path);\n if (res.correct && res.word && res.path) {\n // Avoid double-adding the same word.\n setFound((prev) =>\n prev.some((f) => f.word === res.word && f.path[0].r === res.path![0].r)\n ? prev\n : [...prev, { word: res.word!, path: res.path! }]\n );\n showFlash(res.path, true);\n setMessage(`Nice! Found \"${res.word}\"`);\n } else {\n showFlash(path, false);\n setMessage(\"Not a placed word there — try again.\");\n }\n } catch (e) {\n setError(e instanceof Error ? e.message : String(e));\n }\n }, [puzzle, revealed, found, showFlash]);\n\n const reveal = useCallback(async () => {\n if (!puzzle) return;\n try {\n const words = await getSolution(puzzle.id);\n setFound(words.map((w) => ({ word: w.word, path: w.path })));\n setRevealed(true);\n setMessage(\"Solution revealed.\");\n } catch (e) {\n setError(e instanceof Error ? e.message : String(e));\n }\n }, [puzzle]);\n\n const won = puzzle != null && !revealed && found.length === puzzle.wordCount;\n\n return (\n

🐍 Word Snake

\n Trace each hidden word as a snake-path through adjacent letters.\n

\n\n {/* Controls */}\n

\n {(Object.keys(DIFFICULTIES) as Difficulty[]).map((d) => (\n {\n setDifficulty(d);\n load(d);\n }}\n className={`px-3 py-1.5 rounded-full text-sm font-semibold border transition-colors ${\n difficulty === d\n ? \"bg-gray-900 text-white border-gray-900\"\n : \"bg-white text-gray-700 border-gray-300 hover:border-gray-500\"\n }`}\n >\n {DIFFICULTIES[d].label}\n \n ))}\n load(difficulty)}\n className=\"px-3 py-1.5 rounded-full text-sm font-semibold bg-blue-600 text-white hover:bg-blue-700\"\n >\n New puzzle\n \n \n Give up\n \n

\n\n {error && (\n

\n {error}\n

\n )}\n\n {loading && (\n

Generating puzzle…

\n )}\n\n {puzzle && !loading && (\n

\n \n

\n {won\n ? (\n \n 🎉 You found all {puzzle.wordCount} words!\n \n )\n : {message}}\n

\n \n

\n )}\n\n \n

\n );\n}\n",[],[227,268,278],"dde1f63f-8943-4245-92b3-52bf459eba05",["D",1785007373549],[192,193,194],[227,268],"2f9e8e7d-4e5a-4d85-b1d9-42ec889c4c77",["D",1785007373549],[191,195,196,197,198,199],[227],["D",1785007411736],[],[18,81],["D",1785007403208],[],[18,66],["D",1785007403208],[188,189],[18],["D",1785006829408],["D",1789561254403],{"_11":12,"_137":72},{"_11":12,"_132":133,"_71":72,"_31":70,"_134":135,"_136":30},{"_40":123,"_13":16,"_34":37,"_124":85,"_125":-5,"_126":-5,"_127":-5,"_128":-5,"_129":-5,"_130":14,"_131":12},"ctx",{"_54":-5,"_156":340,"_341":342,"_343":344,"_345":30,"_346":30,"_347":30,"_348":24,"_349":-5,"_350":-7,"_351":-7,"_352":26,"_353":30,"_354":30,"_355":-5,"_356":30,"_357":30,"_358":30,"_359":-5},"ENV",{"_311":312,"_313":314,"_315":16,"_316":317,"_318":319,"_320":321,"_322":323,"_324":325,"_326":327,"_328":329,"_330":331,"_332":333,"_334":335,"_336":337,"_338":339},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","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"]

History · backend