Polish match detail final scoreboard
This commit is contained in:
devRaGonSa
@@ -0,0 +1,181 @@
|
||||
---
|
||||
id: TASK-138
|
||||
title: Polish RCON match detail final scoreboard UI
|
||||
status: done
|
||||
type: frontend
|
||||
team: Experto en interfaz
|
||||
supporting_teams:
|
||||
- Frontend Senior
|
||||
- Disenador grafico
|
||||
roadmap_item: rcon-full-data
|
||||
priority: high
|
||||
---
|
||||
|
||||
# TASK-138 - Polish RCON Match Detail Final Scoreboard UI
|
||||
|
||||
## Goal
|
||||
|
||||
Perform a final focused visual polish pass on the historical RCON match detail page so it more closely resembles the public scoreboard style while preserving the HLL Vietnam dark tactical theme.
|
||||
|
||||
## Context
|
||||
|
||||
The match detail page already renders the important RCON/materialized match data. The central result direction is good, but the page still needs a final scoreboard-style polish and removal of rough labels.
|
||||
|
||||
The user likes the central result:
|
||||
|
||||
- score
|
||||
- map
|
||||
- Warfare
|
||||
- winner
|
||||
|
||||
The page should avoid implementation/source noise and should not expose event timeline, confidence/source/base, snapshot wording, Elo/MVP blocks or Comunidad Hispana #03.
|
||||
|
||||
## Files to Read First
|
||||
|
||||
- `AGENTS.md`
|
||||
- `ai/architecture-index.md`
|
||||
- `ai/repo-context.md`
|
||||
- `ai/orchestrator/frontend-senior.md`
|
||||
- `ai/orchestrator/ui-expert.md`
|
||||
- `ai/orchestrator/graphic-designer.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-138-final-scoreboard-polish`.
|
||||
2. Make the match detail page resemble the public scoreboard style more closely:
|
||||
- large central score
|
||||
- side labels left/right
|
||||
- bigger faction icons
|
||||
- map/mode/winner around the central score
|
||||
- compact metadata below
|
||||
3. Remove `Partida RCON materializada` from the hero subtitle.
|
||||
4. Replace the hero subtitle with only the server name or server + match date if available.
|
||||
5. Keep `Datos disponibles` only if it still makes sense.
|
||||
6. If `Datos disponibles` no longer fits the polished direction, use a more scoreboard-like heading.
|
||||
7. Ensure these are not visible:
|
||||
- `Confianza`
|
||||
- `Fuente`
|
||||
- `Base`
|
||||
- `Eventos`
|
||||
- `Línea de tiempo`
|
||||
- `MESSAGE`
|
||||
- `TEAM SWITCH`
|
||||
- `CONNECTED`
|
||||
- `KILL`
|
||||
- `MATCH START`
|
||||
- `MATCH END`
|
||||
- `snapshot`
|
||||
- Elo/MVP blocks
|
||||
- Comunidad Hispana #03
|
||||
8. Preserve the player table.
|
||||
9. Preserve known match values for the Carentan detail page:
|
||||
- Map: `Carentan`
|
||||
- Score: `3 : 2`
|
||||
- Winner: `Aliados`
|
||||
- Duration: `1 h 30 min`
|
||||
- AntonioPruna: 1 kill, 0 deaths, `M1 GARAND`
|
||||
- victim row: `death_by` AntonioPruna
|
||||
10. Keep visual consistency with the dark HLL Vietnam theme.
|
||||
11. Keep the layout responsive.
|
||||
12. Do not show implementation/debug text in the UI.
|
||||
|
||||
## 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 tiny presentation contract issue is strictly necessary and documented.
|
||||
- Do not modify unrelated files.
|
||||
- Do not add Elo/MVP blocks.
|
||||
- Do not add Comunidad Hispana #03.
|
||||
- Do not reintroduce event timeline, confidence/source/base cards or `snapshot` wording.
|
||||
|
||||
## 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`.
|
||||
- Hero does not show `Partida RCON materializada`.
|
||||
- The scoreboard area has a large central score, left/right sides, larger faction icons, and compact metadata.
|
||||
- AntonioPruna still shows 1 kill, 0 deaths, `M1 GARAND`.
|
||||
- Victim row still shows `death_by` AntonioPruna.
|
||||
- No timeline/events section is visible.
|
||||
- No confidence/source/base cards are visible.
|
||||
- No event labels such as `MESSAGE`, `TEAM SWITCH`, `CONNECTED`, `KILL`, `MATCH START` or `MATCH END` appear.
|
||||
- No `snapshot`, Elo/MVP block or Comunidad Hispana #03 appears.
|
||||
- Player table is preserved and readable.
|
||||
- Layout remains responsive on desktop and mobile.
|
||||
|
||||
## Git Requirements
|
||||
|
||||
- Use branch `codex/task-138-final-scoreboard-polish`.
|
||||
- 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
|
||||
|
||||
- Replaced the hero subtitle with only the server name, removing RCON implementation wording from the visible hero.
|
||||
- Renamed the main detail heading from `Datos disponibles` to `Marcador final`.
|
||||
- Increased the scoreboard score column and faction emblem sizing while preserving the left/right side layout, central score, map, mode, winner and compact metadata.
|
||||
- Removed the unused hidden timeline markup from `frontend/historico-partida.html` so event labels such as `Eventos` and `Linea de tiempo` are no longer present in the match detail DOM.
|
||||
- Preserved the player table, map hero, safe scoreboard action behavior and existing HLL Vietnam dark tactical styling.
|
||||
|
||||
## 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 `Marcador final`, `3 : 2`, `Ganador: Aliados`, `Carentan`, `1 h 30 min`, `AntonioPruna` and `M1 GARAND`.
|
||||
- Verified rendered DOM does not include `Partida RCON materializada`, `Confianza`, `Fuente`, `Base`, `Eventos`, `Linea de tiempo`, event labels, `snapshot`, Elo/MVP blocks or Comunidad Hispana #03.
|
||||
- Captured screenshots outside the repository at `C:\Temp\task-138-match-detail-final.png`, `C:\Temp\task-138-match-detail-mobile-final.png` and `C:\Temp\task-138-match-detail-mobile-score-final.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
Block a user