/* 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 === 'fixtures') return 'fixtures';
if (h === 'dashboard') return 'dashboard';
if (h === 'my-predictions') return 'my-predictions';
if (h === 'penguin-hq' || h.startsWith('penguin-hq/')) return 'admin';
if (h === 'about') return 'about';
if (h === 'terms') return 'terms';
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}`;
if (to !== 'fixtures') {
window.scrollTo({ top: 0, behavior: 'smooth' });
}
};
return [route, nav];
}
/* Per-route SEO: title, description, OG/Twitter, robots.
Static in index.html covers the default (home) state for first paint /
social-card scrapers; this keeps in-app navigation (hash routes) in sync for
crawlers that execute JS and for the document title shown in browser tabs. */
var ROUTE_SEO = {
home: {
title: 'SunFront World Cup Foari 2026 — Predict Matches & Win Prizes | Maldives',
description: "Join SunFront's FIFA World Cup 2026 prediction game. Pick match winners, climb the leaderboard, and win prizes from DKAA, Samsung, KDK, JBL, Hatari, Makute & Truemark.",
},
fixtures: {
title: 'FIFA World Cup 2026 Fixtures & Schedule (Maldives Time) | SunFront',
description: 'Full FIFA World Cup 2026 match schedule in Maldives time (MVT) — group stage through the Final, with kickoff times, venues and stage labels.',
},
predict: {
title: 'Make Your Predictions | SunFront World Cup Foari 2026',
description: 'Submit your FIFA World Cup 2026 match predictions and compete for prizes on the SunFront leaderboard.',
},
dashboard: {
title: 'Leaderboard & Standings | SunFront World Cup Foari 2026',
description: 'See the top predictors and live standings in the SunFront FIFA World Cup 2026 prediction competition.',
},
'my-predictions': {
title: 'My Predictions | SunFront World Cup Foari 2026',
description: 'Review your submitted FIFA World Cup 2026 match predictions.',
noindex: true,
},
admin: {
title: 'Admin | SunFront World Cup Foari 2026',
noindex: true,
},
about: {
title: 'About SunFront World Cup Foari 2026',
description: 'About the SunFront World Cup Foari 2026 prediction campaign — an independent fan competition based in Malé, Maldives. Not affiliated with FIFA.',
},
terms: {
title: 'Terms & Conditions | SunFront World Cup Foari 2026',
description: 'Terms and conditions for the SunFront World Cup Foari 2026 prediction competition.',
},
};
function useSEOMeta(route) {
useEffect(() => {
var seo = ROUTE_SEO[route] || ROUTE_SEO.home;
document.title = seo.title;
var setMeta = function (name, content, attr) {
attr = attr || 'name';
var sel = 'meta[' + attr + '="' + name + '"]';
var el = document.head.querySelector(sel);
if (!el) {
el = document.createElement('meta');
el.setAttribute(attr, name);
document.head.appendChild(el);
}
el.setAttribute('content', content);
};
setMeta('og:title', seo.title, 'property');
setMeta('twitter:title', seo.title);
if (seo.description) {
setMeta('description', seo.description);
setMeta('og:description', seo.description, 'property');
setMeta('twitter:description', seo.description);
}
setMeta('robots', seo.noindex ? 'noindex, nofollow' : 'index, follow');
}, [route]);
}
function ResponsiveStyles() {
return (
);
}
function PublicShell({ route, nav, children }) {
return (
{children}
);
}
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); };
}, []);
}
const FIGURINE_MAP = {
home: ['messi', 'ronaldo'],
fixtures: ['mbappe', 'haaland'],
predict: ['vinicius', 'bellingham'],
dashboard: ['kane', 'yamal'],
'my-predictions': ['pulisic', 'haaland'], // haaland intentionally reused — only 9 players available
};
function FigurineLayer({ route }) {
const pair = FIGURINE_MAP[route];
if (!pair) return null;
return (
<>