100 lines
3.1 KiB
Markdown
100 lines
3.1 KiB
Markdown
---
|
|
id: TASK-182-add-global-ranking-frontend-page
|
|
title: Add global ranking frontend page
|
|
status: done
|
|
type: frontend
|
|
team: Frontend Senior
|
|
supporting_teams:
|
|
- Experto en interfaz
|
|
- Disenador grafico
|
|
- Backend Senior
|
|
roadmap_item: foundation
|
|
priority: 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.
|