Fix: Corregir selección de líder y mejorar UI de misiones
- Fix: isLeader ahora usa currentLeaderId del estado (evita múltiples líderes) - Mejora: TEAM_BUILDING muestra claramente quién es el líder actual - Mejora: Contador de jugadores seleccionados en TEAM_BUILDING - Mejora: MISSION con cartas grandes en pantalla completa - Feature: Posición aleatoria de cartas (izq/der) para evitar detectar votos - Mejora: Animaciones mejoradas con Framer Motion - Mejora: Mensajes más claros para jugadores que esperan
This commit is contained in:
Resistencia Dev
@@ -26,7 +26,7 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
|
||||
}, [gameState.phase, actions]);
|
||||
|
||||
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];
|
||||
|
||||
@@ -370,24 +370,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">
|
||||
{isLeader ? 'TU TURNO: ELIGE EQUIPO' : `ESPERANDO AL LÍDER...`}
|
||||
</h2>
|
||||
<p className="mb-4 font-serif italic text-gray-700">
|
||||
Se necesitan <span className="font-bold text-red-700">{currentQuestSize} agentes</span> para esta misión.
|
||||
</p>
|
||||
{/* Información del 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">
|
||||
<div className="flex items-center justify-center gap-3">
|
||||
<Image src="/assets/images/tokens/token_leader.png" alt="Leader" width={40} height={40} />
|
||||
<div>
|
||||
<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 && (
|
||||
<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"
|
||||
>
|
||||
Proponer Equipo
|
||||
</button>
|
||||
)}
|
||||
{/* Mensaje para el líder o para los demás */}
|
||||
<div className="bg-paper-bg text-black p-6 rounded shadow-2xl rotate-1 w-full text-center">
|
||||
<h2 className="text-2xl font-bold font-mono mb-2 uppercase text-resistance-blue">
|
||||
{isLeader ? '🎯 TU TURNO: ELIGE TU EQUIPO' : '⏳ ESPERANDO AL LÍDER...'}
|
||||
</h2>
|
||||
<p className="mb-4 font-serif italic text-gray-700">
|
||||
Se necesitan <span className="font-bold text-red-700 text-xl">{currentQuestSize} agentes</span> para la misión #{gameState.currentRound}.
|
||||
</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>
|
||||
)}
|
||||
|
||||
@@ -437,44 +469,103 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
|
||||
)}
|
||||
|
||||
{/* FASE: MISIÓN */}
|
||||
{gameState.phase === GamePhase.MISSION && (
|
||||
<motion.div key="mission" className="text-center">
|
||||
{gameState.proposedTeam.includes(currentPlayerId) ? (
|
||||
<div className="flex flex-col items-center gap-6">
|
||||
<h2 className="text-3xl font-bold text-white mb-4 drop-shadow-lg">¡ESTÁS EN LA MISIÓN!</h2>
|
||||
<div className="flex gap-8">
|
||||
<button onClick={() => actions.voteMission(true)} className="group">
|
||||
<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">
|
||||
<Image src="/assets/images/tokens/mission_success.png" alt="Success" width={120} height={120} />
|
||||
<span className="mt-4 text-blue-200 font-bold tracking-widest">ÉXITO</span>
|
||||
</div>
|
||||
</button>
|
||||
{gameState.phase === GamePhase.MISSION && (() => {
|
||||
// Generar orden aleatorio de cartas (solo una vez por jugador)
|
||||
const [cardOrder] = useState(() => Math.random() > 0.5);
|
||||
const successFirst = cardOrder;
|
||||
|
||||
{/* Solo los malos pueden sabotear */}
|
||||
{currentPlayer?.faction === 'spies' && (
|
||||
<button onClick={() => actions.voteMission(false)} className="group">
|
||||
<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">
|
||||
<Image src="/assets/images/tokens/mission_fail.png" alt="Fail" width={120} height={120} />
|
||||
<span className="mt-4 text-red-200 font-bold tracking-widest">SABOTAJE</span>
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
return (
|
||||
<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-8 w-full max-w-6xl px-4">
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-white mb-4 drop-shadow-2xl text-center uppercase tracking-wider animate-pulse">
|
||||
🎯 ¡ESTÁS EN LA MISIÓN!
|
||||
</h2>
|
||||
<p className="text-white text-xl mb-4 text-center">
|
||||
Elige el resultado de tu participación
|
||||
</p>
|
||||
|
||||
{/* Cartas en orden aleatorio */}
|
||||
<div className="flex gap-12 flex-wrap justify-center">
|
||||
{successFirst ? (
|
||||
<>
|
||||
{/* Carta de Éxito primero */}
|
||||
<button onClick={() => actions.voteMission(true)} className="group">
|
||||
<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/mission_success.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={() => actions.voteMission(false)} className="group">
|
||||
<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/mission_fail.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={() => actions.voteMission(false)} className="group">
|
||||
<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/mission_fail.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={() => actions.voteMission(true)} className="group">
|
||||
<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/mission_success.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>
|
||||
) : (
|
||||
<div className="text-white text-2xl font-mono bg-black/50 p-6 rounded">
|
||||
La misión está en curso...<br />
|
||||
<span className="text-sm text-gray-400">Rezando por el éxito.</span>
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
)}
|
||||
) : (
|
||||
<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-lg text-gray-400 mt-2 block">Esperando a que el equipo complete su votación.</span>
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
);
|
||||
})()}
|
||||
|
||||
{/* FASE: REVELACIÓN DE CARTAS */}
|
||||
{gameState.phase === 'mission_reveal' as any && (
|
||||
<MissionReveal
|
||||
votes={gameState.revealedVotes || []}
|
||||
onComplete={() => isHost && actions.finishMissionReveal()}
|
||||
/>
|
||||
)}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user