Add match detail map hero image

2026-05-20 10:39:10 +02:00
parent 8343720235
commit c4f62bbe76
22 changed files with 152 additions and 7 deletions
--- a/ai/tasks/done/TASK-136-add-rcon-match-detail-map-hero-image.md
+++ b/ai/tasks/done/TASK-136-add-rcon-match-detail-map-hero-image.md
@@ -0,0 +1,168 @@
+---
+id: TASK-136
+title: Add RCON match detail map hero image
+status: done
+type: frontend
+team: Frontend Senior
+supporting_teams:
+  - Experto en interfaz
+  - Disenador grafico
+roadmap_item: rcon-full-data
+priority: high
+---
+
+# TASK-136 - Add RCON Match Detail Map Hero Image
+
+## Goal
+
+Add local map image support to the historical RCON match detail page and show the current match map image prominently in the top hero/header area.
+
+## Context
+
+The historical match detail page currently shows the central result data well enough, but the top hero/header area should include the match map image, preferably on the right side. The community logo can stay where it is or be reduced if needed, but the map image should become a clear first-viewport visual element.
+
+For the known Carentan match, the UI must map the displayed map to:
+
+- `frontend/assets/img/maps/carentan-day.webp`
+
+The implementation should use local map assets under `frontend/assets/img/maps` and hide the image area gracefully when no asset is available.
+
+## Files to Read First
+
+- `AGENTS.md`
+- `ai/architecture-index.md`
+- `ai/repo-context.md`
+- `ai/orchestrator/frontend-senior.md`
+- `frontend/historico-partida.html`
+- `frontend/assets/js/historico-partida.js`
+- relevant CSS used by `historico-partida.html`
+
+## Expected Files to Modify
+
+- `frontend/historico-partida.html`
+- `frontend/assets/js/historico-partida.js`
+- relevant CSS used by `historico-partida.html`
+- this task file when moving it from `ai/tasks/pending` to `ai/tasks/done`
+
+If additional files are necessary, document why in the task outcome.
+
+## Implementation Requirements
+
+1. Work from a dedicated branch: `codex/task-136-map-hero-image`.
+2. Add map image support on `historico-partida.html` / `historico-partida.js`.
+3. Display the current map image in the top hero/header area, preferably on the right side.
+4. Keep the community logo where it is or reduce it if needed, while adding a prominent map image to the right.
+5. Use map assets from `frontend/assets/img/maps`.
+6. Add a robust JavaScript mapper from map name / `pretty_name` to asset path.
+7. For the known Carentan match, map to `frontend/assets/img/maps/carentan-day.webp`.
+8. Account for likely available asset names:
+   - `carentan-day.webp`
+   - `stmereeglise-day.webp`
+   - `stmariedumont-day.webp`
+   - `utahbeach-day.webp`
+   - `omahabeach-day.webp`
+   - `purpleheartlane-rain.webp`
+   - `hurtgenforest-day.webp`
+   - `foy-day.webp`
+   - `kursk-day.webp`
+   - `kharkov-day.webp`
+   - `driel-day.webp`
+   - `elalamein-day.webp`
+   - `tobruk-day.webp`
+   - `tobruk-dawn.webp`
+   - `mortain-day.webp`
+   - `hill400-day.webp`
+   - `elsenbornridge-day.webp`
+   - `smolensk-day.webp`
+9. If no map image is found, hide the image area gracefully.
+10. Keep the layout responsive.
+11. Do not show implementation/debug text in the UI.
+12. Preserve the player table.
+13. Keep event timeline hidden.
+14. Keep confidence/source/base hidden.
+
+## Constraints
+
+- Keep the change small and focused.
+- Preserve the dark HLL Vietnam visual identity.
+- Do not introduce frameworks or dependencies.
+- Do not modify backend unless a minimal API field issue is strictly necessary and documented.
+- Do not modify unrelated files.
+- Do not show `snapshot` wording, Elo/MVP blocks or Comunidad Hispana #03.
+
+## Validation Commands
+
+Run the relevant checks before marking this task done:
+
+- `node --check frontend/assets/js/historico-partida.js`
+- `node --check frontend/assets/js/historico.js`
+- `node --check frontend/assets/js/historico-recent-live.js`
+- `python -m compileall backend/app`
+- `powershell -ExecutionPolicy Bypass -File scripts/run-integration-tests.ps1`
+- `powershell -ExecutionPolicy Bypass -File scripts/run-rcon-data-pipeline-tests.ps1`
+- `docker compose up -d --build backend frontend`
+- `Invoke-WebRequest "http://localhost:8000/health" | Select-Object -ExpandProperty Content`
+- `Invoke-WebRequest "http://localhost:8000/api/historical/recent-matches?server=all-servers&limit=10" | Select-Object -ExpandProperty Content`
+
+## Manual Verification
+
+Open:
+
+- `http://localhost:8080/historico.html`
+- `http://localhost:8080/historico-partida.html?server=comunidad-hispana-02&match=comunidad-hispana-02%3A1779178461%3A1779183861%3Acarentanwarfare`
+
+Then hard refresh with `Ctrl+F5` and verify:
+
+- Score remains `3 : 2`.
+- Winner remains `Aliados`.
+- Map remains `Carentan`.
+- Duration remains `1 h 30 min`.
+- Map image appears in the hero/right area.
+- For the known Carentan match, the image uses `frontend/assets/img/maps/carentan-day.webp`.
+- Layout remains responsive on desktop and mobile.
+- AntonioPruna still shows 1 kill, 0 deaths, `M1 GARAND`.
+- Victim row still shows `death_by` AntonioPruna.
+- No implementation/debug text appears.
+- No timeline/events section is visible.
+- No confidence/source/base cards are visible.
+- No `snapshot`, Elo/MVP block or Comunidad Hispana #03 appears.
+
+## Git Requirements
+
+- Use branch `codex/task-136-map-hero-image`.
+- Move only this task from `ai/tasks/pending` to `ai/tasks/done` when complete.
+- Add `Outcome` and `Validation Result` sections before completing the task.
+- Stage only intended files.
+- Commit and push the branch.
+- Final git status must be clean.
+
+## Outcome
+
+- Added a hidden map-media slot to `frontend/historico-partida.html` and reveal it only when the current match resolves to a known local map asset.
+- Added `resolveMapImagePath` in `frontend/assets/js/historico-partida.js`, mapping the available local map names including the known Carentan match to `./assets/img/maps/carentan-day.webp`.
+- Added the map assets under `frontend/assets/img/maps/` because the task explicitly depends on local map image files.
+- Updated the historical hero CSS so the logo, match copy and map image form a responsive desktop header and collapse cleanly on mobile.
+- Shortened the RCON hero subtitle to keep the narrow mobile header from clipping while preserving the player table, hidden timeline, hidden confidence/source/base details and existing scoreboard data.
+
+## Validation Result
+
+- PASS: `node --check frontend/assets/js/historico-partida.js`
+- PASS: `node --check frontend/assets/js/historico.js`
+- PASS: `node --check frontend/assets/js/historico-recent-live.js`
+- PASS: `python -m compileall backend/app`
+- PASS: `powershell -ExecutionPolicy Bypass -File scripts/run-integration-tests.ps1`
+- PASS: `powershell -ExecutionPolicy Bypass -File scripts/run-rcon-data-pipeline-tests.ps1`
+  - Note: the script completed successfully but emitted existing `ResourceWarning` messages from backend unittest sqlite connections.
+- PASS: `docker compose up -d --build backend frontend`
+- PASS: `Invoke-WebRequest "http://localhost:8000/health" | Select-Object -ExpandProperty Content`
+- PASS: `Invoke-WebRequest "http://localhost:8000/api/historical/recent-matches?server=all-servers&limit=10" | Select-Object -ExpandProperty Content`
+- Manual/rendered verification: Browser plugin was listed, but the required Node runtime tool was not exposed in this session; used local Chrome headless fallback.
+  - Verified rendered DOM contains `./assets/img/maps/carentan-day.webp`, `3 : 2`, `Ganador: Aliados`, `Carentan`, `1 h 30 min`, `AntonioPruna` and `M1 GARAND`.
+  - Verified timeline section remains hidden and no `snapshot`, Elo/MVP block or Comunidad Hispana #03 appeared in the rendered checks.
+  - Captured screenshots outside the repository at `C:\Temp\task-136-match-detail-final.png` and `C:\Temp\task-136-match-detail-mobile-final-3.png`.
+
+## Change Budget
+
+- Prefer fewer than 5 modified files.
+- Prefer changes under 200 lines when feasible.
+- Split follow-up work into separate tasks if scope grows.