comunidadhll/ai/tasks/pending/TASK-182-add-global-ranking-frontend-page.md

id, title, status, type, team, supporting_teams, roadmap_item, priority

id	title	status	type	team	supporting_teams	roadmap_item	priority
TASK-182-add-global-ranking-frontend-page	Add global ranking frontend page	pending	frontend	Frontend Senior	Experto en interfaz Disenador grafico Backend Senior	foundation	high

TASK-182-add-global-ranking-frontend-page - Add global ranking frontend page

Goal

Create a dedicated Ranking page/section that displays global top lists by timeframe, server, metric, and limit, consuming the backend support built in TASK-181.

Context

This page must be separated from Stats and focused on list-level ranking discovery (global leaders), while clearly linking to Stats for individual player lookup.

Steps

1. Read the listed files first.
2. Add frontend/ranking.html with controls for timeframe, server, metric, and limit.
3. Implement frontend/assets/js/ranking.js to call the global ranking endpoint and render rows.
4. Update shared styles in frontend/assets/css/styles.css as needed, preserving the project visual direction.
5. Wire ranking access from existing navigation (frontend/index.html) only if needed.
6. Add a minimal cross-link to Stats if useful and safe.
7. Document covered UI states and fallback behavior when backend is unavailable.

Files to Read First

• AGENTS.md
• ai/repo-context.md
• ai/architecture-index.md
• docs/global-ranking-page-plan.md
• frontend/index.html
• frontend/historico.html
• frontend/stats.html
• frontend/assets/js/stats.js
• frontend/assets/css/styles.css
• backend/app/routes.py
• ai/tasks/done/TASK-181-add-global-ranking-backend-support.md

Expected Files to Modify

• frontend/ranking.html
• frontend/assets/js/ranking.js
• frontend/assets/css/styles.css
• frontend/index.html, only if navigation needs update
• frontend/stats.html, only if minimal cross-link is required
• scripts/run-stats-validation.ps1 or new ranking validation script
• ai/tasks/done/TASK-182-add-global-ranking-frontend-page.md

Constraints

• No backend modifications.
• No new endpoints.
• No database migrations.
• No Elo/MMR reactivation.
• No reintroduction of Comunidad Hispana #03.
• No frameworks; continue with vanilla HTML/CSS/JS.
• Preserve military/Vietnam/tactical/sober visual identity.
• Do not regress Stats behavior.
• Avoid duplicating complex Stats logic; reuse patterns where practical.

Outcome

• Global ranking page created and consumable.
• Endpoint consumed and documented.
• Validation of UI states:
  • loading
  • backend offline
  • no data
  • annual snapshot missing
  • unsupported metric
  • controlled error
• Validation list and known limitations recorded.
• Recommended follow-up tasks (if any).

Validation

• Run node --check frontend/assets/js/ranking.js.
• Run node --check frontend/assets/js/stats.js.
• Run powershell -ExecutionPolicy Bypass -File scripts/run-integration-tests.ps1.
• Serve frontend with python -m http.server and verify HTTP 200 for:
  • ranking.html
  • assets/js/ranking.js
  • stats.html
• If backend is available, validate ranking calls against live endpoint.
• If backend is unavailable, validate UI offline state.
• Run git diff --name-only and verify scoped changes.