Untitled

<!doctype html>
</div>
<div style="margin-left:auto;display:flex;gap:8px;align-items:center">
<div class="muted">Resultados: <span id="count">0</span></div>
</div>
</section>


<section class="grid" id="gamesGrid" aria-live="polite">
<!-- tarjetas se generan por JS -->
</section>
</main>


<script>
// Datos de ejemplo (puedes reemplazarlos por una API real)
const games = [
{id:1,title:'Neon City: Runner',players:1240,genre:'Aventura'},
{id:2,title:'Block Parkour',players:532,genre:'Plataforma'},
{id:3,title:'Spacecraft Simulator',players:780,genre:'Simulación'},
{id:4,title:'Island Tycoon',players:2100,genre:'Estrategia'},
{id:5,title:'Mystery Manor',players:430,genre:'Escape'},
{id:6,title:'Cosmic Arena',players:890,genre:'Competitivo'},
{id:7,title:'Pet World',players:320,genre:'Social'}
];


const grid = document.getElementById('gamesGrid');
const countEl = document.getElementById('count');
const searchInput = document.getElementById('searchInput');
const sortSelect = document.getElementById('sortSelect');


function render(list){
grid.innerHTML = '';
list.forEach(g => {
const card = document.createElement('article');
card.className = 'card';
card.innerHTML = `
<div class="thumb">${escapeHtml(g.title)}</div>
<div style="display:flex;justify-content:space-between;align-items:center">
<div style="font-weight:700">${escapeHtml(g.title)}</div>
<div class="muted">${escapeHtml(g.genre)}</div>
</div>
<div class="meta" style="margin-top:8px">
<div class="muted">${g.players.toLocaleString()} jugando</div>
<div><button class="pill" onclick="playGame(${g.id})">Jugar</button></div>
</div>
`;
grid.appendChild(card);
})
countEl.textContent = list.length;
}


function playGame(id){
const g = games.find(x=>x.id===id);
alert('Iniciando: ' + (g?g.title:'desconocido'));
}


function escapeHtml(s){
return String(s)
.replace(/&/g,'&amp;')
.replace(/</g,'&lt;')
.replace(/>/g,'&gt;')
.replace(/"/g,'&quot;')
.replace(/'/g,'&#039;');
}


function filterAndSort(){
const q = searchInput.value.trim().toLowerCase();
let list = games.filter(g => g.title.toLowerCase().includes(q) || g.genre.toLowerCase().includes(q));
const sort = sortSelect.value;
if(sort==='popular') list = list.sort((a,b)=>b.players-a.players);
if(sort==='new') list = list; // ejemplo: aquí podrías ordenar por fecha
if(sort==='players') list = list.sort((a,b)=>b.players-a.players);
render(list);
}


document.getElementById('refreshBtn').addEventListener('click', ()=>{ filterAndSort(); });
searchInput.addEventListener('input', ()=>{ filterAndSort(); });
sortSelect.addEventListener('change', ()=>{ filterAndSort(); });


document.getElementById('playRandom').addEventListener('click', ()=>{
const r = games[Math.floor(Math.random()*games.length)];
playGame(r.id);
});


// inicializa
render(games);
</script>
</body>
</html>
Editor is loading...