// Home, Results, Review, Stats, Tests (categories), Settings screens. // Globals: React, VOCAB, CATEGORY_META, FAMILY_META, FAMILY_ORDER, lastNDays, formatDuration, todayKey. const { useState: sUseState, useMemo: sUseMemo, useEffect: sUseEffect } = React; // Direction-A desktop layouts switch on at 761px (matches the side-nav breakpoint). function useIsDesktop() { const [d, setD] = sUseState(() => typeof window !== "undefined" && window.matchMedia("(min-width: 761px)").matches); sUseEffect(() => { const mq = window.matchMedia("(min-width: 761px)"); const on = () => setD(mq.matches); mq.addEventListener ? mq.addEventListener("change", on) : mq.addListener(on); return () => { mq.removeEventListener ? mq.removeEventListener("change", on) : mq.removeListener(on); }; }, []); return d; } // Accuracy -> status dot level (green / yellow / red / none) function accLevel(seen, acc) { if (!seen) return "none"; if (acc >= 80) return "ok"; if (acc >= 50) return "warn"; return "no"; } // ===================================================================== // TOP NAV — charcoal pill bar, shared across main screens // ===================================================================== function TopNav({ active, go, currentUser, onSignOut }) { const tabs = [ ["home", "Home"], ["categories", "Tests"], ["live", "Live", true], ["mistakes", "Mistakes"], ["class", "Class"], ["stats", "Stats"], ["settings", "Settings"], ]; const isGuest = !currentUser || currentUser === "guest"; return (
); } // ===================================================================== // BOTTOM TAB BAR — mobile only (CSS hides it ≥ 760px and hides TopNav < 760px). // Thumb-reachable; Home · Tests · Mistakes · Stats · Settings. (Class lives in // Settings on mobile to keep the bar to five comfortable targets.) // ===================================================================== const NAV_ICON = { home: (p) => ( ), tests: (p) => ( ), trainer: (p) => ( ), mistakes: (p) => ( ), stats: (p) => ( ), settings: (p) => ( ), class: (p) => ( ), live: (p) => ( ), mytasks: (p) => ( ), students: (p) => ( ), profile: (p) => ( ), }; function BottomNav({ active, go, isTeacher }) { // Teachers get their tools (My Tasks · Students) in the bar; Mistakes + Stats // move into Profile for them. Students keep the original set. "Settings" is // now "Profile" for everyone. Tests stays inside Profile on mobile; Live is // launched from Home. const tabs = isTeacher ? [ ["home", "Home", NAV_ICON.home], ["class", "Class", NAV_ICON.class], ["mytasks", "My Tasks", NAV_ICON.mytasks], ["trainer", "Trainer", NAV_ICON.trainer], ["settings", "Profile", NAV_ICON.profile], ] : [ ["home", "Home", NAV_ICON.home], ["class", "Class", NAV_ICON.class], ["trainer", "Trainer", NAV_ICON.trainer], ["stats", "Stats", NAV_ICON.stats], ["settings", "Profile", NAV_ICON.profile], ]; return ( ); } // ===================================================================== // SIDE NAV — desktop left rail (Direction A). CSS shows it > 760px and hides // the bottom bar there; ≤ 760px the bottom bar takes over and this is hidden. // Replaces the top pill nav on wide screens so the content can use the width. // ===================================================================== function SideNav({ active, go, currentUser, onSignOut, mistakesCount = 0, isTeacher = false, taskCount = 0, studentCount = 0 }) { const isGuest = !currentUser || currentUser === "guest"; const handle = String(currentUser || "guest").replace(/^@/, ""); // Grouped rail: Practice (everyone) · Classroom (teacher tools) · Review · Profile. const groups = [ { label: "Practice", items: [["home", "Home", NAV_ICON.home], ["trainer", "Trainer", NAV_ICON.trainer], ["live", "Live", NAV_ICON.live]] }, { label: "Classroom", items: isTeacher ? [["class", "Class", NAV_ICON.class], ["mytasks", "My Tasks", NAV_ICON.mytasks]] : [["class", "Class", NAV_ICON.class]] }, { label: "Review", items: [["mistakes", "Mistakes", NAV_ICON.mistakes], ["stats", "Stats", NAV_ICON.stats]] }, ]; const badgeFor = (id) => id === "mistakes" ? mistakesCount : id === "mytasks" ? taskCount : id === "students" ? studentCount : 0; const renderItem = ([id, label, Ic], extraStyle) => { const on = active === id; const badge = badgeFor(id); return ( ); }; return ( ); } // ===================================================================== // HOME // ===================================================================== function LiveGlyph({ size = 9 }) { return ; } // Big live countdown to the English exam — 10:00 Moscow (UTC+3). // OGE: 6 Jun 2026 · EGE: 15 Jun 2026. function EgeCountdown({ examMode }) { const oge = examMode === "oge"; const [now, setNow] = React.useState(() => Date.now()); React.useEffect(() => { const id = setInterval(() => setNow(Date.now()), 1000); return () => clearInterval(id); }, []); const target = oge ? Date.UTC(2026, 5, 6, 7, 0, 0) // OGE — 6 Jun, 10:00 MSK == 07:00 UTC : Date.UTC(2026, 5, 15, 7, 0, 0); // EGE — 15 Jun, 10:00 MSK == 07:00 UTC const examName = oge ? "OGE" : "EGE"; const dateLabel = oge ? "6 Jun, 10:00 MSK" : "15 Jun, 10:00 MSK"; if (target <= now) { return (
Exam day
It's time. Good luck! 🍀
); } let diff = target - now; const d = Math.floor(diff / 86400000); diff -= d * 86400000; const h = Math.floor(diff / 3600000); diff -= h * 3600000; const m = Math.floor(diff / 60000); diff -= m * 60000; const s = Math.floor(diff / 1000); const pad = (n) => String(n).padStart(2, "0"); const units = [[d, "days"], [pad(h), "hrs"], [pad(m), "min"], [pad(s), "sec"]]; return (
until the {examName} · {dateLabel}
{units.map(([n, u], i) => ( {i > 0 && :}
{n}{u}
 ))}
); } // Small mobile-Home strip (replaces the big Mistakes block; Trainer owns that // now). Alerting = soft-red, tappable -> Mistakes; zero = quiet, reassuring. function HomeMistakeStrip({ count, onOpen }) { if (!count) { return (
All caught up — nothing to review
); } return ( ); } function HomeScreen({ stats, settings, onStart, onOpenStats, onOpenSettings, onOpenCategories, onOpenMistakes, onOpenLive, onOpenStreak }) { const todayK = todayKey(); const today = stats.dailyHistory[todayK] || { answered: 0, correct: 0 }; const todayAcc = today.answered ? Math.round((today.correct / today.answered) * 100) : 0; const allAcc = stats.totalAnswered ? Math.round((stats.totalCorrect / stats.totalAnswered) * 100) : 0; const examMode = settings.examMode === "oge" ? "oge" : "ege"; // OGE passages are long, so offer smaller sets; EGE keeps the original sizes. const lengthOptions = examMode === "oge" ? [["1", "1"], ["3", "3"], ["5", "5"], ["10", "10"], ["endless", "Endless"]] : [["10", "10"], ["20", "20"], ["endless", "Endless"]]; const validLengths = lengthOptions.map(o => o[0]); const [length, setLength] = sUseState(() => { const d = String(settings.defaultLength || ""); return validLengths.includes(d) ? d : (examMode === "oge" ? "5" : "10"); }); // Re-clamp the selected length when the exam switches (OGE has no 20, etc.). sUseEffect(() => { if (!validLengths.includes(length)) setLength(examMode === "oge" ? "5" : "10"); }, [examMode]); const lenValue = length === "endless" ? Infinity : Number(length) || 10; const begin = () => onStart({ length: lenValue, endless: lenValue === Infinity }); // Desktop gets the Direction-A dashboard; phones keep the single-column flow. const [isDesktop, setIsDesktop] = sUseState(() => typeof window !== "undefined" && window.matchMedia("(min-width: 761px)").matches); sUseEffect(() => { const mq = window.matchMedia("(min-width: 761px)"); const on = () => setIsDesktop(mq.matches); mq.addEventListener ? mq.addEventListener("change", on) : mq.addListener(on); return () => { mq.removeEventListener ? mq.removeEventListener("change", on) : mq.removeListener(on); }; }, []); // delegate to the shared streak helper (10-words-a-day rule, today-pending) const dayStreak = sUseMemo( () => (typeof window !== "undefined" && window.skDayStreak) ? window.skDayStreak(stats) : 0, [stats.dailyHistory] ); // longest day-streak ever (for the pet tile sub) — reuse the shared helper const bestDayStreak = sUseMemo( () => Math.max(dayStreak, (typeof window !== "undefined" && window.skBestStreak ? window.skBestStreak(stats) : 0)), [stats.dailyHistory, dayStreak] ); // weakest task family — for the Continue-your-streak card const weakestFamily = sUseMemo(() => { const byFamily = {}; for (const cat in CATEGORY_META) { const fam = CATEGORY_META[cat].family; const pc = stats.perCategory[cat] || { seen: 0, correct: 0 }; if (!byFamily[fam]) byFamily[fam] = { seen: 0, correct: 0 }; byFamily[fam].seen += pc.seen; byFamily[fam].correct += pc.correct; } let pick = null; for (const fam of FAMILY_ORDER) { const f = byFamily[fam]; if (!f || f.seen < 3) continue; const acc = f.correct / f.seen; if (!pick || acc < pick.acc) pick = { fam, acc, seen: f.seen }; } return pick; }, [stats.perCategory]); // Mastery-by-source — per-family accuracy for the dashboard card (this exam's // families only, so OGE correctly omits multiple-choice / irregulars). const masteryByFamily = sUseMemo(() => { const examCats = new Set(window.examCategories ? window.examCategories(examMode) : Object.keys(CATEGORY_META)); const byFamily = {}; for (const cat in CATEGORY_META) { if (!examCats.has(cat)) continue; const fam = CATEGORY_META[cat].family; const pc = stats.perCategory[cat] || { seen: 0, correct: 0 }; if (!byFamily[fam]) byFamily[fam] = { seen: 0, correct: 0 }; byFamily[fam].seen += pc.seen; byFamily[fam].correct += pc.correct; } return FAMILY_ORDER .filter(f => byFamily[f] && byFamily[f].seen > 0) .map(f => ({ fam: f, label: (FAMILY_META[f] || {}).label || f, seen: byFamily[f].seen, acc: byFamily[f].correct / byFamily[f].seen })); }, [stats.perCategory, examMode]); // mistakes = items whose most recent attempt was wrong (clears when you get it right) const mistakeCount = sUseMemo(() => { let n = 0; for (const id in stats.perItem) { if (isMistakeStat(stats.perItem[id])) n++; } return n; }, [stats.perItem]); // items mastered — same rule as the Stats screen: correct >= 3 with >= 80% // accuracy, out of this exam's bank. Replaces the streak stat (the pet shows that). const modeTotal = sUseMemo(() => { const cats = new Set(window.examCategories ? window.examCategories(examMode) : Object.keys(window.CATEGORY_META || {})); return VOCAB.filter(v => cats.has(v.category)).length; }, [examMode]); const itemsMastered = sUseMemo(() => { let n = 0; for (const id in stats.perItem) { const s = stats.perItem[id]; if (s.correct >= 3 && (s.correct / Math.max(1, s.seen)) >= 0.8) n++; } return n; }, [stats.perItem]); const last = stats.sessions[stats.sessions.length - 1]; const enabledTypes = FAMILY_ORDER.filter(fam => Object.entries(CATEGORY_META).some(([id, m]) => m.family === fam && settings.categories.includes(id)) ).length; const subline = examMode === "oge" ? "Grammar and word formation — paced for the OGE exam." : "Word formation, grammar, and multiple choice — paced for the EGE exam."; const launchControls = ( <>
{lengthOptions.map(([v,l]) => ( ))}
{onOpenLive && ( )}
{last && ( )} ); // mobile stat grid (desktop uses the editorial layout). Mirrors the editorial // stat set: today / streak / lifetime / best. The pet rides in the Home chip above. const tilesRow = (
); const streakCardNode = weakestFamily && weakestFamily.acc < 0.85 ? ( onStart({ length: 10, familyFilter: weakestFamily.fam })} /> ) : null; const footer = ( ); if (isDesktop) { const weak = weakestFamily && weakestFamily.acc < 0.85 ? weakestFamily : null; const weakLabel = weak ? (FAMILY_META[weak.fam]?.label || weak.fam).toLowerCase() : null; return (
{/* ROW 1 · countdown (type event) + start (earned container) */}

{subline}

start a session

A short set, whenever you can.

{lengthOptions.map(([v, l]) => ( ))}
{last ? : your last set will show up here}
{/* ROW 2 · stats (no containers) */}
{/* ROW 3 · mastery + (weakest container / mistakes line) */}

Mastery

{masteryByFamily.length ? (
{masteryByFamily.map(m => { const pct = Math.round(m.acc * 100); return (
{m.label} {pct}%
); })}
) : (

Answer a few questions and your accuracy by task type shows up here.

)}
recommended {weak ? ( <>

Your weakest area is {weakLabel}

{Math.round(weak.acc * 100)}% accuracy across that family

) : ( <>

Keep the streak alive

A short set today keeps your momentum going

)}

Mistakes

{mistakeCount > 0 ? <>{mistakeCount} words and forms collected to review : "No mistakes collected yet"} {mistakeCount > 0 && }
{/* ROW 4 · streak strip (compact footnote) */}
); } return (

{subline}

{launchControls}
{tilesRow} {footer}
); } function MistakesCard({ count, onOpen }) { return (
Mistakes

{count > 0 ? `${count} collected to review` : "No mistakes collected yet"}

{count > 0 ? "Words and forms you've missed at least once, gathered automatically." : "Anything you miss is gathered here so you can come back to it."}
); } function MetaTile({ label, value, sub }) { return (
{label}
{value}
{sub}
); } // Editorial home: a bare stat (no container) — big number + label + sub. function EdStat({ num, label, sub }) { return (
{num} {label} {sub}
); } // Editorial home: the full-width streak footnote — pet + line + evolution hint + // this-week dots. Opens the full streak screen on click. function StreakStrip({ days, stats, onClick }) { const tiers = (typeof window !== "undefined" && window.STREAK_TIERS) || []; const i = (typeof window !== "undefined" && window.tierIndexFor) ? Math.max(0, window.tierIndexFor(days)) : 0; const next = tiers[i + 1]; const toNext = next ? next.min - days : 0; const wk = (typeof window !== "undefined" && window.skWeek) ? window.skWeek(stats) : { done: [], todayIdx: -1 }; return ( ); } function StreakCard({ family, acc, dayStreak, onStart }) { const fam = FAMILY_META[family]; return (
{dayStreak >= 2 ? `Continue your ${dayStreak}-day streak` : "Pick up momentum"}

Your weakest area right now is {fam.label.toLowerCase()}

{Math.round(acc * 100)}% accuracy across that family
); } function ResumeCard({ stats, onStart }) { const last = stats.sessions[stats.sessions.length - 1]; return (
Pick up where you left off
{last ? ( <>
Last session · {last.correct}/{last.total} correct · score {last.score}
{formatDuration(last.durationMs)} · {new Date(last.ts).toLocaleDateString()}
) : ( <>
No sessions yet. The first one calibrates your stats.
Try ten questions to start.
)}
); } function CategoryGlance({ stats, onOpen }) { // Group categories by family for the home glance. const grouped = FAMILY_ORDER.map(fam => ({ fam, label: FAMILY_META[fam].label, cats: Object.entries(CATEGORY_META).filter(([_, m]) => m.family === fam).map(([id]) => id), })).filter(g => g.cats.length > 0); return (
Mastery by source
); } // ===================================================================== // RESULTS // ===================================================================== function ResultsScreen({ summary, onAgain, onReview, onHome }) { const acc = summary.total ? Math.round((summary.correct / summary.total) * 100) : 0; const verdict = acc >= 90 ? "Sharp." : acc >= 70 ? "A solid set." : acc >= 50 ? "Worth another pass." : "These are the ones to revisit."; return (
Session complete

{verdict}

Correct · {summary.correct} Missed · {Math.max(0, summary.total - summary.correct)}
{summary.wrong.length > 0 && ( )}
); } function ResultStat({ label, value, mono }) { return (
{label}
{value}
); } function ResultDonut({ correct, total, acc }) { const r = 78, c = 2 * Math.PI * r; const frac = total ? correct / total : 0; const dash = c * frac; return (
{acc}%
{correct}/{total} correct
); } // ===================================================================== // REVIEW (wrong answers) // ===================================================================== function ReviewScreen({ wrong, onBack }) { return (
Review · {wrong.length} item{wrong.length === 1 ? "" : "s"}
{wrong.map(({ item, userAnswer }, i) => (
{FAMILY_META[item.type]?.label} {item.base && {item.base}}

{(item.sentence || item.text || "").replace(/⟦\d+⟧/g, " ______ ").replace(/_{2,}/g, "_______")}

You {userAnswer}
Answer {item.gaps ? item.gaps.map(g => g.answer).join(", ") : item.answer}
{!item.gaps && item.alts && item.alts.length > 0 && (
also accepted: {item.alts.join(", ")}
)}
))}
); } // ===================================================================== // MISTAKES (every item missed at least once, most-missed first) // ===================================================================== function MistakesScreen({ stats, onStart, onStartDrills, onJoinLive, onBack, examMode }) { const [filter, setFilter] = sUseState("all"); const [expanded, setExpanded] = sUseState(false); const mistakes = sUseMemo(() => { // Verb-drill items aren't in VOCAB — resolve them from the drill registry. const VB = (typeof window !== "undefined" && window.VERB_MISTAKE_ITEMS) || {}; return Object.entries(stats.perItem) .map(([id, s]) => ({ id, ...s, misses: s.seen - s.correct, acc: s.seen ? s.correct / s.seen : 0 })) // "in the pool" = last attempt was wrong; getting it right removes it (isMistakeStat). .filter(e => isMistakeStat(e)) .map(e => ({ ...e, item: VOCAB.find(v => v.id === e.id) || VB[e.id] })) .filter(e => e.item) .sort((a, b) => (b.misses - a.misses) || (a.acc - b.acc)); }, [stats.perItem]); const isDrill = (m) => m.item.category && m.item.category.indexOf("irregular-verbs") === 0; const drillMistakes = mistakes.filter(isDrill); const taskMistakes = mistakes.filter(m => !isDrill(m)); const tasksLabel = examMode === "oge" ? "OGE tasks" : "EGE tasks"; const shown = filter === "drills" ? drillMistakes : filter === "tasks" ? taskMistakes : mistakes; // The Review CTA practices the *shown* set. Drills run as a focused TrainerRun; // tasks (word-formation / grammar / MC) run through normal practice. When the set // is mixed (the "All" filter), Review takes the task items — drills have their own // filter + button. const onlyDrills = shown.length > 0 && shown.every(isDrill); const reviewIds = onlyDrills ? shown.map(m => m.id) : shown.filter(m => !isDrill(m)).map(m => m.id); const reviewCount = Math.min(20, reviewIds.length); const review = () => { if (!reviewCount) return; if (onlyDrills) onStartDrills(reviewIds.slice(0, reviewCount)); else onStart({ itemIds: reviewIds, length: reviewCount }); }; const PREVIEW = 6; const previewRows = expanded ? shown : shown.slice(0, PREVIEW); const moreCount = shown.length - previewRows.length; const answerOf = (it) => it.gaps ? it.gaps.map(g => g.answer).join(", ") : (it.answer || ""); // reset preview + filter coherence when the active filter changes sUseEffect(() => { setExpanded(false); }, [filter]); return (
Review
{drillMistakes.length > 0 && mistakes.length > 0 && (
{[["all", "All"], ["tasks", tasksLabel], ["drills", "Drills"]].map(([v, l]) => ( ))}
)} {shown.length === 0 ? (
✓
Nothing to review

Mistakes you make in practice land here so you can come back to them. You're all clear right now.

) : (
Mistakes {shown.length}
{reviewCount > 0 && ( )}

Most-missed first — clears as you get them right

    {previewRows.map(m => (
  • {m.item.base ? <>{m.item.base}→ : null} {answerOf(m.item)} {m.misses}× missed
    • ))}
{moreCount > 0 ? : (expanded && shown.length > PREVIEW ? : null)}
)}
); } // ===================================================================== // STATS // ===================================================================== function StatsScreen({ stats, onBack, onReset, examMode }) { // Items mastered counts against the *active exam's* bank only — per-mode stats // never touch the other exam's items, so "of " produced impossible // ratios (mastered > total). Scope the denominator to this exam. const modeTotal = sUseMemo(() => { const cats = new Set((window.examCategories ? window.examCategories(examMode) : Object.keys(window.CATEGORY_META || {}))); return VOCAB.filter(v => cats.has(v.category)).length; }, [examMode]); // Responsive chart length: 7 days on phone, 14 days on desktop const [chartDays, setChartDays] = sUseState(() => window.innerWidth < 720 ? 7 : 14); const [reviewSession, setReviewSession] = sUseState(null); sUseEffect(() => { const onResize = () => setChartDays(window.innerWidth < 720 ? 7 : 14); window.addEventListener("resize", onResize); return () => window.removeEventListener("resize", onResize); }, []); const days = lastNDays(chartDays); const series = days.map(k => stats.dailyHistory[k] || { answered: 0, correct: 0 }); const maxAnswered = Math.max(1, ...series.map(s => s.answered)); const totalAcc = stats.totalAnswered ? Math.round((stats.totalCorrect / stats.totalAnswered) * 100) : 0; // Items mastered: perItem entries with correct >= 3 and accuracy >= 80% const itemsMastered = sUseMemo(() => { let n = 0; for (const id in stats.perItem) { const s = stats.perItem[id]; if (s.correct >= 3 && (s.correct / Math.max(1, s.seen)) >= 0.8) n++; } return n; }, [stats.perItem]); const weak = sUseMemo(() => { const entries = Object.entries(stats.perItem) .map(([id, s]) => ({ id, ...s, acc: s.seen ? s.correct / s.seen : 1 })) .filter(e => e.seen >= 2) .sort((a, b) => a.acc - b.acc) .slice(0, 6); return entries.map(e => ({ ...e, item: VOCAB.find(v => v.id === e.id) })).filter(e => e.item); }, [stats.perItem]); return (
Statistics
Last {chartDays} days

Daily volume

answered accuracy
{series.map((s, i) => { const h = (s.answered / maxAnswered) * 100; const acc = s.answered ? (s.correct / s.answered) * 100 : null; return (
{acc != null && (
)}
{days[i].slice(5)}
); })}
By task type

Mastery

    {FAMILY_ORDER.map(fam => { const cats = Object.keys(CATEGORY_META).filter(c => CATEGORY_META[c].family === fam); if (cats.length === 0) return null; let seen = 0, correct = 0; for (const c of cats) { const pc = stats.perCategory[c] || { seen: 0, correct: 0 }; seen += pc.seen; correct += pc.correct; } const acc = seen ? Math.round((correct / seen) * 100) : 0; return (
    • ); })}
Needs work

Trickiest items

{weak.length === 0 ? (

Answer a few more questions to see your weak spots.

) : (
    {weak.map(e => (
  • {(e.item.sentence || e.item.text || "").replace(/⟦\d+⟧/g, " ______ ").replace(/_{2,}/g, "_____")}
    {e.item.gaps ? e.item.gaps.map(g => g.answer).join(", ") : e.item.answer}
    {Math.round(e.acc * 100)}%
    {e.correct}/{e.seen}
    • ))}
)}
History

Recent sessions

{stats.sessions.length === 0 ? (

No sessions yet.

) : (
    {stats.sessions.slice().reverse().slice(0, 10).map((s, i) => { const reviewable = !!(s.questions && s.questions.length); return (
  • setReviewSession(s)} role="button" tabIndex={0} title={reviewable ? "Review every task in this set" : "Per-task detail isn't kept for this set"} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); setReviewSession(s); } }}> {new Date(s.ts).toLocaleString()} {s.correct}/{s.total} {Math.round((s.correct / Math.max(1,s.total)) * 100)}% score {s.score} {formatDuration(s.durationMs)} Review →
    • ); })}
)}
{reviewSession && setReviewSession(null)} />}
); } // Review every question of a past session (the last 10 sessions keep this detail). function SessionReviewModal({ session, onClose }) { React.useEffect(() => { const onKey = (e) => { if (e.key === "Escape") onClose(); }; document.addEventListener("keydown", onKey); return () => document.removeEventListener("keydown", onKey); }, []); const qs = (session.questions || []).map(q => ({ ...q, item: VOCAB.find(v => v.id === q.id) })).filter(q => q.item); const pct = Math.round((session.correct / Math.max(1, session.total)) * 100); return (
e.stopPropagation()}>
{new Date(session.ts).toLocaleDateString()} · {session.correct}/{session.total} correct
score {session.score} · {pct}% · {qs.length} question{qs.length === 1 ? "" : "s"}
{qs.length === 0 ? (

Per-task detail is kept only for your 10 most recent sets — this one is older, so its individual tasks aren't stored. Newer sets show every task here.

) : qs.map((q, i) => { const ok = q.c === 1; return (
{ok ? "✓" : "✗"} {q.item.base ? {q.item.base} : null} {FAMILY_META[q.item.type]?.label}
{(q.item.sentence || q.item.text || "").replace(/⟦\d+⟧/g, " ____ ").replace("___", " _____ ")}
{q.item.gaps ? Passage · your result: {q.ua || "—"} : <> Answer: {q.item.answer} {!ok && q.ua ? You: {q.ua} : null} }
); })}
); } function BigStat({ label, value, sub, info, accent }) { const [open, setOpen] = sUseState(false); if (!info) { return (
{label}
{value}
{sub &&
{sub}
}
); } return ( ); } // ===================================================================== // TESTS (categories, grouped by task family) // ===================================================================== function CategoriesScreen({ settings, setSettings, stats, onBack }) { const examOf = (m) => (m.exam || "ege"); const wantExam = settings.examMode === "oge" ? "oge" : "ege"; const catsOf = (fam) => Object.entries(CATEGORY_META).filter(([_, m]) => m.family === fam && examOf(m) === wantExam).map(([id]) => id); const familyOn = (fam) => catsOf(fam).some(c => settings.categories.includes(c)); // Toggle a whole task type on/off (we keep file-level categories under the hood, // but the only user-facing unit is the task type). const toggleFamily = (fam) => { setSettings(s => { const cats = catsOf(fam); const on = cats.some(c => s.categories.includes(c)); const next = on ? s.categories.filter(c => !cats.includes(c)) : [...new Set([...s.categories, ...cats])]; return { ...s, categories: next.length ? next : s.categories }; }); }; const oge = settings.examMode === "oge"; const families = FAMILY_ORDER.filter(fam => catsOf(fam).length > 0); const enabledCount = families.filter(fam => familyOn(fam)).length; // Coverage: how many of THIS exam's questions you've attempted at least once. const modePool = VOCAB.filter(v => CATEGORY_META[v.category] && examOf(CATEGORY_META[v.category]) === wantExam); const attemptedCount = modePool.filter(v => ((stats.perItem[v.id] || {}).seen || 0) > 0).length; const coveragePct = modePool.length ? Math.round((attemptedCount / modePool.length) * 100) : 0; return (
Tests{oge ? " · ОГЭ" : " · ЕГЭ"}

Pick which task types to practise. Mixed sets draw from everything that's on — at least one must stay on.

{attemptedCount.toLocaleString()} of {modePool.length.toLocaleString()} questions tried {coveragePct}%
{families.map(fam => { const on = familyOn(fam); const famCats = new Set(catsOf(fam)); const count = VOCAB.filter(v => famCats.has(v.category)).length; let seen = 0, correct = 0; for (const c of catsOf(fam)) { const pc = stats.perCategory[c] || { seen: 0, correct: 0 }; seen += pc.seen; correct += pc.correct; } const acc = seen ? Math.round((correct / seen) * 100) : null; const lvl = accLevel(seen, acc || 0); return ( ); })}

Mastery is your lifetime accuracy in each type. Toggling a type off just hides it from new sets — your progress is kept.

); } // ===================================================================== // SETTINGS // ===================================================================== // "Report an issue" — general feedback/bug report (not tied to a task). Posts // to the same /api/report store as the per-question reporter. Lives in Profile. function SettingsReportIssue() { const [open, setOpen] = sUseState(false); const [sent, setSent] = sUseState(false); const [reason, setReason] = sUseState(""); const [note, setNote] = sUseState(""); const [busy, setBusy] = sUseState(false); const send = async () => { if (busy || (!reason && !note.trim())) return; setBusy(true); let token = null; try { token = localStorage.getItem(window.TOKEN_KEY || "vp.token.v1"); } catch (e) {} try { await fetch("/api/report", { method: "POST", headers: { "content-type": "application/json", ...(token ? { Authorization: `Bearer ${token}` } : {}) }, body: JSON.stringify({ category: "general", reason: reason || "issue", note: note.trim() }), }); } catch (e) { /* best-effort */ } setBusy(false); setSent(true); }; return (
Help
{sent ? (
✓ Thanks — we'll look into it.
Your report was sent.
) : !open ? ( ) : (
{[["bug", "Bug"], ["content", "Content error"], ["suggestion", "Suggestion"], ["other", "Other"]].map(([v, l]) => ( ))}