/* map.jsx — the course map page: the full trail on one screen (Simple or Circuit-board view), the Beacon onramp, projects shelf and tool cards. The FRONT PAGE (home.jsx) tells the story; this page shows the territory. */ const { useState: mapUseState, useEffect: mapUseEffect } = React; const MAP_TWEAK_DEFAULTS = { "theme": "paper", "audience": "adult" }; /* ─── big progress dial for the hero ─────────────────────────────────────── */ function DailyStreakBadge() { let streak = 0, doneToday = false; try { const d = JSON.parse(localStorage.getItem("hte-daily") || "{}"); streak = d.streak || 0; doneToday = d.lastDone === new Date().toISOString().slice(0, 10); } catch (e) {} return ( {streak > 0 && ( {streak}-day{doneToday ? " ✓" : ""} )} → ); } function HeroProgress({ done, total, legend = true }) { const pct = total ? Math.round((done / total) * 100) : 0; const C = 2 * Math.PI * 52; return (
{legend && (
Soldered Up next Ready
)}
); } /* ─── App ──────────────────────────────────────────────────────────────── */ function MapApp() { const [t, setTweak] = useTweaks(MAP_TWEAK_DEFAULTS); useCrossChapterPersistence(t, setTweak); mapUseEffect(() => { document.body.setAttribute("data-theme", t.theme); }, [t.theme]); const progress = useProgressState(); const stats = courseStats(progress); const pjDone = (() => { try { return Object.keys(JSON.parse(localStorage.getItem("hte-project") || "{}").done || {}).length; } catch { return 0; } })(); const seq = [...ALL_CHAPTERS, ...L2_CHAPTERS.filter(c => c.ready !== false)]; const nextCh = seq.find(c => progress[c.n] !== "done"); const resumeHref = nextCh ? nextCh.href : "chapter1.html"; const ctaLabel = stats.done === 0 ? "Start at Chapter 1" : !nextCh ? "Review from the top" : `Resume — ${nextCh.t}`; const onReset = () => { if (confirm("Reset all chapter progress? Your theme and reading-level choices will stay.")) { try { localStorage.removeItem("hte-progress"); } catch {} window.dispatchEvent(new Event("hte-progress-changed")); } }; const [mapStyle, setMapStyle] = mapUseState(() => { try { return localStorage.getItem("hte-mapstyle") || "simple"; } catch { return "simple"; } }); const pickMap = (m) => { setMapStyle(m); try { localStorage.setItem("hte-mapstyle", m); } catch {} }; return ( <> setTweak("audience", v)} />
Fathohm· a field guide

The course map.

Every chapter, build, project, tool and elective — one screen, with your progress soldered in as you go.

{ctaLabel} → ← Front page

Younger explorer? The Explorer Route is a complete trail with its own certificate — no heavy math.

the course
{mapStyle === "board" ? : }
The flagship build · first of five projects

Build The Beacon as you learn

Each chapter hands you a new part and a new spec — pick real component values, check the math, and grow one LED into the flashing signal beacon above. By the final build, it's real — blinking at the rate you specced.

{pjDone}/{PJ_META.total} {pjDone === 0 ? "Start the build" : pjDone === PJ_META.total ? "Complete" : "Continue"} →
The Beacon is the first of five projects — motor spinner, light sequencer, mood lamp & buzzer too. See the whole shelf → {/* daily drill + workbench — the habit row (board view only; the simple map carries the tools in its Anytime shelf) */} {mapStyle === "board" && (
Today's drill Three quick questions · keeps it all fresh The Sandbox See how it works · probe live voltages & currents → Circuit Lab Board ↔ schematic · one circuit, two views, in sync → The Workbench Free build · no goal, no grade — just wire things → The Oscilloscope Read signals like a pro · spot sick circuits on sight →
)}
); } ReactDOM.createRoot(document.getElementById("root")).render();