POL Mickaël
3e485fd09b
Applique .gitattributes sur tous les fichiers existants. Élimine les différences fantômes entre WSL et Windows. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
115 lines
4.9 KiB
Markdown
Executable File
115 lines
4.9 KiB
Markdown
Executable File
# Plan — Polish UI & Features v1.2.0
|
|
|
|
## Vue d'ensemble
|
|
7 améliorations validées par l'utilisateur pour le Minuteur Dragodinde.
|
|
|
|
---
|
|
|
|
## Phase 1 — Fondations visuelles (rapide, 0 risque)
|
|
|
|
### 1.1 Tooltips sur les pills de stats
|
|
- **Quoi** : Ajouter un `title="Sérénité"`, `title="Endurance"` etc. sur chaque pill
|
|
- **Impact** : Ligne ~1654 (PILL_DEFS forEach) — ajouter un champ `label` et l'injecter en `title=`
|
|
- **Complexité** : Très faible (~5 min)
|
|
- **Risque** : Aucun
|
|
|
|
### 1.2 Indication visuelle "en retard" (pause longue)
|
|
- **Quoi** : Si un timer est en pause depuis > 5 min, colorer le tab en orange/rouge
|
|
- **Impact** :
|
|
- Lignes 1386, 1985 (updateTabDots) — ajouter classe `.paused-long`
|
|
- Détection : `enc.timer.pausedAt && (Date.now() - enc.timer.pausedAt) > 300000`
|
|
- CSS : nouveau style `.tab.paused-long`
|
|
- **Complexité** : Faible (~15 min)
|
|
- **Risque** : Aucun
|
|
|
|
---
|
|
|
|
## Phase 2 — Barre de progression & animations (~1h)
|
|
|
|
### 2.1 Barre de progression sous chaque tab d'enclos
|
|
- **Quoi** : Fine barre colorée (3-4px) sous chaque onglet montrant le % d'avancement global
|
|
- **Impact** :
|
|
- Lignes 1341-1420 (renderTabs) — ajouter un `<div class="tab-progress">` dans chaque tab
|
|
- Lignes 1981-1986 (updateTabDots) — mettre à jour la largeur via `gel()`
|
|
- `enclosGlobalState()` fournit déjà `globalMax`, `allDone`, `ddDone`
|
|
- Calcul % : `ddDone / enc.dragodindes.length` ou basé sur le temps écoulé vs totalSec
|
|
- CSS : `.tab-progress { height:3px; background:var(--ok); transition:width .5s }`
|
|
- **Complexité** : Moyenne (~30 min)
|
|
- **Risque** : Faible — touche le rendu des tabs mais pas la logique
|
|
|
|
### 2.2 Animations de transition entre onglets
|
|
- **Quoi** : Fade-in quand on switch de tab (opacity 0→1)
|
|
- **Impact** :
|
|
- Ligne 40 : CSS `.enclos-content` — ajouter `transition: opacity .2s`
|
|
- Ligne 1465 (renderContent) — set opacity 0 avant innerHTML, puis 1 après un rAF
|
|
- Alternative plus simple : classe `.fade-in` avec animation CSS
|
|
- **Complexité** : Faible (~20 min)
|
|
- **Risque** : Faible — purement visuel, pas de logique métier
|
|
|
|
---
|
|
|
|
## Phase 3 — Thème clair/sombre (~1h30)
|
|
|
|
### 3.1 Système de thème
|
|
- **Quoi** : Toggle dans le header pour basculer entre dark (actuel) et light
|
|
- **Impact** :
|
|
- Lignes 9-14 : Dupliquer les variables dans `[data-theme="light"]` avec des couleurs claires
|
|
- ~320 occurrences de couleurs dans le fichier, MAIS la majorité utilise déjà `var(--xxx)`
|
|
- **Problème principal** : les couleurs inline dans le JS (ex: `style="color:rgb(192,96,255)"`) ne changent PAS avec les variables CSS
|
|
- Il faudra auditer les styles inline dans renderDDs, renderDashboard, etc.
|
|
- Sauvegarde du choix dans `S.theme` (persisté via save())
|
|
- Toggle : bouton 🌙/☀ dans le header
|
|
- **Complexité** : Moyenne-élevée (~1h30)
|
|
- **Risque** : Moyen — beaucoup de couleurs inline à vérifier, risque d'oublis visuels
|
|
- **Effet de bord** : Les couleurs des jauges (--ser, --end, --mat, --amour, --xp) doivent rester lisibles sur fond clair
|
|
|
|
---
|
|
|
|
## Phase 4 — Raccourcis clavier (~30 min)
|
|
|
|
### 4.1 Raccourcis globaux
|
|
- **Quoi** :
|
|
- `Espace` : Play/Pause le timer de l'enclos actif
|
|
- `1-6` : Switch vers l'enclos 1 à 6
|
|
- `D` : Dashboard
|
|
- `N` : Ajouter une DD dans l'enclos actif
|
|
- **Impact** :
|
|
- Ajouter un `document.addEventListener('keydown', ...)` en fin de fichier
|
|
- Vérifier que `document.activeElement` n'est pas un input (sinon les raccourcis interfèrent avec la saisie)
|
|
- **Complexité** : Faible (~30 min)
|
|
- **Risque** : Moyen — doit ignorer les frappes quand un input est focus
|
|
|
|
---
|
|
|
|
## Phase 5 — Planificateur journalier (~2h)
|
|
|
|
### 5.1 Objectifs du jour
|
|
- **Quoi** : Nouvel onglet "Objectifs" où l'utilisateur définit ce qu'il veut accomplir aujourd'hui
|
|
- Ex: "Monter 5 DD au level 34", "Baisser sérénité de 3 DD à -5000"
|
|
- Progression auto-calculée à partir des timers actifs
|
|
- Récap fin de journée
|
|
- **Impact** :
|
|
- Nouvel onglet dans SPECIAL_TABS
|
|
- Nouveau champ `S.dailyGoals` dans l'état
|
|
- Calcul de progression basé sur les stats actuelles vs objectifs
|
|
- Interface : liste d'objectifs avec barres de progression
|
|
- **Complexité** : Élevée (~2h)
|
|
- **Risque** : Moyen — nouvelle feature isolée, mais il faut définir précisément ce qu'est "faisable en une journée humaine" (calcul basé sur les taux de jauges)
|
|
- **Note utilisateur** : "il faut calculer ce qui est faisable et productible en une journée humaine"
|
|
|
|
---
|
|
|
|
## Ordre d'exécution recommandé
|
|
|
|
| Ordre | Phase | Temps estimé | Dépendances |
|
|
|-------|-------|-------------|-------------|
|
|
| 1 | 1.1 Tooltips pills | ~5 min | Aucune |
|
|
| 2 | 1.2 Indication retard | ~15 min | Aucune |
|
|
| 3 | 2.1 Barre progression tabs | ~30 min | Aucune |
|
|
| 4 | 2.2 Animations transition | ~20 min | Aucune |
|
|
| 5 | 4.1 Raccourcis clavier | ~30 min | Aucune |
|
|
| 6 | 3.1 Thème clair/sombre | ~1h30 | Phases 1-2 (pour vérifier le rendu) |
|
|
| 7 | 5.1 Planificateur journalier | ~2h | Aucune |
|
|
|
|
**Total estimé : ~5h**
|