Afegit botó per ocultar/mostrar l'historial de missions amb animació de lliscament

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,7 +882,46 @@ 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">
+                    <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>
+
+                        {/* 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) => {
@@ -919,7 +961,8 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
                                     );
                                 })}
                             </div>
-                    </div>
+                        </motion.div>
+                    </motion.div>
                 )}
             </div>
         </div>