Add kill feed weapon icon background

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 `<img class="current-match-killfeed__weapon-icon" ...>`.
+
+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 `<img>` 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 `<img>` 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 `<img>` 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.

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;
+  min-height: 40px;
-  padding: 2px 5px;
+  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);
+  color: rgba(49, 43, 31, 0.86);
-  border-radius: 3px;
-  color: var(--accent-warm);
   font-size: 0.82rem;
   font-weight: 800;
 }

frontend/assets/js/partida-actual.js

@@ -543,20 +543,26 @@ function resolveKillFeedWeapon(value) {
 
 function renderKillFeedWeaponIcon(weapon) {
   if (!weapon.icon) {
-    return '<span class="current-match-killfeed__weapon-fallback" aria-hidden="true">?</span>';
+    return `
+      <span class="current-match-killfeed__weapon-icon-frame" aria-hidden="true">
+        <span class="current-match-killfeed__weapon-fallback">?</span>
+      </span>
+    `;
   }
   return `
-    <img
+    <span class="current-match-killfeed__weapon-icon-frame" aria-hidden="true">
-      class="current-match-killfeed__weapon-icon"
+      <img
-      src="${escapeHtml(weapon.icon)}"
+        class="current-match-killfeed__weapon-icon"
-      alt=""
+        src="${escapeHtml(weapon.icon)}"
-      width="88"
+        alt=""
-      height="32"
+        width="88"
-      loading="lazy"
+        height="32"
-      decoding="async"
+        loading="lazy"
-      onerror="this.hidden = true; this.nextElementSibling.hidden = false;"
+        decoding="async"
-    />
+        onerror="this.hidden = true; this.nextElementSibling.hidden = false;"
-    <span class="current-match-killfeed__weapon-fallback" aria-hidden="true" hidden>?</span>
+      />
+      <span class="current-match-killfeed__weapon-fallback" hidden>?</span>
+    </span>
   `;
 }