\n \n \n \n\n",[],[208,291],"34f6bc1e-5cc8-11f1-aad0-1607ee4eb77e","device.ts","0fc5dbd6-5cc4-11f1-b9e7-1607ee4eb77e",16,["D",1780215037675],"// The device envelope. Every UI component reads from here, so the web\n// prototype can never accidentally exceed what the ePaper + ESP32 will do.\n// When real hardware specs land, change them HERE and the whole sim follows.\n\nexport const DEVICE = {\n // ePaper panel, portrait. Logical px ~= device px at 1x.\n screen: { w: 296, h: 416 },\n\n // Monochrome only. No colour is reachable on the panel — the sim renders\n // strictly in these two inks so we never design something we can't ship.\n ink: \"#111111\",\n paper: \"#f4f4ee\",\n\n // Capacitive touch on the eInk panel — tap is a real device gesture, not a\n // sim-only convenience. So tapping the card to reveal is faithful.\n touch: true,\n // Three physical buttons, which map exactly to the grade taxonomy.\n // (Touch also unlocks the deferred selection ops — recognise/contrast — later.)\n buttons: 3,\n\n // ePaper is slow. Simulated refresh delays make the rhythm honest:\n // full refresh flashes and is slow; partial refresh (the card flip) is quicker.\n refresh: { full: 700, partial: 200 },\n} as const;\n\n// The three buttons, in fixed order. Doubles as the grade vocabulary.\nexport const GRADES = [\n { key: \"miss\", label: \"Didn't know\" },\n { key: \"almost\", label: \"Almost\" },\n { key: \"got\", label: \"Got it\" },\n] as const;\n\nexport type GradeKey = (typeof GRADES)[number][\"key\"];\n\n// Bearer token. In the sim it's the dev token; on device it's provisioned to\n// firmware. Never entered through this UI — it models a device credential.\nexport const DEVICE_TOKEN = \"dev-token\";\n",[],[208,299],"ea6b3bd2-5d41-11f1-985b-1607ee4eb77e","api.ts","154c8988-5cc4-11f1-a41f-1607ee4eb77e",41,["D",1780267311199],"import { DEVICE_TOKEN, type GradeKey } from \"./device.ts\";\n\n// Models the device's entire network surface: two calls per session.\n// Fetch one batch, post the buffered grades. No per-card round trips.\n\nexport type Card = { id: number; op: string; q: string; a: string };\nexport type Profile = { id: number; label: string };\nexport type Branch = { id: number; label: string };\n\nconst auth = { Authorization: `Bearer ${DEVICE_TOKEN}` };\n\nasync function get(path: string): Promise {\n const r = await fetch(path, { headers: auth });\n if (!r.ok) throw new Error(`${path} → ${r.status}`);\n return r.json();\n}\n\nexport async function fetchProfiles(): Promise {\n return (await get<{ profiles: Profile[] }>(\"/api/profiles\")).profiles;\n}\n\nexport async function fetchBranches(): Promise {\n return (await get<{ branches: Branch[] }>(\"/api/branches\")).branches;\n}\n\nexport type Quadrant = {\n id: number;\n label: string;\n ord: number;\n branch: boolean; // has sub-quadrants (descend) vs leaf (review)\n total: number;\n due: number;\n mastered: number;\n};\n\n// The quadrants at one level: children of `parent`, or the top four for \"root\".\nexport async function fetchQuadrants(profile: number, parent: number | \"root\"): Promise {\n return (await get<{ quadrants: Quadrant[] }>(`/api/quadrants/${profile}/${parent}`)).quadrants;\n}\n\n// One fetch at session start: the windowed due batch for this profile + branch.\nexport async function fetchSession(profile: number, branch: number): Promise {\n return (await get<{ cards: Card[] }>(`/api/session/${profile}/${branch}`)).cards;\n}\n\n// One post at session end: all buffered grades together.\nexport async function postGrades(\n profile: number,\n grades: { id: number; grade: GradeKey }[],\n): Promise {\n const r = await fetch(\"/api/grades\", {\n method: \"POST\",\n headers: { ...auth, \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ profile, grades }),\n });\n if (!r.ok) throw new Error(`/api/grades → ${r.status}`);\n return (await r.json()).applied;\n}\n",[],[208,307],"3a61eae0-5d43-11f1-ad23-1607ee4eb77e","admin.tsx","3a61ebc6-5d43-11f1-ad23-1607ee4eb77e",48,["D",1780267874874],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { Dashboard } from \"./components/Dashboard.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) throw new Error(\"No root element found\");\ncreateRoot(root).render();\n",[],[208,315],"3831e5fe-5d43-11f1-83b5-1607ee4eb77e","admin.html","3831e6da-5d43-11f1-83b5-1607ee4eb77e",47,["D",1780267871207],"\n\n \n \n \n primer — admin\n \n \n \n

\n \n \n \n\n",[],[208,323],"3051c3c4-5cc4-11f1-9010-1607ee4eb77e","ZoneEntry.tsx","3051c48c-5cc4-11f1-9010-1607ee4eb77e","9e07f141-773d-42a7-8481-8834afece6d2",11,["D",1780213311908],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { DEVICE } from \"../device.ts\";\nimport type { Branch, Profile } from \"../api.ts\";\nimport { ButtonBar } from \"./ButtonBar.tsx\";\n\n// Entering the primer zone in Mochi's world: pick who's playing (device is\n// shared, profile chosen per session), then which branch — self-directed,\n// free choice across branches. Both are list picks driven by the 3 buttons:\n// Down / Select / (back). Models in-world navigation, not a rich menu.\nexport function ZoneEntry({\n title,\n items,\n cursor,\n onButton,\n}: {\n title: string;\n items: (Profile | Branch)[];\n cursor: number;\n onButton: (i: number) => void;\n}) {\n return (\n

\n {title}\n

\n {items.map((it, i) => (\n \n {i === cursor ? \"▶\" : \"\"}\n {it.label}\n

\n ))}\n

\n \n \n );\n}\n",[],[208,339,331],"components","e1cbdd10-5d41-11f1-938a-1607ee4eb77e","TileGrid.tsx","e1cbde00-5d41-11f1-938a-1607ee4eb77e",39,["D",1780267296707],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { DEVICE } from \"../device.ts\";\n\n// A 2×2 grid of up to four tappable tiles — the capacitive primitive. The grid\n// shape IS the four-way branching factor. Fewer than four → faint empty slots.\n// Reused for both profile selection and the knowledge map.\nexport type Tile = { key: string | number; title: string; sub?: string; corner?: string };\n\nexport function TileGrid({ tiles, onTap }: { tiles: Tile[]; onTap: (index: number) => void }) {\n const slots: (Tile | null)[] = [0, 1, 2, 3].map((i) => tiles[i] ?? null);\n return (\n

\n {slots.map((tile, i) => (\n tile && onTap(i)}\n className=\"relative flex flex-col items-center justify-center text-center p-2 disabled:opacity-20\"\n style={{\n background: DEVICE.paper,\n color: DEVICE.ink,\n borderRight: i % 2 === 0 ? `1px solid ${DEVICE.ink}` : \"none\",\n borderBottom: i < 2 ? `1px solid ${DEVICE.ink}` : \"none\",\n }}\n >\n {tile && (\n <>\n

{tile.title}

\n {tile.sub &&

{tile.sub}

}\n {tile.corner && (\n

{tile.corner}

\n )}\n \n )}\n \n ))}\n

\n );\n}\n",[],[208,339,341],"359ffe90-5cc4-11f1-8d9c-1607ee4eb77e","SessionEnd.tsx","359fff76-5cc4-11f1-8d9c-1607ee4eb77e",["D",1780213320815],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { DEVICE } from \"../device.ts\";\nimport { ButtonBar } from \"./ButtonBar.tsx\";\n\n// End of the session batch. Grades have been posted in one request; the server\n// will consolidate (boxes, generation, next window) between now and next time —\n// so there's nothing adaptive to show here, by design. Just a tally + exit.\nexport function SessionEnd({\n counts,\n syncing,\n onDone,\n}: {\n counts: { got: number; almost: number; miss: number };\n syncing: boolean;\n onDone: () => void;\n}) {\n const total = counts.got + counts.almost + counts.miss;\n return (\n

\n SESSION DONE\n

{total}

cards reviewed

✓ got it — {counts.got}

~ almost — {counts.almost}

· didn't know — {counts.miss}

\n {syncing ? \"syncing…\" : \"synced\"}\n

\n \n

\n );\n}\n",[],[208,339,349],"1a721234-5cc4-11f1-ae05-1607ee4eb77e","Screen.tsx","1a721310-5cc4-11f1-ae05-1607ee4eb77e",8,["D",1780213275215],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { DEVICE } from \"../device.ts\";\n\n// The bezel. Constrains every child to the panel's exact pixel envelope and\n// two inks, so nothing inside can render at a size or colour the device can't.\nexport function Screen({ children }: { children: React.ReactNode }) {\n return (\n

\n \n \n {children}\n

\n \n

\n {DEVICE.screen.w}×{DEVICE.screen.h} · monochrome · {DEVICE.buttons} buttons\n

\n \n );\n}\n",[],[208,339,356],"e708a4ca-5d41-11f1-b081-1607ee4eb77e","QuadrantMap.tsx","e708a5a6-5d41-11f1-b081-1607ee4eb77e",40,["D",1780267305545],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { DEVICE } from \"../device.ts\";\nimport type { Quadrant } from \"../api.ts\";\nimport { TileGrid, type Tile } from \"./TileGrid.tsx\";\nimport { ButtonBar } from \"./ButtonBar.tsx\";\n\n// The knowledge map at one level. Tap a quadrant: branch → descend, leaf →\n// review. Back (left button) ascends. The path you tap into IS the interest\n// window. Presentational — App owns the path and the data.\nexport function QuadrantMap({\n path,\n quadrants,\n onTap,\n onBack,\n}: {\n path: { id: number; label: string }[];\n quadrants: Quadrant[];\n onTap: (q: Quadrant) => void;\n onBack: () => void;\n}) {\n const crumb = [\"Knowledge\", ...path.map((p) => p.label)].join(\" › \");\n const tiles: Tile[] = quadrants.map((q) => ({\n key: q.id,\n title: q.label,\n sub: q.branch ? undefined : (q.due ? `${q.due} due` : (q.total ? \"✓ done\" : \"—\")),\n corner: q.branch ? \"▦\" : (q.total && q.mastered === q.total ? \"★\" : undefined),\n }));\n return (\n

\n \n {crumb}\n

\n onTap(quadrants[i])} />\n i === 0 && onBack()} />\n \n );\n}\n",[],[208,339,364],"bc1adcd2-5d47-11f1-9081-1607ee4eb77e","Dashboard.tsx","4f67f484-5d43-11f1-94e2-1607ee4eb77e",82,["D",1780269810498],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\n\n// Admin dashboard — a RICH surface (full colour, normal layout, NOT the device\n// bezel). Read-only. Four lenses: domain exploration, mastery, friction, and a\n// generation-review lens. Doubles as the tool for validating generation.\n\ntype Stats = {\n tree: { id: number; parent: number | null; label: string; ord: number; branch: boolean; total: number; mastered: number; reviews: number; misses: number }[];\n boxes: { box: number; n: number }[];\n friction: { id: number; q: string; node: string; box: number; reviews: number; misses: number; almosts: number }[];\n generators: { node: string; op: string; cards: number; levels: number; distinct: number }[];\n recent: { id: number; node: string; op: string; level: number; q: string; a: string }[];\n genLog: { node: string; op: string; result: string; detail: string }[];\n};\ntype TrajRow = { step: number; nodes: number; maxDepth: number; cards: number; mastered: number; subdivided: number };\ntype Node = Stats[\"tree\"][number];\n\nexport function Dashboard() {\n const [token, setToken] = useState(\"dev-token\");\n const [profiles, setProfiles] = useState<{ id: number; label: string }[]>([]);\n const [profile, setProfile] = useState(null);\n const [stats, setStats] = useState(null);\n const [trajectory, setTrajectory] = useState([]);\n const [err, setErr] = useState(null);\n\n async function loadProfiles() {\n try {\n const r = await fetch(\"/api/profiles\", { headers: { Authorization: `Bearer ${token}` } });\n if (!r.ok) throw new Error(`profiles → ${r.status}`);\n const p = (await r.json()).profiles;\n setProfiles(p);\n setProfile((cur) => cur ?? p[0]?.id ?? null);\n setErr(null);\n } catch (e) { setErr(String(e)); }\n }\n\n async function loadStats(pid: number) {\n try {\n const auth = { Authorization: `Bearer ${token}` };\n const r = await fetch(`/api/admin/stats/${pid}`, { headers: auth });\n if (!r.ok) throw new Error(`stats → ${r.status}`);\n setStats(await r.json());\n const t = await fetch(`/api/admin/trajectory/${pid}`, { headers: auth });\n if (t.ok) setTrajectory((await t.json()).trajectory ?? []);\n setErr(null);\n } catch (e) { setErr(String(e)); }\n }\n\n useEffect(() => { loadProfiles(); }, []);\n useEffect(() => { if (profile != null) loadStats(profile); }, [profile]);\n\n const leakIds = (stats?.recent ?? [])\n .filter((c) => c.a.trim().length > 1 && c.q.toLowerCase().includes(c.a.toLowerCase().trim()))\n .map((c) => c.id);\n\n return (\n

primer · admin

\n setToken((e.target as HTMLInputElement).value)} placeholder=\"bearer token\"\n className=\"border rounded px-2 py-1 text-xs w-28\" />\n \n

\n\n {err &&

{err}

}\n\n

\n {profiles.map((p) => (\n \n ))}\n

\n\n {stats && (\n

\n \n \n \n \n \n \n

\n )}\n

\n );\n}\n\nfunction Section({ title, children }: { title: string; children: React.ReactNode }) {\n return (\n

{title}

\n {children}\n

\n );\n}\n\nfunction Bar({ frac, color, width = 128 }: { frac: number; color: string; width?: number }) {\n return (\n

\n );\n}\n\nfunction Exploration({ tree }: { tree: Stats[\"tree\"] }) {\n const tops = tree.filter((n) => n.parent === null);\n const childrenOf = (id: number) => tree.filter((n) => n.parent === id);\n const Row = ({ n, depth }: { n: Node; depth: number }) => {\n const frac = n.total ? n.mastered / n.total : 0;\n return (\n <>\n

\n {n.branch ? \"▦ \" : \"\"}{n.label}\n {n.branch\n ? {childrenOf(n.id).length} areas\n : (\n <>\n \n {n.mastered}/{n.total}\n {n.misses > 0 && {n.misses} miss}\n \n )}\n

\n {n.branch && childrenOf(n.id).map((c) => )}\n \n );\n };\n return (\n

\n {tops.map((n) => )}\n

Depth grows where mastery does — the shape is the explored frontier.

\n );\n}\n\nfunction Mastery({ boxes, tree }: { boxes: Stats[\"boxes\"]; tree: Stats[\"tree\"] }) {\n const byBox = new Map(boxes.map((b) => [b.box, b.n]));\n const max = Math.max(1, ...boxes.map((b) => b.n));\n const leaves = tree.filter((n) => !n.branch);\n const total = leaves.reduce((s, n) => s + n.total, 0);\n const mastered = leaves.reduce((s, n) => s + n.mastered, 0);\n return (\n

{mastered} / {total} cards mastered ({total ? Math.round((mastered / total) * 100) : 0}%)

\n {[1, 2, 3, 4, 5].map((b) => {\n const n = byBox.get(b) ?? 0;\n return (\n

{n}

= 3 ? \"#16a34a\" : \"#94a3b8\", minHeight: 2 }} />\n

box {b}

\n );\n })}\n

Boxes 3+ count as mastered. New cards aren't boxed yet.

\n );\n}\n\nfunction Friction({ rows }: { rows: Stats[\"friction\"] }) {\n return (\n

\n {rows.length === 0\n ?

No friction yet — nothing missed or stuck.

\n : (\n \n \n \n \n \n \n \n {rows.map((r) => (\n \n \n \n \n \n \n \n ))}\n \n

Card	Node	Box	Reviews	Miss
{r.q}	{r.node}	{r.box}	{r.reviews}	{r.misses}

\n )}\n

Missed often, or reviewed 3+ times and still in box 1–2.

\n );\n}\n\nfunction Generation({ generators, recent, leakIds }: { generators: Stats[\"generators\"]; recent: Stats[\"recent\"]; leakIds: number[] }) {\n return (\n

\n {generators.length === 0\n ?

No generators authored yet — run a generation tick to populate this.

\n : (\n

Cards per generator function — short bars mean the family didn't earn the machinery.

\n {generators.map((g, i) => (\n

\n {g.node} · {g.op}\n \n {g.cards} cards · {g.levels} level{g.levels === 1 ? \"\" : \"s\"}\n {g.distinct < g.cards && {g.cards - g.distinct} dup}\n

\n ))}\n

\n )}\n

Newest cards — eyeball for leakage / level drift:

\n {recent.map((c) => (\n

\n {c.node}·L{c.level}\n {c.q}\n → {c.a}\n {leakIds.includes(c.id) && leak?}\n

\n ))}\n

\n );\n}\n\nfunction Trajectory({ data }: { data: TrajRow[] }) {\n if (!data.length) {\n return (\n

No simulation steps yet — run the speed-run to populate.

\n );\n }\n const W = 520, H = 150, pad = 22;\n const steps = data.map((d) => d.step);\n const minX = Math.min(...steps), maxX = Math.max(...steps);\n const maxY = Math.max(1, ...data.map((d) => Math.max(d.cards, d.nodes, d.mastered)));\n const px = (s: number) => pad + (maxX === minX ? 0 : (s - minX) / (maxX - minX)) * (W - 2 * pad);\n const py = (v: number) => H - pad - (v / maxY) * (H - 2 * pad);\n const path = (pick: (d: TrajRow) => number) =>\n data.map((d, i) => `${i === 0 ? \"M\" : \"L\"}${px(d.step).toFixed(1)},${py(pick(d)).toFixed(1)}`).join(\" \");\n const series: [string, string, (d: TrajRow) => number][] = [\n [\"cards\", \"#6366f1\", (d) => d.cards],\n [\"mastered\", \"#16a34a\", (d) => d.mastered],\n [\"nodes\", \"#94a3b8\", (d) => d.nodes],\n ];\n return (\n

\n \n

\n ● cards\n ● mastered\n ● nodes\n ┆ subdivision\n {data.length} steps · max depth {Math.max(...data.map((d) => d.maxDepth))}\n

\n );\n}\n\nfunction GenLog({ rows }: { rows: Stats[\"genLog\"] }) {\n const color = (r: string) => (r === \"made\" ? \"text-green-600\" : r === \"error\" ? \"text-red-600\" : \"text-gray-400\");\n return (\n

\n {rows.length === 0\n ?

No generation runs logged yet.

\n : (\n

\n {rows.map((r, i) => (\n

\n {r.result}\n {r.node} · {r.op}\n {r.detail}\n

\n ))}\n

\n )}\n

Every attempt — made, skipped, or rejected. No more silent no-ops.

\n );\n}\n",[],[208,339,372],"7fd0ca3c-5cd1-11f1-ac52-1607ee4eb77e","CardView.tsx","2a6c19be-5cc4-11f1-9e7b-1607ee4eb77e",["D",1780219028733],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { DEVICE, GRADES } from \"../device.ts\";\nimport type { Card } from \"../api.ts\";\nimport { ButtonBar } from \"./ButtonBar.tsx\";\n\n// The procedural UI interpreter — the firmware's job, in the sim.\n// Input: a card's `op` tag + pre-rendered q/a strings. The device owns a fixed\n// layout per operation (the low-n op set IS the layout vocabulary); the server\n// sends no layout. Add a new op → add a case here and reflash. That coupling is\n// the deliberate \"lean\" choice from the spec.\n\nconst OP_TAG: Record = {\n \"name\": \"RECALL\",\n \"recall-instance\": \"RECALL\",\n \"compose\": \"SAY\",\n};\n\nexport function CardView({\n card,\n index,\n total,\n onGrade,\n}: {\n card: Card;\n index: number;\n total: number;\n onGrade: (grade: string) => void;\n}) {\n const [revealed, setRevealed] = useState(false);\n const [flashing, setFlashing] = useState(false);\n\n // Reset to the front whenever a new card arrives. Models a full refresh.\n useEffect(() => {\n setRevealed(false);\n setFlashing(true);\n const t = setTimeout(() => setFlashing(false), DEVICE.refresh.full);\n return () => clearTimeout(t);\n }, [card.id]);\n\n const tag = OP_TAG[card.op] ?? card.op.toUpperCase();\n\n function reveal() {\n if (revealed || flashing) return;\n setFlashing(true); // partial refresh of the reveal region\n setRevealed(true);\n setTimeout(() => setFlashing(false), DEVICE.refresh.partial);\n }\n\n // Pre-commit: question first, answer only after a deliberate reveal.\n // Tapping the card is the primary reveal (capacitive panel); the centre\n // button is the secondary affordance / hint to the same single action.\n function handleButton(i: number) {\n if (!revealed) {\n if (i === 1) reveal();\n return;\n }\n onGrade(GRADES[i].key);\n }\n\n return (\n

\n {/* Tappable face — primary reveal affordance */}\n \n

\n {tag}\n {index + 1} / {total}\n

\n\n

{card.q}

\n\n

\n {revealed\n ? (\n <>\n

ANSWER

{card.a}

\n \n )\n :

tap to reveal

}\n

\n\n {/* Buttons: REVEAL (centre, secondary) before; grade triad after */}\n {revealed\n ? g.label)} onPress={handleButton} disabled={flashing} />\n : }\n

\n );\n}\n",[],[208,339,380],"1fa23432-5cc4-11f1-8c4d-1607ee4eb77e","ButtonBar.tsx","1fa234fa-5cc4-11f1-8c4d-1607ee4eb77e",9,["D",1780213283917],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { DEVICE } from \"../device.ts\";\n\n// The three physical buttons along the bottom edge. This is the ENTIRE input\n// surface — every screen must express its choices as ≤3 of these. Pass exactly\n// DEVICE.buttons labels; a null label is a dead (unlabelled) key on that screen.\nexport function ButtonBar({\n labels,\n onPress,\n disabled,\n}: {\n labels: (string | null)[];\n onPress: (index: number) => void;\n disabled?: boolean;\n}) {\n const slots = Array.from({ length: DEVICE.buttons }, (_, i) => labels[i] ?? null);\n return (\n \n {slots.map((label, i) => (\n onPress(i)}\n className=\"py-3 text-[13px] font-bold uppercase tracking-wide disabled:opacity-25\"\n style={{\n background: DEVICE.paper,\n color: DEVICE.ink,\n borderLeft: i === 0 ? \"none\" : `1px solid ${DEVICE.ink}`,\n }}\n >\n {label ?? \"·\"}\n \n ))}\n \n );\n}\n",[],[208,339,387],"f928a718-5d41-11f1-8efa-1607ee4eb77e","App.tsx","40e87eda-5cc4-11f1-9010-1607ee4eb77e",42,["D",1780267335950],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport {\n type Card,\n fetchProfiles,\n fetchQuadrants,\n fetchSession,\n postGrades,\n type Profile,\n type Quadrant,\n} from \"../api.ts\";\nimport type { GradeKey } from \"../device.ts\";\nimport { Screen } from \"./Screen.tsx\";\nimport { TileGrid, type Tile } from \"./TileGrid.tsx\";\nimport { QuadrantMap } from \"./QuadrantMap.tsx\";\nimport { CardView } from \"./CardView.tsx\";\nimport { SessionEnd } from \"./SessionEnd.tsx\";\n\n// The device session state machine. Profile → navigate the quadrant map →\n// tap a leaf → review one batch (graded offline) → post once → back to the\n// level you left. Only what the firmware will do.\n\ntype Phase = \"loading\" | \"profile\" | \"map\" | \"review\" | \"empty\" | \"end\";\ntype Crumb = { id: number; label: string };\n\nexport function App() {\n const [phase, setPhase] = useState(\"loading\");\n const [profiles, setProfiles] = useState([]);\n const [profile, setProfile] = useState(null);\n\n const [path, setPath] = useState([]); // branches descended into (not the leaf)\n const [quadrants, setQuadrants] = useState([]);\n\n const [cards, setCards] = useState([]);\n const [pos, setPos] = useState(0);\n const [buffer, setBuffer] = useState<{ id: number; grade: GradeKey }[]>([]);\n const [syncing, setSyncing] = useState(false);\n\n useEffect(() => {\n fetchProfiles().then((p) => { setProfiles(p); setPhase(\"profile\"); }).catch(() => setPhase(\"empty\"));\n }, []);\n\n function loadLevel(pid: number, p: Crumb[]) {\n const parent = p.length ? p[p.length - 1].id : \"root\";\n fetchQuadrants(pid, parent).then((q) => { setQuadrants(q); setPath(p); setPhase(\"map\"); });\n }\n\n function pickProfile(i: number) {\n const p = profiles[i];\n setProfile(p);\n loadLevel(p.id, []);\n }\n\n function tapQuadrant(q: Quadrant) {\n if (!profile) return;\n if (q.branch) {\n loadLevel(profile.id, [...path, { id: q.id, label: q.label }]);\n } else {\n fetchSession(profile.id, q.id).then((batch) => {\n setCards(batch);\n setPos(0);\n setBuffer([]);\n setPhase(batch.length ? \"review\" : \"empty\");\n });\n }\n }\n\n function back() {\n if (profile && path.length) loadLevel(profile.id, path.slice(0, -1));\n }\n\n function grade(g: string) {\n const next = [...buffer, { id: cards[pos].id, grade: g as GradeKey }];\n setBuffer(next);\n if (pos + 1 < cards.length) {\n setPos(pos + 1);\n } else {\n setSyncing(true);\n setPhase(\"end\");\n postGrades(profile!.id, next).finally(() => setSyncing(false));\n }\n }\n\n // Return to the level we were on; counts refresh from the server.\n function afterSession() {\n if (profile) loadLevel(profile.id, path);\n else setPhase(\"profile\");\n }\n\n const counts = {\n got: buffer.filter((b) => b.grade === \"got\").length,\n almost: buffer.filter((b) => b.grade === \"almost\").length,\n miss: buffer.filter((b) => b.grade === \"miss\").length,\n };\n\n const profileTiles: Tile[] = profiles.map((p) => ({ key: p.id, title: p.label }));\n\n return (\n

P R I M E R

\n \n {phase === \"loading\" && …}\n {phase === \"profile\" && (\n

\n WHO'S PLAYING?\n

\n \n

\n )}\n {phase === \"map\" && (\n \n )}\n {phase === \"review\" && cards[pos] && (\n \n )}\n {phase === \"empty\" && (\n \n )}\n {phase === \"end\" && }\n \n view source\n

\n );\n}\n\nfunction Centered({ children }: { children: React.ReactNode }) {\n return

{children}

;\n}\n",[],[208,339,395],"1a725302-5cc4-11f1-ae05-1607ee4eb77e",["D",1780213275215],[226,227,228,229,230,231,232,233,234],[208,339],["D",1780213257290],[225,235,236,237,238,239,240],[208],["D",1780184756415],["D",1789510270483],{"_16":17,"_86":82},{"_16":17,"_80":-5,"_81":82,"_33":34,"_83":84,"_85":26},{"_68":69,"_20":70,"_18":71,"_72":19,"_73":-5,"_74":-5,"_75":-5,"_76":-5,"_77":-5,"_78":21,"_79":17},"ctx",{"_61":-5,"_107":447,"_448":449,"_450":451,"_452":26,"_453":26,"_454":26,"_455":38,"_456":-5,"_457":-7,"_458":-7,"_459":131,"_460":26,"_461":26,"_462":-5,"_463":26,"_464":26,"_465":26,"_466":-5},"ENV",{"_418":419,"_420":421,"_422":70,"_423":424,"_425":426,"_427":428,"_429":430,"_431":432,"_433":434,"_435":436,"_437":438,"_439":440,"_441":442,"_443":444,"_445":446},"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",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Search