);
}
// ─────────────────────────────────────────────────────────────────────────────
// COUNTDOWN
function getCountdown(toIso, nowMs) {
const t = new Date(toIso).getTime() - (nowMs ?? Date.now());
const clamp = Math.max(t, 0);
return {
d: Math.floor(clamp / 86400000),
h: Math.floor(clamp % 86400000 / 3600000),
m: Math.floor(clamp % 3600000 / 60000),
s: Math.floor(clamp % 60000 / 1000)
};
}
// ─────────────────────────────────────────────────────────────────────────────
// PAGE HOOK
function usePage(initial = 'home') {
const [page, setPage] = React.useState(initial);
return [page, setPage];
}
// ─────────────────────────────────────────────────────────────────────────────
// HELPERS — team lookup
const TEAM_BY_ID = Object.fromEntries(URL_LEAGUE.teams.map((t) => [t.id, t]));
const DRIVER_BY_ID = Object.fromEntries(URL_LEAGUE.drivers.map((d) => [d.id, d]));
// ─────────────────────────────────────────────────────────────────────────────
// LEAGUES — the four UR2D leagues. Each tab can switch between them.
// LEAGUES — the four UR2D leagues, ordered by tier (top → bottom).
// Changing this array reorders every switcher / leader-card row across the site.
const LEAGUES = [
{ id: 'ul', short: 'UL', name: 'Ultimate League', tier: 'Tier 1 · Pro', logo: 'assets/ul-logo-cropped.png', accent: '#E10600' },
{ id: 'hl', short: 'CL', name: 'Challenger League', tier: 'Tier 2 · Advanced', logo: 'assets/cl-logo-cropped.png', accent: '#B4237A' },
{ id: 'jl', short: 'JL', name: 'Journeyman League', tier: 'Tier 3 · Intermediate', logo: 'assets/jl-logo-gradient-solid.png', accent: '#2684FF' }, // full-logo blue→orange gradient, no white lift (user, 2026-10-04); red-parts-only: jl-logo-blue-orange.png; solid blue: jl-logo-blue.png; original red: jl-logo-cropped.png
{ id: 'al', short: 'AL', name: 'Apprentice League', tier: 'Tier 4 · Beginner', logo: 'assets/al-logo-cropped.png', accent: '#1F8A5B' }];
const LEAGUE_BY_ID = Object.fromEntries(LEAGUES.map((l) => [l.id, l]));
// Shared global league state across pages (persists when user navigates)
function useLeagueState(initial = 'ul') {
const [league, setLeague] = React.useState(initial);
return [league, setLeague];
}
// League logo + name display
function LeagueBadge({ league, height = 56, showName = true }) {
const L = LEAGUE_BY_ID[league];
return (
{showName &&
{L.name}
}
);
}
// League switcher — four tabbed buttons with mini-logos. Place at the top of each subpage.
function LeagueSwitcher({ league, setLeague, dense = false }) {
return (
{LEAGUES.map((L, i) => {
const active = league === L.id;
return (
);
})}
);
}
// ─────────────────────────────────────────────────────────────────────────────
// UR2D MARK — Stylised "U2" monogram. Bold + arcade-y.
// "U" shape with the "2" curve nested into its right arm.
function UR2DMark({ size = 40, color, stroke = COLORS.black }) {
color = color || COLORS.red;
return (
);
}
// M2M MARK — footer credit mark; same hex plate + stroke language as UR2DMark, "M 2 M" monogram.
function M2MMark({ size = 40, color, stroke = COLORS.black }) {
color = color || COLORS.red;
return (
);
}
// LOGO LOCKUP — mark + wordmark
function LogoLockup({ size = 40, color, accent, dense = false, mark }) {
color = color || COLORS.text;
accent = accent || COLORS.red;
const Mark = mark === 'm2m' ? M2MMark : UR2DMark;
return (