File size: 3,883 Bytes
a7b6b46 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 | import { motion } from 'framer-motion';
import { useGameStore } from '../../store/gameStore';
import { emitLeaveRoom } from '../../socket/socket';
interface GameOverModalProps {
winnerId?: string;
winnerName?: string;
onClose: () => void;
}
export function GameOverModal({ winnerId, winnerName, onClose }: GameOverModalProps) {
const playerId = useGameStore((state) => state.playerId);
const reset = useGameStore((state) => state.reset);
const isWinner = winnerId === playerId;
const handleLeave = () => {
emitLeaveRoom();
reset();
onClose();
};
return (
<motion.div
className="modal-overlay"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
>
<motion.div
className="modal-content text-center"
initial={{ scale: 0.5, opacity: 0, rotateY: 180 }}
animate={{ scale: 1, opacity: 1, rotateY: 0 }}
transition={{ type: 'spring', duration: 0.8 }}
onClick={(e) => e.stopPropagation()}
>
{isWinner ? (
<>
<motion.div
className="text-8xl mb-4"
animate={{
rotate: [0, -10, 10, -10, 10, 0],
scale: [1, 1.2, 1],
}}
transition={{ duration: 0.5, repeat: Infinity, repeatDelay: 1 }}
>
🏆
</motion.div>
<h2 className="text-4xl font-bold text-egyptian-gold mb-4">
YOU WIN!
</h2>
<p className="text-2xl text-papyrus mb-2" dir="rtl">
مبروك! انت الفائز
</p>
<motion.p
className="text-green-400 text-xl"
animate={{ opacity: [0.5, 1, 0.5] }}
transition={{ repeat: Infinity, duration: 1 }}
>
You survived the mummies!
</motion.p>
</>
) : (
<>
<motion.div
className="text-8xl mb-4"
animate={{ opacity: [0.5, 1, 0.5] }}
transition={{ repeat: Infinity, duration: 1.5 }}
>
👑
</motion.div>
<h2 className="text-4xl font-bold text-egyptian-gold mb-4">
GAME OVER
</h2>
<p className="text-papyrus text-xl mb-2">
<span className="text-egyptian-gold font-bold">{winnerName}</span> wins!
</p>
<p className="text-mummy-red text-lg">
Better luck next time!
</p>
</>
)}
<motion.div
className="mt-8"
initial={{ y: 20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 1 }}
>
<button onClick={handleLeave} className="btn btn-primary text-xl px-10">
Back to Menu
</button>
</motion.div>
{/* Confetti effect for winner */}
{isWinner && (
<div className="absolute inset-0 pointer-events-none overflow-hidden">
{Array.from({ length: 50 }).map((_, i) => (
<motion.div
key={i}
className="absolute w-3 h-3 rounded-full"
style={{
backgroundColor: ['#d4a843', '#8b4513', '#f5f5dc', '#1a3a5c'][i % 4],
left: `${Math.random() * 100}%`,
}}
initial={{ y: -20, opacity: 1 }}
animate={{
y: '100vh',
rotate: Math.random() * 360,
opacity: 0,
}}
transition={{
duration: 2 + Math.random() * 2,
delay: Math.random() * 0.5,
repeat: Infinity,
}}
/>
))}
</div>
)}
</motion.div>
</motion.div>
);
}
|