Afegit botó per ocultar/mostrar els jugadors

client/src/components/GameBoard.tsx

@@ -25,6 +25,9 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
     const [missionVote, setMissionVote] = useState<boolean | null>(null);
     const [expandedMission, setExpandedMission] = useState<number | null>(null);
 
+    // Estado para controlar el colapso del panel de jugadores
+    const [isPlayersCollapsed, setIsPlayersCollapsed] = useState(false);
+
 
     // Timer para avanzar automáticamente en REVEAL_ROLE
     useEffect(() => {
@@ -781,8 +784,38 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
                 </div>
 
                 {/* JUGADORES - POSICIONADOS ABSOLUTAMENTE EN EL FONDO */}
-                <div className="fixed bottom-[10px] left-0 right-0 z-50 bg-black/80 border-t border-white/10 backdrop-blur-md py-2">
-                    <div className="w-full px-4 flex flex-wrap items-center justify-center gap-4">
+                <motion.div
+                    className="fixed bottom-0 left-0 right-0 z-50 bg-black/80 border-t border-white/10 backdrop-blur-md"
+                    initial={false}
+                    animate={{
+                        y: isPlayersCollapsed ? '100%' : '0%'
+                    }}
+                    transition={{ type: "spring", stiffness: 300, damping: 30 }}
+                >
+                    {/* Botón de colapso/expansión */}
+                    <div className="absolute -top-10 left-1/2 transform -translate-x-1/2">
+                        <button
+                            onClick={() => setIsPlayersCollapsed(!isPlayersCollapsed)}
+                            className="bg-gradient-to-b from-yellow-600 to-yellow-700 hover:from-yellow-500 hover:to-yellow-600 text-white rounded-t-lg px-6 py-2 shadow-lg border-2 border-yellow-500 border-b-0 transition-all hover:shadow-yellow-500/50 flex items-center gap-2"
+                        >
+                            <motion.svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                className="h-5 w-5"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                stroke="currentColor"
+                                animate={{ rotate: isPlayersCollapsed ? 180 : 0 }}
+                                transition={{ duration: 0.3 }}
+                            >
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M19 9l-7 7-7-7" />
+                            </motion.svg>
+                            <span className="text-sm font-bold uppercase tracking-wider">
+                                {isPlayersCollapsed ? 'Mostrar' : 'Ocultar'} Jugadores
+                            </span>
+                        </button>
+                    </div>
+
+                    <div className="w-full px-4 py-2 flex flex-wrap items-center justify-center gap-4">
                         {gameState.players.map((player) => {
                             const isSelected = selectedTeam.includes(player.id);
                             const isMe = player.id === currentPlayerId;
@@ -842,7 +875,7 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
                             );
                         })}
                     </div>
-                </div>
+                </motion.div>
 
                 {/* HISTÓRICO DE MISIONES (Esquina superior derecha) */}
                 {gameState.missionHistory.length > 0 && (