4.3 KiB
4.3 KiB
Plan de integracion de Stats en frontend
1. Pagina prevista
- Pantalla objetivo:
frontend/stats.html(nueva). - Objetivo V1: pagina ligera, statically-safe, con componentes para:
- buscador
- resultados
- panel de stats personales
- resumen semanal
- resumen mensual
- bloque futuro de ranking anual top 20 (placeholder)
2. Navegacion
El cambio no debe romper Inicio, Historico ni Partida actual.
- Mantener
frontend/index.htmlcon su estructura actual. - Cambios de navegacion propuestos:
- Añadir un link
Statsen el bloque de acciones del hero:href="./stats.html"- texto:
Stats - estilo reutilizando
.secondary-buttono variante especifica en CSS si se requiere.
- En
frontend/historico.html:- añadir boton de regreso a Inicio si no existe.
- opcionalmente incluir acceso rapido a
stats.htmlen el header.
- En
partida-actual.html(futuro, si usa una plantilla):- no modificar por ahora.
- Añadir un link
- Regla de compatibilidad:
- No alterar rutas de
historico.htmlni departida-actual.html. - Mantener rutas existentes (
./historico.html,./index.html) intactas.
- No alterar rutas de
3. Componentes V1
- Buscador de jugador
- Input para texto libre.
- Boton de ejecucion.
- Debounce/submit manual para evitar ruido.
- Query query param
q.
- Lista de resultados
- Mostrar por fila:
player_nameplayer_id(texto de soporte)matches_consideredlast_seen_atservers_seen(solo si se integra en payload final).
- Cada fila habilita seleccion de jugador.
- Mostrar por fila:
- Panel de estadisticas personales
- Estado base despues de seleccionar jugador:
- nombre y player_id
- server/scope visible.
- Datos por
GET /api/stats/players/{player_id}?timeframe=...&server_id=....
- Estado base despues de seleccionar jugador:
- Resumen semanal
- Render a partir de
data.weekly_rankingydatapara la misma ventana.
- Render a partir de
- Resumen mensual
- Render a partir de
data.monthly_rankingy datos de ventana.
- Render a partir de
- Bloque anual futuro
- Reservado en layout con estado:
Proximo: ranking anual top 20.
- Sin llamada ni dependencia now.
- Reservado en layout con estado:
4. Endpoints usados
GET /api/stats/players/search?q=<query>qobligatorio.- parametros recomendados V1:
server_idopcional (all-serverscomo default).limitopcional.
GET /api/stats/players/{player_id}- para semana:
timeframe=weekly. - para mes:
timeframe=monthly. - para cambios de scope:
server_id=all-servers|comunidad-hispana-01|comunidad-hispana-02.
- para semana:
5. Estados de UI
- Loading
- Skeleton o placeholder en buscador y lista de resultados.
- Mensaje breve en paneles de resumen con estado neutro.
- Error
- Mensaje tactico y silencioso en consola.
- Mantener contenido previo visible.
- Sin resultados
- estado vacio:
No se encontraron jugadores para esta busqueda.
- estado vacio:
- Jugador sin stats
- si
matches_considered == 0:- mostrar
Sin actividad registrada en el periodo.
- mostrar
- si
- Backend no disponible
- banner no intrusivo de estado.
- no bloquear el resto de la pagina.
6. Identidad visual
- Mantener estilo militar / Vietnam / tactico / sobrio:
- variables CSS existentes en
frontend/assets/css/styles.css. - paleta actual.
- tarjetas y borders similares a
panel,clan-card,server-card.
- variables CSS existentes en
- No introducir frameworks.
- Preferir reutilizacion:
hero,panel,status-chip,secondary-buttony utilidades de layout existentes.
- Agregar estilos nuevos solo en
styles.csssi la combinacion base no cubre el layout.
7. Archivos esperados para implementacion futura
frontend/stats.htmlfrontend/assets/js/stats.jsfrontend/assets/css/styles.css(solo si necesario para grid, estados, card o tabla simple)frontend/index.htmly/ofrontend/historico.htmlpara navegacion a Stats, sin tocar la logica de secciones actuales.
Alcance de validacion
Esta task es un plan y no requiere pruebas automaticas.
- Verificar por dif:
- solo
ai/tasks/pending/TASK-164-design-stats-frontend-integration-plan.md docs/stats-frontend-integration-plan.md
- solo
- Revisar que el plan respete las restricciones:
- sin cambios backend
- sin implementacion
- sin ranking anual
- sin elo/mmr
- sin comunidad hispana #03
- Preparar siguiente task: implementacion de
frontend/stats.htmlyfrontend/assets/js/stats.jsusando endpoints V1.