\n \n \n \n",[18,89],"f565f590-44bd-4f06-8fc6-1c4a0893c8d2",["D",1781106751380],"\n",[18,95],"faa95ec1-ef02-4834-a634-2e29540df334",["D",1781106751380],[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":284,"_40":26,"_78":101,"_202":-5,"_80":30,"_203":-5,"_247":285,"_17":286},{"_34":221,"_13":100,"_75":99,"_44":111,"_36":37,"_199":41,"_200":24,"_38":281,"_40":26,"_78":101,"_202":-5,"_80":30,"_203":-5,"_247":282,"_17":283},{"_34":274,"_13":275,"_75":276,"_44":99,"_36":37,"_199":97,"_200":24,"_38":277,"_40":41,"_78":79,"_202":278,"_80":30,"_203":-5,"_247":279,"_17":280},{"_34":266,"_13":267,"_75":268,"_44":99,"_36":37,"_199":269,"_200":24,"_38":270,"_40":26,"_78":79,"_202":271,"_80":30,"_203":-5,"_247":272,"_17":273},{"_34":217,"_13":95,"_75":94,"_44":111,"_36":37,"_199":41,"_200":24,"_38":263,"_40":26,"_78":21,"_202":219,"_80":30,"_203":-5,"_247":264,"_17":265},{"_34":213,"_13":89,"_75":88,"_44":111,"_36":37,"_199":104,"_200":24,"_38":260,"_40":41,"_78":21,"_202":215,"_80":30,"_203":-5,"_247":261,"_17":262},{"_34":209,"_13":77,"_75":76,"_44":111,"_36":37,"_199":41,"_200":24,"_38":257,"_40":26,"_78":79,"_202":211,"_80":30,"_203":-5,"_247":258,"_17":259},{"_34":250,"_13":251,"_75":252,"_44":-5,"_36":37,"_199":148,"_200":24,"_38":253,"_40":41,"_78":21,"_202":254,"_80":30,"_203":-5,"_247":255,"_17":256},{"_34":242,"_13":243,"_75":124,"_44":-5,"_36":37,"_199":41,"_200":24,"_38":244,"_40":26,"_78":245,"_202":246,"_80":30,"_203":-5,"_247":248,"_17":249},"f8c3e8f8-79d4-4271-837a-873b964b6823","index.ts",["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","children",[],[243],"4f193869-0a5b-4b97-940a-619d9f855bae","README.md","019eb23c-37fb-73ad-a5a7-8767a3d51fdf",["D",1781106802166],"# ✖️ 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",[],[251],["D",1781106751380],[],[18,77],["D",1781106792394],[],[18,89],["D",1781106751380],[],[18,95],"69255168-11b3-4e9a-a784-f4a39874416e","Game.tsx","71b7d9ca-64e4-11f1-ac9b-1607ee4eb77e",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",[],[18,100,267],"25f88ad1-abee-48cf-83ba-cffb046d34bd","App.tsx","019eb23c-37fb-73ad-a5a7-695fed738695",["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",[],[18,100,275],["D",1781106751380],[235,236],[18,100],["D",1781106751380],[234,237,238,239],[18],["D",1781106751380],{"_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":324,"_325":326,"_327":328,"_329":30,"_330":30,"_331":30,"_332":24,"_333":-5,"_334":-7,"_335":-7,"_336":26,"_337":30,"_338":30,"_339":-5,"_340":30,"_341":30,"_342":30,"_343":-5},"ENV",{"_295":296,"_297":298,"_299":16,"_300":301,"_302":303,"_304":305,"_306":307,"_308":309,"_310":311,"_312":313,"_314":315,"_316":317,"_318":319,"_320":321,"_322":323},"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"]

History · frontend