feat: Fix victory screens background images
- Changed GameBoard background to show mission_success.png for ALLIED_WIN and mission_fail.png for NAZIS_WIN - Hidden board area completely during victory phases - Removed redundant background image from VictoryScreen component - Fixed image extensions from .jpg to .png for victory backgrounds
This commit is contained in:
Resistencia Dev
@@ -291,15 +291,57 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
|
||||
<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" />
|
||||
<Image
|
||||
src={
|
||||
gameState.phase === GamePhase.ALLIED_WIN
|
||||
? "/assets/images/tokens/mission_success.png"
|
||||
: gameState.phase === GamePhase.NAZIS_WIN
|
||||
? "/assets/images/tokens/mission_fail.png"
|
||||
: "/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) O CARTA DE MISIÓN --- */}
|
||||
{/* --- MAPA TÁCTICO (TABLERO) O CARTA DE MISIÓN O ASSASSIN_PHASE --- */}
|
||||
{/* No mostrar el tablero en fases de victoria */}
|
||||
{gameState.phase !== GamePhase.ALLIED_WIN && gameState.phase !== GamePhase.NAZIS_WIN && (
|
||||
<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]">
|
||||
{showBoard ? (
|
||||
{gameState.phase === GamePhase.ASSASSIN_PHASE ? (
|
||||
/* IMAGEN LASTSHOT PARA ASSASSIN_PHASE */
|
||||
<>
|
||||
<Image
|
||||
src="/assets/images/tokens/lastshot.jpg"
|
||||
alt="Last Shot"
|
||||
fill
|
||||
className="object-cover"
|
||||
priority
|
||||
/>
|
||||
{/* Overlay oscuro para mejorar legibilidad */}
|
||||
<div className="absolute inset-0 bg-black/40" />
|
||||
|
||||
{/* Título sobre la imagen */}
|
||||
<div className="absolute top-4 left-0 right-0 flex flex-col items-center z-10">
|
||||
<h1 className="text-5xl font-bold text-red-600 mb-2 drop-shadow-[0_4px_8px_rgba(0,0,0,0.9)]">
|
||||
¡ÚLTIMA OPORTUNIDAD!
|
||||
</h1>
|
||||
{currentPlayer?.role === 'francotirador' ? (
|
||||
<p className="text-xl text-white drop-shadow-[0_2px_4px_rgba(0,0,0,0.9)] font-bold">
|
||||
Francotirador, elige a quién crees que es <span className="text-yellow-400">MARLENE</span>
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-xl text-gray-300 drop-shadow-[0_2px_4px_rgba(0,0,0,0.9)] font-bold">
|
||||
El Francotirador está decidiendo...
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
) : showBoard ? (
|
||||
<>
|
||||
{/* TABLERO CON TOKENS */}
|
||||
<Image
|
||||
@@ -398,6 +440,7 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* --- ÁREA DE JUEGO (CARTAS Y ACCIONES) --- */}
|
||||
<div className="flex-1 w-full max-w-6xl relative mt-4 px-4">
|
||||
@@ -677,68 +720,23 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
|
||||
{/* FASE: ASESINO (FRANCOTIRADOR) */}
|
||||
{gameState.phase === GamePhase.ASSASSIN_PHASE && (
|
||||
<motion.div
|
||||
className="fixed inset-0 flex flex-col items-center justify-center z-50 relative"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
className="w-full flex flex-col items-center gap-6"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
>
|
||||
{/* Imagen de fondo solo para el Francotirador */}
|
||||
{currentPlayer?.role === 'francotirador' && (
|
||||
<div className="absolute inset-0 z-0">
|
||||
<Image
|
||||
src="/assets/images/tokens/lastshot.jpg"
|
||||
alt="Last Shot"
|
||||
fill
|
||||
className="object-cover"
|
||||
priority
|
||||
/>
|
||||
{/* Overlay oscuro para mejorar legibilidad */}
|
||||
<div className="absolute inset-0 bg-black/50" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Fondo oscuro para los demás jugadores */}
|
||||
{currentPlayer?.role !== 'francotirador' && (
|
||||
<div className="absolute inset-0 z-0 bg-black/90" />
|
||||
)}
|
||||
|
||||
<motion.div
|
||||
className="text-center mb-8 relative z-10"
|
||||
initial={{ scale: 0 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{ type: 'spring', stiffness: 200 }}
|
||||
>
|
||||
<h1 className="text-6xl font-bold text-red-600 mb-4">
|
||||
¡ÚLTIMA OPORTUNIDAD!
|
||||
</h1>
|
||||
{currentPlayer?.role === 'francotirador' ? (
|
||||
<p className="text-2xl text-white drop-shadow-[0_2px_4px_rgba(0,0,0,0.8)]">
|
||||
Francotirador, elige a quién crees que es <span className="text-yellow-400 font-bold">MARLENE</span>
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-2xl text-gray-400">
|
||||
El Francotirador está decidiendo...
|
||||
</p>
|
||||
)}
|
||||
</motion.div>
|
||||
|
||||
{currentPlayer?.role === 'francotirador' && (
|
||||
<motion.div
|
||||
className="grid grid-cols-3 gap-6 max-w-4xl relative z-10"
|
||||
initial={{ y: 50, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
transition={{ delay: 0.5 }}
|
||||
>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 max-w-4xl">
|
||||
{gameState.players
|
||||
.filter(p => p.faction === Faction.ALIADOS) // Solo jugadores Aliados
|
||||
.map(player => (
|
||||
<motion.button
|
||||
key={player.id}
|
||||
onClick={() => actions.assassinKill(player.id)}
|
||||
className="bg-black/60 hover:bg-red-600/70 border-4 border-white/30 hover:border-red-500 p-6 rounded-xl transition-all backdrop-blur-sm"
|
||||
whileHover={{ scale: 1.1 }}
|
||||
className="bg-black/60 hover:bg-red-600/70 border-2 border-white/30 hover:border-red-500 p-3 rounded-lg transition-all backdrop-blur-sm flex flex-col items-center gap-2"
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
>
|
||||
<div className="w-32 h-32 mx-auto mb-4 rounded-full border-4 border-white/50 overflow-hidden bg-black relative shadow-2xl">
|
||||
<div className="w-20 h-20 rounded-full border-2 border-white/50 overflow-hidden bg-black relative shadow-xl">
|
||||
<Image
|
||||
src={`/assets/images/characters/${player.avatar}`}
|
||||
alt={player.name}
|
||||
@@ -746,10 +744,16 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-white font-bold text-xl drop-shadow-[0_2px_4px_rgba(0,0,0,0.8)]">{player.name}</p>
|
||||
<p className="text-white font-bold text-sm drop-shadow-[0_2px_4px_rgba(0,0,0,0.8)]">{player.name}</p>
|
||||
</motion.button>
|
||||
))}
|
||||
</motion.div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{currentPlayer?.role !== 'francotirador' && (
|
||||
<div className="text-white text-xl font-mono bg-black/50 px-6 py-3 rounded-full border border-white/20 animate-pulse">
|
||||
El Francotirador está decidiendo...
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
@@ -36,18 +36,6 @@ export default function VictoryScreen({ gameState, isHost, onRestart, onFinalize
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
>
|
||||
{/* Imagen de fondo a pantalla completa */}
|
||||
<div className="absolute inset-0 z-0">
|
||||
<Image
|
||||
src={isNazisWin ? '/assets/images/tokens/mission_fail.png' : '/assets/images/tokens/mission_success.png'}
|
||||
alt={isNazisWin ? 'Victoria Nazi' : 'Victoria Aliada'}
|
||||
fill
|
||||
className="object-cover"
|
||||
priority
|
||||
/>
|
||||
{/* Overlay oscuro para mejorar legibilidad */}
|
||||
<div className="absolute inset-0 bg-black/60" />
|
||||
</div>
|
||||
{/* Título de victoria */}
|
||||
<motion.div
|
||||
className="text-center mb-12 relative z-10"
|
||||
|
||||
Reference in New Issue
Block a user