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
34 lines
1.2 KiB
TypeScript
34 lines
1.2 KiB
TypeScript
import { motion } from 'framer-motion';
|
|
|
|
interface MissionRevealProps {
|
|
votes: boolean[];
|
|
}
|
|
|
|
export default function MissionReveal({ votes }: MissionRevealProps) {
|
|
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">
|
|
<h2 className="text-4xl font-bold text-white mb-8">Resultados de la Misión</h2>
|
|
<div className="flex gap-4 justify-center">
|
|
{votes.map((vote, idx) => (
|
|
<motion.div
|
|
key={idx}
|
|
className={`w-24 h-32 rounded-lg flex items-center justify-center text-4xl ${vote ? 'bg-blue-600' : 'bg-red-600'
|
|
}`}
|
|
initial={{ scale: 0, rotate: -180 }}
|
|
animate={{ scale: 1, rotate: 0 }}
|
|
transition={{ delay: idx * 0.3 }}
|
|
>
|
|
{vote ? '✓' : '✗'}
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
}
|