[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_362":363,"_364":365},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_18":19,"_17":-7,"_274":-5,"_20":275,"_22":276,"_277":278,"_279":280,"_26":281,"_24":282,"_283":-5,"_284":-5,"_285":54,"_286":287,"_288":45,"_289":-5,"_290":-5,"_291":292},"routes/_app.x.$handle.$name.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":-5,"_29":-5,"_30":-5,"_31":-5,"_32":-5},"handle","altors_graphika","name","polyatomics","branchName","main","version","path","frontend/components/QuizScreen.tsx","project",{"_33":216,"_13":14,"_46":217,"_218":-5,"_219":54,"_220":221,"_222":221,"_223":224,"_225":-5,"_226":227,"_228":64,"_229":45,"_230":-5,"_231":-5,"_232":85,"_233":234,"_235":236,"_237":238,"_239":240,"_241":-5,"_242":243,"_244":243,"_245":246,"_247":246,"_248":246,"_249":243,"_250":243,"_251":252,"_253":254,"_255":256,"_257":54},"tree",[59,60,61],"file",{"_33":34,"_13":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_17":48,"_49":50,"_51":52,"_53":54,"_55":-5,"_18":56},"contents",[],"upstream","pull","ahead","behind","envVars","id","11639692-278c-44b3-94f2-340b2508b01a","QuizScreen.tsx","fileId","f8d88c9a-a3cf-11f1-87dc-1607ee4eb77e","parentId","01a04b7f-e043-776f-9b1e-4835a232ed6a","branchId","91efcfc2-57fc-4e40-a802-a0a982202b7c","branchVersion",242,"latest",true,"createdAt",["D",1788042062425],44,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { Clock3, Flame, X } from \"https://esm.sh/lucide-react@0.468.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport { CHARGE_PATTERN, FORMULA_PATTERN, formatChargeInput, formatFormula } from \"../lib/quiz.ts\";\nimport type { Config, Ion } from \"../lib/polyatomics.ts\";\n\nfunction FormulaInput({ value, onChange, onInsert, onClear, onEnter, charge = false, disabled = false, answerRevealed = false }: { value: string; onChange: (v: string) => void; onInsert: (v: string) => void; onClear: () => void; onEnter?: () => void; charge?: boolean; disabled?: boolean; answerRevealed?: boolean }) {\n const inputRef = useRef(null);\n const keys = charge ? [\"+\", \"−\"] : [\"₂\", \"₃\", \"₄\", \"₅\", \"₆\", \"₇\", \"₈\", \"₉\"];\n return

{ if (e.key === \"Enter\") { e.preventDefault(); onEnter?.(); } }} onChange={(e) => { const next = e.target.value; if (charge) e.currentTarget.setCustomValidity(next !== \"\" && !/^[+−\\-0-9]+$/.test(next) ? \"Charge may contain only plus, minus, hyphen, and numbers.\" : \"\"); onChange(next); }} placeholder={charge ? \"−2\" : \"SO₄\"} pattern={charge ? CHARGE_PATTERN : FORMULA_PATTERN} inputMode={charge ? \"tel\" : \"text\"} autoComplete=\"off\" spellCheck={false} aria-invalid={charge && value !== \"\" && !/^[+−\\-0-9]+$/.test(value)} aria-label={charge ? \"Charge\" : \"Formula\"} name={charge ? \"charge\" : \"formula\"} style={{ color: answerRevealed ? \"#3c3c3c\" : disabled ? \"#777\" : \"#3c3c3c\", WebkitTextFillColor: answerRevealed ? \"#3c3c3c\" : disabled ? \"#777\" : \"#3c3c3c\", opacity: 1 }} className=\"min-w-0 flex-1 bg-transparent text-[30px] font-bold tracking-tight outline-none placeholder:text-[#777] invalid:text-[#b3261e] disabled:cursor-not-allowed disabled:placeholder:text-[#777]\" />{value ? : }

{keys.map((key) => )}

;\n}\n\ntype QuizSession = { config: Config; ion: Ion; index: number; pool: Ion[]; formula: string; charge: string; checked: boolean; gaveUp: boolean; correctAnimating: boolean; answerCorrect: boolean; progress: number; attempts: number; correct: number; streak: number; timeLeft: number | null; setFormula: (value: string) => void; setCharge: (value: string) => void; submit: () => void; skip: () => void; giveUp: () => void; continueAfterGiveUp: () => void; end: () => void };\n\nexport function QuizScreen({ session }: { session: QuizSession }) {\n const [confirmEnd, setConfirmEnd] = useState(false);\n const inputsDisabled = session.gaveUp || session.correctAnimating;\n return

{session.config.seconds !== null && <>{Math.floor((session.timeLeft ?? 0) / 60)}:{String((session.timeLeft ?? 0) % 60).padStart(2, \"0\")}}{session.streak}

{session.ion.name}

Formula session.setFormula(session.formula + v)} onClear={() => session.setFormula(\"\")} onEnter={() => document.getElementById(\"charge-input\")?.focus()} />

Charge session.setCharge(session.charge + v)} onClear={() => session.setCharge(\"\")} onEnter={session.submit} />

{session.attempts} attempts•{session.attempts ? Math.round(session.correct / session.attempts * 100) : 0}% accuracy•{session.correct} correct{!session.config.loop && <>•{Math.min(session.index + 1, session.pool.length)}/{session.pool.length}}

{confirmEnd &&

{ if (e.target === e.currentTarget) setConfirmEnd(false); }}>

End session?

Your current progress will be included in the results.

}

;\n}\n","deleted",false,"label",[57,58,35],"frontend","components",{"_33":82,"_13":57,"_36":83,"_38":-5,"_40":41,"_42":78,"_44":45,"_46":84,"_17":85,"_49":86,"_51":-5,"_53":54,"_55":-5,"_70":87,"_18":88},{"_33":73,"_13":74,"_36":75,"_38":-5,"_40":41,"_42":76,"_44":45,"_46":77,"_17":78,"_49":24,"_51":79,"_53":54,"_55":-5,"_70":80,"_18":81},{"_33":62,"_13":63,"_36":64,"_38":-5,"_40":41,"_42":65,"_44":45,"_46":66,"_17":67,"_49":68,"_51":69,"_53":54,"_55":14,"_70":71,"_18":72},"e9eb1765-be20-45bc-b40c-2fe4c6e163d4","index.ts","01a04b7f-e043-776f-9b1e-67170ce79a7b",169,["D",1788037454141],9,"http","import { parseVal, serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { Root } from \"./frontend/root.tsx\";\n\nconst app = new Hono();\n\napp.get(\"/\", (c) => c.html(Root()));\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n","children",[],[63],"8fd05197-c6e3-4b8e-b16a-e383aca59d99","README.md","01a04b7f-e043-776f-9b1e-61c237442125",146,["D",1788025063496],1,"# Polyatomics\n\nA focused practice app for memorizing common polyatomic ion formulas and charges.\n\n## Features\n\n- Practice 32 common polyatomic ions.\n- Choose a time limit or practice without a timer.\n- Practice by category or select individual ions.\n- Loop mode continuously cycles through the selected pool.\n- Immediate feedback shows the correct formula and charge.\n- Session results include accuracy, correct answers, average answer time, and missed ions.\n- Installable as a PWA with update notifications.\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|GET /| Hono[\"index.ts\"]\n Hono -->|HTML shell| Root[\"frontend/root.tsx\"]\n Root --> Entry[\"frontend/index.tsx\"]\n Entry --> App[\"frontend/components/App.tsx\"]\n App --> Start[\"StartScreen.tsx\"]\n App --> Quiz[\"QuizScreen.tsx\"]\n App --> End[\"EndScreen.tsx\"]\n App --> Install[\"InstallNudge.tsx\"]\n App --> Session[\"hooks/useQuizSession.ts\"]\n Session --> Rules[\"lib/quiz.ts\"]\n Rules --> Data[\"lib/polyatomics.ts\"]\n```\n\n## File structure\n\n```text\nindex.ts\nfrontend/\n root.tsx # HTML shell and immutable asset URLs\n index.tsx # React entrypoint and service-worker registration\n manifest.webmanifest # PWA metadata\n favicon.svg # App icon\n favicon-green.svg # App icon used by the shell\n icon-192.svg\n icon-512.svg\n components/\n App.tsx # Composition/root component\n StartScreen.tsx # Session configuration\n QuizScreen.tsx # Question and answer UI\n EndScreen.tsx # Session results\n InstallNudge.tsx # Install/update UI\n hooks/\n useQuizSession.ts # Quiz state and transitions\n lib/\n polyatomics.ts # Ion data, types, and defaults\n quiz.ts # Pure quiz rules and formatting helpers\n```\n\n## Design principles\n\nThe UI components are intentionally thin. Quiz behavior lives in `useQuizSession`, while pure domain rules live in `lib/quiz.ts`. The ion dataset and shared types live in `lib/polyatomics.ts`, so other practice modes can reuse them without depending on the UI.\n\nThe app does not require application cookies or a login to practice. Browser persistence for the install prompt is treated as optional: if web storage is unavailable or blocked, the prompt simply falls back to its default behavior and the quiz remains usable.\n\n## Development\n\nThe HTTP entrypoint is `index.ts`. React components live under `frontend/components/`, with reusable state and domain logic under `frontend/hooks/` and `frontend/lib/`.\n\nThe app uses React 18, Hono, Twind, and immutable Val Town asset URLs.\n",[],[74],"aa37af58-90fd-4bfa-85a4-500c985f1deb","01a04b7f-e043-776f-9b1e-58a885ba27e3",["D",1787973066715],0,"directory",[89,90,91,92,93,94,95],[57],{"_33":170,"_13":58,"_36":39,"_38":83,"_40":41,"_42":78,"_44":45,"_46":171,"_17":85,"_49":86,"_51":-5,"_53":54,"_55":-5,"_70":172,"_18":173},{"_33":154,"_13":155,"_36":156,"_38":83,"_40":41,"_42":132,"_44":45,"_46":157,"_17":85,"_49":86,"_51":-5,"_53":54,"_55":-5,"_70":158,"_18":159},{"_33":129,"_13":130,"_36":131,"_38":83,"_40":41,"_42":132,"_44":45,"_46":133,"_17":85,"_49":86,"_51":-5,"_53":54,"_55":-5,"_70":134,"_18":135},{"_33":121,"_13":122,"_36":123,"_38":83,"_40":41,"_42":124,"_44":45,"_46":125,"_17":78,"_49":24,"_51":126,"_53":54,"_55":-5,"_70":127,"_18":128},{"_33":114,"_13":115,"_36":116,"_38":83,"_40":41,"_42":78,"_44":45,"_46":117,"_17":85,"_49":24,"_51":118,"_53":54,"_55":-5,"_70":119,"_18":120},{"_33":105,"_13":106,"_36":107,"_38":83,"_40":41,"_42":108,"_44":45,"_46":109,"_17":110,"_49":50,"_51":111,"_53":54,"_55":-5,"_70":112,"_18":113},{"_33":96,"_13":97,"_36":98,"_38":83,"_40":41,"_42":99,"_44":45,"_46":100,"_17":101,"_49":50,"_51":102,"_53":54,"_55":-5,"_70":103,"_18":104},"8a7077c9-c302-4867-9620-078644758112","root.tsx","01a04b7f-e043-776f-9b1e-554f5bc7b179",213,["D",1788040505046],22,"/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\nexport function Root() {\n return (\n <>\n {raw(\"\")}\n \n \n \n \n \n \n \n \n Polyatomics\n