Start repository

src/components/Leaderboard.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { GameState } from '../types';
+
+interface LeaderboardProps {
+  gameState: GameState;
+  currentUserId: string;
+}
+
+export function Leaderboard({ gameState, currentUserId }: LeaderboardProps) {
+  const sortedUsers = Object.entries(gameState.users)
+    .sort(([, a], [, b]) => b.clicks - a.clicks)
+    .slice(0, 10);
+
+  return (
+    <div className="bg-gradient-to-b from-orange-600 to-red-600 p-6 rounded-xl border-4 border-pink-400 shadow-2xl">
+      <h2 className="text-3xl font-bold text-yellow-300 mb-6 text-center" style={{ fontFamily: 'Comic Sans MS, cursive' }}>
+        👑 BOZO LEADERBOARD 👑
+      </h2>
+      
+      <div className="space-y-3">
+        {sortedUsers.map(([userId, user], index) => {
+          const isCurrentUser = userId === currentUserId;
+          const isTopThree = index < 3;
+          
+          return (
+            <div 
+              key={userId}
+              className={`p-3 rounded-lg border-2 transition-all duration-300 ${
+                isCurrentUser 
+                  ? 'bg-gradient-to-r from-yellow-400 to-orange-400 border-white shadow-lg transform scale-105' 
+                  : isTopThree
+                  ? 'bg-gradient-to-r from-purple-500 to-pink-500 border-yellow-300'
+                  : 'bg-gradient-to-r from-gray-600 to-gray-700 border-gray-400'
+              }`}
+            >
+              <div className="flex justify-between items-center">
+                <div className="flex items-center space-x-3">
+                  <span className="text-2xl font-bold">
+                    {index === 0 ? '🥇' : index === 1 ? '🥈' : index === 2 ? '🥉' : `#${index + 1}`}
+                  </span>
+                  <span className={`font-bold ${isCurrentUser ? 'text-black' : 'text-white'}`}>
+                    {user.name} {isCurrentUser ? '(You)' : ''}
+                  </span>
+                </div>
+                <span className={`text-xl font-bold ${isCurrentUser ? 'text-black' : 'text-yellow-300'}`}>
+                  {user.clicks.toLocaleString()}
+                </span>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+      
+      <div className="mt-6 text-center">
+        <div className="text-lg text-yellow-200">
+          Total Players: {Object.keys(gameState.users).length}
+        </div>
+      </div>
+    </div>
+  );
+}