13d56c2431
- Mover timer de votación a esquina superior izquierda (fixed, 20px margen) - Eliminar contador de votos rechazados en resultado de misión - Ajustar posiciones de tokens de victoria/fracaso en el mapa - Mantener mapa visible durante toda la fase MISSION_RESULT (eliminar timeout de 7s) - Cambiar título intro de 'Guerra Total' a 'Traidores en París' - Ajustar tamaño de cartas aceptar/rechazar líder a cuadradas (w-32 h-32) TODO: Afinar posiciones de tokens 3, 4 y 5 en el mapa
674 lines
37 KiB
TypeScript
674 lines
37 KiB
TypeScript
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';
|
|
|
|
interface GameBoardProps {
|
|
gameState: GameState;
|
|
currentPlayerId: string;
|
|
actions: any;
|
|
}
|
|
|
|
export default function GameBoard({ gameState, currentPlayerId, actions }: GameBoardProps) {
|
|
const [selectedTeam, setSelectedTeam] = useState<string[]>([]);
|
|
|
|
// Hooks para FASE REVEAL ROLE
|
|
const [revealCard, setRevealCard] = useState(false);
|
|
|
|
// Timer para avanzar automáticamente en REVEAL_ROLE
|
|
useEffect(() => {
|
|
if (gameState.phase === 'reveal_role' as any) {
|
|
const timer = setTimeout(() => {
|
|
actions.finishReveal();
|
|
}, 10000);
|
|
return () => clearTimeout(timer);
|
|
}
|
|
}, [gameState.phase, actions]);
|
|
|
|
const currentPlayer = gameState.players.find(p => p.id === currentPlayerId);
|
|
const isLeader = currentPlayer?.isLeader;
|
|
const config = GAME_CONFIG[gameState.players.length as keyof typeof GAME_CONFIG];
|
|
const currentQuestSize = config?.quests[gameState.currentRound - 1];
|
|
|
|
// Manejar selección de equipo
|
|
const toggleTeamSelection = (playerId: string) => {
|
|
if (selectedTeam.includes(playerId)) {
|
|
setSelectedTeam(selectedTeam.filter(id => id !== playerId));
|
|
} else {
|
|
if (selectedTeam.length < currentQuestSize) {
|
|
setSelectedTeam([...selectedTeam, playerId]);
|
|
}
|
|
}
|
|
};
|
|
|
|
// Coordenadas porcentuales de los hexágonos de misión en el mapa
|
|
const missionCoords = [
|
|
{ left: '12%', top: '55%' }, // Misión 1
|
|
{ left: '28%', top: '15%' }, // Misión 2
|
|
{ left: '52%', top: '25%' }, // Misión 3
|
|
{ left: '42%', top: '70%' }, // Misión 4
|
|
{ left: '82%', top: '40%' }, // Misión 5
|
|
];
|
|
|
|
// --- UI/Efectos para FASES TEMPRANAS ---
|
|
const isHost = gameState.hostId === currentPlayerId;
|
|
|
|
// FASE INTRO
|
|
if (gameState.phase === 'intro' as any) {
|
|
return (
|
|
<div className="relative w-full h-screen flex flex-col items-center justify-center bg-black overflow-hidden text-white">
|
|
<div className="absolute inset-0 z-0">
|
|
<Image src="/assets/images/ui/bg_intro.png" alt="Battlefield" fill className="object-cover" />
|
|
<div className="absolute inset-0 bg-black/40" />
|
|
</div>
|
|
|
|
<h1 className="z-10 text-5xl font-bold uppercase tracking-[0.3em] mb-8 text-yellow-500 drop-shadow-lg text-center">
|
|
Guerra Total
|
|
</h1>
|
|
|
|
{/* Audio Auto-Play */}
|
|
<audio
|
|
src="/assets/audio/Intro.ogg"
|
|
autoPlay
|
|
onEnded={() => isHost && actions.finishIntro()}
|
|
/>
|
|
|
|
{isHost && (
|
|
<button
|
|
onClick={() => actions.finishIntro()}
|
|
className="z-10 bg-white/20 hover:bg-white/40 border border-white px-6 py-2 rounded text-sm uppercase tracking-widest backdrop-blur-sm transition-all"
|
|
>
|
|
Omitir Introducción
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// FASE REVEAL ROLE NO HOOKS HERE
|
|
|
|
if (gameState.phase === 'reveal_role' as any) {
|
|
// Determinar imagen basada en el rol
|
|
// Mapeo básico:
|
|
// Merlin -> good_merlin.png
|
|
// Percival -> good_percival.png
|
|
// Servant -> good_soldier_X.png (random)
|
|
// Assassin -> evil_assassin.png
|
|
// Morgana -> evil_morgana.png
|
|
// Mordred -> evil_mordred.png
|
|
// Oberon -> evil_oberon.png
|
|
// Minion -> evil_minion_X.png
|
|
|
|
let roleImage = '/assets/images/characters/good_soldier_1.png'; // Default
|
|
|
|
const role = currentPlayer?.role;
|
|
if (role === 'merlin') roleImage = '/assets/images/characters/good_merlin.png';
|
|
else if (role === 'assassin') roleImage = '/assets/images/characters/evil_assassin.png';
|
|
else if (role === 'percival') roleImage = '/assets/images/characters/good_percival.png';
|
|
else if (role === 'morgana') roleImage = '/assets/images/characters/evil_morgana.png';
|
|
else if (role === 'mordred') roleImage = '/assets/images/characters/evil_mordred.png';
|
|
else if (role === 'oberon') roleImage = '/assets/images/characters/evil_oberon.png';
|
|
else if (role === 'loyal_servant') {
|
|
// Random soldier 1-5
|
|
const idx = (currentPlayerId.charCodeAt(0) % 5) + 1;
|
|
roleImage = `/assets/images/characters/good_soldier_${idx}.png`;
|
|
}
|
|
else if (role === 'minion') {
|
|
// Random minion 1-3
|
|
const idx = (currentPlayerId.charCodeAt(0) % 3) + 1;
|
|
roleImage = `/assets/images/characters/evil_minion_${idx}.png`;
|
|
}
|
|
|
|
return (
|
|
<div className="relative w-full h-screen flex flex-col items-center justify-center bg-black overflow-hidden text-white font-mono">
|
|
{/* FONDO (Mismo que Roll Call) */}
|
|
<div className="absolute inset-0 z-0">
|
|
<Image src="/assets/images/ui/bg_roll_call.png" alt="Resistance HQ" fill className="object-cover" />
|
|
<div className="absolute inset-0 bg-black/70" />
|
|
</div>
|
|
|
|
<div className="z-10 flex flex-col items-center gap-8">
|
|
<h2 className="text-2xl uppercase tracking-[0.2em] text-gray-300">
|
|
Tu Identidad Secreta
|
|
</h2>
|
|
|
|
<p className="text-sm text-gray-400 mb-4 animate-pulse">
|
|
Desliza hacia arriba para revelar
|
|
</p>
|
|
|
|
<div className="relative w-64 h-96 perspective-1000">
|
|
{/* Carta Revelada (Fondo) */}
|
|
<div className="absolute inset-0 w-full h-full rounded-xl overflow-hidden shadow-2xl border-4 border-yellow-600 bg-gray-900 flex items-center justify-center">
|
|
<Image
|
|
src={roleImage}
|
|
alt="Role"
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
<div className="absolute bottom-0 w-full bg-black/80 text-center py-2 font-bold text-yellow-500 uppercase">
|
|
{role?.replace('_', ' ')}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Reverso de Carta (Draggable) */}
|
|
<motion.div
|
|
drag="y"
|
|
dragConstraints={{ top: -300, bottom: 0 }}
|
|
dragElastic={0.2}
|
|
onDragEnd={(e, info) => {
|
|
// Reducir umbral a -50 para facilitar
|
|
if (info.offset.y < -50) {
|
|
setRevealCard(true);
|
|
}
|
|
}}
|
|
whileHover={{ scale: 1.02 }}
|
|
whileTap={{ scale: 0.98, cursor: 'grabbing' }}
|
|
animate={revealCard ? { y: -1000, opacity: 0 } : { y: 0, opacity: 1 }}
|
|
className="absolute inset-0 w-full h-full rounded-xl overflow-hidden shadow-2xl z-20 cursor-grab active:cursor-grabbing hover:ring-2 hover:ring-white/50 transition-all"
|
|
>
|
|
<Image
|
|
src="/assets/images/characters/card_back.png"
|
|
alt="Card Back"
|
|
fill
|
|
className="object-cover pointer-events-none" // Importante: pointer-events-none en la imagen para que no capture el drag
|
|
/>
|
|
</motion.div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// FASE ROLL CALL
|
|
if (gameState.phase === 'roll_call' as any) {
|
|
return (
|
|
<div className="relative w-full h-screen flex flex-col items-center justify-center bg-black overflow-hidden text-white font-mono">
|
|
<div className="absolute inset-0 z-0">
|
|
<Image src="/assets/images/ui/bg_roll_call.png" alt="Resistance HQ" fill className="object-cover" />
|
|
<div className="absolute inset-0 bg-black/70" />
|
|
</div>
|
|
|
|
<div className="z-10 w-full max-w-5xl px-4">
|
|
<h2 className="text-3xl text-center mb-12 uppercase tracking-[0.2em] text-gray-300 border-b border-gray-600 pb-4">
|
|
Pasando Lista...
|
|
</h2>
|
|
|
|
{isHost && (
|
|
<audio
|
|
src="/assets/audio/Rondas.ogg"
|
|
autoPlay
|
|
onEnded={() => actions.finishRollCall()} // Host avanza cuando acaba audio
|
|
/>
|
|
)}
|
|
|
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
|
|
{gameState.players.map((p, i) => {
|
|
// Asignar avatar determinista basado en charCode
|
|
const avatarIdx = (p.name.length % 3) + 1;
|
|
return (
|
|
<motion.div
|
|
key={p.id}
|
|
initial={{ opacity: 0, scale: 0.8 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ delay: i * 0.3 }} // Aparecen uno a uno
|
|
className="flex flex-col items-center gap-3"
|
|
>
|
|
<div className="w-32 h-32 rounded-full border-4 border-gray-400 overflow-hidden relative shadow-2xl bg-black">
|
|
<Image
|
|
src={`/assets/images/characters/avatar_${avatarIdx}.png`}
|
|
alt="Avatar"
|
|
fill
|
|
className="object-cover grayscale contrast-125"
|
|
/>
|
|
</div>
|
|
<div className="bg-black/80 px-4 py-1 rounded border border-white/20 text-xl font-bold text-yellow-500 uppercase">
|
|
{p.name}
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="relative w-full h-screen flex flex-col overflow-hidden">
|
|
{/* Fondo */}
|
|
<div className="absolute inset-0 z-0 opacity-40">
|
|
<Image src="/assets/images/ui/bg_game.png" alt="Game Background" fill className="object-cover" />
|
|
<div className="absolute inset-0 bg-black/60" />
|
|
</div>
|
|
|
|
{/* Contenedor principal con altura calculada */}
|
|
<div className={`relative z-10 w-full flex flex-col items-center ${gameState.players.length > 6 ? 'h-[70%]' : 'h-[85%]'}`}>
|
|
|
|
{/* --- MAPA TÁCTICO (TABLERO) --- */}
|
|
<div className="relative w-full max-w-5xl aspect-video mt-4 shadow-2xl border-4 border-gray-800 rounded-lg overflow-hidden bg-[#2a2a2a]">
|
|
<Image
|
|
src="/assets/images/ui/board_map.jpg"
|
|
alt="Tactical Map"
|
|
fill
|
|
className="object-contain"
|
|
/>
|
|
|
|
{/* TOKENS SOBRE EL MAPA */}
|
|
{missionCoords.map((coord, idx) => {
|
|
const result = gameState.questResults[idx];
|
|
const isCurrent = gameState.currentRound === idx + 1;
|
|
|
|
return (
|
|
<div
|
|
key={idx}
|
|
className="absolute w-[12%] aspect-square flex items-center justify-center transform -translate-x-1/2 -translate-y-1/2"
|
|
style={{ left: coord.left, top: coord.top }}
|
|
>
|
|
{/* Marcador de Ronda Actual */}
|
|
{isCurrent && (
|
|
<motion.div
|
|
layoutId="round-marker"
|
|
className="absolute inset-0 z-10"
|
|
initial={{ scale: 1.5, opacity: 0 }}
|
|
animate={{ scale: 1, opacity: 1 }}
|
|
transition={{ type: "spring", stiffness: 300, damping: 20 }}
|
|
>
|
|
<Image
|
|
src="/assets/images/tokens/marker_round.png"
|
|
alt="Current Round"
|
|
fill
|
|
className="object-contain drop-shadow-lg"
|
|
/>
|
|
</motion.div>
|
|
)}
|
|
|
|
{/* Resultado de Misión (Éxito/Fracaso) */}
|
|
{result === true && (
|
|
<motion.div
|
|
initial={{ scale: 0 }} animate={{ scale: 1 }}
|
|
className="absolute inset-0 z-20"
|
|
>
|
|
<Image src="/assets/images/tokens/marker_score_blue.png" alt="Success" fill className="object-contain drop-shadow-lg" />
|
|
</motion.div>
|
|
)}
|
|
{result === false && (
|
|
<motion.div
|
|
initial={{ scale: 0 }} animate={{ scale: 1 }}
|
|
className="absolute inset-0 z-20"
|
|
>
|
|
<Image src="/assets/images/tokens/marker_score_red.png" alt="Fail" fill className="object-contain drop-shadow-lg" />
|
|
</motion.div>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
|
|
{/* TRACK DE VOTOS FALLIDOS (Pequeño indicador en la esquina inferior izquierda del mapa) */}
|
|
<div className="absolute bottom-[5%] left-[2%] bg-black/60 p-2 rounded border border-white/20">
|
|
<div className="text-[10px] text-gray-300 uppercase mb-1 text-center">Votos Rechazados</div>
|
|
<div className="flex gap-1">
|
|
{[...Array(5)].map((_, i) => (
|
|
<div key={i} className={`w-3 h-3 rounded-full border border-gray-500 ${i < gameState.failedVotesCount ? 'bg-red-500' : 'bg-transparent'}`} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* --- ÁREA DE JUEGO (CARTAS Y ACCIONES) --- */}
|
|
<div className="flex-1 w-full max-w-6xl relative mt-4 px-4 overflow-y-auto">
|
|
<AnimatePresence mode="wait">
|
|
|
|
{/* FASE: VOTACIÓN DE LÍDER */}
|
|
{gameState.phase === 'vote_leader' as any && (
|
|
<motion.div
|
|
key="vote-leader"
|
|
initial={{ opacity: 0, scale: 0.9 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
className="flex flex-col items-center gap-6"
|
|
>
|
|
<div className="bg-black/80 p-4 rounded text-white text-center border border-yellow-500/50 relative">
|
|
<h3 className="text-xl font-mono mb-2 text-yellow-500 uppercase tracking-widest">
|
|
Confirmar Líder
|
|
</h3>
|
|
<div className="text-2xl font-bold mb-2">
|
|
¿Aceptas a <span className="text-yellow-400">{gameState.players.find(p => p.id === gameState.currentLeaderId)?.name}</span> como Líder?
|
|
</div>
|
|
|
|
{/* Timer */}
|
|
{!gameState.leaderVotes?.[currentPlayerId] && (
|
|
<VotingTimer onTimeout={() => actions.voteLeader(null)} />
|
|
)}
|
|
</div>
|
|
|
|
{gameState.leaderVotes?.[currentPlayerId] === undefined ? (
|
|
<div className="flex gap-8">
|
|
<button onClick={() => actions.voteLeader(true)} className="group">
|
|
<div className="w-40 h-60 bg-white rounded-lg shadow-xl flex items-center justify-center border-4 border-transparent group-hover:border-green-500 transition-all transform group-hover:-translate-y-4 relative overflow-hidden">
|
|
<Image src="/assets/images/tokens/accept_leader.png" alt="Accept Leader" fill className="object-contain" />
|
|
</div>
|
|
<span className="block text-center text-white mt-2 font-bold bg-green-600 px-2 rounded uppercase tracking-widest">ACEPTAR</span>
|
|
</button>
|
|
<button onClick={() => actions.voteLeader(false)} className="group">
|
|
<div className="w-40 h-60 bg-white rounded-lg shadow-xl flex items-center justify-center border-4 border-transparent group-hover:border-red-500 transition-all transform group-hover:-translate-y-4 relative overflow-hidden">
|
|
<Image src="/assets/images/tokens/deny_leader.png" alt="Deny Leader" fill className="object-contain" />
|
|
</div>
|
|
<span className="block text-center text-white mt-2 font-bold bg-red-600 px-2 rounded uppercase tracking-widest">RECHAZAR</span>
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div className="text-white text-xl font-mono animate-pulse bg-black/50 px-6 py-3 rounded-full border border-white/20">
|
|
VOTO REGISTRADO. ESPERANDO AL RESTO...
|
|
</div>
|
|
)}
|
|
</motion.div>
|
|
)}
|
|
|
|
{/* FASE: CONSTRUCCIÓN DE EQUIPO */}
|
|
{gameState.phase === GamePhase.TEAM_BUILDING && (
|
|
<motion.div
|
|
key="team-building"
|
|
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"
|
|
>
|
|
<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>
|
|
|
|
{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>
|
|
)}
|
|
</motion.div>
|
|
)}
|
|
|
|
{/* FASE: VOTACIÓN DE EQUIPO */}
|
|
{gameState.phase === GamePhase.VOTING_TEAM && (
|
|
<motion.div
|
|
key="voting"
|
|
initial={{ scale: 0.8, opacity: 0 }}
|
|
animate={{ scale: 1, opacity: 1 }}
|
|
className="flex flex-col items-center gap-6"
|
|
>
|
|
<div className="bg-black/80 p-4 rounded text-white text-center border border-white/20">
|
|
<h3 className="text-xl font-mono mb-2 text-yellow-500">PROPUESTA DE MISIÓN</h3>
|
|
<div className="flex gap-2 justify-center">
|
|
{gameState.proposedTeam.map(id => {
|
|
const p = gameState.players.find(pl => pl.id === id);
|
|
return (
|
|
<div key={id} className="bg-white/10 px-3 py-1 rounded text-sm">
|
|
{p?.name}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{!currentPlayer?.hasVoted ? (
|
|
<div className="flex gap-8">
|
|
<button onClick={() => actions.voteTeam(true)} className="group">
|
|
<div className="w-32 h-48 bg-white rounded-lg shadow-xl flex items-center justify-center border-4 border-transparent group-hover:border-green-500 transition-all transform group-hover:-translate-y-4">
|
|
<Image src="/assets/images/tokens/vote_approve.png" alt="Approve" width={100} height={100} />
|
|
</div>
|
|
<span className="block text-center text-white mt-2 font-bold bg-green-600 px-2 rounded">APROBAR</span>
|
|
</button>
|
|
<button onClick={() => actions.voteTeam(false)} className="group">
|
|
<div className="w-32 h-48 bg-white rounded-lg shadow-xl flex items-center justify-center border-4 border-transparent group-hover:border-red-500 transition-all transform group-hover:-translate-y-4">
|
|
<Image src="/assets/images/tokens/vote_reject.png" alt="Reject" width={100} height={100} />
|
|
</div>
|
|
<span className="block text-center text-white mt-2 font-bold bg-red-600 px-2 rounded">RECHAZAR</span>
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div className="text-white text-xl font-mono animate-pulse">
|
|
VOTO REGISTRADO. ESPERANDO AL RESTO...
|
|
</div>
|
|
)}
|
|
</motion.div>
|
|
)}
|
|
|
|
{/* 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>
|
|
|
|
{/* 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>
|
|
)}
|
|
</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>
|
|
)}
|
|
|
|
{/* FASE: REVELACIÓN DE CARTAS */}
|
|
{gameState.phase === 'mission_reveal' as any && (
|
|
<MissionReveal
|
|
votes={gameState.revealedVotes || []}
|
|
onComplete={() => isHost && actions.finishMissionReveal()}
|
|
/>
|
|
)}
|
|
|
|
{/* FASE: RESULTADO DE MISIÓN */}
|
|
{gameState.phase === 'mission_result' as any && (
|
|
<MissionResult
|
|
gameState={gameState}
|
|
onContinue={() => isHost && actions.finishMissionResult()}
|
|
/>
|
|
)}
|
|
|
|
</AnimatePresence>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Área de jugadores fija en el pie - Fuera del contenedor principal */}
|
|
<div className={`z-20 w-full bg-black/80 border-t border-white/10 backdrop-blur-md ${gameState.players.length > 6 ? 'h-[30vh]' : 'h-[15vh]'}`}>
|
|
<div className={`w-full h-full p-2 ${gameState.players.length > 6 ? 'grid grid-cols-5 auto-rows-fr gap-y-2 gap-x-4 content-center justify-items-center' : 'flex items-center justify-center gap-6'}`}>
|
|
{gameState.players.map((player) => {
|
|
const isSelected = selectedTeam.includes(player.id);
|
|
const isMe = player.id === currentPlayerId;
|
|
|
|
// Avatar logic
|
|
const avatarSrc = `/assets/images/characters/${player.avatar}`;
|
|
|
|
return (
|
|
<div
|
|
key={player.id}
|
|
onClick={() => isLeader && gameState.phase === GamePhase.TEAM_BUILDING && toggleTeamSelection(player.id)}
|
|
className={`
|
|
relative flex flex-col items-center cursor-pointer transition-all duration-300 group
|
|
${isSelected ? 'scale-110 z-10' : 'scale-100 opacity-70 hover:opacity-100 hover:scale-105'}
|
|
`}
|
|
>
|
|
{/* Avatar */}
|
|
<div className={`
|
|
relative rounded-full border-2 overflow-hidden shadow-lg bg-black transition-all
|
|
${gameState.players.length > 6 ? 'w-12 h-12' : 'w-20 h-20'}
|
|
${isSelected ? 'border-yellow-400 ring-4 ring-yellow-400/30 shadow-yellow-400/20' : 'border-gray-500 group-hover:border-gray-300'}
|
|
${player.isLeader ? 'ring-2 ring-white' : ''}
|
|
`}>
|
|
<Image
|
|
src={avatarSrc}
|
|
alt={player.name}
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
|
|
{/* Icono de Líder */}
|
|
{player.isLeader && (
|
|
<div className={`absolute bottom-0 right-0 bg-yellow-500 rounded-full p-1 flex items-center justify-center text-[10px] text-black font-bold border border-white z-20 shadow-sm ${gameState.players.length > 6 ? 'w-5 h-5' : 'w-6 h-6'}`}>
|
|
L
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Nombre */}
|
|
<span className={`
|
|
mt-1 text-xs font-mono px-2 py-0.5 rounded shadow-sm whitespace-nowrap max-w-[100px] truncate
|
|
${isMe ? 'bg-blue-600 text-white font-bold' : 'bg-black/60 text-gray-300 border border-white/10'}
|
|
`}>
|
|
{player.name}
|
|
</span>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 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">
|
|
<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) => {
|
|
return (
|
|
<div key={idx} className="relative">
|
|
<div
|
|
className={`w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold border-2 ${mission.isSuccess
|
|
? 'bg-blue-600 border-blue-400 text-white'
|
|
: 'bg-red-600 border-red-400 text-white'
|
|
}`}
|
|
title={`Misión ${mission.round}: ${mission.isSuccess ? 'Éxito' : 'Fracaso'} (${mission.successes}✓ ${mission.fails}✗)`}
|
|
>
|
|
{mission.round}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Subcomponente para el Timer de Votación
|
|
function VotingTimer({ onTimeout }: { onTimeout: () => void }) {
|
|
const [timeLeft, setTimeLeft] = useState(10);
|
|
|
|
useEffect(() => {
|
|
if (timeLeft <= 0) {
|
|
onTimeout();
|
|
return;
|
|
}
|
|
const interval = setInterval(() => setTimeLeft(t => t - 1), 1000);
|
|
return () => clearInterval(interval);
|
|
}, [timeLeft, onTimeout]);
|
|
|
|
return (
|
|
<div className="absolute top-4 right-4 bg-red-600/80 text-white w-16 h-16 rounded-full flex items-center justify-center border-4 border-red-400 animate-pulse text-2xl font-bold font-mono">
|
|
{timeLeft}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Subcomponente para la revelación de cartas de misión
|
|
function MissionReveal({ votes, onComplete }: { votes: boolean[], onComplete: () => void }) {
|
|
const [revealedCount, setRevealedCount] = useState(0);
|
|
|
|
useEffect(() => {
|
|
if (revealedCount < votes.length) {
|
|
const timer = setTimeout(() => {
|
|
setRevealedCount(prev => prev + 1);
|
|
}, 1500);
|
|
return () => clearTimeout(timer);
|
|
} else if (revealedCount === votes.length) {
|
|
const timer = setTimeout(() => {
|
|
onComplete();
|
|
}, 2000);
|
|
return () => clearTimeout(timer);
|
|
}
|
|
}, [revealedCount, votes.length, onComplete]);
|
|
|
|
return (
|
|
<motion.div
|
|
className="flex flex-col items-center gap-6"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
>
|
|
<h2 className="text-3xl font-bold text-white mb-4 drop-shadow-lg">Revelando Votos...</h2>
|
|
<div className="flex gap-4 flex-wrap justify-center">
|
|
{votes.map((vote, idx) => (
|
|
<motion.div
|
|
key={idx}
|
|
initial={{ rotateY: 180, opacity: 0 }}
|
|
animate={idx < revealedCount ? { rotateY: 0, opacity: 1 } : { rotateY: 180, opacity: 0 }}
|
|
transition={{ duration: 0.6, delay: 0 }}
|
|
className="w-32 h-48 relative"
|
|
>
|
|
<Image
|
|
src={vote ? '/assets/images/tokens/mission_success.png' : '/assets/images/tokens/mission_fail.png'}
|
|
alt={vote ? 'Success' : 'Fail'}
|
|
fill
|
|
className="object-contain"
|
|
/>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
}
|
|
|
|
// Subcomponente para el resultado de la misión
|
|
function MissionResult({ gameState, onContinue }: { gameState: GameState, onContinue: () => void }) {
|
|
const lastResult = gameState.questResults[gameState.currentRound - 1];
|
|
const lastMission = gameState.missionHistory[gameState.missionHistory.length - 1];
|
|
|
|
return (
|
|
<motion.div
|
|
className="flex flex-col items-center gap-6"
|
|
initial={{ scale: 0.8, opacity: 0 }}
|
|
animate={{ scale: 1, opacity: 1 }}
|
|
>
|
|
<h2 className={`text-5xl font-bold mb-4 drop-shadow-lg ${lastResult ? 'text-blue-400' : 'text-red-400'}`}>
|
|
{lastResult ? '¡MISIÓN EXITOSA!' : '¡MISIÓN FALLIDA!'}
|
|
</h2>
|
|
<div className="bg-black/80 p-6 rounded-lg border border-white/20">
|
|
<div className="text-white text-xl mb-4">
|
|
Votos de Éxito: <span className="text-blue-400 font-bold">{lastMission?.successes || 0}</span>
|
|
</div>
|
|
<div className="text-white text-xl">
|
|
Votos de Sabotaje: <span className="text-red-400 font-bold">{lastMission?.fails || 0}</span>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={onContinue}
|
|
className="bg-white/20 hover:bg-white/40 border border-white px-8 py-3 rounded text-white font-bold uppercase tracking-widest backdrop-blur-sm transition-all"
|
|
>
|
|
Continuar
|
|
</button>
|
|
</motion.div>
|
|
);
|
|
}
|