{/* Logo + brand */}

WCI26.com

CRYPTO WORLD CUP

{/* Tabs */}

{TABS.map(t => ( ))}

$WCI26 {wciPriceLabel} = 0 ? 'var(--lime)' : 'var(--coral)' }}> {wciChangeLabel}

{/* Stats summary */}

WCI26 MCAP {wciMarketCapLabel}

$WCI26 {wciPriceLabel} = 0 ? 'var(--lime)' : 'var(--coral)' }}> {wciChangeLabel}

GO TO WCI26.COM

BUY $WCI26

); }; const MobileGameNav = ({ tab, setTab }) => ( ); const useMobileViewport = () => { const getMatch = () => ( typeof window !== 'undefined' && typeof window.matchMedia === 'function' && window.matchMedia('(max-width: 760px)').matches ); const [isMobile, setIsMobile] = React.useState(getMatch); React.useEffect(() => { if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return undefined; const media = window.matchMedia('(max-width: 760px)'); const onChange = () => setIsMobile(media.matches); onChange(); if (typeof media.addEventListener === 'function') { media.addEventListener('change', onChange); return () => media.removeEventListener('change', onChange); } media.addListener(onChange); return () => media.removeListener(onChange); }, []); return isMobile; }; // Top performer beam labels (renders rank tags over the globe in DOM, not WebGL) const TopPerformerLabels = ({ countries, unfolded }) => { if (unfolded) return null; const top3 = countries.slice(0, 3); return (

TOP PERFORMERS · 24H

{top3.map((c, i) => { const level = getCountryLevel(c); const milestone = getCountryMilestone(c); return (

#{i + 1} {c.code} = 0 ? 'var(--lime)' : 'var(--coral)', fontWeight: 700 }}> {formatCountryChangeLabel(c)} {formatCountryVolume(c)}

LV {level.level}

{fmtVol(milestone.remaining)} left

); })}

); }; // Mini WCI status overlay on globe view (bottom-right) const GlobeStatusOverlay = ({ countries, buybackPool, globalBuybackPressure }) => { const activity = getLiveActivitySummary(countries); return (

); }; const StatChip = ({ label, value, sub, color }) => (

{label}

{value}

{sub &&

{sub}

}

); const getWalletBuyRows = (address, countries = []) => { const normalized = String(address || '').toLowerCase(); if (!normalized) return []; const events = typeof WCI_LIVE_ADAPTER !== 'undefined' && WCI_LIVE_ADAPTER.getRecentEvents ? WCI_LIVE_ADAPTER.getRecentEvents() : []; return (events || []) .filter((event) => { const candidates = [event.buyer, event.sender, event.from, event.txFrom, event.wallet, event.recipient] .filter(Boolean) .map((value) => String(value).toLowerCase()); return event.isCountryBuy && candidates.includes(normalized); }) .map((event) => { const country = countries.find((candidate) => candidate.code === (event.isoCode || event.code)); const amountUsd = Number(event.amountUsd || event.usdAmount || event.valueUsd || 0) || (typeof wciWethToUsd === 'function' ? wciWethToUsd(event.wethAmount) : 0); const label = event.usdLabel || (typeof wciFormatCompactUsd === 'function' ? wciFormatCompactUsd(amountUsd, '$0') : `$${Math.round(amountUsd || 0).toLocaleString('en-US')}`); return { id: event.id || event.txHash || `${event.isoCode}-${event.blockNumber}`, country, code: event.isoCode || event.code || country?.code || '--', label, amountUsd, blockNumber: Number(event.blockNumber || 0), txHash: event.txHash, }; }) .slice(0, 6); }; const formatSupporterUsd = (value) => ( typeof wciFormatCompactUsd === 'function' ? wciFormatCompactUsd(value, '$0') : `$${Math.round(Number(value || 0)).toLocaleString('en-US')}` ); const buildSupporterProfile = (address, countries = [], rows = []) => { const byCountry = new Map(); rows.forEach((row) => { const key = row.code || '--'; const existing = byCountry.get(key) || { code: key, country: row.country || countries.find((country) => country.code === key), count: 0, amountUsd: 0, }; existing.count += 1; existing.amountUsd += Number(row.amountUsd || 0); byCountry.set(key, existing); }); const countryEntries = [...byCountry.values()].sort((a, b) => ( (b.amountUsd - a.amountUsd) || (b.count - a.count) || String(a.code).localeCompare(String(b.code)) )); const totalBuys = rows.length; const countriesBacked = countryEntries.length; const totalSupportUsd = rows.reduce((sum, row) => sum + Number(row.amountUsd || 0), 0); const score = totalBuys * 100 + countriesBacked * 75 + Math.round(totalSupportUsd / 10); const tier = totalBuys >= 10 ? 'Legend supporter' : totalBuys >= 5 ? 'Captain supporter' : totalBuys >= 1 ? 'Active supporter' : 'Ready supporter'; const badges = totalBuys ? ['First buy'] : ['Ready to back']; if (countriesBacked >= 2) badges.push('Multi-country'); if (totalBuys >= 3) badges.push('Buy streak'); if (totalSupportUsd >= 1000) badges.push('Four-figure push'); const topEntry = countryEntries[0] || null; const nextMission = !totalBuys ? 'Back a country to unlock your first supporter badge.' : countriesBacked < 2 ? 'Back one more country to unlock the multi-country badge.' : 'Push your top country higher on the live race board.'; return { address, totalBuys, countriesBacked, totalSupportUsd, score, tier, badges, topEntry, nextMission, }; }; const WalletReadOnlyModal = ({ open, error, nicknameDraft = '', onNicknameChange, onClose, onConnect }) => { if (!open) return null; return (

); }; const WalletViewPanel = ({ address, countries = [], rows, profile, nickname = '', onNicknameChange, onOpen, compact = false }) => { const [profileOpen, setProfileOpen] = React.useState(!compact); React.useEffect(() => { setProfileOpen(!compact); }, [address, compact]); if (!address) return null; const walletRows = Array.isArray(rows) ? rows : getWalletBuyRows(address, countries); const walletProfile = profile || buildSupporterProfile(address, countries, walletRows); const displayNickname = sanitizeSupporterNickname(nickname); const profileTitle = displayNickname || 'Supporter profile'; return (

READ-ONLY WALLET

{displayNickname || formatShortWallet(address)} {displayNickname && {formatShortWallet(address)}}

SUPPORTER PROFILE

{profileTitle}

{walletProfile.tier}

); }; // Hover hint const HoverHint = ({ hoveredCountry, countries, unfolded }) => { if (!hoveredCountry) return null; const c = countries.find(x => x.code === hoveredCountry); if (!c) return null; const level = getCountryLevel(c); const milestone = getCountryMilestone(c); return (

{c.name}

RANK #{c.rank} · GROUP {c.group}

PRICE

{formatCountryPrice(c)}

24h

= 0 ? 'var(--lime)' : 'var(--coral)' }}> {formatCountryChangeLabel(c)}

24h VOL

{formatCountryVolume(c)}

HOLDERS

{fmtNum(c.holders)}

{level.label} LV {level.level}

{fmtVol(milestone.remaining)} to {fmtVol(milestone.next)}

Click to open buy panel

); }; // Globe view shell — hosts the WebGL globe + side rail + overlays const CountryCommandPanel = ({ country, countries, unfolded, onBackCountry }) => { if (!country) return null; const level = getCountryLevel(country); const milestone = getCountryMilestone(country); const marketCapLabel = formatCountryMarketCap(country); const volumeLabel = formatCountryVolume(country); const nextPlay = country.rank === 1 ? `Hold the market lead with steady volume and fresh buys.` : `Push live buys toward rank #${Math.max(1, country.rank - 1)}.`; return (

COUNTRY COMMAND

{country.name}

GROUP {country.group} · RANK #{country.rank}

= 0 ? 'var(--lime)' : 'var(--coral)', background: country.change24h >= 0 ? 'rgba(159,214,52,0.10)' : 'rgba(232,57,44,0.12)', border: '1px solid ' + (country.change24h >= 0 ? 'rgba(159,214,52,0.34)' : 'rgba(232,57,44,0.34)'), fontSize: 11, fontWeight: 800, }}>{formatCountryChangeLabel(country)}

{[ ['PRICE', formatCountryPrice(country)], ['MARKET CAP', marketCapLabel], ['VOLUME', volumeLabel], ].map(([label, value]) => (

{label}

{value}

))}

LIVE MARKET SNAPSHOT

{country.active === false ? 'INACTIVE' : 'ACTIVE'}

MCap {marketCapLabel} Vol {volumeLabel}

NEXT PLAY

{nextPlay}

{level.label} LV {level.level}

); }; const MiniProgressBar = ({ value, color = 'var(--gold)', height = 5 }) => (

); const MapModeSwitch = ({ mode, setMode, compact = false }) => (
{WCI_GAME_MODES.map((m) => ( ))}
); const FlatMapControl = ({ mode, setMode, focusCountries, selectedCountry, onSelectCountry }) => { const activeMode = WCI_GAME_MODES.find(m => m.k === mode) || WCI_GAME_MODES[0]; return (

TACTICAL MAP · {activeMode.label}

LIVE ROUTES

{focusCountries.slice(0, 6).map((c) => { const active = selectedCountry?.code === c.code; return ( ); })}

); }; const GlobeView = ({ countries, buybackPool, globalBuybackPressure, onPickCountry, onSelectCountry, selectedCountry, globeSize, rotationSpeed, ticker, }) => { const [unfolded, setUnfolded] = React.useState(false); const [hoveredCountry, setHoveredCountry] = React.useState(null); const [mapMode, setMapMode] = React.useState('live'); const containerRef = React.useRef(null); const targetUnfold = unfolded; const focusCodes = React.useMemo( () => getGlobeFocusCodes(mapMode, countries), [mapMode, countries] ); const focusCountries = React.useMemo( () => focusCodes.map(code => countries.find(c => c.code === code)).filter(Boolean), [focusCodes, countries] ); React.useEffect(() => { document.body.classList.toggle('globe-unfolded', targetUnfold); return () => document.body.classList.remove('globe-unfolded'); }, [targetUnfold]); // Top ranked = top 3 (get beams + scale) const topRanked = countries.slice(0, 3); return (
{/* Left rail */} {/* Globe canvas area */}
{ const c = countries.find(x => x.code === code); if (c) onSelectCountry(c); }} rotationSpeed={rotationSpeed} scale={globeSize} focusCodes={focusCodes} selectedCountryCode={selectedCountry?.code} /> {/* HUD corner brackets — only when unfolded */} {targetUnfold && ( <>

{/* HUD coordinate readouts */}

LAT 00°00′ N · LNG 00°00′ E

WCI26 · ALL 48 NATIONS · GRID 1:48

SYS LIVE · {new Date().toISOString().slice(11, 19)}

FLAT PROJECTION · EQUIRECTANGULAR

)} {targetUnfold && ( )} {/* Headline overlay (top-left) — compact card */}

); }; // Mini trophies on globe view const MiniBoot = ({ countries }) => { const champ = countries[0]; const fill = Math.min(100, (champ.volume24h / 2_500_000) * 100); return (

GOLDEN BOOT · TODAY

{champ.name}

{formatCountryVolume(champ)}

); }; const MiniBall = ({ buybackPool }) => (

$WCI26 OPS

Manual

ops controlled

); // ───────────────── Main App ─────────────────────────────── const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "globeSize": 1.0, "rotationSpeed": 0.04, "marketState": "live" }/*EDITMODE-END*/; const PAUL_LINES = [ "Sepolia live data synced.", "Waiting for on-chain fee events.", "Country pools are wired.", ]; const App = () => { const isMobileViewport = useMobileViewport(); const [tweaks, setTweaks] = React.useState(() => { try { const s = localStorage.getItem('wci26-tweaks'); return s ? { ...TWEAK_DEFAULTS, ...JSON.parse(s) } : TWEAK_DEFAULTS; } catch { return TWEAK_DEFAULTS; } }); const [editMode, setEditMode] = React.useState(false); const [tab, setTab] = React.useState('globe'); const [drawerOpen, setDrawerOpen] = React.useState(false); const [drawerCountry, setDrawerCountry] = React.useState(null); const [shareModal, setShareModal] = React.useState(null); const [paulMsg, setPaulMsg] = React.useState(null); const [ballBurst, setBallBurst] = React.useState(0); const [selectedCountryCode, setSelectedCountryCode] = React.useState('BRA'); const [liveVersion, setLiveVersion] = React.useState(0); const [monitoredTeamCodes, setMonitoredTeamCodes] = React.useState(readMonitoredTeamCodes); const [walletModalOpen, setWalletModalOpen] = React.useState(false); const [walletAddress, setWalletAddress] = React.useState(''); const [walletError, setWalletError] = React.useState(''); const [walletNicknames, setWalletNicknames] = React.useState(readWalletNicknames); const [walletNicknameDraft, setWalletNicknameDraft] = React.useState(''); const [walletTeamNotice, setWalletTeamNotice] = React.useState(''); const liveAutoRefresh = React.useMemo(() => { const params = new URLSearchParams(window.location.search); return !['manual', 'off'].includes(String(params.get('live') || '').toLowerCase()); }, []); const [wciMarketVersion, setWciMarketVersion] = React.useState(0); const wciMarket = React.useMemo(() => getWciMarketSnapshot(), [wciMarketVersion]); // Build country roster + recompute on state change const countries = React.useMemo(() => { if (typeof WCI_LIVE_ADAPTER !== 'undefined' && WCI_LIVE_ADAPTER.getCountries) { return WCI_LIVE_ADAPTER.getCountries(tweaks.marketState); } const builder = typeof buildContractCountries === 'function' ? buildContractCountries : buildCountryTokens; return builder(tweaks.marketState); }, [tweaks.marketState, liveVersion]); const globalBuybackPressure = React.useMemo(() => { if (typeof WCI_LIVE_ADAPTER !== 'undefined' && WCI_LIVE_ADAPTER.getGlobalBuybackPressure) { return WCI_LIVE_ADAPTER.getGlobalBuybackPressure(); } if (typeof WCI_CONTRACT_ADAPTER !== 'undefined' && WCI_CONTRACT_ADAPTER.getGlobalBuybackPressure) { return WCI_CONTRACT_ADAPTER.getGlobalBuybackPressure(tweaks.marketState); } return { pendingWETH: countries.reduce((s, c) => s + (c.pendingWETH || 0), 0), thresholdWETH: CONTRACT_CONSTANTS.buybackThresholdWETH, buybackReadyCount: countries.filter(c => c.buybackReady).length, }; }, [countries, tweaks.marketState, liveVersion]); const buybackPool = React.useMemo(() => { if (typeof WCI_LIVE_ADAPTER !== 'undefined' && WCI_LIVE_ADAPTER.getBuybackPoolValue) { return WCI_LIVE_ADAPTER.getBuybackPoolValue(); } return calcBuybackPool(countries); }, [countries, liveVersion]); const totalVolume = React.useMemo(() => countries.reduce((s, c) => s + c.volume24h, 0), [countries]); const selectedCountry = React.useMemo( () => countries.find(c => c.code === selectedCountryCode) || countries[0], [countries, selectedCountryCode] ); const walletRows = React.useMemo( () => (walletAddress ? getWalletBuyRows(walletAddress, countries) : []), [walletAddress, countries, liveVersion] ); const walletProfile = React.useMemo( () => (walletAddress ? buildSupporterProfile(walletAddress, countries, walletRows) : null), [walletAddress, countries, walletRows] ); const walletNickname = React.useMemo( () => getWalletNickname(walletNicknames, walletAddress), [walletNicknames, walletAddress] ); React.useEffect(() => { if (countries.length && !countries.some(c => c.code === selectedCountryCode)) { setSelectedCountryCode(countries[0].code); } }, [countries, selectedCountryCode]); React.useEffect(() => { setMonitoredTeamCodes((codes) => codes.filter((code) => countries.some((country) => country.code === code))); }, [countries]); React.useEffect(() => { try { localStorage.setItem(WCI_TEAM_MONITOR_STORAGE_KEY, JSON.stringify(monitoredTeamCodes)); } catch {} }, [monitoredTeamCodes]); React.useEffect(() => { try { localStorage.setItem(WCI_WALLET_NICKNAME_STORAGE_KEY, JSON.stringify(walletNicknames)); } catch {} }, [walletNicknames]); React.useEffect(() => { if (!walletAddress) return; setWalletNicknameDraft(getWalletNickname(walletNicknames, walletAddress)); }, [walletAddress]); React.useEffect(() => { if (typeof WCI_LIVE_ADAPTER === 'undefined' || !WCI_LIVE_ADAPTER.refresh) return undefined; let cancelled = false; const bump = () => { if (!cancelled) setLiveVersion((version) => version + 1); }; const unsubscribe = WCI_LIVE_ADAPTER.subscribe ? WCI_LIVE_ADAPTER.subscribe(bump) : null; if (!liveAutoRefresh) { return () => { cancelled = true; if (typeof unsubscribe === 'function') unsubscribe(); }; } const refreshFull = () => WCI_LIVE_ADAPTER.refresh().catch(() => bump()); const refreshEvents = () => ( WCI_LIVE_ADAPTER.refreshEvents ? WCI_LIVE_ADAPTER.refreshEvents().catch(() => bump()) : refreshFull() ); const refreshWhenVisible = () => { if (document.visibilityState !== 'hidden') refreshEvents(); }; refreshFull(); const eventId = setInterval(refreshEvents, WCI_LIVE_EVENT_REFRESH_MS); const fullId = setInterval(refreshFull, WCI_LIVE_FULL_REFRESH_MS); window.addEventListener('focus', refreshEvents); document.addEventListener('visibilitychange', refreshWhenVisible); return () => { cancelled = true; clearInterval(eventId); clearInterval(fullId); window.removeEventListener('focus', refreshEvents); document.removeEventListener('visibilitychange', refreshWhenVisible); if (typeof unsubscribe === 'function') unsubscribe(); }; }, [liveAutoRefresh]); React.useEffect(() => { if (typeof WCI_MARKET_DATA === 'undefined' || !WCI_MARKET_DATA.refresh) return undefined; let cancelled = false; const bump = () => { if (!cancelled) setWciMarketVersion((version) => version + 1); }; const unsubscribe = WCI_MARKET_DATA.subscribe ? WCI_MARKET_DATA.subscribe(bump) : null; WCI_MARKET_DATA.refresh().catch(() => bump()); const id = setInterval(() => { WCI_MARKET_DATA.refresh().catch(() => bump()); }, 30000); return () => { cancelled = true; clearInterval(id); if (typeof unsubscribe === 'function') unsubscribe(); }; }, []); // Live ticker const [ticker, setTicker] = React.useState(() => ( typeof WCI_LIVE_ADAPTER !== 'undefined' && WCI_LIVE_ADAPTER.getTickerEvents ? WCI_LIVE_ADAPTER.getTickerEvents() : [] )); React.useEffect(() => { if (typeof WCI_LIVE_ADAPTER !== 'undefined' && WCI_LIVE_ADAPTER.getTickerEvents) { setTicker(WCI_LIVE_ADAPTER.getTickerEvents()); } }, [countries, liveVersion]); // Paul only speaks from explicit local actions; live sync status belongs in the ticker. // Apply tweaks to localStorage React.useEffect(() => { localStorage.setItem('wci26-tweaks', JSON.stringify(tweaks)); }, [tweaks]); // Edit mode protocol React.useEffect(() => { const h = (e) => { if (e.data?.type === '__activate_edit_mode') setEditMode(true); if (e.data?.type === '__deactivate_edit_mode') setEditMode(false); }; window.addEventListener('message', h); window.parent.postMessage({ type: '__edit_mode_available' }, '*'); return () => window.removeEventListener('message', h); }, []); const updateTweak = (k, v) => { setTweaks(t => { const next = { ...t, [k]: v }; window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*'); return next; }); }; // Buy flow const selectCountry = (country) => { if (country?.code) setSelectedCountryCode(country.code); }; const openBuyDrawer = (country) => { selectCountry(country); setDrawerCountry(country); setDrawerOpen(true); }; const toggleTeamMonitor = (country) => { if (!country?.code) return; selectCountry(country); setMonitoredTeamCodes((codes) => ( codes.includes(country.code) ? codes.filter((code) => code !== country.code) : [...codes, country.code] )); }; const updateNicknameForAddress = React.useCallback((address, nickname) => { const key = walletNicknameKey(address); if (!key) return; const clean = sanitizeSupporterNickname(nickname); setWalletNicknames((current) => { const next = { ...current }; if (clean) { next[key] = clean; } else { delete next[key]; } return next; }); }, []); const handleWalletNicknameChange = React.useCallback((value) => { const draft = cleanNicknameInput(value); setWalletNicknameDraft(draft); if (walletAddress) updateNicknameForAddress(walletAddress, draft); }, [walletAddress, updateNicknameForAddress]); const connectWalletReadOnly = async () => { setWalletError(''); const provider = window.ethereum; if (!provider?.request) { setWalletError('No browser wallet was found. Open this page in a wallet-enabled browser to use the read-only view.'); return; } try { const accounts = await provider.request({ method: 'eth_requestAccounts' }); const address = accounts?.[0]; if (!address) { setWalletError('No wallet address was returned.'); return; } const storedNickname = getWalletNickname(walletNicknames, address); const nickname = sanitizeSupporterNickname(walletNicknameDraft) || storedNickname; if (nickname) { updateNicknameForAddress(address, nickname); setWalletNicknameDraft(nickname); } setWalletAddress(address); setWalletModalOpen(false); setTab('team'); setWalletTeamNotice('Supporter profile is now in Teams.'); } catch (error) { setWalletError(error?.message || 'Wallet connection was cancelled.'); } }; const handleBuyConfirm = (country) => { setDrawerOpen(false); if (typeof WCI_TRADE_LINKS !== 'undefined') { WCI_TRADE_LINKS.openUniswapSwap(country); } }; if (isMobileViewport && typeof MobileApp === 'function') { return (

); } return (
{/* Background */}

{/* Live ticker tape */} {/* Top bar w/ tabs */} { if (walletAddress) { setTab('team'); setWalletTeamNotice('Supporter profile is now in Teams.'); return; } setWalletModalOpen(true); }} /> {/* Tab content */} {tab === 'globe' && ( )} {tab === 'battle' && ( )} {tab === 'rewards' && ( )} {tab === 'team' && ( setWalletTeamNotice('')} supporterPanel={walletAddress ? ( setWalletModalOpen(true)} compact /> ) : null} /> )}
{/* Buy drawer */} setDrawerOpen(false)} onConfirm={handleBuyConfirm} /> {/* Share modal */} setShareModal(null)} /> setWalletModalOpen(false)} onConnect={connectWalletReadOnly} /> {/* Ball burst when buys happen */} {/* Paul peek */} {/* Tweaks panel */} {editMode && }
); }; // Full leaderboard view (when tab = leaderboard) — bigger version of the rail const FullLeaderboard = ({ countries, onPick }) => { const maxVol = Math.max(1, ...countries.map(c => c.volume24h || 0)); return (

LIVE BUY PRESSURE BATTLE

The board.

All 48 country tokens ranked by 24h buy volume. Click any row to open the buy panel.

{/* Header */}
{['RANK', 'FLAG', 'COUNTRY', '24H VOLUME', 'PRICE', '24h %', 'HOLDERS', 'MCAP'].map(h => (
{h}
))}
{countries.map((c, i) => { const pct = ((c.volume24h || 0) / maxVol) * 100; return ( ); })}

); }; ReactDOM.createRoot(document.getElementById('root')).render();