chore: bump version to 1.3.0

- Añadido listener de errores de socket para detectar fallos de reconexión
- Actualizada la lógica de transiciones de vista para evitar bloqueos en pantallas vacías
- Limpieza de sesión al fallar la reconexión

.agent/workflows/sesiones-y-botones.md

@@ -0,0 +1,62 @@
+---
+description: Implementación de sesiones persistentes y botones de salida
+---
+
+# Implementación de Sesiones y Botones de Salida
+
+## Objetivo
+Implementar tres mejoras principales:
+1. Sistema de sesiones persistentes
+2. Botón de salir de la partida (en todas las pantallas de juego)
+3. Botón de salir del juego (solo en lobby)
+
+## Tareas
+
+### 1. Sistema de Sesiones Persistentes
+
+**Cliente:**
+- Crear hook `useSessionStorage` para manejar sesiones
+- Guardar en localStorage:
+  - `playerName` y `fullPlayerName`
+  - `currentView` (login/lobby/game)
+  - `roomId` si está en una partida
+- Al cargar la app, verificar si hay sesión activa
+- Si hay sesión, reconectar al servidor y recuperar estado
+
+**Servidor:**
+- Implementar evento `reconnect_session` para validar y recuperar estado
+- Mantener mapping de `socketId` a `playerId` persistente
+- Al reconectar, actualizar el socketId del jugador en la partida
+
+### 2. Botón de Salir de la Partida
+
+**Cliente:**
+- Crear componente `ExitGameButton` con icono de flecha
+- Posicionar arriba a la izquierda
+- Mostrar en todas las fases del juego (no en lobby)
+- Al hacer clic, emitir evento `leave_game`
+
+**Servidor:**
+- Implementar evento `leave_game`
+- Notificar a todos los jugadores que alguien salió
+- Eliminar la partida de la BD
+- Devolver a todos al lobby
+
+### 3. Botón de Salir del Juego
+
+**Cliente:**
+- Crear componente `LogoutButton` con icono de apagar
+- Posicionar arriba a la izquierda solo en lobby
+- Al hacer clic:
+  - Limpiar localStorage
+  - Volver a vista de login
+  - Desconectar socket si está en partida
+
+## Orden de Implementación
+
+1. Crear hooks y utilidades para sesiones
+2. Implementar botón de salir del juego (logout)
+3. Implementar botón de salir de la partida
+4. Implementar lógica de reconexión en servidor
+5. Integrar sistema de sesiones en el cliente
+6. Pruebas

.env.example

@@ -0,0 +1,13 @@
+# Configuración de red local
+# Cambia esta IP a la IP de tu PC en la red local
+HOST_IP=192.168.1.131
+
+# URLs para desarrollo local
+NEXT_PUBLIC_API_URL=http://192.168.1.131:4000
+CORS_ORIGIN=http://192.168.1.131:3000
+
+# Configuración de base de datos
+DATABASE_URL=postgresql://postgres:password@db:5432/resistencia
+POSTGRES_USER=postgres
+POSTGRES_PASSWORD=password
+POSTGRES_DB=resistencia

NETWORK-ACCESS.md

@@ -0,0 +1,62 @@
+# Configuración de Acceso desde Red Local
+
+## Problema
+Por defecto, la aplicación está configurada para usar `localhost`, lo que solo permite acceso desde el mismo PC. Para acceder desde otros dispositivos (móviles, tablets, etc.) en la misma red local, necesitas configurar la IP de tu PC.
+
+## Solución
+
+### 1. Obtener la IP de tu PC
+```bash
+ip -c a
+```
+Busca la IP en la interfaz de red activa (ej: `enp3s0`). En este caso: `192.168.1.131`
+
+### 2. Configurar el archivo .env
+Edita el archivo `.env` en la raíz del proyecto:
+
+```env
+# Cambia esta IP a la IP de tu PC
+HOST_IP=192.168.1.131
+
+NEXT_PUBLIC_API_URL=http://192.168.1.131:4000
+CORS_ORIGIN=http://192.168.1.131:3000
+```
+
+### 3. Reiniciar Docker
+```bash
+docker compose down
+docker compose up -d --build
+```
+
+### 4. Acceder desde otros dispositivos
+Desde tu móvil, tablet u otro dispositivo en la misma red WiFi, abre el navegador y ve a:
+```
+http://192.168.1.131:3000
+```
+
+## Notas Importantes
+
+- **Firewall**: Asegúrate de que tu firewall permita conexiones en los puertos 3000 y 4000
+- **Misma red**: Todos los dispositivos deben estar en la misma red WiFi/LAN
+- **IP dinámica**: Si tu IP cambia (DHCP), tendrás que actualizar el archivo `.env` y reiniciar Docker
+
+## Verificar Firewall (Ubuntu/Linux)
+
+```bash
+# Ver estado del firewall
+sudo ufw status
+
+# Si está activo, permitir los puertos
+sudo ufw allow 3000/tcp
+sudo ufw allow 4000/tcp
+```
+
+## Para volver a localhost
+
+Simplemente edita `.env` y cambia las URLs a `localhost`:
+```env
+NEXT_PUBLIC_API_URL=http://localhost:4000
+CORS_ORIGIN=http://localhost:3000
+```
+
+Y reinicia Docker.

SESIONES-IMPLEMENTACION.md

@@ -0,0 +1,112 @@
+# Resumen de Implementación: Sesiones y Botones de Salida
+
+## Cambios Realizados
+
+### 1. Sistema de Sesiones Persistentes ✅
+
+#### Cliente
+- **Nuevo hook**: `client/src/hooks/useSessionStorage.ts`
+  - Maneja el almacenamiento y recuperación de sesiones en localStorage
+  - Guarda: playerName, fullPlayerName, currentView, roomId
+  
+- **Actualización de `page.tsx`**:
+  - Integrado hook `useSessionStorage`
+  - Al iniciar sesión, se guarda la sesión
+  - Al cargar la app, se restaura la sesión si existe
+  - Al cambiar de vista (lobby/game), se actualiza la sesión
+  - Función `handleLogout` para limpiar sesión
+
+#### Servidor
+- **Nuevo evento**: `reconnect_session`
+  - Permite a un jugador reconectarse a una partida existente
+  - Actualiza el socketId del jugador en la partida
+  - Envía el estado actualizado al jugador reconectado
+
+### 2. Botón de Salir de la Partida ✅
+
+#### Cliente
+- **Nuevo componente**: `client/src/components/ExitGameButton.tsx`
+  - Botón con icono de flecha
+  - Posicionado arriba a la izquierda (fixed top-4 left-4)
+  - Modal de confirmación antes de salir
+  - Se muestra en todas las fases del juego excepto en pantallas de victoria
+
+- **Actualización de `GameBoard.tsx`**:
+  - Agregado prop `fullPlayerName`
+  - Integrado `ExitGameButton`
+  - Llama a `actions.leaveGame()` al confirmar
+
+- **Actualización de `useSocket.ts`**:
+  - Nueva acción: `leaveGame()`
+  - Nuevo listener: `player_left_game`
+
+#### Servidor
+- **Nuevo evento**: `leave_game`
+  - Notifica a todos los jugadores que alguien abandonó
+  - Elimina la partida de la base de datos
+  - Limpia timers asociados
+  - Actualiza la lista de salas
+  - Desconecta a todos los jugadores de la sala
+
+### 3. Botón de Salir del Juego (Logout) ✅
+
+#### Cliente
+- **Nuevo componente**: `client/src/components/LogoutButton.tsx`
+  - Botón con icono de apagar
+  - Posicionado arriba a la izquierda (fixed top-4 left-4)
+  - Solo visible en el lobby
+  
+- **Actualización de `page.tsx`**:
+  - Función `handleLogout()`:
+    - Limpia la sesión de localStorage
+    - Vuelve a la vista de login
+    - Si está en una partida, llama a `leaveGame()`
+
+## Flujo de Uso
+
+### Sesiones Persistentes
+1. Usuario se loguea → sesión guardada en localStorage
+2. Usuario cierra navegador
+3. Usuario vuelve a abrir → sesión restaurada automáticamente
+4. Si estaba en una partida, intenta reconectar
+
+### Salir de la Partida
+1. Usuario hace clic en botón de flecha (arriba izquierda)
+2. Aparece modal de confirmación
+3. Al confirmar:
+   - Servidor notifica a todos: "Jugador X ha abandonado"
+   - Partida eliminada de la BD
+   - Todos vuelven al lobby
+
+### Salir del Juego (Logout)
+1. Usuario hace clic en botón de apagar (arriba izquierda, solo en lobby)
+2. Sesión eliminada de localStorage
+3. Vuelve a pantalla de login
+
+## Archivos Modificados
+
+### Nuevos Archivos
+- `client/src/hooks/useSessionStorage.ts`
+- `client/src/components/LogoutButton.tsx`
+- `client/src/components/ExitGameButton.tsx`
+- `.agent/workflows/sesiones-y-botones.md`
+
+### Archivos Modificados
+- `client/src/app/page.tsx`
+- `client/src/components/GameBoard.tsx`
+- `client/src/hooks/useSocket.ts`
+- `server/src/index.ts`
+
+## Próximos Pasos
+
+1. **Probar la aplicación**:
+   - Verificar que las sesiones persisten correctamente
+   - Probar el botón de salir de la partida
+   - Probar el botón de logout
+   - Verificar reconexión después de recargar
+
+2. **Posibles mejoras**:
+   - Agregar notificación toast cuando alguien abandona
+   - Mejorar el manejo de errores en reconexión
+   - Agregar timeout de sesión (expiración automática)
+   - Guardar más información en la sesión (configuración, preferencias)

client/Dockerfile

@@ -1,5 +1,8 @@
 FROM node:20-alpine
 
+# Build argument for API URL
+ARG NEXT_PUBLIC_API_URL=http://localhost:4000
+
 # Create app directory
 WORKDIR /app
 

client/package.json

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

client/src/app/dashboard/page.tsx

@@ -0,0 +1,456 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+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";
+
+export default function Dashboard() {
+    const { socket, isConnected } = useSocket();
+    const [password, setPassword] = useState('');
+    const [isAuthenticated, setIsAuthenticated] = useState(false);
+    const [activeGames, setActiveGames] = useState<any[]>([]);
+    const [gameHistory, setGameHistory] = useState<any[]>([]);
+    const [error, setError] = useState('');
+    const [expandedGames, setExpandedGames] = useState<Set<string>>(new Set());
+
+    // Comprobar sesión al cargar
+    useEffect(() => {
+        const savedSession = localStorage.getItem('resistencia_admin_session');
+        if (savedSession === 'active') {
+            setIsAuthenticated(true);
+        }
+    }, []);
+
+    // Cargar datos y escuchar actualizaciones en tiempo real
+    useEffect(() => {
+        if (isAuthenticated && socket) {
+            // Solicitar datos iniciales
+            socket.emit('admin_get_data');
+
+            // Escuchar actualizaciones (el servidor emite a admin-room)
+            socket.on('admin_data', (data: any) => {
+                console.log('[ADMIN] Datos recibidos:', data);
+                setActiveGames(data.activeGames);
+                setGameHistory(data.history);
+            });
+
+            socket.on('admin_action_success', () => {
+                console.log('[ADMIN] Acción realizada con éxito');
+                socket.emit('admin_get_data');
+            });
+
+            return () => {
+                socket.off('admin_data');
+                socket.off('admin_action_success');
+            };
+        }
+    }, [isAuthenticated, socket]);
+
+    const handleLogin = (e: React.FormEvent) => {
+        e.preventDefault();
+        if (password === ADMIN_PASSWORD) {
+            setIsAuthenticated(true);
+            localStorage.setItem('resistencia_admin_session', 'active');
+            setError('');
+        } else {
+            setError('Acceso Denegado: Contraseña incorrecta');
+        }
+    };
+
+    const handleLogout = () => {
+        localStorage.removeItem('resistencia_admin_session');
+        setIsAuthenticated(false);
+        setPassword('');
+    };
+
+    const closeGame = (roomId: string) => {
+        if (confirm('¿Seguro que quieres forzar el cierre de esta partida?')) {
+            socket?.emit('admin_close_game', { roomId });
+        }
+    };
+
+    const kickPlayer = (roomId: string, socketId: string) => {
+        if (confirm('¿Seguro que quieres expulsar a este jugador?')) {
+            socket?.emit('admin_kick_player', { roomId, targetSocketId: socketId });
+        }
+    };
+
+    const toggleGame = (id: string) => {
+        setExpandedGames(prev => {
+            const newSet = new Set(prev);
+            if (newSet.has(id)) newSet.delete(id);
+            else newSet.add(id);
+            return newSet;
+        });
+    };
+
+    if (!isAuthenticated) {
+        return (
+            <div className="min-h-screen bg-[#0a0a0c] flex items-center justify-center p-4 font-['Inter',sans-serif]">
+                <motion.div
+                    initial={{ opacity: 0, scale: 0.95 }}
+                    animate={{ opacity: 1, scale: 1 }}
+                    className="bg-[#121216] border border-white/10 p-10 rounded-3xl w-full max-w-md shadow-[0_20px_50px_rgba(0,0,0,0.5)] relative overflow-hidden"
+                >
+                    <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-red-600 via-zinc-800 to-red-600"></div>
+
+                    <div className="flex justify-center mb-8 relative">
+                        <div className="absolute inset-0 bg-red-500/20 blur-2xl rounded-full"></div>
+                        <Shield size={64} className="text-red-500 relative z-10" />
+                    </div>
+
+                    <h1 className="text-3xl font-black text-white text-center mb-2 uppercase tracking-tight">Acceso Admin</h1>
+                    <p className="text-gray-400 text-center text-sm mb-10 font-medium">Panel de Control de La Resistencia</p>
+
+                    <form onSubmit={handleLogin} className="space-y-6">
+                        <div className="relative">
+                            <Key size={18} className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-500" />
+                            <input
+                                type="password"
+                                autoFocus
+                                value={password}
+                                onChange={(e) => setPassword(e.target.value)}
+                                placeholder="Introduce la contraseña"
+                                className="w-full bg-[#1a1a20] border border-white/5 rounded-2xl pl-12 pr-6 py-4 text-white focus:outline-none focus:ring-2 focus:ring-red-600/50 transition-all placeholder:text-gray-600 font-medium"
+                            />
+                        </div>
+
+                        {error && (
+                            <motion.p
+                                initial={{ opacity: 0, y: -10 }}
+                                animate={{ opacity: 1, y: 0 }}
+                                className="text-red-500 text-xs font-bold text-center mt-2 flex items-center justify-center gap-2"
+                            >
+                                <span className="w-1.5 h-1.5 bg-red-500 rounded-full animate-pulse"></span>
+                                {error}
+                            </motion.p>
+                        )}
+
+                        <button
+                            type="submit"
+                            className="w-full bg-red-600 hover:bg-red-500 text-white font-black py-4 rounded-2xl shadow-xl shadow-red-600/10 transition-all uppercase tracking-[0.2em] text-xs hover:scale-[1.02] active:scale-[0.98]"
+                        >
+                            Entrar en Sistema
+                        </button>
+                    </form>
+                </motion.div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="min-h-screen bg-[#0a0a0c] text-white p-4 md:p-10 font-['Inter',sans-serif]">
+            {/* Header */}
+            <header className="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-start md:items-center mb-12 gap-6">
+                <div className="space-y-1">
+                    <div className="flex items-center gap-3 text-red-500">
+                        <div className="p-2 bg-red-500/10 rounded-lg">
+                            <Shield size={22} />
+                        </div>
+                        <span className="text-[10px] font-black uppercase tracking-[0.4em] opacity-80">Seguimiento de Operaciones</span>
+                    </div>
+                    <h1 className="text-5xl font-black tracking-tighter uppercase italic text-transparent bg-clip-text bg-gradient-to-r from-white via-white to-gray-500">Comandante</h1>
+                </div>
+
+                <div className="flex items-center gap-6 bg-[#121216] border border-white/10 px-8 py-4 rounded-3xl shadow-xl">
+                    <div className="flex flex-col items-end">
+                        <span className="text-[10px] text-gray-500 uppercase font-black tracking-widest mb-1">Status Servidor</span>
+                        <div className="flex items-center gap-2">
+                            <div className={`w-2.5 h-2.5 rounded-full ${isConnected ? 'bg-green-500 shadow-[0_0_15px_rgba(34,197,94,0.6)] animate-pulse' : 'bg-red-500'}`}></div>
+                            <span className="text-xs font-mono font-black tracking-widest">{isConnected ? 'OPERATIVO' : 'DESCONECTADO'}</span>
+                        </div>
+                    </div>
+
+                    <div className="w-px h-8 bg-white/10 mx-2"></div>
+
+                    <button
+                        onClick={handleLogout}
+                        className="flex items-center gap-2 px-5 py-2.5 bg-zinc-800 hover:bg-red-600 text-gray-300 hover:text-white rounded-xl transition-all font-black text-[10px] uppercase tracking-widest group"
+                    >
+                        <LogOut size={16} className="group-hover:translate-x-1 transition-transform" />
+                        Desconectar
+                    </button>
+                </div>
+            </header>
+
+            <main className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-10">
+
+                {/* Panel Latino: Estadísticas Rápidas */}
+                <div className="lg:col-span-12 grid grid-cols-2 md:grid-cols-4 gap-4 mb-2">
+                    {[
+                        { label: 'Partidas Activas', value: activeGames.length, color: 'text-red-500', icon: Gamepad2 },
+                        { label: 'Agentes Online', value: activeGames.reduce((acc, g) => acc + g.currentPlayers, 0), color: 'text-blue-400', icon: Users },
+                        { label: 'Misiones Registradas', value: gameHistory.length, color: 'text-orange-400', icon: History },
+                        { label: 'Uso de CPU', value: '4%', color: 'text-green-400', icon: Clock }
+                    ].map((stat, i) => (
+                        <div key={i} className="bg-[#121216] border border-white/5 p-6 rounded-2xl flex items-center justify-between">
+                            <div>
+                                <p className="text-[10px] uppercase font-black tracking-widest text-gray-500 mb-1">{stat.label}</p>
+                                <p className={`text-2xl font-black ${stat.color}`}>{stat.value}</p>
+                            </div>
+                            <stat.icon className="opacity-10" size={32} />
+                        </div>
+                    ))}
+                </div>
+
+                {/* Columna Principal: Partidas Activas */}
+                <div className="lg:col-span-8 space-y-8">
+                    <section>
+                        <div className="flex items-center gap-4 mb-8">
+                            <h2 className="text-xl font-black text-white uppercase tracking-tighter italic border-l-4 border-red-600 pl-4">Canales de Radio Activos</h2>
+                        </div>
+
+                        <div className="grid gap-4">
+                            <AnimatePresence mode="popLayout">
+                                {activeGames.length === 0 ? (
+                                    <motion.div
+                                        initial={{ opacity: 0 }}
+                                        animate={{ opacity: 1 }}
+                                        className="bg-[#121216]/40 border border-dashed border-white/10 rounded-3xl p-20 text-center"
+                                    >
+                                        <Clock size={48} className="mx-auto mb-6 text-gray-700" />
+                                        <p className="text-lg font-bold text-gray-600 uppercase tracking-widest">Silencio Radioeléctrico</p>
+                                        <p className="text-xs text-gray-700 font-medium">Buscando señales de misiones activas...</p>
+                                    </motion.div>
+                                ) : (
+                                    activeGames.map((game: any) => (
+                                        <motion.div
+                                            key={game.id}
+                                            layout
+                                            initial={{ opacity: 0, x: -20 }}
+                                            animate={{ opacity: 1, x: 0 }}
+                                            exit={{ opacity: 0, scale: 0.95 }}
+                                            className="bg-[#121216] border border-white/10 rounded-3xl overflow-hidden hover:bg-[#16161c] transition-all group shadow-lg"
+                                        >
+                                            {/* Cabecera Compacta (Clickable) */}
+                                            <div
+                                                onClick={() => toggleGame(game.id)}
+                                                className="flex flex-wrap items-center justify-between p-6 cursor-pointer gap-4"
+                                            >
+                                                <div className="flex items-center gap-4">
+                                                    <div className="w-2 h-12 bg-red-600 rounded-full" />
+                                                    <div>
+                                                        <h3 className="text-xl font-black text-white italic uppercase tracking-tighter leading-none mb-1">{game.name}</h3>
+                                                        <div className="flex items-center gap-2 text-[10px] uppercase font-black tracking-widest text-gray-500">
+                                                            <span>ID: {game.id.slice(0, 6)}</span>
+                                                            <span className="text-gray-700">•</span>
+                                                            <span>{new Date(game.created_at || Date.now()).toLocaleTimeString()}</span>
+                                                        </div>
+                                                    </div>
+                                                </div>
+
+                                                <div className="flex items-center gap-6">
+                                                    <div className="flex items-center gap-2 bg-black/40 px-3 py-1.5 rounded-lg border border-white/5">
+                                                        <Users size={14} className="text-gray-400" />
+                                                        <span className="text-xs font-bold text-white">{game.currentPlayers} / {game.maxPlayers}</span>
+                                                    </div>
+                                                    <div className={`px-3 py-1 rounded text-[10px] font-black uppercase tracking-widest border ${game.status === 'WAITING' ? 'bg-orange-500/10 text-orange-500 border-orange-500/20' : 'bg-green-500/10 text-green-500 border-green-500/20'}`}>
+                                                        {game.status}
+                                                    </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">
+                                                            {game.matchNumber > 1 ? `P${game.matchNumber} - R${game.currentRound}` : `Ronda ${game.currentRound}`}
+                                                        </div>
+                                                    )}
+                                                    <ChevronDown
+                                                        size={20}
+                                                        className={`text-gray-500 transition-transform duration-300 ${expandedGames.has(game.id) ? 'rotate-180' : ''}`}
+                                                    />
+                                                </div>
+                                            </div>
+
+                                            {/* Contenido Expandible */}
+                                            <AnimatePresence>
+                                                {expandedGames.has(game.id) && (
+                                                    <motion.div
+                                                        initial={{ height: 0, opacity: 0 }}
+                                                        animate={{ height: 'auto', opacity: 1 }}
+                                                        exit={{ height: 0, opacity: 0 }}
+                                                        className="border-t border-white/5 bg-black/20"
+                                                    >
+                                                        <div className="p-6 pt-2">
+                                                            {/* Panel de Control */}
+                                                            <div className="flex justify-end mb-6">
+                                                                <button
+                                                                    onClick={(e) => { e.stopPropagation(); closeGame(game.id); }}
+                                                                    className="px-6 py-3 bg-zinc-900 hover:bg-red-900/40 text-gray-400 hover:text-red-400 rounded-2xl text-[10px] font-black uppercase tracking-[0.2em] transition-all border border-white/5 hover:border-red-500/30 active:scale-95 whitespace-nowrap flex items-center gap-2"
+                                                                >
+                                                                    <LogOut size={14} />
+                                                                    Abortar Misión
+                                                                </button>
+                                                            </div>
+
+                                                            {/* Grid de Jugadores */}
+                                                            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-3">
+                                                                {game.players.map((player: any) => (
+                                                                    <div key={player.id} className="bg-[#0a0a0c] p-3 rounded-xl border border-white/5 flex items-center justify-between group/player hover:border-white/10 transition-all">
+                                                                        <div className="flex items-center gap-3">
+                                                                            <div className="w-8 h-8 rounded-lg bg-white/5 flex items-center justify-center font-black text-gray-400 text-xs border border-white/5 group-hover/player:text-white transition-all">
+                                                                                {player.name[0].toUpperCase()}
+                                                                            </div>
+                                                                            <div className="overflow-hidden">
+                                                                                <p className="text-xs font-bold text-gray-300 truncate">{player.name}</p>
+                                                                                <p className="text-[9px] opacity-30 font-mono">AG-{player.id.slice(0, 4)}</p>
+                                                                            </div>
+                                                                        </div>
+                                                                        <button
+                                                                            onClick={(e) => { e.stopPropagation(); kickPlayer(game.id, player.id); }}
+                                                                            className="p-2 text-gray-700 hover:text-red-500 hover:bg-red-500/10 rounded-lg transition-all opacity-0 group-hover/player:opacity-100"
+                                                                            title="Expulsar"
+                                                                        >
+                                                                            <UserMinus size={14} />
+                                                                        </button>
+                                                                    </div>
+                                                                ))}
+                                                            </div>
+                                                        </div>
+                                                    </motion.div>
+                                                )}
+                                            </AnimatePresence>
+                                        </motion.div>
+                                    ))
+                                )}
+                            </AnimatePresence>
+                        </div>
+                    </section>
+                </div>
+
+                {/* Columna Lateral: Archivo Histórico */}
+                <div className="lg:col-span-4 space-y-8">
+                    <section className="sticky top-10">
+                        <div className="flex items-center gap-4 mb-8">
+                            <h2 className="text-xl font-black text-white uppercase tracking-tighter italic border-l-4 border-gray-600 pl-4">Informe Forense</h2>
+                        </div>
+
+                        <div className="bg-[#121216] border border-white/10 rounded-3xl overflow-hidden shadow-2xl">
+                            <div className="p-6 bg-white/5 border-b border-white/5 flex justify-between items-center">
+                                <p className="text-[10px] uppercase font-black tracking-widest text-gray-400">Archivos Recientes</p>
+                                <History size={14} className="text-gray-600" />
+                            </div>
+
+                            <div className="max-h-[60vh] overflow-y-auto custom-scrollbar p-0">
+                                {gameHistory.length === 0 ? (
+                                    <div className="text-center py-20 opacity-10">
+                                        <p className="text-xs italic font-bold">Sin registros</p>
+                                    </div>
+                                ) : (
+                                    gameHistory.map((entry: any) => (
+                                        <div key={entry.id} className="border-b border-white/5 last:border-0 last:rounded-b-3xl">
+                                            {/* Cabecera Historial */}
+                                            <div
+                                                onClick={() => toggleGame(entry.id)}
+                                                className={`p-4 cursor-pointer hover:bg-white/5 transition-colors flex justify-between items-center group relative overflow-hidden ${expandedGames.has(entry.id) ? 'bg-white/[0.02]' : ''}`}
+                                            >
+                                                <div className={`absolute left-0 top-0 bottom-0 w-1 transition-all ${entry.winner === 'resistance' ? 'bg-blue-500' : entry.winner === 'spies' ? 'bg-red-500' : 'bg-gray-600'} ${expandedGames.has(entry.id) ? 'opacity-100' : 'opacity-40 group-hover:opacity-100'}`} />
+
+                                                <div className="pl-3">
+                                                    <h4 className="text-sm font-black text-gray-200 uppercase tracking-tight leading-none mb-1">{entry.room_name}</h4>
+                                                    <div className="flex items-center gap-2 text-[9px] text-gray-600 font-bold uppercase tracking-widest">
+                                                        <span>{entry.host_name}</span>
+                                                    </div>
+                                                </div>
+
+                                                <div className="flex items-center gap-3">
+                                                    <div className={`text-[9px] font-black uppercase px-2 py-1 rounded ${entry.winner === 'resistance' ? 'bg-blue-500/10 text-blue-500' :
+                                                        entry.winner === 'spies' ? 'bg-red-500/10 text-red-500' : 'bg-gray-700/20 text-gray-500'
+                                                        }`}>
+                                                        {entry.winner ? (entry.winner === 'resistance' ? 'ALIAD' : 'AXIS') : '??'}
+                                                    </div>
+                                                    <ChevronDown
+                                                        size={14}
+                                                        className={`text-gray-600 transition-transform ${expandedGames.has(entry.id) ? 'rotate-180' : ''}`}
+                                                    />
+                                                </div>
+                                            </div>
+
+                                            {/* Detalles Historial Expandido */}
+                                            <AnimatePresence>
+                                                {expandedGames.has(entry.id) && (
+                                                    <motion.div
+                                                        initial={{ height: 0, opacity: 0 }}
+                                                        animate={{ height: 'auto', opacity: 1 }}
+                                                        exit={{ height: 0, opacity: 0 }}
+                                                        className="bg-black/20"
+                                                    >
+                                                        <div className="p-4 pl-7 text-[10px] text-gray-400 space-y-2 font-mono border-t border-white/5">
+                                                            <div className="flex justify-between">
+                                                                <span>FECHA:</span>
+                                                                <span className="text-gray-300">{new Date(entry.created_at).toLocaleDateString()}</span>
+                                                            </div>
+                                                            <div className="flex justify-between">
+                                                                <span>HORA:</span>
+                                                                <span className="text-gray-300">{new Date(entry.created_at).toLocaleTimeString()}</span>
+                                                            </div>
+                                                            <div className="flex justify-between">
+                                                                <span>AGENTES:</span>
+                                                                <span className="text-gray-300">{entry.players.split(',').length}</span>
+                                                            </div>
+                                                            {entry.matches_played > 0 && (
+                                                                <>
+                                                                    <div className="flex justify-between">
+                                                                        <span>PARTIDAS:</span>
+                                                                        <span className="text-gray-300">{entry.matches_played}</span>
+                                                                    </div>
+                                                                    {entry.match_results && entry.match_results.length > 0 && (
+                                                                        <div className="flex justify-between items-center pt-2">
+                                                                            <span>RESULTADOS:</span>
+                                                                            <div className="flex gap-1">
+                                                                                {entry.match_results.split(',').map((res: string, idx: number) => (
+                                                                                    <div
+                                                                                        key={idx}
+                                                                                        className={`w-3 h-3 rounded-full ${res === 'aliados' ? 'bg-blue-500' : 'bg-red-500'}`}
+                                                                                        title={res === 'aliados' ? 'Victoria Aliados' : 'Victoria Nazis'}
+                                                                                    />
+                                                                                ))}
+                                                                            </div>
+                                                                        </div>
+                                                                    )}
+                                                                </>
+                                                            )}
+                                                            {entry.players && (
+                                                                <div className="pt-2 border-t border-white/5 mt-2">
+                                                                    <p className="mb-1 opacity-50">PARTICIPANTES:</p>
+                                                                    <p className="text-gray-500 leading-relaxed">{entry.players.split(',').join(', ')}</p>
+                                                                </div>
+                                                            )}
+                                                        </div>
+                                                    </motion.div>
+                                                )}
+                                            </AnimatePresence>
+                                        </div>
+                                    ))
+                                )}
+                            </div>
+                        </div>
+                    </section>
+                </div>
+            </main>
+
+            <style jsx global>{`
+                @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap');
+                
+                body {
+                    background-color: #0a0a0c;
+                    cursor: crosshair;
+                }
+
+                .custom-scrollbar::-webkit-scrollbar {
+                    width: 3px;
+                }
+                .custom-scrollbar::-webkit-scrollbar-track {
+                    background: transparent;
+                }
+                .custom-scrollbar::-webkit-scrollbar-thumb {
+                    background: rgba(255, 255, 255, 0.05);
+                    border-radius: 10px;
+                }
+                .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+                    background: rgba(255, 255, 255, 0.1);
+                }
+            `}</style>
+        </div>
+    );
+}

client/src/app/page.tsx

@@ -2,9 +2,11 @@
 
 import { useState, useEffect } from 'react';
 import { useSocket } from '../hooks/useSocket';
+import { useSessionStorage } from '../hooks/useSessionStorage';
 import { motion, AnimatePresence } from 'framer-motion';
 import Image from 'next/image';
 import GameBoard from '../components/GameBoard';
+import LogoutButton from '../components/LogoutButton';
 import { GameRoom } from '../../../shared/types';
 
 // Constantes de apellidos
@@ -21,6 +23,7 @@ type ViewState = 'login' | 'lobby' | 'game';
 
 export default function Home() {
     const { isConnected, gameState, roomsList, actions, socket } = useSocket();
+    const { session, saveSession, updateSession, clearSession } = useSessionStorage();
 
     // Estados locales de UI
     const [view, setView] = useState<ViewState>('login');
@@ -34,29 +37,90 @@ export default function Home() {
 
     const [passwordPromptRoomId, setPasswordPromptRoomId] = useState<string | null>(null);
     const [joinPassword, setJoinPassword] = useState('');
+    const [hasReconnected, setHasReconnected] = useState(false);
+
+    // Restaurar sesión al cargar - SOLO UNA VEZ
+    useEffect(() => {
+        if (session && isConnected && !hasReconnected) {
+            setPlayerName(session.playerName);
+            setFullPlayerName(session.fullPlayerName);
+            setView(session.currentView);
+
+            // Si había una partida activa, intentar reconectar
+            if (session.roomId && session.currentView === 'game') {
+                actions.reconnectSession({ playerName: session.fullPlayerName, roomId: session.roomId });
+            } else if (session.currentView === 'lobby') {
+                actions.refreshRooms();
+            }
+
+            setHasReconnected(true);
+        }
+    }, [session, isConnected, hasReconnected]);
 
     // Efecto para cambiar a vista de juego cuando el servidor nos une
     useEffect(() => {
         if (gameState?.roomId) {
             setView('game');
+            // Guardar en sesión
+            updateSession({ currentView: 'game', roomId: gameState.roomId });
         } else if (view === 'game' && !gameState) {
             // Si estábamos en juego y volvemos a null, volver al lobby
-            setView('lobby');
+            // Pero solo si no estamos esperando una reconexión inicial
+            if (hasReconnected) {
+                setView('lobby');
+                updateSession({ currentView: 'lobby', roomId: undefined });
+            }
         }
-    }, [gameState]);
+    }, [gameState, view, hasReconnected]);
+
+    // Listener para errores de socket que deben expulsar al lobby
+    useEffect(() => {
+        if (!socket) return;
+
+        const handleError = (msg: string) => {
+            if (msg === 'La partida ya no existe' || msg === 'No se pudo reconectar a la partida') {
+                setView('lobby');
+                updateSession({ currentView: 'lobby', roomId: undefined });
+            }
+        };
+
+        socket.on('error', handleError);
+        return () => {
+            socket.off('error', handleError);
+        };
+    }, [socket, updateSession]);
 
     const handleLogin = (e: React.FormEvent) => {
         e.preventDefault();
         if (playerName) {
             // Generar apellido aleatorio
             const randomSurname = SURNAMES[Math.floor(Math.random() * SURNAMES.length)];
-            setFullPlayerName(`${playerName} ${randomSurname}`);
+            const fullName = `${playerName} ${randomSurname}`;
+            setFullPlayerName(fullName);
+
+            // Guardar sesión
+            saveSession({
+                playerName,
+                fullPlayerName: fullName,
+                currentView: 'lobby'
+            });
 
             setView('lobby');
             actions.refreshRooms();
         }
     };
 
+    const handleLogout = () => {
+        clearSession();
+        setView('login');
+        setPlayerName('');
+        setFullPlayerName('');
+        // Si está en una partida, salir
+        if (gameState?.roomId) {
+            actions.leaveGame();
+        }
+    };
+
     const handleCreateGame = (e: React.FormEvent) => {
         e.preventDefault();
         actions.createGame(fullPlayerName, createConfig.maxPlayers, createConfig.password);
@@ -149,8 +213,9 @@ export default function Home() {
         return (
             <GameBoard
                 gameState={gameState}
-                currentPlayerId={socket.id}
+                currentPlayerId={socket.id || ''}
                 actions={actions}
+                fullPlayerName={fullPlayerName}
             />
         );
     }
@@ -178,9 +243,12 @@ export default function Home() {
                     </h1>
                 </div>
                 {view === 'lobby' && (
-                    <div className="flex items-center gap-4 bg-black/50 px-4 py-2 rounded border border-white/10">
+                    <div className="flex items-center gap-3 bg-black/50 px-4 py-2 rounded border border-white/10">
-                        <span className="text-sm text-gray-400">AGENTE:</span>
+                        <div className="flex flex-col">
-                        <span className="font-bold text-yellow-500">{fullPlayerName}</span>
+                            <span className="text-xs text-gray-400">AGENTE:</span>
+                            <span className="font-bold text-yellow-500">{fullPlayerName}</span>
+                        </div>
+                        <LogoutButton onClick={handleLogout} />
                     </div>
                 )}
             </div>

client/src/components/ExitGameButton.tsx

@@ -0,0 +1,79 @@
+import { motion } from 'framer-motion';
+import { useState } from 'react';
+
+interface ExitGameButtonProps {
+    onExit: () => void;
+    playerName: string;
+}
+
+export default function ExitGameButton({ onExit, playerName }: ExitGameButtonProps) {
+    const [showConfirm, setShowConfirm] = useState(false);
+
+    const handleConfirmExit = () => {
+        setShowConfirm(false);
+        onExit();
+    };
+
+    return (
+        <>
+            <motion.button
+                onClick={() => setShowConfirm(true)}
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+                className="fixed top-4 right-0 z-50 bg-gradient-to-l from-green-600 to-green-700 hover:from-green-500 hover:to-green-600 text-white rounded-l-lg px-2 py-3 shadow-lg border-2 border-green-500 border-r-0 transition-all hover:shadow-green-500/50"
+                title="Volver al lobby"
+            >
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    strokeWidth={3}
+                    stroke="currentColor"
+                    className="w-4 h-4"
+                >
+                    <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
+                    />
+                </svg>
+            </motion.button>
+
+            {/* Modal de confirmación */}
+            {showConfirm && (
+                <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/80 backdrop-blur-sm">
+                    <motion.div
+                        initial={{ scale: 0.9, opacity: 0 }}
+                        animate={{ scale: 1, opacity: 1 }}
+                        className="bg-zinc-900 p-6 rounded-lg border border-red-700/50 w-full max-w-md mx-4 shadow-2xl"
+                    >
+                        <h3 className="text-xl font-bold text-red-400 mb-4 uppercase flex items-center gap-2">
+                            ⚠️ Abandonar Partida
+                        </h3>
+                        <p className="text-gray-300 mb-2">
+                            ¿Estás seguro de que quieres abandonar la partida?
+                        </p>
+                        <p className="text-sm text-gray-400 mb-6">
+                            La partida se cerrará para todos los jugadores y se perderá todo el progreso.
+                        </p>
+
+                        <div className="flex gap-3">
+                            <button
+                                onClick={() => setShowConfirm(false)}
+                                className="flex-1 py-3 bg-gray-700 hover:bg-gray-600 text-white rounded font-bold uppercase text-sm transition-colors"
+                            >
+                                Cancelar
+                            </button>
+                            <button
+                                onClick={handleConfirmExit}
+                                className="flex-1 py-3 bg-red-900 hover:bg-red-800 text-white rounded font-bold uppercase text-sm transition-colors"
+                            >
+                                Salir
+                            </button>
+                        </div>
+                    </motion.div>
+                </div>
+            )}
+        </>
+    );
+}

client/src/components/GameBoard.tsx

@@ -5,14 +5,16 @@ import { GameState, GamePhase, Player, GAME_CONFIG, Faction } from '../../../sha
 import MissionReveal from './MissionReveal';
 import MissionResult from './MissionResult';
 import VictoryScreen from './VictoryScreen';
+import ExitGameButton from './ExitGameButton';
 
 interface GameBoardProps {
     gameState: GameState;
     currentPlayerId: string;
     actions: any;
+    fullPlayerName: string;
 }
 
-export default function GameBoard({ gameState, currentPlayerId, actions }: GameBoardProps) {
+export default function GameBoard({ gameState, currentPlayerId, actions, fullPlayerName }: GameBoardProps) {
     const [selectedTeam, setSelectedTeam] = useState<string[]>([]);
 
     // Hooks para FASE REVEAL ROLE
@@ -26,10 +28,10 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
     const [expandedMission, setExpandedMission] = useState<number | null>(null);
 
     // Estado para controlar el colapso del panel de jugadores
-    const [isPlayersCollapsed, setIsPlayersCollapsed] = useState(false);
+    const [isPlayersCollapsed, setIsPlayersCollapsed] = useState(true);
 
     // Estado para controlar el colapso del historial de misiones
-    const [isHistoryCollapsed, setIsHistoryCollapsed] = useState(false);
+    const [isHistoryCollapsed, setIsHistoryCollapsed] = useState(true);
 
 
     // Timer para avanzar automáticamente en REVEAL_ROLE
@@ -298,6 +300,14 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
 
     return (
         <div className="relative w-full h-screen flex flex-col overflow-hidden">
+            {/* Botón de Salir de la Partida - No mostrar en pantallas de victoria */}
+            {gameState.phase !== GamePhase.ALLIED_WIN && gameState.phase !== GamePhase.NAZIS_WIN && (
+                <ExitGameButton
+                    onExit={() => actions.leaveGame()}
+                    playerName={fullPlayerName}
+                />
+            )}
+
             {/* Fondo */}
             <div className="absolute inset-0 z-0 opacity-40">
                 <Image
@@ -887,7 +897,7 @@ export default function GameBoard({ gameState, currentPlayerId, actions }: GameB
                 {/* HISTÓRICO DE MISIONES (Esquina superior derecha) */}
                 {gameState.missionHistory.length > 0 && (
                     <motion.div
-                        className="fixed top-4 right-0 z-50"
+                        className="fixed top-[60px] right-0 z-50"
                         initial={false}
                         animate={{
                             x: isHistoryCollapsed ? '0%' : '0%'
@@ -986,7 +996,7 @@ function VotingTimer() {
     }, [timeLeft]);
 
     return (
-        <div className="fixed top-5 left-5 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">
+        <div className="mx-auto my-2 bg-gray-900/90 text-white w-20 h-20 rounded-full flex items-center justify-center border-4 border-gray-500 text-3xl font-bold font-mono shadow-xl relative z-20">
             {timeLeft}
         </div>
     );

client/src/components/LogoutButton.tsx

@@ -0,0 +1,32 @@
+import { motion } from 'framer-motion';
+
+interface LogoutButtonProps {
+    onClick: () => void;
+}
+
+export default function LogoutButton({ onClick }: LogoutButtonProps) {
+    return (
+        <motion.button
+            onClick={onClick}
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+            className="bg-red-900/80 hover:bg-red-800 text-white p-2 rounded-full border border-red-700/50 backdrop-blur-sm shadow-lg transition-all"
+            title="Salir del juego"
+        >
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth={2.5}
+                stroke="currentColor"
+                className="w-5 h-5"
+            >
+                <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M5.636 5.636a9 9 0 1012.728 0M12 3v9"
+                />
+            </svg>
+        </motion.button>
+    );
+}

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>

client/src/hooks/useSessionStorage.ts

@@ -0,0 +1,53 @@
+import { useState, useEffect } from 'react';
+
+interface SessionData {
+    playerName: string;
+    fullPlayerName: string;
+    currentView: 'login' | 'lobby' | 'game';
+    roomId?: string;
+}
+
+export function useSessionStorage() {
+    const [session, setSession] = useState<SessionData | null>(null);
+
+    // Cargar sesión al iniciar
+    useEffect(() => {
+        const savedSession = localStorage.getItem('resistencia_session');
+        if (savedSession) {
+            try {
+                const parsed = JSON.parse(savedSession);
+                setSession(parsed);
+            } catch (e) {
+                console.error('Error parsing session:', e);
+                localStorage.removeItem('resistencia_session');
+            }
+        }
+    }, []);
+
+    // Guardar sesión
+    const saveSession = (data: SessionData) => {
+        localStorage.setItem('resistencia_session', JSON.stringify(data));
+        setSession(data);
+    };
+
+    // Actualizar sesión parcialmente
+    const updateSession = (partial: Partial<SessionData>) => {
+        if (session) {
+            const updated = { ...session, ...partial };
+            saveSession(updated);
+        }
+    };
+
+    // Limpiar sesión
+    const clearSession = () => {
+        localStorage.removeItem('resistencia_session');
+        setSession(null);
+    };
+
+    return {
+        session,
+        saveSession,
+        updateSession,
+        clearSession
+    };
+}

client/src/hooks/useSocket.ts

@@ -50,6 +50,12 @@ export const useSocket = () => {
             setGameState(null); // Resetear estado para volver al lobby
         });
 
+        // Manejar cuando un jugador abandona la partida
+        socketInstance.on('player_left_game', ({ playerName }: { playerName: string }) => {
+            console.log(`${playerName} ha abandonado la partida`);
+            // El servidor ya habrá cerrado la partida, solo mostramos mensaje
+        });
+
         setSocket(socketInstance);
 
         return () => {
@@ -90,6 +96,14 @@ export const useSocket = () => {
         socket?.emit('assassin_kill', { roomId: gameState?.roomId, targetId });
     };
 
+    const leaveGame = () => {
+        socket?.emit('leave_game', { roomId: gameState?.roomId });
+    };
+
+    const reconnectSession = (sessionData: { playerName: string; roomId?: string }) => {
+        socket?.emit('reconnect_session', sessionData);
+    };
+
     return {
         socket,
         isConnected,
@@ -105,6 +119,8 @@ export const useSocket = () => {
             voteMission,
             voteLeader: (approve: boolean) => socket?.emit('vote_leader', { roomId: gameState?.roomId, approve }),
             assassinKill,
+            leaveGame,
+            reconnectSession,
             finishIntro: () => socket?.emit('finish_intro', { roomId: gameState?.roomId }),
             finishReveal: () => socket?.emit('finish_reveal', { roomId: gameState?.roomId }),
             finishRollCall: () => socket?.emit('finish_roll_call', { roomId: gameState?.roomId }),

docker-compose.yml

@@ -5,6 +5,8 @@ services:
     build:
       context: .
       dockerfile: client/Dockerfile
+      args:
+        - NEXT_PUBLIC_API_URL=${NEXT_PUBLIC_API_URL:-http://localhost:4000}
     ports:
       - "3000:3000"
     volumes:
@@ -12,7 +14,7 @@ services:
       - ./shared:/app/shared
       - /app/client/node_modules
     environment:
-      - NEXT_PUBLIC_API_URL=http://localhost:4000
+      - NEXT_PUBLIC_API_URL=${NEXT_PUBLIC_API_URL:-http://localhost:4000}
     depends_on:
       - server
     networks:
@@ -32,8 +34,8 @@ services:
       - /app/server/node_modules
     environment:
       - PORT=4000
-      - DATABASE_URL=postgresql://postgres:password@db:5432/resistencia
+      - DATABASE_URL=${DATABASE_URL:-postgresql://postgres:password@db:5432/resistencia}
-      - CORS_ORIGIN=http://localhost:3000
+      - CORS_ORIGIN=${CORS_ORIGIN:-http://localhost:3000}
     depends_on:
       - db
     networks:

docker-compose_prod.yml

@@ -5,6 +5,8 @@ services:
     build:
       context: .
       dockerfile: client/Dockerfile
+      args:
+        - NEXT_PUBLIC_API_URL=${NEXT_PUBLIC_API_URL:-https://api.franciaocupada.martivich.es}
     ports:
       - "3000:3000"
     volumes:
@@ -12,7 +14,7 @@ services:
       - ./shared:/app/shared
       - /app/client/node_modules
     environment:
-      - NEXT_PUBLIC_API_URL=https://api.franciaocupada.martivich.es
+      - NEXT_PUBLIC_API_URL=${NEXT_PUBLIC_API_URL:-https://api.franciaocupada.martivich.es}
     depends_on:
       - server
     networks:
@@ -32,8 +34,8 @@ services:
       - /app/server/node_modules
     environment:
       - PORT=4000
-      - DATABASE_URL=postgresql://postgres:password@db:5432/resistencia
+      - DATABASE_URL=${DATABASE_URL:-postgresql://postgres:password@db:5432/resistencia}
-      - CORS_ORIGIN=https://franciaocupada.martivich.es
+      - CORS_ORIGIN=${CORS_ORIGIN:-https://franciaocupada.martivich.es}
     depends_on:
       - db
     networks:

server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "resistencia-server",
-  "version": "1.0.0",
+  "version": "1.3.0",
   "description": "Backend para el juego La Resistencia",
   "main": "src/index.ts",
   "scripts": {
@@ -12,9 +12,11 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@types/pg": "^8.16.0",
     "cors": "^2.8.5",
     "dotenv": "^16.3.1",
     "express": "^4.18.2",
+    "pg": "^8.16.3",
     "socket.io": "^4.7.2"
   },
   "devDependencies": {

server/src/db.ts

@@ -0,0 +1,106 @@
+import { Pool } from 'pg';
+import dotenv from 'dotenv';
+
+dotenv.config();
+
+const pool = new Pool({
+    connectionString: process.env.DATABASE_URL || 'postgresql://postgres:password@db:5432/resistencia',
+});
+
+// Inicializar base de datos
+export const initDb = async () => {
+    const client = await pool.connect();
+    try {
+        await client.query(`
+            CREATE TABLE IF NOT EXISTS game_logs (
+                id SERIAL PRIMARY KEY,
+                room_id UUID NOT NULL,
+                room_name TEXT NOT NULL,
+                host_name TEXT NOT NULL,
+                players TEXT NOT NULL, -- Lista de nombres separada por comas
+                max_players INTEGER NOT NULL,
+                created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+                finished_at TIMESTAMP,
+                winner TEXT, -- 'resistance' o 'spies'
+                status TEXT DEFAULT 'active' -- 'active', 'finished', 'aborted'
+            );
+        `);
+
+        // Migration: Add new columns if they don't exist
+        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 matches_played INTEGER DEFAULT 1,
+            ADD COLUMN IF NOT EXISTS match_results TEXT DEFAULT '';
+        `);
+
+        console.log('[DB] Base de datos inicializada correctamente');
+    } catch (err) {
+        console.error('[DB] Error al inicializar base de datos:', err);
+    } finally {
+        client.release();
+    }
+};
+
+// Registrar inicio de partida
+export const logGameStart = async (roomId: string, roomName: string, hostName: string, maxPlayers: number) => {
+    try {
+        await pool.query(
+            'INSERT INTO game_logs (room_id, room_name, host_name, players, max_players, status) VALUES ($1, $2, $3, $4, $5, $6)',
+            [roomId, roomName, hostName, hostName, maxPlayers, 'active']
+        );
+    } catch (err) {
+        console.error('[DB] Error al registrar inicio de partida:', err);
+    }
+};
+
+// Actualizar lista de jugadores en tiempo real (opcional, pero útil para el histórico final)
+export const updateGamePlayers = async (roomId: string, players: string[]) => {
+    try {
+        await pool.query(
+            'UPDATE game_logs SET players = $1 WHERE room_id = $2 AND status = $3',
+            [players.join(', '), roomId, 'active']
+        );
+    } catch (err) {
+        console.error('[DB] Error al actualizar jugadores en log:', err);
+    }
+};
+
+// Registrar fin de partida
+export const logGameEnd = async (
+    roomId: string,
+    winner: string | null = null,
+    aborted: boolean = false,
+    roundsPlayed: number = 0,
+    roundResults: boolean[] = [],
+    matchesPlayed: number = 1,
+    matchResults: string[] = []
+) => {
+    try {
+        // Convert boolean[] to string "true,false,true"
+        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, matches_played = $5, match_results = $6 WHERE room_id = $7 AND status = $8',
+            [winner, aborted ? 'aborted' : 'finished', roundsPlayed, roundResultsStr, matchesPlayed, matchResultsStr, roomId, 'active']
+        );
+    } catch (err) {
+        console.error('[DB] Error al registrar fin de partida:', err);
+    }
+};
+
+// Obtener historial
+export const getGameHistory = async () => {
+    try {
+        const res = await pool.query('SELECT * FROM game_logs ORDER BY created_at DESC LIMIT 50');
+        return res.rows;
+    } catch (err) {
+        console.error('[DB] Error al obtener historial:', err);
+        return [];
+    }
+};
+
+export default pool;

server/src/index.ts

@@ -6,21 +6,38 @@ import dotenv from 'dotenv';
 import crypto from 'crypto';
 import { Game } from './models/Game';
 import { GamePhase } from '../../shared/types';
+import { initDb, logGameStart, logGameEnd, updateGamePlayers, getGameHistory } from './db';
 
 dotenv.config();
 
+// Inicializar DB
+initDb();
+
 const app = express();
 const port = process.env.PORT || 4000;
 
+const allowedOrigins = [
+    process.env.CORS_ORIGIN || "http://localhost:3000",
+    "http://localhost:3000",
+    "http://127.0.0.1:3000",
+    "http://192.168.1.131:3000"
+];
+
 app.use(cors({
-    origin: process.env.CORS_ORIGIN || "http://localhost:3000",
+    origin: (origin, callback) => {
+        if (!origin || allowedOrigins.includes(origin)) {
+            callback(null, true);
+        } else {
+            callback(new Error('Not allowed by CORS'));
+        }
+    },
     methods: ["GET", "POST"]
 }));
 
 const server = http.createServer(app);
 const io = new Server(server, {
     cors: {
-        origin: process.env.CORS_ORIGIN || "http://localhost:3000",
+        origin: allowedOrigins,
         methods: ["GET", "POST"]
     }
 });
@@ -66,6 +83,31 @@ const generateRoomName = () => {
     return `${MISSION_NAMES[idx]} #${suffix}`;
 };
 
+const getAdminData = async () => {
+    const activeGamesData = Object.values(games).map(g => ({
+        id: g.state.roomId,
+        name: g.roomName,
+        status: g.state.phase,
+        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 }))
+    }));
+
+    const history = await getGameHistory();
+
+    return {
+        activeGames: activeGamesData,
+        history: history
+    };
+};
+
+const broadcastAdminUpdate = async () => {
+    const data = await getAdminData();
+    io.to('admin-room').emit('admin_data', data);
+};
+
 io.on('connection', (socket) => {
     console.log('Cliente conectado:', socket.id);
 
@@ -90,6 +132,10 @@ io.on('connection', (socket) => {
 
         // Actualizar lista a todos
         io.emit('rooms_list', getRoomsList());
+
+        // LOG EN DB
+        logGameStart(roomId, roomName, hostName, maxPlayers);
+        broadcastAdminUpdate();
     });
 
     // B. UNIRSE A SALA
@@ -126,6 +172,10 @@ io.on('connection', (socket) => {
 
         // Actualizar lista de salas (cambió contador de jugadores)
         io.emit('rooms_list', getRoomsList());
+
+        // ACTUALIZAR LOG EN DB
+        updateGamePlayers(roomId, game.state.players.map(p => p.name));
+        broadcastAdminUpdate();
     });
 
     // C. REFRESCAR LISTA
@@ -298,14 +348,165 @@ io.on('connection', (socket) => {
 
             // Desconectar a todos los jugadores de la sala
             io.in(roomId).socketsLeave(roomId);
+
+            // LOG EN DB - Incluir resultado de la partida actual en matchResults
+            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();
         }
     });
 
-    // 9. DESCONEXIÓN
+    // 8. ABANDONAR PARTIDA (cualquier jugador)
+    socket.on('leave_game', ({ roomId }) => {
+        const game = games[roomId];
+        if (game) {
+            // Encontrar el jugador que se va
+            const leavingPlayer = game.state.players.find(p => p.id === socket.id);
+            const playerName = leavingPlayer?.name || 'Un jugador';
+
+            // Notificar a todos los jugadores
+            io.to(roomId).emit('player_left_game', { playerName });
+            io.to(roomId).emit('game_finalized');
+
+            // Eliminar la partida de la base de datos
+            delete games[roomId];
+
+            // Limpiar timer si existe
+            if (voteTimers[roomId]) {
+                clearTimeout(voteTimers[roomId]);
+                delete voteTimers[roomId];
+            }
+
+            // Actualizar lista de salas
+            io.emit('rooms_list', getRoomsList());
+
+            // Desconectar a todos de la sala
+            io.in(roomId).socketsLeave(roomId);
+
+            // LOG EN DB COMO ABORTADA
+            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.`);
+        }
+    });
+
+    // 9. RECONECTAR SESIÓN
+    socket.on('reconnect_session', ({ playerName, roomId }) => {
+        console.log(`[RECONNECT_SESSION] Intento de reconexión: ${playerName} a sala ${roomId}`);
+
+        if (roomId) {
+            const game = games[roomId];
+            if (game) {
+                // Buscar si el jugador existe en la partida
+                const existingPlayer = game.state.players.find(p => p.name === playerName);
+
+                if (existingPlayer) {
+                    // Actualizar el socket ID del jugador
+                    existingPlayer.id = socket.id;
+
+                    // Unir al socket a la sala
+                    socket.join(roomId);
+
+                    // Enviar estado actualizado
+                    socket.emit('game_joined', { roomId, state: game.state });
+                    io.to(roomId).emit('game_state', game.state);
+
+                    console.log(`[RECONNECT_SESSION] ${playerName} reconectado exitosamente a ${roomId}`);
+                } else {
+                    console.log(`[RECONNECT_SESSION] Jugador ${playerName} no encontrado en partida ${roomId}`);
+                    socket.emit('error', 'No se pudo reconectar a la partida');
+                }
+            } else {
+                console.log(`[RECONNECT_SESSION] Partida ${roomId} no existe`);
+                socket.emit('error', 'La partida ya no existe');
+            }
+        }
+    });
+
+    // 10. FINALIZAR Y EXPULSAR JUGADORES (solo host)
+    socket.on('finalize_game', ({ roomId }) => {
+        const game = games[roomId];
+        if (game && game.hostId === socket.id) {
+            // Notificar a todos los jugadores que la partida ha sido finalizada
+            io.to(roomId).emit('game_finalized');
+
+            // Eliminar la partida inmediatamente del registro
+            delete games[roomId];
+
+            // Actualizar lista de salas para todos los clientes
+            io.emit('rooms_list', getRoomsList());
+
+            // Desconectar a todos los jugadores de la sala
+            io.in(roomId).socketsLeave(roomId);
+        }
+    });
+
+    // 11. DESCONEXIÓN
     socket.on('disconnect', () => {
         // Buscar en qué partida estaba y sacarlo (opcional, por ahora solo notificamos)
         console.log('Desconectado:', socket.id);
-        // TODO: Eliminar de la partida si está en LOBBY para liberar hueco
+    });
+
+    // --- ADMIN COMMANDS ---
+
+    socket.on('admin_get_data', async () => {
+        console.log('[ADMIN] Agente administrativo conectado');
+        socket.join('admin-room');
+        const data = await getAdminData();
+        socket.emit('admin_data', data);
+    });
+
+    socket.on('admin_close_game', async ({ roomId }) => {
+        const game = games[roomId];
+        if (game) {
+            io.to(roomId).emit('game_finalized');
+            delete games[roomId];
+
+            if (voteTimers[roomId]) {
+                clearTimeout(voteTimers[roomId]);
+                delete voteTimers[roomId];
+            }
+
+            io.emit('rooms_list', getRoomsList());
+            io.in(roomId).socketsLeave(roomId);
+
+            // Log como abortada por admin
+            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();
+        }
+    });
+
+    socket.on('admin_kick_player', ({ roomId, targetSocketId }) => {
+        const game = games[roomId];
+        if (game) {
+            const playerIndex = game.state.players.findIndex(p => p.id === targetSocketId);
+            if (playerIndex !== -1) {
+                const playerName = game.state.players[playerIndex].name;
+                game.state.players.splice(playerIndex, 1);
+
+                // Notificar al jugador expulsado
+                io.to(targetSocketId).emit('game_finalized');
+                const targetSocket = io.sockets.sockets.get(targetSocketId);
+                targetSocket?.leave(roomId);
+
+                // Notificar al resto
+                io.to(roomId).emit('player_left_game', { playerName: `${playerName} (Expulsado)` });
+                io.to(roomId).emit('game_state', game.state);
+
+                io.emit('rooms_list', getRoomsList());
+                updateGamePlayers(roomId, game.state.players.map(p => p.name));
+
+                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];

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)