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

Manually merged
pierre merged 11 commits from revision-ux into main 2026-11-03 19:07:22 +00:00
3 changed files with 1 additions and 131 deletions
Showing only changes of commit 0b1bd97342 - Show all commits
-1
View File
@@ -23,7 +23,6 @@ Demandes de Pierre du 2026-11-03, traitées avant d'ouvrir l'étape 1.
| Sous-étape | Contenu | État | Plan |
| --- | --- | --- | --- |
| 0e.3 | Révision UX arbitrée (session « identité », sur délégation de Pierre) : portrait stable, bandeaux de compte de points, menu en feuille et nouvelle partie annulable, vibrations, écran allumé, paysage « plateau = écran » dès la rotation (ADR 0012 amendé) | ⏳ | `plans/2026-11-03-revision-ux.md` |
| 0e.4 | Position dans l'adresse : chaque position du plateau a un lien direct (ADR 0013) | ⏳ | `plans/2026-11-03-position-dans-l-adresse.md` |
| 0e.5 | Page d'accueil, installation en un toucher (« Ajouter à l'écran d'accueil », proposée par l'app), tutoriel des règles très didactique avec plateaux illustrés, aide réécrite sur un ton plus humain ; textes à valider par Pierre | ⏳ | `plans/2026-11-03-accueil-tutoriel-aide.md` |
@@ -2,7 +2,7 @@
- **Date** : 2026-11-03
- **Étape** : 0e.4 (feuille de route)
- **Statut** : prévu (après la fusion de la révision UX, qui touche les mêmes fichiers)
- **Statut** : prévu
- **Exécutant** : sous-agent general-purpose, dans un worktree
## Objectif
-129
View File
@@ -1,129 +0,0 @@
# Révision UX : portrait stable, compte de points, menu, paysage « plateau = écran »
- **Date** : 2026-11-03
- **Étape** : 0e.3 (feuille de route)
- **Statut** : réalisé, à vérifier par la session principale
- **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.
## Corrections de la recette design (session « identité », sur c6649f9)
F1. Consigne en portrait en texte nu (17 px gras, deux lignes réservées,
sans fond), vide pendant le chargement ; la teinte « à vous » reste au
bandeau du joueur. F2. Case d'arrivée : voile sur le seul triangle de la
flèche, anneau pointillé là où le pion se posera, zone tactile sur toute la
colonne. F3. Flèches laiton de 2,5 px, opacité 0,85, pointes plus petites,
sous les pions. F4. Fin de partie : consigne masquée sous le panneau ;
surtitre « Fin de partie », titre de 24 px, ligne « 8 points pour lui,
videau à 4. ». F5. « Jouer ce coup » en action principale à droite quand le
coup est complet, vérifié dans `make test-browser`.
## Résultat
Rempli par le sous-agent ; la session principale le complète à la clôture.
Fait : points 1 à 9 et ajouts A, B, C ; point 10 (clavier) en grande partie
(table d'actions commune ; Espace, Z, D, P, N, F, M, ?, Échap ; pas encore
le choix des pions aux flèches ni l'affichage des raccourcis `kbd`).
Écarts :
- vibration du lancer : aucune, comme prévu ; « toucher refusé » non fait
(l'écran ne dit pas encore pourquoi) ;
- maintien de l'écran allumé : API Wake Lock appelée, non observable dans les
navigateurs sans écran : vérification à la main sur le téléphone ;
- le bouton « Continuer » reste dans la barre d'actions quand aucun coup
n'est possible, en plus du toucher des dés ;
- « Revoir la partie » ferme le panneau de fin pour regarder le plateau
final : il n'existe pas encore de relecture de partie ;
- en paysage, la ligne d'information (jet d'ouverture, coup de
l'ordinateur en texte) n'a pas de place : la bande centrale porte la
consigne courte ; l'aide reste une page à faire défiler ;
- pictogrammes tracés sur la grille 24 × 24 des maquettes, et non 20 × 20.