From a0924b4c7df53beaf38fd5bc02993e9f77b81d07 Mon Sep 17 00:00:00 2001 From: Pierre MARTIN Date: Tue, 3 Nov 2026 07:10:14 +0100 Subject: [PATCH] =?UTF-8?q?Revue=20UX=20close=20et=20arbitr=C3=A9e=20;=20p?= =?UTF-8?q?lan=20de=20la=20r=C3=A9vision=20UX=20(0e.3)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 5.5 --- docs/feuille-de-route.md | 3 +- docs/plans/2026-11-03-revision-ux.md | 63 ++++++++++++++++++++++++++++ docs/plans/2026-11-03-revue-ux.md | 37 ---------------- 3 files changed, 64 insertions(+), 39 deletions(-) create mode 100644 docs/plans/2026-11-03-revision-ux.md delete mode 100644 docs/plans/2026-11-03-revue-ux.md diff --git a/docs/feuille-de-route.md b/docs/feuille-de-route.md index a3d5495..b0c848c 100644 --- a/docs/feuille-de-route.md +++ b/docs/feuille-de-route.md @@ -24,8 +24,7 @@ Demandes de Pierre du 2026-11-03, traitées avant d'ouvrir l'étape 1. | Sous-étape | Contenu | État | Plan | | --- | --- | --- | --- | | 0e.1 | Saisie du coup : pion à destination unique joué en un toucher, coup à valider et annulable demi-coup par demi-coup, dés joués marqués, dés des deux côtés touchables, videau confirmé ; pages de test du moteur retirées | 🔄 | `plans/2026-11-03-saisie-du-coup.md` | -| 0e.2 | Revue UX par un designer UI : compte de points, fluidité (bouton « Nouvelle partie », interruptions), paysage ; propositions à valider par Pierre | 🔄 | `plans/2026-11-03-revue-ux.md` | -| 0e.3 | Paysage sur téléphone : plateau sur presque tout l'écran, contrôles en pictogrammes (ADR 0012 à amender), selon la revue validée | ⏳ | | +| 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 (nouvel ADR pour le format) | ⏳ | | | 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 | ⏳ | | diff --git a/docs/plans/2026-11-03-revision-ux.md b/docs/plans/2026-11-03-revision-ux.md new file mode 100644 index 0000000..706d9ab --- /dev/null +++ b/docs/plans/2026-11-03-revision-ux.md @@ -0,0 +1,63 @@ +# 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 (après la fusion de 0e.1, qui touche les mêmes fichiers) +- **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. diff --git a/docs/plans/2026-11-03-revue-ux.md b/docs/plans/2026-11-03-revue-ux.md deleted file mode 100644 index 844ae7b..0000000 --- a/docs/plans/2026-11-03-revue-ux.md +++ /dev/null @@ -1,37 +0,0 @@ -# Revue UX : compte de points, fluidité, paysage - -- **Date** : 2026-11-03 -- **Étape** : 0e (retours du premier test de Pierre sur le téléphone) -- **Statut** : en cours -- **Exécutant** : sous-agent general-purpose, rôle de designer UI, en lecture - seule sur le code - -## Objectif - -Proposer à Pierre, avec maquettes, une meilleure présentation du compte de -points et une revue de toute l'expérience de jeu (point 10 de son message du -2026-11-03), en couvrant la fluidité (ligne 0d.2+ de la feuille de route) et le -paysage sur téléphone (point 5). - -## Consignes - -- Partir de la charte (`docs/identite/`, ADR 0010), des ADR 0011 et 0012, et de - l'application publiée (https://ustagammon.sans.pub, ou `make site` puis les - captures de `make test-browser`). -- Ne pas modifier le dépôt. Livrer un rapport en Markdown (chemin indiqué par - la session principale) et, si utile, une page de maquettes. -- Pour chaque proposition : le problème observé, la solution, sa maquette, son - coût technique estimé, et ce qui relève d'un choix de Pierre. -- Sujets imposés : compte de points ; bouton « Nouvelle partie » et tout ce qui - interrompt la partie ; paysage sur téléphone, plateau sur presque tout - l'écran, contrôles en pictogrammes. -- Les changements de saisie du coup en cours (plan - `2026-11-03-saisie-du-coup.md`) sont acquis : ne pas les reproposer. - -## Critères de réussite - -Un rapport priorisé que Pierre peut valider point par point. - -## Résultat - -À remplir à la clôture.