From 2f2bc4e4d0c97e24905a8df61a9c14d0d26e0f0b Mon Sep 17 00:00:00 2001
From: Resistencia Dev <dev@resistencia.local>
Date: Fri, 5 Dec 2025 23:26:20 +0100
Subject: [PATCH] =?UTF-8?q?WIP:=20Cambiar=20im=C3=A1genes=20de=20misi?=
 =?UTF-8?q?=C3=B3n=20y=20agregar=20tracking=20de=20votos?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Cambiar mission_success/fail a vote_approve/reject
- Agregar estado missionVote para trackear voto del jugador
- Agregar función handleMissionVote
- Reset de voto cuando cambia la fase
- Falta: actualizar onClick y agregar feedback visual
---
 client/src/components/GameBoard.tsx | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/client/src/components/GameBoard.tsx b/client/src/components/GameBoard.tsx
index a73cd35..3e22064 100644
--- a/client/src/components/GameBoard.tsx
+++ b/client/src/components/GameBoard.tsx
@@ -18,6 +18,9 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
     // Orden aleatorio de cartas de misión (se genera una vez)
     const [cardOrder] = useState(() => Math.random() > 0.5);
 
+    // Track del voto de misión del jugador
+    const [missionVote, setMissionVote] = useState<boolean | null>(null);
+
 
     // Timer para avanzar automáticamente en REVEAL_ROLE
     useEffect(() => {
@@ -29,6 +32,14 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
         }
     }, [gameState.phase, actions]);
 
+    // Reset missionVote cuando cambia la fase
+    useEffect(() => {
+        if (gameState.phase !== GamePhase.MISSION) {
+            setMissionVote(null);
+        }
+    }, [gameState.phase]);
+
+
     const currentPlayer = gameState.players.find(p => p.id === currentPlayerId);
     const isLeader = gameState.currentLeaderId === currentPlayerId; // FIX: Usar currentLeaderId del estado
     const config = GAME_CONFIG[gameState.players.length as keyof typeof GAME_CONFIG];
@@ -45,6 +56,12 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
         }
     };
 
+    const handleMissionVote = (vote: boolean) => {
+        setMissionVote(vote);
+        actions.voteMission(vote);
+    };
+
+
     // Coordenadas porcentuales de los hexágonos de misión en el mapa
     const missionCoords = [
         { left: '12%', top: '55%' }, // Misión 1
@@ -506,7 +523,7 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
                                                             whileHover={{ scale: 1.1, rotate: 3 }}
                                                             whileTap={{ scale: 0.95 }}
                                                         >
-                                                            <Image src="/assets/images/tokens/mission_success.png" alt="Success" width={180} height={180} className="drop-shadow-2xl" />
+                                                            <Image src="/assets/images/tokens/vote_approve.png" alt="Success" width={180} height={180} className="drop-shadow-2xl" />
                                                             <span className="mt-6 text-white font-bold text-2xl tracking-widest uppercase">ÉXITO</span>
                                                         </motion.div>
                                                     </button>
@@ -519,7 +536,7 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
                                                                 whileHover={{ scale: 1.1, rotate: -3 }}
                                                                 whileTap={{ scale: 0.95 }}
                                                             >
-                                                                <Image src="/assets/images/tokens/mission_fail.png" alt="Fail" width={180} height={180} className="drop-shadow-2xl" />
+                                                                <Image src="/assets/images/tokens/vote_reject.png" alt="Fail" width={180} height={180} className="drop-shadow-2xl" />
                                                                 <span className="mt-6 text-white font-bold text-2xl tracking-widest uppercase">SABOTAJE</span>
                                                             </motion.div>
                                                         </button>
@@ -535,7 +552,7 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
                                                                 whileHover={{ scale: 1.1, rotate: -3 }}
                                                                 whileTap={{ scale: 0.95 }}
                                                             >
-                                                                <Image src="/assets/images/tokens/mission_fail.png" alt="Fail" width={180} height={180} className="drop-shadow-2xl" />
+                                                                <Image src="/assets/images/tokens/vote_reject.png" alt="Fail" width={180} height={180} className="drop-shadow-2xl" />
                                                                 <span className="mt-6 text-white font-bold text-2xl tracking-widest uppercase">SABOTAJE</span>
                                                             </motion.div>
                                                         </button>
@@ -548,7 +565,7 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
                                                             whileHover={{ scale: 1.1, rotate: 3 }}
                                                             whileTap={{ scale: 0.95 }}
                                                         >
-                                                            <Image src="/assets/images/tokens/mission_success.png" alt="Success" width={180} height={180} className="drop-shadow-2xl" />
+                                                            <Image src="/assets/images/tokens/vote_approve.png" alt="Success" width={180} height={180} className="drop-shadow-2xl" />
                                                             <span className="mt-6 text-white font-bold text-2xl tracking-widest uppercase">ÉXITO</span>
                                                         </motion.div>
                                                     </button>