\n \n \n \n\n",[18,89],"399846a8-a0da-46be-94cc-5b409f10eb63",["D",1781103985091],"\n",[18,95],"70742e7c-abd6-4e06-ab13-4603f919522c",["D",1781103985091],[18,100],"pulls","branches","forks","envVars",{"_96":26,"_232":26},"connections",{"_96":26,"_231":26},"unfilledCount","emptyCount",{"_34":198,"_13":18,"_75":111,"_44":-5,"_36":37,"_199":41,"_200":24,"_38":313,"_40":26,"_78":101,"_202":-5,"_80":30,"_203":-5,"_250":314,"_17":315},{"_34":221,"_13":100,"_75":99,"_44":111,"_36":37,"_199":41,"_200":24,"_38":310,"_40":26,"_78":101,"_202":-5,"_80":30,"_203":-5,"_250":311,"_17":312},{"_34":302,"_13":303,"_75":304,"_44":99,"_36":37,"_199":305,"_200":24,"_38":306,"_40":41,"_78":79,"_202":307,"_80":30,"_203":-5,"_250":308,"_17":309},{"_34":294,"_13":295,"_75":296,"_44":99,"_36":37,"_199":297,"_200":24,"_38":298,"_40":26,"_78":79,"_202":299,"_80":30,"_203":-5,"_250":300,"_17":301},{"_34":286,"_13":287,"_75":288,"_44":99,"_36":37,"_199":289,"_200":24,"_38":290,"_40":26,"_78":79,"_202":291,"_80":30,"_203":-5,"_250":292,"_17":293},{"_34":217,"_13":95,"_75":94,"_44":111,"_36":37,"_199":41,"_200":24,"_38":283,"_40":26,"_78":21,"_202":219,"_80":30,"_203":-5,"_250":284,"_17":285},{"_34":213,"_13":89,"_75":88,"_44":111,"_36":37,"_199":104,"_200":24,"_38":280,"_40":41,"_78":21,"_202":215,"_80":30,"_203":-5,"_250":281,"_17":282},{"_34":209,"_13":77,"_75":76,"_44":111,"_36":37,"_199":41,"_200":24,"_38":277,"_40":26,"_78":79,"_202":211,"_80":30,"_203":-5,"_250":278,"_17":279},{"_34":270,"_13":271,"_75":272,"_44":-5,"_36":37,"_199":148,"_200":24,"_38":273,"_40":41,"_78":21,"_202":274,"_80":30,"_203":-5,"_250":275,"_17":276},{"_34":262,"_13":263,"_75":264,"_44":-5,"_36":37,"_199":265,"_200":24,"_38":266,"_40":26,"_78":79,"_202":267,"_80":30,"_203":-5,"_250":268,"_17":269},{"_34":253,"_13":254,"_75":124,"_44":-5,"_36":37,"_199":255,"_200":24,"_38":256,"_40":257,"_78":258,"_202":259,"_80":30,"_203":-5,"_250":260,"_17":261},{"_34":245,"_13":246,"_75":247,"_44":-5,"_36":37,"_199":97,"_200":24,"_38":248,"_40":41,"_78":79,"_202":249,"_80":30,"_203":-5,"_250":251,"_17":252},"9890de2d-2277-4baf-814b-066a23c98416","puzzle.ts","09a06a24-64de-11f1-a158-1607ee4eb77e",["D",1781104028629],"// Puzzle generation + checking, shared types.\n\nexport type Tile =\n | { kind: \"space\" }\n | { kind: \"letter\"; char: string; revealed: boolean };\n\nexport interface Puzzle {\n // The board, as rows of words. Each word is an array of tiles.\n words: Tile[][];\n // Opaque token holding the answer (base64). Sent to the client so we stay\n // stateless; checked server-side on guess.\n token: string;\n // How many letters were revealed, for display.\n revealedCount: number;\n totalLetters: number;\n}\n\nconst REVEAL_FRACTION = 0.3;\n\nfunction encodeToken(answer: string): string {\n return btoa(unescape(encodeURIComponent(answer.toLowerCase())));\n}\n\nexport function decodeToken(token: string): string {\n try {\n return decodeURIComponent(escape(atob(token)));\n } catch {\n return \"\";\n }\n}\n\n// Build a puzzle from a phrase, revealing ~30% of its letters at random.\nexport function buildPuzzle(phrase: string): Puzzle {\n const letterPositions: number[] = [];\n for (let i = 0; i < phrase.length; i++) {\n if (/[a-z]/i.test(phrase[i])) letterPositions.push(i);\n }\n\n const totalLetters = letterPositions.length;\n // Reveal at least 1 letter, but never the whole phrase.\n const target = Math.max(1, Math.round(totalLetters * REVEAL_FRACTION));\n const toReveal = Math.min(target, Math.max(1, totalLetters - 1));\n\n // Shuffle positions and pick the first `toReveal`.\n const shuffled = [...letterPositions];\n for (let i = shuffled.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];\n }\n const revealedSet = new Set(shuffled.slice(0, toReveal));\n\n // Walk the phrase, splitting into words and assigning tiles.\n const result: Tile[][] = [];\n let current: Tile[] = [];\n for (let i = 0; i < phrase.length; i++) {\n const ch = phrase[i];\n if (ch === \" \") {\n result.push(current);\n current = [];\n continue;\n }\n current.push({\n kind: \"letter\",\n char: ch,\n revealed: revealedSet.has(i),\n });\n }\n result.push(current);\n\n return {\n words: result,\n token: encodeToken(phrase),\n revealedCount: toReveal,\n totalLetters,\n };\n}\n\n// Normalize for comparison: lowercase, collapse whitespace, strip punctuation.\nfunction normalize(s: string): string {\n return s\n .toLowerCase()\n .replace(/[^a-z0-9\\s]/g, \"\")\n .replace(/\\s+/g, \" \")\n .trim();\n}\n\nexport function checkGuess(token: string, guess: string): boolean {\n const answer = decodeToken(token);\n if (!answer) return false;\n return normalize(answer) === normalize(guess);\n}\n","children",[],[246],"8aeb00d8-a51c-4eee-967e-201f423cacfc","index.ts",7,["D",1781104050314],3,"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { pickRandomIdiom } from \"./idioms.ts\";\nimport { buildPuzzle, checkGuess, decodeToken } from \"./puzzle.ts\";\n\nconst app = new Hono();\n\n// Serve index.html at the root /\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\n\n// View source redirect\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Start a new round: pick a random idiom and return a masked puzzle.\napp.get(\"/api/new\", (c) => {\n const phrase = pickRandomIdiom();\n return c.json(buildPuzzle(phrase));\n});\n\n// Check a guess against the puzzle token (case-insensitive). This is a\n// one-turn game, so the round ends either way and we reveal the answer.\napp.post(\"/api/guess\", async (c) => {\n const { token, guess } = await c.req.json<{ token: string; guess: string }>();\n const correct = checkGuess(token ?? \"\", guess ?? \"\");\n return c.json({ correct, answer: decodeToken(token ?? \"\") });\n});\n\n// Unwrap and rethrow Hono errors as the original error\napp.onError((err) => Promise.reject(err));\n\n// HTTP vals expect an exported \"fetch handler\"\nexport default app.fetch;\n",[],[254],"bfe8a4df-9758-4d17-9572-afdb6b99ff29","idioms.ts","fc56e316-64dd-11f1-a47a-1607ee4eb77e",2,["D",1781104000919],"// A collection of well-known three-word idioms / phrases.\nexport const IDIOMS: string[] = [\n \"piece of cake\",\n \"break a leg\",\n \"bite the bullet\",\n \"hit the hay\",\n \"spill the beans\",\n \"under the weather\",\n \"cost an arm\",\n \"barking up tree\",\n \"call it quits\",\n \"burn the midnight\",\n \"kill two birds\",\n \"let the cat\",\n \"once in blue\",\n \"out of hand\",\n \"raining cats dogs\",\n \"speak of devil\",\n \"the whole nine\",\n \"back to square\",\n \"best of both\",\n \"cut to chase\",\n \"down to earth\",\n \"easy as pie\",\n \"go the distance\",\n \"hang in there\",\n \"jump the gun\",\n \"keep your chin\",\n \"miss the boat\",\n \"no pain gain\",\n \"on the fence\",\n \"pull your weight\",\n \"rule of thumb\",\n \"see eye eye\",\n \"take it easy\",\n \"throw in towel\",\n \"up in air\",\n \"wrap your head\",\n \"a blessing disguise\",\n \"actions speak louder\",\n \"all ears now\",\n \"beat around bush\",\n];\n\nexport function pickRandomIdiom(): string {\n return IDIOMS[Math.floor(Math.random() * IDIOMS.length)];\n}\n",[],[263],"5bbb0cfd-3c6c-4182-9cef-2279115f1494","README.md","019eb212-024b-76cb-b6de-b726652702d0",["D",1781104150489],"# 🎡 Idiom Wheel\n\nA Wheel of Fortune–style, **one-turn** idiom guessing game. Each round picks a\nrandom three-word phrase, reveals about **30% of its letters**, and hides the\nrest as blank tiles. You get a single guess (case-insensitive) — then the answer\nis revealed and you can play again.\n\n## How to play\n\n1. A random three-word idiom is loaded with ~30% of letters showing.\n2. Type the full phrase and hit **Guess**.\n3. Right or wrong, the answer is shown. Hit **Play again** for a fresh round.\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"GET /\"| Hono[\"index.ts
(Hono server)\"]\n Hono -->|serves| HTML[\"frontend/index.html\"]\n HTML --> Game[\"Game.tsx\"]\n Game -->|\"GET /api/new\"| Hono\n Game -->|\"POST /api/guess\"| Hono\n Hono --> Puzzle[\"puzzle.ts
(mask + check)\"]\n Hono --> Idioms[\"idioms.ts
(phrase list)\"]\n Game --> Board[\"Board.tsx
(letter tiles)\"]\n```\n\n## File structure\n\n```\nindex.ts ← Hono backend: serves frontend + /api routes\nidioms.ts ← The list of three-word phrases\npuzzle.ts ← Puzzle generation (~30% reveal) + guess checking\nfrontend/\n index.html ← HTML shell (Twind + React)\n index.tsx ← React entrypoint\n components/\n App.tsx ← Root layout\n Game.tsx ← Game state, input, result, \"play again\"\n Board.tsx ← Renders the revealed/blank letter tiles\n```\n\n## How it works\n\n- **`/api/new`** picks a random phrase, reveals ~30% of its letters, and returns\n the masked board plus an opaque base64 `token` of the answer. The full answer\n is never sent in plaintext until the round ends.\n- **`/api/guess`** decodes the token server-side and compares it to the player's\n guess after normalizing (lowercase, collapse whitespace, strip punctuation),\n so matching is case-insensitive and forgiving.\n\n## Customizing\n\nAdd or edit phrases in [`idioms.ts`](/idioms.ts). Tweak the reveal percentage via\n`REVEAL_FRACTION` in [`puzzle.ts`](/puzzle.ts).\n",[],[271],["D",1781103985091],[],[18,77],["D",1781104117669],[],[18,89],["D",1781103985091],[],[18,95],"2d1e3f13-93d8-48d1-a735-2d950b30fe16","Game.tsx","2f8c3a42-64de-11f1-a055-1607ee4eb77e",9,["D",1781104086832],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport type { Puzzle } from \"../../puzzle.ts\";\nimport { Board } from \"./Board.tsx\";\n\ntype Result = { correct: boolean; answer: string } | null;\n\nexport function Game() {\n const [puzzle, setPuzzle] = useState(null);\n const [guess, setGuess] = useState(\"\");\n const [result, setResult] = useState(null);\n const [loading, setLoading] = useState(true);\n const [submitting, setSubmitting] = useState(false);\n\n async function newRound() {\n setLoading(true);\n setResult(null);\n setGuess(\"\");\n const res = await fetch(\"/api/new\");\n setPuzzle(await res.json());\n setLoading(false);\n }\n\n useEffect(() => {\n newRound();\n }, []);\n\n async function submitGuess(e: React.FormEvent) {\n e.preventDefault();\n if (!puzzle || !guess.trim() || result || submitting) return;\n setSubmitting(true);\n const res = await fetch(\"/api/guess\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ token: puzzle.token, guess }),\n });\n setResult(await res.json());\n setSubmitting(false);\n }\n\n return (\n

\n 🎡 Idiom Wheel\n

\n Guess the three-word phrase. You get{\" \"}\n one guess — good luck!\n

\n\n

\n {loading || !puzzle\n ? (\n

\n Spinning the wheel…\n

\n )\n : (\n <>\n \n\n

\n {puzzle.revealedCount} of {puzzle.totalLetters} letters revealed\n

\n\n {!result\n ? (\n

\n setGuess(e.target.value)}\n placeholder=\"Type the full phrase…\"\n class=\"flex-1 px-4 py-3 rounded-lg text-lg text-gray-800 outline-none focus:ring-4 focus:ring-amber-300\"\n />\n \n {submitting ? \"…\" : \"Guess\"}\n \n \n )\n : (\n

\n \n {result.correct ? \"🎉 Correct!\" : \"❌ Not quite!\"}\n

\n The phrase was{\" \"}\n \n {result.answer}\n \n

\n \n Play again →\n \n

\n )}\n \n )}\n

\n\n

\n View source\n

\n \n );\n}\n",[],[18,100,287],"dcb72e75-b855-45a2-9cd7-6605be0cbb78","Board.tsx","1f7d2b34-64de-11f1-84a1-1607ee4eb77e",8,["D",1781104059889],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport type { Tile } from \"../../puzzle.ts\";\n\nexport function Board({ words }: { words: Tile[][] }) {\n return (\n

\n {words.map((word, wi) => (\n

\n {word.map((tile, ti) => {\n if (tile.kind !== \"letter\") return null;\n const shown = tile.revealed ? tile.char.toUpperCase() : \"\";\n return (\n \n {shown}\n

\n );\n })}\n

\n ))}\n \n );\n}\n",[],[18,100,295],"83750a58-31a8-4a1c-ba83-a857cc986e26","App.tsx","019eb212-024b-76cb-b6de-98c8e8354317",10,["D",1781104101312],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Game } from \"./Game.tsx\";\n\nexport function App() {\n return (\n

\n \n

\n );\n}\n",[],[18,100,303],["D",1781103985091],[235,236,237],[18,100],["D",1781103985091],[234,238,239,240],[18],["D",1781103985091],{"_11":12,"_165":83},{"_11":12,"_160":161,"_82":83,"_31":81,"_162":163,"_164":30},{"_40":148,"_13":16,"_34":37,"_149":113,"_150":72,"_151":152,"_153":117,"_154":155,"_156":157,"_158":14,"_159":12},"ctx",{"_53":-5,"_186":353,"_354":355,"_356":357,"_358":30,"_359":30,"_360":30,"_361":24,"_362":-5,"_363":-7,"_364":-7,"_365":26,"_366":30,"_367":30,"_368":-5,"_369":30,"_370":30,"_371":30,"_372":-5},"ENV",{"_324":325,"_326":327,"_328":16,"_329":330,"_331":332,"_333":334,"_335":336,"_337":338,"_339":340,"_341":342,"_343":344,"_345":346,"_347":348,"_349":350,"_351":352},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","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 · frontend