From 80497bbe9f4903750b4df9e02bd2979d843e03e1 Mon Sep 17 00:00:00 2001 From: devRaGonSa Date: Mon, 15 Jun 2026 09:50:51 +0200 Subject: [PATCH] Normalize current match weapon icon rendering --- ...ize-current-match-weapon-icon-rendering.md | 91 +++++++++++++++++++ frontend/assets/css/historico.css | 50 +++++++--- 2 files changed, 126 insertions(+), 15 deletions(-) create mode 100644 ai/tasks/done/TASK-258-normalize-current-match-weapon-icon-rendering.md diff --git a/ai/tasks/done/TASK-258-normalize-current-match-weapon-icon-rendering.md b/ai/tasks/done/TASK-258-normalize-current-match-weapon-icon-rendering.md new file mode 100644 index 0000000..8bc3aba --- /dev/null +++ b/ai/tasks/done/TASK-258-normalize-current-match-weapon-icon-rendering.md @@ -0,0 +1,91 @@ +--- +id: TASK-258 +title: Normalize current match weapon icon rendering +status: done +type: frontend +team: Frontend Senior +supporting_teams: [] +roadmap_item: foundation +priority: medium +--- + +# TASK-258 - Normalize current match weapon icon rendering + +## Goal + +Normalize weapon icon rendering in the current match combat feed without modifying physical weapon assets. + +## Context + +The current match kill feed renders multiple weapon families with very different SVG proportions. The previous CSS used a flexible icon frame with `min-height` and forced image width, so rifles, MGs, mines, tanks/cannons and pistols could occupy inconsistent visual space across combat rows. + +## Steps + +1. Inspect the generated kill-feed markup in `frontend/assets/js/partida-actual.js`. +2. Inspect current CSS for `.current-match-killfeed__weapon*`. +3. Apply a layout-only fix with a fixed visual box, centered image and contained object fitting. +4. Validate syntax, static CSS rules, local visual behavior and public current-match endpoints. + +## Files to Read First + +- `ai/architecture-index.md` +- `ai/repo-context.md` +- `ai/orchestrator/frontend-senior.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-258-normalize-current-match-weapon-icon-rendering.md` + +## Constraints + +- Do not run `ai-platform run`. +- Do not commit or push. +- Do not touch backend, scheduler, RCON, server config or port `27001`. +- Do not touch TeamKills behavior. +- Do not reactivate Elo/MMR. +- Do not reintroduce Comunidad Hispana #03. +- Do not touch physical weapon assets, weapon SVG/PNG files or `frontend/assets/img/weapons/`. +- Do not touch maps, clans, brands or `ai/system-metrics.md`. +- Do not include `tmp/`, `TASK-204` or unrelated previous changes. + +## Validation + +- `node --check frontend/assets/js/partida-actual.js` passed; the JS file was not modified by this task. +- Static CSS review confirmed the current match weapon icon now uses a fixed frame, centered grid placement and `object-fit: contain`. +- Chrome headless local validation ran against: + `/partida-actual.html?server=comunidad-hispana-01` + `/partida-actual.html?server=comunidad-hispana-02` +- Visual test events covered rifle, MG, mine, tank/cannon, pistol and long artillery labels. +- Chrome metrics for both servers: + icon frame `96px x 36px`, + weapon column `112px`, + row height `72px`, + all test images loaded, + all images stayed inside the frame, + `object-fit: contain`, + labels used one-line ellipsis and stayed inside the weapon card. +- Public audit command executed: + `python .\scripts\audit_public_requests.py --base-url https://comunidadhll.devzamode.es --timeout 30 --output tmp\task258_full_audit_after.json` +- Audit summary: `CRITICAL: 0`. +- Required current-match endpoints returned `OK 200`: + `current-match-comunidad-hispana-01`, + `current-match-comunidad-hispana-02`, + `current-match-kills-comunidad-hispana-01`, + `current-match-kills-comunidad-hispana-02`, + `current-match-players-comunidad-hispana-01`, + `current-match-players-comunidad-hispana-02`. + +## Outcome + +The visual inconsistency came from rendering different weapon asset aspect ratios inside a flexible frame and forcing image width instead of fitting each image inside a fixed visual box. + +The fix is CSS-only in `frontend/assets/css/historico.css`, because `partida-actual.html` loads that stylesheet for the current match feed. The generated HTML already had stable classes, so `frontend/assets/js/partida-actual.js` did not need changes. + +Final desktop icon box: `96px x 36px`. The weapon card column is `112px`; mobile uses a reduced `72px x 32px` icon frame inside a `92px` weapon column. + +No physical weapon assets, SVGs, PNGs, backend files, scheduler, RCON, server configuration, maps, clans, brands, TeamKills, Elo/MMR, Comunidad Hispana #03 or `ai/system-metrics.md` were changed. + diff --git a/frontend/assets/css/historico.css b/frontend/assets/css/historico.css index 3e9a77b..dd63494 100644 --- a/frontend/assets/css/historico.css +++ b/frontend/assets/css/historico.css @@ -822,10 +822,10 @@ .current-match-killfeed__row { display: grid; - grid-template-columns: minmax(0, 1fr) minmax(86px, 112px) minmax(0, 1fr); + grid-template-columns: minmax(0, 1fr) minmax(112px, 128px) minmax(0, 1fr); align-items: center; gap: 8px; - min-height: 54px; + min-height: 58px; padding: 6px 9px; overflow: hidden; border: 1px solid rgba(159, 168, 141, 0.14); @@ -906,9 +906,11 @@ align-items: center; justify-content: center; gap: 4px; - min-width: 92px; - min-height: 40px; + width: 112px; + min-width: 0; + min-height: 48px; padding: 3px 5px; + overflow: hidden; border: 1px solid rgba(159, 168, 141, 0.18); border-radius: 3px; color: var(--text); @@ -918,9 +920,10 @@ .current-match-killfeed__weapon-icon-frame { display: grid; place-items: center; - width: min(100%, 88px); - min-width: 0; - min-height: 28px; + box-sizing: border-box; + width: 96px; + height: 36px; + overflow: hidden; padding: 3px 7px; justify-self: center; border: 1px solid rgba(81, 76, 62, 0.22); @@ -933,8 +936,10 @@ .current-match-killfeed__weapon-icon { display: block; - width: 100%; - height: 24px; + width: auto; + height: auto; + max-width: 82px; + max-height: 26px; object-fit: contain; object-position: center; } @@ -942,8 +947,7 @@ .current-match-killfeed__weapon-fallback { display: grid; width: 100%; - min-width: 24px; - height: 24px; + height: 100%; place-items: center; color: rgba(49, 43, 31, 0.86); font-size: 0.82rem; @@ -956,7 +960,8 @@ .current-match-killfeed__weapon em { display: block; - max-width: 112px; + max-width: 104px; + min-width: 0; overflow: hidden; color: var(--muted); font-size: 0.58rem; @@ -1270,22 +1275,37 @@ } .current-match-killfeed__row { - grid-template-columns: minmax(0, 1fr) minmax(86px, 116px) minmax(0, 1fr); + grid-template-columns: minmax(0, 1fr) minmax(112px, 128px) minmax(0, 1fr); } } @media (max-width: 480px) { .current-match-killfeed__row { - grid-template-columns: minmax(0, 1fr) 82px minmax(0, 1fr); + grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr); gap: 5px; padding-inline: 6px; } .current-match-killfeed__weapon { - min-width: 82px; + width: 92px; padding-inline: 3px; } + .current-match-killfeed__weapon-icon-frame { + width: 72px; + height: 32px; + padding-inline: 5px; + } + + .current-match-killfeed__weapon-icon { + max-width: 62px; + max-height: 23px; + } + + .current-match-killfeed__weapon em { + max-width: 82px; + } + .current-match-killfeed__player-name { display: -webkit-box; overflow: hidden;