comunidadhll/ai/tasks/done/TASK-206-public-frontend-visual-consistency-and-annual-ranking-layout.md

id, title, status, type, team, supporting_teams, roadmap_item, priority

id	title	status	type	team	supporting_teams	roadmap_item	priority
TASK-206	Public frontend visual consistency and annual ranking layout	done	frontend	Frontend Senior	Experto en interfaz	foundation	medium

TASK-206 - Public frontend visual consistency and annual ranking layout

Goal

Corregir la segunda pasada visual del frontend publico para unificar definitivamente las cabeceras de index, historico, stats y ranking, mejorar la legibilidad del ranking anual y ajustar la presencia visual del logo BxB en la seccion de clanes.

Context

Tras TASK-203 y la task local no commiteada TASK-204, el frontend publico sigue mostrando diferencias visibles entre heroes, etiquetas redundantes dentro de cabecera y un bloque anual demasiado compacto en stats. Esta tarea se limita a frontend/ y a su documentacion de task: no toca backend, endpoints, logica de datos, scripts backend, snapshots, Elo/MMR pausado, Comunidad Hispana #03 ni assets/SVGs de armas.

Preserve the current product identity: Spanish-speaking HLL Vietnam community, military/Vietnam/tactical/sober visual direction and controlled repository evolution.

Steps

1. Confirmar el estado actual del frontend publico y de la task previa local TASK-204.
2. Unificar el patron visual del hero tomando index como referencia principal y historico como referencia secundaria.
3. Eliminar chips o labels de pagina redundantes dentro del hero manteniendo la navegacion superior comun.
4. Rehacer solo la presentacion frontend del Top 20 anual en stats para separar claramente posicion, jugador y metricas.
5. Ajustar la presentacion del logo BxB en la seccion de clanes sin reemplazar el asset.
6. Validar por inspeccion y documentar outcome, alcance y exclusiones.

Files to Read First

• AGENTS.md
• ai/repo-context.md
• ai/architecture-index.md
• frontend/index.html
• frontend/historico.html
• frontend/stats.html
• frontend/ranking.html
• frontend/assets/css/styles.css
• frontend/assets/js/stats.js
• frontend/assets/js/ranking.js
• ai/tasks/done/TASK-203-public-pages-navigation-and-copy-polish.md

Expected Files to Modify

• ai/tasks/in-progress/TASK-206-public-frontend-visual-consistency-and-annual-ranking-layout.md
• frontend/index.html
• frontend/historico.html
• frontend/stats.html
• frontend/ranking.html
• frontend/assets/css/styles.css
• frontend/assets/css/hero-header-compact.css
• frontend/assets/css/historico.css
• frontend/assets/js/stats.js
• frontend/assets/js/main.js

Constraints

• Keep the change minimal.
• Preserve HLL Vietnam project identity.
• Do not introduce unnecessary frameworks or dependencies.
• Do not implement backend functionality unless the task explicitly requires it.
• Do not expand Elo/MMR, historical workers or RCON server #03 handling unless the task explicitly requires it.
• Do not overwrite repository-specific context with generic platform template text.
• No ejecutar ai-platform run.
• No modificar backend, endpoints, logica de datos, generacion de snapshots ni scripts backend.
• No tocar ai/system-metrics.md.
• No tocar frontend/assets/img/weapons/, assets/SVGs de armas ni copias relacionadas.
• No reemplazar ni editar fisicamente imagenes de clanes.
• No reactivar Elo/MMR ni reintroducir Comunidad Hispana #03.

Validation

Before completing the task ensure:

• index.html, historico.html, stats.html y ranking.html mantienen navegacion superior comun con Inicio, Historico, Estadisticas y Ranking
• los cuatro hero muestran composicion coherente con logo a la izquierda y bloque textual a la derecha
• desaparecen del hero Historico propio, Seccion Stats, Seccion Ranking y cualquier chip equivalente de pagina
• el logo de comunidad no cambia de tamano de forma notable entre index, historico, stats y ranking
• el copy visible mantiene Busca un jugador por nombre o ID y revisa sus resultados semanales, mensuales y ranking anual.
• el copy visible mantiene Consulta los lideres publicos de la comunidad, cambia de periodo y servidor sin salir de la pagina y revisa quien destaca en cada ventana.
• el Top 20 anual se muestra en columnas o grid legible y el player_id no queda pegado al nombre como dato principal
• el logo BxB gana presencia visual sin romper responsive
• git diff --name-only matches the expected scope
• no unrelated files were modified
• integration tests are run when relevant and configured

Outcome

Archivos modificados:

• frontend/index.html
• frontend/historico.html
• frontend/stats.html
• frontend/ranking.html
• frontend/assets/css/hero-header-compact.css
• frontend/assets/css/historico.css
• frontend/assets/css/styles.css
• frontend/assets/js/main.js
• frontend/assets/js/stats.js
• ai/tasks/in-progress/TASK-206-public-frontend-visual-consistency-and-annual-ranking-layout.md

Hero unificado:

• Se marco index, historico, stats y ranking como hero--public-page para dejar explicita la variante publica comun.
• hero-header-compact.css quedo restringido a ese patron comun y historico.css se alineo con la misma escala de padding, gap, logo y copy.
• historico dejo de usar una separacion mas amplia y un logo base mas pequeno que el resto; ahora mantiene una proporcion equivalente a index, stats y ranking.
• stats y ranking conservan logo a la izquierda y bloque textual a la derecha con la misma composicion visual base del hero publico.

Chips eliminados del hero:

• Historico propio
• Seccion Stats
• Seccion Ranking

Ranking anual:

• El Top 20 anual de stats paso de lista compacta apilada a una tabla legible con columnas Posicion, Jugador, Valor / Kills, Partidas, Muertes, Teamkills y K/D.
• El player_id se mantiene como dato secundario visual en una segunda linea bajo el nombre, en vez de aparecer pegado al jugador.
• El bloque superior del ranking anual se suavizo con copy menos tecnico y metadatos presentados en tarjetas (Servidor, Año, Lectura, Partidas base, Actualizado).
• No se tocaron endpoint ni contrato API; solo se cambio la presentacion generada por stats.js y su CSS asociado.

Clanes / BxB:

• BxB recibio una variante visual especifica de tarjeta y logo (clan-card--bxb, clan-card__logo--bxb) para ganar presencia sin reemplazar la imagen ni alterar el asset original.
• El ajuste se hizo en layout y CSS, manteniendo la coherencia general de la grilla de clanes y sin romper responsive.

Textos y navegacion:

• La navegacion superior comun queda en Inicio, Historico, Estadisticas y Ranking.
• Se mantuvo el copy principal pedido en stats y ranking.
• Se corrigieron textos visibles de apoyo en main.js como Historico, Region, Informacion, Ultimo snapshot y Proximamente.

Validaciones ejecutadas:

• git status --short --untracked-files=all ejecutado antes de modificar.
• Confirmacion de que TASK-204-align-public-page-heroes-and-navigation-labels.md existe en disco pero sigue untracked; no estaba commiteada.
• Confirmacion previa de cambios no relacionados en ai/system-metrics.md y en frontend/assets/img/weapons/ / SVGs de armas; no se tocaron.
• Lectura previa de AGENTS.md, ai/repo-context.md, ai/architecture-index.md, task previa relevante, HTML/CSS/JS del frontend publico y seccion de clanes.
• Revision de git diff --name-only para comprobar alcance restringido a frontend publico y task.
• Inspeccion visual con capturas headless de Edge sobre frontend/index.html, frontend/historico.html, frontend/stats.html y frontend/ranking.html para verificar navegacion y coherencia del hero.
• Validacion estructural de la nueva tabla anual por inspeccion del HTML/JS/CSS renderizado. La vista con datos reales no pudo comprobarse visualmente porque el backend no estaba disponible en la validacion local.

Confirmaciones de alcance:

• No se tocaron backend/, endpoints, logica de datos, snapshots ni scripts backend.
• No se tocaron ai/system-metrics.md, frontend/assets/img/weapons/ ni los SVGs de armas con cambios previos.
• No se reactivo Elo/MMR ni se reintrodujo Comunidad Hispana #03.

Change Budget

• Prefer fewer than 5 modified files.
• Prefer changes under 200 lines when feasible.
• Split the work into follow-up tasks if limits are exceeded.