\n \n \n \n",[],[145,205],"85d3e2f7-481e-49c3-9a18-f565a8d98166","favicon.svg","019f9aba-fced-74dc-b6a6-170a808d083c",["D",1785007373549],"\n",[],[145,213],"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",[],[145,220],"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",[],[145,236,228],"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",[],[145,236,238],"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",[],[145,236,246],"dde1f63f-8943-4245-92b3-52bf459eba05",["D",1785007373549],[171,172,173],[145,236],["D",1785007373549],[170,174,175,176,177,178],[145],"1d020e19-c99a-4598-9450-15318c69110c","store.ts","527da93e-885e-11f1-8e70-1607ee4eb77e",6,["D",1785007411736],"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport type { Puzzle } from \"./generatePuzzle.ts\";\n\nconst TABLE = \"puzzles_v1\";\n\nlet initialized = false;\nasync function init() {\n if (initialized) return;\n await sqlite.execute(\n `CREATE TABLE IF NOT EXISTS ${TABLE} (\n id TEXT PRIMARY KEY,\n data TEXT NOT NULL,\n created_at INTEGER NOT NULL\n )`,\n );\n initialized = true;\n}\n\nexport async function savePuzzle(puzzle: Puzzle): Promise {\n await init();\n const id = crypto.randomUUID();\n await sqlite.execute({\n sql: `INSERT INTO ${TABLE} (id, data, created_at) VALUES (?, ?, ?)`,\n args: [id, JSON.stringify(puzzle), Date.now()],\n });\n return id;\n}\n\nexport async function loadPuzzle(id: string): Promise {\n await init();\n const res = await sqlite.execute({\n sql: `SELECT data FROM ${TABLE} WHERE id = ?`,\n args: [id],\n });\n if (res.rows.length === 0) return null;\n return JSON.parse(String(res.rows[0][0])) as Puzzle;\n}\n",[],[152,261],"cf32c54e-5de0-4ea5-b788-9615748feb29","generatePuzzle.ts","4d68b04c-885e-11f1-ba79-1607ee4eb77e",["D",1785007403208],"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\n// A cell coordinate on the grid.\nexport interface Cell {\n r: number;\n c: number;\n}\n\n// A placed word: the word text plus the exact ordered snake-path of cells it occupies.\nexport interface PlacedWord {\n word: string;\n path: Cell[]; // path[i] holds word[i]\n}\n\nexport interface Puzzle {\n rows: number;\n cols: number;\n // grid[r][c] is a single uppercase letter, or null for an empty (unoccupied) cell.\n grid: (string | null)[][];\n words: PlacedWord[];\n}\n\n// 8-directional (king move) neighbors.\nconst DIRS: Cell[] = [\n { r: -1, c: -1 },\n { r: -1, c: 0 },\n { r: -1, c: 1 },\n { r: 0, c: -1 },\n { r: 0, c: 1 },\n { r: 1, c: -1 },\n { r: 1, c: 0 },\n { r: 1, c: 1 },\n];\n\nfunction shuffle(arr: T[]): T[] {\n const a = arr.slice();\n for (let i = a.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [a[i], a[j]] = [a[j], a[i]];\n }\n return a;\n}\n\nconst key = (r: number, c: number) => `${r},${c}`;\n\n/**\n * Try to lay `word` as a self-avoiding snake path on the grid, using only cells\n * that are currently empty (not occupied by a previously placed word).\n * Returns the ordered path of cells, or null if it couldn't be placed.\n */\nfunction tryPlaceWord(\n word: string,\n rows: number,\n cols: number,\n occupied: Set,\n): Cell[] | null {\n const used = new Set(); // cells used by THIS word's current path attempt\n\n // Depth-first search that grows the path one letter at a time.\n function dfs(path: Cell[]): Cell[] | null {\n if (path.length === word.length) return path.slice();\n const last = path[path.length - 1];\n for (const d of shuffle(DIRS)) {\n const nr = last.r + d.r;\n const nc = last.c + d.c;\n if (nr < 0 || nc < 0 || nr >= rows || nc >= cols) continue;\n const k = key(nr, nc);\n if (occupied.has(k) || used.has(k)) continue;\n used.add(k);\n path.push({ r: nr, c: nc });\n const res = dfs(path);\n if (res) return res;\n path.pop();\n used.delete(k);\n }\n return null;\n }\n\n // Try a number of random starting cells.\n const starts = shuffle(\n Array.from({ length: rows * cols }, (_, i) => ({ r: Math.floor(i / cols), c: i % cols })),\n );\n for (const start of starts) {\n const k = key(start.r, start.c);\n if (occupied.has(k)) continue;\n used.clear();\n used.add(k);\n const res = dfs([start]);\n if (res) return res;\n }\n return null;\n}\n\n/**\n * Fetch `count` random distinct words from the dictionary, each with length in\n * [minLen, maxLen].\n */\nasync function pickWords(count: number, minLen: number, maxLen: number): Promise {\n const res = await sqlite.execute({\n sql:\n `SELECT DISTINCT word FROM words WHERE length(word) BETWEEN ? AND ? ORDER BY RANDOM() LIMIT ?`,\n args: [minLen, maxLen, count],\n });\n return res.rows.map((row) => String(row[0]).toUpperCase());\n}\n\nexport interface GenerateOptions {\n rows?: number;\n cols?: number;\n wordCount?: number;\n minLen?: number;\n maxLen?: number;\n}\n\n/**\n * Generate a puzzle: place several words as snake-paths on a grid, leaving some\n * cells empty. Retries word selection/placement until it succeeds.\n */\nexport async function generatePuzzle(opts: GenerateOptions = {}): Promise {\n const rows = opts.rows ?? 7;\n const cols = opts.cols ?? 7;\n const wordCount = opts.wordCount ?? 5;\n const minLen = opts.minLen ?? 4;\n const maxLen = opts.maxLen ?? 7;\n\n // Try a few full attempts (fresh word sets) before giving up.\n for (let attempt = 0; attempt < 12; attempt++) {\n // Over-fetch so we have spare words to try if some don't fit.\n const pool = await pickWords(wordCount * 3, minLen, maxLen);\n if (pool.length < wordCount) continue;\n\n // Place longest words first — they're the hardest to fit.\n const sorted = pool.sort((a, b) => b.length - a.length);\n\n const occupied = new Set();\n const placed: PlacedWord[] = [];\n\n for (const word of sorted) {\n if (placed.length === wordCount) break;\n const path = tryPlaceWord(word, rows, cols, occupied);\n if (!path) continue;\n for (const cell of path) occupied.add(key(cell.r, cell.c));\n placed.push({ word, path });\n }\n\n if (placed.length < wordCount) continue;\n\n // Build the visible grid.\n const grid: (string | null)[][] = Array.from(\n { length: rows },\n () => Array.from({ length: cols }, () => null as string | null),\n );\n for (const pw of placed) {\n pw.path.forEach((cell, i) => {\n grid[cell.r][cell.c] = pw.word[i];\n });\n }\n\n return { rows, cols, grid, words: placed };\n }\n\n throw new Error(\"Could not generate a puzzle after several attempts\");\n}\n",[],[152,269],["D",1785007403208],[167,168],[152],["D",1785006829408],["D",1789474235934],{"_11":12,"_92":88},{"_11":12,"_85":86,"_87":88,"_45":46,"_89":90,"_91":38},{"_29":30,"_13":26,"_20":21,"_27":28,"_31":-5,"_32":-5,"_80":-5,"_81":-5,"_82":-5,"_83":14,"_84":12},"ctx",{"_73":-5,"_114":316,"_317":318,"_319":320,"_321":38,"_322":38,"_323":38,"_324":50,"_325":-5,"_326":-7,"_327":-7,"_328":54,"_329":38,"_330":38,"_331":-5,"_332":38,"_333":38,"_334":38,"_335":-5},"ENV",{"_287":288,"_289":290,"_291":26,"_292":293,"_294":295,"_296":297,"_298":299,"_300":301,"_302":303,"_304":305,"_306":307,"_308":309,"_310":311,"_312":313,"_314":315},"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"]

Branches1

Branches
1