[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_110":111,"_112":113},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","altors_graphika","name","polyatomics","path","frontend/components/QuizScreen.tsx","project",{"_22":49,"_11":12,"_35":50,"_51":-5,"_52":44,"_53":54,"_55":54,"_56":57,"_58":-5,"_59":60,"_61":62,"_63":34,"_64":-5,"_65":-5,"_66":67,"_68":69,"_70":71,"_72":73,"_74":75,"_76":-5,"_77":78,"_79":78,"_80":81,"_82":81,"_83":81,"_84":78,"_85":78,"_86":87,"_88":89,"_90":91,"_92":44},"file",{"_22":23,"_11":24,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":-5,"_13":46},"permalink","https://www.val.town/x/altors_graphika/polyatomics/code/frontend/components/QuizScreen.tsx","extension","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],"version",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",[47,48,24],"frontend","components","b7e65ae6-0a45-4ddf-9a18-259d42abc50b",["D",1787973066715],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Practice polyatomic ion formulas and charges","imageUrl","userId","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",{"_9":10,"_109":105},"org",{"_9":10,"_102":103,"_104":105,"_59":60,"_106":107,"_108":44},"branch",{"_37":32,"_11":93,"_22":30,"_94":49,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":12,"_101":10},"isOwned","main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","Altors-Graphika","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/d88c49d9-df42-4251-2a99-48ca93b86e01/square512?exp=1789559999&sig=7b3d9a97ea4902d13248fb01be8dacc8ab7e4711a5fdeb43a58086b27e2e5181","tier","free","canRestrictVals","profileImageUrl","ctx",{"_86":-5,"_143":144,"_145":146,"_147":148,"_149":44,"_150":44,"_151":44,"_152":34,"_153":-5,"_154":-7,"_155":-7,"_156":67,"_157":44,"_158":44,"_159":-5,"_160":44,"_161":44,"_162":44,"_163":-5},"ENV",{"_114":115,"_116":117,"_118":93,"_119":120,"_121":122,"_123":124,"_125":126,"_127":128,"_129":130,"_131":132,"_133":134,"_135":136,"_137":138,"_139":140,"_141":142},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town","orgs",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]