Polyatomics

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_334":335,"_336":337},"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":49,"_124":125,"_126":25,"_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":49,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":25,"_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":49},"version",173,"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",true,"deletedHere","path","frontend/components/InstallNudge.tsx","latestPath","fileId","f8d85e00-a3cf-11f1-87dc-1607ee4eb77e","name","InstallNudge.tsx","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 { Download, Share2, X } from \"https://esm.sh/lucide-react@0.468.0?deps=react@18.2.0,react-dom@18.2.0\";\n\ntype BeforeInstallPromptEvent = Event & { prompt: () => Promise; userChoice: Promise<{ outcome: \"accepted\" | \"dismissed\" }> };\n\nexport function InstallNudge() {\n const [visible, setVisible] = useState(false);\n const [updateAvailable, setUpdateAvailable] = useState(null);\n const [updating, setUpdating] = useState(false);\n const [deferredPrompt, setDeferredPrompt] = useState(null);\n const [instructions, setInstructions] = useState(false);\n const [platform, setPlatform] = useState<\"ios\" | \"other\">(\"other\");\n const [sheetOffset, setSheetOffset] = useState(0);\n const [sheetDragging, setSheetDragging] = useState(false);\n const sheetStartY = useRef(0);\n\n useEffect(() => {\n let dismissed = false;\n try { dismissed = localStorage.getItem(\"polyatomics-install-nudge-dismissed\") === \"1\"; } catch {}\n const standalone = window.matchMedia(\"(display-mode: standalone)\").matches || Boolean((navigator as Navigator & { standalone?: boolean }).standalone);\n const isIos = /iPad|iPhone|iPod/.test(navigator.userAgent) || (navigator.platform === \"MacIntel\" && navigator.maxTouchPoints > 1);\n setPlatform(isIos ? \"ios\" : \"other\");\n if (!dismissed && !standalone) setVisible(true);\n const handleBeforeInstall = (event: Event) => { event.preventDefault(); setDeferredPrompt(event as BeforeInstallPromptEvent); setVisible(true); };\n const handleServiceWorkerMessage = (event: MessageEvent) => { if (event.data?.type === \"UPDATE_AVAILABLE\") { setUpdateAvailable(String(event.data.version)); setVisible(true); setInstructions(false); setSheetOffset(0); } };\n window.addEventListener(\"beforeinstallprompt\", handleBeforeInstall);\n navigator.serviceWorker?.addEventListener(\"message\", handleServiceWorkerMessage);\n const refreshServiceWorker = async () => { try { await navigator.serviceWorker?.getRegistration()?.update(); } catch {} };\n const onVisibilityChange = () => { if (document.visibilityState === \"visible\") void refreshServiceWorker(); };\n document.addEventListener(\"visibilitychange\", onVisibilityChange);\n const interval = window.setInterval(() => void refreshServiceWorker(), 5 * 60 * 1000);\n void refreshServiceWorker();\n return () => { window.removeEventListener(\"beforeinstallprompt\", handleBeforeInstall); navigator.serviceWorker?.removeEventListener(\"message\", handleServiceWorkerMessage); document.removeEventListener(\"visibilitychange\", onVisibilityChange); window.clearInterval(interval); };\n }, []);\n\n const dismiss = () => { try { localStorage.setItem(\"polyatomics-install-nudge-dismissed\", \"1\"); } catch {} setVisible(false); setInstructions(false); setSheetOffset(0); };\n const onSheetPointerDown = (e: React.PointerEvent) => { sheetStartY.current = e.clientY; setSheetDragging(true); e.currentTarget.setPointerCapture(e.pointerId); };\n const onSheetPointerMove = (e: React.PointerEvent) => { if (!sheetDragging) return; const delta = e.clientY - sheetStartY.current; setSheetOffset(delta >= 0 ? delta : Math.max(-28, delta * 0.18)); };\n const onSheetPointerUp = (e: React.PointerEvent) => { if (!sheetDragging) return; const delta = e.clientY - sheetStartY.current; setSheetDragging(false); e.currentTarget.releasePointerCapture(e.pointerId); if (delta > 80) dismiss(); else setSheetOffset(0); };\n const install = async () => {\n if (deferredPrompt) { await deferredPrompt.prompt(); await deferredPrompt.userChoice.catch(() => undefined); setDeferredPrompt(null); setVisible(false); return; }\n setSheetOffset(96); setInstructions(true); requestAnimationFrame(() => setSheetOffset(0));\n };\n const updateApp = async () => {\n if (updating) return;\n setUpdating(true);\n try { const registration = await navigator.serviceWorker?.getRegistration(); await registration?.update(); const keepCache = updateAvailable ? `polyatomics-v${updateAvailable}` : null; const keys = await caches.keys(); await Promise.all(keys.filter((key) => key.startsWith(\"polyatomics-v\") && key !== keepCache).map((key) => caches.delete(key))); window.location.reload(); } catch { setUpdating(false); }\n };\n if (!visible && !updateAvailable) return null;\n return <>\n {updateAvailable ?

A new version of Polyatomics is ready

: visible ?

Add Polyatomics to your home screen

: null}\n {instructions &&

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

Install Polyatomics

Keep it one tap away.

{platform === \"ios\" ?

In Safari, tap Share, then choose Add to Home Screen and confirm with Add.

Open your browser menu and choose Install app or Add to Home Screen.

}

}\n ;\n}\n","createdAt",["D",1788037466720],"branchVersion","branchId","91efcfc2-57fc-4e40-a802-a0a982202b7c","id","b7e65ae6-0a45-4ddf-9a18-259d42abc50b","polyatomics",["D",1787973066715],"deletedAt","legacyEnvVars",false,"privacy","public","httpPrivacy","description","Practice polyatomic ion formulas and charges","imageUrl","a0dbc0e3-e526-4d2e-b19c-fcb458a27a4e","pinnedFileId","01a04b7f-e043-776f-9b1e-67170ce79a7b","pinPreview","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":56,"_105":106,"_107":49},"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=1789567199&sig=6cb9d40b5c6448edfd278bf81a16aef50eed8d7c0989cea2918cb33c238fbea1","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":329,"_47":-5,"_48":49,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":25,"_60":-5,"_61":-5,"_62":63,"_64":65,"_66":67,"_68":69,"_70":330,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":331,"_84":332,"_86":333,"_88":49},"tree",[169,187,188],"files",[169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188],"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":25,"_38":156,"_13":63,"_34":157,"_36":-5,"_24":49,"_143":-5,"_27":158},{"_43":145,"_32":146,"_30":147,"_136":-5,"_41":42,"_40":148,"_138":25,"_38":149,"_13":150,"_34":20,"_36":151,"_24":49,"_143":-5,"_27":152},{"_43":134,"_32":135,"_30":58,"_136":-5,"_41":42,"_40":137,"_138":25,"_38":139,"_13":140,"_34":141,"_36":142,"_24":49,"_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":25,"_38":326,"_13":63,"_34":157,"_36":-5,"_24":49,"_143":-5,"_190":327,"_27":328},{"_43":322,"_32":297,"_30":292,"_136":155,"_41":42,"_40":150,"_138":25,"_38":323,"_13":63,"_34":157,"_36":-5,"_24":49,"_143":-5,"_190":324,"_27":325},{"_43":313,"_32":314,"_30":315,"_136":292,"_41":42,"_40":316,"_138":49,"_38":317,"_13":318,"_34":35,"_36":319,"_24":49,"_143":-5,"_190":320,"_27":321},{"_43":306,"_32":307,"_30":308,"_136":292,"_41":42,"_40":257,"_138":49,"_38":309,"_13":63,"_34":35,"_36":310,"_24":49,"_143":-5,"_190":311,"_27":312},{"_43":298,"_32":299,"_30":300,"_136":292,"_41":42,"_40":301,"_138":49,"_38":302,"_13":140,"_34":35,"_36":303,"_24":49,"_143":-5,"_190":304,"_27":305},{"_43":289,"_32":290,"_30":291,"_136":292,"_41":42,"_40":257,"_138":49,"_38":293,"_13":63,"_34":35,"_36":294,"_24":49,"_143":-5,"_190":295,"_27":296},{"_43":285,"_32":284,"_30":277,"_136":155,"_41":42,"_40":257,"_138":25,"_38":286,"_13":63,"_34":157,"_36":-5,"_24":49,"_143":-5,"_190":287,"_27":288},{"_43":274,"_32":275,"_30":276,"_136":277,"_41":42,"_40":278,"_138":49,"_38":279,"_13":280,"_34":35,"_36":281,"_24":49,"_143":-5,"_190":282,"_27":283},{"_43":270,"_32":262,"_30":256,"_136":155,"_41":42,"_40":257,"_138":25,"_38":271,"_13":63,"_34":157,"_36":-5,"_24":49,"_143":-5,"_190":272,"_27":273},{"_43":263,"_32":264,"_30":265,"_136":256,"_41":42,"_40":257,"_138":49,"_38":266,"_13":63,"_34":35,"_36":267,"_24":49,"_143":-5,"_190":268,"_27":269},{"_43":253,"_32":254,"_30":255,"_136":256,"_41":42,"_40":257,"_138":49,"_38":258,"_13":63,"_34":35,"_36":259,"_24":49,"_143":-5,"_190":260,"_27":261},{"_43":245,"_32":246,"_30":247,"_136":155,"_41":42,"_40":248,"_138":25,"_38":249,"_13":150,"_34":20,"_36":250,"_24":49,"_143":-5,"_190":251,"_27":252},{"_43":238,"_32":239,"_30":240,"_136":155,"_41":42,"_40":150,"_138":25,"_38":241,"_13":63,"_34":20,"_36":242,"_24":49,"_143":-5,"_190":243,"_27":244},{"_43":230,"_32":231,"_30":232,"_136":155,"_41":42,"_40":233,"_138":49,"_38":234,"_13":150,"_34":20,"_36":235,"_24":49,"_143":-5,"_190":236,"_27":237},{"_43":222,"_32":223,"_30":224,"_136":155,"_41":42,"_40":225,"_138":49,"_38":226,"_13":150,"_34":20,"_36":227,"_24":49,"_143":-5,"_190":228,"_27":229},{"_43":213,"_32":214,"_30":215,"_136":155,"_41":42,"_40":216,"_138":25,"_38":217,"_13":218,"_34":35,"_36":219,"_24":49,"_143":-5,"_190":220,"_27":221},{"_43":205,"_32":206,"_30":207,"_136":155,"_41":42,"_40":208,"_138":49,"_38":209,"_13":63,"_34":20,"_36":210,"_24":49,"_143":-5,"_190":211,"_27":212},{"_43":196,"_32":197,"_30":198,"_136":155,"_41":42,"_40":199,"_138":49,"_38":200,"_13":201,"_34":35,"_36":202,"_24":49,"_143":-5,"_190":203,"_27":204},{"_43":145,"_32":146,"_30":147,"_136":-5,"_41":42,"_40":148,"_138":25,"_38":193,"_13":150,"_34":20,"_36":151,"_24":49,"_143":-5,"_190":194,"_27":195},{"_43":134,"_32":135,"_30":58,"_136":-5,"_41":42,"_40":137,"_138":25,"_38":189,"_13":140,"_34":141,"_36":142,"_24":49,"_143":45,"_190":191,"_27":192},["D",1788037454141],"children",[],[135],["D",1788025063496],[],[146],"02f34b72-5bb3-40f0-a579-1354e7912ae8","root.tsx","01a04b7f-e043-776f-9b1e-554f5bc7b179",172,["D",1788037464582],17,"/** @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 · v173