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
This commit is contained in:
Resistencia Dev
272
client/src/app/dashboard/page.tsx
Normal file
272
client/src/app/dashboard/page.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user