82 lines
2.9 KiB
TypeScript
82 lines
2.9 KiB
TypeScript
import React from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import { Play, Users, X } from 'lucide-react';
|
|
|
|
interface HostReconnectedProps {
|
|
quizTitle: string;
|
|
currentQuestionIndex: number;
|
|
totalQuestions: number;
|
|
playerCount: number;
|
|
onResume: () => void;
|
|
onEndGame: () => void;
|
|
}
|
|
|
|
export const HostReconnected: React.FC<HostReconnectedProps> = ({
|
|
quizTitle,
|
|
currentQuestionIndex,
|
|
totalQuestions,
|
|
playerCount,
|
|
onResume,
|
|
onEndGame,
|
|
}) => {
|
|
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-lg w-full"
|
|
>
|
|
<motion.div
|
|
initial={{ rotate: -10 }}
|
|
animate={{ rotate: 0 }}
|
|
className="bg-green-500 p-6 rounded-full inline-block mb-6 shadow-lg"
|
|
>
|
|
<Play size={48} className="text-white ml-1" />
|
|
</motion.div>
|
|
|
|
<h1 className="text-3xl font-black font-display mb-2">Game Restored</h1>
|
|
<p className="text-xl opacity-80 mb-6">{quizTitle}</p>
|
|
|
|
<div className="grid grid-cols-2 gap-4 mb-8">
|
|
<div className="bg-white/10 rounded-2xl p-4">
|
|
<p className="text-sm uppercase tracking-wide opacity-70 mb-1">Question</p>
|
|
<p className="text-3xl font-black">{currentQuestionIndex + 1} / {totalQuestions}</p>
|
|
</div>
|
|
<div className="bg-white/10 rounded-2xl p-4">
|
|
<p className="text-sm uppercase tracking-wide opacity-70 mb-1">Players</p>
|
|
<p className="text-3xl font-black flex items-center justify-center gap-2">
|
|
<Users size={24} />
|
|
{playerCount}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<p className="text-sm opacity-60 mb-6">
|
|
Players will rejoin automatically when they reconnect
|
|
</p>
|
|
|
|
<div className="space-y-3">
|
|
<motion.button
|
|
whileHover={{ scale: 1.02 }}
|
|
whileTap={{ scale: 0.98 }}
|
|
onClick={onResume}
|
|
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 flex items-center justify-center gap-3"
|
|
>
|
|
<Play size={24} />
|
|
Resume Game
|
|
</motion.button>
|
|
|
|
<motion.button
|
|
whileHover={{ scale: 1.02 }}
|
|
whileTap={{ scale: 0.98 }}
|
|
onClick={onEndGame}
|
|
className="w-full bg-white/20 text-white px-8 py-4 rounded-full text-lg font-bold hover:bg-white/30 transition-all flex items-center justify-center gap-2"
|
|
>
|
|
<X size={20} />
|
|
End Game
|
|
</motion.button>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
};
|