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

Actualización de assets y limpieza de archivos temporales
Some checks failed
CI/CD - Francia Ocupada (La Resistencia) / build-and-deploy (push) Failing after 6s
Details

Browse Source
This commit is contained in:
Resistencia Dev
2025-12-16 17:27:33 +01:00
parent 4e601cdd6f
commit c8bad3ea73
16 changed files with 94 additions and 1384 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
client/public/assets/audio/Rondas.mp3
View File

Binary file not shown.

BIN
client/public/assets/audio/Rondas_corto.mp3 Normal file
View File

Binary file not shown.

BIN
client/public/assets/audio/Rondas_original.mp3 Normal file
View File

Binary file not shown.

BIN
client/public/assets/images/tokens/accept_leader.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 307 KiB

BIN
client/public/assets/images/tokens/deny_leader.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 219 KiB

BIN
client/public/assets/images/tokens/paret1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 202 KiB

BIN
client/public/assets/images/tokens/paret2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 232 KiB

0
client/public/assets/images/tokens/vote_approve.png → client/public/assets/images/tokens/vote_approve_original.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 MiB

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
client/public/assets/images/tokens/vote_aprove.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
client/public/assets/images/tokens/vote_reject.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 MiB

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
client/public/assets/images/tokens/vote_reject_original.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
client/public/assets/images/ui/bg_game.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 872 KiB

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
client/public/assets/images/ui/bg_game_original.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 872 KiB

711
client/src/components/GameBoard.tsx.backup
View File

@@ -1,711 +0,0 @@
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 items-center overflow-hidden">
<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>
<div className="relative z-10 w-full flex flex-col items-center">
{/* --- 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">
<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>
{/* JUGADORES (TIENDA DE CAMPAÑA) */}
<div className="z-10 w-full overflow-x-auto pb-4">
<div className="flex justify-center gap-4 min-w-max px-4">
{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
${isSelected ? 'scale-110' : 'scale-100 opacity-80 hover:opacity-100'}
`}
>
{/* Avatar */}
<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' : ''}
`}>
<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 w-6 h-6 flex items-center justify-center text-xs text-black font-bold border border-white z-10">
L
</div>
)}
</div>
{/* Nombre */}
<span className={`mt-2 text-xs font-mono px-2 py-0.5 rounded ${isMe ? 'bg-blue-600 text-white' : 'bg-black/50 text-gray-300'}`}>
{player.name}
</span>
);
})}
</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">
<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) => (
<div
key={idx}
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>
);
}
// Componente para revelar cartas una a una
function MissionReveal({ votes, onComplete }: { votes: boolean[], onComplete: () => void }) {
const [revealedCount, setRevealedCount] = useState(0);
useEffect(() => {
if (revealedCount < votes.length) {
const timer = setTimeout(() => {
setRevealedCount(c => c + 1);
}, 2000); // 2 segundos entre carta y carta
return () => clearTimeout(timer);
} else if (revealedCount === votes.length && votes.length > 0) {
// Todas reveladas, esperar 2s más y avanzar
const timer = setTimeout(() => {
onComplete();
}, 2000);
return () => clearTimeout(timer);
}
}, [revealedCount, votes.length, onComplete]);
return (
<motion.div
key="mission-reveal"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
className="flex flex-col items-center gap-8"
>
<h2 className="text-3xl font-bold text-white uppercase tracking-widest">
Revelando Votos...
</h2>
<div className="flex gap-4 flex-wrap justify-center">
{votes.slice(0, revealedCount).map((vote, idx) => (
<motion.div
key={idx}
initial={{ scale: 0, rotateY: 180 }}
animate={{ scale: 1, rotateY: 0 }}
transition={{ type: "spring", stiffness: 200 }}
className="relative w-32 h-48"
>
<Image
src={vote ? "/assets/images/tokens/mission_success.png" : "/assets/images/tokens/mission_fail.png"}
alt={vote ? "Éxito" : "Sabotaje"}
fill
className="object-contain drop-shadow-2xl"
/>
</motion.div>
))}
</div>
<div className="text-white text-lg font-mono">
{revealedCount} / {votes.length} cartas reveladas
</div>
</motion.div>
);
}
// Componente para mostrar el resultado de la misión
function MissionResult({ gameState, onContinue }: { gameState: any, onContinue: () => void }) {
const currentMission = gameState.missionHistory[gameState.missionHistory.length - 1];
const isHost = gameState.hostId === gameState.players[0]?.id; // Simplificado
useEffect(() => {
// Auto-avanzar después de 5 segundos
const timer = setTimeout(() => {
onContinue();
}, 5000);
return () => clearTimeout(timer);
}, [onContinue]);
if (!currentMission) return null;
const { isSuccess, successes, fails, team, round } = currentMission;
return (
<motion.div
key="mission-result"
initial={{ scale: 0.8, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
exit={{ scale: 0.8, opacity: 0 }}
className="flex flex-col items-center gap-6 p-8 bg-black/90 rounded-xl border-4 max-w-2xl mx-auto"
style={{ borderColor: isSuccess ? '#3b82f6' : '#ef4444' }}
>
{/* Título */}
<div className="text-center">
<h2 className="text-5xl font-bold mb-2 uppercase tracking-widest" style={{ color: isSuccess ? '#3b82f6' : '#ef4444' }}>
{isSuccess ? '✓ MISIÓN EXITOSA' : '✗ MISIÓN FALLIDA'}
</h2>
<p className="text-gray-400 text-lg">Misión #{round}</p>
</div>
{/* Estadísticas */}
<div className="flex gap-8 text-center">
<div className="bg-blue-900/30 p-4 rounded-lg border border-blue-500/50">
<div className="text-4xl font-bold text-blue-400">{successes}</div>
<div className="text-sm text-gray-300 uppercase">Éxitos</div>
</div>
<div className="bg-red-900/30 p-4 rounded-lg border border-red-500/50">
<div className="text-4xl font-bold text-red-400">{fails}</div>
<div className="text-sm text-gray-300 uppercase">Sabotajes</div>
</div>
</div>
{/* Equipo */}
<div className="w-full">
<h3 className="text-xl text-white mb-3 text-center uppercase tracking-wider">Equipo de Misión:</h3>
<div className="flex gap-3 justify-center flex-wrap">
{team.map((playerId: string) => {
const player = gameState.players.find((p: any) => p.id === playerId);
return (
<div key={playerId} className="bg-white/10 px-4 py-2 rounded-full border border-white/20 text-white text-sm font-mono">
{player?.name || 'Desconocido'}
</div>
);
})}
</div>
</div>
{/* Mensaje */}
<div className="text-center text-gray-300 text-sm animate-pulse">
Continuando en breve...
</div>
</motion.div>
);
}

673
client/src/components/GameBoard_temp.tsx
View File

@@ -1,673 +0,0 @@
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>
);
}

94
deploy copy.sh Executable file
View File

@@ -0,0 +1,94 @@
#!/bin/bash
# Script de deployment para Francia Ocupada
# Este script se ejecuta en el HOST, no en el runner
set -e # Salir si hay algún error
echo "🚀 Iniciando deployment de Francia Ocupada..."
echo "================================================"
# Directorio del proyecto
PROJECT_DIR="/home/marti/docker/FranciaOcupada"
cd "$PROJECT_DIR"
echo "📂 Directorio de trabajo: $(pwd)"
echo ""
# PASO 1: Actualizar código desde Git
echo "📥 PASO 1: Actualizando código desde Git..."
git fetch origin
git reset --hard origin/main
echo "✅ Código actualizado"
echo ""
# PASO 2: Detener contenedores anteriores
echo "🛑 PASO 2: Deteniendo contenedores anteriores..."
docker compose -f docker-compose_prod.yml down || true
docker container prune -f || true
echo "✅ Contenedores anteriores detenidos"
echo ""
# PASO 3: Limpiar imágenes antiguas
echo "🧹 PASO 3: Limpiando imágenes antiguas..."
docker image prune -f || true
echo "✅ Limpieza completada"
echo ""
# PASO 4: Construir imágenes Docker
echo "🔨 PASO 4: Construyendo imágenes Docker..."
docker compose -f docker-compose_prod.yml build --no-cache
# Etiquetar con timestamp para trazabilidad
TAG_VERSION=$(date +%Y%m%d_%H%M%S)
docker tag resistencia-client:latest resistencia-client:${TAG_VERSION} || true
docker tag resistencia-server:latest resistencia-server:${TAG_VERSION} || true
echo "✅ Imágenes construidas:"
echo " - resistencia-client:latest (${TAG_VERSION})"
echo " - resistencia-server:latest (${TAG_VERSION})"
echo ""
# PASO 5: Desplegar contenedores
echo "📦 PASO 5: Desplegando aplicación..."
docker compose -f docker-compose_prod.yml up -d
echo "✅ Aplicación desplegada exitosamente"
echo ""
# PASO 6: Verificar deployment
echo "✅ PASO 6: Verificando deployment..."
sleep 10
echo "📊 Estado de los contenedores:"
docker compose -f docker-compose_prod.yml ps
echo ""
# Verificar que los contenedores están corriendo
RUNNING_CONTAINERS=$(docker compose -f docker-compose_prod.yml ps -q | wc -l)
if [ "$RUNNING_CONTAINERS" -eq 0 ]; then
echo "❌ ERROR: No hay contenedores corriendo"
docker compose -f docker-compose_prod.yml logs
exit 1
fi
echo "✅ Verificación completada - $RUNNING_CONTAINERS contenedores corriendo"
echo ""
# PASO 7: Mostrar logs recientes
echo "📋 PASO 7: Logs recientes..."
echo ""
echo "--- Logs del Cliente (últimas 20 líneas) ---"
docker compose -f docker-compose_prod.yml logs --tail=20 client || true
echo ""
echo "--- Logs del Servidor (últimas 20 líneas) ---"
docker compose -f docker-compose_prod.yml logs --tail=20 server || true
echo ""
echo "================================================"
echo "🎉 Deployment completado exitosamente!"
echo ""
echo "🌐 Aplicación disponible en:"
echo " - Frontend: https://franciaocupada.martivich.es"
echo " - API: https://api.franciaocupada.martivich.es"
echo "================================================"