From 4e601cdd6fa319c41faa4c927fe405993cbb4058 Mon Sep 17 00:00:00 2001
From: Resistencia Dev <dev@resistencia.local>
Date: Mon, 15 Dec 2025 14:10:08 +0100
Subject: [PATCH] Millores UI: text INTRO, velocitat drag REVEAL_ROLE, colors
 botons, cartes VOTING_TEAM redissenyades

---
 client/src/components/GameBoard.tsx     | 22 +++++++++++++---------
 client/src/components/MissionResult.tsx |  2 +-
 client/src/components/MissionReveal.tsx |  2 +-
 client/src/components/VictoryScreen.tsx |  2 +-
 4 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/client/src/components/GameBoard.tsx b/client/src/components/GameBoard.tsx
index af787f0..86d23c5 100644
--- a/client/src/components/GameBoard.tsx
+++ b/client/src/components/GameBoard.tsx
@@ -121,8 +121,8 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
                     <div className="absolute inset-0 bg-black/40" />
                 </div>
 
-                <h1 className="z-10 text-5xl font-bold uppercase tracking-[0.3em] mb-8 text-yellow-500 drop-shadow-lg text-center">
-                    Traidores en París
+                <h1 className="z-10 text-[2.55rem] font-bold uppercase tracking-[0.3em] mb-8 text-yellow-500 drop-shadow-lg text-center">
+                    Traición en París
                 </h1>
 
                 {/* Audio Auto-Play - Solo para el host */}
@@ -215,7 +215,7 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
                         <motion.div
                             drag="y"
                             dragConstraints={{ top: -300, bottom: 0 }}
-                            dragElastic={0.2}
+                            dragElastic={0.5}
                             dragSnapToOrigin={true}
                             whileHover={{ scale: 1.02 }}
                             whileTap={{ scale: 0.98, cursor: 'grabbing' }}
@@ -580,16 +580,20 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
                                 {!currentPlayer?.hasVoted ? (
                                     <div className="flex gap-8">
                                         <button onClick={() => actions.voteTeam(true)} className="group">
-                                            <div className="w-32 h-48 bg-white rounded-lg shadow-xl flex items-center justify-center border-4 border-transparent group-hover:border-green-500 transition-all transform group-hover:-translate-y-4 relative overflow-hidden">
-                                                <Image src="/assets/images/tokens/vote_approve.png" alt="Approve" fill className="object-contain" />
+                                            <div className="w-32 h-48 bg-white rounded-lg shadow-xl flex flex-col items-center justify-center border-2 border-blue-500 group-hover:border-blue-400 group-hover:shadow-blue-500/50 transition-all transform group-hover:-translate-y-4 relative overflow-hidden p-2">
+                                                <span className="text-blue-600 font-bold text-sm uppercase tracking-wider mb-1 z-10">Éxito</span>
+                                                <div className="relative w-full h-full flex items-center justify-center">
+                                                    <Image src="/assets/images/tokens/vote_approve.png" alt="Approve" fill className="object-contain" />
+                                                </div>
                                             </div>
-                                            <span className="block text-center text-white mt-2 font-bold bg-green-600 px-2 rounded">APROBAR</span>
                                         </button>
                                         <button onClick={() => actions.voteTeam(false)} className="group">
-                                            <div className="w-32 h-48 bg-white rounded-lg shadow-xl flex items-center justify-center border-4 border-transparent group-hover:border-red-500 transition-all transform group-hover:-translate-y-4 relative overflow-hidden">
-                                                <Image src="/assets/images/tokens/vote_reject.png" alt="Reject" fill className="object-contain" />
+                                            <div className="w-32 h-48 bg-white rounded-lg shadow-xl flex flex-col items-center justify-center border-2 border-red-500 group-hover:border-red-400 group-hover:shadow-red-500/50 transition-all transform group-hover:-translate-y-4 relative overflow-hidden p-2">
+                                                <span className="text-red-600 font-bold text-sm uppercase tracking-wider mb-1 z-10">Fracaso</span>
+                                                <div className="relative w-full h-full flex items-center justify-center">
+                                                    <Image src="/assets/images/tokens/vote_reject.png" alt="Reject" fill className="object-contain" />
+                                                </div>
                                             </div>
-                                            <span className="block text-center text-white mt-2 font-bold bg-red-600 px-2 rounded">RECHAZAR</span>
                                         </button>
                                     </div>
                                 ) : (
diff --git a/client/src/components/MissionResult.tsx b/client/src/components/MissionResult.tsx
index 2bd67e1..2249018 100644
--- a/client/src/components/MissionResult.tsx
+++ b/client/src/components/MissionResult.tsx
@@ -62,7 +62,7 @@ export default function MissionResult({ gameState, onContinue, isHost }: Mission
             {isHost ? (
                 <motion.button
                     onClick={onContinue}
-                    className="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-bold py-4 px-8 rounded-lg text-xl shadow-lg transform transition-all hover:scale-105"
+                    className="bg-gradient-to-r from-yellow-600 to-yellow-700 hover:from-yellow-500 hover:to-yellow-600 text-white font-bold py-4 px-8 rounded-lg text-lg shadow-lg transform transition-all hover:scale-105"
                     initial={{ y: 50, opacity: 0 }}
                     animate={{ y: 0, opacity: 1 }}
                     transition={{ delay: 1.5 }}
diff --git a/client/src/components/MissionReveal.tsx b/client/src/components/MissionReveal.tsx
index bd4efcf..3509e17 100644
--- a/client/src/components/MissionReveal.tsx
+++ b/client/src/components/MissionReveal.tsx
@@ -52,7 +52,7 @@ export default function MissionReveal({ votes, onFinished }: MissionRevealProps)
             </div>
 
             <motion.div
-                className="text-white text-xl font-mono mt-8"
+                className="text-white text-xl font-mono mt-8 text-center"
                 initial={{ opacity: 0 }}
                 animate={{ opacity: 1 }}
                 transition={{ delay: votes.length * 0.3 + 0.5 }}
diff --git a/client/src/components/VictoryScreen.tsx b/client/src/components/VictoryScreen.tsx
index f575ffc..bd03a78 100644
--- a/client/src/components/VictoryScreen.tsx
+++ b/client/src/components/VictoryScreen.tsx
@@ -43,7 +43,7 @@ export default function VictoryScreen({ gameState, isHost, onRestart, onFinalize
                 animate={{ scale: 1 }}
                 transition={{ type: 'spring', stiffness: 200, delay: 0.2 }}
             >
-                <h1 className={`text-7xl md:text-8xl font-bold mb-4 drop-shadow-[0_4px_8px_rgba(0,0,0,0.9)] ${isNazisWin ? 'text-red-600' : 'text-blue-500'}`}>
+                <h1 className={`text-[4rem] md:text-[4.5rem] font-bold mb-4 drop-shadow-[0_4px_8px_rgba(0,0,0,0.9)] ${isNazisWin ? 'text-red-600' : 'text-blue-500'}`}>
                     {isNazisWin ? '¡VICTORIA NAZI!' : '¡VICTORIA ALIADA!'}
                 </h1>
                 <p className="text-3xl text-white drop-shadow-[0_4px_8px_rgba(0,0,0,0.9)] font-bold">