diff --git a/ai/tasks/done/TASK-212-add-killfeed-weapon-icon-background.md b/ai/tasks/done/TASK-212-add-killfeed-weapon-icon-background.md new file mode 100644 index 0000000..68478fa --- /dev/null +++ b/ai/tasks/done/TASK-212-add-killfeed-weapon-icon-background.md @@ -0,0 +1,150 @@ +--- +id: TASK-212 +title: Add killfeed weapon icon background +status: done +type: frontend +team: Frontend Senior +supporting_teams: + - Experto en interfaz +roadmap_item: foundation +priority: medium +--- + +# TASK-212 - Add killfeed weapon icon background + +## Goal + +Anadir una placa visual clara detras de los iconos de arma negros en la feed de bajas de `partida-actual`, sin modificar ningun SVG, asset fisico ni mapping de armas, para mejorar legibilidad dentro de la estetica militar sobria del proyecto. + +## Context + +En `frontend/assets/js/partida-actual.js`, la feed de bajas renderiza iconos mediante `renderKillFeedWeaponIcon()`. Actualmente esa funcion devuelve directamente un ``. + +Despues de `TASK-209`, `resolveKillFeedWeapon()` prioriza `globalThis.HLL_VIETNAM_CURRENT_MATCH_WEAPON_ICONS`, definido en `frontend/assets/js/current-match-weapon-icons.js`, que apunta a iconos negros desde `./assets/img/weapons/black/`. Como esos SVG tienen fondo transparente, en la feed se ve la silueta negra sin una base clara que la separe del fondo del panel. + +La implementacion debe envolver el icono en un contenedor visual estable, mantener el fallback `?` dentro de la misma placa o con estilo compatible, conservar el texto del arma visible y no alterar la fila de forma exagerada ni romper responsive. + +Preserve the current product identity: Spanish-speaking HLL Vietnam community, military/Vietnam/tactical/sober visual direction and controlled repository evolution. + +## Steps + +1. Revisar los archivos listados en `Files to Read First`, confirmando como se resuelve el icono, donde se renderiza el arma y donde viven los estilos reales del kill feed. +2. Modificar `renderKillFeedWeaponIcon()` para envolver el icono en un contenedor especifico, por ejemplo `current-match-killfeed__weapon-icon-frame`. +3. Mantener el fallback `?` dentro de la misma placa o con un estilo visual equivalente, sin cambiar el mapping de armas. +4. Anadir o ajustar CSS para dar al contenedor: + - fondo blanco o crema militar claro + - borde sutil + - `border-radius` + - `padding` + - tamano estable + - `display: grid` y `place-items: center` +5. Mantener el `` con `object-fit: contain` y sin deformacion. +6. Validar sintaxis JS, revisar visualmente `partida-actual` en local y documentar exclusiones. + +## Files to Read First + +- `AGENTS.md` +- `ai/repo-context.md` +- `ai/architecture-index.md` +- `frontend/partida-actual.html` +- `frontend/assets/js/partida-actual.js` +- `frontend/assets/js/current-match-weapon-icons.js` +- `frontend/assets/css/historico.css` + +## Expected Files to Modify + +- `ai/tasks/in-progress/TASK-212-add-killfeed-weapon-icon-background.md` +- `frontend/assets/js/partida-actual.js` +- `frontend/assets/css/historico.css` + +Optional only if strictly necessary: + +- `frontend/partida-actual.html` +- `frontend/assets/css/styles.css` + +## Constraints + +- Keep the change minimal. +- Preserve HLL Vietnam project identity. +- Do not introduce unnecessary frameworks or dependencies. +- Do not overwrite repository-specific context with generic platform template text. +- No ejecutar `ai-platform run`. +- No tocar `backend/` ni endpoints. +- No tocar `frontend/assets/img/weapons/`. +- No tocar SVGs. +- No modificar imagenes fisicas. +- No cambiar el mapping de armas. +- No reactivar Elo/MMR. +- No reintroducir Comunidad Hispana #03. +- Mantener compatibilidad con apertura directa en navegador y responsive. + +## Validation + +Before completing the task ensure: + +- `renderKillFeedWeaponIcon()` envuelve el icono en un contenedor visual claro y estable +- los iconos negros se ven sobre una caja clara/blanca integrada con la estetica militar de la feed +- el fallback `?` usa la misma placa o un estilo compatible +- el `` mantiene `object-fit: contain` y no se deforma +- la fila del kill feed no crece de forma exagerada +- el texto del arma sigue visible +- se ejecuta: + +```bash +node --check frontend/assets/js/partida-actual.js +node --check frontend/assets/js/current-match-weapon-icons.js +``` + +- se realiza inspeccion visual local de `partida-actual` +- se confirma que no se tocaron: + - `backend/` + - `frontend/assets/img/weapons/` + - SVGs + - `ai/system-metrics.md` +- `git diff --name-only` matches the expected scope +- no unrelated files were modified + +## Outcome + +Documentar: + +- que cambio se hizo en `renderKillFeedWeaponIcon()` +- que clases CSS nuevas o ajustadas se anadieron para la placa del icono +- como queda tratado el fallback `?` +- validacion sintactica y visual realizada +- confirmacion explicita de que no se tocaron backend, assets de armas, SVGs, imagenes fisicas, Elo/MMR ni Comunidad Hispana #03 + +Result: + +- Updated `frontend/assets/js/partida-actual.js` so `renderKillFeedWeaponIcon()` now wraps both the `` and the `?` fallback inside `current-match-killfeed__weapon-icon-frame`. +- Updated `frontend/assets/css/historico.css` with a stable light cream weapon plate and adjusted icon/fallback sizing so black transparent SVGs remain readable without changing the weapon mapping. +- Kept the weapon label visible below the icon plate and preserved the current kill feed structure and responsive behavior. + +Validation performed: + +- PASS: `node --check frontend/assets/js/partida-actual.js` +- PASS: `node --check frontend/assets/js/current-match-weapon-icons.js` +- PASS: visual local inspection using temporary headless-browser screenshots for desktop and mobile widths confirmed: + - black weapon icon visible over a light plate + - fallback `?` rendered inside the same plate + - weapon text still visible + - no exaggerated row growth + - responsive layout remained usable +- PASS: reviewed `git status --short --untracked-files=all` +- PASS: reviewed `git diff --name-only` + +Scope confirmation: + +- No backend file or endpoint was touched. +- No weapon asset, SVG or physical image was modified. +- No weapon mapping or icon path was changed. +- `ai/system-metrics.md` was not touched by this task. +- Elo/MMR was not reactivated. +- Comunidad Hispana #03 was not reintroduced. +- No push was made. + +## 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. diff --git a/frontend/assets/css/historico.css b/frontend/assets/css/historico.css index 8d960fe..36fc605 100644 --- a/frontend/assets/css/historico.css +++ b/frontend/assets/css/historico.css @@ -890,36 +890,50 @@ .current-match-killfeed__weapon { display: grid; - grid-template-rows: 25px auto; + grid-template-rows: auto auto; align-items: center; justify-content: center; - gap: 1px; + gap: 4px; min-width: 92px; - min-height: 38px; - padding: 2px 5px; + min-height: 40px; + padding: 3px 5px; border: 1px solid rgba(159, 168, 141, 0.18); border-radius: 3px; color: var(--text); background: rgba(8, 10, 11, 0.74); } +.current-match-killfeed__weapon-icon-frame { + display: grid; + place-items: center; + width: min(100%, 88px); + min-width: 0; + min-height: 28px; + padding: 3px 7px; + justify-self: center; + border: 1px solid rgba(81, 76, 62, 0.22); + border-radius: 6px; + background: linear-gradient(180deg, rgba(247, 242, 229, 0.96), rgba(226, 218, 198, 0.94)); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.4), + 0 1px 3px rgba(0, 0, 0, 0.18); +} + .current-match-killfeed__weapon-icon { display: block; - width: min(100%, 104px); + width: 100%; height: 24px; object-fit: contain; - filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.72)); + object-position: center; } .current-match-killfeed__weapon-fallback { display: grid; - width: 24px; + width: 100%; + min-width: 24px; height: 24px; - justify-self: center; place-items: center; - border: 1px solid rgba(210, 182, 118, 0.3); - border-radius: 3px; - color: var(--accent-warm); + color: rgba(49, 43, 31, 0.86); font-size: 0.82rem; font-weight: 800; } diff --git a/frontend/assets/js/partida-actual.js b/frontend/assets/js/partida-actual.js index 5ca3133..13a1072 100644 --- a/frontend/assets/js/partida-actual.js +++ b/frontend/assets/js/partida-actual.js @@ -543,20 +543,26 @@ function resolveKillFeedWeapon(value) { function renderKillFeedWeaponIcon(weapon) { if (!weapon.icon) { - return ''; + return ` + + `; } return ` - - + `; }