Polyatomics

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_307":308,"_309":310},"routes/_app.x.$handle.$name",{"_100":99,"_32":45,"_109":90,"_27":110,"_13":14,"_111":-5,"_11":112,"_113":114,"_115":116,"_117":118,"_119":120,"_20":-5,"_121":-5,"_122":-5,"_123":25,"_124":125,"_126":59,"_127":-5,"_128":-5,"_129":130},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":-5,"_61":-5,"_62":63,"_64":65,"_66":67,"_68":69,"_70":71,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":83,"_84":85,"_86":87,"_88":25},"version",193,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","frontend/lib/quiz.ts","latestPath","fileId","f8d8fb4e-a3cf-11f1-87dc-1607ee4eb77e","name","quiz.ts","fileType","script","content","import { CATEGORIES, IONS, type Config, type Ion } from \"./polyatomics.ts\";\n\nconst SUB = [\"₀\",\"₁\",\"₂\",\"₃\",\"₄\",\"₅\",\"₆\",\"₇\",\"₈\",\"₉\"];\n\nexport const FORMULA_PATTERN = \"[A-Z][a-z]?[0-9₀₁₂₃₄₅₆₇₈₉]*(?:[A-Z][a-z]?[0-9₀₁₂₃₄₅₆₇₈₉]*)*\";\nexport const CHARGE_PATTERN = \"(?:[+−-]?\\\\d+|\\\\d+[+−-]|[+−-])\";\n\nexport function normalizeFormula(value: string) {\n return value.trim().replace(/\\s/g, \"\").replace(/[₀₁₂₃₄₅₆₇₈₉]/g, (c) => String(SUB.indexOf(c)));\n}\n\nexport function normalizeCharge(value: string) {\n const compact = value.trim().replace(/\\s/g, \"\").replace(/-/g, \"−\");\n if (!compact) return \"\";\n if (/^[+−]$/.test(compact)) return `${compact}1`;\n if (/^[+−]\\d+$/.test(compact)) return compact;\n if (/^\\d+[+−]$/.test(compact)) return `${compact.slice(-1)}${compact.slice(0, -1)}`;\n return compact;\n}\n\nexport function formatFormula(value: string) {\n return value.replace(/(\\d+)/g, (n) => n.split(\"\").map((d) => SUB[Number(d)]).join(\"\"));\n}\n\nexport function formatCharge(value: string) {\n const clean = value.replace(\"−\", \"-\");\n return clean.replace(/([+-]?)(\\d+)/g, (_, sign, n) => `${n === \"1\" ? \"\" : n.split(\"\").map((d: string) => \"⁰¹²³⁴⁵⁶⁷⁸⁹\"[Number(d)]).join(\"\")}${sign === \"-\" ? \"⁻\" : sign === \"+\" ? \"⁺\" : \"\"}`);\n}\n\nexport function shuffle(items: T[]) { return [...items].sort(() => Math.random() - 0.5); }\n\nexport function pickNext(pool: Ion[], current: Ion) {\n const choices = pool.filter((ion) => ion !== current);\n return choices[Math.floor(Math.random() * choices.length)] ?? current;\n}\n\nexport function selectedPool(config: Config) {\n const byCategory = IONS.filter((item) => config.categories.includes(item.category));\n const byIndividual = IONS.filter((item) => config.ions.includes(item.name));\n return [...new Map([...byCategory, ...byIndividual].map((item) => [item.name, item])).values()];\n}\n\nexport function selectedIonNames(config: Config) {\n return new Set(IONS.filter((ion) => config.categories.includes(ion.category)).map((ion) => ion.name).concat(config.ions));\n}\n\nexport function toggleCategory(config: Config, category: string): Config {\n return { ...config, categories: config.categories.includes(category) ? config.categories.filter((c) => c !== category) : [...config.categories, category] };\n}\n\nexport function toggleIon(config: Config, name: string): Config {\n const ion = IONS.find((item) => item.name === name);\n if (!ion) return config;\n const categoryIons = IONS.filter((item) => item.category === ion.category).map((item) => item.name);\n const selectedExplicit = new Set(config.ions);\n if (config.categories.includes(ion.category)) {\n categoryIons.forEach((ionName) => selectedExplicit.add(ionName));\n selectedExplicit.delete(name);\n return { ...config, categories: config.categories.filter((category) => category !== ion.category), ions: [...selectedExplicit] };\n }\n if (selectedExplicit.has(name)) selectedExplicit.delete(name);\n else selectedExplicit.add(name);\n const nextCategories = [...config.categories];\n CATEGORIES.forEach((category) => {\n const names = IONS.filter((item) => item.category === category).map((item) => item.name);\n if (names.every((ionName) => selectedExplicit.has(ionName))) {\n if (!nextCategories.includes(category)) nextCategories.push(category);\n names.forEach((ionName) => selectedExplicit.delete(ionName));\n }\n });\n return { ...config, categories: nextCategories, ions: [...selectedExplicit] };\n}\n","createdAt",["D",1788038006746],"branchVersion","branchId","91efcfc2-57fc-4e40-a802-a0a982202b7c","id","b7e65ae6-0a45-4ddf-9a18-259d42abc50b","polyatomics",["D",1787973066715],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Practice polyatomic ion formulas and charges","imageUrl","a0dbc0e3-e526-4d2e-b19c-fcb458a27a4e","pinnedFileId","01a04b7f-e043-776f-9b1e-67170ce79a7b","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","01a04933-e278-70de-a7be-b64137dd639b","tursoName","b7e65ae60a454ddf9a18259d42abc50b","tursoHostname","b7e65ae60a454ddf9a18259d42abc50b-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789535451117],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_100":99,"_108":104},"org",{"_100":99,"_101":102,"_103":104,"_18":55,"_105":106,"_107":25},"branch",{"_13":89,"_32":90,"_43":42,"_91":44,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":45,"_98":99},"isOwned",242,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","altors_graphika","handle","displayName","Altors-Graphika","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/d88c49d9-df42-4251-2a99-48ca93b86e01/square512?exp=1789549199&sig=c15bf2065c36253101ba985f20d2e251aefea60241f0b5f04795ee66828f0e97","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":302,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":-5,"_61":-5,"_62":63,"_64":65,"_66":67,"_68":69,"_70":303,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":304,"_84":305,"_86":306,"_88":25},"tree",[169,184,185],"files",[169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185],"counts",{"_159":63,"_160":150,"_161":63,"_162":163,"_164":165},"contents",[131,132,133],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":153,"_32":154,"_30":155,"_136":-5,"_41":42,"_40":150,"_138":59,"_38":156,"_13":63,"_34":157,"_36":-5,"_24":25,"_143":-5,"_27":158},{"_43":145,"_32":146,"_30":147,"_136":-5,"_41":42,"_40":148,"_138":59,"_38":149,"_13":150,"_34":20,"_36":151,"_24":25,"_143":-5,"_27":152},{"_43":134,"_32":135,"_30":57,"_136":-5,"_41":42,"_40":137,"_138":59,"_38":139,"_13":140,"_34":141,"_36":142,"_24":25,"_143":45,"_27":144},"e9eb1765-be20-45bc-b40c-2fe4c6e163d4","index.ts","parentId",169,"latest",["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","label",[135],"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",[146],"aa37af58-90fd-4bfa-85a4-500c985f1deb","frontend","01a04b7f-e043-776f-9b1e-58a885ba27e3",["D",1787973066715],"directory",[154],"pulls","branches","forks","envVars",{"_166":63,"_168":63},"connections",{"_166":63,"_167":63},"count","unfilledCount","emptyCount",{"_43":153,"_32":154,"_30":155,"_136":-5,"_41":42,"_40":150,"_138":59,"_38":299,"_13":63,"_34":157,"_36":-5,"_24":25,"_143":-5,"_187":300,"_27":301},{"_43":295,"_32":268,"_30":262,"_136":155,"_41":42,"_40":150,"_138":59,"_38":296,"_13":63,"_34":157,"_36":-5,"_24":25,"_143":-5,"_187":297,"_27":298},{"_43":286,"_32":287,"_30":288,"_136":262,"_41":42,"_40":289,"_138":25,"_38":290,"_13":291,"_34":35,"_36":292,"_24":25,"_143":-5,"_187":293,"_27":294},{"_43":278,"_32":279,"_30":280,"_136":262,"_41":42,"_40":281,"_138":59,"_38":282,"_13":207,"_34":35,"_36":283,"_24":25,"_143":-5,"_187":284,"_27":285},{"_43":269,"_32":270,"_30":271,"_136":262,"_41":42,"_40":272,"_138":25,"_38":273,"_13":274,"_34":35,"_36":275,"_24":25,"_143":-5,"_187":276,"_27":277},{"_43":259,"_32":260,"_30":261,"_136":262,"_41":42,"_40":263,"_138":25,"_38":264,"_13":207,"_34":35,"_36":265,"_24":25,"_143":-5,"_187":266,"_27":267},{"_43":255,"_32":254,"_30":247,"_136":155,"_41":42,"_40":235,"_138":59,"_38":256,"_13":63,"_34":157,"_36":-5,"_24":25,"_143":-5,"_187":257,"_27":258},{"_43":244,"_32":245,"_30":246,"_136":247,"_41":42,"_40":248,"_138":25,"_38":249,"_13":250,"_34":35,"_36":251,"_24":25,"_143":-5,"_187":252,"_27":253},{"_43":240,"_32":231,"_30":227,"_136":155,"_41":42,"_40":235,"_138":59,"_38":241,"_13":63,"_34":157,"_36":-5,"_24":25,"_143":-5,"_187":242,"_27":243},{"_43":232,"_32":233,"_30":234,"_136":227,"_41":42,"_40":235,"_138":25,"_38":236,"_13":63,"_34":35,"_36":237,"_24":25,"_143":-5,"_187":238,"_27":239},{"_43":226,"_32":33,"_30":31,"_136":227,"_41":42,"_40":14,"_138":25,"_38":228,"_13":150,"_34":35,"_36":37,"_24":25,"_143":-5,"_187":229,"_27":230},{"_43":218,"_32":219,"_30":220,"_136":155,"_41":42,"_40":221,"_138":59,"_38":222,"_13":150,"_34":20,"_36":223,"_24":25,"_143":-5,"_187":224,"_27":225},{"_43":211,"_32":212,"_30":213,"_136":155,"_41":42,"_40":150,"_138":59,"_38":214,"_13":63,"_34":20,"_36":215,"_24":25,"_143":-5,"_187":216,"_27":217},{"_43":202,"_32":203,"_30":204,"_136":155,"_41":42,"_40":205,"_138":59,"_38":206,"_13":207,"_34":35,"_36":208,"_24":25,"_143":-5,"_187":209,"_27":210},{"_43":193,"_32":194,"_30":195,"_136":155,"_41":42,"_40":196,"_138":25,"_38":197,"_13":198,"_34":35,"_36":199,"_24":25,"_143":-5,"_187":200,"_27":201},{"_43":145,"_32":146,"_30":147,"_136":-5,"_41":42,"_40":148,"_138":59,"_38":190,"_13":150,"_34":20,"_36":151,"_24":25,"_143":-5,"_187":191,"_27":192},{"_43":134,"_32":135,"_30":57,"_136":-5,"_41":42,"_40":137,"_138":59,"_38":186,"_13":140,"_34":141,"_36":142,"_24":25,"_143":45,"_187":188,"_27":189},["D",1788037454141],"children",[],[135],["D",1788025063496],[],[146],"6ffb06a2-0dd1-4004-b240-164d9fcc63da","root.tsx","01a04b7f-e043-776f-9b1e-554f5bc7b179",191,["D",1788037898138],21,"/** @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

Diff · v193