rgonsal/comunidadhll
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
222e4b9339f7720f7f650dc1650c2aaa5623aabe
comunidadhll/ai/tasks/done/TASK-261-improve-current-match-killfeed-layout-for-normalized-weapon-icons.md

6.9 KiB
Raw Blame History

id, title, status, type, team, supporting_teams, roadmap_item, priority
id title status type team supporting_teams roadmap_item priority
TASK-261 Improve current match killfeed layout for normalized weapon icons done frontend Frontend Senior
Experto en interfaz
current-match high

TASK-261 - Improve current match killfeed layout for normalized weapon icons

Goal

Mejorar el layout del Feed de combate de partida actual para que los iconos de armas normalizados, el label del arma, los nombres de jugadores y los badges de equipo entren correctamente sin cortar filas ni desbordar.

Context

Despues de normalizar los assets de armas y ajustar el frame visual, el problema visible ya no es solo el tamano del icono. El contenedor/card del killfeed tiene poco espacio para killer, tag de equipo, icono, label del arma, victima y tag de equipo. En produccion el feed queda visualmente apretado y algunas filas se perciben cortadas o mal proporcionadas.

Preservar la identidad HLL Vietnam: militar, Vietnam, tactica y sobria. No tocar assets ni backend.

Steps

  1. Diagnosticar el layout actual del killfeed en HTML, JS y CSS relacionados.
  2. Ajustar el layout CSS para dar altura suficiente a las kill cards, columna central estable al arma, ellipsis a nombres/labels y scroll vertical sin cortes.
  3. Mantener dos columnas solo con ancho suficiente y pasar a una columna en ancho medio/mobile.
  4. Validar visualmente las vistas de partida actual para comunidad-hispana-01 y comunidad-hispana-02.
  5. Ejecutar la auditoria publica indicada y documentar resultado.

Files to Read First

  • AGENTS.md
  • ai/architecture-index.md
  • ai/repo-context.md
  • ai/orchestrator/frontend-senior.md
  • ai/orchestrator/ui-expert.md
  • frontend/partida-actual.html
  • frontend/assets/js/partida-actual.js
  • frontend/assets/css/historico.css

Expected Files to Modify

  • frontend/assets/css/historico.css
  • ai/tasks/done/TASK-261-improve-current-match-killfeed-layout-for-normalized-weapon-icons.md

frontend/assets/js/partida-actual.js solo debe modificarse si hace falta anadir clases semanticas o corregir estructura.

Constraints

  • No ejecutar ai-platform run.
  • No hacer commit ni push.
  • No tocar backend, scheduler, RCON, TeamKills, Elo/MMR, configuracion de servidores ni el puerto 27001.
  • No reintroducir Comunidad Hispana #03.
  • No tocar assets fisicos de armas, SVGs, PNGs, frontend/assets/img/weapons/, mapas, clans ni brands.
  • No tocar ai/system-metrics.md.
  • No incluir tmp/, TASK-204 ni cambios previos no relacionados.
  • No usar git add ..
  • Mantener cambios pequenos, verificables y documentados.

Validation

  • Si se toca JS: node --check frontend/assets/js/partida-actual.js.
  • Validacion visual en navegador:
    • /partida-actual.html?server=comunidad-hispana-01
    • /partida-actual.html?server=comunidad-hispana-02
  • Validar con casos reales o simulados: nombres cortos, nombres largos con clan tags, rifle, MG, mina, strafing run / bombing run y arma con label largo.
  • Confirmar que no se cortan filas, el ultimo elemento no queda medio oculto, el icono queda centrado, el nombre del arma no desborda, killer/victima no empujan fuera el arma, dos columnas solo aparecen con ancho suficiente y una columna aparece en ancho medio/mobile.
  • Ejecutar: python .\scripts\audit_public_requests.py --base-url https://comunidadhll.devzamode.es --timeout 30 --output tmp\task261_full_audit_after.json
  • Criterio minimo: CRITICAL 0, current-match-* OK 200 y consola sin TypeError.
  • Revisar git diff --name-only y confirmar que el alcance coincide con la task.

Outcome

Diagnostico corregido:

  • El problema principal no era solo el ancho de cada kill card. El recorte visible venia del contenedor interno que muestra la lista de acciones/kills.
  • El contenedor exacto de la lista es #current-match-feed-list.current-match-killfeed, creado en initializeKillFeed() dentro de .current-match-killfeed-screen.
  • Antes de la correccion inicial, habia doble recorte vertical:
    • .current-match-killfeed-screen: max-height: 520px y overflow: hidden.
    • .current-match-killfeed: max-height: 500px y overflow: hidden.
  • Ese doble overflow podia dejar kills partidas por la mitad en la parte inferior: el wrapper con borde recortaba y la lista interna no tenia scroll vertical util.
  • Tras aumentar la altura de fila a 74px, el viewport de lista debia crecer tambien; con muchas kills, el listado necesitaba scroll claro, padding inferior y comprobacion del ultimo item scrolleado.

Cambios aplicados:

  • .current-match-killfeed-screen queda como wrapper visual con borde, overflow: visible, box-sizing: border-box y padding 10px 10px 12px; no es el nodo scrolleable.
  • .current-match-killfeed queda como unico contenedor scrolleable de la lista:
    • max-height: 620px
    • overflow-y: auto
    • overflow-x: hidden
    • padding-bottom: 12px
    • scroll-padding-bottom: 12px
    • scrollbar-gutter: stable
  • Se mantienen las mejoras previas: filas de min-height: 74px, columna de arma 128px, mobile 104px, ellipsis en nombres/labels y una columna desde max-width: 1280px.

Validacion ejecutada:

  • No se ejecuto node --check frontend/assets/js/partida-actual.js porque no se modifico JS.
  • Validacion visual local con servidor estatico en http://127.0.0.1:4173:
    • /partida-actual.html?server=comunidad-hispana-01
    • /partida-actual.html?server=comunidad-hispana-02
  • Fixture simulada larga fuera del repo con 20 kills, nombres largos, clan tags, rifle, MG, mina, strafing run, bombing run y labels largos.
  • Medicion DOM con Playwright scrolleando la lista hasta el final:
    • desktop 1440px: 2 columnas, max-height: 620px, clientHeight: 620, scrollHeight: 828, ultimo item completo.
    • medio 1100px: 1 columna, max-height: 620px, clientHeight: 620, scrollHeight: 1652, ultimo item completo.
    • mobile 390px: 1 columna, max-height: 620px, clientHeight: 620, scrollHeight: 1648, ultimo item completo.
    • En los tres anchos: lastBottom <= visibleBottom - paddingBottom + 1, clippedRows: 0, nombres/labels con ellipsis.
  • Rutas reales local y publicas con Playwright:
    • partida-actual.html?server=comunidad-hispana-01
    • partida-actual.html?server=comunidad-hispana-02
    • sin errores de consola ni TypeError.
  • Endpoints publicos current-match-* con PowerShell: todos respondieron 200.
  • La auditoria Python no se repitio porque sigue bloqueada por TLS de urllib en este entorno: CERTIFICATE_VERIFY_FAILED: Basic Constraints of CA cert not marked critical.

Alcance:

  • Se modifico solo CSS de frontend y esta task.
  • TASK-261 queda en ai/tasks/done para cierre y commit aislado.
  • No se tocaron assets fisicos, SVGs, PNGs, frontend/assets/img/weapons/, backend, scheduler, RCON, TeamKills, Elo/MMR, mapas, clans, brands, configuracion de servidores, 27001, ai/system-metrics.md ni TASK-204.

Change Budget

  • Preferir menos de 5 archivos modificados.
  • Preferir menos de 200 lineas cuando sea viable.
  • Dividir en follow-up si el alcance crece.
Reference in New Issue View Git Blame Copy Permalink