/* App shell — hash-based routing + mobile-first responsive layout.
Routes: home, predict, dashboard (public), admin (full-screen). */
function useHashRoute() {
const get = () => {
const h = (window.location.hash || '').replace(/^#\/?/, '');
if (h === 'predict') return 'predict';
if (h === 'dashboard') return 'dashboard';
if (h === 'admin' || h.startsWith('admin/')) return 'admin';
return 'home';
};
const [route, setRoute] = useState(get());
useEffect(() => {
const fn = () => setRoute(get());
window.addEventListener('hashchange', fn);
return () => window.removeEventListener('hashchange', fn);
}, []);
const nav = (to) => {
window.location.hash = `#/${to === 'home' ? '' : to}`;
window.scrollTo({ top: 0, behavior: 'smooth' });
};
return [route, nav];
}
function ResponsiveStyles() {
return (
);
}
function PublicShell({ route, nav, children }) {
return (
{children}
{/* Floating admin link in the corner — discreet */}
);
}
function useLiveMatches() {
const [, forceUpdate] = React.useReducer(x => x + 1, 0);
useEffect(() => {
let active = true;
async function refresh() {
try {
const res = await fetch('/api/matches');
if (!res.ok || !active) return;
const data = await res.json();
if (!Array.isArray(data.matches) || data.matches.length === 0) return;
// Rebuild match objects (kickoffAt must be a Date; API sends kickoffMs)
const updated = data.matches.map(m => ({
...m,
kickoffAt: new Date(m.kickoffMs),
}));
// Mutate the shared MATCHES array in-place — all components re-read it
window.MATCHES.splice(0, window.MATCHES.length, ...updated);
if (active) forceUpdate();
} catch (_) { /* keep static data on network error */ }
}
refresh();
const timer = setInterval(refresh, 5 * 60 * 1000); // re-fetch every 5 min
return () => { active = false; clearInterval(timer); };
}, []);
}
function App() {
const [route, nav] = useHashRoute();
useLiveMatches();
if (route === 'admin') {
return (
);
}
return (
{route === 'home' && }
{route === 'predict' && }
{route === 'dashboard' && }
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();