// wci26/trophies.jsx — Golden Boot (fills with gold) + Buyback Soccer Ball (fills with $) // ───────── Golden Boot ───────────────────────────────── const GoldenBoot = ({ champion, dailyVolume, dailyTarget = 2_500_000 }) => { const fillPct = Math.min(100, (dailyVolume / dailyTarget) * 100); const [tilt, setTilt] = React.useState({ x: 0, y: 0 }); const ref = React.useRef(null); const handleMove = (e) => { if (!ref.current) return; const r = ref.current.getBoundingClientRect(); const cx = (e.clientX - r.left) / r.width - 0.5; const cy = (e.clientY - r.top) / r.height - 0.5; setTilt({ x: cy * -10, y: cx * 16 }); }; const handleLeave = () => setTilt({ x: 0, y: 0 }); return (
{/* Top label */}
DAILY · GOLDEN BOOT
HIGHEST 24H VOLUME
{/* 3D Boot */}
{/* Side-view soccer boot silhouette, toe pointing right */} {/* Boot outer gradient — leather */} {/* Gold fill gradient */} {/* Ground shadow */} {/* Boot outer shell + gold fill clipped */} {/* Liquid gold fill (animated height) */} {/* Surface wave */} {/* Sparkles in gold liquid */} {Array.from({ length: 12 }).map((_, i) => { const x = 40 + (i * 27) % 240; const y = 186 - (fillPct / 100) * 118 + 5 + (i * 11) % 100; if (y > 180) return null; return ( ); })} {/* Three angled stripes along the side */} {/* Laces band */} {/* Heel cap */} {/* Sole (darker band along bottom) */} {/* Studs */} {[55, 95, 135, 175, 215, 255].map((x, i) => ( ))} {/* Boot outline */} {/* Top highlight along upper edge */} {/* Soccer ball bouncing */}
{/* Champion + progress */}
{champion && }
CURRENT LEADER
{champion ? champion.name : '—'}
24h VOLUME
{fmtVol(dailyVolume)}
FILL PROGRESS {fillPct.toFixed(0)}% · target {fmtVol(dailyTarget)}
); }; // ───────── Buyback Soccer Ball ────────────────────────── const BuybackBall = ({ poolUsd, target = 1_000_000, totalBuybacks = 0, wciMarket }) => { const pct = Math.min(100, (poolUsd / target) * 100); const market = wciMarket || ( typeof WCI_MARKET_DATA !== 'undefined' && WCI_MARKET_DATA.getSnapshot ? WCI_MARKET_DATA.getSnapshot() : (typeof WCI_TOKEN !== 'undefined' ? WCI_TOKEN : {}) ); const wciPriceLabel = typeof wciFormatUsdPrice === 'function' ? wciFormatUsdPrice(market.priceUsd ?? market.price) : (Number(market.priceUsd ?? market.price) > 0 ? `$${Number(market.priceUsd ?? market.price).toFixed(4)}` : '--'); const [tilt, setTilt] = React.useState({ x: 0, y: 0 }); const ref = React.useRef(null); const handleMove = (e) => { if (!ref.current) return; const r = ref.current.getBoundingClientRect(); const cx = (e.clientX - r.left) / r.width - 0.5; const cy = (e.clientY - r.top) / r.height - 0.5; setTilt({ x: cy * -12, y: cx * 20 }); }; const handleLeave = () => setTilt({ x: 0, y: 0 }); return (
$WCI26 OPS
LIVE OPS
{/* Soccer ball */}
{/* Ground shadow */} {/* Outer rim glow (back atmosphere) */} {/* Glass shell back — dark */} {/* Pile of dollar bills inside, clipped to ball */} {/* Stacks of dollar bills as horizontal lines/rects */} {Array.from({ length: 32 }).map((_, i) => { const y = 100 - i * 7; const wobble = ((i * 13) % 18) - 9; const w = 56 + ((i * 7) % 60); const fillThreshold = 100 - (pct / 100) * 200; if (y < fillThreshold) return null; return ( $ ); })} {/* Surface bills (top wobble) */} {pct > 5 && (() => { const surfaceY = 100 - (pct / 100) * 200; return Array.from({ length: 5 }).map((_, i) => ( )); })()} {/* Soccer ball pentagon seams — etched into glass surface */} {/* Central pentagon — the iconic one */} {/* 5 hexagons around the central pentagon (offset) */} {[0, 1, 2, 3, 4].map((i) => { const ang = (i * 72 - 90) * Math.PI / 180; const cx = Math.cos(ang) * 56; const cy = Math.sin(ang) * 56; // Pentagon points rotated to face center const rotAng = (i * 72 - 90 + 180) * Math.PI / 180; const pts = []; for (let j = 0; j < 5; j++) { const a = rotAng + (j / 5) * Math.PI * 2; pts.push(`${cx + Math.cos(a) * 22},${cy + Math.sin(a) * 22}`); } return ( ); })} {/* Seam lines connecting outward to the rim */} {[0, 1, 2, 3, 4].map((i) => { const ang = (i * 72 - 90 - 36) * Math.PI / 180; const x1 = Math.cos(ang) * 32; const y1 = Math.sin(ang) * 32; const x2 = Math.cos(ang) * 100; const y2 = Math.sin(ang) * 100; return ( ); })} {/* Glass refraction overlay */} {/* Strong glass highlight (top-left) */} {/* Bottom-right shadow */} {/* Outer rim crisp edge */} {/* Floating $ amount */}
POOL
{fmtVol(poolUsd)}
{/* Stats */}
NEXT OPS
{fmtVol(target)}
OPS LOG
{fmtVol(totalBuybacks)}
$WCI26 PRICE
{wciPriceLabel}
); }; // ───────── Trophies tab content ───────────────────────── const SeasonHub = ({ countries, buybackPool }) => { const match = buildTodayMatch(countries); const trophies = buildSeasonTrophies(countries, buybackPool, match); return (
SEASON HUB
Daily objectives
4 tracks active
{trophies.map((trophy) => (
{trophy.code ? : (
)}
{trophy.label}
{trophy.title}
{trophy.meta}
))}
); }; const TrophiesView = ({ countries, buybackPool }) => { const champion = countries[0]; const totalVolume = countries.reduce((s, c) => s + c.volume24h, 0); // Hall of fame: rank tiers const ranks = countries.slice(0, 8); return (
TROPHIES & MILESTONES
The hardware.
Daily Golden Boot, hourly hot streaks, and live country milestones track the tournament pulse.
{/* Hall of fame podium */}
24h Podium
{ranks.map((c, i) => (
#{i + 1}
{c.code}
{typeof wciFormatCountryVolume === 'function' ? wciFormatCountryVolume(c) : fmtVol(c.volume24h)}
= 0 ? 'var(--lime)' : 'var(--coral)', }}> {c.change24h >= 0 ? '+' : ''}{c.change24h.toFixed(1)}%
))}
); }; window.GoldenBoot = GoldenBoot; window.BuybackBall = BuybackBall; window.TrophiesView = TrophiesView;