// Shared design tokens window.T = { navy950: '#080C14', navy900: '#0D1420', navy800: '#111B2E', navy700: '#172340', navy600: '#1E2E52', gold400: '#F5C842', gold500: '#E8B820', gold600: '#C99A10', green: '#2D8C4E', greenLt: '#37A85F', card: '#1A2236', cardEmpty:'#1E2840', border: '#232E45', grayMuted:'#4A5568', text: '#F0F4FF', textSec: '#8896B0', textMute: '#4A5568', red: '#E87A7A', }; const T = window.T; // ─── Team colors (primary = fill, secondary = stroke/border) ───────── // Used for crest placeholders on the reveal screen AND player dots in-game. // Covers teams currently in the matches database. Add new entries as matches are added. window.TEAM_COLORS = { // ── Premier League ── 'Arsenal': { primary: '#EF0107', secondary: '#FFFFFF' }, 'Chelsea': { primary: '#034694', secondary: '#FFFFFF' }, 'Liverpool': { primary: '#C8102E', secondary: '#FFFFFF' }, 'Manchester City': { primary: '#6CABDD', secondary: '#FFFFFF' }, 'Manchester United': { primary: '#DA020E', secondary: '#FBE122' }, 'Tottenham Hotspur': { primary: '#FFFFFF', secondary: '#132257' }, 'Leicester': { primary: '#003090', secondary: '#FDBE11' }, 'Wolverhampton Wanderers': { primary: '#FDB913', secondary: '#231F20' }, // ── La Liga ── 'Real Madrid': { primary: '#FFFFFF', secondary: '#FEBE10' }, 'Barcelona': { primary: '#A50044', secondary: '#004D98' }, 'Atlético Madrid': { primary: '#CB3524', secondary: '#FFFFFF' }, // ── Serie A ── 'Inter': { primary: '#0068A8', secondary: '#000000' }, 'Milan': { primary: '#FB090B', secondary: '#000000' }, 'Juventus': { primary: '#FFFFFF', secondary: '#000000' }, // ── Bundesliga ── 'Bayern Munich': { primary: '#DC052D', secondary: '#FFFFFF' }, 'Borussia Dortmund': { primary: '#FDE100', secondary: '#000000' }, 'Bayer Leverkusen': { primary: '#E32221', secondary: '#000000' }, 'RB Leipzig': { primary: '#DD0741', secondary: '#FFFFFF' }, // ── Ligue 1 ── 'Paris Saint-Germain': { primary: '#004170', secondary: '#DA291C' }, 'PSG': { primary: '#004170', secondary: '#DA291C' }, // ── Other European ── 'Ajax': { primary: '#FFFFFF', secondary: '#D2122E' }, 'Benfica': { primary: '#E30613', secondary: '#FFFFFF' }, // ── National teams ── 'Argentina': { primary: '#75AADB', secondary: '#FFFFFF' }, 'Belgium': { primary: '#ED2939', secondary: '#FAE042' }, 'Brazil': { primary: '#FEDF00', secondary: '#009B3A' }, 'Croatia': { primary: '#FF0000', secondary: '#FFFFFF' }, 'England': { primary: '#FFFFFF', secondary: '#CE1124' }, 'France': { primary: '#002395', secondary: '#FFFFFF' }, 'Germany': { primary: '#000000', secondary: '#DD0000' }, 'Ghana': { primary: '#FCD116', secondary: '#CE1126' }, 'Italy': { primary: '#0066CC', secondary: '#FFFFFF' }, 'Netherlands': { primary: '#FF6C00', secondary: '#FFFFFF' }, 'Portugal': { primary: '#C41E3A', secondary: '#006600' }, 'Spain': { primary: '#AA151B', secondary: '#F1BF00' }, 'Sweden': { primary: '#006AA7', secondary: '#FECC00' }, 'Uruguay': { primary: '#5CBCEC', secondary: '#000000' }, }; // Returns { primary, secondary } for a team name, or fallback colors if unknown. // Side fallback: home = red, away = navy (the old default). window.getTeamColors = function(teamName, isHome = true) { if (teamName && window.TEAM_COLORS[teamName]) { return window.TEAM_COLORS[teamName]; } return isHome ? { primary: '#C41E3A', secondary: '#F5C842' } : { primary: '#08306B', secondary: '#F5C842' }; }; // If home and away teams share the same primary color, the away team uses // its secondary as the primary so users can tell the dots apart on the pitch. window.getMatchColors = function(homeTeam, awayTeam) { const home = window.getTeamColors(homeTeam, true); let away = window.getTeamColors(awayTeam, false); if (home.primary.toUpperCase() === away.primary.toUpperCase()) { // Swap primary/secondary for the away team so there's visual contrast away = { primary: away.secondary, secondary: away.primary }; } return { home, away }; }; // Hex token icon function HexIcon({ size = 14, fill = T.gold500 }) { return ( ); } // Wordmark function Wordmark({ size = 28 }) { return (
FUTBALL
); } // Plain title (used on inner screens — STATS, PLAY, etc.) function PageWordmark({ text }) { return (
{text}
); } // Token pill — "240 Tokens" function TokenPill({ amount }) { // If no amount provided, self-fetch and listen for global updates const [autoTokens, setAutoTokens] = React.useState(null); const isAuto = amount === undefined; React.useEffect(() => { if (!isAuto) return; let mounted = true; const load = () => { if (!window.fetchTokens) return; window.fetchTokens() .then(t => { if (mounted) setAutoTokens(t?.balance ?? 0); }) .catch(() => {}); }; load(); const onUpdate = () => load(); window.addEventListener('tokens:updated', onUpdate); return () => { mounted = false; window.removeEventListener('tokens:updated', onUpdate); }; }, [isAuto]); const display = isAuto ? (autoTokens ?? '—') : (amount ?? '—'); return (
{display} Tokens
); } // Top app header — shows token balance when signed in, nothing when anonymous function AppHeader({ left }) { const [tokens, setTokens] = React.useState(null); const [signedIn, setSignedIn] = React.useState(false); React.useEffect(() => { let mounted = true; const load = () => { window.isSignedIn().then(yes => { if (!mounted) return; setSignedIn(yes); if (yes && window.fetchTokens) { window.fetchTokens() .then(t => { if (mounted) setTokens(t?.balance ?? 0); }) .catch(() => {}); } }); }; load(); const onUpdate = () => load(); window.addEventListener('tokens:updated', onUpdate); return () => { mounted = false; window.removeEventListener('tokens:updated', onUpdate); }; }, []); return (
{left} {signedIn && }
); } // Section heading (Bakbak) function SectionLabel({ children, size = 20, top = 18, bottom = 12 }) { return (

{children}

); } // Page title + sub function PageTitleBlock({ title, sub }) { return (

{title}

{sub}
); } // Bottom nav icons const Bar = { home: ( ), stats: ( ), play: ( ), rank: ( ), achievements: ( ), profile: ( ), }; function BottomNav({ active, onChange }) { const items = [ { id: 'home', label: 'Home', icon: Bar.home }, { id: 'stats', label: 'Stats', icon: Bar.stats }, { id: 'play', label: 'Play', icon: Bar.play }, { id: 'achievements', label: 'Trophies', icon: Bar.achievements }, { id: 'profile', label: 'Profile', icon: Bar.profile }, ]; return ( ); } // Phone shell — simulated device on desktop, full viewport on mobile function Phone({ children }) { const [isMobile, setIsMobile] = React.useState(false); React.useEffect(() => { const check = () => setIsMobile(window.innerWidth <= 500); check(); window.addEventListener('resize', check); return () => window.removeEventListener('resize', check); }, []); // Mobile: fill the real viewport, no fake phone chrome if (isMobile) { return (
{children}
); } // Desktop: simulated iPhone frame (for dev preview) return (
9:05
{children}
); } // Scrollable content region function Content({ children }) { return (
{children}
); } Object.assign(window, { HexIcon, Wordmark, PageWordmark, TokenPill, AppHeader, SectionLabel, PageTitleBlock, BottomNav, Phone, Content, Bar, });