From 00434daf9780f0797749a09bb8a9552b5a72b856 Mon Sep 17 00:00:00 2001
From: Resistencia Dev <dev@resistencia.local>
Date: Fri, 5 Dec 2025 23:44:26 +0100
Subject: [PATCH] Feature: Feedback visual simple con opacidad en cartas
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Carta seleccionada: opacity-100 (brillante)
- Carta NO seleccionada: opacity-50 (apagada)
- Aplicado a las 4 cartas (2 éxito + 2 sabotaje)
- Botones deshabilitados después de votar
- Solución mucho más simple y elegante
---
 client/src/components/GameBoard.tsx | 25 +++++++++++++++----------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/client/src/components/GameBoard.tsx b/client/src/components/GameBoard.tsx
index a59cb95..d11f386 100644
--- a/client/src/components/GameBoard.tsx
+++ b/client/src/components/GameBoard.tsx
@@ -519,14 +519,15 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
                                             {cardOrder ? (
                                                 <>
                                                     {/* Carta de Éxito primero */}
-                                                    <button onClick={() => handleMissionVote(true)} className="group" disabled={missionVote !== null}>
+                                                    <button
+                                                        onClick={() => handleMissionVote(true)}
+                                                        className={`group transition-opacity ${missionVote !== null && missionVote !== true ? 'opacity-50' : 'opacity-100'}`}
+                                                        disabled={missionVote !== null}
+                                                    >
                                                         <motion.div
-                                                            className={`w-64 h-96 bg-gradient-to-br from-blue-600 to-blue-900 rounded-2xl shadow-2xl border-4 flex flex-col items-center justify-center p-6 transform transition-all ${missionVote === true
-                                                                    ? 'border-yellow-400 ring-8 ring-yellow-400/50 scale-105'
-                                                                    : 'border-blue-400 hover:scale-110 hover:rotate-3 hover:shadow-blue-500/50'
-                                                                }`}
-                                                            whileHover={missionVote === null ? { scale: 1.1, rotate: 3 } : {}}
-                                                            whileTap={missionVote === null ? { scale: 0.95 } : {}}
+                                                            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 }}
+                                                            whileTap={{ scale: 0.95 }}
                                                         >
                                                             <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>
@@ -535,7 +536,7 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
 
                                                     {/* Carta de Sabotaje segundo (solo para espías) */}
                                                     {currentPlayer?.faction === 'spies' && (
-                                                        <button onClick={() => handleMissionVote(false)} className="group">
+                                                        <button onClick={() => handleMissionVote(false)} className="group transition-opacity" style={{ opacity: missionVote !== null && missionVote !== false ? 0.5 : 1 }} disabled={missionVote !== null}>
                                                             <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 }}
@@ -551,7 +552,7 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
                                                 <>
                                                     {/* Carta de Sabotaje primero (solo para espías) */}
                                                     {currentPlayer?.faction === 'spies' && (
-                                                        <button onClick={() => handleMissionVote(false)} className="group">
+                                                        <button onClick={() => handleMissionVote(false)} className="group transition-opacity" style={{ opacity: missionVote !== null && missionVote !== false ? 0.5 : 1 }} disabled={missionVote !== null}>
                                                             <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 }}
@@ -564,7 +565,11 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
                                                     )}
 
                                                     {/* Carta de Éxito segundo */}
-                                                    <button onClick={() => handleMissionVote(true)} className="group">
+                                                    <button
+                                                        onClick={() => handleMissionVote(true)}
+                                                        className={`group transition-opacity ${missionVote !== null && missionVote !== true ? 'opacity-50' : 'opacity-100'}`}
+                                                        disabled={missionVote !== null}
+                                                    >
                                                         <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 }}