/* App entry */
// NOTE: useState/useEffect come from the global destructure in components.jsx (loaded first).
// Do NOT re-declare them here — Babel-standalone runs each text/babel script in shared
// global scope, so a second `const { useState } = React` throws a redeclaration error
// that aborts this file and leaves #app blank.
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"theme": "dark",
"accent": "redblue",
"showTicker": true,
"showCountdown": true,
"displayHero": "fight-night",
"density": "comfy"
}/*EDITMODE-END*/;
function App() {
const tweaks = (typeof useTweaks !== 'undefined') ? useTweaks(TWEAK_DEFAULTS) : { values: TWEAK_DEFAULTS, set: () => {} };
const v = tweaks.values || TWEAK_DEFAULTS;
// Apply theme via root data attr
useEffect(() => {
document.documentElement.dataset.theme = v.theme || 'dark';
document.documentElement.dataset.accent = v.accent || 'redblue';
}, [v.theme, v.accent]);
// Override accent CSS based on tweak
const accentVars = {
redblue: { red: '#ff3b3b', blue: '#3b8cff', gold: '#d9c27a' },
mono: { red: '#e6e6e6', blue: '#888888', gold: '#cfcfcf' },
electric: { red: '#ff4d6d', blue: '#5af0c0', gold: '#ffe066' },
sunset: { red: '#ff6b35', blue: '#ffb627', gold: '#fff3b0' },
}[v.accent] || { red: '#ff3b3b', blue: '#3b8cff', gold: '#d9c27a' };
useEffect(() => {
const r = document.documentElement;
r.style.setProperty('--red', accentVars.red);
r.style.setProperty('--blue', accentVars.blue);
r.style.setProperty('--gold', accentVars.gold);
}, [v.accent]);
// Scroll-reveal via Intersection Observer
useEffect(() => {
const io = new IntersectionObserver(
(entries) => entries.forEach(e => {
if (e.isIntersecting) { e.target.classList.add('in-view'); io.unobserve(e.target); }
}),
{ threshold: 0.06, rootMargin: '0px 0px -60px 0px' }
);
document.querySelectorAll('.scroll-reveal').forEach(el => io.observe(el));
return () => io.disconnect();
}, []);
// Hero parallax — translates background at 22% scroll speed
useEffect(() => {
let ticking = false;
const onScroll = () => {
if (ticking) return;
ticking = true;
requestAnimationFrame(() => {
const bg = document.querySelector('.hero-bg-img');
if (bg) bg.style.transform = `translateY(${window.scrollY * 0.22}px) scale(1.1)`;
ticking = false;
});
};
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, []);
return (
<>
{/* Topbar + ticker injected by topbar.js — keep React out of nav so it's identical on every page */}
{/* Tweaks panel */}
{/* Self-gating: TweaksPanel renders null until a host frame posts
__activate_edit_mode, so it never surfaces for normal visitors.
Do NOT add a ?debug guard here — it breaks design-mode activation. */}
{(typeof TweaksPanel !== 'undefined') && (
tweaks.set('accent', x)} />
tweaks.set('showCountdown', x)} />
)}
{/* Global CSS animations + responsive */}
);
}
const root = ReactDOM.createRoot(document.getElementById('app'));
root.render();