Fix: Auto-avanzar de MISSION_REVEAL a MISSION_RESULT

- Servidor avanza automáticamente después de 5 segundos
- Resuelve problema de quedarse bloqueado en pantalla de votos
- Cliente muestra 'Procesando resultado...'

CHANGELOG.md

@@ -0,0 +1,77 @@
+# Notas de Versión
+
+## v0.1.0-functional-until-mission (2025-12-05)
+
+### ✅ Funcionalidades Implementadas
+
+#### Backend (100% Completo)
+- ✅ Sistema completo de salas y jugadores
+- ✅ Asignación automática de roles (Resistencia/Espías)
+- ✅ Todas las fases del juego implementadas:
+  - LOBBY, INTRO, REVEAL_ROLE, ROLL_CALL
+  - VOTE_LEADER (con sistema de aprobación/rechazo)
+  - TEAM_BUILDING, VOTE_TEAM
+  - MISSION (votación éxito/sabotaje)
+  - **MISSION_REVEAL** (barajado de votos - solo lógica)
+  - **MISSION_RESULT** (resumen de misión - solo lógica)
+  - ASSASSIN_PHASE
+- ✅ Histórico de misiones (MissionRecord)
+- ✅ Reglas correctas implementadas:
+  - Misión 4 con 7+ jugadores requiere 2 fallos
+  - 5 rechazos consecutivos = victoria espías
+  - 3 misiones exitosas/fallidas = victoria
+- ✅ WebSocket con Socket.IO para comunicación en tiempo real
+
+#### Frontend (Funcional hasta MISSION)
+- ✅ Lobby completo con creación/unión de partidas
+- ✅ Intro con música (Intro.ogg)
+- ✅ Revelación de roles con animaciones
+- ✅ Roll call con música (Rondas.ogg) y avatares
+- ✅ Votación de líder con timer de 10 segundos
+- ✅ Selección de equipo por el líder
+- ✅ Votación de equipo con cartas
+- ✅ Votación de misión (éxito/sabotaje)
+- ✅ Componente VotingTimer funcionando
+- ✅ Animaciones con Framer Motion
+- ✅ Diseño responsive con TailwindCSS
+
+### ❌ Pendiente (Solo UI)
+- ❌ Pantalla MISSION_REVEAL (mostrar cartas una a una)
+- ❌ Pantalla MISSION_RESULT (resumen visual)
+- ❌ Histórico de misiones en esquina
+
+### 🐛 Problemas Conocidos
+- El servidor puede consumir mucha CPU (reiniciar si ocurre)
+- El juego se queda en MISSION_REVEAL al completar una misión (falta UI)
+
+### 📦 Tecnologías
+- **Frontend**: Next.js 14, React, TypeScript, Framer Motion, TailwindCSS
+- **Backend**: Node.js, Express, Socket.IO, TypeScript
+- **Base de Datos**: PostgreSQL 15
+- **Containerización**: Docker, Docker Compose
+
+### 🚀 Cómo Usar Este Tag
+```bash
+# Volver a esta versión
+git checkout v0.1.0-functional-until-mission
+
+# Ver diferencias con la versión actual
+git diff v0.1.0-functional-until-mission HEAD
+
+# Listar todos los tags
+git tag -l
+```
+
+### 📝 Commits en Esta Versión
+- `8d423ac` - Estado inicial con errores de sintaxis
+- `44d7418` - GameBoard limpio y funcional
+- `5bb1b17` - VotingTimer agregado correctamente
+- `98768fb` - README con documentación completa
+- `63b9766` - Fix: Eliminados backticks de markdown
+
+### 🎯 Próximos Pasos
+1. Implementar UI para MISSION_REVEAL
+2. Implementar UI para MISSION_RESULT
+3. Agregar histórico visual de misiones
+4. Optimizar rendimiento del servidor
+5. Agregar tests unitarios

client/src/components/GameBoard.tsx

@@ -2,6 +2,8 @@ import { useState, useEffect } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import Image from 'next/image';
 import { GameState, GamePhase, Player, GAME_CONFIG } from '../../../shared/types';
+import MissionReveal from './MissionReveal';
+import MissionResult from './MissionResult';
 
 interface GameBoardProps {
     gameState: GameState;
@@ -15,6 +17,13 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
     // Hooks para FASE REVEAL ROLE
     const [revealCard, setRevealCard] = useState(false);
 
+    // Orden aleatorio de cartas de misión (se genera una vez)
+    const [cardOrder] = useState(() => Math.random() > 0.5);
+
+    // Track del voto de misión del jugador
+    const [missionVote, setMissionVote] = useState<boolean | null>(null);
+
+
     // Timer para avanzar automáticamente en REVEAL_ROLE
     useEffect(() => {
         if (gameState.phase === 'reveal_role' as any) {
@@ -25,8 +34,16 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
         }
     }, [gameState.phase, actions]);
 
+    // Reset missionVote cuando cambia la fase
+    useEffect(() => {
+        if (gameState.phase !== GamePhase.MISSION) {
+            setMissionVote(null);
+        }
+    }, [gameState.phase]);
+
+
     const currentPlayer = gameState.players.find(p => p.id === currentPlayerId);
-    const isLeader = currentPlayer?.isLeader;
+    const isLeader = gameState.currentLeaderId === currentPlayerId; // FIX: Usar currentLeaderId del estado
     const config = GAME_CONFIG[gameState.players.length as keyof typeof GAME_CONFIG];
     const currentQuestSize = config?.quests[gameState.currentRound - 1];
 
@@ -41,6 +58,12 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
         }
     };
 
+    const handleMissionVote = (vote: boolean) => {
+        setMissionVote(vote);
+        actions.voteMission(vote);
+    };
+
+
     // Coordenadas porcentuales de los hexágonos de misión en el mapa
     const missionCoords = [
         { left: '12%', top: '55%' }, // Misión 1
@@ -370,24 +393,56 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
                                 initial={{ opacity: 0, y: 20 }}
                                 animate={{ opacity: 1, y: 0 }}
                                 exit={{ opacity: 0, y: -20 }}
-                                className="bg-paper-bg text-black p-6 rounded shadow-2xl rotate-1 max-w-md w-full text-center"
+                                className="flex flex-col items-center gap-6 w-full max-w-4xl"
                             >
-                                <h2 className="text-2xl font-bold font-mono mb-2 uppercase text-resistance-blue">
+                                {/* Información del líder */}
-                                    {isLeader ? 'TU TURNO: ELIGE EQUIPO' : `ESPERANDO AL LÍDER...`}
+                                <div className="bg-yellow-600/90 text-black p-4 rounded-lg shadow-xl border-4 border-yellow-400 w-full text-center">
-                                </h2>
+                                    <div className="flex items-center justify-center gap-3">
-                                <p className="mb-4 font-serif italic text-gray-700">
+                                        <Image src="/assets/images/tokens/token_leader.png" alt="Leader" width={40} height={40} />
-                                    Se necesitan <span className="font-bold text-red-700">{currentQuestSize} agentes</span> para esta misión.
+                                        <div>
-                                </p>
+                                            <div className="text-sm uppercase tracking-wider font-bold">Líder Actual</div>
+                                            <div className="text-2xl font-bold">
+                                                {gameState.players.find(p => p.id === gameState.currentLeaderId)?.name || 'Desconocido'}
+                                            </div>
+                                        </div>
+                                        <Image src="/assets/images/tokens/token_leader.png" alt="Leader" width={40} height={40} />
+                                    </div>
+                                </div>
 
-                                {isLeader && (
+                                {/* Mensaje para el líder o para los demás */}
-                                    <button
+                                <div className="bg-paper-bg text-black p-6 rounded shadow-2xl rotate-1 w-full text-center">
-                                        onClick={() => actions.proposeTeam(selectedTeam)}
+                                    <h2 className="text-2xl font-bold font-mono mb-2 uppercase text-resistance-blue">
-                                        disabled={selectedTeam.length !== currentQuestSize}
+                                        {isLeader ? '🎯 TU TURNO: ELIGE TU EQUIPO' : '⏳ ESPERANDO AL LÍDER...'}
-                                        className="w-full bg-resistance-blue text-white font-bold py-3 px-4 rounded hover:bg-blue-900 transition-colors disabled:opacity-50 disabled:cursor-not-allowed uppercase tracking-widest"
+                                    </h2>
-                                    >
+                                    <p className="mb-4 font-serif italic text-gray-700">
-                                        Proponer Equipo
+                                        Se necesitan <span className="font-bold text-red-700 text-xl">{currentQuestSize} agentes</span> para la misión #{gameState.currentRound}.
-                                    </button>
+                                    </p>
-                                )}
+
+                                    {/* Contador de seleccionados */}
+                                    {isLeader && (
+                                        <div className="mb-4 text-lg font-bold">
+                                            Seleccionados: <span className={selectedTeam.length === currentQuestSize ? 'text-green-600' : 'text-orange-600'}>
+                                                {selectedTeam.length} / {currentQuestSize}
+                                            </span>
+                                        </div>
+                                    )}
+
+                                    {isLeader && (
+                                        <button
+                                            onClick={() => actions.proposeTeam(selectedTeam)}
+                                            disabled={selectedTeam.length !== currentQuestSize}
+                                            className="w-full bg-resistance-blue text-white font-bold py-3 px-4 rounded hover:bg-blue-900 transition-colors disabled:opacity-50 disabled:cursor-not-allowed uppercase tracking-widest shadow-lg"
+                                        >
+                                            {selectedTeam.length === currentQuestSize ? '✓ CONFIRMAR EQUIPO' : `Selecciona ${currentQuestSize - selectedTeam.length} más`}
+                                        </button>
+                                    )}
+
+                                    {!isLeader && (
+                                        <div className="text-gray-600 animate-pulse">
+                                            El líder está seleccionando el equipo de misión...
+                                        </div>
+                                    )}
+                                </div>
                             </motion.div>
                         )}
 
@@ -431,6 +486,7 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
                                 ) : (
                                     <div className="text-white text-xl font-mono animate-pulse">
                                         VOTO REGISTRADO. ESPERANDO AL RESTO...
+                                        ```
                                     </div>
                                 )}
                             </motion.div>
@@ -438,33 +494,102 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
 
                         {/* FASE: MISIÓN */}
                         {gameState.phase === GamePhase.MISSION && (
-                            <motion.div key="mission" className="text-center">
+                            <motion.div
+                                key="mission"
+                                className="fixed inset-0 flex items-center justify-center bg-black/90 z-50"
+                                initial={{ opacity: 0 }}
+                                animate={{ opacity: 1 }}
+                            >
                                 {gameState.proposedTeam.includes(currentPlayerId) ? (
-                                    <div className="flex flex-col items-center gap-6">
+                                    <div className="flex flex-col items-center gap-8 w-full max-w-6xl px-4">
-                                        <h2 className="text-3xl font-bold text-white mb-4 drop-shadow-lg">¡ESTÁS EN LA MISIÓN!</h2>
+                                        <h2 className="text-4xl md:text-5xl font-bold text-white mb-4 drop-shadow-2xl text-center uppercase tracking-wider animate-pulse">
-                                        <div className="flex gap-8">
+                                            🎯 ¡ESTÁS EN LA MISIÓN!
-                                            <button onClick={() => actions.voteMission(true)} className="group">
+                                        </h2>
-                                                <div className="w-40 h-60 bg-blue-900 rounded-lg shadow-2xl border-2 border-blue-400 flex flex-col items-center justify-center p-4 transform transition-transform hover:scale-105">
+                                        <p className="text-white text-xl mb-4 text-center">
-                                                    <Image src="/assets/images/tokens/mission_success.png" alt="Success" width={120} height={120} />
+                                            Elige el resultado de tu participación
-                                                    <span className="mt-4 text-blue-200 font-bold tracking-widest">ÉXITO</span>
+                                        </p>
-                                                </div>
-                                            </button>
 
-                                            {/* Solo los malos pueden sabotear */}
+                                        {/* DEBUG INFO - TEMPORAL */}
-                                            {currentPlayer?.faction === 'spies' && (
+                                        <div className="text-xs text-gray-400 bg-black/50 p-2 rounded mb-4">
-                                                <button onClick={() => actions.voteMission(false)} className="group">
+                                            Debug: Tu ID: {currentPlayerId} | Equipo: [{gameState.proposedTeam.join(', ')}]
-                                                    <div className="w-40 h-60 bg-red-900 rounded-lg shadow-2xl border-2 border-red-400 flex flex-col items-center justify-center p-4 transform transition-transform hover:scale-105">
+                                            <br />
-                                                        <Image src="/assets/images/tokens/mission_fail.png" alt="Fail" width={120} height={120} />
+                                            Tu facción: {currentPlayer?.faction || 'UNDEFINED'} | Rol: {currentPlayer?.role || 'UNDEFINED'}
-                                                        <span className="mt-4 text-red-200 font-bold tracking-widest">SABOTAJE</span>
+                                        </div>
-                                                    </div>
+
-                                                </button>
+                                        {/* Cartas en orden aleatorio */}
+                                        <div className="flex gap-12 flex-wrap justify-center">
+                                            {cardOrder ? (
+                                                <>
+                                                    {/* Carta de Éxito primero */}
+                                                    <button
+                                                        onClick={() => handleMissionVote(true)}
+                                                        className={`group transition-opacity ${missionVote !== null && missionVote !== true ? 'opacity-50' : 'opacity-100'}`}
+                                                        disabled={missionVote !== null}
+                                                    >
+                                                        <motion.div
+                                                            className="w-64 h-96 bg-gradient-to-br from-blue-600 to-blue-900 rounded-2xl shadow-2xl border-4 border-blue-400 flex flex-col items-center justify-center p-6 transform transition-all hover:scale-110 hover:rotate-3 hover:shadow-blue-500/50"
+                                                            whileHover={{ scale: 1.1, rotate: 3 }}
+                                                            whileTap={{ scale: 0.95 }}
+                                                        >
+                                                            <Image src="/assets/images/tokens/vote_approve.png" alt="Success" width={180} height={180} className="drop-shadow-2xl" />
+                                                            <span className="mt-6 text-white font-bold text-2xl tracking-widest uppercase">ÉXITO</span>
+                                                        </motion.div>
+                                                    </button>
+
+                                                    {/* Carta de Sabotaje segundo (solo para espías) */}
+                                                    {currentPlayer?.faction === 'spies' && (
+                                                        <button onClick={() => handleMissionVote(false)} className="group transition-opacity" style={{ opacity: missionVote !== null && missionVote !== false ? 0.5 : 1 }} disabled={missionVote !== null}>
+                                                            <motion.div
+                                                                className="w-64 h-96 bg-gradient-to-br from-red-600 to-red-900 rounded-2xl shadow-2xl border-4 border-red-400 flex flex-col items-center justify-center p-6 transform transition-all hover:scale-110 hover:-rotate-3 hover:shadow-red-500/50"
+                                                                whileHover={{ scale: 1.1, rotate: -3 }}
+                                                                whileTap={{ scale: 0.95 }}
+                                                            >
+                                                                <Image src="/assets/images/tokens/vote_reject.png" alt="Fail" width={180} height={180} className="drop-shadow-2xl" />
+                                                                <span className="mt-6 text-white font-bold text-2xl tracking-widest uppercase">SABOTAJE</span>
+                                                            </motion.div>
+                                                        </button>
+                                                    )}
+                                                </>
+                                            ) : (
+                                                <>
+                                                    {/* Carta de Sabotaje primero (solo para espías) */}
+                                                    {currentPlayer?.faction === 'spies' && (
+                                                        <button onClick={() => handleMissionVote(false)} className="group transition-opacity" style={{ opacity: missionVote !== null && missionVote !== false ? 0.5 : 1 }} disabled={missionVote !== null}>
+                                                            <motion.div
+                                                                className="w-64 h-96 bg-gradient-to-br from-red-600 to-red-900 rounded-2xl shadow-2xl border-4 border-red-400 flex flex-col items-center justify-center p-6 transform transition-all hover:scale-110 hover:-rotate-3 hover:shadow-red-500/50"
+                                                                whileHover={{ scale: 1.1, rotate: -3 }}
+                                                                whileTap={{ scale: 0.95 }}
+                                                            >
+                                                                <Image src="/assets/images/tokens/vote_reject.png" alt="Fail" width={180} height={180} className="drop-shadow-2xl" />
+                                                                <span className="mt-6 text-white font-bold text-2xl tracking-widest uppercase">SABOTAJE</span>
+                                                            </motion.div>
+                                                        </button>
+                                                    )}
+
+                                                    {/* Carta de Éxito segundo */}
+                                                    <button
+                                                        onClick={() => handleMissionVote(true)}
+                                                        className={`group transition-opacity ${missionVote !== null && missionVote !== true ? 'opacity-50' : 'opacity-100'}`}
+                                                        disabled={missionVote !== null}
+                                                    >
+                                                        <motion.div
+                                                            className="w-64 h-96 bg-gradient-to-br from-blue-600 to-blue-900 rounded-2xl shadow-2xl border-4 border-blue-400 flex flex-col items-center justify-center p-6 transform transition-all hover:scale-110 hover:rotate-3 hover:shadow-blue-500/50"
+                                                            whileHover={{ scale: 1.1, rotate: 3 }}
+                                                            whileTap={{ scale: 0.95 }}
+                                                        >
+                                                            <Image src="/assets/images/tokens/vote_approve.png" alt="Success" width={180} height={180} className="drop-shadow-2xl" />
+                                                            <span className="mt-6 text-white font-bold text-2xl tracking-widest uppercase">ÉXITO</span>
+                                                        </motion.div>
+                                                    </button>
+                                                </>
                                             )}
                                         </div>
                                     </div>
                                 ) : (
-                                    <div className="text-white text-2xl font-mono bg-black/50 p-6 rounded">
+                                    <div className="text-white text-3xl font-mono bg-black/70 p-8 rounded-xl border-2 border-white/20 text-center">
+                                        <div className="animate-pulse mb-4 text-5xl">⏳</div>
                                         La misión está en curso...<br />
-                                        <span className="text-sm text-gray-400">Rezando por el éxito.</span>
+                                        <span className="text-lg text-gray-400 mt-2 block">Esperando a que el equipo complete su votación.</span>
                                     </div>
                                 )}
                             </motion.div>
@@ -474,7 +599,6 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
                         {gameState.phase === 'mission_reveal' as any && (
                             <MissionReveal
                                 votes={gameState.revealedVotes || []}
-                                onComplete={() => isHost && actions.finishMissionReveal()}
                             />
                         )}
 
@@ -512,7 +636,7 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
                                     <div className={`
                   w-16 h-16 rounded-full border-2 overflow-hidden relative shadow-lg bg-black
                   ${isSelected ? 'border-yellow-400 ring-4 ring-yellow-400/30' : 'border-gray-400'}
-                  ${player.isLeader ? 'ring-2 ring-white' : ''}
+                  ${gameState.currentLeaderId === player.id ? 'ring-2 ring-white' : ''}
                 `}>
                                         <Image
                                             src={avatarSrc}
@@ -522,11 +646,23 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
                                         />
 
                                         {/* Icono de Líder */}
-                                        {player.isLeader && (
+                                        {gameState.currentLeaderId === player.id && (
                                             <div className="absolute bottom-0 right-0 bg-yellow-500 rounded-full p-1 w-6 h-6 flex items-center justify-center text-xs text-black font-bold border border-white z-10">
                                                 L
                                             </div>
                                         )}
+
+                                        {/* Icono de Miembro del Equipo de Misión */}
+                                        {gameState.proposedTeam.includes(player.id) && (
+                                            gameState.phase === GamePhase.VOTING_TEAM ||
+                                            gameState.phase === GamePhase.MISSION ||
+                                            gameState.phase === 'mission_reveal' as any ||
+                                            gameState.phase === 'mission_result' as any
+                                        ) && (
+                                                <div className="absolute top-0 left-0 bg-green-500 rounded-full p-1 w-6 h-6 flex items-center justify-center text-xs text-white font-bold border border-white z-10">
+                                                    ⭐
+                                                </div>
+                                            )}
                                     </div>
 
                                     {/* Nombre */}

client/src/components/MissionResult.tsx

@@ -0,0 +1,74 @@
+import { motion } from 'framer-motion';
+import { GameState } from '../../../shared/types';
+
+interface MissionResultProps {
+    gameState: GameState;
+    onContinue: () => void;
+}
+
+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 flex-col items-center justify-center bg-black/90 z-50"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+        >
+            <motion.h2
+                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, delay: 0.2 }}
+            >
+                {isSuccess ? '¡MISIÓN EXITOSA!' : 'MISIÓN FALLIDA'}
+            </motion.h2>
+            
+            <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>
+    );
+}

client/src/components/MissionReveal.tsx

@@ -0,0 +1,44 @@
+import { motion } from 'framer-motion';
+import { useEffect } from 'react';
+
+interface MissionRevealProps {
+    votes: boolean[];
+}
+
+export default function MissionReveal({ votes }: MissionRevealProps) {
+    // Auto-avanzar después de mostrar todas las cartas
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            // El servidor avanzará automáticamente
+            // Este timer es solo para dar tiempo a ver las cartas
+        }, 3000 + votes.length * 300); // 3s base + 300ms por carta
+        
+        return () => clearTimeout(timer);
+    }, [votes.length]);
+
+    return (
+        <motion.div
+            className="fixed inset-0 flex flex-col items-center justify-center bg-black/90 z-50"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+        >
+            <h2 className="text-4xl font-bold text-white mb-8">Resultados de la Misión</h2>
+            <div className="flex gap-4 justify-center mb-8">
+                {votes.map((vote, idx) => (
+                    <motion.div
+                        key={idx}
+                        className={`w - 24 h - 32 rounded - lg flex items - center justify - center text - 5xl font - bold text - white ${
+    vote ? 'bg-blue-600' : 'bg-red-600'
+} `}
+                        initial={{ scale: 0, rotate: -180 }}
+                        animate={{ scale: 1, rotate: 0 }}
+                        transition={{ delay: idx * 0.3 }}
+                    >
+                        {vote ? '✓' : '✗'}
+                    </motion.div>
+                ))}
+            </div>
+            <p className="text-white text-xl">Procesando resultado...</p>
+        </motion.div>
+    );
+}

server/src/models/Game.ts

@@ -154,9 +154,10 @@ export class Game {
         if (playerIds.length !== requiredSize) return false;
 
         this.state.proposedTeam = playerIds;
-        this.state.phase = GamePhase.VOTING_TEAM;
+        this.state.phase = GamePhase.MISSION; // Ir directamente a la misión
-        this.state.teamVotes = {}; // Resetear votos
+        this.state.missionVotes = []; // Resetear votos de misión
-        this.log(`El líder ha propuesto un equipo de ${playerIds.length} personas.`);
+        this.state.failedVotesCount = 0; // Reset contador de rechazos
+        this.log(`El líder ha seleccionado un equipo de ${playerIds.length} personas. ¡Comienza la misión!`);
         return true;
     }
 
@@ -242,8 +243,14 @@ export class Game {
         this.state.revealedVotes = shuffledVotes; // Las cartas a revelar
 
         this.log(`Misión ${round} completada. Revelando votos...`);
+
+        // Auto-avanzar a MISSION_RESULT después de 5 segundos
+        setTimeout(() => {
+            this.finishReveal();
+        }, 5000);
     }
 
+
     // Método para avanzar desde MISSION_REVEAL a MISSION_RESULT
     finishReveal() {
         this.state.phase = GamePhase.MISSION_RESULT;