comunidadhll/ai/tasks/done/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	done	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 that displays public top lists by timeframe, server, metric and limit, consuming the backend support built in TASK-181.

Context

Ranking is now separated from Stats in both navigation and interaction model. Stats remains player-centric; Ranking is list-centric and links back to Stats only when a user wants individual lookup.

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 Modified

• frontend/ranking.html
• frontend/assets/js/ranking.js
• frontend/assets/css/styles.css
• frontend/index.html
• ai/tasks/done/TASK-182-add-global-ranking-frontend-page.md

Constraints Verified

• No backend files were changed in this task.
• No new endpoints were added.
• No database changes were made.
• No Elo/MMR reactivation.
• No Comunidad Hispana #03 reintroduction.
• Stats behavior was left intact.
• Implementation stayed in vanilla HTML/CSS/JS.

Outcome

• Added frontend/ranking.html as a dedicated Ranking page.
• Added frontend/assets/js/ranking.js to:
  • check backend health
  • request /api/ranking
  • switch between weekly, monthly and annual flows
  • render loading, offline, no-data, annual-missing and controlled-error states
• Extended shared styling in frontend/assets/css/styles.css for:
  • ranking filter layout
  • ranking metadata cards
  • ranking table
  • ranking empty state
• Added a minimal Ranking entry point in frontend/index.html.
• Kept cross-linking minimal by linking from Ranking to Stats without modifying stats.html.

Validation

Executed:

• node --check frontend/assets/js/ranking.js
• node --check frontend/assets/js/stats.js
• powershell -ExecutionPolicy Bypass -File scripts/run-integration-tests.ps1
• Local static serving with python -m http.server

HTTP checks:

• ranking.html -> 200
• assets/js/ranking.js -> 200
• stats.html -> 200

Offline-state check:

• Backend was unavailable at http://127.0.0.1:8000.
• A headless Edge DOM capture of ranking.html showed #ranking-backend-state rendered as Backend no disponible, confirming the intended offline fallback path.

Known limitation:

• Live successful ranking calls could not be verified through a running backend during this task because the backend was not available over HTTP in the environment.

Recommended Follow-up

• Add a dedicated ranking frontend regression script so ranking.html state coverage is validated alongside existing historical and stats checks.