Polyatomics

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_367":368,"_369":370},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_277":-5,"_20":278,"_22":279,"_280":281,"_282":283,"_26":284,"_24":285,"_286":-5,"_287":-5,"_288":55,"_289":290,"_291":46,"_292":-5,"_293":-5,"_294":295},"routes/_app.x.$handle.$name.branch.$branch.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/hooks","project",{"_34":219,"_13":14,"_47":220,"_221":-5,"_222":55,"_223":224,"_225":224,"_226":227,"_228":-5,"_229":230,"_231":72,"_232":46,"_233":-5,"_234":-5,"_235":64,"_236":237,"_238":239,"_240":241,"_242":243,"_244":-5,"_245":246,"_247":246,"_248":249,"_250":249,"_251":249,"_252":246,"_253":246,"_254":255,"_256":257,"_258":259,"_260":55},"tree",[67,68,69],"file",{"_34":60,"_13":59,"_37":40,"_39":61,"_41":42,"_43":62,"_45":46,"_47":63,"_17":64,"_50":65,"_52":-5,"_54":55,"_56":-5,"_18":66},"contents",[33],"upstream","pull","ahead","behind","envVars",{"_34":35,"_13":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_17":49,"_50":51,"_52":53,"_54":55,"_56":-5,"_18":57},"id","cad2a747-0bb3-47ec-a836-6eac2b08b3f1","useQuizSession.ts","fileId","f8d8d5c4-a3cf-11f1-87dc-1607ee4eb77e","parentId","01a04e96-de68-75d9-b234-63a083525916","branchId","91efcfc2-57fc-4e40-a802-a0a982202b7c","branchVersion",224,"latest",true,"createdAt",["D",1788040843720],12,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { DEFAULT_CONFIG, IONS, type Attempt, type Config, type Ion } from \"../lib/polyatomics.ts\";\nimport { normalizeCharge, normalizeFormula, pickNext, selectedPool, shuffle } from \"../lib/quiz.ts\";\n\nexport type QuizScreen = \"start\" | \"quiz\" | \"end\";\n\nexport function useQuizSession() {\n const [screen, setScreen] = useState(\"start\");\n const [config, setConfig] = useState(DEFAULT_CONFIG);\n const [pool, setPool] = useState([]);\n const [ion, setIon] = useState(IONS[0]);\n const [index, setIndex] = useState(0);\n const [formula, setFormulaState] = useState(\"\");\n const [charge, setChargeState] = useState(\"\");\n const [nameAnswer, setNameAnswer] = useState(\"\");\n const [checked, setChecked] = useState(false);\n const [gaveUp, setGaveUp] = useState(false);\n const [correctAnimating, setCorrectAnimating] = useState(false);\n const advanceTimer = useRef(null);\n const [correct, setCorrect] = useState(0);\n const [attempts, setAttempts] = useState(0);\n const [streak, setStreak] = useState(0);\n const [timeLeft, setTimeLeft] = useState(DEFAULT_CONFIG.seconds);\n const [history, setHistory] = useState([]);\n\n const setFormula = useCallback((value: string) => { const subscripts = \"₀₁₂₃₄₅₆₇₈₉\"; const next = value.replace(/[0-9]/g, (digit) => subscripts[Number(digit)]); setFormulaState(next); setChecked(false); }, []);\n const setCharge = useCallback((value: string) => { setChargeState(value); setChecked(false); }, []);\n const setName = useCallback((value: string) => { setNameAnswer(value); setChecked(false); }, []);\n const selectedCountPool = useMemo(() => selectedPool(config), [config]);\n const formulaCorrect = normalizeFormula(formula) === ion.formula;\n const chargeCorrect = normalizeCharge(charge) === normalizeCharge(ion.charge);\n const nameCorrect = nameAnswer.trim().replace(/\\s+/g, \" \").toLowerCase() === ion.name.toLowerCase();\n const answerCorrect = config.mode === \"name\" ? nameCorrect : formulaCorrect && chargeCorrect;\n const progress = pool.length\n ? config.loop\n ? Math.min(100, ((attempts % pool.length) + (checked && answerCorrect ? 1 : 0)) / pool.length * 100)\n : Math.min(100, (index + (checked && answerCorrect ? 1 : 0)) / pool.length * 100)\n : 0;\n\n useEffect(() => {\n if (screen !== \"quiz\" || config.seconds === null) return;\n const id = setInterval(() => setTimeLeft((t) => t !== null && t > 0 ? t - 1 : 0), 1000);\n return () => clearInterval(id);\n }, [screen, config.seconds]);\n\n useEffect(() => {\n if (screen === \"quiz\" && timeLeft === 0 && config.seconds !== null) setScreen(\"end\");\n }, [screen, timeLeft, config.seconds]);\n\n const resetQuestion = useCallback((next: Ion, nextIndex: number) => {\n if (advanceTimer.current !== null) {\n clearTimeout(advanceTimer.current);\n advanceTimer.current = null;\n }\n setIon(next);\n setIndex(nextIndex);\n setFormulaState(\"\");\n setChargeState(\"\");\n setNameAnswer(\"\");\n setChecked(false);\n setGaveUp(false);\n setCorrectAnimating(false);\n }, []);\n\n const begin = useCallback(() => {\n const nextPool = shuffle(selectedCountPool);\n setPool(nextPool);\n setIndex(0);\n setFormulaState(\"\");\n setChargeState(\"\");\n setNameAnswer(\"\");\n setChecked(false);\n setGaveUp(false);\n setCorrectAnimating(false);\n setCorrect(0);\n setAttempts(0);\n setStreak(0);\n setTimeLeft(config.seconds);\n setHistory([]);\n setScreen(nextPool.length ? \"quiz\" : \"start\");\n if (nextPool[0]) setIon(nextPool[0]);\n }, [config, selectedCountPool]);\n\n const advance = useCallback(() => {\n if (!pool.length) return;\n if (!config.loop && index >= pool.length - 1) {\n setScreen(\"end\");\n return;\n }\n const nextIndex = config.loop ? (index + 1) % pool.length : index + 1;\n const next = config.loop ? pickNext(pool, ion) : pool[nextIndex];\n resetQuestion(next, nextIndex);\n }, [config.loop, index, ion, pool, resetQuestion]);\n\n const skip = useCallback(() => {\n setStreak(0);\n advance();\n }, [advance]);\n\n const giveUp = useCallback(() => {\n setChecked(true);\n setGaveUp(true);\n setCorrectAnimating(false);\n setStreak(0);\n }, []);\n\n const continueAfterGiveUp = useCallback(() => {\n if (gaveUp) advance();\n }, [advance, gaveUp]);\n\n const check = useCallback(() => {\n if (checked || gaveUp || correctAnimating) return;\n const record: Attempt = { correct: answerCorrect, ion, timeLeft };\n setHistory((items) => [...items, record]);\n setAttempts((n) => n + 1);\n setChecked(true);\n if (answerCorrect) {\n setCorrect((n) => n + 1);\n setStreak((n) => n + 1);\n setCorrectAnimating(true);\n advanceTimer.current = window.setTimeout(() => {\n advanceTimer.current = null;\n advance();\n }, 420);\n } else {\n setStreak(0);\n }\n }, [advance, answerCorrect, checked, correctAnimating, gaveUp, ion, timeLeft]);\n\n const submit = useCallback(() => {\n if (gaveUp) continueAfterGiveUp();\n else check();\n }, [check, continueAfterGiveUp, gaveUp]);\n\n return {\n screen, setScreen, config, setConfig, pool, ion, index, formula, charge, nameAnswer, checked, gaveUp, correctAnimating,\n correct, attempts, streak, timeLeft, history, formulaCorrect, chargeCorrect, nameCorrect,\n answerCorrect, progress, setFormula, setCharge, setName, begin, advance, skip, giveUp, continueAfterGiveUp, submit,\n };\n}\n","deleted",false,"label",[58,59,36],"frontend","hooks","c5405d1e-c340-427e-a3b4-73c0e7f4499f","01a04b7f-e043-776f-9b1e-58a885ba27e3",145,["D",1788024905323],0,"directory",[58,59],{"_34":90,"_13":58,"_37":61,"_39":-5,"_41":42,"_43":86,"_45":46,"_47":91,"_17":64,"_50":65,"_52":-5,"_54":55,"_56":-5,"_78":92,"_18":93},{"_34":81,"_13":82,"_37":83,"_39":-5,"_41":42,"_43":84,"_45":46,"_47":85,"_17":86,"_50":24,"_52":87,"_54":55,"_56":-5,"_78":88,"_18":89},{"_34":70,"_13":71,"_37":72,"_39":-5,"_41":42,"_43":73,"_45":46,"_47":74,"_17":75,"_50":76,"_52":77,"_54":55,"_56":14,"_78":79,"_18":80},"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",[],[71],"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",[],[82],"aa37af58-90fd-4bfa-85a4-500c985f1deb",["D",1787973066715],[94,95,96,97,98,99,100],[58],{"_34":165,"_13":166,"_37":167,"_39":61,"_41":42,"_43":86,"_45":46,"_47":168,"_17":64,"_50":65,"_52":-5,"_54":55,"_56":-5,"_78":169,"_18":170},{"_34":60,"_13":59,"_37":40,"_39":61,"_41":42,"_43":62,"_45":46,"_47":158,"_17":64,"_50":65,"_52":-5,"_54":55,"_56":-5,"_78":159,"_18":160},{"_34":134,"_13":135,"_37":136,"_39":61,"_41":42,"_43":62,"_45":46,"_47":137,"_17":64,"_50":65,"_52":-5,"_54":55,"_56":-5,"_78":138,"_18":139},{"_34":126,"_13":127,"_37":128,"_39":61,"_41":42,"_43":129,"_45":46,"_47":130,"_17":86,"_50":24,"_52":131,"_54":55,"_56":-5,"_78":132,"_18":133},{"_34":119,"_13":120,"_37":121,"_39":61,"_41":42,"_43":86,"_45":46,"_47":122,"_17":64,"_50":24,"_52":123,"_54":55,"_56":-5,"_78":124,"_18":125},{"_34":110,"_13":111,"_37":112,"_39":61,"_41":42,"_43":113,"_45":46,"_47":114,"_17":115,"_50":51,"_52":116,"_54":55,"_56":-5,"_78":117,"_18":118},{"_34":101,"_13":102,"_37":103,"_39":61,"_41":42,"_43":104,"_45":46,"_47":105,"_17":106,"_50":51,"_52":107,"_54":55,"_56":-5,"_78":108,"_18":109},"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