Normalize current match weapon icon rendering
This commit is contained in:
@@ -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.
|
||||||
|
|
||||||
@@ -822,10 +822,10 @@
|
|||||||
|
|
||||||
.current-match-killfeed__row {
|
.current-match-killfeed__row {
|
||||||
display: grid;
|
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;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
min-height: 54px;
|
min-height: 58px;
|
||||||
padding: 6px 9px;
|
padding: 6px 9px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border: 1px solid rgba(159, 168, 141, 0.14);
|
border: 1px solid rgba(159, 168, 141, 0.14);
|
||||||
@@ -906,9 +906,11 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
min-width: 92px;
|
width: 112px;
|
||||||
min-height: 40px;
|
min-width: 0;
|
||||||
|
min-height: 48px;
|
||||||
padding: 3px 5px;
|
padding: 3px 5px;
|
||||||
|
overflow: hidden;
|
||||||
border: 1px solid rgba(159, 168, 141, 0.18);
|
border: 1px solid rgba(159, 168, 141, 0.18);
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
@@ -918,9 +920,10 @@
|
|||||||
.current-match-killfeed__weapon-icon-frame {
|
.current-match-killfeed__weapon-icon-frame {
|
||||||
display: grid;
|
display: grid;
|
||||||
place-items: center;
|
place-items: center;
|
||||||
width: min(100%, 88px);
|
box-sizing: border-box;
|
||||||
min-width: 0;
|
width: 96px;
|
||||||
min-height: 28px;
|
height: 36px;
|
||||||
|
overflow: hidden;
|
||||||
padding: 3px 7px;
|
padding: 3px 7px;
|
||||||
justify-self: center;
|
justify-self: center;
|
||||||
border: 1px solid rgba(81, 76, 62, 0.22);
|
border: 1px solid rgba(81, 76, 62, 0.22);
|
||||||
@@ -933,8 +936,10 @@
|
|||||||
|
|
||||||
.current-match-killfeed__weapon-icon {
|
.current-match-killfeed__weapon-icon {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: auto;
|
||||||
height: 24px;
|
height: auto;
|
||||||
|
max-width: 82px;
|
||||||
|
max-height: 26px;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
object-position: center;
|
object-position: center;
|
||||||
}
|
}
|
||||||
@@ -942,8 +947,7 @@
|
|||||||
.current-match-killfeed__weapon-fallback {
|
.current-match-killfeed__weapon-fallback {
|
||||||
display: grid;
|
display: grid;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-width: 24px;
|
height: 100%;
|
||||||
height: 24px;
|
|
||||||
place-items: center;
|
place-items: center;
|
||||||
color: rgba(49, 43, 31, 0.86);
|
color: rgba(49, 43, 31, 0.86);
|
||||||
font-size: 0.82rem;
|
font-size: 0.82rem;
|
||||||
@@ -956,7 +960,8 @@
|
|||||||
|
|
||||||
.current-match-killfeed__weapon em {
|
.current-match-killfeed__weapon em {
|
||||||
display: block;
|
display: block;
|
||||||
max-width: 112px;
|
max-width: 104px;
|
||||||
|
min-width: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
color: var(--muted);
|
color: var(--muted);
|
||||||
font-size: 0.58rem;
|
font-size: 0.58rem;
|
||||||
@@ -1270,22 +1275,37 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.current-match-killfeed__row {
|
.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) {
|
@media (max-width: 480px) {
|
||||||
.current-match-killfeed__row {
|
.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;
|
gap: 5px;
|
||||||
padding-inline: 6px;
|
padding-inline: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.current-match-killfeed__weapon {
|
.current-match-killfeed__weapon {
|
||||||
min-width: 82px;
|
width: 92px;
|
||||||
padding-inline: 3px;
|
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 {
|
.current-match-killfeed__player-name {
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|||||||
Reference in New Issue
Block a user