dd-timer/task_plan.md

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