// wci26_pwa/m-chrome.jsx — iOS chrome (status bar, large title, tab bar) + SF-symbol-ish icons // ───────────────────────────────────────────────────────────── // Icons (drawn fresh, no copying SF Symbols exactly) // ───────────────────────────────────────────────────────────── const Icon = { bolt: (filled, color) => ( ), globe: (filled, color) => ( ), trophy: (filled, color) => ( ), wallet: (filled, color) => ( ), more: (filled, color) => ( ), chevR: (color = 'rgba(235,235,245,0.3)') => ( ), chevL: (color = '#fff') => ( ), search: (color = '#fff') => ( ), xSocial: (color = '#fff') => ( ), telegram: (color = '#fff') => ( ), bell: (color = '#fff') => ( ), share: (color = '#fff') => ( ), plus: (color = '#fff') => ( ), star: (filled, color) => ( ), team: (filled, color) => ( ), flame: (color = '#FF7A1F') => ( ), spark: (color = '#fff') => ( ), }; // ───────────────────────────────────────────────────────────── // Status bar (9:41 + signal + wifi + battery) // ───────────────────────────────────────────────────────────── const StatusBar = ({ time = '9:41' }) => (
{time}
{/* dynamic island space */}
); // ───────────────────────────────────────────────────────────── // Large nav (iOS 17 large title that compresses on scroll) // ───────────────────────────────────────────────────────────── const NavBar = ({ title, eyebrow, trailing, leading, compact = false }) => (
{leading}
{compact ? title : ''}
{trailing}
{!compact && (
{eyebrow && (
{eyebrow}
)}
{title}
)}
); // Small glass pill button for nav const NavPill = ({ children, onClick, href, ariaLabel, title, style = {} }) => { const sharedStyle = { width: 34, height: 34, borderRadius: 999, background: 'linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02))', backdropFilter: 'blur(22px) saturate(180%)', WebkitBackdropFilter: 'blur(22px) saturate(180%)', border: '0.5px solid rgba(255,255,255,0.14)', boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.18), ' + 'inset 0 -1px 0 rgba(0,0,0,0.2), ' + '0 4px 12px -2px rgba(0,0,0,0.45)', display: 'grid', placeItems: 'center', color: '#fff', cursor: 'pointer', ...style, }; if (href) { return ( {children} ); } return ( ); }; // Sync-with-desktop pill (key visible affordance) const SyncPill = ({ online }) => (
Synced
); // ───────────────────────────────────────────────────────────── // Bottom tab bar — liquid glass // ───────────────────────────────────────────────────────────── const MOBILE_TABS = [ { k: 'live', label: 'Live', icon: Icon.bolt }, { k: 'globe', label: 'Globe', icon: Icon.globe }, { k: 'battle', label: 'Battle', icon: Icon.trophy }, { k: 'rewards', label: 'Rewards', icon: Icon.wallet }, { k: 'team', label: 'Teams', icon: Icon.team }, ]; const TabBar = ({ tab, setTab }) => (
{/* Shine highlight along top edge */}
{MOBILE_TABS.map(t => { const active = tab === t.k; const color = active ? '#F5D020' : 'rgba(235,235,245,0.55)'; return ( ); })} {/* Home indicator */}
); // ───────────────────────────────────────────────────────────── // Notification toast banner (iOS push) // ───────────────────────────────────────────────────────────── const NotifToast = ({ visible, country, amount }) => { if (!visible) return null; return (
WCI26 now
{country && ( <> {country.name} just pumped ${'+'}{amount}% in the last 5m )}
); }; // ───────────────────────────────────────────────────────────── // Mini sparkline (synthetic from country momentum) // ───────────────────────────────────────────────────────────── const MobileSparkline = ({ data, color = '#34C759', w = 60, h = 24, fill = true }) => { const min = Math.min(...data); const max = Math.max(...data); const range = max - min || 1; const pts = data.map((v, i) => { const x = (i / (data.length - 1)) * w; const y = h - ((v - min) / range) * (h - 2) - 1; return [x, y]; }); const d = pts.map(([x, y], i) => (i === 0 ? `M${x},${y}` : `L${x},${y}`)).join(' '); const last = pts[pts.length - 1]; return ( {fill && ( )} ); }; // Deterministic 24-pt sparkline from country code + change const makeSpark = (code, change24h) => { const seed = code.charCodeAt(0) + code.charCodeAt(1) * 7 + code.charCodeAt(2) * 13; let s = seed; const next = () => { s = (s * 9301 + 49297) % 233280; return s / 233280; }; const pts = []; let v = 50; for (let i = 0; i < 24; i++) { v += (next() - 0.5) * 12; pts.push(v); } // Force last point in direction of change const trend = change24h / 8; return pts.map((p, i) => p + (i / 24) * trend * 12); }; Object.assign(window, { Icon, StatusBar, NavBar, NavPill, SyncPill, TabBar, NotifToast, MobileSparkline, makeSpark, MOBILE_TABS, });