Initial commit

components/Scoreboard.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { Player } from '../types';
+import { motion } from 'framer-motion';
+import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer, Cell, LabelList } from 'recharts';
+import { Loader2 } from 'lucide-react';
+
+interface ScoreboardProps {
+  players: Player[];
+  onNext: () => void;
+  isHost: boolean;
+}
+
+export const Scoreboard: React.FC<ScoreboardProps> = ({ players, onNext, isHost }) => {
+  const sortedPlayers = [...players].sort((a, b) => b.score - a.score).slice(0, 5);
+
+  return (
+    <div className="flex flex-col h-screen p-8">
+      <header className="text-center mb-12">
+        <h1 className="text-5xl font-black text-white font-display drop-shadow-md">Scoreboard</h1>
+      </header>
+
+      <div className="flex-1 bg-white rounded-[3rem] shadow-[0_20px_0_rgba(0,0,0,0.2)] p-12 flex flex-col text-gray-900 max-w-6xl w-full mx-auto relative z-10 border-8 border-white/50">
+        <ResponsiveContainer width="100%" height="100%">
+          <BarChart
+            data={sortedPlayers}
+            layout="vertical"
+            margin={{ top: 20, right: 120, left: 20, bottom: 5 }}
+          >
+            <XAxis type="number" hide />
+            <YAxis 
+              type="category" 
+              dataKey="name" 
+              tick={{ fontSize: 24, fontWeight: 800, fill: '#333', fontFamily: 'Fredoka' }} 
+              width={200}
+              tickLine={false}
+              axisLine={false}
+            />
+            <Bar dataKey="score" radius={[0, 20, 20, 0]} barSize={50} animationDuration={1500}>
+              {sortedPlayers.map((entry, index) => (
+                <Cell 
+                    key={`cell-${index}`} 
+                    fill={entry.id.startsWith('host') ? '#46178f' : '#8884d8'} 
+                    className="filter drop-shadow-md"
+                />
+              ))}
+              <LabelList 
+                dataKey="score" 
+                position="right" 
+                offset={15}
+                style={{ fontSize: '24px', fontWeight: '900', fill: '#46178f', fontFamily: 'Fredoka' }} 
+              />
+            </Bar>
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+
+      <div className="mt-8 flex justify-end max-w-6xl w-full mx-auto">
+        {isHost ? (
+          <button
+            onClick={onNext}
+            className="bg-white text-[#46178f] px-12 py-4 rounded-2xl text-2xl font-black shadow-[0_8px_0_rgba(0,0,0,0.2)] hover:scale-105 active:shadow-none active:translate-y-[8px] transition-all"
+          >
+            Next
+          </button>
+        ) : (
+          <div className="flex items-center gap-3 bg-white/10 px-8 py-4 rounded-2xl backdrop-blur-md border-2 border-white/20">
+             <Loader2 className="animate-spin w-8 h-8" />
+             <span className="text-xl font-bold">Waiting for host...</span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};