From 40565a936bb5f7f08e7624dc9563f8db1bf6abeb Mon Sep 17 00:00:00 2001
From: Resistencia Dev <dev@resistencia.local>
Date: Fri, 5 Dec 2025 23:27:32 +0100
Subject: [PATCH] =?UTF-8?q?Feature:=20Completar=20sistema=20de=20votaci?=
 =?UTF-8?q?=C3=B3n=20de=20misiones?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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
---
 client/src/components/GameBoard.tsx     | 10 +++++---
 client/src/components/MissionResult.tsx | 32 ++++++++++++++++++++++++
 client/src/components/MissionReveal.tsx | 33 +++++++++++++++++++++++++
 3 files changed, 71 insertions(+), 4 deletions(-)
 create mode 100644 client/src/components/MissionResult.tsx
 create mode 100644 client/src/components/MissionReveal.tsx

diff --git a/client/src/components/GameBoard.tsx b/client/src/components/GameBoard.tsx
index 3e22064..b1f15b6 100644
--- a/client/src/components/GameBoard.tsx
+++ b/client/src/components/GameBoard.tsx
@@ -2,6 +2,8 @@ import { useState, useEffect } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import Image from 'next/image';
 import { GameState, GamePhase, Player, GAME_CONFIG } from '../../../shared/types';
+import MissionReveal from './MissionReveal';
+import MissionResult from './MissionResult';
 
 interface GameBoardProps {
     gameState: GameState;
@@ -517,7 +519,7 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
                                             {cardOrder ? (
                                                 <>
                                                     {/* Carta de Éxito primero */}
-                                                    <button onClick={() => actions.voteMission(true)} className="group">
+                                                    <button onClick={() => handleMissionVote(true)} className="group">
                                                         <motion.div
                                                             className="w-64 h-96 bg-gradient-to-br from-blue-600 to-blue-900 rounded-2xl shadow-2xl border-4 border-blue-400 flex flex-col items-center justify-center p-6 transform transition-all hover:scale-110 hover:rotate-3 hover:shadow-blue-500/50"
                                                             whileHover={{ scale: 1.1, rotate: 3 }}
@@ -530,7 +532,7 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
 
                                                     {/* Carta de Sabotaje segundo (solo para espías) */}
                                                     {currentPlayer?.faction === 'spies' && (
-                                                        <button onClick={() => actions.voteMission(false)} className="group">
+                                                        <button onClick={() => handleMissionVote(false)} className="group">
                                                             <motion.div
                                                                 className="w-64 h-96 bg-gradient-to-br from-red-600 to-red-900 rounded-2xl shadow-2xl border-4 border-red-400 flex flex-col items-center justify-center p-6 transform transition-all hover:scale-110 hover:-rotate-3 hover:shadow-red-500/50"
                                                                 whileHover={{ scale: 1.1, rotate: -3 }}
@@ -546,7 +548,7 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
                                                 <>
                                                     {/* Carta de Sabotaje primero (solo para espías) */}
                                                     {currentPlayer?.faction === 'spies' && (
-                                                        <button onClick={() => actions.voteMission(false)} className="group">
+                                                        <button onClick={() => handleMissionVote(false)} className="group">
                                                             <motion.div
                                                                 className="w-64 h-96 bg-gradient-to-br from-red-600 to-red-900 rounded-2xl shadow-2xl border-4 border-red-400 flex flex-col items-center justify-center p-6 transform transition-all hover:scale-110 hover:-rotate-3 hover:shadow-red-500/50"
                                                                 whileHover={{ scale: 1.1, rotate: -3 }}
@@ -559,7 +561,7 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
                                                     )}
 
                                                     {/* Carta de Éxito segundo */}
-                                                    <button onClick={() => actions.voteMission(true)} className="group">
+                                                    <button onClick={() => handleMissionVote(true)} className="group">
                                                         <motion.div
                                                             className="w-64 h-96 bg-gradient-to-br from-blue-600 to-blue-900 rounded-2xl shadow-2xl border-4 border-blue-400 flex flex-col items-center justify-center p-6 transform transition-all hover:scale-110 hover:rotate-3 hover:shadow-blue-500/50"
                                                             whileHover={{ scale: 1.1, rotate: 3 }}
diff --git a/client/src/components/MissionResult.tsx b/client/src/components/MissionResult.tsx
new file mode 100644
index 0000000..d393c9f
--- /dev/null
+++ b/client/src/components/MissionResult.tsx
@@ -0,0 +1,32 @@
+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>
+    );
+}
diff --git a/client/src/components/MissionReveal.tsx b/client/src/components/MissionReveal.tsx
new file mode 100644
index 0000000..2eb026d
--- /dev/null
+++ b/client/src/components/MissionReveal.tsx
@@ -0,0 +1,33 @@
+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>
+    );
+}