marti/FranciaOcupada
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Dashboard de Admin 2.0 - Persistencia y Actualizaciones en Tiempo Real

Browse Source 
- Implementar persistencia de sesión en Dashboard mediante localStorage
- Añadir botón de desconexión (Logout)
- Implementar sistema de broadcast para que el Dashboard se actualice automáticamente ante cualquier cambio en el servidor
- Mejorar diseño táctico del dashboard con visor de estadísticas rápidas
This commit is contained in:
Resistencia Dev
2025-12-22 18:24:25 +01:00
parent 1548309753
commit 91da241423
2 changed files with 234 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

315
client/src/app/dashboard/page.tsx
View File

@@ -3,9 +3,9 @@
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion'; import { motion, AnimatePresence } from 'framer-motion';
import { useSocket } from '../../hooks/useSocket'; import { useSocket } from '../../hooks/useSocket';
import { Shield, Users, Gamepad2, XCircle, LogOut, Clock, History, AlertTriangle, UserMinus } from 'lucide-react'; import { Shield, Users, Gamepad2, LogOut, Clock, History, UserMinus, Key } from 'lucide-react';
const ADMIN_PASSWORD = "admin123"; // En producción esto debería estar en .env y validarse en servidor const ADMIN_PASSWORD = "admin123";
export default function Dashboard() { export default function Dashboard() {
const { socket, isConnected } = useSocket(); const { socket, isConnected } = useSocket();
@@ -15,17 +15,29 @@ export default function Dashboard() {
const [gameHistory, setGameHistory] = useState<any[]>([]); const [gameHistory, setGameHistory] = useState<any[]>([]);
const [error, setError] = useState(''); const [error, setError] = useState('');
// Cargar datos // 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(() => { useEffect(() => {
if (isAuthenticated && socket) { if (isAuthenticated && socket) {
// Solicitar datos iniciales
socket.emit('admin_get_data'); socket.emit('admin_get_data');
// Escuchar actualizaciones (el servidor emite a admin-room)
socket.on('admin_data', (data: any) => { socket.on('admin_data', (data: any) => {
console.log('[ADMIN] Datos recibidos:', data);
setActiveGames(data.activeGames); setActiveGames(data.activeGames);
setGameHistory(data.history); setGameHistory(data.history);
}); });
socket.on('admin_action_success', () => { socket.on('admin_action_success', () => {
console.log('[ADMIN] Acción realizada con éxito');
socket.emit('admin_get_data'); socket.emit('admin_get_data');
}); });
@@ -40,12 +52,19 @@ export default function Dashboard() {
e.preventDefault(); e.preventDefault();
if (password === ADMIN_PASSWORD) { if (password === ADMIN_PASSWORD) {
setIsAuthenticated(true); setIsAuthenticated(true);
localStorage.setItem('resistencia_admin_session', 'active');
setError(''); setError('');
} else { } else {
setError('Acceso Denegado: Contraseña incorrecta'); setError('Acceso Denegado: Contraseña incorrecta');
} }
}; };
const handleLogout = () => {
localStorage.removeItem('resistencia_admin_session');
setIsAuthenticated(false);
setPassword('');
};
const closeGame = (roomId: string) => { const closeGame = (roomId: string) => {
if (confirm('¿Seguro que quieres forzar el cierre de esta partida?')) { if (confirm('¿Seguro que quieres forzar el cierre de esta partida?')) {
socket?.emit('admin_close_game', { roomId }); socket?.emit('admin_close_game', { roomId });
@@ -62,32 +81,49 @@ export default function Dashboard() {
return ( return (
<div className="min-h-screen bg-[#0a0a0c] flex items-center justify-center p-4 font-['Inter',sans-serif]"> <div className="min-h-screen bg-[#0a0a0c] flex items-center justify-center p-4 font-['Inter',sans-serif]">
<motion.div <motion.div
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, scale: 1 }}
className="bg-[#121216] border border-white/10 p-8 rounded-2xl w-full max-w-md shadow-2xl" 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="flex justify-center mb-6 text-red-500"> <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>
<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 className="flex justify-center mb-8 relative">
<div> <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 <input
type="password" type="password"
autoFocus
value={password} value={password}
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
placeholder="Clave de Operaciones" placeholder="Introduce la contraseña"
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" 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> </div>
{error && <p className="text-red-500 text-xs font-semibold text-center mt-2">{error}</p>}
{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 <button
type="submit" 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" 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]"
> >
Autenticar Entrar en Sistema
</button> </button>
</form> </form>
</motion.div> </motion.div>
@@ -96,111 +132,133 @@ export default function Dashboard() {
} }
return ( return (
<div className="min-h-screen bg-[#0a0a0c] text-white p-4 md:p-8 font-['Inter',sans-serif]"> <div className="min-h-screen bg-[#0a0a0c] text-white p-4 md:p-10 font-['Inter',sans-serif]">
{/* Header */} {/* 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"> <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> <div className="space-y-1">
<div className="flex items-center gap-3 text-red-500 mb-2"> <div className="flex items-center gap-3 text-red-500">
<Shield size={24} /> <div className="p-2 bg-red-500/10 rounded-lg">
<span className="text-xs font-black uppercase tracking-[0.3em] opacity-70">S.S.O Dashboard</span> <Shield size={22} />
</div>
<span className="text-[10px] font-black uppercase tracking-[0.4em] opacity-80">Seguimiento de Operaciones</span>
</div> </div>
<h1 className="text-4xl font-extrabold tracking-tighter uppercase italic">Centro de Operaciones</h1> <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>
<div className="flex items-center gap-6 bg-[#121216] border border-white/5 px-6 py-3 rounded-2xl"> <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"> <div className="flex flex-col items-end">
<span className="text-[10px] text-gray-500 uppercase font-bold tracking-wider">Servidor</span> <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="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> <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-bold tracking-widest">{isConnected ? 'ONLINE' : 'OFFLINE'}</span> <span className="text-xs font-mono font-black tracking-widest">{isConnected ? 'OPERATIVO' : 'DESCONECTADO'}</span>
</div> </div>
</div> </div>
<div className="w-px h-8 bg-white/10 mx-2"></div>
<button <button
onClick={() => setIsAuthenticated(false)} onClick={handleLogout}
className="p-2 hover:bg-white/5 rounded-lg transition-colors text-gray-400 hover:text-white" 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={20} /> <LogOut size={16} className="group-hover:translate-x-1 transition-transform" />
Desconectar
</button> </button>
</div> </div>
</header> </header>
<main className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-3 gap-8 text-gray-400"> <main className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-10">
{/* Panel Central: Partidas Activas */} {/* Panel Latino: Estadísticas Rápidas */}
<div className="lg:col-span-2 space-y-8"> <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> <section>
<div className="flex items-center justify-between mb-6"> <div className="flex items-center gap-4 mb-8">
<h2 className="text-lg font-bold text-white uppercase tracking-wider flex items-center gap-2"> <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>
<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>
<div className="grid gap-4"> <div className="grid gap-6">
<AnimatePresence> <AnimatePresence mode="popLayout">
{activeGames.length === 0 ? ( {activeGames.length === 0 ? (
<div className="bg-[#121216]/50 border border-white/5 rounded-2xl p-12 text-center"> <motion.div
<Clock size={48} className="mx-auto mb-4 opacity-10" /> initial={{ opacity: 0 }}
<p className="text-sm font-medium opacity-30">No hay misiones ejecutándose en este momento</p> animate={{ opacity: 1 }}
</div> 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) => ( activeGames.map((game: any) => (
<motion.div <motion.div
key={game.id} key={game.id}
layout layout
initial={{ opacity: 0, scale: 0.98 }} initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, scale: 1 }} animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, scale: 0.98 }} exit={{ opacity: 0, scale: 0.95 }}
className="bg-[#121216] border border-white/5 rounded-2xl p-6 hover:border-red-500/30 transition-all group relative overflow-hidden" className="bg-[#121216] border border-white/10 rounded-3xl p-8 hover:bg-[#16161c] transition-all group shadow-xl"
> >
<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-6">
<div className="flex-1">
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 relative z-10"> <div className="flex items-center gap-3 mb-2">
<div> <h3 className="text-2xl font-black text-white italic uppercase tracking-tighter leading-none">{game.name}</h3>
<h3 className="text-xl font-black text-white italic mb-1 uppercase leading-none">{game.name}</h3> <span className="text-[10px] font-bold px-2 py-0.5 bg-red-500/10 text-red-500 rounded border border-red-500/20">{game.status}</span>
<div className="flex items-center gap-3 text-xs"> </div>
<span className="flex items-center gap-1 opacity-60"> <div className="flex items-center gap-4 text-[10px] uppercase font-black tracking-widest text-gray-500">
<Users size={12} /> <span className="flex items-center gap-1.5">
{game.currentPlayers}/{game.maxPlayers} Agentes <Users size={12} className="text-red-500" />
{game.currentPlayers} / {game.maxPlayers} Agentes Movilizados
</span> </span>
<span className="opacity-60">•</span> <span className="text-gray-800">|</span>
<span className="text-red-400 font-bold uppercase tracking-widest">{game.status}</span> <span>ID: {game.id.slice(0, 8)}</span>
</div> </div>
</div> </div>
<div className="flex items-center gap-2"> <button
<button onClick={() => closeGame(game.id)}
onClick={() => closeGame(game.id)} className="px-6 py-3 bg-zinc-900 hover:bg-red-600 text-gray-400 hover:text-white rounded-2xl text-[10px] font-black uppercase tracking-[0.2em] transition-all border border-white/5 active:scale-95 whitespace-nowrap"
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" >
> Abortar Misión
Finalizar Misión </button>
</button>
</div>
</div> </div>
{/* Jugadores en esta partida */} {/* Subpanel: Jugadores */}
<div className="mt-6 pt-6 border-t border-white/5"> <div className="mt-8 pt-8 border-t border-white/5">
<div className="grid grid-cols-1 md:grid-cols-2 gap-3"> <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
{game.players.map((player: any) => ( {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 key={player.id} className="bg-black/40 p-4 rounded-2xl border border-white/5 flex items-center justify-between group/player hover:border-red-500/30 transition-all">
<div className="flex items-center gap-3"> <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"> <div className="w-10 h-10 rounded-xl bg-white/5 flex items-center justify-center font-black text-red-500 border border-white/5 group-hover/player:bg-red-500 group-hover/player:text-white transition-all">
{player.name[0]} {player.name[0].toUpperCase()}
</div> </div>
<div> <div>
<p className="text-sm font-bold text-white leading-none mb-1">{player.name}</p> <p className="text-sm font-black text-white leading-none mb-1">{player.name}</p>
<p className="text-[10px] opacity-40 font-mono">{player.id.slice(0, 8)}</p> <p className="text-[9px] opacity-30 font-mono italic">AG-{player.id.slice(0, 4)}</p>
</div> </div>
</div> </div>
<button <button
onClick={() => kickPlayer(game.id, player.id)} onClick={() => kickPlayer(game.id, player.id)}
className="p-2 text-gray-600 hover:text-red-500 transition-colors" className="p-2.5 text-gray-700 hover:text-red-500 hover:bg-red-500/10 rounded-xl transition-all opacity-0 group-hover/player:opacity-100"
title="Expulsar jugador" title="Expulsar de la zona"
> >
<UserMinus size={16} /> <UserMinus size={18} />
</button> </button>
</div> </div>
))} ))}
@@ -214,47 +272,76 @@ export default function Dashboard() {
</section> </section>
</div> </div>
{/* Lateral: Historial */} {/* Columna Lateral: Archivo Histórico */}
<div className="space-y-8"> <div className="lg:col-span-4 space-y-8">
<section> <section className="sticky top-10">
<div className="flex items-center gap-3 mb-6"> <div className="flex items-center gap-4 mb-8">
<h2 className="text-lg font-bold text-white uppercase tracking-wider flex items-center gap-2"> <h2 className="text-xl font-black text-white uppercase tracking-tighter italic border-l-4 border-gray-600 pl-4">Informe Forense</h2>
<History size={20} className="text-gray-500" />
Archivo de Guerra
</h2>
</div> </div>
<div className="space-y-4 max-h-[70vh] overflow-y-auto pr-2 custom-scrollbar"> <div className="bg-[#121216] border border-white/10 rounded-3xl overflow-hidden shadow-2xl">
{gameHistory.length === 0 ? ( <div className="p-6 bg-white/5 border-b border-white/5">
<div className="text-center py-10 opacity-20"> <p className="text-[10px] uppercase font-black tracking-widest text-gray-400">Últimos Informes Desclasificados</p>
<p className="text-sm italic">No hay registros históricos</p> </div>
</div>
) : ( <div className="max-h-[60vh] overflow-y-auto custom-scrollbar p-6 space-y-6">
gameHistory.map((entry: any) => ( {gameHistory.length === 0 ? (
<div key={entry.id} className="bg-[#121216] border border-white/5 p-4 rounded-xl"> <div className="text-center py-20 opacity-10">
<div className="flex justify-between items-start mb-2"> <History size={40} className="mx-auto mb-4" />
<h4 className="text-sm font-bold text-gray-200 uppercase tracking-tight">{entry.room_name}</h4> <p className="text-xs italic font-bold">Sin archivos registrados</p>
<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>
)) ) : (
)} gameHistory.map((entry: any) => (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
key={entry.id}
className="group relative"
>
<div className="flex justify-between items-start">
<div className="space-y-1">
<h4 className="text-sm font-black text-gray-200 uppercase tracking-tight group-hover:text-white transition-colors 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>
<span>•</span>
<span>{new Date(entry.created_at).toLocaleDateString()}</span>
</div>
</div>
<div className={`text-[9px] font-black uppercase px-2 py-1 rounded shadow-sm ${entry.winner === 'resistance' ? 'bg-green-500/20 text-green-500' :
entry.winner === 'spies' ? 'bg-red-500/20 text-red-500' : 'bg-gray-700/20 text-gray-500'
}`}>
{entry.winner ? (entry.winner === 'resistance' ? 'RES' : 'SPIES') : 'LOGOUT'}
</div>
</div>
<div className="mt-2 flex items-center gap-3 text-[9px] opacity-40 group-hover:opacity-60 transition-opacity">
<span className="flex items-center gap-1 font-mono">{entry.players.split(',').length} Agtes</span>
<div className="w-1 h-1 bg-white/20 rounded-full"></div>
<span>{new Date(entry.created_at).toLocaleTimeString()}</span>
</div>
<div className="absolute -left-6 top-1.5 w-1 h-0 group-hover:h-3 bg-red-600 transition-all rounded-full"></div>
</motion.div>
))
)}
</div>
<div className="p-6 bg-white/5 border-t border-white/5">
<p className="text-[9px] font-bold text-center text-gray-600 uppercase tracking-widest">Fin del Informe Forense</p>
</div>
</div> </div>
</section> </section>
</div> </div>
</main> </main>
<style jsx global>{` <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 { .custom-scrollbar::-webkit-scrollbar {
width: 4px; width: 3px;
} }
.custom-scrollbar::-webkit-scrollbar-track { .custom-scrollbar::-webkit-scrollbar-track {
background: transparent; background: transparent;

49
server/src/index.ts
View File

@@ -83,6 +83,29 @@ const generateRoomName = () => {
return `${MISSION_NAMES[idx]} #${suffix}`; 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,
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) => { io.on('connection', (socket) => {
console.log('Cliente conectado:', socket.id); console.log('Cliente conectado:', socket.id);
@@ -110,6 +133,7 @@ io.on('connection', (socket) => {
// LOG EN DB // LOG EN DB
logGameStart(roomId, roomName, hostName, maxPlayers); logGameStart(roomId, roomName, hostName, maxPlayers);
broadcastAdminUpdate();
}); });
// B. UNIRSE A SALA // B. UNIRSE A SALA
@@ -149,6 +173,7 @@ io.on('connection', (socket) => {
// ACTUALIZAR LOG EN DB // ACTUALIZAR LOG EN DB
updateGamePlayers(roomId, game.state.players.map(p => p.name)); updateGamePlayers(roomId, game.state.players.map(p => p.name));
broadcastAdminUpdate();
}); });
// C. REFRESCAR LISTA // C. REFRESCAR LISTA
@@ -324,6 +349,7 @@ io.on('connection', (socket) => {
// LOG EN DB // LOG EN DB
logGameEnd(roomId, game.state.winner, false); logGameEnd(roomId, game.state.winner, false);
broadcastAdminUpdate();
} }
}); });
@@ -356,6 +382,7 @@ io.on('connection', (socket) => {
// LOG EN DB COMO ABORTADA // LOG EN DB COMO ABORTADA
logGameEnd(roomId, null, true); logGameEnd(roomId, null, true);
broadcastAdminUpdate();
console.log(`[LEAVE_GAME] ${playerName} abandonó la partida ${roomId}. Partida eliminada.`); console.log(`[LEAVE_GAME] ${playerName} abandonó la partida ${roomId}. Partida eliminada.`);
} }
@@ -421,22 +448,10 @@ io.on('connection', (socket) => {
// --- ADMIN COMMANDS --- // --- ADMIN COMMANDS ---
socket.on('admin_get_data', async () => { socket.on('admin_get_data', async () => {
console.log('[ADMIN] Petición de datos del dashboard'); console.log('[ADMIN] Agente administrativo conectado');
const activeGamesData = Object.values(games).map(g => ({ socket.join('admin-room');
id: g.state.roomId, const data = await getAdminData();
name: g.roomName, socket.emit('admin_data', data);
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 }) => { socket.on('admin_close_game', async ({ roomId }) => {
@@ -456,6 +471,7 @@ io.on('connection', (socket) => {
// Log como abortada por admin // Log como abortada por admin
await logGameEnd(roomId, null, true); await logGameEnd(roomId, null, true);
socket.emit('admin_action_success'); socket.emit('admin_action_success');
broadcastAdminUpdate();
} }
}); });
@@ -480,6 +496,7 @@ io.on('connection', (socket) => {
updateGamePlayers(roomId, game.state.players.map(p => p.name)); updateGamePlayers(roomId, game.state.players.map(p => p.name));
socket.emit('admin_action_success'); socket.emit('admin_action_success');
broadcastAdminUpdate();
} }
} }
}); });