Révision UX : plan clos
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 5.5
parent
c04479c18f
commit
0b1bd97342
@@ -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
|
||||
|
||||
@@ -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.
|
||||
|
||||
Reference in New Issue
Block a user