comunidadhll/ai/tasks/done/TASK-051-real-server-card-minimal-product-pass.md

TASK-051-real-server-card-minimal-product-pass

Goal

Dejar las tarjetas de servidores reales en una forma minima y orientada a producto final, mostrando solo la informacion esencial para un visitante que quiere ver estado actual y conectarse.

Context

Las tarjetas ya se simplificaron parcialmente, pero todavia quedaban restos de estructura y bloques secundarios que no aportaban suficiente valor. El objetivo era dejar una tarjeta muy clara y minima, centrada en estado actual del servidor.

Steps

1. Revisar la composicion actual de las tarjetas reales.
2. Asegurar que el contenido visible principal quede limitado a:
   • nombre
   • estado
   • jugadores
   • mapa
   • region
   • ultima actualizacion
   • boton Conectar
3. Evaluar si promedio y pico deben quedar ocultos o pasar a una capa secundaria muy discreta.
4. Eliminar cualquier bloque residual que complique la lectura rapida.
5. Mejorar la jerarquia para que el usuario vea en pocos segundos si el servidor le interesa.
6. Mantener una composicion limpia y coherente con el ancho actual de la pagina.
7. No tocar backend salvo una alineacion menor si fuera imprescindible.

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 romper el boton Conectar.
• No eliminar la informacion util esencial.
• No anadir librerias nuevas.
• No hacer cambios destructivos.
• Mantener el ajuste centrado en UX de producto final.

Validation

• Las tarjetas muestran solo informacion util y clara.
• La lectura es rapida y limpia.
• No quedan bloques residuales de informacion interna o excesiva.
• La UI se siente mas final y menos experimental.

Change Budget

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

Outcome

• frontend/assets/js/main.js deja las tarjetas dinamicas en su forma minima: identidad, estado, jugadores, mapa, region, ultima actualizacion y CTA cuando existe destino conectable.
• frontend/index.html alinea las tarjetas estaticas de fallback con esa misma estructura minima.
• frontend/assets/css/styles.css elimina estilos de bloques residuales ya innecesarios, como la barra de carga y los encabezados intermedios de seccion, para reforzar una lectura mas rapida.

Validation Result

• Validado con node --check frontend/assets/js/main.js.
• Verificado con rg que ya no quedan restos de server-card__load, server-panel-section, ni texto asociado a metricas o bloques historicos secundarios dentro de frontend/.
• Revisado en diff: la task queda limitada a frontend/index.html, frontend/assets/js/main.js, frontend/assets/css/styles.css y este archivo de task.

Decision Notes

• Se elimino la barra visual de ocupacion porque duplicaba la informacion ya expresada por Jugadores y cargaba la tarjeta sin mejorar la decision principal del visitante.