From 6e651526489a874c262dbbc578011a84e3a2514a Mon Sep 17 00:00:00 2001
From: Resistencia Dev <dev@resistencia.local>
Date: Mon, 8 Dec 2025 22:39:05 +0100
Subject: [PATCH] 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
---
 client/src/components/GameBoard.tsx     | 312 ++++++++++++------------
 client/src/components/VictoryScreen.tsx |  12 -
 2 files changed, 158 insertions(+), 166 deletions(-)

diff --git a/client/src/components/GameBoard.tsx b/client/src/components/GameBoard.tsx
index 2304992..81acb99 100644
--- a/client/src/components/GameBoard.tsx
+++ b/client/src/components/GameBoard.tsx
@@ -291,113 +291,156 @@ 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 --- */}
-                <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 ? (
-                        <>
-                            {/* TABLERO CON TOKENS */}
-                            <Image
-                                src="/assets/images/ui/board_map.jpg"
-                                alt="Tactical Map"
-                                fill
-                                className="object-contain"
-                            />
+                {/* --- 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]">
+                        {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" />
 
-                            {/* 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-[10%] aspect-square flex items-center justify-center"
-                                        style={{
-                                            left: coord.left,
-                                            top: coord.top,
-                                            transform: 'translate(-50%, -50%)'
-                                        }}
-                                    >
-                                        {/* 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 flex items-center justify-center"
-                                            >
-                                                <div className="w-[80%] h-[80%] relative">
-                                                    <Image src="/assets/images/tokens/marker_score_blue.png" alt="Success" fill className="object-contain drop-shadow-lg" />
-                                                </div>
-                                            </motion.div>
-                                        )}
-                                        {result === false && (
-                                            <motion.div
-                                                initial={{ scale: 0 }} animate={{ scale: 1 }}
-                                                className="absolute inset-0 z-20 flex items-center justify-center"
-                                            >
-                                                <div className="w-[80%] h-[80%] relative">
-                                                    <Image src="/assets/images/tokens/marker_score_red.png" alt="Fail" fill className="object-contain drop-shadow-lg" />
-                                                </div>
-                                            </motion.div>
-                                        )}
-                                    </div>
-                                );
-                            })}
-
-                            {/* TRACK DE VOTOS FALLIDOS */}
-                            <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'}`} />
-                                    ))}
+                                {/* 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>
-                            </div>
-                        </>
-                    ) : (
-                        /* CARTA DE MISIÓN CON TÍTULO */
-                        <>
-                            <Image
-                                src={`/assets/images/missions/mission${gameState.currentRound}.png`}
-                                alt={`Mission ${gameState.currentRound}`}
-                                fill
-                                className="object-contain"
-                            />
-                            {/* Título y subtítulo sobre la carta */}
-                            <div className="absolute top-4 left-0 right-0 flex flex-col items-center z-10">
-                                <h2 className="text-4xl font-bold text-white drop-shadow-[0_4px_8px_rgba(0,0,0,0.8)] mb-2 uppercase tracking-wider">
-                                    Misión {gameState.currentRound}
-                                </h2>
-                                <h3 className="text-2xl font-semibold text-yellow-400 drop-shadow-[0_4px_8px_rgba(0,0,0,0.8)] uppercase tracking-wide">
-                                    {missionNames[gameState.currentRound - 1]}
-                                </h3>
-                            </div>
-                        </>
-                    )}
-                </div>
+                            </>
+                        ) : showBoard ? (
+                            <>
+                                {/* TABLERO CON TOKENS */}
+                                <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-[10%] aspect-square flex items-center justify-center"
+                                            style={{
+                                                left: coord.left,
+                                                top: coord.top,
+                                                transform: 'translate(-50%, -50%)'
+                                            }}
+                                        >
+                                            {/* 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 flex items-center justify-center"
+                                                >
+                                                    <div className="w-[80%] h-[80%] relative">
+                                                        <Image src="/assets/images/tokens/marker_score_blue.png" alt="Success" fill className="object-contain drop-shadow-lg" />
+                                                    </div>
+                                                </motion.div>
+                                            )}
+                                            {result === false && (
+                                                <motion.div
+                                                    initial={{ scale: 0 }} animate={{ scale: 1 }}
+                                                    className="absolute inset-0 z-20 flex items-center justify-center"
+                                                >
+                                                    <div className="w-[80%] h-[80%] relative">
+                                                        <Image src="/assets/images/tokens/marker_score_red.png" alt="Fail" fill className="object-contain drop-shadow-lg" />
+                                                    </div>
+                                                </motion.div>
+                                            )}
+                                        </div>
+                                    );
+                                })}
+
+                                {/* TRACK DE VOTOS FALLIDOS */}
+                                <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>
+                            </>
+                        ) : (
+                            /* CARTA DE MISIÓN CON TÍTULO */
+                            <>
+                                <Image
+                                    src={`/assets/images/missions/mission${gameState.currentRound}.png`}
+                                    alt={`Mission ${gameState.currentRound}`}
+                                    fill
+                                    className="object-contain"
+                                />
+                                {/* Título y subtítulo sobre la carta */}
+                                <div className="absolute top-4 left-0 right-0 flex flex-col items-center z-10">
+                                    <h2 className="text-4xl font-bold text-white drop-shadow-[0_4px_8px_rgba(0,0,0,0.8)] mb-2 uppercase tracking-wider">
+                                        Misión {gameState.currentRound}
+                                    </h2>
+                                    <h3 className="text-2xl font-semibold text-yellow-400 drop-shadow-[0_4px_8px_rgba(0,0,0,0.8)] uppercase tracking-wide">
+                                        {missionNames[gameState.currentRound - 1]}
+                                    </h3>
+                                </div>
+                            </>
+                        )}
+                    </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>
                         )}
diff --git a/client/src/components/VictoryScreen.tsx b/client/src/components/VictoryScreen.tsx
index ed72d6f..f575ffc 100644
--- a/client/src/components/VictoryScreen.tsx
+++ b/client/src/components/VictoryScreen.tsx
@@ -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"