Fix: Update socket ID refs on reconnect (leader buttons bug)

.env.example

@@ -1,13 +1,25 @@
+# ===========================================
+# Archivo de ejemplo de configuración
+# Copia este archivo a .env y modifica los valores
+# ===========================================
+
 # Configuración de red local
 # Cambia esta IP a la IP de tu PC en la red local
-HOST_IP=192.168.1.131
+HOST_IP=192.168.1.XXX
 
 # URLs para desarrollo local
-NEXT_PUBLIC_API_URL=http://192.168.1.131:4000
+NEXT_PUBLIC_API_URL=http://192.168.1.XXX:4000
-CORS_ORIGIN=http://192.168.1.131:3000
+CORS_ORIGIN=http://192.168.1.XXX:3000
+
+# URLs para producción (descomentar y ajustar)
+# NEXT_PUBLIC_API_URL=https://api.tudominio.com
+# CORS_ORIGIN=https://tudominio.com
 
 # Configuración de base de datos
 DATABASE_URL=postgresql://postgres:password@db:5432/resistencia
 POSTGRES_USER=postgres
-POSTGRES_PASSWORD=password
+POSTGRES_PASSWORD=cambia_esta_contraseña
 POSTGRES_DB=resistencia
+
+# Contraseña del dashboard de administración
+NEXT_PUBLIC_ADMIN_PASSWORD=cambia_esta_contraseña

client/Dockerfile

@@ -1,7 +1,12 @@
 FROM node:20-alpine
 
-# Build argument for API URL
+# Build arguments
 ARG NEXT_PUBLIC_API_URL=http://localhost:4000
+ARG NEXT_PUBLIC_ADMIN_PASSWORD=admin123
+
+# Make args available as env vars during build
+ENV NEXT_PUBLIC_API_URL=$NEXT_PUBLIC_API_URL
+ENV NEXT_PUBLIC_ADMIN_PASSWORD=$NEXT_PUBLIC_ADMIN_PASSWORD
 
 # Create app directory
 WORKDIR /app

client/package.json

@@ -1,6 +1,6 @@
 {
     "name": "resistencia-client",
-    "version": "1.1.2",
+    "version": "1.3.0",
     "private": true,
     "scripts": {
         "dev": "next dev",

client/src/app/dashboard/page.tsx

@@ -5,7 +5,7 @@ import { motion, AnimatePresence } from 'framer-motion';
 import { useSocket } from '../../hooks/useSocket';
 import { Shield, Users, Gamepad2, LogOut, Clock, History, UserMinus, Key, ChevronDown } from 'lucide-react';
 
-const ADMIN_PASSWORD = "admin123";
+const ADMIN_PASSWORD = process.env.NEXT_PUBLIC_ADMIN_PASSWORD || "admin123";
 
 export default function Dashboard() {
     const { socket, isConnected } = useSocket();
@@ -252,7 +252,7 @@ export default function Dashboard() {
                                                     </div>
                                                     {game.currentRound > 0 && (
                                                         <div className="bg-white/10 px-3 py-1 rounded text-[10px] font-black uppercase tracking-widest border border-white/10">
-                                                            Ronda {game.currentRound}
+                                                            {game.matchNumber > 1 ? `P${game.matchNumber} - R${game.currentRound}` : `Ronda ${game.currentRound}`}
                                                         </div>
                                                     )}
                                                     <ChevronDown
@@ -388,24 +388,26 @@ export default function Dashboard() {
                                                                 <span>AGENTES:</span>
                                                                 <span className="text-gray-300">{entry.players.split(',').length}</span>
                                                             </div>
-                                                            {entry.rounds_played > 0 && (
+                                                            {entry.matches_played > 0 && (
                                                                 <>
                                                                     <div className="flex justify-between">
-                                                                        <span>RONDAS:</span>
+                                                                        <span>PARTIDAS:</span>
-                                                                        <span className="text-gray-300">{entry.rounds_played}</span>
+                                                                        <span className="text-gray-300">{entry.matches_played}</span>
                                                                     </div>
-                                                                    <div className="flex justify-between items-center pt-2">
+                                                                    {entry.match_results && entry.match_results.length > 0 && (
-                                                                        <span>RESULTADOS:</span>
+                                                                        <div className="flex justify-between items-center pt-2">
-                                                                        <div className="flex gap-1">
+                                                                            <span>RESULTADOS:</span>
-                                                                            {entry.round_results && entry.round_results.split(',').map((res: string, idx: number) => (
+                                                                            <div className="flex gap-1">
-                                                                                <div
+                                                                                {entry.match_results.split(',').map((res: string, idx: number) => (
-                                                                                    key={idx}
+                                                                                    <div
-                                                                                    className={`w-3 h-3 rounded-full ${res === 'true' ? 'bg-blue-500' : 'bg-red-500'}`}
+                                                                                        key={idx}
-                                                                                    title={res === 'true' ? 'Victoria Resistencia' : 'Victoria Espías'}
+                                                                                        className={`w-3 h-3 rounded-full ${res === 'aliados' ? 'bg-blue-500' : 'bg-red-500'}`}
-                                                                                />
+                                                                                        title={res === 'aliados' ? 'Victoria Aliados' : 'Victoria Nazis'}
-                                                                            ))}
+                                                                                    />
+                                                                                ))}
+                                                                            </div>
                                                                         </div>
-                                                                    </div>
+                                                                    )}
                                                                 </>
                                                             )}
                                                             {entry.players && (

client/src/components/MissionReveal.tsx

@@ -1,5 +1,5 @@
 import { motion } from 'framer-motion';
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 import Image from 'next/image';
 
 interface MissionRevealProps {
@@ -8,6 +8,16 @@ interface MissionRevealProps {
 }
 
 export default function MissionReveal({ votes, onFinished }: MissionRevealProps) {
+    // Barajar votos de forma aleatoria en cada cliente (orden diferente para cada jugador)
+    const shuffledVotes = useMemo(() => {
+        const shuffled = [...votes];
+        for (let i = shuffled.length - 1; i > 0; i--) {
+            const j = Math.floor(Math.random() * (i + 1));
+            [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
+        }
+        return shuffled;
+    }, [votes]);
+
     // Timer de seguridad: 5 segundos y avanza
     useEffect(() => {
         const timer = setTimeout(() => {
@@ -28,7 +38,7 @@ export default function MissionReveal({ votes, onFinished }: MissionRevealProps)
             </h2>
 
             <div className="flex gap-4 justify-center mb-12 flex-wrap max-w-[90vw]">
-                {votes.map((vote, idx) => (
+                {shuffledVotes.map((vote, idx) => (
                     <motion.div
                         key={idx}
                         className="w-32 h-48 rounded-xl flex items-center justify-center shadow-2xl relative overflow-hidden"
@@ -55,7 +65,7 @@ export default function MissionReveal({ votes, onFinished }: MissionRevealProps)
                 className="text-white text-xl font-mono mt-8 text-center"
                 initial={{ opacity: 0 }}
                 animate={{ opacity: 1 }}
-                transition={{ delay: votes.length * 0.3 + 0.5 }}
+                transition={{ delay: shuffledVotes.length * 0.3 + 0.5 }}
             >
                 <span className="animate-pulse">Analizando resultado estratégico...</span>
             </motion.div>

docker-compose_prod.yml

@@ -7,6 +7,7 @@ services:
       dockerfile: client/Dockerfile
       args:
         - NEXT_PUBLIC_API_URL=${NEXT_PUBLIC_API_URL:-https://api.franciaocupada.martivich.es}
+        - NEXT_PUBLIC_ADMIN_PASSWORD=${NEXT_PUBLIC_ADMIN_PASSWORD:-admin123}
     ports:
       - "3000:3000"
     volumes:
@@ -15,6 +16,7 @@ services:
       - /app/client/node_modules
     environment:
       - NEXT_PUBLIC_API_URL=${NEXT_PUBLIC_API_URL:-https://api.franciaocupada.martivich.es}
+      - NEXT_PUBLIC_ADMIN_PASSWORD=${NEXT_PUBLIC_ADMIN_PASSWORD:-admin123}
     depends_on:
       - server
     networks:

server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "resistencia-server",
-  "version": "1.1.2",
+  "version": "1.3.0",
   "description": "Backend para el juego La Resistencia",
   "main": "src/index.ts",
   "scripts": {

server/src/db.ts

@@ -30,7 +30,9 @@ export const initDb = async () => {
         await client.query(`
             ALTER TABLE game_logs 
             ADD COLUMN IF NOT EXISTS rounds_played INTEGER DEFAULT 0,
-            ADD COLUMN IF NOT EXISTS round_results TEXT DEFAULT '';
+            ADD COLUMN IF NOT EXISTS round_results TEXT DEFAULT '',
+            ADD COLUMN IF NOT EXISTS matches_played INTEGER DEFAULT 1,
+            ADD COLUMN IF NOT EXISTS match_results TEXT DEFAULT '';
         `);
 
         console.log('[DB] Base de datos inicializada correctamente');
@@ -71,15 +73,19 @@ export const logGameEnd = async (
     winner: string | null = null,
     aborted: boolean = false,
     roundsPlayed: number = 0,
-    roundResults: boolean[] = []
+    roundResults: boolean[] = [],
+    matchesPlayed: number = 1,
+    matchResults: string[] = []
 ) => {
     try {
-        // Convert boolean[] to string "true,false,true" or simplified "W,L,W"
+        // Convert boolean[] to string "true,false,true"
-        const resultsStr = roundResults.join(',');
+        const roundResultsStr = roundResults.map(r => r === true ? 'true' : r === false ? 'false' : '').filter(r => r).join(',');
+        // matchResults is already string[] like ["aliados", "alemanes"]
+        const matchResultsStr = matchResults.join(',');
 
         await pool.query(
-            'UPDATE game_logs SET finished_at = CURRENT_TIMESTAMP, winner = $1, status = $2, rounds_played = $3, round_results = $4 WHERE room_id = $5 AND status = $6',
+            'UPDATE game_logs SET finished_at = CURRENT_TIMESTAMP, winner = $1, status = $2, rounds_played = $3, round_results = $4, matches_played = $5, match_results = $6 WHERE room_id = $7 AND status = $8',
-            [winner, aborted ? 'aborted' : 'finished', roundsPlayed, resultsStr, roomId, 'active']
+            [winner, aborted ? 'aborted' : 'finished', roundsPlayed, roundResultsStr, matchesPlayed, matchResultsStr, roomId, 'active']
         );
     } catch (err) {
         console.error('[DB] Error al registrar fin de partida:', err);

server/src/index.ts

@@ -91,6 +91,7 @@ const getAdminData = async () => {
         currentPlayers: g.state.players.length,
         maxPlayers: g.maxPlayers,
         currentRound: g.state.currentRound,
+        matchNumber: g.state.matchNumber,
         players: g.state.players.map(p => ({ id: p.id, name: p.name }))
     }));
 
@@ -348,8 +349,10 @@ io.on('connection', (socket) => {
             // Desconectar a todos los jugadores de la sala
             io.in(roomId).socketsLeave(roomId);
 
-            // LOG EN DB
+            // LOG EN DB - Incluir resultado de la partida actual en matchResults
-            logGameEnd(roomId, game.state.winner, false, game.state.currentRound, game.state.questResults);
+            const finalMatchResults = [...game.state.matchResults];
+            if (game.state.winner) finalMatchResults.push(game.state.winner);
+            logGameEnd(roomId, game.state.winner, false, game.state.currentRound, game.state.questResults, game.state.matchNumber, finalMatchResults);
             broadcastAdminUpdate();
         }
     });
@@ -382,7 +385,9 @@ io.on('connection', (socket) => {
             io.in(roomId).socketsLeave(roomId);
 
             // LOG EN DB COMO ABORTADA
-            logGameEnd(roomId, null, true, game.state.currentRound, game.state.questResults);
+            const finalMatchResults = [...game.state.matchResults];
+            if (game.state.winner) finalMatchResults.push(game.state.winner);
+            logGameEnd(roomId, null, true, game.state.currentRound, game.state.questResults, game.state.matchNumber, finalMatchResults);
             broadcastAdminUpdate();
 
             console.log(`[LEAVE_GAME] ${playerName} abandonó la partida ${roomId}. Partida eliminada.`);
@@ -400,8 +405,8 @@ io.on('connection', (socket) => {
                 const existingPlayer = game.state.players.find(p => p.name === playerName);
 
                 if (existingPlayer) {
-                    // Actualizar el socket ID del jugador
+                    // Actualizar el socket ID del jugador y referencias
-                    existingPlayer.id = socket.id;
+                    game.updatePlayerSocket(existingPlayer.id, socket.id);
 
                     // Unir al socket a la sala
                     socket.join(roomId);
@@ -470,7 +475,9 @@ io.on('connection', (socket) => {
             io.in(roomId).socketsLeave(roomId);
 
             // Log como abortada por admin
-            await logGameEnd(roomId, null, true, game.state.currentRound, game.state.questResults);
+            const finalMatchResults = [...game.state.matchResults];
+            if (game.state.winner) finalMatchResults.push(game.state.winner);
+            await logGameEnd(roomId, null, true, game.state.currentRound, game.state.questResults, game.state.matchNumber, finalMatchResults);
             socket.emit('admin_action_success');
             broadcastAdminUpdate();
         }

server/src/models/Game.ts

@@ -43,7 +43,9 @@ export class Game {
             missionHistory: [],
             revealedVotes: [],
             history: [],
-            hostId: hostId
+            hostId: hostId,
+            matchNumber: 1,
+            matchResults: []
         };
     }
 
@@ -369,7 +371,13 @@ export class Game {
     restartGame() {
         this.log('=== REINICIANDO PARTIDA ===');
 
-        // Resetear variables de juego
+        // Guardar resultado de la partida actual antes de resetear
+        if (this.state.winner) {
+            this.state.matchResults.push(this.state.winner);
+        }
+
+        // Incrementar contador de partidas y resetear variables de juego
+        this.state.matchNumber++;
         this.state.currentRound = 1;
         this.state.failedVotesCount = 0;
         this.state.questResults = [null, null, null, null, null];
@@ -407,4 +415,44 @@ export class Game {
         // Mantener solo los últimos 50 mensajes
         if (this.state.history.length > 50) this.state.history.shift();
     }
+
+    updatePlayerSocket(oldId: string, newId: string) {
+        const player = this.state.players.find(p => p.id === oldId);
+        if (!player) return;
+
+        // Actualizar ID del jugador
+        player.id = newId;
+
+        // Actualizar referencias en el estado
+
+        // 1. Host
+        if (this.hostId === oldId) {
+            this.hostId = newId;
+            this.state.hostId = newId;
+        }
+
+        // 2. Líder actual
+        if (this.state.currentLeaderId === oldId) {
+            this.state.currentLeaderId = newId;
+        }
+
+        // 3. Votos de Líder (leaderVotes)
+        if (this.state.leaderVotes && this.state.leaderVotes[oldId] !== undefined) {
+            this.state.leaderVotes[newId] = this.state.leaderVotes[oldId];
+            delete this.state.leaderVotes[oldId];
+        }
+
+        // 4. Votos de Equipo (teamVotes)
+        if (this.state.teamVotes && this.state.teamVotes[oldId] !== undefined) {
+            this.state.teamVotes[newId] = this.state.teamVotes[oldId];
+            delete this.state.teamVotes[oldId];
+        }
+
+        // 5. Equipo Propuesto (proposedTeam)
+        if (this.state.proposedTeam && this.state.proposedTeam.includes(oldId)) {
+            this.state.proposedTeam = this.state.proposedTeam.map(id => id === oldId ? newId : id);
+        }
+
+        this.log(`Jugador ${player.name} reconectado. ID actualizado.`);
+    }
 }

shared/types.ts

@@ -89,6 +89,8 @@ export interface GameState {
 
     winner?: Faction;
     history: string[]; // Log de acciones para mostrar en pantalla
+    matchNumber: number; // Número de partida en esta operación (se incrementa con cada restart)
+    matchResults: Faction[]; // Resultados de cada partida (quién ganó)
 }
 
 // Configuración de jugadores por partida (según tus reglas)