// app.jsx — Entry point. Routing, top bar, persistence, tweaks panel.
const { useState: useState_, useEffect: useEffect_, useMemo: useMemo_ } = React;
const STATIONS = window.STATIONS;
// ─── Routing helpers (hash-based) ───────────────────────────────────────────
function readRoute() {
const h = (window.location.hash || "").replace(/^#\/?/, "");
return h || "home";
}
function writeRoute(r) {
window.location.hash = "#/" + r;
}
// ─── Persistence ────────────────────────────────────────────────────────────
const LS_DONE = "tbr.completed";
const LS_NAME = "tbr.kidName";
// ─── Top bar ────────────────────────────────────────────────────────────────
function TopBar({ route, setRoute, completed, total }) {
const ratio = completed.size / total;
const inStation = route.startsWith("station/");
return (
{/* Progress meter */}
);
}
function Logo({ size = 28 }) {
return (
);
}
// ─── App ────────────────────────────────────────────────────────────────────
function App() {
const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS);
const [route, _setRoute] = useState_(readRoute());
const [completedArr, setCompletedArr] = useState_(() => readLS(LS_DONE, []));
const [kidName, setKidName] = useState_(() => readLS(LS_NAME, ""));
const completed = useMemo_(() => new Set(completedArr), [completedArr]);
// Apply tweaks → CSS variables
useEffect_(() => {
const r = document.documentElement;
r.style.setProperty("--accent", t.accent || "#b8412b");
// Density
if (t.density === "compact") {
r.style.setProperty("--pad", "14px");
r.style.setProperty("--gap", "12px");
} else if (t.density === "comfy") {
r.style.setProperty("--pad", "22px");
r.style.setProperty("--gap", "20px");
} else {
r.style.setProperty("--pad", "18px");
r.style.setProperty("--gap", "16px");
}
// Font pair
if (t.fontPair === "domine-caveat") {
r.style.setProperty("--f-display", '"Domine", Georgia, serif');
} else if (t.fontPair === "playfair-caveat") {
r.style.setProperty("--f-display", '"Playfair Display", Georgia, serif');
} else {
r.style.setProperty("--f-display", '"Newsreader", Georgia, serif');
}
}, [t]);
// Lazy-load extra Google Fonts if user picks them
useEffect_(() => {
if (t.fontPair === "domine-caveat" || t.fontPair === "playfair-caveat") {
const id = "tbr-extra-fonts";
if (!document.getElementById(id)) {
const l = document.createElement("link");
l.id = id; l.rel = "stylesheet";
l.href = "https://fonts.googleapis.com/css2?family=Domine:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;1,400;1,700&display=swap";
document.head.appendChild(l);
}
}
}, [t.fontPair]);
// Hash sync
useEffect_(() => {
const onHash = () => _setRoute(readRoute());
window.addEventListener("hashchange", onHash);
return () => window.removeEventListener("hashchange", onHash);
}, []);
function setRoute(r) {
_setRoute(r); writeRoute(r);
}
// Persist completion
useEffect_(() => { writeLS(LS_DONE, completedArr); }, [completedArr]);
useEffect_(() => { writeLS(LS_NAME, kidName); }, [kidName]);
function toggleComplete(id) {
setCompletedArr(arr => arr.includes(id) ? arr.filter(x => x !== id) : [...arr, id]);
}
// Resolve route
let body;
if (route.startsWith("station/")) {
const id = route.slice("station/".length);
const station = STATIONS.find(s => s.id === id);
body = station
?
: ;
} else if (route === "certificate") {
body = ;
} else if (route === "before") {
body = ;
} else if (route === "map") {
body = ;
} else if (route === "after") {
body = ;
} else if (route === "faq") {
body = ;
} else if (route === "register") {
body = ;
} else {
body = ;
}
return (
<>
{body}
setTweak("accent", v)} />
setTweak("fontPair", v)} />
setTweak("density", v)} />
{ setCompletedArr([]); setKidName(""); }} />
);
}
function NotFound({ setRoute }) {
return (
Hmm — not found
);
}
// ─── Mount ──────────────────────────────────────────────────────────────────
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render();