/* planner-app.jsx — top-level app shell */ (function () { const { DAY_NAMES, DAY_SHORT, PALETTE, BLOCK_TYPES, startOfWeek, addDays, toISODate, parseISODate, fmtDate, fmtDur, normalizeBlock, loadState, saveState, normalizeState, sampleBlocks, planCompletion, makeId, clamp, snapMin } = window.PLANNER_DATA; function App() { const [state, setState] = React.useState(loadState); const [teacher, setTeacher] = React.useState(null); const [serverReady, setServerReady] = React.useState(false); const [authMode, setAuthMode] = React.useState("login"); const [authForm, setAuthForm] = React.useState({ name: "", email: "", password: "" }); const [authError, setAuthError] = React.useState(""); const [syncStatus, setSyncStatus] = React.useState("Checking account..."); const [activeId, setActiveId] = React.useState(null); const [editorOpen, setEditorOpen] = React.useState(false); const [toast, setToast] = React.useState(null); const [confetti, setConfetti] = React.useState([]); const [tweaks, setTweaks] = React.useState(() => window.PLANNER_TWEAK_DEFAULTS); /* Pick up tweak changes (since useTweaks is in PlannerTweaks; we mirror via postMessage) */ React.useEffect(() => { function onMsg(e) { const d = e.data; if (d && d.type === "__edit_mode_set_keys" && d.edits) { setTweaks(prev => ({ ...prev, ...d.edits })); } } window.addEventListener("message", onMsg); return () => window.removeEventListener("message", onMsg); }, []); /* Apply theme to document */ React.useEffect(() => { document.body.setAttribute("data-theme", tweaks.theme); document.body.setAttribute("data-motion", tweaks.motion < 3 ? "low" : "normal"); }, [tweaks.theme, tweaks.motion]); React.useEffect(() => { let cancelled = false; async function boot() { try { const me = await apiFetch("/api/auth/me"); if (cancelled) return; setTeacher(me.teacher); await loadPlannerFromServer({ fallbackState: state, setState, setSyncStatus }); if (!cancelled) { setServerReady(true); } } catch (error) { if (!cancelled) { setTeacher(false); setServerReady(false); setSyncStatus("Sign in to sync"); } } } boot(); return () => { cancelled = true; }; }, []); /* Persist locally for fast reloads and remotely for signed-in teachers. */ React.useEffect(() => { saveState(state); if (!teacher || !serverReady) return; setSyncStatus("Saving..."); clearTimeout(window.__plannerSaveTimer); window.__plannerSaveTimer = setTimeout(async () => { try { await apiFetch("/api/planner", { method: "PUT", body: JSON.stringify({ state }) }); setSyncStatus("Saved to Cloudflare"); } catch (error) { setSyncStatus("Save failed"); } }, 650); }, [state, teacher, serverReady]); const currentWeekStart = state.currentWeekStart; const weekStartDate = parseISODate(currentWeekStart); const week = state.weeks[currentWeekStart] || { settings: { ...window.PLANNER_DATA.DEFAULT_SETTINGS }, blocks: [] }; const settings = week.settings; const blocks = week.blocks; const showToast = (msg) => { setToast({ msg, t: Date.now() }); clearTimeout(window.__toastTimer); window.__toastTimer = setTimeout(() => setToast(null), 1800); }; const submitAuth = async (event) => { event.preventDefault(); setAuthError(""); setSyncStatus(authMode === "signup" ? "Creating account..." : "Signing in..."); try { const payload = { email: authForm.email, password: authForm.password }; if (authMode === "signup") { payload.name = authForm.name; } const result = await apiFetch(authMode === "signup" ? "/api/auth/signup" : "/api/auth/login", { method: "POST", body: JSON.stringify(payload) }); setTeacher(result.teacher); await loadPlannerFromServer({ fallbackState: state, setState, setSyncStatus }); setServerReady(true); setAuthForm({ name: "", email: "", password: "" }); showToast(authMode === "signup" ? "Account ready" : "Welcome back"); } catch (error) { setAuthError(error.message || "Could not sign in."); setSyncStatus("Sign in to sync"); } }; const logout = async () => { try { await apiFetch("/api/auth/logout", { method: "POST" }); } catch (error) {} setTeacher(false); setServerReady(false); setEditorOpen(false); setSyncStatus("Signed out"); showToast("Signed out"); }; const fireConfetti = () => { if (tweaks.motion < 2) return; const colors = PALETTE; const pieces = Array.from({ length: 30 + tweaks.motion * 3 }).map((_, i) => ({ id: makeId() + i, x: 30 + Math.random() * 40, delay: Math.random() * 0.3, rotate: Math.random() * 360, color: colors[Math.floor(Math.random() * colors.length)], size: 10 + Math.random() * 10 })); setConfetti(pieces); setTimeout(() => setConfetti([]), 2000); if (tweaks.sound) { try { const ctx = new (window.AudioContext || window.webkitAudioContext)(); [880, 1320, 1760].forEach((f, i) => { const o = ctx.createOscillator(); const g = ctx.createGain(); o.type = "triangle"; o.frequency.value = f; g.gain.value = 0; o.connect(g); g.connect(ctx.destination); g.gain.linearRampToValueAtTime(0.08, ctx.currentTime + 0.02 + i*0.06); g.gain.linearRampToValueAtTime(0, ctx.currentTime + 0.3 + i*0.06); o.start(ctx.currentTime + i*0.06); o.stop(ctx.currentTime + 0.35 + i*0.06); }); } catch (e) {} } }; /* Mutators */ const setWeek = (mut) => { setState(s => { const w = s.weeks[s.currentWeekStart] || { settings: { ...window.PLANNER_DATA.DEFAULT_SETTINGS }, blocks: [] }; const newW = typeof mut === "function" ? mut(w) : { ...w, ...mut }; return { ...s, weeks: { ...s.weeks, [s.currentWeekStart]: newW } }; }); }; const updateBlock = (id, patch) => { setWeek(w => ({ ...w, blocks: w.blocks.map(b => b.id === id ? normalizeBlock({ ...b, ...patch }) : b) })); }; const createBlock = (overrides = {}) => { const baseStart = clamp(settings.startHour * 60 + 120, settings.startHour * 60, settings.endHour * 60 - 30); const b = normalizeBlock({ id: makeId(), dayIndex: 0, start: baseStart, end: Math.min(baseStart + 45, settings.endHour * 60), title: "New lesson", typeId: "math", color: PALETTE[blocks.length % PALETTE.length], activities: [{ name: "Opening", minutes: 8, detail: "" }, { name: "Core activity", minutes: 25, detail: "" }, { name: "Wrap", minutes: 7, detail: "" }], ...overrides }); setWeek(w => ({ ...w, blocks: [...w.blocks, b] })); setActiveId(b.id); setEditorOpen(true); showToast("New block added"); }; const placeSticker = (blockId, sticker) => { setWeek(w => ({ ...w, blocks: w.blocks.map(b => b.id === blockId ? { ...b, stickers: [...(b.stickers||[]).filter(s => typeof s !== "string" || s !== sticker.kind), sticker] } : b) })); if (tweaks.motion >= 4) fireConfetti(); showToast("✨ Sticker added"); }; const duplicateBlock = (id) => { const b = blocks.find(x => x.id === id); if (!b) return; const copy = normalizeBlock({ ...b, id: makeId(), start: Math.min(b.start + 15, 1425), end: Math.min(b.end + 15, 1440), title: b.title + " copy" }); setWeek(w => ({ ...w, blocks: [...w.blocks, copy] })); setActiveId(copy.id); showToast("Duplicated"); }; const deleteBlock = (id) => { if (!confirm("Delete this lesson?")) return; setWeek(w => ({ ...w, blocks: w.blocks.filter(b => b.id !== id) })); setActiveId(null); setEditorOpen(false); showToast("Deleted"); }; const onSelect = (id, openEditor = false) => { setActiveId(id); if (openEditor) setEditorOpen(true); }; /* Week nav */ const shiftWeek = (days) => { setState(s => { const next = toISODate(addDays(parseISODate(s.currentWeekStart), days)); const weeks = { ...s.weeks }; if (!weeks[next]) weeks[next] = { settings: { ...window.PLANNER_DATA.DEFAULT_SETTINGS }, blocks: [] }; return { ...s, currentWeekStart: next, weeks }; }); setActiveId(null); showToast(days < 0 ? "← Previous week" : "Next week →"); }; const jumpToday = () => { const ws = toISODate(startOfWeek(new Date())); setState(s => { const weeks = { ...s.weeks }; if (!weeks[ws]) weeks[ws] = { settings: { ...window.PLANNER_DATA.DEFAULT_SETTINGS }, blocks: sampleBlocks() }; return { ...s, currentWeekStart: ws, weeks }; }); showToast("Jumped to today"); }; const exportWeek = () => { const payload = { exportedAt: new Date().toISOString(), currentWeekStart, week }; const blob = new Blob([JSON.stringify(payload, null, 2)], { type: "application/json" }); const a = document.createElement("a"); a.href = URL.createObjectURL(blob); a.download = "teaching-week-" + currentWeekStart + ".json"; document.body.appendChild(a); a.click(); URL.revokeObjectURL(a.href); a.remove(); showToast("Exported"); fireConfetti(); }; /* Stats */ const totalMinutes = blocks.reduce((sum, b) => sum + Math.max(b.end - b.start, 0), 0); const planned = blocks.length ? Math.round(blocks.reduce((s,b) => s + planCompletion(b), 0) / blocks.length) : 0; const activeBlock = blocks.find(b => b.id === activeId) || null; /* Save command */ const saveBlockAndCelebrate = () => { setEditorOpen(false); fireConfetti(); showToast("Saved! 🎉"); }; /* Build week range string */ const rangeStr = fmtDate(weekStartDate, { month: "short", day: "numeric" }) + " – " + fmtDate(addDays(weekStartDate, settings.includeWeekend ? 6 : 4), { month: "short", day: "numeric", year: "numeric" }); if (teacher === null) { return (

My Teaching Week

Loading your planner
); } if (!teacher) { return ( ); } return (
{/* Background scene */} {/* Top bar */}

My Teaching Week

{rangeStr}
{syncStatus}
{/* Metrics */}
{blocks.length}
Lessons
{fmtDur(totalMinutes)}
Teaching
{planned}%
Planned
{/* Board */} createBlock(o)} onUpdate={updateBlock} onPlaceSticker={placeSticker} motion={tweaks.motion} /> {/* Editor */} {/* Toast */}
{toast && toast.msg}
{/* Confetti */} {confetti.length > 0 && (
{confetti.map(p => (
))}
)} {/* Sticker tray */} {/* Floating "open editor" handle when a block is selected */} {activeBlock && !editorOpen && ( )} {/* Tweaks panel */}
); } function AuthScreen({ mode, form, error, syncStatus, tweaks, onMode, onForm, onSubmit }) { const isSignup = mode === "signup"; return (

My Teaching Week

Cloud saved weekly planners
{isSignup && ( )} {error &&
{error}
}
{syncStatus}
); } async function loadPlannerFromServer({ fallbackState, setState, setSyncStatus }) { const result = await apiFetch("/api/planner"); const cloudWeeks = result.weeks || {}; const hasCloudWeeks = Object.keys(cloudWeeks).length > 0; const nextState = normalizeState({ currentWeekStart: fallbackState.currentWeekStart, weeks: hasCloudWeeks ? cloudWeeks : fallbackState.weeks }); setState(nextState); setSyncStatus(hasCloudWeeks ? "Loaded from Cloudflare" : "Ready to save to Cloudflare"); } async function apiFetch(url, options = {}) { const response = await fetch(url, { credentials: "include", headers: { "Content-Type": "application/json", ...(options.headers || {}) }, ...options }); const payload = await response.json().catch(() => ({})); if (!response.ok) { throw new Error(payload.error || "Request failed"); } return payload; } const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); })();