Fix stuff

components/DisconnectedScreen.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { WifiOff, RefreshCw, LogOut, Loader2 } from 'lucide-react';
+
+interface DisconnectedScreenProps {
+  playerName: string;
+  gamePin: string;
+  isReconnecting: boolean;
+  onReconnect: () => void;
+  onGoHome: () => void;
+}
+
+export const DisconnectedScreen: React.FC<DisconnectedScreenProps> = ({
+  playerName,
+  gamePin,
+  isReconnecting,
+  onReconnect,
+  onGoHome,
+}) => {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen p-6 text-center">
+      <motion.div
+        initial={{ scale: 0.8, opacity: 0 }}
+        animate={{ scale: 1, opacity: 1 }}
+        className="bg-white/10 backdrop-blur-md p-8 md:p-12 rounded-[2rem] border-4 border-white/20 shadow-xl max-w-md w-full"
+      >
+        <motion.div
+          animate={{ y: [0, -10, 0] }}
+          transition={{ repeat: Infinity, duration: 2, ease: "easeInOut" }}
+          className="bg-orange-500 p-6 rounded-full inline-block mb-6 shadow-lg"
+        >
+          <WifiOff size={48} className="text-white" />
+        </motion.div>
+
+        <h1 className="text-4xl font-black font-display mb-4">Connection Lost</h1>
+        
+        <p className="text-xl opacity-80 mb-2">
+          Hey <span className="font-bold text-yellow-300">{playerName}</span>!
+        </p>
+        <p className="text-lg opacity-70 mb-8">
+          You got disconnected from game <span className="font-mono font-bold">{gamePin}</span>
+        </p>
+
+        <div className="space-y-4">
+          <motion.button
+            whileHover={{ scale: 1.02 }}
+            whileTap={{ scale: 0.98 }}
+            onClick={onReconnect}
+            disabled={isReconnecting}
+            className="w-full bg-white text-theme-primary px-8 py-4 rounded-full text-xl font-black shadow-[0_6px_0_rgba(0,0,0,0.2)] hover:shadow-[0_4px_0_rgba(0,0,0,0.2)] hover:translate-y-[2px] active:shadow-none active:translate-y-[6px] transition-all disabled:opacity-70 disabled:cursor-not-allowed flex items-center justify-center gap-3"
+          >
+            {isReconnecting ? (
+              <>
+                <Loader2 size={24} className="animate-spin" />
+                Reconnecting...
+              </>
+            ) : (
+              <>
+                <RefreshCw size={24} />
+                Reconnect
+              </>
+            )}
+          </motion.button>
+
+          <motion.button
+            whileHover={{ scale: 1.02 }}
+            whileTap={{ scale: 0.98 }}
+            onClick={onGoHome}
+            disabled={isReconnecting}
+            className="w-full bg-white/20 text-white px-8 py-4 rounded-full text-xl font-bold hover:bg-white/30 transition-all disabled:opacity-50 flex items-center justify-center gap-3"
+          >
+            <LogOut size={24} />
+            Abandon Game
+          </motion.button>
+        </div>
+
+        <p className="text-sm opacity-50 mt-8">
+          Your score will be preserved if you reconnect
+        </p>
+      </motion.div>
+    </div>
+  );
+};