# 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 `
` 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**