/* ============================================================
MTOPS Academy — module detail view + root App
============================================================ */
const { useState, useEffect, useRef, useMemo, useCallback } = React;
const { TopBar, SearchOverlay, MapView, topicId, moduleTopicIds, ALL_TOPIC_IDS, MODULES, DATA, moduleAccent } = window.AcademyParts;
/* ============ Topic card ============ */
function TopicCard({ id, topic, done, onToggle }) {
const [open, setOpen] = useState(false);
return (
setOpen((v) => !v)}>
{topic.title}
›
{open && (
{topic.body}
)}
);
}
/* ============ Group ============ */
function Group({ mod, group, gi, progress, onToggle }) {
const [open, setOpen] = useState(true);
const ids = group.topics.map((_, ti) => topicId(mod.id, gi, ti));
const done = ids.filter((id) => progress[id]).length;
const all = done === ids.length;
const Diagram = group.diagram ? window.DIAGRAMS[group.diagram] : null;
const markAll = () => { const target = !all; ids.forEach((id) => onToggle(id, target)); };
return (
{done}/{ids.length}
{open && (
{Diagram && }
{group.topics.map((t, ti) => {
const id = topicId(mod.id, gi, ti);
return onToggle(x)} />;
})}
)}
);
}
/* ============ Module view ============ */
function ModuleView({ mod, progress, onToggle, onHome, onNav, pendingTopic, clearPending }) {
const ids = moduleTopicIds(mod);
const done = ids.filter((id) => progress[id]).length;
const pct = done / ids.length;
const idx = MODULES.findIndex((m) => m.id === mod.id);
const prev = MODULES[idx - 1], next = MODULES[idx + 1];
useEffect(() => { window.scrollTo(0, 0); }, [mod.id]);
useEffect(() => {
if (!pendingTopic) return;
const el = document.getElementById(`t-${pendingTopic}`);
if (el) {
const y = el.getBoundingClientRect().top + window.scrollY - 90;
window.scrollTo({ top: y, behavior: "smooth" });
el.style.transition = "box-shadow .3s"; el.style.boxShadow = "0 0 0 2px var(--accent)";
setTimeout(() => { el.style.boxShadow = "none"; }, 1600);
}
clearPending();
}, [pendingTopic, mod.id]);
return (
{/* header */}
{mod.n}
{mod.tag}
{mod.title}
{mod.blurb}
{done === ids.length ? "✓" : `${done}/${ids.length}`}
{mod.quote && (
“{mod.quote}”
)}
{mod.groups.map((g, gi) => )}
{mod.reflection && }
{mod.quiz && }
{/* prev / next */}
);
}
/* ============ Root ============ */
function App() {
const [progress, setProgress] = useStore("progress", {});
const [layout, setLayout] = useStore("layout2", "path"); // key bumped to reset everyone to Path once (progress/light preserved)
const [light, setLight] = useStore("light", false);
const [view, setView] = useState("map"); // 'map' | 'module'
const [activeId, setActiveId] = useStore("lastModule", null);
const [searchOpen, setSearchOpen] = useState(false);
const [pendingTopic, setPendingTopic] = useState(null);
const activeMod = MODULES.find((m) => m.id === activeId);
const toggle = useCallback((id, force) => {
setProgress((p) => {
const next = { ...p };
const target = typeof force === "boolean" ? force : !next[id];
if (target) next[id] = true; else delete next[id];
return next;
});
}, [setProgress]);
const openModule = (id) => { setActiveId(id); setView("module"); };
const goHome = () => setView("map");
useEffect(() => {
document.documentElement.classList.toggle("dir-daylight", light);
document.body.classList.toggle("dir-daylight", light);
}, [light]);
useEffect(() => {
const onKey = (e) => {
if (e.key === "/" && !searchOpen && !/input|textarea/i.test(document.activeElement.tagName)) { e.preventDefault(); setSearchOpen(true); }
if (e.key === "Escape") setSearchOpen(false);
};
window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
}, [searchOpen]);
const pickSearch = (modId, tId) => { setSearchOpen(false); setActiveId(modId); setView("module"); setPendingTopic(tId); };
return (
setSearchOpen(true)}
layout={layout} setLayout={setLayout} light={light} setLight={setLight} view={view} />
{view === "map" || !activeMod
?
: setPendingTopic(null)} />}
{searchOpen && setSearchOpen(false)} onPick={pickSearch} />}
);
}
ReactDOM.createRoot(document.getElementById("root")).render();