Feature: Implementar MissionResult completo

- Muestra resultado de la misión con animaciones
- Obtiene datos de missionHistory
- Muestra éxitos vs sabotajes
- Muestra progreso de misiones (Resistencia vs Espías)
- Botón CONTINUAR para avanzar
- Animaciones escalonadas para mejor UX

client/src/components/MissionResult.tsx

@@ -1,32 +1,74 @@
 import { motion } from 'framer-motion';
+import { GameState } from '../../../shared/types';
 
 interface MissionResultProps {
-    success: boolean;
-    successes: number;
-    fails: number;
+    gameState: GameState;
+    onContinue: () => void;
 }
 
-export default function MissionResult({ success, successes, fails }: MissionResultProps) {
+export default function MissionResult({ gameState, onContinue }: MissionResultProps) {
+    // Obtener la última misión del historial
+    const lastMission = gameState.missionHistory[gameState.missionHistory.length - 1];
+    
+    if (!lastMission) {
+        return (
+            <div className="fixed inset-0 flex items-center justify-center bg-black/90 z-50">
+                <p className="text-white text-2xl">Cargando resultado...</p>
+            </div>
+        );
+    }
+
+    const { successes, fails, isSuccess } = lastMission;
+
     return (
         <motion.div
-            className="fixed inset-0 flex items-center justify-center bg-black/90 z-50"
+            className="fixed inset-0 flex flex-col items-center justify-center bg-black/90 z-50"
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
         >
-            <div className="text-center">
             <motion.h2
-                    className={`text-6xl font-bold mb-8 ${success ? 'text-blue-500' : 'text-red-500'}`}
+                className={`text - 6xl md: text - 7xl font - bold mb - 8 ${ isSuccess ? 'text-blue-500' : 'text-red-500' } `}
                 initial={{ scale: 0 }}
                 animate={{ scale: 1 }}
-                    transition={{ type: 'spring', stiffness: 200 }}
+                transition={{ type: 'spring', stiffness: 200, delay: 0.2 }}
             >
-                    {success ? '¡MISIÓN EXITOSA!' : 'MISIÓN FALLIDA'}
+                {isSuccess ? '¡MISIÓN EXITOSA!' : 'MISIÓN FALLIDA'}
             </motion.h2>
-                <div className="text-white text-2xl">
-                    <p>Éxitos: {successes}</p>
-                    <p>Sabotajes: {fails}</p>
-                </div>
-            </div>
+            
+            <motion.div 
+                className="text-white text-3xl mb-8 bg-black/50 p-6 rounded-xl"
+                initial={{ y: 50, opacity: 0 }}
+                animate={{ y: 0, opacity: 1 }}
+                transition={{ delay: 0.5 }}
+            >
+                <p className="mb-2">✓ Éxitos: <span className="text-blue-400 font-bold">{successes}</span></p>
+                <p>✗ Sabotajes: <span className="text-red-400 font-bold">{fails}</span></p>
+            </motion.div>
+
+            <motion.div
+                className="text-white text-xl mb-8"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ delay: 1 }}
+            >
+                <p>Misión {gameState.currentRound} de 5</p>
+                <p className="text-gray-400 text-sm mt-2">
+                    Resistencia: {gameState.missionHistory.filter(m => m.isSuccess).length} | 
+                    Espías: {gameState.missionHistory.filter(m => !m.isSuccess).length}
+                </p>
+            </motion.div>
+
+            <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"
+                initial={{ y: 50, opacity: 0 }}
+                animate={{ y: 0, opacity: 1 }}
+                transition={{ delay: 1.5 }}
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+            >
+                CONTINUAR →
+            </motion.button>
         </motion.div>
     );
 }