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 : prévu
• 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.

Résultat

À remplir à la clôture.