Ustagammon/docs/plans/2026-11-03-revision-ux.md

Révision UX : portrait stable, compte de points, menu, paysage « plateau = écran »

• Date : 2026-11-03
• Étape : 0e.3 (feuille de route)
• Statut : en cours
• Exécutant : sous-agent general-purpose, dans un worktree

Objectif

Appliquer la revue UX (0e.2) telle qu'arbitrée par la session « identité » sur délégation de Pierre le 2026-11-03, et l'amendement de l'ADR 0012.

Références

• Maquettes : https://claude.ai/artifact/CQw6vbDpi6XQqVWQa4sANe, rangées « Révision UX » en bas du canevas.
• Règles : section « Interaction » du design system, copiée dans docs/identite/charte/interaction.md (durées, courbes, motifs de vibration, touches) et composant Icons (10 pictogrammes).
• Rapport du designer UI : conservé dans la description de la MR qui clôt ce plan.

Décisions à appliquer

1. Portrait stable (maquette « Portrait révisé ») :
   • une barre haute avec le symbole et trois pictogrammes, libellés de 13 px dessous : Aide, Plein écran, Menu ;
   • le bandeau de l'ordinateur, puis le plateau, puis le bandeau du joueur ;
   • une ligne réservée de 44 px : le dernier coup de l'ordinateur avec ↻, ou la ligne du maître ;
   • la consigne ;
   • une barre d'actions collée en bas, l'action secondaire à gauche et la principale à droite (« Jouer ce coup »). Toucher les dés valide aussi ;
   • la durée de calcul affichée disparaît.
2. Compte de points :
   • en portrait, des bandeaux. Les chiffres sont en 20 px gras, alignés. Le bandeau de celui qui a la main est en accent-soft (« Vous · à vous de jouer »). L'écart s'écrit « mène de 8 », en muted, du côté de celui qui mène. Toucher le chiffre ouvre une bulle avec le texte de la fiche du glossaire (source unique, ADR 0008) ;
   • en paysage, des pastilles aux bouts de la barre.
3. Menu en feuille qui monte du bas :
   • il contient Nouvelle partie, Plein écran, Aide et glossaire, Thème, et les interrupteurs Vibrations et « Écran allumé pendant la partie » ;
   • « Nouvelle partie » agit sans confirmation. Un bandeau « Nouvelle partie commencée. Reprendre l'ancienne » reste 10 s avec une barre de temps, et l'ancienne partie se restaure depuis son journal ;
   • plus de window.confirm.
4. Pas de passage automatique du tour quand aucun coup n'est possible : les dés sont barrés avec le message, et le joueur passe en touchant les dés (ou Espace). Ajouter overscroll-behavior: none et user-select: none. L'écran reste allumé pendant une partie (Wake Lock), activé par défaut, avec un interrupteur.
5. Paysage, « le plateau est l'écran » (ADR 0012 amendé) :
   • la vue s'applique dès la rotation, sur 100dvh ;
   • la géométrie suit l'écran, par une fonction pure testée unitairement, d'après les formules du composant Board des maquettes ;
   • une colonne de commandes à gauche dans le cadre : menu en haut, videau au milieu, ↶ en bas, remplacé par ↻ quand le coup de l'ordinateur est montré ;
   • les sorties restent libres ;
   • numéros des flèches à 12 px au moins ;
   • la fin de partie s'affiche dans un panneau centré sur un voile ;
   • le plein écran s'ouvre sur un geste (pictogramme ou menu), avec requestFullscreen puis screen.orientation.lock et un repli par rotation CSS. Ce n'est pas le réglage par défaut de l'app installée.
6. Vibrations (navigator.vibrate, si disponible) aux quatre moments, avec les motifs d'interaction.md : pion posé, pion frappé, double proposé par l'ordinateur, fin de partie. Elles sont activées par défaut, rien au lancer des dés, et elles doublent toujours un signal visible.
7. Pictogrammes du composant Icons, en SVG dans le site (CSP : pas de style en ligne).
8. Consigne : forme longue pendant les trois premières parties, puis forme courte.
9. Mouvement :
   • durées de 90, 160 et 240 ms, avec la courbe cubic-bezier(0.2, 0, 0, 1) ;
   • l'ordinateur joue pion par pion : 160 ms par pion, 120 ms de pause ;
   • prefers-reduced-motion est respecté.
10. Clavier (priorité basse) : prévoir dans l'architecture une table d'actions commune au toucher et au clavier. Les touches d'interaction.md peuvent venir dans une MR ultérieure.

Consignes

ADR 0007 : ni le domaine ni le moteur ne changent pour la mise en page. ADR 0008 : scénarios Gherkin pour les comportements visibles nouveaux (nouvelle partie annulable, menu). Aucune nouvelle dépendance. tests/browser/play.mjs étendu aux deux orientations, avec des captures Playwright en 412×915, 915×412 et 844×320, en thème clair et sombre, rangées dans un dossier indiqué par la session principale pour la revue design. make lint, make test et make test-browser passent.

Ajouts du 2026-11-03 (session principale, à la délégation)

A. Réponse immédiate au chargement (revue design de la session « identité ») : pendant « Chargement du moteur… », le plateau est dessiné tout de suite, non interactif, dans la position de la partie enregistrée ou celle de départ. Le plateau ne dépend pas du moteur pour se dessiner : le dernier plateau décodé est gardé dans le stockage local, sans réimplémenter de règle. Le message tient sur la ligne d'information, et les zones restent en place quand le moteur arrive.

B. Recette automatisée : make test-browser vérifie les critères vérifiables de docs/identite/charte/recette-ux.md, notamment :

• les boîtes du plateau et de la barre d'actions stables d'une capture à l'autre ;
• aucune cible tactile sous 44 px ;
• les numéros de flèches à 12 px au moins ;
• aucun window.confirm, vérifié dans le code et à l'exécution ;
• les flèches impaires et paires de couleurs différentes ;
• le cadre bord à bord en paysage ;
• la rotation sans perte d'état ;
• la reprise exacte de la partie après « Nouvelle partie » puis « Reprendre l'ancienne ».

Les captures vont dans build/browser-shots/revision-ux/, à 412×915, 915×412 et 844×320, en thème clair et sombre, à plusieurs moments de la partie (chargement, à vous de lancer, coup en cours, coup de l'ordinateur montré, menu ouvert, fin de partie).

C. Instabilité des tests : tests/browser.sh et tests/test_site.sh construisaient tous deux l'image Docker ustagammon/site-test:local. Quand plusieurs worktrees la construisent en même temps, docker échoue (« parent snapshot ... does not exist »). L'étiquette reçoit un suffixe propre au worktree (hachage court du chemin du dépôt), et l'image est supprimée en fin de test.

Résultat

À remplir à la clôture.