marti/FranciaOcupada
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feature: Implementar MissionResult completo

Browse Source 
- 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
This commit is contained in:
Resistencia Dev
2025-12-05 23:51:32 +01:00
parent 1c8f1b08f5
commit 4b4936449a
1 changed files with 61 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
client/src/components/MissionResult.tsx
View File

@@ -1,32 +1,74 @@
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
import { GameState } from '../../../shared/types';
interface MissionResultProps { interface MissionResultProps {
success: boolean; gameState: GameState;
successes: number; onContinue: () => void;
fails: number;
} }
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 ( return (
<motion.div <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 }} initial={{ opacity: 0 }}
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
> >
<div className="text-center"> <motion.h2
<motion.h2 className={`text - 6xl md: text - 7xl font - bold mb - 8 ${ isSuccess ? 'text-blue-500' : 'text-red-500' } `}
className={`text-6xl font-bold mb-8 ${success ? 'text-blue-500' : 'text-red-500'}`} initial={{ scale: 0 }}
initial={{ scale: 0 }} animate={{ scale: 1 }}
animate={{ scale: 1 }} transition={{ type: 'spring', stiffness: 200, delay: 0.2 }}
transition={{ type: 'spring', stiffness: 200 }} >
> {isSuccess ? '¡MISIÓN EXITOSA!' : 'MISIÓN FALLIDA'}
{success ? '¡MISIÓN EXITOSA!' : 'MISIÓN FALLIDA'} </motion.h2>
</motion.h2>
<div className="text-white text-2xl"> <motion.div
<p>Éxitos: {successes}</p> className="text-white text-3xl mb-8 bg-black/50 p-6 rounded-xl"
<p>Sabotajes: {fails}</p> initial={{ y: 50, opacity: 0 }}
</div> animate={{ y: 0, opacity: 1 }}
</div> 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> </motion.div>
); );
} }