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

2026-11-03T19:07:08Z

pierre commented

2026-11-03 19:07:08 +00:00

Pourquoi

Au premier essai sur le Fairphone (2026-11-03), Pierre a jugé l'écran de jeu peu agréable, et le paysage « VRAIMENT PAS OPTIMAL ». La revue UX 0e.2 l'a mesuré sur des captures à 412×915 et 915×412 :

en portrait, 38 % de l'écran restait vide sous les boutons, et les zones changeaient de hauteur d'un tour à l'autre ;
le compte de points était une phrase grise, difficile à comparer ;
« Nouvelle partie » était collé à « Aide » et ouvrait un window.confirm hors charte ;
la durée « (0,5 s) » s'affichait après chaque coup de l'ordinateur ;
en paysage, le plateau ne prenait que 55 % de la largeur ;
rien n'empêchait le « tirer pour rafraîchir » en pleine partie.

Pierre avait délégué l'arbitrage de la revue à la session « identité ». L'ADR 0012 a été amendé : la vue paysage s'applique dès la rotation. Le plan docs/plans/2026-11-03-revision-ux.md, supprimé dans cette MR, fixait dix décisions et trois ajouts :

dessiner le plateau dès le chargement ;
automatiser la recette design ;
corriger une instabilité des tests, où plusieurs copies de travail construisaient la même image Docker (« parent snapshot ... does not exist »).

Quoi

Portrait, à zones fixes :

barre haute en pictogrammes libellés : Aide, Plein écran, Menu ;
un bandeau par joueur avec son compte de points en gros chiffres. Le bandeau du joueur qui a la main est teinté, et l'écart s'écrit « mène de 8 ». Toucher le chiffre ouvre la fiche du glossaire ;
le plateau ;
une ligne d'information avec « Revoir » ;
la consigne en texte nu ;
un blanc réservé au futur conseil du maître ;
une barre d'actions en bas, avec l'action principale à droite (« Jouer ce coup »).

Menu en feuille : Nouvelle partie, Plein écran, Aide, Thème, Vibrations et Écran allumé.

« Nouvelle partie » agit tout de suite. Un bandeau « Reprendre l'ancienne » reste 10 s.
Il n'y a plus aucune boîte native.

Aucun coup possible : les dés sont barrés et le joueur passe en les touchant. Le tour ne passe jamais seul, comme Pierre l'avait demandé.

Paysage, « le plateau est l'écran » :

la géométrie suit la forme de l'écran ;
une colonne de commandes à gauche : menu, videau, annuler ou revoir ;
les comptes en pastilles sur la barre ;
la consigne et les dés dans la bande centrale ;
la fin de partie dans un panneau centré.

Plein écran : il s'ouvre sur un geste. Si le verrouillage du paysage est refusé, l'écran est tourné par CSS.

Cases d'arrivée : la flèche elle-même est voilée, avec un anneau pointillé là où le pion se posera.

Coup de l'ordinateur : des flèches laiton fines, sous les pions. Les pions bougent un par un : 160 ms par pion, 120 ms de pause.

Le reste :

vibrations aux moments forts (pion posé, pion frappé, double de l'ordinateur, fin de partie), qu'on peut couper ;
écran maintenu allumé ;
raccourcis clavier ;
le plateau apparaît avant le moteur.

Comment

Le travail a été délégué à un sous-agent. Seule l'interface change : le domaine et le moteur ne sont pas touchés (ADR 0007).

geometry.ts est une fonction pure, testée sous Node d'après les formules des maquettes. Elle convertit en unités du dessin les tailles minimales : 12 px pour les numéros, 13 px pour les textes, 44 px pour les cibles.
app.ts fait passer toutes les actions par une seule table, partagée par le plateau, les boutons et le clavier. La mise en page (classes landscape ou rotated) est recalculée à chaque rotation sans toucher à l'état. L'ancienne partie est restaurée par Game.resume depuis son journal.
Nouveaux modules : settings.ts et storage/settings-store.ts, haptics.ts, icons.ts.
tests/browser/play.mjs vérifie en cours de partie les critères automatisables de docs/identite/charte/recette-ux.md. La vérification complète porte sur 36 vues dans Chromium (trois tailles, deux thèmes, six moments) et sur 10 vues dans Firefox. Elle couvre notamment :
- la stabilité des zones et l'absence de boîte native ;
- les cibles d'au moins 44 px et les numéros d'au moins 12 px ;
- les couleurs des flèches ;
- le cadre bord à bord et la rotation sans perte d'état ;
- la reprise exacte de l'ancienne partie ;
- les vibrations.
tests/site-image.sh donne à l'image de test une étiquette propre à chaque copie de travail.

La session « identité » a fait la recette design sur les captures et demandé cinq corrections, F1 à F5, toutes faites et validées. Après la fusion avec main, un échec sous Firefox est apparu. Sa cause était une course dans le test, pas un défaut de l'app : la rotation pendant une proposition de double fait apparaître le panneau, comme prévu. Le test essaie maintenant le menu au moment de lancer. En chemin, l'agent a corrigé un vrai défaut : le menu passe désormais devant ce panneau.

Vérification par la session principale :

make lint : aucun problème ;
make test : 10/10, dont 17 scénarios Cucumber ;
make test-browser : deux passages verts de suite dans les deux navigateurs, aucune erreur ni violation de CSP.

Choix et compromis

Annuler plutôt que confirmer : bandeau « Reprendre l'ancienne » plutôt qu'une confirmation, comme le prévoit interaction.md.
Plateau au chargement : il est gardé dans localStorage plutôt que décodé sans le moteur, ce qui aurait réimplémenté une règle.
Tailles du texte dans le plateau : ce sont des attributs SVG en unités du dessin. La CSP interdit style, et une classe ne suit pas l'échelle.
Limites assumées :
- pas de ligne d'information en paysage ;
- « Revoir la partie » ferme seulement le panneau ;
- « Continuer » reste en plus du toucher des dés ;
- clavier partiel : pas de choix des pions aux flèches, pas d'affichage des raccourcis ;
- la recette complète tourne dans Chromium seulement.

Risques et déploiement

La mise en page de l'écran de jeu change entièrement.
Le journal des parties ne change pas. Deux clés localStorage s'ajoutent, ustagammon.settings et ustagammon.last-board. Si elles sont illisibles, elles sont ignorées.
À vérifier en main sur le Fairphone : le Wake Lock, le ressenti des vibrations, le verrouillage réel du paysage, et la barre d'adresse en paysage.
Retour arrière : annuler la fusion, sans migration.

Comment vérifier

make lint && make test && make test-browser
ls build/browser-shots/revision-ux/

Sur https://ustagammon.sans.pub après déploiement :

tourner le téléphone : le plateau prend l'écran et la partie reste la même ;
ouvrir Menu, puis « Nouvelle partie », puis « Reprendre l'ancienne » ;
toucher un compte de points ;
jouer un coup complet, puis « Jouer ce coup » ;
tester les vibrations et leur interrupteur.

Hors périmètre

Le conseil du maître (1d).
Les adresses par écran (0e.4).
Le clavier complet.
La vibration « toucher refusé ».
La relecture de partie.

Generated with Claude Code https://claude.com/claude-code

## Pourquoi Au premier essai sur le Fairphone (2026-11-03), Pierre a jugé l'écran de jeu peu agréable, et le paysage « VRAIMENT PAS OPTIMAL ». La revue UX 0e.2 l'a mesuré sur des captures à 412×915 et 915×412 : - en portrait, 38 % de l'écran restait vide sous les boutons, et les zones changeaient de hauteur d'un tour à l'autre ; - le compte de points était une phrase grise, difficile à comparer ; - « Nouvelle partie » était collé à « Aide » et ouvrait un `window.confirm` hors charte ; - la durée « (0,5 s) » s'affichait après chaque coup de l'ordinateur ; - en paysage, le plateau ne prenait que 55 % de la largeur ; - rien n'empêchait le « tirer pour rafraîchir » en pleine partie. Pierre avait délégué l'arbitrage de la revue à la session « identité ». L'ADR 0012 a été amendé : la vue paysage s'applique dès la rotation. Le plan `docs/plans/2026-11-03-revision-ux.md`, supprimé dans cette MR, fixait dix décisions et trois ajouts : - dessiner le plateau dès le chargement ; - automatiser la recette design ; - corriger une instabilité des tests, où plusieurs copies de travail construisaient la même image Docker (« parent snapshot ... does not exist »). ## Quoi **Portrait, à zones fixes :** - barre haute en pictogrammes libellés : Aide, Plein écran, Menu ; - un bandeau par joueur avec son compte de points en gros chiffres. Le bandeau du joueur qui a la main est teinté, et l'écart s'écrit « mène de 8 ». Toucher le chiffre ouvre la fiche du glossaire ; - le plateau ; - une ligne d'information avec « Revoir » ; - la consigne en texte nu ; - un blanc réservé au futur conseil du maître ; - une barre d'actions en bas, avec l'action principale à droite (« Jouer ce coup »). **Menu en feuille :** Nouvelle partie, Plein écran, Aide, Thème, Vibrations et Écran allumé. - « Nouvelle partie » agit tout de suite. Un bandeau « Reprendre l'ancienne » reste 10 s. - Il n'y a plus aucune boîte native. **Aucun coup possible :** les dés sont barrés et le joueur passe en les touchant. Le tour ne passe jamais seul, comme Pierre l'avait demandé. **Paysage, « le plateau est l'écran » :** - la géométrie suit la forme de l'écran ; - une colonne de commandes à gauche : menu, videau, annuler ou revoir ; - les comptes en pastilles sur la barre ; - la consigne et les dés dans la bande centrale ; - la fin de partie dans un panneau centré. **Plein écran :** il s'ouvre sur un geste. Si le verrouillage du paysage est refusé, l'écran est tourné par CSS. **Cases d'arrivée :** la flèche elle-même est voilée, avec un anneau pointillé là où le pion se posera. **Coup de l'ordinateur :** des flèches laiton fines, sous les pions. Les pions bougent un par un : 160 ms par pion, 120 ms de pause. **Le reste :** - vibrations aux moments forts (pion posé, pion frappé, double de l'ordinateur, fin de partie), qu'on peut couper ; - écran maintenu allumé ; - raccourcis clavier ; - le plateau apparaît avant le moteur. ## Comment Le travail a été délégué à un sous-agent. Seule l'interface change : le domaine et le moteur ne sont pas touchés (ADR 0007). - `geometry.ts` est une fonction pure, testée sous Node d'après les formules des maquettes. Elle convertit en unités du dessin les tailles minimales : 12 px pour les numéros, 13 px pour les textes, 44 px pour les cibles. - `app.ts` fait passer toutes les actions par une seule table, partagée par le plateau, les boutons et le clavier. La mise en page (classes `landscape` ou `rotated`) est recalculée à chaque rotation sans toucher à l'état. L'ancienne partie est restaurée par `Game.resume` depuis son journal. - Nouveaux modules : `settings.ts` et `storage/settings-store.ts`, `haptics.ts`, `icons.ts`. - `tests/browser/play.mjs` vérifie en cours de partie les critères automatisables de `docs/identite/charte/recette-ux.md`. La vérification complète porte sur 36 vues dans Chromium (trois tailles, deux thèmes, six moments) et sur 10 vues dans Firefox. Elle couvre notamment : - la stabilité des zones et l'absence de boîte native ; - les cibles d'au moins 44 px et les numéros d'au moins 12 px ; - les couleurs des flèches ; - le cadre bord à bord et la rotation sans perte d'état ; - la reprise exacte de l'ancienne partie ; - les vibrations. - `tests/site-image.sh` donne à l'image de test une étiquette propre à chaque copie de travail. La session « identité » a fait la recette design sur les captures et demandé cinq corrections, F1 à F5, toutes faites et validées. Après la fusion avec `main`, un échec sous Firefox est apparu. Sa cause était une course dans le test, pas un défaut de l'app : la rotation pendant une proposition de double fait apparaître le panneau, comme prévu. Le test essaie maintenant le menu au moment de lancer. En chemin, l'agent a corrigé un vrai défaut : le menu passe désormais devant ce panneau. Vérification par la session principale : - `make lint` : aucun problème ; - `make test` : 10/10, dont 17 scénarios Cucumber ; - `make test-browser` : deux passages verts de suite dans les deux navigateurs, aucune erreur ni violation de CSP. ## Choix et compromis - **Annuler plutôt que confirmer :** bandeau « Reprendre l'ancienne » plutôt qu'une confirmation, comme le prévoit `interaction.md`. - **Plateau au chargement :** il est gardé dans `localStorage` plutôt que décodé sans le moteur, ce qui aurait réimplémenté une règle. - **Tailles du texte dans le plateau :** ce sont des attributs SVG en unités du dessin. La CSP interdit `style`, et une classe ne suit pas l'échelle. - **Limites assumées :** - pas de ligne d'information en paysage ; - « Revoir la partie » ferme seulement le panneau ; - « Continuer » reste en plus du toucher des dés ; - clavier partiel : pas de choix des pions aux flèches, pas d'affichage des raccourcis ; - la recette complète tourne dans Chromium seulement. ## Risques et déploiement - La mise en page de l'écran de jeu change entièrement. - Le journal des parties ne change pas. Deux clés `localStorage` s'ajoutent, `ustagammon.settings` et `ustagammon.last-board`. Si elles sont illisibles, elles sont ignorées. - À vérifier en main sur le Fairphone : le Wake Lock, le ressenti des vibrations, le verrouillage réel du paysage, et la barre d'adresse en paysage. - Retour arrière : annuler la fusion, sans migration. ## Comment vérifier ``` make lint && make test && make test-browser ls build/browser-shots/revision-ux/ ``` Sur https://ustagammon.sans.pub après déploiement : - tourner le téléphone : le plateau prend l'écran et la partie reste la même ; - ouvrir Menu, puis « Nouvelle partie », puis « Reprendre l'ancienne » ; - toucher un compte de points ; - jouer un coup complet, puis « Jouer ce coup » ; - tester les vibrations et leur interrupteur. ## Hors périmètre - Le conseil du maître (1d). - Les adresses par écran (0e.4). - Le clavier complet. - La vibration « toucher refusé ». - La relecture de partie. Generated with Claude Code https://claude.com/claude-code

pierre added 11 commits 2026-11-03 19:07:09 +00:00

Révision UX : ajouts A, B et C au plan e2249ecb85

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Tests : image du site propre à chaque copie de travail, supprimée en fin de test 2be5bdcb4f

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Révision UX : portrait stable, bandeaux, menu, paysage plateau = écran, vibrations c6649f94c0

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Recette automatisée de la révision UX dans make test-browser ; chiffres du plateau à 13 px au moins 2c56b0a2b1

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Tests : suppression synchrone du conteneur du site avant celle de son image ebaa3b0020

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Recette design : consigne en texte nu, cases d'arrivée en triangle et anneau, flèches sous les pions, panneau de fin structuré b8c2997ec0

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Plein écran : attente bornée, repli tourné si l'écran reste en portrait, paysage forcé en mode immersif ; plan : résultat et corrections de la recette 155a953c3b

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Fusion de main dans revision-ux c04479c18f

Révision UX : plan clos 0b1bd97342

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Test navigateur : menu essayé au moment de lancer les dés ; menu ouvert devant un panneau 4d9a6d69db

Le panneau du double de l'ordinateur ne s'affiche qu'en paysage (en portrait,
la barre d'actions pose la question) : la rotation change alors l'écran, à
raison. Le test ouvrait le menu juste après un coup, parfois pendant un double.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Fusion de main dans revision-ux 6408b4b03e

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

pierre referenced this issue from a commit

2026-11-03 19:07:21 +00:00

Fusion de la MR !35 : révision UX, portrait stable, compte de points, menu, paysage plateau = écran

pierre manually merged commit 231dd02ac0 into main

2026-11-03 19:07:22 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: pierre/Ustagammon#35