Fusion de la MR !23 : règles d'interaction

2026-11-03 06:12:51 +00:00
parent 19808d9afa 4403fc2844
commit 5d0cf45539
5 changed files with 131 additions and 1 deletions
@@ -77,3 +77,23 @@ paru « vraiment pas optimale ».
 La bascule automatique écartée plus haut était celle qui forçait
 l'orientation ; ici, seule la mise en page suit l'orientation choisie par le
 joueur.
+
+### 2026-11-03 — Placement des contrôles en paysage, après la revue UX
+
+La revue UX de l'étape 0e.2 a montré deux conflits dans le placement décrit
+par l'amendement précédent : la moitié basse de la colonne des sorties est une
+cible de jeu (toucher fait sortir un pion), et les pions frappés s'empilent
+depuis le milieu de la barre. Arbitrage de la session design, sur délégation
+de Pierre :
+
+- une colonne de commandes à gauche, dans le cadre : menu en haut, videau au
+  milieu (il monte ou descend selon son propriétaire), « Annuler le
+  demi-coup » en bas, remplacé par « Revoir » quand le coup de l'ordinateur
+  est montré ; « Quitter le plein écran » passe dans le menu ;
+- la colonne des sorties reste réservée aux pions sortis ;
+- les comptes de points sont des pastilles aux deux bouts de la barre, aux
+  couleurs du camp, en 13 px.
+
+Maquettes : rangée « Révision UX (étape 0e) : paysage » du canevas
+(variantes thème sombre, barre d'adresse visible et fin de partie). Règles de
+comportement : `docs/identite/charte/interaction.md`.
@@ -14,6 +14,7 @@ Décisions : ADR 0010. Fichiers du logo et des icônes : `../logo/`.
 | Fichier | Contenu |
 | --- | --- |
 | `guide-de-marque.md` | Règles d'usage : ton, couleurs, typographie, formes, mouvement, icônes, composants |
+| `interaction.md` | Comportement : réponse immédiate, annuler plutôt que confirmer, mouvement, vibrations, clavier, mises en page de l'écran de jeu (portrait, paysage, ordinateur), pictogrammes |
 | `tokens.json` | Toutes les valeurs, thèmes clair et sombre, avec une note d'usage par couleur |
 | `bundle.css` | Styles des composants ; mêmes noms de classes que `web/app.css` |
 | `board.js` | Dessin de référence du plateau (repère 640 × 520), pour comparaison |
@@ -56,6 +56,10 @@ Sobre et utile : un pion glisse vers sa flèche (150 à 250 ms, sans rebond), le
 - Icônes d'interface : traits simples de 2px à bouts ronds, dessinés en SVG dans le code (pas de police d'icônes, pas d'émoji). Les seules icônes du système pour l'instant : les trois appréciations de coups (coche, point d'interrogation, croix) et la copie (deux feuillets).
 - Dés, pions et videau sont dessinés en SVG avec les couleurs du plateau, jamais en images.

+## Interaction
+
+Règles de comportement (réponse immédiate, annuler plutôt que confirmer, mouvement, vibrations, clavier, mises en page de l’écran de jeu) : section « Interaction ».
+
 ## Composants

-Plateau (`Board`) et ses pièces (`Checker`, `Die`, `DoublingCube`), boutons (`Button`), barre haute (`TopBar`), zone de consigne (`GamePrompt`), appréciation d'un coup (`MoveVerdict`), fiche de glossaire (`GlossaryCard`), carte de leçon (`LessonCard`) et « Demander à une IA » (`AskAI`). Chacun a sa fiche avec ses règles d'usage et un aperçu dans les deux thèmes.
+Plateau (`Board`) et ses pièces (`Checker`, `Die`, `DoublingCube`), boutons (`Button`), barre haute (`TopBar`), zone de consigne (`GamePrompt`), appréciation d’un coup (`MoveVerdict`), pictogrammes (`Icons`), fiche de glossaire (`GlossaryCard`), carte de leçon (`LessonCard`) et « Demander à une IA » (`AskAI`). Chacun a sa fiche avec ses règles d'usage et un aperçu dans les deux thèmes.
@@ -0,0 +1,72 @@
+# Interaction
+
+Ustagammon doit se sentir **net et rapide**, comme un outil bien réglé : chaque toucher répond tout de suite, rien ne saute, rien n'interrompt la partie sans raison. La chaleur vient de la matière et du ton ; la précision vient du comportement.
+
+## Principes
+
+1. **Réponse immédiate.** Un toucher produit un effet visible en moins de 100 ms : le pion part, le bouton s'enfonce. Le moteur calcule ensuite, en arrière-plan ; l'interface ne l'attend jamais pour réagir.
+2. **Rien ne bouge sous le doigt.** Les zones de l'écran de jeu ont une hauteur fixe : seuls leurs contenus changent. Une ligne vide garde sa place.
+3. **Annuler plutôt que confirmer.** Une action se fait tout de suite et se rattrape pendant 10 s par un bandeau « Reprendre » (nouvelle partie, abandon). Une boîte de confirmation n'est permise que pour une décision de jeu irréversible qui engage la partie : prendre ou passer un double, doubler.
+4. **Une seule action principale par moment**, en brique, à droite, sous le pouce.
+5. **Le joueur garde la main.** L'app ne joue jamais à sa place : quand aucun coup n'est possible, les dés se barrent et le joueur passe en les touchant (demande explicite de Pierre).
+6. **Le maître parle après le coup, discrètement** (ADR 0011) : une ligne réservée sous le plateau, qui s'ouvre sur l'explication si on la touche. Jamais de fenêtre qui s'impose.
+7. **Le sens passe toujours par deux canaux** : couleur et mot, vibration et marque visible, raccourci et bouton.
+
+## Mouvement
+
+| Jeton | Valeur | Usage |
+| --- | --- | --- |
+| `duration-instant` | 90ms | Retour d'appui d'un bouton, apparition du contour d'un pion jouable. |
+| `duration-fast` | 160ms | Pion qui glisse d'une flèche à l'autre, dés qui se posent, bandeaux. |
+| `duration-moderate` | 240ms | Feuille du menu qui monte, panneau de fin de partie, bascule de mise en page. |
+| `easing-standard` | cubic-bezier(0.2, 0, 0, 1) | Tout ce qui se déplace : départ franc, arrivée douce. |
+| `easing-exit` | cubic-bezier(0.4, 0, 1, 1) | Ce qui disparaît. |
+
+- Pas de rebond, pas d'élastique, pas de fondu de plus de 240 ms.
+- Les coups de l'ordinateur se jouent demi-coup par demi-coup, 160 ms par pion, 120 ms de pause entre deux : on suit le coup sans l'attendre.
+- Le bouton enfoncé descend de 1 px et s'assombrit de 6 %, sans ombre.
+- `prefers-reduced-motion` : les déplacements deviennent des apparitions instantanées ; les dés ne roulent pas.
+
+## Vibrations
+
+Activées par défaut, désactivables dans le menu (« Vibrations »). Elles doublent un événement visible, jamais seules. Rien ne vibre pour un toucher de bouton ni pour le lancer des dés.
+
+| Moment | Motif (ms) |
+| --- | --- |
+| Votre pion se pose | `12` |
+| Un pion est frappé | `25, 40, 25` |
+| L'ordinateur propose de doubler | `40, 60, 40` |
+| Fin de partie gagnée | `30, 50, 30, 50, 60` |
+| Fin de partie perdue | `60` |
+
+Les durées se règlent en main sur le Fairphone 4. Une seule vibration à la fois : la dernière annule la précédente.
+
+## Clavier (ordinateur)
+
+Chaque action a son raccourci, affiché sur le bouton en petite touche (`kbd`) quand un clavier est détecté. `?` ouvre la liste.
+
+| Touche | Action |
+| --- | --- |
+| `Espace` | Lancer les dés ; jouer le coup quand il est complet ; passer quand aucun coup n'est possible |
+| `←` `→` | Choisir un pion jouable (le focus se voit : anneau `focus`) |
+| `↑` `↓` | Choisir sa case d'arrivée |
+| `Entrée` | Poser le pion |
+| `Z` | Annuler le demi-coup (aussi `Ctrl+Z`) |
+| `D` | Doubler |
+| `P` / `N` | Prendre / passer, quand l'ordinateur double |
+| `F` | Plein écran |
+| `M` | Menu |
+| `?` | Aide et raccourcis |
+| `Échap` | Fermer le menu, l'aide ou la bulle ouverte ; ne touche jamais à la partie |
+
+Le plateau entier se joue au clavier : c'est aussi ce qui le rend accessible aux lecteurs d'écran.
+
+## Pictogrammes
+
+Trait de 2 px à bouts ronds, sur une grille de 20 × 20, `currentColor`, dessinés en SVG dans le code. Le jeu complet : menu, aide, plein écran, quitter le plein écran, annuler (flèche de retour), revoir (flèche circulaire), fermer, chevron, copier, et les trois appréciations (coche, point d'interrogation, croix dans un cercle). En portrait, la barre haute affiche un libellé de 13 px sous chaque pictogramme ; en paysage et sur ordinateur, le pictogramme seul avec son `aria-label`.
+
+## Mises en page de l'écran de jeu
+
+- **Portrait** : barre haute, bandeau de l'ordinateur, plateau, bandeau du joueur (teinté `accent-soft` quand c'est à lui), ligne du maître ou du dernier coup, consigne, et barre d'actions collée en bas. Hauteurs fixes.
+- **Paysage** (dès que le téléphone est tourné ; ADR 0012) : le plateau est l'écran. Colonne de commandes à gauche dans le cadre (menu, videau, annuler ou revoir), sorties à droite, comptes de points en pastilles aux deux bouts de la barre, consigne et dés dans la bande centrale. Numéros des flèches à 12 px au moins.
+- **Ordinateur** : plateau à gauche, colonne à droite avec les bandeaux des joueurs, la liste des coups, la consigne, les actions et leurs raccourcis.
@@ -526,5 +526,38 @@
 },
 "meta": {
  "source": "Brief créatif + ADR 0010 + web/app.css (noms des variables du plateau)"
+ },
+ "duration": {
+  "tokens": [
+   {
+    "name": "duration-instant",
+    "value": "90ms",
+    "usage": "Retour d'appui d'un bouton, contour d'un pion jouable."
+   },
+   {
+    "name": "duration-fast",
+    "value": "160ms",
+    "usage": "Pion qui glisse, dés qui se posent, bandeaux."
+   },
+   {
+    "name": "duration-moderate",
+    "value": "240ms",
+    "usage": "Feuille du menu, panneau de fin de partie, bascule de mise en page. Jamais plus long."
+   }
+  ]
+ },
+ "easing": {
+  "tokens": [
+   {
+    "name": "easing-standard",
+    "value": "cubic-bezier(0.2, 0, 0, 1)",
+    "usage": "Tout ce qui se déplace : départ franc, arrivée douce."
+   },
+   {
+    "name": "easing-exit",
+    "value": "cubic-bezier(0.4, 0, 1, 1)",
+    "usage": "Ce qui disparaît."
+   }
+  ]
 }
 }