File size: 3,771 Bytes
80a975e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
document.addEventListener('DOMContentLoaded', () => {
// Sample game data
const trendingGames = [
{ title: "Cyber Nexus", genre: "RPG", players: "2.4M" },
{ title: "Quantum Drift", genre: "Racing", players: "1.8M" },
{ title: "Neon Wasteland", genre: "FPS", players: "1.5M" },
{ title: "Stellar Command", genre: "Strategy", players: "1.3M" },
{ title: "Phantom Protocol", genre: "Stealth", players: "1.1M" },
{ title: "Eclipse Warriors", genre: "Action", players: "950K" },
{ title: "Digital Horizon", genre: "Adventure", players: "870K" },
{ title: "Void Runners", genre: "Platformer", players: "790K" },
{ title: "Synthwave Arena", genre: "Battle Royale", players: "720K" },
{ title: "Arcane Legends", genre: "MMO", players: "680K" }
];
// Color gradient for ranks
const rankColors = [
'from-yellow-400 to-orange-500', // 1st
'from-purple-400 to-pink-500', // 2nd
'from-blue-400 to-cyan-500', // 3rd
'from-green-400 to-teal-500', // 4th
'from-red-400 to-orange-500', // 5th
'from-indigo-400 to-purple-500', // 6th
'from-pink-400 to-red-500', // 7th
'from-teal-400 to-blue-500', // 8th
'from-orange-400 to-yellow-500', // 9th
'from-gray-400 to-gray-500' // 10th
];
// Create leaderboard items
function createLeaderboardItem(game, rank, animationClass) {
const item = document.createElement('div');
item.className = 'game-card';
const rankElement = document.createElement('div');
rankElement.className = `rank-number bg-gradient-to-r ${rankColors[rank-1]} ${animationClass} text-glow`;
rankElement.textContent = rank;
const gameInfo = document.createElement('div');
gameInfo.className = 'flex-1';
const title = document.createElement('h3');
title.className = 'game-title';
title.textContent = game.title;
const info = document.createElement('p');
info.className = 'game-info';
info.textContent = `${game.genre} • ${game.players} players`;
gameInfo.appendChild(title);
gameInfo.appendChild(info);
item.appendChild(rankElement);
item.appendChild(gameInfo);
return item;
}
// Render all leaderboards
function renderLeaderboards() {
const glowPulseBoard = document.getElementById('glow-pulse-board');
const slideInBoard = document.getElementById('slide-in-board');
const countdownBoard = document.getElementById('countdown-board');
const flickerBoard = document.getElementById('flicker-board');
trendingGames.forEach((game, index) => {
const rank = index + 1;
// Glow Pulse
glowPulseBoard.appendChild(
createLeaderboardItem(game, rank, 'glow-pulse')
);
// Slide In
const slideItem = createLeaderboardItem(game, rank, 'slide-in-left');
slideItem.style.animationDelay = `${index * 0.1}s`;
slideInBoard.appendChild(slideItem);
// Countdown Snap
const countItem = createLeaderboardItem(game, rank, 'count-up');
countItem.style.animationDelay = `${index * 0.15}s`;
countdownBoard.appendChild(countItem);
// Flicker Reveal
const flickerItem = createLeaderboardItem(game, rank, 'flicker');
flickerItem.style.animationDelay = `${index * 0.1}s`;
flickerBoard.appendChild(flickerItem);
});
}
renderLeaderboards();
}); |