\n \n \n \n\n","label",[182,68],"frontend","pulls","branches","forks","envVars",{"_190":26,"_192":26},"connections",{"_190":26,"_191":26},"count","unfilledCount","emptyCount",{"_33":274,"_13":182,"_66":174,"_43":-5,"_35":36,"_175":40,"_176":97,"_37":275,"_39":26,"_69":233,"_178":-5,"_70":24,"_180":-5,"_210":276,"_17":277},{"_33":270,"_13":261,"_66":256,"_43":174,"_35":36,"_175":40,"_176":97,"_37":271,"_39":26,"_69":233,"_178":-5,"_70":24,"_180":-5,"_210":272,"_17":273},{"_33":262,"_13":263,"_66":264,"_43":256,"_35":36,"_175":265,"_176":97,"_37":266,"_39":40,"_69":225,"_178":267,"_70":24,"_180":-5,"_210":268,"_17":269},{"_33":253,"_13":254,"_66":255,"_43":256,"_35":36,"_175":40,"_176":97,"_37":257,"_39":26,"_69":225,"_178":258,"_70":24,"_180":-5,"_210":259,"_17":260},{"_33":246,"_13":247,"_66":248,"_43":174,"_35":36,"_175":40,"_176":97,"_37":249,"_39":26,"_69":21,"_178":250,"_70":24,"_180":-5,"_210":251,"_17":252},{"_33":173,"_13":68,"_66":67,"_43":174,"_35":36,"_175":76,"_176":97,"_37":243,"_39":40,"_69":21,"_178":179,"_70":24,"_180":-5,"_210":244,"_17":245},{"_33":236,"_13":237,"_66":238,"_43":174,"_35":36,"_175":40,"_176":97,"_37":239,"_39":26,"_69":225,"_178":240,"_70":24,"_180":-5,"_210":241,"_17":242},{"_33":230,"_13":229,"_66":223,"_43":-5,"_35":36,"_175":231,"_176":97,"_37":232,"_39":26,"_69":233,"_178":-5,"_70":24,"_180":-5,"_210":234,"_17":235},{"_33":220,"_13":221,"_66":222,"_43":223,"_35":36,"_175":123,"_176":97,"_37":224,"_39":40,"_69":225,"_178":226,"_70":24,"_180":-5,"_210":227,"_17":228},{"_33":213,"_13":214,"_66":215,"_43":-5,"_35":36,"_175":40,"_176":97,"_37":216,"_39":26,"_69":21,"_178":217,"_70":24,"_180":-5,"_210":218,"_17":219},{"_33":204,"_13":205,"_66":95,"_43":-5,"_35":36,"_175":206,"_176":97,"_37":207,"_39":40,"_69":208,"_178":209,"_70":24,"_180":-5,"_210":211,"_17":212},"97ff35b1-5e3b-49fb-ba29-a694fd4f2897","index.ts",2,["D",1782505098026],"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\n// Initialize DB schema\nawait sqlite.execute(`\n CREATE TABLE IF NOT EXISTS puzzles (\n id INTEGER PRIMARY KEY,\n puzzle_number INTEGER UNIQUE NOT NULL,\n puzzle_date TEXT NOT NULL\n )\n`);\n\nawait sqlite.execute(`\n CREATE TABLE IF NOT EXISTS clues (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n puzzle_id INTEGER NOT NULL REFERENCES puzzles(id),\n color TEXT NOT NULL,\n category TEXT NOT NULL,\n word TEXT NOT NULL\n )\n`);\n\nawait sqlite.execute(`\n CREATE INDEX IF NOT EXISTS idx_clues_word ON clues(word COLLATE NOCASE)\n`);\n\n// Serve frontend\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// --- API ---\n\n// GET /api/search?q=WORD&mode=exact|substring\napp.get(\"/api/search\", async (c) => {\n const q = (c.req.query(\"q\") ?? \"\").trim();\n const mode = c.req.query(\"mode\") ?? \"substring\";\n\n if (!q) return c.json({ results: [] });\n\n let whereClause: string;\n let args: string[];\n\n if (mode === \"exact\") {\n whereClause = \"LOWER(cl.word) = LOWER(?)\";\n args = [q];\n } else {\n whereClause = \"LOWER(cl.word) LIKE LOWER(?)\";\n args = [`%${q}%`];\n }\n\n // Find puzzles that contain a matching clue\n const matchingPuzzles = await sqlite.execute({\n sql: `\n SELECT DISTINCT p.id, p.puzzle_number, p.puzzle_date\n FROM puzzles p\n JOIN clues cl ON cl.puzzle_id = p.id\n WHERE ${whereClause}\n ORDER BY p.puzzle_number DESC\n `,\n args,\n });\n\n if (matchingPuzzles.rows.length === 0) return c.json({ results: [] });\n\n const puzzleIds = matchingPuzzles.rows.map((r) => r.id as number);\n\n // Fetch all clues for those puzzles\n const placeholders = puzzleIds.map(() => \"?\").join(\",\");\n const allClues = await sqlite.execute({\n sql: `\n SELECT puzzle_id, color, category, word\n FROM clues\n WHERE puzzle_id IN (${placeholders})\n ORDER BY puzzle_id, color, word\n `,\n args: puzzleIds,\n });\n\n // Group clues by puzzle\n type Clue = { color: string; category: string; word: string };\n type Group = { color: string; category: string; words: string[] };\n const cluesByPuzzle = new Map();\n for (const row of allClues.rows) {\n const pid = row.puzzle_id as number;\n if (!cluesByPuzzle.has(pid)) cluesByPuzzle.set(pid, []);\n cluesByPuzzle.get(pid)!.push({\n color: row.color as string,\n category: row.category as string,\n word: row.word as string,\n });\n }\n\n const results = matchingPuzzles.rows.map((p) => {\n const clues = cluesByPuzzle.get(p.id as number) ?? [];\n // Group by color/category\n const groups: Group[] = [];\n const seen = new Map();\n for (const cl of clues) {\n const key = `${cl.color}::${cl.category}`;\n if (!seen.has(key)) {\n const g: Group = { color: cl.color, category: cl.category, words: [] };\n seen.set(key, g);\n groups.push(g);\n }\n seen.get(key)!.words.push(cl.word);\n }\n return {\n puzzle_number: p.puzzle_number,\n puzzle_date: p.puzzle_date,\n groups,\n };\n });\n\n return c.json({ results });\n});\n\n// GET /api/puzzles - list all puzzles (for stats)\napp.get(\"/api/puzzles\", async (c) => {\n const result = await sqlite.execute(\n `SELECT puzzle_number, puzzle_date FROM puzzles ORDER BY puzzle_number DESC LIMIT 100`,\n );\n return c.json({ puzzles: result.rows });\n});\n\n// POST /api/puzzles - add a puzzle\napp.post(\"/api/puzzles\", async (c) => {\n const body = await c.req.json();\n const { puzzle_number, puzzle_date, groups } = body;\n // groups: [{ color, category, words: string[] }]\n\n if (!puzzle_number || !puzzle_date || !Array.isArray(groups)) {\n return c.json({ error: \"Invalid payload\" }, 400);\n }\n\n // Insert puzzle\n await sqlite.execute({\n sql: `INSERT OR REPLACE INTO puzzles (puzzle_number, puzzle_date) VALUES (?, ?)`,\n args: [puzzle_number, puzzle_date],\n });\n\n const puzzleRow = await sqlite.execute({\n sql: `SELECT id FROM puzzles WHERE puzzle_number = ?`,\n args: [puzzle_number],\n });\n const puzzleId = puzzleRow.rows[0].id as number;\n\n // Delete existing clues for this puzzle (in case of re-import)\n await sqlite.execute({\n sql: `DELETE FROM clues WHERE puzzle_id = ?`,\n args: [puzzleId],\n });\n\n // Insert clues\n const stmts = [];\n for (const group of groups) {\n for (const word of group.words) {\n stmts.push({\n sql: `INSERT INTO clues (puzzle_id, color, category, word) VALUES (?, ?, ?, ?)`,\n args: [puzzleId, group.color, group.category, word],\n });\n }\n }\n if (stmts.length > 0) await sqlite.batch(stmts);\n\n return c.json({ ok: true, puzzle_number, clues_inserted: stmts.length });\n});\n\n// DELETE /api/puzzles/:number - remove a puzzle\napp.delete(\"/api/puzzles/:number\", async (c) => {\n const num = parseInt(c.req.param(\"number\"));\n const row = await sqlite.execute({\n sql: `SELECT id FROM puzzles WHERE puzzle_number = ?`,\n args: [num],\n });\n if (!row.rows.length) return c.json({ error: \"Not found\" }, 404);\n const id = row.rows[0].id as number;\n await sqlite.batch([\n { sql: `DELETE FROM clues WHERE puzzle_id = ?`, args: [id] },\n { sql: `DELETE FROM puzzles WHERE id = ?`, args: [id] },\n ]);\n return c.json({ ok: true });\n});\n\n// GET /api/stats\napp.get(\"/api/stats\", async (c) => {\n const puzzleCount = await sqlite.execute(`SELECT COUNT(*) as n FROM puzzles`);\n const clueCount = await sqlite.execute(`SELECT COUNT(*) as n FROM clues`);\n return c.json({\n puzzles: puzzleCount.rows[0].n,\n clues: clueCount.rows[0].n,\n });\n});\n\napp.onError((err) => Promise.reject(err));\nexport default app.fetch;\n","children",[],[205],"96542375-b3d3-4e0c-bdce-83069b926fd9","README.md","019f0594-e762-709d-bcd4-f5173084ebc7",["D",1782505072423],"# React + Hono Starter\n\nA minimal starter template for building client-side React apps with a Hono\nbackend on Val Town. Click **Remix** to get your own copy.\n\n## Picking a starter\n\n| Starter | When to pick it |\n| --- | --- |\n| [`basic-html-starter`](https://www.val.town/x/templates/basic-html-starter) | Static HTML pages. Sprinkle of vanilla JS. No server-side rendering. |\n| [`hono-jsx-starter`](https://www.val.town/x/templates/hono-jsx-starter) | Dynamic server-rendered HTML with JSX. API routes. No React, no SPA. |\n| **[`react-hono-starter`](https://www.val.town/x/templates/react-hono-starter)** *(you're here)* | Client-side React SPA with a Hono API backend. |\n\n**Want to build UI?** Start writing React components in\n[`frontend/components/`](/frontend/components/). Import them into `App.tsx` and\nyou're good to go. Styling is [Twind](https://twind.style/) — just use Tailwind\nutility classes, zero config.\n\n**Want to add an API?** Add routes in [`index.ts`](/index.ts) (there's a\ncommented-out example). Fetch them from your React components.\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"GET /\"| Hono[\"index.ts
(Hono server)\"]\n Hono -->|serves| HTML[\"index.html\"]\n HTML -->|loads| Entry[\"index.tsx\"]\n Entry -->|renders| App[\"App.tsx\"]\n App -->|renders| Counter[\"Counter.tsx\"]\n```\n\n## File structure\n\n```\nindex.ts ← Hono backend (serves frontend + API routes)\nfrontend/\n index.html ← HTML shell (loads Twind + React)\n index.tsx ← React entrypoint (mounts )\n favicon.svg ← App icon\n components/\n App.tsx ← Root component (layout + view source link)\n Counter.tsx ← Example component with state\n```\n\n## How it works\n\n1. **`index.ts`** is the HTTP entrypoint — a Hono server that serves the\n frontend and any API routes you add.\n2. **`frontend/index.html`** loads Twind and the React entrypoint.\n3. **`frontend/index.tsx`** mounts the React app.\n4. **`frontend/components/App.tsx`** is the root layout — add new components\n alongside it.\n5. **`frontend/components/Counter.tsx`** is an example stateful component —\n replace it with your own!\n\n## Next steps\n\n- Add API routes in `index.ts`\n- Add new components in `frontend/components/`\n- Add a SQLite database — see the\n [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) for\n a full-stack example with database, queries, and shared types\n",[],[214],"38d5a21e-f302-4ada-97a4-89b65ebdbd07","import-archive.ts","a4e9dc34-719c-11f1-bc07-1607ee4eb77e","e5cbff70-cdda-4058-9573-63adeceb23e5",["D",1782505313591],"script","/**\n * Bulk import script: fetches all past NYT Connections puzzles from wordsrated.com\n * and POSTs each puzzle to the /api/puzzles endpoint.\n *\n * Run this once (or re-run safely — the API uses INSERT OR REPLACE).\n *\n * Usage: run this file as a Val Town script.\n */\n\nconst API_BASE = \"https://potluck--019f0594e762709dbcd4fba649db20e4.web.val.run\";\nconst SOURCE_URL = \"https://wordsrated.com/solvers/nyt-connections-archive-all-past-answers/\";\n\nconst COLOR_NAMES = [\"Yellow\", \"Green\", \"Blue\", \"Purple\"] as const;\nconst COLOR_KEYS = [\"yellow\", \"green\", \"blue\", \"purple\"] as const;\n\ntype PuzzlePayload = {\n puzzle_number: number;\n puzzle_date: string;\n groups: { color: string; category: string; words: string[] }[];\n};\n\n// Fetch the full page (it's ~300KB of text, need to paginate)\nasync function fetchFullPage(): Promise {\n const PAGE_SIZE = 50000;\n let text = \"\";\n let offset = 0;\n let hasMore = true;\n\n while (hasMore) {\n const url = `${SOURCE_URL}?_offset=${offset}`; // not a real param — we just need to loop\n const res = await fetch(SOURCE_URL, {\n headers: { \"User-Agent\": \"Mozilla/5.0 (compatible; archive-importer/1.0)\" },\n });\n if (!res.ok) throw new Error(`HTTP ${res.status} fetching source page`);\n const full = await res.text();\n text = full; // we get the whole thing each time; we'll chunk it ourselves\n hasMore = false; // fetch() gives us everything at once\n }\n\n return text;\n}\n\n// Strip HTML tags and decode common HTML entities\nfunction stripHtml(html: string): string {\n return html\n .replace(/<[^>]*>/g, \" \")\n .replace(/&/g, \"&\")\n .replace(/</g, \"<\")\n .replace(/>/g, \">\")\n .replace(/"/g, '\"')\n .replace(/'/g, \"'\")\n .replace(/’/g, \"'\")\n .replace(/“/g, '\"')\n .replace(/”/g, '\"')\n .replace(/ /g, \" \")\n .replace(/\\s+/g, \" \")\n .trim();\n}\n\n// Convert a date string like \"June 25, 2026\" to \"2026-06-25\"\nfunction parseDate(dateStr: string): string {\n const months: Record = {\n January: \"01\", February: \"02\", March: \"03\", April: \"04\",\n May: \"05\", June: \"06\", July: \"07\", August: \"08\",\n September: \"09\", October: \"10\", November: \"11\", December: \"12\",\n };\n const m = dateStr.match(/(\\w+)\\s+(\\d+),\\s+(\\d{4})/);\n if (!m) throw new Error(`Can't parse date: ${dateStr}`);\n const [, month, day, year] = m;\n return `${year}-${months[month]}-${day.padStart(2, \"0\")}`;\n}\n\nfunction parsePuzzles(text: string): PuzzlePayload[] {\n const puzzles: PuzzlePayload[] = [];\n\n // Each puzzle block looks like:\n // \"Month Day, Year, #NUMBER Yellow Group: CATEGORY: WORD, WORD ... Purple Group: CATEGORY: WORD, WORD\"\n // We split on the date+number pattern\n const puzzlePattern =\n /(\\w+ \\d+, \\d{4}),\\s*#(\\d+)\\s+(Yellow Group:.*?Purple Group:.*?)(?=(?:\\w+ \\d+, \\d{4}),\\s*#\\d+|$)/gs;\n\n let match: RegExpExecArray | null;\n while ((match = puzzlePattern.exec(text)) !== null) {\n const [, dateStr, numStr, body] = match;\n\n let puzzle_date: string;\n try {\n puzzle_date = parseDate(dateStr);\n } catch {\n console.warn(`Skipping puzzle #${numStr}: bad date \"${dateStr}\"`);\n continue;\n }\n\n const puzzle_number = parseInt(numStr, 10);\n const groups: PuzzlePayload[\"groups\"] = [];\n\n for (let i = 0; i < COLOR_NAMES.length; i++) {\n const color = COLOR_NAMES[i];\n const colorKey = COLOR_KEYS[i];\n const nextColor = COLOR_NAMES[i + 1] ? `${COLOR_NAMES[i + 1]} Group:` : \"$\";\n\n // Match \"Yellow Group: CATEGORY: WORD, WORD, WORD, WORD\"\n const groupRe = new RegExp(\n `${color} Group:\\\\s*([^:]+?):\\\\s*(.*?)(?=${nextColor}|$)`,\n \"s\",\n );\n const gm = body.match(groupRe);\n if (!gm) {\n console.warn(`Puzzle #${puzzle_number}: missing ${color} group`);\n continue;\n }\n\n const category = gm[1].trim();\n const wordsRaw = gm[2].trim();\n const words = wordsRaw\n .split(\",\")\n .map((w) => w.trim())\n .filter((w) => w.length > 0);\n\n if (words.length === 0) {\n console.warn(`Puzzle #${puzzle_number}: ${color} group has no words (skipping group)`);\n continue;\n }\n\n groups.push({ color: colorKey, category, words });\n }\n\n if (groups.length < 4) {\n console.warn(`Puzzle #${puzzle_number}: only ${groups.length}/4 groups parsed — skipping`);\n continue;\n }\n\n puzzles.push({ puzzle_number, puzzle_date, groups });\n }\n\n return puzzles;\n}\n\nasync function importPuzzle(puzzle: PuzzlePayload): Promise {\n const res = await fetch(`${API_BASE}/api/puzzles`, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(puzzle),\n });\n if (!res.ok) {\n const text = await res.text();\n console.error(`Failed #${puzzle.puzzle_number}: HTTP ${res.status} — ${text}`);\n return false;\n }\n return true;\n}\n\n// Main\nconsole.log(\"Fetching archive page...\");\nconst html = await fetchFullPage();\nconst text = stripHtml(html);\n\nconsole.log(`Page fetched (${text.length} chars). Parsing puzzles...`);\nconst puzzles = parsePuzzles(text);\nconsole.log(`Found ${puzzles.length} puzzles. Importing...`);\n\nlet imported = 0;\nlet failed = 0;\nlet skipped = 0;\n\n// Check which puzzles are already in the DB\nconst statsRes = await fetch(`${API_BASE}/api/stats`);\nconst stats = await statsRes.json();\nconst alreadyHas = (stats.puzzles as number) > 0;\n\nif (alreadyHas) {\n console.log(`DB already has ${stats.puzzles} puzzles. Re-importing all (INSERT OR REPLACE)...`);\n}\n\n// Import in batches to avoid hammering the API\nconst BATCH = 20;\nfor (let i = 0; i < puzzles.length; i += BATCH) {\n const batch = puzzles.slice(i, i + BATCH);\n await Promise.all(\n batch.map(async (p) => {\n const ok = await importPuzzle(p);\n if (ok) imported++;\n else failed++;\n }),\n );\n console.log(`Progress: ${Math.min(i + BATCH, puzzles.length)}/${puzzles.length}`);\n}\n\nconsole.log(`\\n✅ Done!`);\nconsole.log(` Imported: ${imported}`);\nconsole.log(` Failed: ${failed}`);\nconsole.log(` Skipped (parse): ${puzzles.length - imported - failed + skipped}`);\n\nconst finalStats = await fetch(`${API_BASE}/api/stats`).then((r) => r.json());\nconsole.log(`\\nDB now has ${finalStats.puzzles} puzzles, ${finalStats.clues} clues.`);\n",[],[229,221],"scripts","444b1995-5c2a-49ec-a410-cd94c5ac0162",5,["D",1782505302068],"directory",[201],[229],"f53584c0-101e-4fcb-92c6-998a9675f4ae","index.tsx","019f0594-e762-709d-bcd4-eee68a14b224",["D",1782505072423],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();",[],[182,237],["D",1782505152099],[],[182,68],"d1a572f3-1a50-40a4-bd9b-2fd0f15e94fd","favicon.svg","019f0594-e762-709d-bcd4-e5248efd08af",["D",1782505072423],"\n",[],[182,247],"aa85801a-6b8c-48d0-9478-5745e06089b5","Counter.tsx","019f0594-e762-709d-bcd4-df3bad74b386","019f0594-e762-709d-bcd4-e076aae9ad15",["D",1782505072423],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function Counter() {\n const [count, setCount] = useState(0);\n return (\n

\n Clicked\n setCount((c) => c + 1)}\n class=\"bg-blue-500 hover:bg-blue-600 text-white font-medium px-4 py-2 rounded-lg transition-colors cursor-pointer\"\n >\n {count}\n \n times\n

\n );\n}\n",[],[182,261,254],"components","6882dd10-de73-4bd0-bda2-a0f2ed5c5534","App.tsx","019f0594-e762-709d-bcd4-dbf591fa996b",3,["D",1782505146495],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\nconst COLOR_STYLES: Record = {\n yellow: { bg: \"bg-yellow-100 border-yellow-300\", dot: \"bg-yellow-400\", label: \"Yellow\" },\n green: { bg: \"bg-green-100 border-green-300\", dot: \"bg-green-500\", label: \"Green\" },\n blue: { bg: \"bg-blue-100 border-blue-300\", dot: \"bg-blue-400\", label: \"Blue\" },\n purple: { bg: \"bg-purple-100 border-purple-300\", dot: \"bg-purple-500\", label: \"Purple\" },\n};\n\nconst COLOR_ORDER = [\"yellow\", \"green\", \"blue\", \"purple\"];\n\ntype Group = { color: string; category: string; words: string[] };\ntype PuzzleResult = { puzzle_number: number; puzzle_date: string; groups: Group[] };\n\nfunction formatDate(dateStr: string): string {\n try {\n const d = new Date(dateStr + \"T12:00:00Z\");\n return d.toLocaleDateString(\"en-US\", { year: \"numeric\", month: \"long\", day: \"numeric\", timeZone: \"UTC\" });\n } catch {\n return dateStr;\n }\n}\n\nfunction highlight(text: string, query: string, mode: string): JSX.Element {\n if (!query) return <>{text};\n const needle = query.toLowerCase();\n const haystack = text.toLowerCase();\n if (mode === \"exact\") {\n if (haystack === needle) {\n return {text};\n }\n return <>{text};\n }\n const idx = haystack.indexOf(needle);\n if (idx === -1) return <>{text};\n return (\n <>\n {text.slice(0, idx)}\n {text.slice(idx, idx + query.length)}\n {text.slice(idx + query.length)}\n \n );\n}\n\nfunction PuzzleCard({ puzzle, query, mode }: { puzzle: PuzzleResult; query: string; mode: string }) {\n const sorted = [...puzzle.groups].sort((a, b) => {\n const ai = COLOR_ORDER.indexOf(a.color.toLowerCase());\n const bi = COLOR_ORDER.indexOf(b.color.toLowerCase());\n return (ai === -1 ? 99 : ai) - (bi === -1 ? 99 : bi);\n });\n\n return (\n

\n {formatDate(puzzle.puzzle_date)}, #{puzzle.puzzle_number}\n

\n {sorted.map((g) => {\n const style = COLOR_STYLES[g.color.toLowerCase()] ?? {\n bg: \"bg-gray-100 border-gray-300\",\n dot: \"bg-gray-400\",\n label: g.color,\n };\n return (\n

\n \n

\n {g.category}:\n {g.words.map((w, i) => (\n \n {highlight(w, query, mode)}\n {i < g.words.length - 1 ? \", \" : \"\"}\n \n ))}\n

\n );\n })}\n

\n );\n}\n\ntype Tab = \"search\" | \"add\";\n\nexport function App() {\n const [tab, setTab] = useState(\"search\");\n const [stats, setStats] = useState<{ puzzles: number; clues: number } | null>(null);\n\n useEffect(() => {\n fetch(\"/api/stats\")\n .then((r) => r.json())\n .then(setStats)\n .catch(console.error);\n }, [tab]);\n\n return (\n

\n {/* Header */}\n

\n 🔗 Connections Archive\n

\n Search all words from past NYT Connections puzzles\n

\n {stats && (\n

\n {stats.puzzles} puzzle{stats.puzzles !== 1 ? \"s\" : \"\"} · {stats.clues} clues archived\n

\n )}\n

\n\n {/* Tabs */}\n

\n {([\"search\", \"add\"] as Tab[]).map((t) => (\n setTab(t)}\n class={`flex-1 py-1.5 text-sm font-medium rounded-md transition-all capitalize ${\n tab === t ? \"bg-white text-gray-900 shadow-sm\" : \"text-gray-500 hover:text-gray-700\"\n }`}\n >\n {t === \"search\" ? \"🔍 Search\" : \"➕ Add Puzzle\"}\n \n ))}\n

\n\n {tab === \"search\" ? : setTab(\"search\")} />}\n

\n );\n}\n\nfunction SearchTab() {\n const [query, setQuery] = useState(\"\");\n const [mode, setMode] = useState<\"substring\" | \"exact\">(\"substring\");\n const [results, setResults] = useState(null);\n const [loading, setLoading] = useState(false);\n const inputRef = useRef(null);\n\n useEffect(() => {\n inputRef.current?.focus();\n }, []);\n\n async function search(q: string, m: string) {\n if (!q.trim()) { setResults(null); return; }\n setLoading(true);\n try {\n const r = await fetch(`/api/search?q=${encodeURIComponent(q)}&mode=${m}`);\n const data = await r.json();\n setResults(data.results);\n } finally {\n setLoading(false);\n }\n }\n\n function handleSubmit(e: Event) {\n e.preventDefault();\n search(query, mode);\n }\n\n function handleModeChange(m: \"substring\" | \"exact\") {\n setMode(m);\n if (results !== null) search(query, m);\n }\n\n return (\n

\n setQuery((e.target as HTMLInputElement).value)}\n placeholder=\"Search for a word…\"\n class=\"flex-1 border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400\"\n />\n \n Search\n \n \n\n {/* Mode toggle */}\n

\n \n handleModeChange(\"substring\")}\n class=\"accent-blue-600\"\n />\n Substring match\n \n \n handleModeChange(\"exact\")}\n class=\"accent-blue-600\"\n />\n Exact match\n \n

\n\n {loading && (\n

Searching…

\n )}\n\n {!loading && results !== null && (\n

\n {results.length === 0\n ? `No puzzles found for \"${query}\"`\n : `${results.length} puzzle${results.length !== 1 ? \"s\" : \"\"} found for \"${query}\"`}\n

\n {results.map((p) => (\n \n ))}\n

\n )}\n\n {!loading && results === null && (\n

🔍

Type a word and hit Search

\n )}\n

\n );\n}\n\nfunction AddTab({ onAdded }: { onAdded: () => void }) {\n const [puzzleNumber, setPuzzleNumber] = useState(\"\");\n const [puzzleDate, setPuzzleDate] = useState(\"\");\n const [groups, setGroups] = useState([\n { color: \"yellow\", category: \"\", words: \"\" },\n { color: \"green\", category: \"\", words: \"\" },\n { color: \"blue\", category: \"\", words: \"\" },\n { color: \"purple\", category: \"\", words: \"\" },\n ]);\n const [status, setStatus] = useState<{ type: \"success\" | \"error\"; msg: string } | null>(null);\n const [loading, setLoading] = useState(false);\n\n async function handleSubmit(e: Event) {\n e.preventDefault();\n setStatus(null);\n setLoading(true);\n try {\n const payload = {\n puzzle_number: parseInt(puzzleNumber),\n puzzle_date: puzzleDate,\n groups: groups.map((g) => ({\n color: g.color,\n category: g.category.trim(),\n words: g.words.split(\",\").map((w) => w.trim().toUpperCase()).filter(Boolean),\n })),\n };\n const r = await fetch(\"/api/puzzles\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(payload),\n });\n const data = await r.json();\n if (!r.ok) throw new Error(data.error ?? \"Unknown error\");\n setStatus({ type: \"success\", msg: `Puzzle #${data.puzzle_number} added (${data.clues_inserted} clues)` });\n setPuzzleNumber(\"\");\n setPuzzleDate(\"\");\n setGroups([\n { color: \"yellow\", category: \"\", words: \"\" },\n { color: \"green\", category: \"\", words: \"\" },\n { color: \"blue\", category: \"\", words: \"\" },\n { color: \"purple\", category: \"\", words: \"\" },\n ]);\n } catch (err: unknown) {\n setStatus({ type: \"error\", msg: String(err) });\n } finally {\n setLoading(false);\n }\n }\n\n return (\n

\n Puzzle #\n setPuzzleNumber((e.target as HTMLInputElement).value)}\n required\n placeholder=\"e.g. 365\"\n class=\"w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400\"\n />\n

\n Date\n setPuzzleDate((e.target as HTMLInputElement).value)}\n required\n class=\"w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400\"\n />\n

\n\n {groups.map((g, i) => {\n const style = COLOR_STYLES[g.color] ?? { dot: \"bg-gray-400\", bg: \"\", label: g.color };\n return (\n

\n \n {g.color}\n

\n {\n const updated = [...groups];\n updated[i] = { ...g, category: (e.target as HTMLInputElement).value };\n setGroups(updated);\n }}\n required\n placeholder=\"Category name (e.g. TIGHTLY PACKED)\"\n class=\"w-full border border-gray-300 rounded-md px-2.5 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400\"\n />\n {\n const updated = [...groups];\n updated[i] = { ...g, words: (e.target as HTMLInputElement).value };\n setGroups(updated);\n }}\n required\n placeholder=\"Words, comma-separated (e.g. COMPACT, DENSE, SQUASHED, COMPRESSED)\"\n class=\"w-full border border-gray-300 rounded-md px-2.5 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400\"\n />\n

\n );\n })}\n\n {status && (\n \n {status.msg}\n \n )}\n\n \n {loading ? \"Adding…\" : \"Add Puzzle\"}\n \n \n );\n}\n",[],[182,261,263],"99a38126-ca12-44bc-b88f-bc015696ea5b",["D",1782505072423],[195,196],[182,261],"3b06a731-899f-40e0-b822-fb8f63345e17",["D",1782505072423],[194,197,198,199],[182],["D",1782505072423],["D",1789500689328],{"_11":12,"_140":73},{"_11":12,"_135":136,"_72":73,"_30":71,"_137":138,"_139":24},{"_39":123,"_13":16,"_33":36,"_124":84,"_125":63,"_126":127,"_128":88,"_129":130,"_131":132,"_133":14,"_134":12},"ctx",{"_52":-5,"_161":316,"_317":318,"_319":320,"_321":24,"_322":24,"_323":24,"_324":97,"_325":-5,"_326":-7,"_327":-7,"_328":26,"_329":24,"_330":24,"_331":-5,"_332":24,"_333":24,"_334":24,"_335":-5},"ENV",{"_287":288,"_289":290,"_291":16,"_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","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"]

History · index.html