))}
);
}
// ===================== GAME CARD =====================
function GameCard({ game, onClick, delay=0 }) {
const [hov,setHov]=React.useState(false);
const best = getScores(game.id)[0];
return (
onClick(game)} onMouseEnter={()=>setHov(true)} onMouseLeave={()=>setHov(false)}
style={{
borderRadius:14,background:'var(--surface)',border:`1px solid ${hov?'rgba(255,255,255,0.12)':'var(--border)'}`,
overflow:'hidden',cursor:'pointer',
transform:hov?'translateY(-5px) scale(1.01)':'translateY(0) scale(1)',
transition:'transform 0.22s cubic-bezier(0.34,1.56,0.64,1), border-color 0.2s, box-shadow 0.2s',
boxShadow:hov?`0 16px 48px rgba(0,0,0,0.6), 0 0 0 1px ${game.accent}44`:'0 2px 8px rgba(0,0,0,0.3)',
animation:`fadeUp 0.4s ease ${delay}s both`,
}}>
{game.emoji}
{game.catLabel}
{best&&
🏆 {best.score}
}
{game.title}
{game.desc}
{'★'.repeat(Math.round(game.rating))}
{game.rating}
🎮 {game.plays}
);
}
// ===================== FEATURED BANNER (rota entre los 3 de Augusto) =====================
const AUGUSTO_IDS = ['gta_augusto','minecraft_augusto','wwe_augusto'];
function FeaturedBanner({ onPlay }) {
const games = AUGUSTO_IDS.map(id => GAMES_DATA.find(g => g.id === id)).filter(Boolean);
const [idx, setIdx] = React.useState(0);
const [fading, setFading] = React.useState(false);
React.useEffect(() => {
const t = setInterval(() => {
setFading(true);
setTimeout(() => {
setIdx(i => (i + 1) % games.length);
setFading(false);
}, 280);
}, 5000);
return () => clearInterval(t);
}, [games.length]);
const g = games[idx];
if (!g) return null;
return (
{/* Ambient glows */}
{/* Content */}
⭐ EXCLUSIVO AUGUSTO
{g.catLabel}
{g.title}
{g.desc}
⭐ {g.rating} · 🎮 {g.plays}
{/* Giant emoji with glow */}
{g.emoji}
{/* Rotation dots */}
{games.map((_, i) => (
{ setFading(true); setTimeout(()=>{setIdx(i);setFading(false);},280); }}
style={{
width: i===idx?18:6, height:6, borderRadius:99,
background: i===idx?g.accent:'rgba(255,255,255,0.25)',
cursor:'pointer', transition:'all 0.3s',
}}/>
))}
);
}
// ===================== AUGUSTO SECTION (cards grandes destacadas) =====================
function AugustoSection({ onPlay }) {
const games = AUGUSTO_IDS.map(id => GAMES_DATA.find(g => g.id === id)).filter(Boolean);
return (
⭐
Juegos de Augusto
Exclusivos
);
}
function AugustoCard({ game, onClick, delay=0 }) {
const [hov, setHov] = React.useState(false);
const best = getScores(game.id)[0];
return (
onClick(game)} onMouseEnter={()=>setHov(true)} onMouseLeave={()=>setHov(false)}
style={{
borderRadius:16,
background:`linear-gradient(160deg,${game.bg} 0%,var(--surface) 70%)`,
border:`1px solid ${hov?game.accent:game.accent+'44'}`,
overflow:'hidden',cursor:'pointer',position:'relative',
transform:hov?'translateY(-6px) scale(1.015)':'translateY(0) scale(1)',
transition:'transform 0.25s cubic-bezier(0.34,1.56,0.64,1), border-color 0.2s, box-shadow 0.25s',
boxShadow:hov
? `0 20px 60px rgba(0,0,0,0.7), 0 0 40px ${game.accent}55, 0 0 0 1px ${game.accent}88`
: `0 8px 24px rgba(0,0,0,0.4), 0 0 20px ${game.accent}22`,
animation:`fadeUp 0.4s ease ${delay}s both`,
}}>
{/* Exclusive ribbon */}
EXCLUSIVO
{/* Hero area */}
{game.emoji}
{/* Play button overlay */}
{/* Category pill */}
{game.catLabel}
{/* Best score */}
{best &&
🏆 {best.score.toLocaleString()}
}
{/* Body */}
{game.title}
{game.desc}
{'★'.repeat(Math.round(game.rating))}
{game.rating}
🎮 {game.plays}
);
}
// ===================== LEADERBOARD MODAL =====================
function LeaderboardModal({ onClose }) {
const [tab,setTab]=React.useState(GAMES_DATA[0].id);
const scores=getScores(tab);
const game=GAMES_DATA.find(g=>g.id===tab);
return (
🏆 Mejores Puntuaciones
{/* Game tabs */}
{GAMES_DATA.map(g=>(
))}
{scores.length===0?(
{game.emoji}
Sin partidas todavía
¡Juega para aparecer aquí!
):(
{scores.map((s,i)=>(
{['🥇','🥈','🥉'][i]||`#${i+1}`}
{s.score.toLocaleString()} pts
{s.date}
))}
)}
);
}
// ===================== PROFILE MODAL =====================
function ProfileModal({ onClose }) {
const [profile,setProfile]=React.useState(getProfile);
const [editName,setEditName]=React.useState(false);
const [nameVal,setNameVal]=React.useState(profile.name);
const AVATARS=['🎮','🕹️','👾','🦊','🐉','⚡','🌟','🔥','💎','🎯','🚀','🏆'];
const saveName=()=>{
if(nameVal.trim()){
localStorage.setItem('ag_player_name',nameVal.trim());
setProfile(p=>({...p,name:nameVal.trim()}));
}
setEditName(false);
};
const setAvatar=a=>{
localStorage.setItem('ag_player_avatar',a);
setProfile(p=>({...p,avatar:a}));
};
const allBests=GAMES_DATA.map(g=>({game:g,best:getScores(g.id)[0]})).filter(x=>x.best);
return (
{/* Header */}
👤 Mi Perfil
{/* Avatar + Name */}
{profile.avatar}
{editName?(
setNameVal(e.target.value)}
onKeyDown={e=>e.key==='Enter'&&saveName()}
autoFocus
style={{flex:1,background:'var(--surface2)',border:'1px solid var(--purple)',
borderRadius:8,padding:'7px 12px',color:'var(--text)',fontSize:15,
fontFamily:'var(--font-body)',fontWeight:700,outline:'none'}}/>
):(
{profile.name}
)}
Jugador de AugustoGames
{/* Avatar picker */}
ELIGE TU AVATAR
{AVATARS.map(a=>(
))}
{/* Stats */}
ESTADÍSTICAS
{[
{label:'Partidas jugadas',val:profile.totalGames,color:'var(--cyan)',icon:'🎮'},
{label:'Puntuación total',val:profile.totalScore.toLocaleString(),color:'var(--orange)',icon:'⭐'},
].map(stat=>(
{stat.icon}
{stat.val}
{stat.label}
))}
{/* Best scores */}
{allBests.length>0&&
MEJORES PUNTUACIONES
{allBests.sort((a,b)=>b.best.score-a.best.score).map(({game,best})=>(
{game.emoji}
{game.title}
{best.score.toLocaleString()} pts
))}
}
);
}
// ===================== APP SHELL =====================
function AppShell({ onPlay }) {
const [search,setSearch]=React.useState('');
const [cat,setCat]=React.useState('all');
const [showLeaderboard,setShowLeaderboard]=React.useState(false);
const [showProfile,setShowProfile]=React.useState(false);
const [profile,setProfile]=React.useState(getProfile);
React.useEffect(()=>{
const handler=()=>setProfile(getProfile());
window.addEventListener('ag_profile_update',handler);
return ()=>window.removeEventListener('ag_profile_update',handler);
},[]);
const isHome = cat === 'all' && !search;
const filtered = GAMES_DATA.filter(g => {
if (cat !== 'all' && g.cat !== cat) return false;
if (search && !g.title.toLowerCase().includes(search.toLowerCase()) && !g.catLabel.toLowerCase().includes(search.toLowerCase())) return false;
// On home, Augusto games live in their own dedicated section — don't duplicate them in the main grid
if (isHome && AUGUSTO_IDS.includes(g.id)) return false;
return true;
});
return (
setShowProfile(true)} profile={profile}/>
{isHome && }
{isHome && }
{search?`"${search}"`:cat==='all'?'Más Juegos':CATEGORIES.find(c=>c.id===cat)?.label}
{filtered.length}
{filtered.length===0?(
🔍
No se encontraron juegos
):(
{filtered.map((g,i)=>)}
)}
{showLeaderboard&&setShowLeaderboard(false)}/>}
{showProfile&&{setShowProfile(false);setProfile(getProfile());}}/>}
);
}
Object.assign(window, { AppShell, GAMES_DATA, saveScore, getScores, getProfile });