[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_249":250,"_251":252},"routes/_app.x.$handle.$name",{"_106":105,"_38":50,"_115":92,"_33":116,"_13":14,"_117":-5,"_11":118,"_119":120,"_121":122,"_123":124,"_125":126,"_26":-5,"_127":128,"_129":130,"_131":31,"_132":133,"_134":65,"_135":-5,"_136":-5,"_137":138},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_48":49,"_38":50,"_43":51,"_52":-5,"_53":31,"_54":55,"_56":55,"_57":58,"_59":60,"_19":61,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":-5,"_73":-5,"_74":-5,"_75":-5,"_76":77,"_78":77,"_79":80,"_81":80,"_82":80,"_83":77,"_84":77,"_85":86,"_87":88,"_89":90,"_91":31},"version",6,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","c7016c52-ad97-468e-a7fb-979194f2628e","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":29,"_30":31,"_32":31,"_33":34,"_35":34},"file",{"_36":37,"_38":34,"_39":26,"_40":42,"_43":44,"_45":14,"_46":47,"_30":31},"previous",{"_36":37,"_38":34,"_39":26,"_40":41},"deleted",false,"deletedHere","path","README.md","latestPath","fileId","019eb23c-37fb-73ad-a5a7-8767a3d51fdf","name","fileType","content","# 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","# ✖️ Multiplication Sprint\n\nA one-minute multiplication drill. You get random problems `a × b` where\n`a` is **2–12** and `b` is **6–99**, and you race to solve as many as you can\nbefore the 60-second timer runs out.\n\n- Type your answer and press **Enter** to submit\n- Correct → next problem instantly; wrong → quick red flash, try again\n- Your best score is saved in the browser (`localStorage`)\n\nBuilt on the `react-hono-starter` template. The whole game is client-side React\nin [`frontend/components/Game.tsx`](/frontend/components/Game.tsx) — the Hono\nserver in [`index.ts`](/index.ts) just serves the static frontend.\n\n## How it works\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| Game[\"Game.tsx
(timer + scoring)\"]\n```\n\n## Tweak it\n\n- **Round length** / **number ranges**: edit the constants and `newProblem()`\n at the top of `frontend/components/Game.tsx`.\n","createdAt",["D",1781106802166],"branchVersion","branchId","4374a439-4fcd-45b3-a839-1be0505bf0d2","id","8638ed96-26d8-4a4f-8271-6168d47b5bbf","zetamac-june10-a",["D",1781106751380],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Starter template with client-side React & Hono server","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789559999&sig=919739a563bb9acb90fc6bc4f6c1789207958a7e1bd397d82b192d76e7e11de2","4672fa32-1c6f-4907-899e-57b7e45b1dcb","pinnedFileId","019eb23c-37fb-73ad-a5a7-8b3f9994d191","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019e83d1-d41f-725b-9693-b632d430a029","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_106":105,"_114":110},"org",{"_106":105,"_107":108,"_109":110,"_19":61,"_111":112,"_113":31},"branch",{"_13":14,"_38":92,"_48":47,"_93":49,"_94":95,"_96":97,"_98":55,"_99":100,"_101":102,"_103":50,"_104":105},"isOwned","main","projectId","forkedBranchId","961078ea-f528-11ef-aa68-569c3dd06744","forkedBranchVersion",89,"forkedProjectPrivacy","forkedProjectId","96102714-f528-11ef-aa68-569c3dd06744","forkedProjectOrgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","userHandle","potluck","handle","displayName","Potluck Mittal","avatar","https://lh3.googleusercontent.com/a/ACg8ocJYeiSQ8_eyVYtUAg9f5qRwEXzS1AreFm572a1csvZx7c6b_S8=s96-c","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_48":49,"_38":50,"_43":245,"_52":-5,"_53":31,"_54":55,"_56":55,"_57":58,"_59":60,"_19":61,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":-5,"_73":-5,"_74":-5,"_75":-5,"_76":77,"_78":77,"_79":80,"_81":80,"_82":80,"_83":77,"_84":77,"_85":246,"_87":247,"_89":248,"_91":31},"tree",[181,188,189],"files",[181,182,183,184,185,186,187,188,189],"counts",{"_171":69,"_172":155,"_173":69,"_174":175,"_176":177},"contents",[149,150,151],"upstreamProject",{"_48":100,"_38":146,"_57":58,"_59":60,"_54":55,"_85":147},"upstreamBranch",{"_48":95,"_43":139,"_140":141,"_38":92,"_93":100,"_13":142,"_94":-5,"_96":-5,"_143":144,"_52":-5,"_91":31,"_54":55,"_104":145,"_70":102,"_103":146},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],"updatedAt",["D",1785420707976],91,"lockfileKey","1785420708123-esm.town_v_templates_react-hono-starter@91-main","templates","react-hono-starter",{"_106":145,"_114":148},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789559999&sig=5c07b77d973a9a7831cc1779f4bd4ec152796753863d0aeae4088e1e0ae03921",{"_48":165,"_38":166,"_36":167,"_154":-5,"_46":47,"_45":155,"_156":65,"_43":168,"_13":69,"_39":169,"_40":-5,"_30":31,"_160":-5,"_33":170},{"_48":162,"_38":34,"_36":37,"_154":-5,"_46":47,"_45":14,"_156":65,"_43":163,"_13":155,"_39":26,"_40":42,"_30":31,"_160":-5,"_33":164},{"_48":152,"_38":153,"_36":63,"_154":-5,"_46":47,"_45":155,"_156":65,"_43":157,"_13":69,"_39":158,"_40":159,"_30":31,"_160":-5,"_33":161},"f8c3e8f8-79d4-4271-837a-873b964b6823","index.ts","parentId",1,"latest",["D",1781106751380],"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\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// Add your API routes here\n// app.get(\"/api/data\", c => c.json({ hello: \"world\" }));\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err) => Promise.reject(err));\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;\n","label",[153],"4f193869-0a5b-4b97-940a-619d9f855bae",["D",1781106802166],[34],"d8f2204c-b685-4239-96ce-2509fddc4c14","frontend","019eb23c-37fb-73ad-a5a7-8077a9afe54e",["D",1781106751380],"directory",[166],"pulls","branches","forks","envVars",{"_178":69,"_180":69},"connections",{"_178":69,"_179":69},"count","unfilledCount","emptyCount",{"_48":165,"_38":166,"_36":167,"_154":-5,"_46":47,"_45":155,"_156":65,"_43":242,"_13":69,"_39":169,"_40":-5,"_30":31,"_160":-5,"_191":243,"_33":244},{"_48":238,"_38":229,"_36":223,"_154":167,"_46":47,"_45":155,"_156":65,"_43":239,"_13":69,"_39":169,"_40":-5,"_30":31,"_160":-5,"_191":240,"_33":241},{"_48":230,"_38":231,"_36":232,"_154":223,"_46":47,"_45":233,"_156":65,"_43":234,"_13":155,"_39":201,"_40":235,"_30":31,"_160":-5,"_191":236,"_33":237},{"_48":220,"_38":221,"_36":222,"_154":223,"_46":47,"_45":224,"_156":65,"_43":225,"_13":69,"_39":201,"_40":226,"_30":31,"_160":-5,"_191":227,"_33":228},{"_48":213,"_38":214,"_36":215,"_154":167,"_46":47,"_45":155,"_156":65,"_43":216,"_13":69,"_39":26,"_40":217,"_30":31,"_160":-5,"_191":218,"_33":219},{"_48":205,"_38":206,"_36":207,"_154":167,"_46":47,"_45":208,"_156":65,"_43":209,"_13":155,"_39":26,"_40":210,"_30":31,"_160":-5,"_191":211,"_33":212},{"_48":197,"_38":198,"_36":199,"_154":167,"_46":47,"_45":155,"_156":65,"_43":200,"_13":69,"_39":201,"_40":202,"_30":31,"_160":-5,"_191":203,"_33":204},{"_48":162,"_38":34,"_36":37,"_154":-5,"_46":47,"_45":14,"_156":65,"_43":194,"_13":155,"_39":26,"_40":42,"_30":31,"_160":-5,"_191":195,"_33":196},{"_48":152,"_38":153,"_36":63,"_154":-5,"_46":47,"_45":155,"_156":65,"_43":190,"_13":69,"_39":158,"_40":159,"_30":31,"_160":-5,"_191":192,"_33":193},["D",1781106751380],"children",[],[153],["D",1781106802166],[],[34],"c9a9bb5d-5cc3-41eb-8a2f-747d5598295f","index.tsx","019eb23c-37fb-73ad-a5a7-7dc2b20d78b8",["D",1781106751380],"script","/** @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();",[],[166,198],"ea728a8e-2a58-4aa4-9904-a67761308659","index.html","019eb23c-37fb-73ad-a5a7-7a7633a3be74",5,["D",1781106792394],"\n\n \n \n \n Multiplication Sprint\n \n \n \n \n

\n \n \n \n",[],[166,206],"f565f590-44bd-4f06-8fc6-1c4a0893c8d2","favicon.svg","019eb23c-37fb-73ad-a5a7-765a3a3b394a",["D",1781106751380],"\n",[],[166,214],"69255168-11b3-4e9a-a784-f4a39874416e","Game.tsx","71b7d9ca-64e4-11f1-ac9b-1607ee4eb77e","019eb23c-37fb-73ad-a5a7-71f8b4d41acd",2,["D",1781106774827],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\nconst ROUND_SECONDS = 60;\n\n// a is 2-12, b is 6-99\nfunction randInt(min: number, max: number) {\n return Math.floor(Math.random() * (max - min + 1)) + min;\n}\n\nfunction newProblem() {\n return { a: randInt(2, 12), b: randInt(6, 99) };\n}\n\ntype Phase = \"idle\" | \"playing\" | \"done\";\n\nexport function Game() {\n const [phase, setPhase] = useState(\"idle\");\n const [timeLeft, setTimeLeft] = useState(ROUND_SECONDS);\n const [problem, setProblem] = useState(newProblem);\n const [answer, setAnswer] = useState(\"\");\n const [solved, setSolved] = useState(0);\n const [misses, setMisses] = useState(0);\n const [best, setBest] = useState(() => {\n const v = Number(localStorage.getItem(\"mult-best\") ?? \"0\");\n return Number.isFinite(v) ? v : 0;\n });\n const [flash, setFlash] = useState<\"\" | \"wrong\">(\"\");\n const inputRef = useRef(null);\n\n // Countdown timer\n useEffect(() => {\n if (phase !== \"playing\") return;\n if (timeLeft <= 0) {\n setPhase(\"done\");\n return;\n }\n const id = setTimeout(() => setTimeLeft((t) => t - 1), 1000);\n return () => clearTimeout(id);\n }, [phase, timeLeft]);\n\n // Save best score when a round ends\n useEffect(() => {\n if (phase !== \"done\") return;\n if (solved > best) {\n setBest(solved);\n localStorage.setItem(\"mult-best\", String(solved));\n }\n }, [phase]);\n\n // Keep focus on the input while playing\n useEffect(() => {\n if (phase === \"playing\") inputRef.current?.focus();\n }, [phase, problem]);\n\n function start() {\n setSolved(0);\n setMisses(0);\n setAnswer(\"\");\n setTimeLeft(ROUND_SECONDS);\n setProblem(newProblem());\n setPhase(\"playing\");\n }\n\n function submit(e: React.FormEvent) {\n e.preventDefault();\n if (phase !== \"playing\") return;\n const guess = Number(answer.trim());\n if (!Number.isFinite(guess) || answer.trim() === \"\") return;\n if (guess === problem.a * problem.b) {\n setSolved((s) => s + 1);\n setProblem(newProblem());\n setAnswer(\"\");\n } else {\n setMisses((m) => m + 1);\n setAnswer(\"\");\n setFlash(\"wrong\");\n setTimeout(() => setFlash(\"\"), 250);\n }\n }\n\n const progress = (timeLeft / ROUND_SECONDS) * 100;\n\n return (\n

\n {/* Stats bar */}\n

\n Solved {solved}\n

\n Best {best}\n

\n Time {timeLeft}s\n

\n\n {/* Timer bar */}\n

\n \n

\n\n {phase === \"idle\" && (\n

\n Solve as many problems as you can in {ROUND_SECONDS} seconds.\n

\n \n Start\n \n

\n )}\n\n {phase === \"playing\" && (\n

\n setAnswer((e.target as HTMLInputElement).value)}\n class=\"w-48 text-center text-3xl font-semibold border-2 border-gray-200 focus:border-blue-500 rounded-xl py-3 outline-none tabular-nums\"\n placeholder=\"?\"\n autoComplete=\"off\"\n />\n

Press Enter to submit

\n \n )}\n\n {phase === \"done\" && (\n

Time's up!

{solved}

\n problem{solved === 1 ? \"\" : \"s\"} solved in {ROUND_SECONDS} seconds\n

\n {misses} wrong {misses === 1 ? \"answer\" : \"answers\"} · best {best}\n

\n \n Play again\n \n

\n )}\n \n );\n}\n",[],[166,229,221],"components","25f88ad1-abee-48cf-83ba-cffb046d34bd","App.tsx","019eb23c-37fb-73ad-a5a7-695fed738695",4,["D",1781106786763],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Game } from \"./Game.tsx\";\n\nexport function App() {\n return (\n

✖️ Multiplication Sprint

\n How many can you solve in a minute?\n

\n \n

\n View source\n

\n );\n}\n",[],[166,229,231],"faa95ec1-ef02-4834-a634-2e29540df334",["D",1781106751380],[183,184],[166,229],["D",1781106751380],[182,185,186,187],[166],["D",1781106751380],{"_106":105,"_114":110},{"_106":105,"_107":108,"_109":110,"_19":61,"_111":112,"_113":31},{"_13":14,"_38":92,"_48":47,"_93":49,"_94":95,"_96":97,"_98":55,"_99":100,"_101":102,"_103":50,"_104":105},"ctx",{"_85":-5,"_136":282,"_283":284,"_285":286,"_287":31,"_288":31,"_289":31,"_290":65,"_291":-5,"_292":-7,"_293":-7,"_294":69,"_295":31,"_296":31,"_297":-5,"_298":31,"_299":31,"_300":31,"_301":-5},"ENV",{"_253":254,"_255":256,"_257":92,"_258":259,"_260":261,"_262":263,"_264":265,"_266":267,"_268":269,"_270":271,"_272":273,"_274":275,"_276":277,"_278":279,"_280":281},"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"]

Diff · v6