comunidadhll/ai/tasks/done/TASK-069-monthly-mvp-ui-top3.md

TASK-069-monthly-mvp-ui-top3

Goal

Añadir a la página histórica una sección clara y visual para mostrar el Top 3 MVP mensual V1, consumiendo los snapshots/API ya preparados y manteniendo coherencia con la navegación existente.

Context

El monthly MVP V1 ya está definido a nivel de diseño y, tras las tasks previas, debe quedar disponible en snapshots y API. El siguiente paso es exponerlo en la UI de forma clara, sin convertir la pantalla en algo recargado ni confuso.

Steps

1. Revisar la UI histórica actual y el nuevo endpoint/snapshot del monthly MVP.
2. Diseñar una sección visual clara para el Top 3 MVP mensual.
3. Mantener compatibilidad con el selector actual de ámbito:
   • servidor individual
   • all-servers
4. Mostrar, como mínimo:
   • posición 1, 2 y 3
   • nombre de jugador
   • puntuación MVP
   • metadatos mínimos útiles según el diseño aprobado
5. Mostrar el periodo mensual real usado de forma natural.
6. Mantener estados de:
   • loading
   • empty
   • error
7. Integrar la nueva sección sin romper la navegación actual semanal/mensual de leaderboards por métrica.
8. Mantener el rendimiento percibido y la coherencia visual con la página actual.
9. No crear páginas nuevas.
10. Al completar la implementación:
    • dejar el repositorio consistente
    • hacer commit
    • hacer push al remoto si el entorno lo permite

Files to Read First

• AGENTS.md
• frontend/historico.html
• frontend/assets/js/historico.js
• frontend/assets/css/historico.css
• backend/app/routes.py
• backend/app/payloads.py
• backend/README.md
• docs/monthly-mvp-ranking-scoring-design.md

Expected Files to Modify

• frontend/historico.html
• frontend/assets/js/historico.js
• frontend/assets/css/historico.css
• opcionalmente backend docs mínimas si hay que reflejar el nuevo bloque visible

Constraints

• No romper la UI histórica actual.
• No introducir frameworks nuevos.
• No crear páginas nuevas.
• No hacer cambios destructivos.
• Mantener el trabajo centrado en una sección Top 3 mensual clara y útil.

Validation

• La UI histórica muestra el Top 3 MVP mensual.
• Funciona para servidor individual y all-servers.
• El periodo mensual mostrado es claro.
• Los estados de loading/empty/error son coherentes.
• La pantalla sigue siendo usable y visualmente consistente.
• Los cambios quedan committeados y se hace push si el entorno lo permite.

Change Budget

• Preferir menos de 5 archivos modificados.
• Preferir menos de 220 líneas cambiadas.