// wci26/leaderboard-views.jsx — three view modes: Board, Battle, Race Track // ───────── Medal SVG (used in board view) ───────── const Medal = ({ rank, size = 22 }) => { if (rank > 3) return #{rank}; const cols = rank === 1 ? ['#FFE85B', '#F5D020', '#A88900'] : rank === 2 ? ['#E8E8F0', '#B8BCC8', '#6E7280'] : ['#F5A464', '#CD7F32', '#7A4A14']; return ( {/* Ribbon */} {/* Circle */} {rank} ); }; // ───────── Momentum / streak icons ───────── const StreakChip = ({ hours }) => ( 🔥 {hours}h ); const RocketChip = ({ intensity }) => { const count = Math.min(3, Math.max(1, intensity)); return ( {'▲'.repeat(count)} ); }; // ───────── Board view (table) — current row layout but with medals + momentum const BoardView = ({ countries, onPick }) => { const maxVol = Math.max(1, ...countries.map(c => c.volume24h || 0)); return (
{/* Header */}
{['', 'FLAG', 'COUNTRY', '24H VOLUME', 'PRICE', '24h %', 'HOLDERS', 'MCAP', 'GROUP'].map(h => (
{h}
))}
{countries.map((c) => { const pct = ((c.volume24h || 0) / maxVol) * 100; const streakHrs = Math.floor((c.momentum * 12 + (c.change24h > 0 ? c.change24h / 4 : 0))); return ( ); })}
); }; // ───────── Battle View — head-to-head pairs ───────── const BattleView = ({ countries, onPick }) => { // Group by adjacent ranks: (1,2) (3,4) (5,6) ... only top 16 → 8 battles const pairs = []; const slice = countries.slice(0, 16); for (let i = 0; i < slice.length; i += 2) { pairs.push([slice[i], slice[i + 1]]); } return (
{pairs.map(([a, b], i) => )}
); }; const BattleCard = ({ a, b, onPick }) => { // Volume gap → percent of a's volume that b lags const total = a.volume24h + b.volume24h; const aPct = total ? (a.volume24h / total) * 100 : 50; const bPct = 100 - aPct; return (
#{a.rank} vs #{b.rank} VOLUME BATTLE
{/* A */} {/* VS center */}
VS
{/* B */}
{/* Tug-of-war bar */}
{/* Center divider */}
{/* Gap stat */}
{aPct.toFixed(1)}% gap · {typeof wciCountryVolumeUsd === 'function' && typeof wciFormatCompactUsd === 'function' ? wciFormatCompactUsd(Math.abs(wciCountryVolumeUsd(a) - wciCountryVolumeUsd(b)), '$0') : fmtVol(Math.abs(a.volume24h - b.volume24h))} {bPct.toFixed(1)}%
); }; // ───────── Race Track View — the wow shot ───────── const RaceTrackView = ({ countries, onPick }) => { // Top 20 in the race — lanes const racers = countries.slice(0, 24); const maxVol = Math.max(1, ...racers.map(c => c.volume24h || 0)); return (
{/* Stadium scanlines bg */}
{/* START / FINISH labels */}
START FINISH ▶
{/* Lanes */}
{racers.map((c, i) => { const progress = ((c.volume24h || 0) / maxVol) * 100; return ( ); })}
{/* Footer */}
Showing top {racers.length} · positions update every tick · click any lane to back that country
PACE {typeof wciFormatAggregateCountryVolume === 'function' ? wciFormatAggregateCountryVolume(racers) : fmtVol(racers.reduce((s, c) => s + c.volume24h, 0))} / 24h
); }; const RaceLane = ({ c, progress, onPick, index }) => { return ( ); }; // ───────── View switcher + main leaderboard component ───────── const LeaderboardPage = ({ countries, onPick }) => { const [view, setView] = React.useState('race'); const [groupFilter, setGroupFilter] = React.useState('all'); const filtered = React.useMemo(() => { if (groupFilter === 'all') return countries; return countries.filter(c => c.group === groupFilter); }, [countries, groupFilter]); const VIEWS = [ { k: 'race', label: 'Race Track', sub: 'live positions', icon: '🏁' }, { k: 'battle', label: 'Battle', sub: 'head-to-head', icon: '⚔' }, { k: 'board', label: 'Board', sub: 'classic table', icon: '≡' }, ]; return (
{/* Header */}
LIVE BUY PRESSURE BATTLE
The race.
All 48 country tokens battling for #1. Click any country to back them with a buy.
{/* View switcher */}
{VIEWS.map(v => ( ))}
{/* Group filter row */}
FILTER GROUP: {'ABCDEFGHIJKL'.split('').map(g => ( ))}
{/* Active view */} {view === 'race' && } {view === 'battle' && } {view === 'board' && }
); }; const groupBtnStyle = (active) => ({ padding: '6px 12px', borderRadius: 8, background: active ? 'rgba(245,208,32,0.15)' : 'rgba(255,255,255,0.04)', border: '1px solid ' + (active ? 'var(--gold)' : 'var(--hair)'), color: active ? 'var(--gold)' : 'var(--t2)', fontSize: 11, fontWeight: 700, cursor: 'pointer', fontFamily: 'Bricolage Grotesque, sans-serif', letterSpacing: '0.04em', textTransform: 'uppercase', minWidth: 32, }); window.LeaderboardPage = LeaderboardPage; window.Medal = Medal;