// dctrl. PUNK — app entrypoint const { useState } = React; const ACCENT_HEX = { orange: "#FF450C", acid: "#6CFF3D", cyan: "#25E5FF", pink: "#FF2E88" }; function PunkCursor({ active, accent }) { const ref = React.useRef(null); React.useEffect(() => { if (!active) return; const el = ref.current; if (!el) return; let raf = 0, x = -100, y = -100; const onMove = (e) => { x = e.clientX; y = e.clientY; if (!raf) raf = requestAnimationFrame(apply); }; const apply = () => { raf = 0; el.style.transform = `translate3d(${x - 14}px, ${y - 14}px, 0)`; }; const onOver = (e) => { const t = e.target; const hov = t && (t.closest && t.closest('a, button, [role="button"], .shot, .event-row, .talk, .nav-cta')); el.classList.toggle('hover', !!hov); }; const onLeave = () => el.classList.add('hidden'); const onEnter = () => el.classList.remove('hidden'); document.addEventListener('mousemove', onMove, { passive: true }); document.addEventListener('mouseover', onOver, { passive: true }); document.addEventListener('mouseleave', onLeave); document.addEventListener('mouseenter', onEnter); return () => { cancelAnimationFrame(raf); document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseover', onOver); document.removeEventListener('mouseleave', onLeave); document.removeEventListener('mouseenter', onEnter); }; }, [active]); if (!active) return null; // SVG fill = accent. mix-blend-mode: difference flips it to black when it // sits on its own accent color (since accent XOR accent = 0,0,0). return ( ); } function App() { const [intent, setIntent] = useState("membership"); const [modal, setModal] = useState(null); const [detail, setDetail] = useState(null); // { kind: 'photo'|'event', item } const open = (kind) => setModal(kind || intent); // Tweaks defaults const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "theme": "black", "accent": "orange", "scanlines": false, "halftone": true, "punkCursor": true }/*EDITMODE-END*/; const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS); // Apply tweaks to + React.useEffect(() => { const html = document.documentElement; const body = document.body; html.setAttribute("data-theme", t.theme === "black" ? "" : t.theme); html.setAttribute("data-accent", t.accent === "orange" ? "" : t.accent); body.classList.toggle("scanlines", !!t.scanlines); body.classList.toggle("halftone", !!t.halftone); body.classList.toggle("has-punk-cursor", !!t.punkCursor); }, [t.theme, t.accent, t.scanlines, t.halftone, t.punkCursor]); return (

{window.StatusBar ? : null}

{window.Nav ? : null} {window.Hero ? : null} {window.Manifesto ? : null} {window.History ? : null} {window.SpaceGallery ? setDetail({ kind: "photo", item: s })}/> : null} {window.VirtualTour ? : null} {window.Calendar ? : null} {window.Donate ? : null} {window.Talks ? : null}

{window.Footer ? : null} {window.ApplyModal ? ( setModal(null)}/> ) : null} {window.DetailModal ? ( setDetail(null)} /> ) : null} {window.TweaksPanel ? ( setTweak("theme", v)} /> setTweak("accent", v)} /> setTweak("halftone", v)} /> setTweak("scanlines", v)} /> setTweak("punkCursor", v)} /> ) : null}

); } const root = ReactDOM.createRoot(document.getElementById("root")); root.render();