40565a936b
- Cambiar onClick para usar handleMissionVote - Crear componentes MissionReveal y MissionResult - Importar componentes en GameBoard - Tracking de votos con feedback visual - Usar imágenes vote_approve y vote_reject Resuelve error: MissionReveal is not defined
33 lines
1.1 KiB
TypeScript
33 lines
1.1 KiB
TypeScript
import { motion } from 'framer-motion';
|
|
|
|
interface MissionResultProps {
|
|
success: boolean;
|
|
successes: number;
|
|
fails: number;
|
|
}
|
|
|
|
export default function MissionResult({ success, successes, fails }: MissionResultProps) {
|
|
return (
|
|
<motion.div
|
|
className="fixed inset-0 flex items-center justify-center bg-black/90 z-50"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
>
|
|
<div className="text-center">
|
|
<motion.h2
|
|
className={`text-6xl font-bold mb-8 ${success ? 'text-blue-500' : 'text-red-500'}`}
|
|
initial={{ scale: 0 }}
|
|
animate={{ scale: 1 }}
|
|
transition={{ type: 'spring', stiffness: 200 }}
|
|
>
|
|
{success ? '¡MISIÓN EXITOSA!' : 'MISIÓN FALLIDA'}
|
|
</motion.h2>
|
|
<div className="text-white text-2xl">
|
|
<p>Éxitos: {successes}</p>
|
|
<p>Sabotajes: {fails}</p>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
}
|