/* ════════════════════════════════════════════════════════════════
Router / app entry
════════════════════════════════════════════════════════════════ */
/* ────────────────────────────────────────────────────────────────
GamePage — DEPLOY (themed simulation) mounted via iframe.
Replaces the V4.7 Breakout-style game (now at archive/pages-game-v4-7.jsx).
DEPLOY lives as a self-contained static app at /deploy/index.html.
Theme handoff: the parent's data-theme attribute is forwarded to the
iframe via both URL param (cold load) and postMessage (live toggle).
DEPLOY listens for {type:"deploy:ready"} → we reply with current theme.
──────────────────────────────────────────────────────────────── */
function GamePage({ navigate }) {
const iframeRef = React.useRef(null);
// Read the current parent theme from
const currentTheme = () =>
document.documentElement.dataset.theme === "dark" ? "dark" : "light";
// Push the current theme into the iframe (postMessage)
const pushTheme = React.useCallback(() => {
const f = iframeRef.current;
if (!f || !f.contentWindow) return;
f.contentWindow.postMessage({ type: "deploy:theme", value: currentTheme() }, "*");
}, []);
// When DEPLOY signals it's ready, send the current theme immediately.
React.useEffect(() => {
const onMsg = (e) => {
if (e && e.data && e.data.type === "deploy:ready") pushTheme();
};
window.addEventListener("message", onMsg);
return () => window.removeEventListener("message", onMsg);
}, [pushTheme]);
// Push theme whenever the parent's data-theme attribute changes (toggle click).
React.useEffect(() => {
const obs = new MutationObserver(() => pushTheme());
obs.observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme"] });
return () => obs.disconnect();
}, [pushTheme]);
// Cold load — include ?theme= so DEPLOY doesn't briefly flash light before postMessage lands.
const src = "deploy/index.html?theme=" + currentTheme();
return (
DEPLOY · AI deployment simulation
~3 min · five themes · classroom prototype
);
}
function App() {
const [route, navigate] = useRoute();
const [theme, toggleTheme] = useDarkMode();
const auth = useAuth();
const toast = useToast();
let view;
switch (route.name) {
case "home":
case "":
view = ;
break;
case "about":
view = ;
break;
case "thesis":
view = ;
break;
case "blog":
view = ;
break;
case "post":
view = ;
break;
case "work":
view = ;
break;
case "achievements":
view = ;
break;
case "contact":
view = ;
break;
case "game":
view = ;
break;
case "signin":
view = ;
break;
case "portal":
view = ;
break;
case "contribution":
view = ;
break;
default:
view = ;
}
return (
);
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render();