GameLeaderboard

'use client';
import { useState, useEffect } from 'react';

export default function GameLeaderboard() {
  const initial = [
    { rank: 1, name: 'ShadowViper', score: 48920, change: 0, avatar: '🐍' },
    { rank: 2, name: 'NeonPhoenix', score: 45103, change: 1, avatar: '🔥' },
    { rank: 3, name: 'CryptoKnight', score: 41288, change: -1, avatar: '♟️' },
    { rank: 4, name: 'GalacticAce', score: 38441, change: 2, avatar: '🚀' },
    { rank: 5, name: 'IronSpectre', score: 35090, change: 0, avatar: '👻' },
  ];

  const [players, setPlayers] = useState(initial);

  useEffect(() => {
    const t = setInterval(() => {
      setPlayers(prev => {
        const updated = prev.map(p => ({ ...p, score: p.score + Math.floor(Math.random() * 500) }));
        return updated.sort((a, b) => b.score - a.score).map((p, i) => ({
          ...p, rank: i + 1,
          change: prev.findIndex(o => o.name === p.name) - i,
        }));
      });
    }, 2500);
    return () => clearInterval(t);
  }, []);

  const rankColor = r => r === 1 ? '#FFD700' : r === 2 ? '#C0C0C0' : r === 3 ? '#CD7F32' : 'rgba(245,245,240,0.3)';

  return (
    <div style={{ fontFamily: 'system-ui, sans-serif', width: '380px' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '16px' }}>
        <span style={{ fontSize: '20px' }}>🏆</span>
        <h3 style={{ color: '#F5F5F0', margin: 0, fontSize: '15px', fontWeight: 700 }}>Live Leaderboard</h3>
        <span style={{ color: '#ef4444', fontSize: '11px', fontWeight: 600, marginLeft: 'auto' }}>● LIVE</span>
      </div>
      {players.map((p, i) => (
        <div key={p.name} style={{
          display: 'flex', alignItems: 'center', gap: '12px',
          padding: '12px 16px', marginBottom: '6px',
          background: i === 0 ? 'rgba(255,215,0,0.06)' : 'rgba(255,255,255,0.03)',
          border: `1px solid ${i === 0 ? 'rgba(255,215,0,0.2)' : 'rgba(255,255,255,0.06)'}`,
          borderRadius: '12px',
          transition: 'all 0.5s ease',
        }}>
          <span style={{ color: rankColor(p.rank), fontWeight: 900, fontSize: '16px', minWidth: '20px' }}>#{p.rank}</span>
          <span style={{ fontSize: '24px' }}>{p.avatar}</span>
          <span style={{ flex: 1, color: '#F5F5F0', fontSize: '14px', fontWeight: 600 }}>{p.name}</span>
          <span style={{ color: p.change > 0 ? '#4ade80' : p.change < 0 ? '#ef4444' : 'rgba(245,245,240,0.3)', fontSize: '12px', minWidth: '20px', textAlign: 'center' }}>
            {p.change > 0 ? `↑${p.change}` : p.change < 0 ? `↓${Math.abs(p.change)}` : '–'}
          </span>
          <span style={{ color: '#C9A84C', fontWeight: 700, fontSize: '14px' }}>{p.score.toLocaleString()}</span>
        </div>
      ))}
    </div>
  );
}

Component info

About

Animated game leaderboard with rank changes