[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_281":282,"_283":284},"routes/_app.x.$handle.$name",{"_101":100,"_32":46,"_110":91,"_27":111,"_13":14,"_112":-5,"_11":113,"_114":115,"_116":117,"_118":119,"_120":121,"_20":-5,"_122":-5,"_123":-5,"_124":25,"_125":126,"_127":60,"_128":-5,"_129":-5,"_130":131},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70,"_71":72,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":84,"_85":86,"_87":88,"_89":25},"version",63,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","frontend/components/App.tsx","latestPath","fileId","01a04b7f-e043-776f-9b1e-40b6a00a2aa2","name","App.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useRef, useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { Flame, Clock3, CheckCircle2, RotateCcw, Settings2, Trophy, Target, Zap, Square } from \"https://esm.sh/lucide-react@0.468.0?deps=react@18.2.0,react-dom@18.2.0\";\n\ntype Ion = { name: string; formula: string; charge: string; category: string };\ntype Config = { seconds: number | null; categories: string[]; ions: string[]; loop: boolean };\ntype Attempt = { correct: boolean; ion: Ion; timeLeft: number | null };\n\nconst IONS: Ion[] = [\n { name: \"acetate\", formula: \"C2H3O2\", charge: \"−1\", category: \"Common\" },\n { name: \"ammonium\", formula: \"NH4\", charge: \"+1\", category: \"Common\" },\n { name: \"bicarbonate\", formula: \"HCO3\", charge: \"−1\", category: \"Common\" },\n { name: \"bisulfate\", formula: \"HSO4\", charge: \"−1\", category: \"Common\" },\n { name: \"bisulfite\", formula: \"HSO3\", charge: \"−1\", category: \"Common\" },\n { name: \"borate\", formula: \"BO3\", charge: \"−3\", category: \"Oxyanion\" },\n { name: \"bromate\", formula: \"BrO3\", charge: \"−1\", category: \"Oxyanion\" },\n { name: \"bromite\", formula: \"BrO2\", charge: \"−1\", category: \"Oxyanion\" },\n { name: \"carbonate\", formula: \"CO3\", charge: \"−2\", category: \"Common\" },\n { name: \"chlorate\", formula: \"ClO3\", charge: \"−1\", category: \"Oxyanion\" },\n { name: \"chlorite\", formula: \"ClO2\", charge: \"−1\", category: \"Oxyanion\" },\n { name: \"chromate\", formula: \"CrO4\", charge: \"−2\", category: \"Oxyanion\" },\n { name: \"cyanide\", formula: \"CN\", charge: \"−1\", category: \"Common\" },\n { name: \"dichromate\", formula: \"Cr2O7\", charge: \"−2\", category: \"Oxyanion\" },\n { name: \"dihydrogen phosphate\", formula: \"H2PO4\", charge: \"−1\", category: \"Oxyanion\" },\n { name: \"hydrogen phosphate\", formula: \"HPO4\", charge: \"−2\", category: \"Oxyanion\" },\n { name: \"hydroxide\", formula: \"OH\", charge: \"−1\", category: \"Common\" },\n { name: \"hypochlorite\", formula: \"ClO\", charge: \"−1\", category: \"Oxyanion\" },\n { name: \"iodate\", formula: \"IO3\", charge: \"−1\", category: \"Oxyanion\" },\n { name: \"iodite\", formula: \"IO2\", charge: \"−1\", category: \"Oxyanion\" },\n { name: \"manganate\", formula: \"MnO4\", charge: \"−2\", category: \"Oxyanion\" },\n { name: \"nitrate\", formula: \"NO3\", charge: \"−1\", category: \"Common\" },\n { name: \"nitrite\", formula: \"NO2\", charge: \"−1\", category: \"Common\" },\n { name: \"oxalate\", formula: \"C2O4\", charge: \"−2\", category: \"Organic\" },\n { name: \"perchlorate\", formula: \"ClO4\", charge: \"−1\", category: \"Oxyanion\" },\n { name: \"permanganate\", formula: \"MnO4\", charge: \"−1\", category: \"Oxyanion\" },\n { name: \"peroxide\", formula: \"O2\", charge: \"−2\", category: \"Common\" },\n { name: \"phosphate\", formula: \"PO4\", charge: \"−3\", category: \"Common\" },\n { name: \"phosphite\", formula: \"PO3\", charge: \"−3\", category: \"Oxyanion\" },\n { name: \"silicate\", formula: \"SiO3\", charge: \"−2\", category: \"Oxyanion\" },\n { name: \"sulfate\", formula: \"SO4\", charge: \"−2\", category: \"Common\" },\n { name: \"sulfite\", formula: \"SO3\", charge: \"−2\", category: \"Common\" },\n { name: \"thiocyanate\", formula: \"SCN\", charge: \"−1\", category: \"Organic\" },\n { name: \"thiosulfate\", formula: \"S2O3\", charge: \"−2\", category: \"Oxyanion\" },\n];\n\nconst SUB = [\"₀\",\"₁\",\"₂\",\"₃\",\"₄\",\"₅\",\"₆\",\"₇\",\"₈\",\"₉\"];\nconst FORMULA_PATTERN = \"[A-Z][a-z]?[0-9₀₁₂₃₄₅₆₇₈₉]*(?:[A-Z][a-z]?[0-9₀₁₂₃₄₅₆₇₈₉]*)*\";\nconst CHARGE_PATTERN = \"(?:[+−-]?\\\\d+|\\\\d+[+−-]|[+−-])\";\nconst CATEGORIES = [\"Common\", \"Oxyanion\", \"Organic\"];\n\nfunction normalizeFormula(value: string) {\n return value.trim().replace(/\\s/g, \"\").replace(/[₀₁₂₃₄₅₆₇₈₉]/g, (c) => String(SUB.indexOf(c)));\n}\nfunction 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}\nfunction shuffle(items: T[]) { return [...items].sort(() => Math.random() - 0.5); }\nfunction formatFormula(value: string) { return value.replace(/(\\d+)/g, (n) => n.split(\"\").map((d) => SUB[Number(d)]).join(\"\")); }\nfunction 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}\nfunction 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\nfunction FormulaInput({ value, onChange, onInsert, onClear, charge = false }: { value: string; onChange: (v: string) => void; onInsert: (v: string) => void; onClear: () => void; charge?: boolean }) {\n const inputRef = useRef(null);\n const keys = charge ? [\"+\", \"−\"] : [\"₂\", \"₃\", \"₄\", \"₅\", \"₆\", \"₇\", \"₈\", \"₉\"];\n const appendKey = (key: string) => { onInsert(key); requestAnimationFrame(() => inputRef.current?.focus()); };\n return (\n

\n onChange(e.target.value)} placeholder={charge ? \"e.g. −2…\" : \"e.g. SO₄…\"} pattern={charge ? CHARGE_PATTERN : FORMULA_PATTERN} inputMode={charge ? \"tel\" : \"text\"} autoComplete=\"off\" spellCheck={false} name={charge ? \"charge\" : \"formula\"} aria-label={charge ? \"Charge\" : \"Formula\"} className=\"min-w-0 flex-1 bg-transparent text-[30px] font-bold tracking-tight text-[#3c3c3c] outline-none placeholder:text-[#777] invalid:text-[#b3261e] invalid:ring-4 invalid:ring-[#ea2b2b]/20 focus-visible:ring-2 focus-visible:ring-[#58cc02]/30\" />\n {value && }\n

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

\n );\n}\n\nfunction StartScreen({ config, setConfig, onStart }: { config: Config; setConfig: (c: Config) => void; onStart: () => void }) {\n const toggleCategory = (category: string) => setConfig({ ...config, categories: config.categories.includes(category) ? config.categories.filter((c) => c !== category) : [...config.categories, category] });\n const toggleIon = (name: string) => {\n const ion = IONS.find((item) => item.name === name)!;\n if (config.categories.includes(ion.category)) return;\n setConfig({ ...config, ions: config.ions.includes(name) ? config.ions.filter((item) => item !== name) : [...config.ions, name] });\n };\n const categoryNames = new Set(IONS.filter((ion) => config.categories.includes(ion.category)).map((ion) => ion.name));\n const selectedNames = new Set([...categoryNames, ...config.ions]);\n const isIncluded = (ion: Ion) => selectedNames.has(ion.name);\n const isCategoryIncluded = (ion: Ion) => categoryNames.has(ion.name);\n const selectAll = () => setConfig({ ...config, categories: CATEGORIES, ions: [] });\n const clearAll = () => setConfig({ ...config, categories: [], ions: [] });\n const minutes = config.seconds === null ? \"\" : String(config.seconds / 60);\n const setMinutes = (raw: string) => {\n if (raw === \"\") return setConfig({ ...config, seconds: null });\n const value = Number(raw);\n if (Number.isFinite(value) && value > 0) setConfig({ ...config, seconds: value * 60 });\n };\n return (\n

Polyatomics

Time limit

setMinutes(e.target.value)} name=\"customMinutes\" aria-label=\"Custom time limit in minutes\" placeholder=\"e.g. 1.5…\" className=\"h-10 w-36 rounded-[10px] border-[2px] border-[#d7d9db] bg-white px-3 text-sm font-bold text-[#4b4b4b] outline-none focus:border-[#58cc02] focus-visible:ring-2 focus-visible:ring-[#58cc02]/30\" />or choose unlimited

Ions

{CATEGORIES.map((category) => )}

{IONS.map((ion) => { const included = isIncluded(ion); const viaCategory = isCategoryIncluded(ion); return ; })}

{selectedNames.size} of {IONS.length} ions selected. Category selections are shown as included above.

Loop mode

Keep cycling randomly until you end the session.

\n \n

\n );\n}\n\nfunction EndScreen({ attempts, config, onRetry, onNew }: { attempts: Attempt[]; config: Config; onRetry: () => void; onNew: () => void }) {\n const correct = attempts.filter((a) => a.correct).length;\n const accuracy = attempts.length ? Math.round(correct / attempts.length * 100) : 0;\n const validTimes = attempts.filter((a) => a.timeLeft !== null && config.seconds !== null).map((a) => config.seconds! - a.timeLeft!);\n const averageTime = validTimes.length ? (validTimes.reduce((a,b) => a+b, 0) / validTimes.length).toFixed(1) : \"—\";\n const missed = [...new Set(attempts.filter((a) => !a.correct).map((a) => a.ion.name))];\n return (\n

Session complete!

Here’s how your recall went.

} value={`${accuracy}%`} label=\"accuracy\"/>} value={`${correct}/${attempts.length}`} label=\"correct\"/>} value={averageTime === \"—\" ? \"—\" : averageTime + \"s\"} label=\"avg. answer\"/>

Your strengths{missed.length ? \"Keep practicing\" : \"Excellent recall\"}

{missed.length ? <>Review {missed.slice(0,3).join(\", \")}{missed.length > 3 ? ` and ${missed.length - 3} more` : \"\"} next time. : <>You answered every question correctly. Try a shorter time limit or more ions for a harder round.}

\n );\n}\nfunction Stat({ icon, value, label }: { icon: React.ReactNode; value: string; label: string }) { return

{icon}

{value}

{label}

; }\n\nexport function App() {\n const [screen, setScreen] = useState<\"start\" | \"quiz\" | \"end\">(\"start\");\n const [config, setConfig] = useState({ seconds: 120, categories: [\"Common\", \"Oxyanion\"], ions: [], loop: false });\n const [pool, setPool] = useState([]);\n const [ion, setIon] = useState(IONS[0]);\n const [index, setIndex] = useState(0);\n const [formula, setFormula] = useState(\"\");\n const [charge, setCharge] = useState(\"\");\n const [checked, setChecked] = useState(false);\n const [correct, setCorrect] = useState(0);\n const [attempts, setAttempts] = useState(0);\n const [streak, setStreak] = useState(0);\n const [timeLeft, setTimeLeft] = useState(config.seconds);\n const [history, setHistory] = useState([]);\n\n const selectedPool = () => {\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 const formulaCorrect = normalizeFormula(formula) === ion.formula;\n const chargeCorrect = normalizeCharge(charge) === normalizeCharge(ion.charge);\n const answerCorrect = formulaCorrect && chargeCorrect;\n const progress = pool.length ? (config.loop ? Math.min(100, ((attempts % pool.length) + (checked && answerCorrect ? 1 : 0)) / pool.length * 100) : Math.min(100, (index + (checked && answerCorrect ? 1 : 0)) / pool.length * 100)) : 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 useEffect(() => {\n if (screen === \"quiz\" && timeLeft === 0 && config.seconds !== null) setScreen(\"end\");\n }, [screen, timeLeft, config.seconds]);\n\n const begin = () => {\n const nextPool = shuffle(selectedPool());\n setPool(nextPool); setIon(nextPool[0]); setIndex(0); setFormula(\"\"); setCharge(\"\"); setChecked(false); setCorrect(0); setAttempts(0); setStreak(0); setTimeLeft(config.seconds); setHistory([]); setScreen(nextPool.length ? \"quiz\" : \"start\");\n };\n const advance = () => {\n if (!pool.length) return;\n if (!config.loop && index >= pool.length - 1) { setScreen(\"end\"); return; }\n const nextIndex = config.loop ? (index + 1) % pool.length : index + 1;\n const next = config.loop ? pickNext(pool, ion) : pool[nextIndex];\n setIndex(nextIndex); setIon(next); setFormula(\"\"); setCharge(\"\"); setChecked(false);\n };\n const skip = () => { setStreak(0); advance(); };\n const check = () => {\n const record: Attempt = { correct: answerCorrect, ion, timeLeft };\n setHistory((items) => [...items, record]); setAttempts((n) => n + 1); setChecked(true);\n if (answerCorrect) { setCorrect((n) => n + 1); setStreak((n) => n + 1); }\n else setStreak(0);\n };\n const submit = () => { if (answerCorrect && checked) advance(); else check(); };\n\n if (screen === \"start\") return ;\n if (screen === \"end\") return setScreen(\"start\")} />;\n return (\n

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

{ion.name}

{ setFormula(v); setChecked(false); }} onInsert={(v) => { setFormula((x) => x + v); setChecked(false); }} onClear={() => { setFormula(\"\"); setChecked(false); }} /> { setCharge(v); setChecked(false); }} onInsert={(v) => { setCharge((x) => x + v); setChecked(false); }} onClear={() => { setCharge(\"\"); setChecked(false); }} />

{checked && !answerCorrect &&

Not quite. Try again.

}{checked && answerCorrect &&

Correct! {formatFormula(ion.formula)} {formatCharge(ion.charge)}

{config.loop && }

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

\n );\n}\n","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useRef, useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { Flame, Clock3, CheckCircle2, RotateCcw, Settings2, Trophy, Target, Zap, Square } from \"https://esm.sh/lucide-react@0.468.0?deps=react@18.2.0,react-dom@18.2.0\";\n\ntype Ion = { name: string; formula: string; charge: string; category: string };\ntype Config = { seconds: number | null; categories: string[]; ions: string[]; loop: boolean };\ntype Attempt = { correct: boolean; ion: Ion; timeLeft: number | null };\n\nconst IONS: Ion[] = [\n { name: \"acetate\", formula: \"C2H3O2\", charge: \"−1\", category: \"Common\" },\n { name: \"ammonium\", formula: \"NH4\", charge: \"+1\", category: \"Common\" },\n { name: \"bicarbonate\", formula: \"HCO3\", charge: \"−1\", category: \"Common\" },\n { name: \"bisulfate\", formula: \"HSO4\", charge: \"−1\", category: \"Common\" },\n { name: \"bisulfite\", formula: \"HSO3\", charge: \"−1\", category: \"Common\" },\n { name: \"borate\", formula: \"BO3\", charge: \"−3\", category: \"Oxyanion\" },\n { name: \"bromate\", formula: \"BrO3\", charge: \"−1\", category: \"Oxyanion\" },\n { name: \"bromite\", formula: \"BrO2\", charge: \"−1\", category: \"Oxyanion\" },\n { name: \"carbonate\", formula: \"CO3\", charge: \"−2\", category: \"Common\" },\n { name: \"chlorate\", formula: \"ClO3\", charge: \"−1\", category: \"Oxyanion\" },\n { name: \"chlorite\", formula: \"ClO2\", charge: \"−1\", category: \"Oxyanion\" },\n { name: \"chromate\", formula: \"CrO4\", charge: \"−2\", category: \"Oxyanion\" },\n { name: \"cyanide\", formula: \"CN\", charge: \"−1\", category: \"Common\" },\n { name: \"dichromate\", formula: \"Cr2O7\", charge: \"−2\", category: \"Oxyanion\" },\n { name: \"dihydrogen phosphate\", formula: \"H2PO4\", charge: \"−1\", category: \"Oxyanion\" },\n { name: \"hydrogen phosphate\", formula: \"HPO4\", charge: \"−2\", category: \"Oxyanion\" },\n { name: \"hydroxide\", formula: \"OH\", charge: \"−1\", category: \"Common\" },\n { name: \"hypochlorite\", formula: \"ClO\", charge: \"−1\", category: \"Oxyanion\" },\n { name: \"iodate\", formula: \"IO3\", charge: \"−1\", category: \"Oxyanion\" },\n { name: \"iodite\", formula: \"IO2\", charge: \"−1\", category: \"Oxyanion\" },\n { name: \"manganate\", formula: \"MnO4\", charge: \"−2\", category: \"Oxyanion\" },\n { name: \"nitrate\", formula: \"NO3\", charge: \"−1\", category: \"Common\" },\n { name: \"nitrite\", formula: \"NO2\", charge: \"−1\", category: \"Common\" },\n { name: \"oxalate\", formula: \"C2O4\", charge: \"−2\", category: \"Organic\" },\n { name: \"perchlorate\", formula: \"ClO4\", charge: \"−1\", category: \"Oxyanion\" },\n { name: \"permanganate\", formula: \"MnO4\", charge: \"−1\", category: \"Oxyanion\" },\n { name: \"peroxide\", formula: \"O2\", charge: \"−2\", category: \"Common\" },\n { name: \"phosphate\", formula: \"PO4\", charge: \"−3\", category: \"Common\" },\n { name: \"phosphite\", formula: \"PO3\", charge: \"−3\", category: \"Oxyanion\" },\n { name: \"silicate\", formula: \"SiO3\", charge: \"−2\", category: \"Oxyanion\" },\n { name: \"sulfate\", formula: \"SO4\", charge: \"−2\", category: \"Common\" },\n { name: \"sulfite\", formula: \"SO3\", charge: \"−2\", category: \"Common\" },\n { name: \"thiocyanate\", formula: \"SCN\", charge: \"−1\", category: \"Organic\" },\n { name: \"thiosulfate\", formula: \"S2O3\", charge: \"−2\", category: \"Oxyanion\" },\n];\n\nconst SUB = [\"₀\",\"₁\",\"₂\",\"₃\",\"₄\",\"₅\",\"₆\",\"₇\",\"₈\",\"₉\"];\nconst FORMULA_PATTERN = \"[A-Z][a-z]?[0-9₀₁₂₃₄₅₆₇₈₉]*(?:[A-Z][a-z]?[0-9₀₁₂₃₄₅₆₇₈₉]*)*\";\nconst CHARGE_PATTERN = \"(?:[+−-]?\\\\d+|\\\\d+[+−-]|[+−-])\";\nconst CATEGORIES = [\"Common\", \"Oxyanion\", \"Organic\"];\n\nfunction normalizeFormula(value: string) {\n return value.trim().replace(/\\s/g, \"\").replace(/[₀₁₂₃₄₅₆₇₈₉]/g, (c) => String(SUB.indexOf(c)));\n}\nfunction 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}\nfunction shuffle(items: T[]) { return [...items].sort(() => Math.random() - 0.5); }\nfunction formatFormula(value: string) { return value.replace(/(\\d+)/g, (n) => n.split(\"\").map((d) => SUB[Number(d)]).join(\"\")); }\nfunction 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}\nfunction 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\nfunction FormulaInput({ value, onChange, onInsert, onClear, charge = false }: { value: string; onChange: (v: string) => void; onInsert: (v: string) => void; onClear: () => void; charge?: boolean }) {\n const inputRef = useRef(null);\n const keys = charge ? [\"+\", \"−\"] : [\"₂\", \"₃\", \"₄\", \"₅\", \"₆\", \"₇\", \"₈\", \"₉\"];\n const appendKey = (key: string) => { onInsert(key); requestAnimationFrame(() => inputRef.current?.focus()); };\n return (\n

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

Polyatomics

Time limit

Ions

{CATEGORIES.map((category) => )}

{IONS.map((ion) => { const included = isIncluded(ion); const viaCategory = isCategoryIncluded(ion); return ; })}

{selectedNames.size} of {IONS.length} ions selected. Category selections are shown as included above.

Loop mode

Keep cycling randomly until you end the session.

\n \n

Session complete!

Here’s how your recall went.

} value={`${accuracy}%`} label=\"accuracy\"/>} value={`${correct}/${attempts.length}`} label=\"correct\"/>} value={averageTime === \"—\" ? \"—\" : averageTime + \"s\"} label=\"avg. answer\"/>

Your strengths{missed.length ? \"Keep practicing\" : \"Excellent recall\"}

\n );\n}\nfunction Stat({ icon, value, label }: { icon: React.ReactNode; value: string; label: string }) { return

{icon}

{value}

{label}

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

{ion.name}

{checked && !answerCorrect &&

Not quite. Try again.

}{checked && answerCorrect &&

Correct! {formatFormula(ion.formula)} {formatCharge(ion.charge)}

}{config.loop && }

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

\n );\n}\n","createdAt",["D",1787981728753],"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",{"_101":100,"_109":105},"org",{"_101":100,"_102":103,"_104":105,"_18":56,"_106":107,"_108":25},"branch",{"_13":90,"_32":91,"_44":43,"_92":45,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":46,"_99":100},"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=1789592399&sig=1edd311be755875dfff0451b47c83c6e8dcdefd952499d5ca67d895b55b5331d","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_32":46,"_39":276,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70,"_71":277,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":278,"_85":279,"_87":280,"_89":25},"tree",[176,187,188,189],"files",[176,177,178,179,180,181,182,183,184,185,186,187,188,189],"counts",{"_166":64,"_167":150,"_168":64,"_169":170,"_171":172},"contents",[132,133,134,135],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_44":160,"_32":161,"_30":162,"_138":-5,"_42":43,"_41":150,"_140":60,"_39":163,"_13":64,"_34":164,"_36":-5,"_24":25,"_145":-5,"_27":165},{"_44":154,"_32":155,"_30":156,"_138":-5,"_42":43,"_41":150,"_140":25,"_39":157,"_13":64,"_34":20,"_36":158,"_24":25,"_145":-5,"_27":159},{"_44":147,"_32":148,"_30":149,"_138":-5,"_42":43,"_41":150,"_140":25,"_39":151,"_13":64,"_34":20,"_36":152,"_24":25,"_145":-5,"_27":153},{"_44":136,"_32":137,"_30":58,"_138":-5,"_42":43,"_41":139,"_140":25,"_39":141,"_13":142,"_34":143,"_36":144,"_24":25,"_145":46,"_27":146},"9810e306-2f7d-4471-abdd-8f1231d40f76","index.ts","parentId",54,"latest",["D",1787980977902],3,"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(\"/sw.js\", (c) => c.body(`const CACHE = \"polyatomics-v1\";\\nconst SHELL = [\"/\"];\\nself.addEventListener(\"install\", (event) => { event.waitUntil(caches.open(CACHE).then((cache) => cache.addAll(SHELL)).then(() => self.skipWaiting())); });\\nself.addEventListener(\"activate\", (event) => { event.waitUntil(caches.keys().then((keys) => Promise.all(keys.filter((key) => key !== CACHE).map((key) => caches.delete(key)))).then(() => self.clients.claim())); });\\nself.addEventListener(\"fetch\", (event) => { const request = event.request; if (request.method !== \"GET\") return; event.respondWith(caches.match(request).then((cached) => cached || fetch(request).then((response) => { if (response.ok || response.type === \"opaque\") { const copy = response.clone(); caches.open(CACHE).then((cache) => cache.put(request, copy)); } return response; }).catch(() => request.mode === \"navigate\" ? caches.match(\"/\") : new Response(\"Offline\", { status: 503, statusText: \"Offline\" })))); });`, 200, { \"Content-Type\": \"application/javascript; charset=UTF-8\", \"Cache-Control\": \"no-cache\" }));\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",[137],"ddc42079-4ac9-4955-8cba-fc0870e3ce3c","README.md","01a04b7f-e043-776f-9b1e-61c237442125",1,["D",1787973066715],"# React + Hono Starter\n\nA minimal starter template for building client-side React apps with a Hono\nbackend on Val Town. Click **Remix** to get your own copy.\n\n## Picking a starter\n\n| Starter | When to pick it |\n| --- | --- |\n| [`basic-html-starter`](https://www.val.town/x/templates/basic-html-starter) | Static HTML pages. Sprinkle of vanilla JS. No server-side rendering. |\n| [`hono-jsx-starter`](https://www.val.town/x/templates/hono-jsx-starter) | Dynamic server-rendered HTML with JSX. API routes. No React, no SPA. |\n| **[`react-hono-starter`](https://www.val.town/x/templates/react-hono-starter)** *(you're here)* | Client-side React SPA with a Hono API backend. |\n\n**Want to build UI?** Start writing React components in\n[`frontend/components/`](/frontend/components/). Import them into `App.tsx` and\nyou're good to go. Styling is [Twind](https://twind.style/) — just use Tailwind\nutility classes, zero config.\n\n**Want to add an API?** Add routes in [`index.ts`](/index.ts) (there's a\ncommented-out example). Fetch them from your React components.\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"GET /\"| Hono[\"index.ts
(Hono server)\"]\n Hono -->|serves| HTML[\"root.tsx\"]\n HTML -->|loads| Entry[\"index.tsx\"]\n Entry -->|renders| App[\"App.tsx\"]\n App -->|renders| Counter[\"Counter.tsx\"]\n```\n\n## File structure\n\n```\nindex.ts ← Hono backend (serves frontend + API routes)\nfrontend/\n root.tsx ← HTML shell (stamps immutable asset URLs)\n index.tsx ← React entrypoint (mounts )\n favicon.svg ← App icon\n components/\n App.tsx ← Root component (layout + view source link)\n Counter.tsx ← Example component with state\n```\n\n## How it works\n\n1. **`index.ts`** is the HTTP entrypoint — a Hono server that serves the\n frontend and any API routes you add.\n2. **`frontend/root.tsx`** is the HTML shell — it loads Twind and stamps\n immutable asset URLs for the favicon and React entrypoint.\n3. **`frontend/index.tsx`** mounts the React app.\n4. **`frontend/components/App.tsx`** is the root layout — add new components\n alongside it.\n5. **`frontend/components/Counter.tsx`** is an example stateful component —\n replace it with your own!\n\n## Next steps\n\n- Add API routes in `index.ts`\n- Add new components in `frontend/components/`\n- Add a SQLite database — see the\n [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) for\n a full-stack example with database, queries, and shared types\n\nTemplate updates and upgrade paths for existing remixes: [CHANGELOG.md](/CHANGELOG.md)\n",[148],"2f8efb19-122b-4b2a-87f5-04cb543486ff","CHANGELOG.md","01a04b7f-e043-776f-9b1e-5cae9d820f79",["D",1787973066715],"# Changelog\n\n## 2026-07-30 — Immutable asset caching\n\nFrontend files are now served at version-addressed URLs\n(`/__immutable/45/frontend/index.tsx`) with\n`Cache-Control: public, max-age=31536000, immutable`, so repeat visits load the\nwhole client graph from the browser cache — roughly 3× faster (~665ms → ~157ms\nmeasured). Publishing your val bumps its version, which changes every URL, so\ncaches invalidate automatically. Old-version URLs return 404 after a publish\n(like Next.js build assets); a reload picks up the new version.\n\nWhat changed in the template:\n\n- `frontend/index.html` → [`frontend/root.tsx`](/frontend/root.tsx): the HTML\n shell is now JSX and stamps asset URLs with `immutableFileUrl()`\n- [`index.ts`](/index.ts): serves `Root()` at `/`, and one\n `app.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path))` route\n serves all frontend files\n\n### Upgrading an existing remix\n\nYour copy of this template doesn't update automatically. Two options:\n\n**Minimal (most of the benefit):** point both routes at `serveImmutableFile` —\nyour existing bare URLs redirect into versioned space, the new route serves\nthem, and the whole module graph gets cached (costs one redirect per page view):\n\n```ts\nimport { serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\n\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\napp.get(\"/frontend/**/*\", (c) => serveImmutableFile(c.req.path)); // was serveFile\n```\n\n**Full upgrade (also removes the redirect):** three self-contained steps —\nno other files needed. Adjust the ``, favicon, and body of `Root()` to\nmatch your app's existing `index.html`, and stamp anything else your shell\nreferences directly (images, css) with `immutableFileUrl()`.\n\n1. Create `frontend/root.tsx`:\n\n```tsx\n/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\n// The HTML shell for the app. It is never cached, so immutableFileUrl can stamp\n// the current val version into each asset URL — the browser caches those\n// immutably, and publishing the val changes the URLs, refetching exactly once.\nexport function Root() {\n return (\n <>\n {raw(\"<!DOCTYPE html>\")}\n <html lang=\"en\">\n <head>\n <meta charSet=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>React Hono Val Town Starter\n

Diff · v63