68 lines
3.0 KiB
Markdown
68 lines
3.0 KiB
Markdown
# TASK-039-real-server-panel-data-density-pass
|
||
|
||
## Goal
|
||
Mejorar la densidad informativa y la claridad de las tarjetas de servidores reales, aprovechando mejor los datos ya disponibles sin recargar visualmente la landing.
|
||
|
||
## Context
|
||
Tras ocultar los placeholders cuando existen snapshots reales y preparar una CTA de conexión en español, el panel real ya tiene buena base. Sin embargo, todavía puede ganar valor mostrando mejor la información disponible y organizando mejor la jerarquía interna de las tarjetas.
|
||
|
||
## Steps
|
||
1. Revisar la composición actual de las tarjetas de servidores reales.
|
||
2. Revisar qué datos ya están disponibles o pasarán a estar disponibles tras la task de resúmenes históricos.
|
||
3. Mejorar la jerarquía interna de cada tarjeta:
|
||
- nombre
|
||
- estado
|
||
- mapa
|
||
- jugadores
|
||
- región
|
||
- última captura
|
||
- CTA
|
||
- métricas resumidas si existen
|
||
4. Hacer que la tarjeta transmita más información útil sin volverse pesada.
|
||
5. Mantener coherencia visual con la landing actual.
|
||
6. Mejorar legibilidad en desktop y móvil.
|
||
7. No rediseñar toda la página ni añadir nuevas secciones grandes.
|
||
|
||
## Files to Read First
|
||
- AGENTS.md
|
||
- ai/repo-context.md
|
||
- frontend/index.html
|
||
- frontend/assets/js/main.js
|
||
- frontend/assets/css/styles.css
|
||
- backend/app/payloads.py
|
||
- backend/app/routes.py
|
||
|
||
## Expected Files to Modify
|
||
- frontend/index.html
|
||
- frontend/assets/js/main.js
|
||
- frontend/assets/css/styles.css
|
||
|
||
## Constraints
|
||
- No tocar backend salvo si es estrictamente necesario por alineación menor con payloads ya existentes.
|
||
- No añadir librerías nuevas.
|
||
- No romper el fallback ni la CTA Conectar.
|
||
- No hacer cambios destructivos.
|
||
- Mantener la mejora centrada en claridad, jerarquía y densidad informativa.
|
||
|
||
## Validation
|
||
- Las tarjetas reales muestran mejor la información útil.
|
||
- La jerarquía interna mejora.
|
||
- La experiencia visual sigue siendo limpia.
|
||
- El panel se entiende mejor en desktop y móvil.
|
||
|
||
## Change Budget
|
||
- Preferir menos de 3 archivos modificados.
|
||
- Preferir menos de 180 líneas cambiadas.
|
||
## Outcome
|
||
- `frontend/assets/js/main.js` reorganiza la jerarquÃa interna de las tarjetas reales para destacar nombre, estado, población actual, mapa, región, última captura, CTA y métricas resumidas.
|
||
- `frontend/assets/css/styles.css` refuerza la densidad informativa con una columna compacta de estado/población y una fila de quick facts legible en desktop y móvil.
|
||
- La CTA `Conectar`, la tendencia reciente y el fallback existente se mantienen operativos.
|
||
|
||
## Validation Result
|
||
- Ejecutado: `node --check frontend/assets/js/main.js`.
|
||
- Resultado: sintaxis JavaScript válida tras el ajuste de jerarquÃa y densidad visual.
|
||
- Revisado en código: la versión enriquecida de la tarjeta conserva `steam://connect/<host>:<game_port>` para snapshots reales y mantiene el fallback cuando no hay datos reales utilizables.
|
||
|
||
## Decision Notes
|
||
- La mejora de densidad se concentró dentro de la tarjeta existente, sin añadir nuevas secciones grandes ni cambiar la arquitectura del panel.
|