From c67f97845a8bb6df5a4e37101239074c2678fbfd Mon Sep 17 00:00:00 2001
From: Resistencia Dev <dev@resistencia.local>
Date: Fri, 12 Dec 2025 19:14:14 +0100
Subject: [PATCH] feat(ui): Enhance responsive design and game flow
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Intro: Change title to 'Sombras en París'
- Roll Call: Make screen fully responsive with fixed header
- Team Building: Clean up leader UI and make player tokens responsive
- Mission History: Fix expand/collapse interaction (z-index issue)
---
 ...-12-08.txt => CAMBIOS_SESION_2025-12-08.md |  0
 client/src/components/GameBoard.tsx           | 76 +++++++++++--------
 2 files changed, 43 insertions(+), 33 deletions(-)
 rename CAMBIOS_SESION_2025-12-08.txt => CAMBIOS_SESION_2025-12-08.md (100%)

diff --git a/CAMBIOS_SESION_2025-12-08.txt b/CAMBIOS_SESION_2025-12-08.md
similarity index 100%
rename from CAMBIOS_SESION_2025-12-08.txt
rename to CAMBIOS_SESION_2025-12-08.md
diff --git a/client/src/components/GameBoard.tsx b/client/src/components/GameBoard.tsx
index 517cf96..b82b2ba 100644
--- a/client/src/components/GameBoard.tsx
+++ b/client/src/components/GameBoard.tsx
@@ -120,7 +120,7 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
                 </div>
 
                 <h1 className="z-10 text-5xl font-bold uppercase tracking-[0.3em] mb-8 text-yellow-500 drop-shadow-lg text-center">
-                    Guerra Total
+                    Sombras en París
                 </h1>
 
                 {/* Audio Auto-Play - Solo para el host */}
@@ -237,7 +237,7 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
     // FASE ROLL CALL
     if (gameState.phase === 'roll_call' as any) {
         return (
-            <div className="relative w-full h-screen flex flex-col items-center justify-center bg-black overflow-hidden text-white font-mono">
+            <div className="relative w-full h-screen flex flex-col bg-black overflow-hidden text-white font-mono">
 
 
                 <div className="absolute inset-0 z-0">
@@ -245,11 +245,15 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
                     <div className="absolute inset-0 bg-black/70" />
                 </div>
 
-                <div className="z-10 w-full max-w-5xl px-4">
-                    <h2 className="text-3xl text-center mb-12 uppercase tracking-[0.2em] text-gray-300 border-b border-gray-600 pb-4">
+                {/* --- 1. SECCIÓN SUPERIOR: TÍTULO (20-25% altura) --- */}
+                <div className="relative z-10 w-full h-[20vh] flex items-center justify-center px-4 border-b border-gray-600/50 bg-black/20 backdrop-blur-sm">
+                    <h2 className="text-2xl md:text-3xl lg:text-4xl text-center uppercase tracking-[0.2em] text-gray-300 drop-shadow-lg">
                         Pasando Lista...
                     </h2>
+                </div>
 
+                {/* --- 2. SECCIÓN INFERIOR: JUGADORES (Resto de altura) --- */}
+                <div className="relative z-10 w-full flex-1 overflow-y-auto p-4 flex flex-col items-center">
                     {isHost && (
                         <audio
                             src="/assets/audio/Rondas.ogg"
@@ -258,7 +262,7 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
                         />
                     )}
 
-                    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
+                    <div className="w-full max-w-6xl grid grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3 md:gap-8 justify-items-center content-center py-4">
                         {gameState.players.map((p, i) => {
                             return (
                                 <motion.div
@@ -266,9 +270,10 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
                                     initial={{ opacity: 0, scale: 0.8 }}
                                     animate={{ opacity: 1, scale: 1 }}
                                     transition={{ delay: i * 0.3 }} // Aparecen uno a uno
-                                    className="flex flex-col items-center gap-3"
+                                    className="flex flex-col items-center gap-1 md:gap-3 w-full"
                                 >
-                                    <div className="w-32 h-32 rounded-full border-4 border-gray-400 overflow-hidden relative shadow-2xl bg-black">
+                                    {/* Avatar Responsive */}
+                                    <div className="w-20 h-20 md:w-32 md:h-32 rounded-full border-2 md:border-4 border-gray-400 overflow-hidden relative shadow-2xl bg-black">
                                         <Image
                                             src={`/assets/images/characters/${p.avatar}`}
                                             alt="Avatar"
@@ -276,7 +281,8 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
                                             className="object-cover grayscale contrast-125"
                                         />
                                     </div>
-                                    <div className="bg-black/80 px-4 py-1 rounded border border-white/20 text-xl font-bold text-yellow-500 uppercase">
+                                    {/* Nombre Responsive */}
+                                    <div className="bg-black/80 px-2 py-0.5 md:px-4 md:py-1 rounded border border-white/20 text-xs md:text-xl font-bold text-yellow-500 uppercase text-center w-full truncate max-w-[120px] md:max-w-none">
                                         {p.name}
                                     </div>
                                 </motion.div>
@@ -502,27 +508,31 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
                                 className="flex flex-col items-center gap-6 w-full max-w-4xl"
                             >
                                 {/* Información del líder */}
-                                <div className="bg-yellow-600/90 text-black p-4 rounded-lg shadow-xl border-4 border-yellow-400 w-full text-center">
-                                    <div className="flex items-center justify-center gap-3">
-                                        <Image src="/assets/images/tokens/token_leader.png" alt="Leader" width={40} height={40} />
-                                        <div>
-                                            <div className="text-sm uppercase tracking-wider font-bold">Líder Actual</div>
-                                            <div className="text-2xl font-bold">
-                                                {gameState.players.find(p => p.id === gameState.currentLeaderId)?.name || 'Desconocido'}
+                                {/* Información del líder - SOLO para NO líderes */}
+                                {!isLeader && (
+                                    <div className="bg-yellow-600/90 text-black p-2 rounded-lg shadow-xl border-4 border-yellow-400 w-full text-center mb-2">
+                                        <div className="flex items-center justify-center gap-3">
+                                            <div>
+                                                <div className="text-xs uppercase tracking-wider font-bold">Líder Actual</div>
+                                                <div className="text-xl font-bold">
+                                                    {gameState.players.find(p => p.id === gameState.currentLeaderId)?.name || 'Desconocido'}
+                                                </div>
                                             </div>
                                         </div>
-                                        <Image src="/assets/images/tokens/token_leader.png" alt="Leader" width={40} height={40} />
                                     </div>
-                                </div>
+                                )}
 
                                 {/* Mensaje para el líder o para los demás */}
-                                <div className="bg-paper-bg text-black p-6 rounded shadow-2xl rotate-1 w-full text-center">
-                                    <h2 className="text-2xl font-bold font-mono mb-2 uppercase text-resistance-blue">
+                                {/* Mensaje para el líder o para los demás */}
+                                <div className="bg-paper-bg text-black p-4 md:p-6 rounded shadow-2xl w-full text-center">
+                                    <h2 className="text-xl md:text-2xl font-bold font-mono mb-2 uppercase text-resistance-blue">
                                         {isLeader ? '🎯 TU TURNO: ELIGE TU EQUIPO' : '⏳ ESPERANDO AL LÍDER...'}
                                     </h2>
-                                    <p className="mb-4 font-serif italic text-gray-700">
-                                        Se necesitan <span className="font-bold text-red-700 text-xl">{currentQuestSize} agentes</span> para la misión #{gameState.currentRound}.
-                                    </p>
+                                    {isLeader && (
+                                        <p className="mb-4 font-serif italic text-gray-700">
+                                            Se necesitan <span className="font-bold text-red-700 text-xl">{currentQuestSize} agentes</span> para la misión #{gameState.currentRound}.
+                                        </p>
+                                    )}
 
                                     {/* Contador de seleccionados */}
                                     {isLeader && (
@@ -790,9 +800,9 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
                     </AnimatePresence>
                 </div>
 
-                {/* JUGADORES (TIENDA DE CAMPAÑA) */}
-                <div className="z-10 w-full overflow-x-auto pb-4">
-                    <div className="flex justify-center gap-4 min-w-max px-4">
+                {/* JUGADORES (TIENDA DE CAMPAÑA - Adaptable) */}
+                <div className="z-10 w-full py-2 bg-black/40 backdrop-blur-sm border-t border-white/10">
+                    <div className="flex flex-wrap justify-center items-center gap-2 md:gap-6 px-2 w-full">
                         {gameState.players.map((player) => {
                             const isSelected = selectedTeam.includes(player.id);
                             const isMe = player.id === currentPlayerId;
@@ -811,8 +821,8 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
                                 >
                                     {/* Avatar */}
                                     <div className={`
-                  w-16 h-16 rounded-full border-2 overflow-hidden relative shadow-lg bg-black
-                  ${isSelected ? 'border-yellow-400 ring-4 ring-yellow-400/30' : 'border-gray-400'}
+                  w-12 h-12 md:w-20 md:h-20 rounded-full border-2 overflow-hidden relative shadow-lg bg-black
+                  ${isSelected ? 'border-yellow-400 ring-2 md:ring-4 ring-yellow-400/30' : 'border-gray-400'}
                   ${gameState.currentLeaderId === player.id ? 'ring-2 ring-white' : ''}
                 `}>
                                         <Image
@@ -854,7 +864,7 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
 
                 {/* HISTÓRICO DE MISIONES (Esquina superior derecha) */}
                 {gameState.missionHistory.length > 0 && (
-                    <div className="absolute top-4 right-4 bg-black/80 p-3 rounded-lg border border-white/20 backdrop-blur-sm">
+                    <div className="absolute top-4 right-4 bg-black/80 p-3 rounded-lg border border-white/20 backdrop-blur-sm z-50">
                         <div className="text-[10px] text-gray-400 uppercase mb-2 text-center font-bold tracking-wider">Historial</div>
                         <div className="flex gap-2">
                             {gameState.missionHistory.map((mission, idx) => {
@@ -864,14 +874,14 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
                                     <div key={idx} className="relative">
                                         <div
                                             className={`w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold border-2 cursor-pointer transition-all hover:scale-110 ${mission.isSuccess
-                                                    ? 'bg-blue-600 border-blue-400 text-white'
-                                                    : 'bg-red-600 border-red-400 text-white'
-                                                } ${isExpanded ? 'ring-2 ring-yellow-400' : ''}`}
+                                                ? 'bg-blue-600 border-blue-400 text-white'
+                                                : 'bg-red-600 border-red-400 text-white'
+                                                } ${isExpanded ? 'ring-2 ring-yellow-400 relative z-[60]' : ''}`}
                                             title={`Misión ${mission.round}: ${mission.isSuccess ? 'Éxito' : 'Fracaso'} (${mission.successes}✓ ${mission.fails}✗)`}
                                             onClick={(e) => {
                                                 e.stopPropagation();
-                                                console.log('Click en misión', idx, 'Estado actual:', expandedMission);
-                                                setExpandedMission(isExpanded ? null : idx);
+                                                console.log('Click en misión', idx);
+                                                setExpandedMission(prev => prev === idx ? null : idx);
                                             }}
                                         >
                                             {mission.round}