rgonsal/comunidadhll
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
eefeb86767fa760a6c5991c9a605d9925fac4e38
comunidadhll/ai/tasks/done/TASK-136-add-rcon-match-detail-map-hero-image.md
devRaGonSa c4f62bbe76 Add match detail map hero image
2026-05-20 10:39:10 +02:00

7.5 KiB
Raw Blame History

id, title, status, type, team, supporting_teams, roadmap_item, priority
id title status type team supporting_teams roadmap_item priority
TASK-136 Add RCON match detail map hero image done frontend Frontend Senior
Experto en interfaz
Disenador grafico
rcon-full-data 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.
Reference in New Issue View Git Blame Copy Permalink