comunidadhll/ai/tasks/done/TASK-154-current-match-killfeed-overlay-layout.md

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.