+
+ 🎯 REALIZA LA MISIÓN
-
- Elige el resultado de tu participación
+
+ Elige si quieres un éxito o un fracaso
- {/* DEBUG INFO - TEMPORAL */}
-
- Debug: Tu ID: {currentPlayerId} | Equipo: [{gameState.proposedTeam.join(', ')}]
-
-
{/* Cartas en orden aleatorio */}
{cardOrder ? (
@@ -643,11 +623,11 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
disabled={missionVote !== null}
>
- ÉXITO
@@ -660,11 +640,11 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
disabled={missionVote !== null}
>
- SABOTAJE
@@ -680,11 +660,11 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
disabled={missionVote !== null}
>
- SABOTAJE
@@ -697,11 +677,11 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
disabled={missionVote !== null}
>
- ÉXITO
@@ -800,9 +780,9 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
- {/* JUGADORES (TIENDA DE CAMPAÑA - Adaptable) */}
-
-
+ {/* JUGADORES - POSICIONADOS ABSOLUTAMENTE EN EL FONDO */}
+
+
{gameState.players.map((player) => {
const isSelected = selectedTeam.includes(player.id);
const isMe = player.id === currentPlayerId;
@@ -815,16 +795,15 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
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
- ${isSelected ? 'scale-110' : 'scale-100 opacity-80 hover:opacity-100'}
- `}
+ 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 */}
-
+
+
L
)}
@@ -846,14 +825,17 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
gameState.phase === 'mission_reveal' as any ||
gameState.phase === 'mission_result' as any
) && (
-
{/* Nombre */}
-
+
{player.name}
@@ -924,7 +906,7 @@ function VotingTimer() {
}, [timeLeft]);
return (
-
+
{timeLeft}
);
diff --git a/client/src/components/GameBoard_temp.tsx b/client/src/components/GameBoard_temp.tsx
index 3896eae..b4a74c0 100644
--- a/client/src/components/GameBoard_temp.tsx
+++ b/client/src/components/GameBoard_temp.tsx
@@ -236,13 +236,15 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
}
return (
-
+
+ {/* Fondo */}
-
+ {/* Contenedor principal con altura calculada */}
+
6 ? 'h-[70%]' : 'h-[85%]'}`}>
{/* --- MAPA TÁCTICO (TABLERO) --- */}
@@ -315,7 +317,7 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
{/* --- ÁREA DE JUEGO (CARTAS Y ACCIONES) --- */}
-
+
{/* FASE: VOTACIÓN DE LÍDER */}
@@ -488,57 +490,184 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
+
- {/* JUGADORES (TIENDA DE CAMPAÑA) */}
-
-
- {gameState.players.map((player) => {
- const isSelected = selectedTeam.includes(player.id);
- const isMe = player.id === currentPlayerId;
+ {/* Área de jugadores fija en el pie - Fuera del contenedor principal */}
+
6 ? 'h-[30vh]' : 'h-[15vh]'}`}>
+
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}`;
+ // Avatar logic
+ const avatarSrc = `/assets/images/characters/${player.avatar}`;
+ return (
+
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 */}
+
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' : ''}
+ `}>
+
+
+ {/* Icono de Líder */}
+ {player.isLeader && (
+
6 ? 'w-5 h-5' : 'w-6 h-6'}`}>
+ L
+
+ )}
+
+
+ {/* Nombre */}
+
+ {player.name}
+
+
+ );
+ })}
+
+
+
+ {/* HISTÓRICO DE MISIONES (Esquina superior derecha) */}
+ {gameState.missionHistory.length > 0 && (
+
+
Historial
+
+ {gameState.missionHistory.map((mission, idx) => {
return (
-
isLeader && gameState.phase === GamePhase.TEAM_BUILDING && toggleTeamSelection(player.id)}
- className={`
- relative flex flex-col items-center cursor-pointer transition-all duration-300
- ${isSelected ? 'scale-110' : 'scale-100 opacity-80 hover:opacity-100'}
- `}
- >
- {/* Avatar */}
-
-
-
- {/* Icono de Líder */}
- {player.isLeader && (
-
- L
-
- )}
+
+
+ {mission.round}
-
- {/* Nombre */}
-
- {player.name}
-
+
);
})}
+ )}
+
+ );
+}
- {/* HISTÓRICO DE MISIONES (Esquina superior derecha) */}
- {gameState.missionHistory.length > 0 && (
-
-
Historial
+// 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 (
+
+ {timeLeft}
+
+ );
+}
+
+// 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 (
+
+ Revelando Votos...
+
+ {votes.map((vote, idx) => (
+
+
+ ))}
+
+
+ );
+}
+
+// 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 (
+
+
+ {lastResult ? '¡MISIÓN EXITOSA!' : '¡MISIÓN FALLIDA!'}
+
+
+
+ Votos de Éxito: {lastMission?.successes || 0}
+
+
+ Votos de Sabotaje: {lastMission?.fails || 0}
+
+
+ Continuar
+
+
+ );
+}
diff --git a/client/src/components/MissionResult.tsx b/client/src/components/MissionResult.tsx
index 8f351a3..c3e17ed 100644
--- a/client/src/components/MissionResult.tsx
+++ b/client/src/components/MissionResult.tsx
@@ -23,12 +23,12 @@ export default function MissionResult({ gameState, onContinue, isHost }: Mission
return (
-
- Resultado de Misión
+
+ Resultado de la misión
-
+
{votes.map((vote, idx) => (