comunidadhll/ai/tasks/done/TASK-156-current-match-realtime-killfeed-and-home-buttons-layout.md

# TASK-156 - Current match realtime killfeed and home buttons layout

Status: done

## Goal

Refine the current-match kill feed into a real-time FPS-style panel and make the home server card buttons sit at the bottom-right aligned with the map card, without changing unrelated layout.

## Background

The current-match page already has a compact kill feed overlay implemented in `frontend/assets/js/partida-actual.js` and related CSS.

The current visual direction is closer to the goal, but the desired behavior is now more specific:

- The feed should feel like a real-time FPS killfeed screen.
- It should not look like a static list of historical events.
- Each event should show only:
  - killer
  - weapon icon or compact weapon label
  - victim
- The feed should behave like a small rectangular live panel.
- Events should fill from top to bottom in three visual columns.
- As new events arrive, old events should visually shift left and eventually disappear.
- The visible feed must be capped and must not grow indefinitely.
- Repeated polling must not duplicate events or cause visual flicker.

There is also a small home page layout request:

- In the home server cards, only the "Historico" and "Partida actual" buttons should remain.
- Those buttons should sit lower, at the bottom-right, aligned with the map card height.
- Do not change anything else in the home layout.

Current user-observed issues:

- The kill feed is still too much like a list rather than a real-time screen.
- The home server card buttons are still too high and leave unused empty space in the bottom-right corner.

## 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/main.js`

Inspect the current-match kill feed behavior, current polling/deduplication state, relevant current-match CSS, and the home server card action markup before changing code.

## Expected Files to Modify

Allowed changes:

- `frontend/assets/js/partida-actual.js`
- `frontend/partida-actual.html` if needed
- `frontend/assets/css/historico.css` or relevant current-match CSS
- `frontend/assets/css/styles.css` or home CSS for the server card button alignment
- `frontend/assets/js/main.js` only if the button markup still needs cleanup
- local weapon icon/fallback assets if necessary
- focused frontend 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 query RCON directly from the frontend.
- Do not break the current-match scoreboard/header.
- Do not break the historical page.
- Do not break historical match detail pages.
- Do not depend on server #03.
- Do not add external/CDN image dependencies.
- Do not reintroduce the home card "Scoreboard publico" button.
- Do not change the home server card content except button placement/layout if not strictly needed.
- Keep current public scoreboard URLs trusted and without `/games`.

## Implementation Requirements

### 1. Current-match kill feed layout

- Replace any remaining card/list feel with a compact rectangular "live feed screen".
- The feed should visually fit in a bounded panel.
- It should not expand vertically without limit.
- It should show a maximum number of events, for example 12 or 15.

### 2. Event rendering

Each event must show only:

- killer name
- weapon icon or compact weapon badge
- victim name

Avoid noisy timestamp display in the main row unless it is subtle or useful.

### 3. Three-column live flow

- Desktop layout must visually use three columns.
- Events should fill top-to-bottom and then across columns in a predictable way.
- Newer events should be visually prioritized.
- Older events should move/disappear as the capped list updates.
- On tablet/mobile, fall back safely to two columns or one column.

### 4. Real-time behavior

- Preserve `event_id` deduplication.
- Do not duplicate rows on polling.
- Avoid full-panel flicker every poll.
- Keep already-rendered events stable when no new events arrive.
- Add/remove events cleanly when the cap is exceeded.

### 5. Weapon display

- Use local/fallback icons or compact glyph badges.
- Include mappings for currently seen examples:
  - `M1 GARAND`
  - `MP40`
  - `M1A1 THOMPSON`
  - `UNKNOWN`
- Unknown weapons should show a generic fallback, not broken image.
- Do not use external URLs.

### 6. Teamkill

- Teamkills must remain distinguishable but compact.
- Do not let teamkill badges dominate the layout.

### 7. Feed copy

- If there are no current events: "Todavia no se han detectado bajas en esta partida."
- If events are current/open-window: "Bajas detectadas en la partida actual."
- If events are fresh but partial: "Cobertura parcial desde AdminLog reciente."
- If stale/no current events: "Sin bajas recientes asociadas a la partida actual."

### 8. Home server card layout

- Ensure only two per-server buttons are visible:
  - "Historico"
  - "Partida actual"
- Remove/hide "Scoreboard publico" from the home server card.
- Move the two buttons down to the lower-right of the card, aligned visually with the map card at the bottom-left.
- Keep the map card compact and do not enlarge it.
- Do not change the rest of the home content/layout.
- Preserve responsive behavior.

### 9. Validation

- Run `node --check frontend/assets/js/partida-actual.js`.
- Run `node --check frontend/assets/js/main.js` if modified.
- Run `git diff --check`.
- Rebuild frontend if needed.

## Manual Verification Steps

- Open `http://localhost:8080/partida-actual.html?server=comunidad-hispana-01`.
- Open `http://localhost:8080/partida-actual.html?server=comunidad-hispana-02`.
- Verify the kill feed looks like a compact rectangular live overlay.
- Verify each event row shows:
  - killer
  - weapon icon/badge
  - victim
- Verify the feed uses three columns on desktop.
- Verify older events disappear instead of growing endlessly.
- Verify repeated polling does not duplicate events.
- Verify the feed does not flicker on every refresh.
- Verify unknown weapons use a fallback.
- Verify no raw AdminLog line is displayed.
- Open the home page: `http://localhost:8080/`.
- Verify each server card shows only:
  - Historico
  - Partida actual
- Verify those buttons sit at the bottom-right, visually aligned with the map card.
- Verify no other home page layout area changes unexpectedly.

## Expected Outcome

The current-match kill feed behaves like a compact real-time combat overlay, and the home server card action buttons are cleanly aligned bottom-right with only "Historico" and "Partida actual" visible.

## Outcome

- Kept the existing `event_id`-based killfeed refresh path and changed only its
  rendering surface: the capped 15-event panel now reads as a bounded combat
  screen with three desktop columns, while smaller breakpoints remain bounded.
- Removed the home server-card public-scoreboard action from the hydrated markup
  and left the remaining `Historico` / `Partida actual` actions aligned by the
  existing status-column layout.
- Validated with:
  - `node --check frontend/assets/js/partida-actual.js`
  - `node --check frontend/assets/js/main.js`
  - `git diff --check`
  - `docker compose up -d --build frontend`
  - live endpoint checks for `/api/current-match/kills` on Comunidad Hispana
    `#01` and `#02`
  - rendered Chrome headless screenshots of the home page, current-match `#01`
    desktop view and current-match `#02` mobile empty-state view
- The in-app Browser automation runtime was not callable after tool discovery,
  so rendered validation used local headless Chrome against the task URLs.

## 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.