import React, { useState, useEffect, useRef, useMemo } from 'react'; import { Trophy, Play, ChevronLeft, Globe2, Flag, Map, Medal, Shield, X, Package, Coins, UserPlus, Users, Tv, User, Share2, Search, UserCheck, Sparkles, Flame, Star, Target, Briefcase, FastForward, Pause, PlayCircle } from 'lucide-react'; import { initializeApp } from 'firebase/app'; import { getAuth, signInAnonymously, onAuthStateChanged, signInWithCustomToken } from 'firebase/auth'; import { getFirestore, doc, setDoc, getDoc, collection, onSnapshot, updateDoc, arrayUnion, increment } from 'firebase/firestore'; // --- Firebase Setup --- const firebaseConfig = JSON.parse(__firebase_config); const app = initializeApp(firebaseConfig); const auth = getAuth(app); const db = getFirestore(app); const appId = typeof __app_id !== 'undefined' ? __app_id : 'soccer-legends-2026'; const TEAMS = { 'World Cup': ['Argentina', 'France', 'Brazil', 'England', 'Spain', 'Germany', 'Portugal', 'Mexico'], 'La Liga': ['Real Madrid', 'Barcelona', 'Atletico Madrid', 'Sevilla', 'Real Sociedad', 'Athletic Club', 'Real Betis', 'Valencia'], 'Liga MX': ['Club America', 'Chivas', 'Cruz Azul', 'Pumas UNAM', 'Tigres UANL', 'Monterrey', 'Pachuca', 'Toluca'] }; const ELITE_PLAYERS = ['Lionel Messi', 'Cristiano Ronaldo', 'Kylian Mbappé', 'Erling Haaland', 'Vinícius Júnior', 'Jude Bellingham', 'Kevin De Bruyne', 'Mohamed Salah']; const ALL_PLAYERS_POOL = [...TEAMS['World Cup'], ...TEAMS['La Liga'], ...TEAMS['Liga MX']]; const PACK_TYPES = [ { id: 'common', name: 'Common', cost: 10, color: 'text-slate-400', bg: 'bg-slate-700/40', icon: , odds: 0.01 }, { id: 'rare', name: 'Rare', cost: 30, color: 'text-blue-400', bg: 'bg-blue-900/40', icon: , odds: 0.10 }, { id: 'legendary', name: 'Legendary', cost: 100, color: 'text-yellow-400', bg: 'bg-yellow-900/40', icon: , odds: 0.40 }, { id: 'mythic', name: 'Mythic', cost: 500, color: 'text-purple-400', bg: 'bg-purple-900/40', icon: , odds: 0.80 }, { id: 'limited', name: 'Limited', cost: 1000, color: 'text-red-400', bg: 'bg-red-900/40', icon: , odds: 1.0 } ]; const getShortId = (uid) => { if (!uid) return "0000"; let hash = 0; for (let i = 0; i < uid.length; i++) { hash = uid.charCodeAt(i) + ((hash << 5) - hash); } return Math.abs(hash % 10000).toString().padStart(4, '0'); }; // --- 11v11 Match Engine --- function MatchEngine({ homeTeam, awayTeam, onFinish, squad = [] }) { const [score, setScore] = useState([0, 0]); const [timer, setTimer] = useState(0); const [events, setEvents] = useState([]); const [isGameOver, setIsGameOver] = useState(false); const canvasRef = useRef(null); const gameState = useRef({ ball: { x: 200, y: 150, vx: 0, vy: 0 }, players: [], possession: 'home', lastTouch: null }); // Initialize 22 players useEffect(() => { const players = []; // Home (Blue/User) for(let i=0; i<11; i++) { players.push({ id: `h${i}`, team: 'home', name: squad[i] || `${homeTeam} P${i+1}`, x: 50 + Math.random() * 100, y: 30 + (i * 24), tx: 50, ty: 30 + (i * 24), speed: 1.2 + Math.random() }); } // Away (Red/CPU) for(let i=0; i<11; i++) { players.push({ id: `a${i}`, team: 'away', name: `${awayTeam} P${i+1}`, x: 250 + Math.random() * 100, y: 30 + (i * 24), tx: 350, ty: 30 + (i * 24), speed: 1.2 + Math.random() }); } gameState.current.players = players; }, [homeTeam, awayTeam, squad]); useEffect(() => { if (isGameOver) return; const interval = setInterval(() => { setTimer(t => { if (t >= 90) { setIsGameOver(true); clearInterval(interval); return 90; } return t + 1; }); // Logic: Move players toward ball or goal const state = gameState.current; const { ball, players } = state; players.forEach(p => { const dx = ball.x - p.x; const dy = ball.y - p.y; const dist = Math.sqrt(dx*dx + dy*dy); // Move toward ball if close, otherwise hold position if (dist < 100) { p.x += (dx / dist) * p.speed; p.y += (dy / dist) * p.speed; } else { p.x += (p.tx - p.x) * 0.02; p.y += (p.ty - p.y) * 0.02; } // Check for ball possession if (dist < 8) { state.possession = p.team; state.lastTouch = p; ball.x = p.x + (p.team === 'home' ? 5 : -5); ball.y = p.y; // Simple "Shoot" logic if (p.team === 'home' && p.x > 300) { if (Math.random() > 0.96) { setScore(s => [s[0] + 1, s[1]]); setEvents(e => [`GOAL! ${p.name} scores!`, ...e].slice(0, 3)); ball.x = 200; ball.y = 150; // Reset } } else if (p.team === 'away' && p.x < 100) { if (Math.random() > 0.97) { setScore(s => [s[0], s[1] + 1]); setEvents(e => [`GOAL! ${awayTeam} scores!`, ...e].slice(0, 3)); ball.x = 200; ball.y = 150; } } } }); // Drawing const ctx = canvasRef.current?.getContext('2d'); if (ctx) { ctx.clearRect(0, 0, 400, 300); // Field ctx.strokeStyle = 'rgba(255,255,255,0.2)'; ctx.strokeRect(10, 10, 380, 280); ctx.beginPath(); ctx.moveTo(200, 10); ctx.lineTo(200, 290); ctx.stroke(); // Players players.forEach(p => { ctx.fillStyle = p.team === 'home' ? '#3b82f6' : '#ef4444'; ctx.beginPath(); ctx.arc(p.x, p.y, 4, 0, Math.PI*2); ctx.fill(); }); // Ball ctx.fillStyle = 'white'; ctx.beginPath(); ctx.arc(ball.x, ball.y, 3, 0, Math.PI*2); ctx.fill(); } }, 50); return () => clearInterval(interval); }, [isGameOver, awayTeam]); return (

{/* Scoreboard */}

{homeTeam}

{score[0]}

{timer}'

Live

{awayTeam}

{score[1]}

{/* Pitch Canvas */}

{/* Live Ticker */}

{events.length === 0 ? (

Players are warming up...

) : ( events.map((ev, i) => (

• {ev}

)) )}

); } // --- Main App --- export default function App() { const [user, setUser] = useState(null); const [userData, setUserData] = useState({ gems: 1000, friends: [], squad: [], playerShortId: '0000', careerLevel: 1, tournamentWins: 0 }); const [currentScreen, setCurrentScreen] = useState('main'); const [matchConfig, setMatchConfig] = useState(null); const [lastOpenedPack, setLastOpenedPack] = useState([]); const [friendInput, setFriendInput] = useState(''); const [searchStatus, setSearchStatus] = useState(null); useEffect(() => { const initAuth = async () => { if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) { await signInWithCustomToken(auth, __initial_auth_token); } else { await signInAnonymously(auth); } }; initAuth(); const unsubscribe = onAuthStateChanged(auth, setUser); return () => unsubscribe(); }, []); useEffect(() => { if (!user) return; const userRef = doc(db, 'artifacts', appId, 'users', user.uid, 'profile', 'main'); const unsub = onSnapshot(userRef, (snap) => { if (snap.exists()) { setUserData(prev => ({ ...prev, ...snap.data() })); } else { setDoc(userRef, { gems: 1000, friends: [], squad: [], playerShortId: getShortId(user.uid), uid: user.uid, careerLevel: 1, tournamentWins: 0 }); } }); return () => unsub(); }, [user]); const handleMatchFinish = async (won) => { if (!user) return; const userRef = doc(db, 'artifacts', appId, 'users', user.uid, 'profile', 'main'); const updates = { gems: increment(won ? 50 : 10) }; if (won && matchConfig?.type === 'career') updates.careerLevel = increment(1); if (won && matchConfig?.type === 'tournament') updates.tournamentWins = increment(1); await updateDoc(userRef, updates); setMatchConfig(null); setCurrentScreen('main'); }; const buyPack = (pack) => { if (userData.gems < pack.cost) return; const newPlayers = []; for(let i=0; i<3; i++) { const isElite = Math.random() < pack.odds; newPlayers.push(isElite ? ELITE_PLAYERS[Math.floor(Math.random() * ELITE_PLAYERS.length)] : ALL_PLAYERS_POOL[Math.floor(Math.random() * ALL_PLAYERS_POOL.length)]); } const userRef = doc(db, 'artifacts', appId, 'users', user.uid, 'profile', 'main'); updateDoc(userRef, { gems: userData.gems - pack.cost, squad: arrayUnion(...newPlayers) }); setLastOpenedPack(newPlayers); setCurrentScreen('pack-reveal'); }; const getTitle = () => { switch(currentScreen) { case 'team-selection': return 'Quick Match'; case 'squad': return 'My Club Squad'; case 'pack-reveal': return 'Pack Opened!'; case 'shop': return 'Card Store'; case 'friends': return 'Friends List'; case 'career': return 'Manager Career'; case 'tournament': return 'World Tournament'; default: return 'Soccer Legends 2026'; } }; return (

{matchConfig ? ( ) : (

{userData.gems}

#{userData.playerShortId || '0000'}

{getTitle()}

{currentScreen === 'main' && (

} label="Play Match" onClick={() => setCurrentScreen('team-selection')} highlight />

} label="Career" onClick={() => setCurrentScreen('career')} variant="default" small /> } label="Tournament" onClick={() => setCurrentScreen('tournament')} variant="default" small />

} label="Buy Packs" onClick={() => setCurrentScreen('shop')} variant="gold" /> } label="Club Squad" onClick={() => setCurrentScreen('squad')} variant="green" />

)} {currentScreen === 'shop' && (

{PACK_TYPES.map(pack => ( ))} setCurrentScreen('main')} />

)} {currentScreen === 'career' && (

Level {userData.careerLevel}

Amateur Division

Rank Progress {Math.min(100, (userData.careerLevel % 10) * 10)}%

setCurrentScreen('main')} />

)} {currentScreen === 'tournament' && (

Global Cup

STAGE {userData.tournamentWins + 1}

setCurrentScreen('main')} />

)} {currentScreen === 'team-selection' && (

{ALL_PLAYERS_POOL.slice(0, 16).map(team => ( ))}

setCurrentScreen('main')} />

)} {currentScreen === 'pack-reveal' && (

New Signings!

{lastOpenedPack.map((p, i) => (

{p}

{ELITE_PLAYERS.includes(p) ? '★ Elite Legend' : 'Club Player'}

))}

)} {currentScreen === 'squad' && (

{userData.squad.length === 0 ? (

Your squad is empty.

Head to the Card Store to sign players!

) : (

{userData.squad.map((name, i) => (

{ELITE_PLAYERS.includes(name) ? : } {name}

))}

)}

setCurrentScreen('main')} />

)} {currentScreen === 'friends' && (

Your ID: #{userData.playerShortId}

setFriendInput(e.target.value.replace(/\D/g, '').slice(0, 4))} placeholder="4-DIGITS" className="flex-1 bg-slate-800 border border-slate-700 rounded-xl p-3 text-center font-black outline-none text-emerald-400" />

setCurrentScreen('main')} />

)}

); } function MenuButton({ icon, label, onClick, highlight = false, variant = 'default', small = false }) { const variants = { default: "bg-slate-800/60 hover:bg-slate-700 text-slate-200 border-slate-700/50", gold: "bg-yellow-600/20 hover:bg-yellow-600/30 text-yellow-400 border-yellow-500/30", green: "bg-emerald-600/20 hover:bg-emerald-600/30 text-emerald-400 border-emerald-500/30", }; return ( ); } function BackButton({ onClick }) { return ( ); } function TournamentNode({ team1, team2, active = false }) { return (

{team1}

{team2}

); }

FULL TIME

{getTitle()}

Level {userData.careerLevel}

STAGE {userData.tournamentWins + 1}

What game do you want to create?