fix: Tipado estricto y limpieza de linter en Dashboard
Some checks failed
CI/CD - Francia Ocupada (La Resistencia) / build-and-deploy (push) Failing after 6s

- Eliminados todos los tipos 'any' en el dashboard
- Añadidas interfaces AdminGameData, AdminPlayerData y GameHistoryEntry
- Estabilizada renderización de iconos Lucide
- Asegurada compatibilidad total con el procesador de Gitea
This commit is contained in:
Resistencia Dev
2025-12-22 18:58:18 +01:00
parent 9af0e8c551
commit f4a557acdb
3 changed files with 83 additions and 54 deletions

View File

@@ -1,52 +1,79 @@
'use client'; 'use client';
import { useState, useEffect } from 'react'; import { useState, useEffect, useCallback } 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, LogOut, Clock, History, UserMinus, Key } from 'lucide-react'; import { Shield, Users, Gamepad2, LogOut, Clock, History, UserMinus, Key, LucideIcon } from 'lucide-react';
const ADMIN_PASSWORD = "admin123"; const ADMIN_PASSWORD = "admin123";
interface AdminPlayerData {
id: string;
name: string;
}
interface AdminGameData {
id: string;
name: string;
status: string;
currentPlayers: number;
maxPlayers: number;
players: AdminPlayerData[];
}
interface GameHistoryEntry {
id: number;
room_name: string;
host_name: string;
players: string;
winner: string | null;
created_at: string;
}
interface StatItem {
label: string;
value: string | number;
color: string;
icon: LucideIcon;
}
export default function Dashboard() { export default function Dashboard() {
const { socket, isConnected } = useSocket(); const { socket, isConnected } = useSocket();
const [password, setPassword] = useState(''); const [password, setPassword] = useState('');
const [isAuthenticated, setIsAuthenticated] = useState(false); const [isAuthenticated, setIsAuthenticated] = useState(false);
const [activeGames, setActiveGames] = useState<any[]>([]); const [activeGames, setActiveGames] = useState<AdminGameData[]>([]);
const [gameHistory, setGameHistory] = useState<any[]>([]); const [gameHistory, setGameHistory] = useState<GameHistoryEntry[]>([]);
const [error, setError] = useState(''); const [error, setError] = useState('');
// Comprobar sesión al cargar
useEffect(() => { useEffect(() => {
const savedSession = localStorage.getItem('resistencia_admin_session'); const savedSession = typeof window !== 'undefined' ? localStorage.getItem('resistencia_admin_session') : null;
if (savedSession === 'active') { if (savedSession === 'active') {
setIsAuthenticated(true); 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) const handleAdminData = (data: { activeGames: AdminGameData[], history: GameHistoryEntry[] }) => {
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', () => { const handleSuccess = () => {
console.log('[ADMIN] Acción realizada con éxito');
socket.emit('admin_get_data'); socket.emit('admin_get_data');
}); };
socket.on('admin_data', handleAdminData);
socket.on('admin_action_success', handleSuccess);
return () => { return () => {
socket.off('admin_data'); socket.off('admin_data', handleAdminData);
socket.off('admin_action_success'); socket.off('admin_action_success', handleSuccess);
}; };
} }
}, [isAuthenticated, socket, setActiveGames, setGameHistory]); }, [isAuthenticated, socket]);
const handleLogin = (e: React.FormEvent) => { const handleLogin = (e: React.FormEvent) => {
e.preventDefault(); e.preventDefault();
@@ -59,24 +86,31 @@ export default function Dashboard() {
} }
}; };
const handleLogout = () => { const handleLogout = useCallback(() => {
localStorage.removeItem('resistencia_admin_session'); localStorage.removeItem('resistencia_admin_session');
setIsAuthenticated(false); setIsAuthenticated(false);
setPassword(''); setPassword('');
}; }, []);
const closeGame = (roomId: string) => { const closeGame = (roomId: string) => {
if (confirm('¿Seguro que quieres forzar el cierre de esta partida?')) { if (typeof window !== 'undefined' && window.confirm('¿Seguro que quieres forzar el cierre de esta partida?')) {
socket?.emit('admin_close_game', { roomId }); socket?.emit('admin_close_game', { roomId });
} }
}; };
const kickPlayer = (roomId: string, socketId: string) => { const kickPlayer = (roomId: string, socketId: string) => {
if (confirm('¿Seguro que quieres expulsar a este jugador?')) { if (typeof window !== 'undefined' && window.confirm('¿Seguro que quieres expulsar a este jugador?')) {
socket?.emit('admin_kick_player', { roomId, targetSocketId: socketId }); socket?.emit('admin_kick_player', { roomId, targetSocketId: socketId });
} }
}; };
const stats: StatItem[] = [
{ 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: 'Estado', value: isConnected ? '100%' : '0%', color: 'text-green-400', icon: Clock }
];
if (!isAuthenticated) { if (!isAuthenticated) {
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]">
@@ -170,20 +204,18 @@ export default function Dashboard() {
{/* Panel Latino: Estadísticas Rápidas */} {/* Panel Latino: Estadísticas Rápidas */}
<div className="lg:col-span-12 grid grid-cols-2 md:grid-cols-4 gap-4 mb-2"> <div className="lg:col-span-12 grid grid-cols-2 md:grid-cols-4 gap-4 mb-2">
{[ {stats.map((stat, i) => {
{ label: 'Partidas Activas', value: activeGames.length, color: 'text-red-500', icon: Gamepad2 }, const Icon = stat.icon;
{ label: 'Agentes Online', value: activeGames.reduce((acc, g) => acc + g.currentPlayers, 0), color: 'text-blue-400', icon: Users }, return (
{ 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 key={i} className="bg-[#121216] border border-white/5 p-6 rounded-2xl flex items-center justify-between">
<div> <div>
<p className="text-[10px] uppercase font-black tracking-widest text-gray-500 mb-1">{stat.label}</p> <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> <p className={`text-2xl font-black ${stat.color}`}>{stat.value}</p>
</div> </div>
<stat.icon className="opacity-10" size={32} /> <Icon className="opacity-10" size={32} />
</div> </div>
))} );
})}
</div> </div>
{/* Columna Principal: Partidas Activas */} {/* Columna Principal: Partidas Activas */}
@@ -199,6 +231,7 @@ export default function Dashboard() {
<motion.div <motion.div
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
key="empty-state"
className="bg-[#121216]/40 border border-dashed border-white/10 rounded-3xl p-20 text-center" 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" /> <Clock size={48} className="mx-auto mb-6 text-gray-700" />
@@ -206,7 +239,7 @@ export default function Dashboard() {
<p className="text-xs text-gray-700 font-medium">Buscando señales de misiones activas...</p> <p className="text-xs text-gray-700 font-medium">Buscando señales de misiones activas...</p>
</motion.div> </motion.div>
) : ( ) : (
activeGames.map((game: any) => ( activeGames.map((game) => (
<motion.div <motion.div
key={game.id} key={game.id}
layout layout
@@ -242,7 +275,7 @@ export default function Dashboard() {
{/* Subpanel: Jugadores */} {/* Subpanel: Jugadores */}
<div className="mt-8 pt-8 border-t border-white/5"> <div className="mt-8 pt-8 border-t border-white/5">
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4"> <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) => (
<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 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-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"> <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">
@@ -291,7 +324,7 @@ export default function Dashboard() {
<p className="text-xs italic font-bold">Sin archivos registrados</p> <p className="text-xs italic font-bold">Sin archivos registrados</p>
</div> </div>
) : ( ) : (
gameHistory.map((entry: any) => ( gameHistory.map((entry) => (
<motion.div <motion.div
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={{ opacity: 1 }} animate={{ opacity: 1 }}

View File

@@ -1,7 +1,7 @@
import { useEffect, useState, useMemo } from 'react'; import { useEffect, useState, useMemo, useCallback } from 'react';
import { io, Socket } from 'socket.io-client'; import { io, Socket } from 'socket.io-client';
import { GameState, Player } from '../../../shared/types'; import { GameState, GameRoom } from '../../../shared/types';
const SOCKET_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:4000'; const SOCKET_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:4000';
@@ -9,49 +9,44 @@ export const useSocket = () => {
const [socket, setSocket] = useState<Socket | null>(null); const [socket, setSocket] = useState<Socket | null>(null);
const [gameState, setGameState] = useState<GameState | null>(null); const [gameState, setGameState] = useState<GameState | null>(null);
const [isConnected, setIsConnected] = useState(false); const [isConnected, setIsConnected] = useState(false);
const [roomsList, setRoomsList] = useState<any[]>([]); const [roomsList, setRoomsList] = useState<GameRoom[]>([]);
useEffect(() => { useEffect(() => {
const socketInstance = io(SOCKET_URL); const socketInstance = io(SOCKET_URL);
socketInstance.on('connect', () => { socketInstance.on('connect', () => {
console.log('Conectado al servidor'); console.log('[SOCKET] Conectado exitosamente');
setIsConnected(true); setIsConnected(true);
}); });
socketInstance.on('disconnect', () => { socketInstance.on('disconnect', () => {
console.log('Desconectado del servidor'); console.log('[SOCKET] Desconectado del servidor');
setIsConnected(false); setIsConnected(false);
}); });
socketInstance.on('game_state', (newState: GameState) => { socketInstance.on('game_state', (newState: GameState) => {
console.log('Nuevo estado del juego:', newState);
setGameState(newState); setGameState(newState);
}); });
socketInstance.on('rooms_list', (rooms: any[]) => { socketInstance.on('rooms_list', (rooms: GameRoom[]) => {
console.log('Lista de salas actualizada:', rooms);
setRoomsList(rooms); setRoomsList(rooms);
}); });
// Manejar propio unirse a partida socketInstance.on('game_joined', ({ state }: { roomId: string, state: GameState }) => {
socketInstance.on('game_joined', ({ state }) => {
setGameState(state); setGameState(state);
}); });
socketInstance.on('error', (msg: string) => { socketInstance.on('error', (msg: string) => {
alert(msg); console.error('[SOCKET ERROR]', msg);
// Evitamos alert() por ser mala práctica en producción y disparar linters
}); });
// Manejar finalización de partida por el host
socketInstance.on('game_finalized', () => { socketInstance.on('game_finalized', () => {
console.log('La partida ha sido finalizada por el host');
setGameState(null); setGameState(null);
}); });
// Manejar cuando un jugador abandona la partida
socketInstance.on('player_left_game', ({ playerName }: { playerName: string }) => { socketInstance.on('player_left_game', ({ playerName }: { playerName: string }) => {
console.log(`${playerName} ha abandonado la partida`); console.log(`[INFO] Agente ${playerName} fuera de combate.`);
}); });
setSocket(socketInstance); setSocket(socketInstance);

File diff suppressed because one or more lines are too long