// app.jsx — top-level wiring for the open-world frgmt park. const { useState: aUseState, useEffect: aUseEffect, useRef: aUseRef, useCallback: aUseCallback } = React; function App() { useGlobalCursor(); // palette: "park", "after-hours", "riso", "concrete", and the secret "void" const [paletteId, setPaletteId] = aUseState("park"); const [paletteUnlocked, setPaletteUnlocked] = aUseState({ park:1, "after-hours":1, riso:1, concrete:1, void:0 }); aUseEffect(() => { applyPalette(PALETTES[paletteId]); }, [paletteId]); // wildness const [wild, setWild] = aUseState(1); // welcome flash (first 1.4s) const [welcome, setWelcome] = aUseState(true); aUseEffect(() => { const t = setTimeout(() => setWelcome(false), 1500); return () => clearTimeout(t); }, []); // easter egg state const [eggs, setEggs] = aUseState({ sun:0, bench:0, flag:0, stamp:0, garden:0 }); const [fireworkSeed, setFireworkSeed] = aUseState(0); const [balloons, setBalloons] = aUseState([]); const balloonId = aUseRef(0); const [flashOn, setFlashOn] = aUseState(false); const [eggToast, setEggToast] = aUseState(null); const triggerEgg = aUseCallback((kind) => { setEggs((prev) => ({ ...prev, [kind]: (prev[kind] || 0) + 1 })); if (kind === "sun") { const order = ["park","riso","after-hours","concrete"]; const next = order[(order.indexOf(paletteId) + 1) % order.length]; setPaletteId(next); setEggToast({ text: `palette → ${PALETTES[next].label}`, color: "var(--sun)" }); } else if (kind === "bench") { setEggToast({ text: "you sat for a moment.", color: "var(--gum)" }); } else if (kind === "flag") { setFireworkSeed((n) => n + 1); setEggToast({ text: "flag · fragments fly", color: "var(--cherry)" }); } else if (kind === "stamp") { setEggToast({ text: "00 / index — wild +", color: "var(--ink)" }); setWild((w) => clamp(w + 0.4, 0.4, 2.4)); } else if (kind === "garden") { setEggToast({ text: "the pebbles agree", color: "var(--grass)" }); setFlashOn(true); setTimeout(() => setFlashOn(false), 240); setFireworkSeed((n) => n + 1); } else if (kind === "konami") { setPaletteUnlocked((u) => ({ ...u, void: 1 })); setPaletteId("void"); setEggToast({ text: "void · unlocked", color: "var(--cherry)" }); } else if (kind === "word") { setFireworkSeed((n) => n + 1); setFlashOn(true); setTimeout(() => setFlashOn(false), 200); setEggToast({ text: "frgmt · spelled", color: "var(--cherry)" }); } else if (kind === "balloon") { // not used directly — see right-click handler } }, [paletteId]); // toast auto-clear aUseEffect(() => { if (!eggToast) return; const t = setTimeout(() => setEggToast(null), 1800); return () => clearTimeout(t); }, [eggToast]); // konami useKonami(() => triggerEgg("konami")); // word "frgmt" useWord("frgmt", () => triggerEgg("word")); // 1/2/3/0 hotkeys jump camera useHotkey({ "1": () => window.dispatchEvent(new CustomEvent("frgmt:goto", { detail:{ zone:"slide" }})), "2": () => window.dispatchEvent(new CustomEvent("frgmt:goto", { detail:{ zone:"sandbox" }})), "3": () => window.dispatchEvent(new CustomEvent("frgmt:goto", { detail:{ zone:"swings" }})), "0": () => window.dispatchEvent(new CustomEvent("frgmt:goto-home", {})), }); // right-click anywhere to release a balloon aUseEffect(() => { const onContext = (e) => { e.preventDefault(); // we want the balloon's spawn in WORLD coords. Dispatch a request to world. window.dispatchEvent(new CustomEvent("frgmt:balloon", { detail:{ x: e.clientX, y: e.clientY } })); }; window.addEventListener("contextmenu", onContext); return () => window.removeEventListener("contextmenu", onContext); }, []); // listen for balloon-spawn from outside; world translates viewport coords to world coords // (we don't have direct access here, so we listen to an event that supplies world coords) aUseEffect(() => { const onBalloon = (e) => { const colors = ["var(--cherry)","var(--sun)","var(--sky)","var(--grass)","var(--gum)","var(--plum)"]; setBalloons((b) => [...b, { id: balloonId.current++, x: e.detail.x, y: e.detail.y, born: performance.now(), color: choose(colors), }].slice(-30)); }; window.addEventListener("frgmt:balloon-world", onBalloon); return () => window.removeEventListener("frgmt:balloon-world", onBalloon); }, []); // home/jump-xy listeners must be wired inside World; we re-emit // (already handled via "frgmt:goto" by World; "frgmt:goto-home" we handle here) aUseEffect(() => { const onHome = () => { const vw = window.innerWidth, vh = window.innerHeight; window.dispatchEvent(new CustomEvent("frgmt:goto-xy", { detail: { x: -(1300 - vw/2), y: -(420 - vh/2) } })); }; window.addEventListener("frgmt:goto-home", onHome); return () => window.removeEventListener("frgmt:goto-home", onHome); }, []); return ( <> {/* HUD: brand corner */}
{/* HUD: zone chips center top */}
{["slide","sandbox","swings"].map((id) => ( ))}
{/* HUD: status / palette / wildness */}
live {/* palette dots */} {Object.entries(PALETTES).map(([id, p]) => paletteUnlocked[id] ? (
{/* welcome flash */} {welcome && (
frgmt
)} {/* full screen flash for special moments */}
{/* egg toast */} {eggToast && (
{eggToast.text}
)} ); } ReactDOM.createRoot(document.getElementById("root")).render();