From 385f87cce0dcfc8ce865af79d5fc01fd548c1a56 Mon Sep 17 00:00:00 2001
From: Resistencia Dev <dev@resistencia.local>
Date: Mon, 15 Dec 2025 09:57:58 +0100
Subject: [PATCH] =?UTF-8?q?Afegit=20bot=C3=B3=20per=20ocultar/mostrar=20l'?=
 =?UTF-8?q?historial=20de=20missions=20amb=20animaci=C3=B3=20de=20lliscame?=
 =?UTF-8?q?nt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/GameBoard.tsx | 119 +++++++++++++++++++---------
 1 file changed, 81 insertions(+), 38 deletions(-)

diff --git a/client/src/components/GameBoard.tsx b/client/src/components/GameBoard.tsx
index bb07475..af787f0 100644
--- a/client/src/components/GameBoard.tsx
+++ b/client/src/components/GameBoard.tsx
@@ -28,6 +28,9 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
     // Estado para controlar el colapso del panel de jugadores
     const [isPlayersCollapsed, setIsPlayersCollapsed] = useState(false);
 
+    // Estado para controlar el colapso del historial de misiones
+    const [isHistoryCollapsed, setIsHistoryCollapsed] = useState(false);
+
 
     // Timer para avanzar automáticamente en REVEAL_ROLE
     useEffect(() => {
@@ -879,47 +882,87 @@ 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 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) => {
-                                const isExpanded = expandedMission === idx;
+                    <motion.div
+                        className="fixed top-4 right-0 z-50"
+                        initial={false}
+                        animate={{
+                            x: isHistoryCollapsed ? '0%' : '0%'
+                        }}
+                        transition={{ type: "spring", stiffness: 300, damping: 30 }}
+                    >
+                        {/* Botón de colapso/expansión */}
+                        <motion.button
+                            onClick={() => setIsHistoryCollapsed(!isHistoryCollapsed)}
+                            className="absolute top-0 bg-gradient-to-l from-yellow-600 to-yellow-700 hover:from-yellow-500 hover:to-yellow-600 text-white rounded-l-lg px-2 py-3 shadow-lg border-2 border-yellow-500 border-r-0 transition-all hover:shadow-yellow-500/50 flex items-center"
+                            initial={false}
+                            animate={{
+                                right: isHistoryCollapsed ? '0px' : '100%'
+                            }}
+                            transition={{ type: "spring", stiffness: 300, damping: 30 }}
+                        >
+                            <motion.svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                className="h-4 w-4"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                stroke="currentColor"
+                                animate={{ rotate: isHistoryCollapsed ? 0 : 180 }}
+                                transition={{ duration: 0.3 }}
+                            >
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M15 19l-7-7 7-7" />
+                            </motion.svg>
+                        </motion.button>
 
-                                return (
-                                    <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 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);
-                                                setExpandedMission(prev => prev === idx ? null : idx);
-                                            }}
-                                        >
-                                            {mission.round}
-                                        </div>
+                        {/* Panel del historial */}
+                        <motion.div
+                            className="bg-black/80 p-3 rounded-lg border border-white/20 backdrop-blur-sm"
+                            initial={false}
+                            animate={{
+                                x: isHistoryCollapsed ? '100%' : '0%'
+                            }}
+                            transition={{ type: "spring", stiffness: 300, damping: 30 }}
+                        >
+                            <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) => {
+                                    const isExpanded = expandedMission === idx;
 
-                                        {/* Lista de participantes */}
-                                        {isExpanded && (
-                                            <div className="absolute top-10 right-0 bg-black/95 p-2 rounded border border-white/30 min-w-max z-[100]">
-                                                {mission.team.map((playerId) => {
-                                                    const player = gameState.players.find(p => p.id === playerId);
-                                                    return (
-                                                        <div key={playerId} className="text-xs text-white whitespace-nowrap">
-                                                            {player?.name || playerId}
-                                                        </div>
-                                                    );
-                                                })}
+                                    return (
+                                        <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 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);
+                                                    setExpandedMission(prev => prev === idx ? null : idx);
+                                                }}
+                                            >
+                                                {mission.round}
                                             </div>
-                                        )}
-                                    </div>
-                                );
-                            })}
-                        </div>
-                    </div>
+
+                                            {/* Lista de participantes */}
+                                            {isExpanded && (
+                                                <div className="absolute top-10 right-0 bg-black/95 p-2 rounded border border-white/30 min-w-max z-[100]">
+                                                    {mission.team.map((playerId) => {
+                                                        const player = gameState.players.find(p => p.id === playerId);
+                                                        return (
+                                                            <div key={playerId} className="text-xs text-white whitespace-nowrap">
+                                                                {player?.name || playerId}
+                                                            </div>
+                                                        );
+                                                    })}
+                                                </div>
+                                            )}
+                                        </div>
+                                    );
+                                })}
+                            </div>
+                        </motion.div>
+                    </motion.div>
                 )}
             </div>
         </div>