83 lines
3 KiB
TypeScript
83 lines
3 KiB
TypeScript
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 h-screen p-4 md:p-6 text-center overflow-hidden">
|
|
<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>
|
|
);
|
|
};
|