[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_295":296,"_297":298},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_73":201,"_40":-7,"_202":-5,"_17":203,"_204":205,"_206":207,"_208":209,"_210":211,"_92":-5,"_212":213,"_214":215,"_216":48,"_217":218,"_219":26,"_220":-5,"_221":-5,"_222":223},"routes/_app.x.$handle.$name.compare.$branch",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":22,"_23":24,"_25":26,"_27":28,"_29":30,"_31":-5},"handle","potluck","name","multiplicationGame","branchName","main","project",{"_32":59,"_13":14,"_34":159,"_46":-5,"_160":48,"_49":50,"_161":50,"_162":163,"_164":165,"_166":167,"_168":169,"_170":48,"_171":-5,"_172":-5,"_173":155,"_53":174,"_175":-5,"_176":-5,"_177":-5,"_178":-5,"_179":180,"_181":180,"_182":183,"_184":183,"_185":183,"_186":180,"_187":180,"_188":189,"_190":191,"_192":28,"_47":48},"ahead",5,"behind",2,"diff",{"_64":65,"_66":67,"_68":69},"hasChanges",true,"sourceBranch",{"_40":57,"_13":16,"_32":58,"_38":59,"_42":33,"_43":60,"_61":50,"_62":39,"_63":54,"_55":14,"_51":12},"targetBranch",{"_32":33,"_34":35,"_36":37,"_13":16,"_38":39,"_40":41,"_42":-5,"_43":-5,"_44":45,"_46":-5,"_47":48,"_49":50,"_51":52,"_53":54,"_55":56},"pull","id","961078ea-f528-11ef-aa68-569c3dd06744","createdAt",["D",1740674013689],"updatedAt",["D",1785420707976],"projectId","96102714-f528-11ef-aa68-569c3dd06744","version",91,"forkedBranchId","forkedBranchVersion","lockfileKey","1785420708123-esm.town_v_templates_react-hono-starter@91-main","deletedAt","isOwned",false,"privacy","public","userHandle","templates","orgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","react-hono-starter",6,"e3f61503-2cea-46be-88e4-79636120b2bd","ac84bd07-3920-4470-bf05-cf01606c2a96",89,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","added",[],"deleted",[147],"modified",[70,71,72],{"_73":131,"_75":132,"_77":133},{"_73":110,"_75":111,"_77":112},{"_73":74,"_75":76,"_77":78},"path","frontend/index.html","targetFile",{"_32":101,"_13":80,"_81":102,"_83":103,"_85":33,"_86":104,"_88":48,"_34":105,"_40":106,"_91":92,"_93":107,"_66":48,"_95":-5,"_96":-7,"_73":108,"_98":109},"sourceFile",{"_32":79,"_13":80,"_81":82,"_83":84,"_85":58,"_86":87,"_88":26,"_34":89,"_40":90,"_91":92,"_93":94,"_66":48,"_95":-5,"_96":-7,"_73":97,"_98":99},"cbdfd829-7e35-498e-b13d-6a601b09ba83","index.html","fileId","019edd23-0ddd-751d-902d-ecf27d71cb60","parentId","019edd23-0ddd-751d-902d-f793b6125cff","branchId","branchVersion",4,"latest",["D",1781826573572],1,"fileType","file","content","\n\n \n \n \n Multiplication Sprint\n \n \n \n \n

\n \n \n \n","label","children",[100,80],"contentHash","222830a27c4722b688e7b071e0e278a2f6cd261cf5ec486a64d17a4b2a01c7b6","frontend","5c059140-3996-11f1-a04c-42b51c65c3df","5404b440-f52b-11ef-99f0-569c3dd06744","a59cbf44-f528-11ef-ae42-569c3dd06744",74,["D",1776345337676],8,"\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n",[100,80],"1ea8b3da4e18d579298229ba24af91b14b14ae02565f57c996f9acaa1f8333bc","frontend/components/App.tsx",{"_32":123,"_13":114,"_81":124,"_83":125,"_85":33,"_86":126,"_88":26,"_34":127,"_40":20,"_91":118,"_93":128,"_66":48,"_95":-5,"_96":-7,"_73":129,"_98":130},{"_32":113,"_13":114,"_81":115,"_83":116,"_85":58,"_86":22,"_88":26,"_34":117,"_40":90,"_91":118,"_93":119,"_66":48,"_95":-5,"_96":-7,"_73":120,"_98":121},"33a6e1a7-f159-4132-94fe-736c5a249f2c","App.tsx","019edd23-0ddd-751d-902d-dc9f843c6e0b","019edd23-0ddd-751d-902d-e5faff4c1807",["D",1781826563947],"script","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\nconst GAME_SECONDS = 60;\nconst randInt = (min: number, max: number) => Math.floor(Math.random() * (max - min + 1)) + min;\nconst newQuestion = () => ({ a: randInt(2, 12), b: randInt(6, 100) });\n\ntype Phase = \"idle\" | \"playing\" | \"done\";\n\nexport function App() {\n const [phase, setPhase] = useState(\"idle\");\n const [timeLeft, setTimeLeft] = useState(GAME_SECONDS);\n const [question, setQuestion] = useState(newQuestion);\n const [answer, setAnswer] = useState(\"\");\n const [correct, setCorrect] = useState(0);\n const [wrong, setWrong] = useState(0);\n const [best, setBest] = useState(0);\n const [flash, setFlash] = useState<\"ok\" | \"no\" | null>(null);\n const inputRef = useRef(null);\n\n useEffect(() => {\n setBest(Number(localStorage.getItem(\"mult-best\") || 0));\n }, []);\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 game ends\n useEffect(() => {\n if (phase === \"done\" && correct > best) {\n setBest(correct);\n localStorage.setItem(\"mult-best\", String(correct));\n }\n }, [phase]);\n\n // Keep the input focused while playing\n useEffect(() => {\n if (phase === \"playing\") inputRef.current?.focus();\n }, [phase, question]);\n\n function start() {\n setCorrect(0);\n setWrong(0);\n setTimeLeft(GAME_SECONDS);\n setAnswer(\"\");\n setQuestion(newQuestion());\n setPhase(\"playing\");\n }\n\n function submit(e: React.FormEvent) {\n e.preventDefault();\n if (answer.trim() === \"\") return;\n const isRight = Number(answer) === question.a * question.b;\n if (isRight) {\n setCorrect((c) => c + 1);\n setFlash(\"ok\");\n } else {\n setWrong((w) => w + 1);\n setFlash(\"no\");\n }\n setTimeout(() => setFlash(null), 250);\n setAnswer(\"\");\n setQuestion(newQuestion());\n }\n\n const pct = (timeLeft / GAME_SECONDS) * 100;\n const flashRing = flash === \"ok\"\n ? \"ring-4 ring-green-400\"\n : flash === \"no\"\n ? \"ring-4 ring-red-400\"\n : \"ring-1 ring-gray-200\";\n\n return (\n

✖️ Multiplication Sprint

\n 60 seconds. As many as you can. a (2–12) × b (6–100).\n

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

Best score: {best}

\n \n Start game\n \n

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

\n ✓ {correct}\n {timeLeft}s\n ✗ {wrong}\n

\n \n

\n\n

\n {question.a} × {question.b}\n

\n\n

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

Time's up!

{correct}

correct answers

\n {wrong} wrong · best: {Math.max(best, correct)}\n

\n \n Play again\n \n

\n )}\n

\n\n

\n View source\n

\n );\n}\n",[100,122,114],"ac62203add6ca231414b4de6a5780a7d8a6f5456099ef50a13751d0a1ded2f79","components","5d7e5e30-3996-11f1-bbdd-42b51c65c3df","6e585892-f52b-11ef-a8e1-569c3dd06744","69ed66bc-f52b-11ef-9dac-569c3dd06744",75,["D",1776345339930],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Counter } from \"./Counter.tsx\";\n\nexport function App() {\n return (\n

React + Hono Starter

\n \n

\n View source\n

\n );\n}\n",[100,122,114],"de0a7e5fc76c6fd6135aff964af1a5835e04e2758b23f3d0c7d9fabffe514df7","README.md",{"_32":140,"_13":131,"_81":141,"_83":-5,"_85":33,"_86":60,"_88":48,"_34":142,"_40":143,"_91":92,"_93":144,"_66":48,"_95":-5,"_96":-7,"_73":145,"_98":146},{"_32":134,"_13":131,"_81":135,"_83":-5,"_85":58,"_86":20,"_88":26,"_34":136,"_40":90,"_91":92,"_93":137,"_66":48,"_95":-5,"_96":-7,"_73":138,"_98":139},"9b8ac34e-59a8-4e18-83a9-78ca8a06697d","019edd23-0ddd-751d-902d-f91222817596",["D",1781826598987],"# Multiplication Sprint ✖️\n\nA 60-second timed multiplication game. Answer as many questions as you can before the clock runs out.\n\n- Each question is `a × b` where **a is 2–12** and **b is 6–100**.\n- Type the answer and press **Enter** — the input flashes green/red and immediately jumps to the next question.\n- Tracks correct/wrong counts, a live timer bar, and your best score (saved in your browser).\n\nBuilt with React + Hono on Val Town.\n",[131],"bdd022ab06a3baf1c41968f891b5ed1714fab3e0efc51e118c9a4cb1c033f750","b9c749c0-59e1-11f1-bb5f-ee650bb23af1","a50c3760-f53e-11ef-bd6d-569c3dd06744",["D",1779896144390],31,"# 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",[131],"aaa4f5cc8e5bd01528335cdd2066e164bf95353ce2fe37c616b3e6406f49331e",{"_73":148,"_75":149,"_77":-7},"frontend/components/Counter.tsx",{"_32":150,"_13":151,"_81":152,"_83":125,"_85":33,"_86":153,"_88":26,"_34":154,"_40":155,"_91":118,"_93":156,"_66":48,"_95":-5,"_96":-7,"_73":157,"_98":158},"57a8cc52-3996-11f1-8db6-42b51c65c3df","Counter.tsx","57a8cd2e-3996-11f1-8db6-42b51c65c3df",73,["D",1776345330366],0,"/** @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",[100,122,151],"10ce4fbd7e41af337e504c3877201698031249b437d941845f0f7cdc52a79e66",["D",1781826522514],"legacyEnvVars","httpPrivacy","description","Starter template with client-side React & Hono server","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789556399&sig=39cf692678889e4858e1d3f239cccdbb768d0b4bdeeecb6f122e7581a8e69c0b","userId","4672fa32-1c6f-4907-899e-57b7e45b1dcb","pinnedFileId","019edd23-0ddd-751d-902d-ffbb8970637b","pinPreview","pinMigrated","screenshotVersion","likeCount","019e83d1-d41f-725b-9693-b632d430a029","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_200":196},"org",{"_11":12,"_193":194,"_195":196,"_166":167,"_197":198,"_199":48},"branch","displayName","Potluck Mittal","avatar","https://lh3.googleusercontent.com/a/ACg8ocJYeiSQ8_eyVYtUAg9f5qRwEXzS1AreFm572a1csvZx7c6b_S8=s96-c","tier","pro","canRestrictVals","profileImageUrl","","adoptOrgId",{"_32":59,"_13":14,"_34":291,"_46":-5,"_160":48,"_49":50,"_161":50,"_162":163,"_164":165,"_166":167,"_168":169,"_170":48,"_171":-5,"_172":-5,"_173":155,"_53":174,"_175":-5,"_176":-5,"_177":-5,"_178":-5,"_179":180,"_181":180,"_182":183,"_184":183,"_185":183,"_186":180,"_187":180,"_188":292,"_190":293,"_192":294,"_47":48},"tree",[253,259,260],"files",[253,254,255,256,257,258,259,260],"counts",{"_243":155,"_244":90,"_245":155,"_246":247,"_248":249},"contents",[228,229,230],"upstreamProject",{"_32":39,"_13":56,"_162":163,"_164":165,"_49":50,"_188":226},"upstreamBranch",{"_32":33,"_34":224,"_36":225,"_13":16,"_38":39,"_40":41,"_42":-5,"_43":-5,"_44":45,"_46":-5,"_47":48,"_49":50,"_51":52,"_53":54,"_55":56},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],["D",1785420707976],{"_11":52,"_200":227},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789556399&sig=d4d039bf60786a03d56ec8a29ec1b19630253aab318e490fcd07a6f24846b070",{"_32":239,"_13":100,"_81":84,"_83":-5,"_85":58,"_86":90,"_88":26,"_34":240,"_40":155,"_91":241,"_93":-5,"_66":48,"_95":-5,"_73":242},{"_32":134,"_13":131,"_81":135,"_83":-5,"_85":58,"_86":20,"_88":26,"_34":237,"_40":90,"_91":92,"_93":137,"_66":48,"_95":-5,"_73":238},{"_32":231,"_13":232,"_81":169,"_83":-5,"_85":58,"_86":90,"_88":26,"_34":233,"_40":155,"_91":234,"_93":235,"_66":48,"_95":-5,"_73":236},"f10b28b4-ad06-402a-b617-b982295e6741","index.ts",["D",1781826522514],"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",[232],["D",1781826598987],[131],"b91c0775-fa0d-4e91-80d2-a8ee161b6aa9",["D",1781826522514],"directory",[100],"pulls","branches","forks","envVars",{"_250":155,"_252":155},"connections",{"_250":155,"_251":155},"count","unfilledCount","emptyCount",{"_32":239,"_13":100,"_81":84,"_83":-5,"_85":58,"_86":90,"_88":26,"_34":288,"_40":155,"_91":241,"_93":-5,"_66":48,"_95":-5,"_96":289,"_73":290},{"_32":284,"_13":122,"_81":116,"_83":84,"_85":58,"_86":90,"_88":26,"_34":285,"_40":155,"_91":241,"_93":-5,"_66":48,"_95":-5,"_96":286,"_73":287},{"_32":113,"_13":114,"_81":115,"_83":116,"_85":58,"_86":22,"_88":26,"_34":117,"_40":90,"_91":118,"_93":119,"_66":48,"_95":-5,"_96":282,"_73":283},{"_32":275,"_13":276,"_81":277,"_83":84,"_85":58,"_86":90,"_88":26,"_34":278,"_40":155,"_91":92,"_93":279,"_66":48,"_95":-5,"_96":280,"_73":281},{"_32":79,"_13":80,"_81":82,"_83":84,"_85":58,"_86":87,"_88":26,"_34":89,"_40":90,"_91":92,"_93":94,"_66":48,"_95":-5,"_96":273,"_73":274},{"_32":266,"_13":267,"_81":268,"_83":84,"_85":58,"_86":57,"_88":26,"_34":269,"_40":90,"_91":118,"_93":270,"_66":48,"_95":-5,"_96":271,"_73":272},{"_32":134,"_13":131,"_81":135,"_83":-5,"_85":58,"_86":20,"_88":26,"_34":136,"_40":90,"_91":92,"_93":137,"_66":48,"_95":-5,"_96":264,"_73":265},{"_32":231,"_13":232,"_81":169,"_83":-5,"_85":58,"_86":90,"_88":26,"_34":261,"_40":155,"_91":234,"_93":235,"_66":48,"_95":-5,"_96":262,"_73":263},["D",1781826522514],[],[232],[],[131],"b06b2c01-7aff-4ff6-aeff-7c92980ed9fa","index.tsx","019edd23-0ddd-751d-902d-f0b20c21ca3b",["D",1782246359319],"/** @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();",[],[100,267],[],[100,80],"9d74c19a-8103-4a7c-8fe7-18861e8f3af2","favicon.svg","019edd23-0ddd-751d-902d-ea6c71a577ca",["D",1781826522514],"\n",[],[100,276],[],[100,122,114],"3fccb2b9-cc23-4381-a4b7-107f05e9dd4b",["D",1781826522514],[255],[100,122],["D",1781826522514],[254,256,257,258],[100],["D",1781826522514],{"_11":12,"_200":196},{"_11":12,"_193":194,"_195":196,"_166":167,"_197":198,"_199":48},{"_40":57,"_13":16,"_32":58,"_38":59,"_42":33,"_43":60,"_61":50,"_62":39,"_63":54,"_55":14,"_51":12},"ctx",{"_188":-5,"_221":328,"_329":330,"_331":332,"_333":48,"_334":48,"_335":48,"_336":26,"_337":-5,"_338":-7,"_339":-7,"_340":155,"_341":48,"_342":48,"_343":-5,"_344":48,"_345":48,"_346":48,"_347":-5},"ENV",{"_299":300,"_301":302,"_303":16,"_304":305,"_306":307,"_308":309,"_310":311,"_312":313,"_314":315,"_316":317,"_318":319,"_320":321,"_322":323,"_324":325,"_326":327},"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"]

Compare

Mergepotluck/mainintotemplates/main

README.md+6-60

frontend/components/App.tsx+153-7

frontend/index.html+1-1

frontend/components/Counter.tsx+0-18