rgonsal/comunidadhll
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add current match killfeed overlay and player stats

Browse Source
This commit is contained in:
devRaGonSa
2026-05-21 18:59:44 +02:00
parent 8a6af3e869
commit 4d7acb6fc5
9 changed files with 1000 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

198
ai/tasks/done/TASK-154-current-match-killfeed-overlay-layout.md Normal file
View File

@@ -0,0 +1,198 @@
# TASK-154 - Current match killfeed overlay layout
Status: in-progress
## Goal
Redesign the current-match kill feed frontend so it behaves like a compact live killfeed overlay.
## Background
The current-match page already renders a kill feed using:
- `GET /api/current-match/kills?server=...`
The feed currently appears as a vertical list of large historical-style cards. This is not the desired UX.
## Desired UX
The kill feed should look like a compact live FPS-style overlay:
- A rectangular live panel.
- Events rendered as compact rows/chips.
- Each event should show:
- killer name
- weapon icon or weapon label fallback
- victim name
- Events should be arranged in three visual columns inside the panel.
- New events should appear progressively.
- Older events should move left and eventually disappear.
- The feed should feel like a real-time combat screen, not a historical list.
The user explicitly wants:
- "una especie de pantalla en tiempo real"
- "simplemente se muestre el texto, el que mata, el arma y alguien mata"
- "iconos del arma que se utiliza"
- "una pequeña pantalla rectangular"
- "se irá poniendo de arriba abajo en tres columnas"
- "se irá desplazando hacia la izquierda e irán desapareciendo las más antiguas"
## Scope
Replace the current large-card kill feed with a compact live overlay on the current-match page.
Allowed changes:
- `frontend/assets/js/partida-actual.js`
- `frontend/partida-actual.html` if needed
- `frontend/assets/css/historico.css` or the relevant CSS used by `partida-actual.html`
- `frontend/assets/css/styles.css` only if the current-match page depends on it
- `frontend/assets/img/weapons/*` if local weapon icons/placeholders are added
- backend only if a small weapon normalization field is needed, but prefer frontend-side mapping first
- focused tests or node validation
## Constraints - DO NOT BREAK
- Do not break `/api/current-match/kills`.
- Do not expose raw AdminLog lines.
- Do not fabricate kill events.
- Do not show stale kills as live kills.
- Do not break the current-match scoreboard/header.
- Do not break historical match detail pages.
- Do not query RCON directly from the frontend.
- Do not depend on server #03.
- Do not require external/CDN assets at runtime.
- If weapon icons are added, they must be local/static assets or generated lightweight inline/SVG placeholders.
- Keep the UI responsive.
## Files to inspect first
Read:
- `frontend/partida-actual.html`
- `frontend/assets/js/partida-actual.js`
- the CSS currently used by `frontend/partida-actual.html`
- focused current-match kill feed tests or validation scripts if present
Inspect the current kill feed rendering, `event_id` handling, scope copy, and current polling behavior before changing code.
## Implementation requirements
### 1. Compact live panel
Replace the current large-card feed rendering with a compact live killfeed panel.
The panel must be visually rectangular and compact. It should look like a live combat overlay, not a list of historical cards.
### 2. Layout
- Use a three-column visual layout on desktop.
- Events should fill vertically within a column, then continue through the next visual position.
- Newer events should be visually prioritized.
- Older events should shift left and disappear once the maximum number of visible events is exceeded.
- On narrow/mobile widths, fall back to one or two columns without overflow.
### 3. Event content
Each kill event must show:
- killer name
- weapon icon or weapon label
- victim name
- optional timestamp only if it does not make the UI noisy
- teamkill indicator if `is_teamkill` is true
### 4. Weapon icons
Add a safe mapping for common weapons currently seen in AdminLog examples:
- `M1 GARAND`
- `MP40`
- `M1A1 THOMPSON`
- `UNKNOWN`
Prefer local SVG/icon placeholders if real weapon assets are not available.
- Do not hotlink external images.
- Unknown weapons must show a generic weapon icon/label fallback.
- The icon mapping should be easy to extend later.
### 5. Motion and transition
- Use CSS transitions/animations only if they are subtle.
- Avoid layout jumps.
- Respect users with reduced motion if possible.
- The feed should not flicker every poll.
### 6. Deduplication
- Preserve existing `event_id` deduplication.
- Re-rendering must not duplicate rows.
- Repeated polling must keep already visible events stable.
### 7. Maximum visible events
- Limit visible events to a reasonable number, for example 12 or 15.
- Older events should be dropped from the visual panel.
- Do not render an infinitely growing list.
### 8. Copy
Use these messages:
- If there are no events: "Todavía no se han detectado bajas en esta partida."
- If scope is open match window: "Bajas detectadas en la partida actual."
- If scope is `recent-admin-log-window`: "Cobertura parcial desde AdminLog reciente."
- If stale/no current events: "Sin bajas recientes asociadas a la partida actual."
### 9. Accessibility
- Keep `aria-live` polite or equivalent.
- Event text must remain readable even if icons fail.
## Validation
Run:
- `node --check frontend/assets/js/partida-actual.js`
- any existing frontend validation if available
## Manual verification checklist
- Open `http://localhost:8080/partida-actual.html?server=comunidad-hispana-01`.
- Open `http://localhost:8080/partida-actual.html?server=comunidad-hispana-02`.
- Verify kill feed appears as a compact rectangular live overlay.
- Verify events render as killer -> weapon/icon -> victim.
- Verify it uses three columns on desktop.
- Verify old events disappear instead of growing endlessly.
- Verify repeated polling does not duplicate events.
- Verify teamkills are visually distinguishable.
- Verify unknown weapons use a clean fallback.
- Verify no raw AdminLog line is shown.
- Verify no external image URLs are required.
## Expected outcome
The current-match kill feed looks and behaves like a compact live FPS-style killfeed overlay with local/fallback weapon icon support.
## AI Platform lifecycle
After implementation and validation:
- Move this task according to the lifecycle defined in `AGENTS.md`.
- Do not mark unrelated tasks as done automatically.
## Outcome
- Replaced the historical-style kill cards with a capped 15-event rectangular overlay in `partida-actual`.
- Kept `event_id` deduplication and avoided poll flicker by only re-rendering when the visible event-id set changes.
- Rendered older visible events first so they occupy the left side of the three-column desktop panel while newer events remain visually prioritized on the right.
- Added local text-glyph weapon placeholders for `M1 GARAND`, `MP40`, `M1A1 THOMPSON` and unknown/other weapons without external assets.
- Validation run:
- `node --check frontend/assets/js/partida-actual.js`
- `scripts/run-historical-ui-regression-tests.ps1`
- `git diff --check`
- `git diff --name-only`
- Scope review: changed product files are `frontend/assets/js/partida-actual.js` and `frontend/assets/css/historico.css`.
- Manual/rendered Browser QA remains to be repeated when the Browser automation entry point is exposed; the local frontend and backend current-match endpoints were reachable during validation.