[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_110":111,"_112":113},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","potluck","name","multiplier-22","path","frontend/components/App.tsx","project",{"_22":49,"_11":12,"_35":50,"_51":-5,"_52":44,"_53":54,"_55":54,"_56":57,"_58":-5,"_59":60,"_61":62,"_63":34,"_64":-5,"_65":-5,"_66":67,"_68":69,"_70":71,"_72":73,"_74":75,"_76":-5,"_77":78,"_79":78,"_80":81,"_82":81,"_83":81,"_84":78,"_85":78,"_86":87,"_88":89,"_90":91,"_92":44},"file",{"_22":23,"_11":24,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":-5,"_13":46},"permalink","https://www.val.town/x/potluck/multiplier-22/code/frontend/components/App.tsx","extension","id","53d9057c-d63d-4cfb-b4bc-296060b91a8b","App.tsx","fileId","01a0a3dc-c647-7481-bcdc-3e510aef1ed2","parentId","01a0a3dc-c647-7481-bcdc-45a7216685b6","branchId","e0f80498-67e9-4f35-aca0-9591bdedc657","branchVersion",24,"latest",true,"createdAt",["D",1789515585534],"version",12,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { Leaderboard, type ScoreRow } from \"./Leaderboard.tsx\";\nimport { Flashcards } from \"./Flashcards.tsx\";\n\nconst ROUND_MS = 30_000;\nconst NAME_KEY = \"multiplier22.name\";\n// Answers run 10×22=220 to 99×22=2178, so never more than four digits.\nconst ANSWER_MAX_DIGITS = 4;\n\ntype Phase = \"idle\" | \"playing\" | \"done\";\ntype Mode = \"play\" | \"practice\";\n\nfunction randomTwoDigit(exclude?: number): number {\n let n = 10 + Math.floor(Math.random() * 90);\n while (n === exclude) n = 10 + Math.floor(Math.random() * 90);\n return n;\n}\n\nexport function App() {\n const [mode, setMode] = useState(\"play\");\n const [name, setName] = useState(\"\");\n const [phase, setPhase] = useState(\"idle\");\n const [n, setN] = useState(() => randomTwoDigit());\n const [typed, setTyped] = useState(\"\");\n const [score, setScore] = useState(0);\n const [msLeft, setMsLeft] = useState(ROUND_MS);\n const [top, setTop] = useState(null);\n const [saveError, setSaveError] = useState(null);\n\n const inputRef = useRef(null);\n const scoreRef = useRef(0);\n\n // Remember the player's name between rounds.\n useEffect(() => {\n try {\n setName(localStorage.getItem(NAME_KEY) ?? \"\");\n } catch { /* private mode */ }\n }, []);\n\n useEffect(() => {\n fetch(\"/api/scores\")\n .then((r) => r.json())\n .then((d) => setTop(d.top))\n .catch(() => setTop([]));\n }, []);\n\n // The clock. Driven off a wall-clock deadline so a throttled tab can't gain time.\n useEffect(() => {\n if (phase !== \"playing\") return;\n const deadline = Date.now() + ROUND_MS;\n let raf = 0;\n const tick = () => {\n const left = deadline - Date.now();\n if (left <= 0) {\n setMsLeft(0);\n setPhase(\"done\");\n return;\n }\n setMsLeft(left);\n raf = requestAnimationFrame(tick);\n };\n raf = requestAnimationFrame(tick);\n return () => cancelAnimationFrame(raf);\n }, [phase]);\n\n useEffect(() => {\n if (phase === \"playing\") inputRef.current?.focus();\n }, [phase]);\n\n // Save the finished run, then refresh the board from the server's answer.\n useEffect(() => {\n if (phase !== \"done\") return;\n let cancelled = false;\n setSaveError(null);\n fetch(\"/api/scores\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ name: name.trim(), score: scoreRef.current }),\n })\n .then((r) => r.ok ? r.json() : Promise.reject(new Error(String(r.status))))\n .then((d) => {\n if (!cancelled) setTop(d.top);\n })\n .catch(() => {\n if (!cancelled) setSaveError(\"Couldn't save that run.\");\n });\n return () => {\n cancelled = true;\n };\n }, [phase]);\n\n function start() {\n const trimmed = name.trim();\n try {\n localStorage.setItem(NAME_KEY, trimmed);\n } catch { /* private mode */ }\n scoreRef.current = 0;\n setScore(0);\n setTyped(\"\");\n setN(randomTwoDigit());\n setMsLeft(ROUND_MS);\n setPhase(\"playing\");\n }\n\n const answer = String(n * 22);\n\n // Type freely; a correct number advances on its own. Nothing is ever marked\n // wrong and nothing is silently deleted — backspace is yours to use.\n //\n // Both branches write the DOM input directly as well as setting state. When\n // the next state equals the current one React skips the re-render, and the\n // browser then keeps whatever was typed — which used to leave the field\n // permanently out of sync with `typed` and stop the round ever scoring again.\n function onType(raw: string) {\n const value = raw.replace(/\\D/g, \"\").slice(0, ANSWER_MAX_DIGITS);\n const next = value === answer ? \"\" : value;\n\n if (value === answer) {\n scoreRef.current += 1;\n setScore(scoreRef.current);\n setN((prev) => randomTwoDigit(prev));\n }\n\n setTyped(next);\n if (inputRef.current) inputRef.current.value = next;\n }\n\n const seconds = (msLeft / 1000).toFixed(1);\n const pct = (msLeft / ROUND_MS) * 100;\n\n // Leaving play mode mid-round would otherwise let the timer run out in the\n // background and save a score for a round you stopped playing.\n function switchMode(next: Mode) {\n setPhase(\"idle\");\n setMode(next);\n }\n\n return (\n

× 22

\n {mode === \"play\" ? \"Multiply by 22. 30 seconds. Go.\" : \"22 × 50 through 22 × 99.\"}\n

\n\n

\n {([\"play\", \"practice\"] as const).map((m) => (\n switchMode(m)}\n className={`px-4 py-1.5 text-sm font-medium rounded-lg capitalize transition ${\n mode === m ? \"bg-white shadow-sm text-gray-900\" : \"text-gray-500 hover:text-gray-800\"\n }`}\n >\n {m}\n \n ))}\n

\n\n {mode === \"practice\" && }\n\n {mode === \"play\" && phase === \"idle\" && (\n

\n \n Your name\n \n setName(e.target.value)}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" && name.trim()) start();\n }}\n maxLength={24}\n placeholder=\"Who's playing?\"\n className=\"w-full px-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent\"\n />\n \n Start\n \n

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

\n \n Correct {score}\n \n {seconds}s\n

\n \n

\n\n

\n {n} × 22\n

\n\n onType(e.target.value)}\n onBlur={() => inputRef.current?.focus()}\n inputMode=\"numeric\"\n autoComplete=\"off\"\n aria-label=\"Answer\"\n className=\"w-full text-center text-4xl font-bold tabular-nums px-4 py-3 border-2 border-gray-300 rounded-xl focus:outline-none focus:border-indigo-500\"\n />\n

\n Right answers advance on their own. Backspace to fix a typo.\n

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

Time

{score}

\n correct in 30 seconds{score > 0 && `, ${(30 / score).toFixed(1)}s each`}\n

\n {saveError &&

{saveError}

}\n \n Play again\n \n setPhase(\"idle\")}\n className=\"w-full mt-2 text-sm text-gray-500 hover:text-gray-800 py-2\"\n >\n Change name\n \n

\n )}\n\n {mode === \"play\" && }\n\n

\n View source\n

\n );\n}\n","deleted",false,"label",[47,48,24],"frontend","components","692d027a-35b9-48ea-8f8d-613e89421644",["D",1789455549919],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","30-second 2-digit x 22 mental math drill with leaderboard","imageUrl","userId","4672fa32-1c6f-4907-899e-57b7e45b1dcb","pinnedFileId","01a0a3dc-c647-7481-bcdc-6036d51d1292","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","019e83d1-d41f-725b-9693-b632d430a029","tursoName","692d027a35b948ea8f8d613e89421644","tursoHostname","692d027a35b948ea8f8d613e89421644-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789455661654],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_9":10,"_109":105},"org",{"_9":10,"_102":103,"_104":105,"_59":60,"_106":107,"_108":44},"branch",{"_37":32,"_11":93,"_22":30,"_94":49,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":12,"_101":10},"isOwned","main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","Potluck Mittal","avatar","https://lh3.googleusercontent.com/a/ACg8ocJYeiSQ8_eyVYtUAg9f5qRwEXzS1AreFm572a1csvZx7c6b_S8=s96-c","tier","pro","canRestrictVals","profileImageUrl","ctx",{"_86":-5,"_143":144,"_145":146,"_147":148,"_149":44,"_150":44,"_151":44,"_152":34,"_153":-5,"_154":-7,"_155":-7,"_156":67,"_157":44,"_158":44,"_159":-5,"_160":44,"_161":44,"_162":44,"_163":-5},"ENV",{"_114":115,"_116":117,"_118":93,"_119":120,"_121":122,"_123":124,"_125":126,"_127":128,"_129":130,"_131":132,"_133":134,"_135":136,"_137":138,"_139":140,"_141":142},"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","orgs",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]