comunidadhll/ai/tasks/done/TASK-045-simplify-real-server-cards-for-product-ui.md

TASK-045-simplify-real-server-cards-for-product-ui

Goal

Simplificar las tarjetas de servidores reales para mostrar solo la informacion mas util para el visitante final, mejorando la claridad y reduciendo ruido visual y tecnico.

Context

Las tarjetas actuales ya muestran datos reales A2S, pero siguen ensenando informacion que no aporta suficiente valor para la experiencia principal. La tarjeta debe centrarse en lo esencial: nombre, estado, jugadores, mapa, region, ultima captura y CTA de conexion. Cualquier metrica adicional debe ser secundaria o eliminarse si no mejora claramente la lectura.

Steps

1. Revisar la estructura actual de las tarjetas reales.
2. Reducir la informacion visible principal a:
   • nombre
   • estado
   • jugadores actuales
   • mapa
   • region
   • ultima captura
   • boton Conectar
3. Evaluar si promedio y pico deben quedar como datos secundarios discretos o desaparecer.
4. Eliminar de la tarjeta elementos como:
   • tendencia reciente
   • numero de capturas
   • bloques densos poco utiles
5. Reorganizar la tarjeta para que se lea rapido y con claridad.
6. Mantener una composicion limpia y coherente con el diseno actual.
7. Asegurar buena legibilidad en desktop y movil.

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

Expected Files to Modify

• frontend/index.html
• frontend/assets/js/main.js
• frontend/assets/css/styles.css

Constraints

• No tocar backend salvo alineacion menor si fuera imprescindible.
• No romper la CTA Conectar.
• No anadir librerias nuevas.
• No hacer cambios destructivos.
• Mantener el ajuste centrado en UX de producto final.

Validation

• Las tarjetas reales muestran solo la informacion mas util y legible.
• Desaparece ruido tecnico innecesario.
• La CTA Conectar sigue visible y clara.
• La UI gana sensacion de producto final.

Change Budget

• Preferir menos de 3 archivos modificados.
• Preferir menos de 160 lineas cambiadas.

Outcome

• frontend/assets/js/main.js simplifica el render de tarjetas reales a identidad, estado, poblacion, quick facts y CTA, eliminando resumen historico, tendencia y llamadas auxiliares ya innecesarias.
• frontend/assets/css/styles.css elimina estilos asociados a bloques tecnicos densos y deja una composicion mas directa para las quick facts.
• No fue necesario tocar backend ni cambiar la CTA Conectar.

Validation Result

• Validado con node --check frontend/assets/js/main.js.
• Revisado en codigo: las tarjetas mantienen nombre, estado, jugadores, mapa, region, ultima captura y CTA, y desaparecen tendencia, capturas, promedio y pico.
• Revisado en diff: la task queda limitada a frontend/assets/js/main.js, frontend/assets/css/styles.css y el archivo de task.

Decision Notes

• Se opto por eliminar por completo las metricas secundarias en lugar de rebajarlas visualmente, porque seguian cargando la tarjeta y no aportaban suficiente valor a la lectura principal.