135 lines
4.5 KiB
Markdown
135 lines
4.5 KiB
Markdown
# Story 7.1: Implémenter le système de classement (Top 100)
|
|
|
|
Status: review
|
|
|
|
## Story
|
|
|
|
As a utilisateur,
|
|
I want voir le classement des meilleurs utilisateurs,
|
|
So que je peux me comparer avec la communauté.
|
|
|
|
## Acceptance Criteria
|
|
|
|
**Given** plusieurs utilisateurs ont consulté des prédictions
|
|
**When** j'accède au classement
|
|
**Then** je vois le Top 100 des utilisateurs
|
|
**And** le classement est basé sur le taux de précision et le nombre de prédictions consultées
|
|
**And** mon rang personnel est mis en évidence si je suis dans le Top 100
|
|
|
|
**Given** le classement est affiché
|
|
**When** je consulte la liste
|
|
**Then** chaque utilisateur montre : rang, pseudo (ou anonyme), précision, nombre de prédictions
|
|
**And** le design est attrayant et encourage la compétition saine
|
|
|
|
## Tasks / Subtasks
|
|
|
|
- [x] Créer la page de classement (AC: #1)
|
|
- [x] Créer `src/app/(dashboard)/classement/page.tsx`
|
|
- [x] Récupérer le Top 100 depuis l'API
|
|
- [x] Afficher la liste des utilisateurs classés
|
|
- [x] Utiliser shadcn/ui components (Card, Table, Badge)
|
|
- [x] Design attrayant et encourageant
|
|
|
|
- [x] Créer le composant de classement item (AC: #2)
|
|
- [x] Créer `src/components/leaderboard/LeaderboardItem.tsx`
|
|
- [x] Afficher: rang, pseudo, précision, nombre de prédictions
|
|
- [x] Ajouter icône de rang (médaille pour top 3)
|
|
- [x] Utiliser shadcn/ui components
|
|
- [x] Design responsive
|
|
|
|
- [x] Créer le composant de médaille (AC: #2)
|
|
- [x] Créer `src/components/leaderboard/RankBadge.tsx`
|
|
- [x] Afficher médaille pour rang 1, 2, 3
|
|
- [x] Utiliser des icônes ou emojis (🥇, 🥈, 🥉)
|
|
- [x] Ajouter animation ou effet visuel
|
|
- [x] Utiliser shadcn/ui Badge
|
|
|
|
- [x] Créer le composant de rang personnel (AC: #1)
|
|
- [x] Créer `src/components/leaderboard/PersonalRank.tsx`
|
|
- [x] Récupérer le rang de l'utilisateur connecté
|
|
- [x] Afficher le rang personnel en évidence
|
|
- [x] Afficher message personnalisé (ex: "Tu es 42ème!")
|
|
- [x] Utiliser shadcn/ui components
|
|
|
|
- [x] Créer l'endpoint API pour le classement (AC: #1)
|
|
- [x] Créer `GET /api/v1/leaderboard`
|
|
- [x] Calculer le classement des utilisateurs
|
|
- [x] Filtrer Top 100 par taux de précision
|
|
- [x] Inclure le nombre de prédictions comme critère secondaire
|
|
- [x] Retourner la liste classée
|
|
|
|
- [x] Créer le système de calcul du classement (AC: #1, #2)
|
|
- [x] Créer `src/services/leaderboardService.ts`
|
|
- [x] Calculer le taux de précision pour chaque utilisateur
|
|
- [x] Classer les utilisateurs par taux de précision
|
|
- [x] Utiliser le nombre de prédictions comme tie-breaker
|
|
- [x] Ajouter les données de l'utilisateur connecté
|
|
|
|
- [x] Tester le classement complet (Tous AC)
|
|
- [x] Tester l'affichage du Top 100
|
|
- [x] Tester le calcul du classement
|
|
- [x] Tester l'affichage du rang personnel
|
|
- [x] Tester le design attrayant
|
|
- [x] Tester sur mobile et desktop
|
|
|
|
## Dev Notes
|
|
|
|
### Stack Technique
|
|
- **API:** React Query
|
|
- **State:** Zustand
|
|
- **UI:** shadcn/ui + Tailwind CSS
|
|
- **Calculs:** JavaScript/TypeScript
|
|
|
|
### File Structure
|
|
```
|
|
src/
|
|
├── app/
|
|
│ └── (dashboard)/
|
|
│ └── classement/page.tsx
|
|
├── components/
|
|
│ └── leaderboard/
|
|
│ ├── LeaderboardItem.tsx
|
|
│ ├── RankBadge.tsx
|
|
│ └── PersonalRank.tsx
|
|
└── services/
|
|
└── leaderboardService.ts
|
|
```
|
|
|
|
### References
|
|
- [Source: _bmad-output/planning-artifacts/epics.md#Story-7.1]
|
|
|
|
## Dev Agent Record
|
|
|
|
### Agent Model Used
|
|
GLM-4.7
|
|
|
|
### Completion Notes List
|
|
- Système de classement Top 100 implémenté
|
|
- Calcul de classement fonctionnel
|
|
- Rang personnel affiché en évidence
|
|
- Design attrayant créé
|
|
- Composants UI créés avec shadcn/ui
|
|
- Tests unitaires écrits et passant
|
|
- Endpoint API FastAPI créé
|
|
- Service de calcul backend implémenté
|
|
|
|
### File List
|
|
Frontend (Next.js):
|
|
- `src/app/(dashboard)/classement/page.tsx`
|
|
- `src/components/leaderboard/LeaderboardItem.tsx`
|
|
- `src/components/leaderboard/RankBadge.tsx`
|
|
- `src/components/leaderboard/PersonalRank.tsx`
|
|
- `src/components/leaderboard/__tests__/RankBadge.test.tsx`
|
|
- `src/components/leaderboard/__tests__/LeaderboardItem.test.tsx`
|
|
- `src/components/leaderboard/__tests__/PersonalRank.test.tsx`
|
|
- `src/components/ui/skeleton.tsx`
|
|
- `src/services/leaderboardService.ts`
|
|
- `src/services/__tests__/leaderboardService.test.ts`
|
|
- `src/hooks/useUser.ts`
|
|
|
|
Backend (FastAPI):
|
|
- `backend/app/schemas/leaderboard.py`
|
|
- `backend/app/services/leaderboard_service.py`
|
|
- `backend/app/api/v1/leaderboard.py`
|
|
- `backend/app/main.py` (modifié pour inclure le routeur leaderboard)
|