Compare commits
2 Commits
797780fc94
...
c4c08c64c3
| Author | SHA1 | Date | |
|---|---|---|---|
|
c4c08c64c3 | ||
|
|
1ad4f46aa4 |
@@ -3,7 +3,7 @@
|
||||
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 } from 'lucide-react';
|
||||
import { Shield, Users, Gamepad2, LogOut, Clock, History, UserMinus, Key, ChevronDown } from 'lucide-react';
|
||||
|
||||
const ADMIN_PASSWORD = "admin123";
|
||||
|
||||
@@ -14,6 +14,7 @@ export default function Dashboard() {
|
||||
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(() => {
|
||||
@@ -77,6 +78,15 @@ export default function Dashboard() {
|
||||
}
|
||||
};
|
||||
|
||||
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]">
|
||||
@@ -193,7 +203,7 @@ export default function Dashboard() {
|
||||
<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-6">
|
||||
<div className="grid gap-4">
|
||||
<AnimatePresence mode="popLayout">
|
||||
{activeGames.length === 0 ? (
|
||||
<motion.div
|
||||
@@ -213,57 +223,93 @@ export default function Dashboard() {
|
||||
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 p-8 hover:bg-[#16161c] transition-all group shadow-xl"
|
||||
className="bg-[#121216] border border-white/10 rounded-3xl overflow-hidden hover:bg-[#16161c] transition-all group shadow-lg"
|
||||
>
|
||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<h3 className="text-2xl font-black text-white italic uppercase tracking-tighter 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>
|
||||
<div className="flex items-center gap-4 text-[10px] uppercase font-black tracking-widest text-gray-500">
|
||||
<span className="flex items-center gap-1.5">
|
||||
<Users size={12} className="text-red-500" />
|
||||
{game.currentPlayers} / {game.maxPlayers} Agentes Movilizados
|
||||
</span>
|
||||
<span className="text-gray-800">|</span>
|
||||
<span>ID: {game.id.slice(0, 8)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
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"
|
||||
>
|
||||
Abortar Misión
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Subpanel: Jugadores */}
|
||||
<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">
|
||||
{game.players.map((player: any) => (
|
||||
<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="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].toUpperCase()}
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-black text-white leading-none mb-1">{player.name}</p>
|
||||
<p className="text-[9px] opacity-30 font-mono italic">AG-{player.id.slice(0, 4)}</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => kickPlayer(game.id, player.id)}
|
||||
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 de la zona"
|
||||
>
|
||||
<UserMinus size={18} />
|
||||
</button>
|
||||
{/* 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">
|
||||
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>
|
||||
))
|
||||
)}
|
||||
@@ -280,53 +326,102 @@ export default function Dashboard() {
|
||||
</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">
|
||||
<p className="text-[10px] uppercase font-black tracking-widest text-gray-400">Últimos Informes Desclasificados</p>
|
||||
<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-6 space-y-6">
|
||||
<div className="max-h-[60vh] overflow-y-auto custom-scrollbar p-0">
|
||||
{gameHistory.length === 0 ? (
|
||||
<div className="text-center py-20 opacity-10">
|
||||
<History size={40} className="mx-auto mb-4" />
|
||||
<p className="text-xs italic font-bold">Sin archivos registrados</p>
|
||||
<p className="text-xs italic font-bold">Sin registros</p>
|
||||
</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 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>
|
||||
<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 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>
|
||||
<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>
|
||||
|
||||
{/* 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.rounds_played > 0 && (
|
||||
<>
|
||||
<div className="flex justify-between">
|
||||
<span>RONDAS:</span>
|
||||
<span className="text-gray-300">{entry.rounds_played}</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center pt-2">
|
||||
<span>RESULTADOS:</span>
|
||||
<div className="flex gap-1">
|
||||
{entry.round_results && entry.round_results.split(',').map((res: string, idx: number) => (
|
||||
<div
|
||||
key={idx}
|
||||
className={`w-3 h-3 rounded-full ${res === 'true' ? 'bg-blue-500' : 'bg-red-500'}`}
|
||||
title={res === 'true' ? 'Victoria Resistencia' : 'Victoria Espías'}
|
||||
/>
|
||||
))}
|
||||
</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 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>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
1
client/tsconfig.tsbuildinfo
Normal file
1
client/tsconfig.tsbuildinfo
Normal file
File diff suppressed because one or more lines are too long
@@ -25,6 +25,14 @@ export const initDb = async () => {
|
||||
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 '';
|
||||
`);
|
||||
|
||||
console.log('[DB] Base de datos inicializada correctamente');
|
||||
} catch (err) {
|
||||
console.error('[DB] Error al inicializar base de datos:', err);
|
||||
@@ -58,11 +66,20 @@ export const updateGamePlayers = async (roomId: string, players: string[]) => {
|
||||
};
|
||||
|
||||
// Registrar fin de partida
|
||||
export const logGameEnd = async (roomId: string, winner: string | null = null, aborted: boolean = false) => {
|
||||
export const logGameEnd = async (
|
||||
roomId: string,
|
||||
winner: string | null = null,
|
||||
aborted: boolean = false,
|
||||
roundsPlayed: number = 0,
|
||||
roundResults: boolean[] = []
|
||||
) => {
|
||||
try {
|
||||
// Convert boolean[] to string "true,false,true" or simplified "W,L,W"
|
||||
const resultsStr = roundResults.join(',');
|
||||
|
||||
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']
|
||||
'UPDATE game_logs SET finished_at = CURRENT_TIMESTAMP, winner = $1, status = $2, rounds_played = $3, round_results = $4 WHERE room_id = $5 AND status = $6',
|
||||
[winner, aborted ? 'aborted' : 'finished', roundsPlayed, resultsStr, roomId, 'active']
|
||||
);
|
||||
} catch (err) {
|
||||
console.error('[DB] Error al registrar fin de partida:', err);
|
||||
|
||||
@@ -90,6 +90,7 @@ const getAdminData = async () => {
|
||||
status: g.state.phase,
|
||||
currentPlayers: g.state.players.length,
|
||||
maxPlayers: g.maxPlayers,
|
||||
currentRound: g.state.currentRound,
|
||||
players: g.state.players.map(p => ({ id: p.id, name: p.name }))
|
||||
}));
|
||||
|
||||
@@ -348,7 +349,7 @@ io.on('connection', (socket) => {
|
||||
io.in(roomId).socketsLeave(roomId);
|
||||
|
||||
// LOG EN DB
|
||||
logGameEnd(roomId, game.state.winner, false);
|
||||
logGameEnd(roomId, game.state.winner, false, game.state.currentRound, game.state.questResults);
|
||||
broadcastAdminUpdate();
|
||||
}
|
||||
});
|
||||
@@ -381,7 +382,7 @@ io.on('connection', (socket) => {
|
||||
io.in(roomId).socketsLeave(roomId);
|
||||
|
||||
// LOG EN DB COMO ABORTADA
|
||||
logGameEnd(roomId, null, true);
|
||||
logGameEnd(roomId, null, true, game.state.currentRound, game.state.questResults);
|
||||
broadcastAdminUpdate();
|
||||
|
||||
console.log(`[LEAVE_GAME] ${playerName} abandonó la partida ${roomId}. Partida eliminada.`);
|
||||
@@ -469,7 +470,7 @@ io.on('connection', (socket) => {
|
||||
io.in(roomId).socketsLeave(roomId);
|
||||
|
||||
// Log como abortada por admin
|
||||
await logGameEnd(roomId, null, true);
|
||||
await logGameEnd(roomId, null, true, game.state.currentRound, game.state.questResults);
|
||||
socket.emit('admin_action_success');
|
||||
broadcastAdminUpdate();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user