feat: Implementar Dashboard de Administración y Historial de Partidas

- Crear Dashboard en /dashboard con protección por contraseña
- Integrar PostgreSQL para registro histórico de partidas (game_logs)
- Permitir forzar cierre de partidas y expulsar jugadores desde Dashboard
- Diseño premium e integración en tiempo real vía Sockets

client/src/app/dashboard/page.tsx

@@ -0,0 +1,272 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { useSocket } from '../../hooks/useSocket';
+import { Shield, Users, Gamepad2, XCircle, LogOut, Clock, History, AlertTriangle, UserMinus } from 'lucide-react';
+
+const ADMIN_PASSWORD = "admin123"; // En producción esto debería estar en .env y validarse en servidor
+
+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('');
+
+    // Cargar datos
+    useEffect(() => {
+        if (isAuthenticated && socket) {
+            socket.emit('admin_get_data');
+
+            socket.on('admin_data', (data: any) => {
+                setActiveGames(data.activeGames);
+                setGameHistory(data.history);
+            });
+
+            socket.on('admin_action_success', () => {
+                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);
+            setError('');
+        } else {
+            setError('Acceso Denegado: Contraseña incorrecta');
+        }
+    };
+
+    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 });
+        }
+    };
+
+    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, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    className="bg-[#121216] border border-white/10 p-8 rounded-2xl w-full max-w-md shadow-2xl"
+                >
+                    <div className="flex justify-center mb-6 text-red-500">
+                        <Shield size={48} />
+                    </div>
+                    <h1 className="text-2xl font-bold text-white text-center mb-2 uppercase tracking-tight">Acceso Restringido</h1>
+                    <p className="text-gray-400 text-center text-sm mb-8">Introduce la clave de acceso al Puesto de Mando</p>
+
+                    <form onSubmit={handleLogin} className="space-y-4">
+                        <div>
+                            <input
+                                type="password"
+                                value={password}
+                                onChange={(e) => setPassword(e.target.value)}
+                                placeholder="Clave de Operaciones"
+                                className="w-full bg-[#1a1a20] border border-white/5 rounded-xl px-5 py-4 text-white focus:outline-none focus:ring-2 focus:ring-red-500/50 transition-all placeholder:text-gray-600"
+                            />
+                        </div>
+                        {error && <p className="text-red-500 text-xs font-semibold text-center mt-2">{error}</p>}
+                        <button
+                            type="submit"
+                            className="w-full bg-red-600 hover:bg-red-500 text-white font-bold py-4 rounded-xl shadow-lg shadow-red-600/20 transition-all uppercase tracking-widest text-sm"
+                        >
+                            Autenticar
+                        </button>
+                    </form>
+                </motion.div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="min-h-screen bg-[#0a0a0c] text-white p-4 md:p-8 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-10 gap-4">
+                <div>
+                    <div className="flex items-center gap-3 text-red-500 mb-2">
+                        <Shield size={24} />
+                        <span className="text-xs font-black uppercase tracking-[0.3em] opacity-70">S.S.O Dashboard</span>
+                    </div>
+                    <h1 className="text-4xl font-extrabold tracking-tighter uppercase italic">Centro de Operaciones</h1>
+                </div>
+
+                <div className="flex items-center gap-6 bg-[#121216] border border-white/5 px-6 py-3 rounded-2xl">
+                    <div className="flex flex-col items-end">
+                        <span className="text-[10px] text-gray-500 uppercase font-bold tracking-wider">Servidor</span>
+                        <div className="flex items-center gap-2">
+                            <div className={`w-2 h-2 rounded-full ${isConnected ? 'bg-green-500 shadow-[0_0_10px_rgba(34,197,94,0.5)]' : 'bg-red-500'}`}></div>
+                            <span className="text-xs font-mono font-bold tracking-widest">{isConnected ? 'ONLINE' : 'OFFLINE'}</span>
+                        </div>
+                    </div>
+                    <button
+                        onClick={() => setIsAuthenticated(false)}
+                        className="p-2 hover:bg-white/5 rounded-lg transition-colors text-gray-400 hover:text-white"
+                    >
+                        <LogOut size={20} />
+                    </button>
+                </div>
+            </header>
+
+            <main className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-3 gap-8 text-gray-400">
+
+                {/* Panel Central: Partidas Activas */}
+                <div className="lg:col-span-2 space-y-8">
+                    <section>
+                        <div className="flex items-center justify-between mb-6">
+                            <h2 className="text-lg font-bold text-white uppercase tracking-wider flex items-center gap-2">
+                                <Gamepad2 size={20} className="text-red-500" />
+                                Operaciones en Curso
+                            </h2>
+                            <span className="bg-red-500/10 text-red-500 px-3 py-1 rounded-full text-[10px] uppercase font-black">
+                                {activeGames.length} Activas
+                            </span>
+                        </div>
+
+                        <div className="grid gap-4">
+                            <AnimatePresence>
+                                {activeGames.length === 0 ? (
+                                    <div className="bg-[#121216]/50 border border-white/5 rounded-2xl p-12 text-center">
+                                        <Clock size={48} className="mx-auto mb-4 opacity-10" />
+                                        <p className="text-sm font-medium opacity-30">No hay misiones ejecutándose en este momento</p>
+                                    </div>
+                                ) : (
+                                    activeGames.map((game: any) => (
+                                        <motion.div
+                                            key={game.id}
+                                            layout
+                                            initial={{ opacity: 0, scale: 0.98 }}
+                                            animate={{ opacity: 1, scale: 1 }}
+                                            exit={{ opacity: 0, scale: 0.98 }}
+                                            className="bg-[#121216] border border-white/5 rounded-2xl p-6 hover:border-red-500/30 transition-all group relative overflow-hidden"
+                                        >
+                                            <div className="absolute top-0 right-0 w-32 h-32 bg-red-500/5 blur-[60px] pointer-events-none"></div>
+
+                                            <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 relative z-10">
+                                                <div>
+                                                    <h3 className="text-xl font-black text-white italic mb-1 uppercase leading-none">{game.name}</h3>
+                                                    <div className="flex items-center gap-3 text-xs">
+                                                        <span className="flex items-center gap-1 opacity-60">
+                                                            <Users size={12} />
+                                                            {game.currentPlayers}/{game.maxPlayers} Agentes
+                                                        </span>
+                                                        <span className="opacity-60">•</span>
+                                                        <span className="text-red-400 font-bold uppercase tracking-widest">{game.status}</span>
+                                                    </div>
+                                                </div>
+
+                                                <div className="flex items-center gap-2">
+                                                    <button
+                                                        onClick={() => closeGame(game.id)}
+                                                        className="px-4 py-2 bg-red-600/10 hover:bg-red-600 text-red-500 hover:text-white rounded-xl text-[10px] font-black uppercase tracking-widest transition-all border border-red-500/20"
+                                                    >
+                                                        Finalizar Misión
+                                                    </button>
+                                                </div>
+                                            </div>
+
+                                            {/* Jugadores en esta partida */}
+                                            <div className="mt-6 pt-6 border-t border-white/5">
+                                                <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                                                    {game.players.map((player: any) => (
+                                                        <div key={player.id} className="flex items-center justify-between bg-black/20 p-3 rounded-xl border border-white/5">
+                                                            <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-xs">
+                                                                    {player.name[0]}
+                                                                </div>
+                                                                <div>
+                                                                    <p className="text-sm font-bold text-white leading-none mb-1">{player.name}</p>
+                                                                    <p className="text-[10px] opacity-40 font-mono">{player.id.slice(0, 8)}</p>
+                                                                </div>
+                                                            </div>
+                                                            <button
+                                                                onClick={() => kickPlayer(game.id, player.id)}
+                                                                className="p-2 text-gray-600 hover:text-red-500 transition-colors"
+                                                                title="Expulsar jugador"
+                                                            >
+                                                                <UserMinus size={16} />
+                                                            </button>
+                                                        </div>
+                                                    ))}
+                                                </div>
+                                            </div>
+                                        </motion.div>
+                                    ))
+                                )}
+                            </AnimatePresence>
+                        </div>
+                    </section>
+                </div>
+
+                {/* Lateral: Historial */}
+                <div className="space-y-8">
+                    <section>
+                        <div className="flex items-center gap-3 mb-6">
+                            <h2 className="text-lg font-bold text-white uppercase tracking-wider flex items-center gap-2">
+                                <History size={20} className="text-gray-500" />
+                                Archivo de Guerra
+                            </h2>
+                        </div>
+
+                        <div className="space-y-4 max-h-[70vh] overflow-y-auto pr-2 custom-scrollbar">
+                            {gameHistory.length === 0 ? (
+                                <div className="text-center py-10 opacity-20">
+                                    <p className="text-sm italic">No hay registros históricos</p>
+                                </div>
+                            ) : (
+                                gameHistory.map((entry: any) => (
+                                    <div key={entry.id} className="bg-[#121216] border border-white/5 p-4 rounded-xl">
+                                        <div className="flex justify-between items-start mb-2">
+                                            <h4 className="text-sm font-bold text-gray-200 uppercase tracking-tight">{entry.room_name}</h4>
+                                            <span className={`text-[10px] font-black uppercase px-2 py-0.5 rounded ${entry.winner === 'resistance' ? 'bg-green-500/20 text-green-500' :
+                                                    entry.winner === 'spies' ? 'bg-red-500/20 text-red-500' : 'bg-gray-500/20 text-gray-500'
+                                                }`}>
+                                                {entry.winner || 'Abortada'}
+                                            </span>
+                                        </div>
+                                        <div className="space-y-1 text-[10px] opacity-50 font-medium">
+                                            <p className="flex items-center gap-1"><Users size={10} /> {entry.players}</p>
+                                            <p className="flex items-center gap-1"><Clock size={10} /> {new Date(entry.created_at).toLocaleString()}</p>
+                                        </div>
+                                    </div>
+                                ))
+                            )}
+                        </div>
+                    </section>
+                </div>
+            </main>
+
+            <style jsx global>{`
+                .custom-scrollbar::-webkit-scrollbar {
+                    width: 4px;
+                }
+                .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>
+    );
+}

server/package.json

@@ -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": {
@@ -25,4 +27,4 @@
     "ts-node": "^10.9.1",
     "typescript": "^5.3.2"
   }
-}
+}

server/src/db.ts

@@ -0,0 +1,83 @@
+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'
+            );
+        `);
+        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) => {
+    try {
+        await pool.query(
+            'UPDATE game_logs SET finished_at = CURRENT_TIMESTAMP, winner = $1, status = $2 WHERE room_id = $3 AND status = $4',
+            [winner, aborted ? 'aborted' : 'finished', 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,9 +6,13 @@ 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;
 
@@ -90,6 +94,9 @@ io.on('connection', (socket) => {
 
         // Actualizar lista a todos
         io.emit('rooms_list', getRoomsList());
+
+        // LOG EN DB
+        logGameStart(roomId, roomName, hostName, maxPlayers);
     });
 
     // B. UNIRSE A SALA
@@ -126,6 +133,9 @@ 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));
     });
 
     // C. REFRESCAR LISTA
@@ -298,6 +308,9 @@ io.on('connection', (socket) => {
 
             // Desconectar a todos los jugadores de la sala
             io.in(roomId).socketsLeave(roomId);
+
+            // LOG EN DB
+            logGameEnd(roomId, game.state.winner, false);
         }
     });
 
@@ -328,6 +341,9 @@ io.on('connection', (socket) => {
             // Desconectar a todos de la sala
             io.in(roomId).socketsLeave(roomId);
 
+            // LOG EN DB COMO ABORTADA
+            logGameEnd(roomId, null, true);
+
             console.log(`[LEAVE_GAME] ${playerName} abandonó la partida ${roomId}. Partida eliminada.`);
         }
     });
@@ -387,7 +403,71 @@ io.on('connection', (socket) => {
     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 () => {
+        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,
+            players: g.state.players.map(p => ({ id: p.id, name: p.name }))
+        }));
+
+        const history = await getGameHistory();
+
+        socket.emit('admin_data', {
+            activeGames: activeGamesData,
+            history: history
+        });
+    });
+
+    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
+            await logGameEnd(roomId, null, true);
+            socket.emit('admin_action_success');
+        }
+    });
+
+    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');
+            }
+        }
     });
 });