Charte : accueil, installation, tutoriel des règles, aide en questions

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Pierre MARTIN
2026-11-03 14:58:25 +01:00
co-authored by Claude Opus 5.5
parent 7c1163054a
commit f24315fb98
2 changed files with 154 additions and 0 deletions
+1
View File
@@ -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 |
| `accueil-tutoriel-aide.md` | Accueil, installation sans intrusion, tutoriel des règles (forme et première version du texte), aide en questions |
| `recette-ux.md` | Critères de recette design de l'écran de jeu, à cocher sur les captures et sur le téléphone |
| `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 |
@@ -0,0 +1,153 @@
# Accueil, installation, tutoriel et aide
Règles de l'étape 0e.5 (et 1g pour le tutoriel). Maquettes : rangée « Étape
0e.5 » du canevas https://claude.ai/artifact/CQw6vbDpi6XQqVWQa4sANe et
l'artboard « Accueil ». Les textes sont une **première version, à valider par
Pierre**. Comportement général : `interaction.md`.
## Accueil
**Premier lancement** (aucune partie ni leçon enregistrée) : le logo, le
plateau en position de départ, « Bienvenue à la table », une phrase, puis deux
grands choix :
- **« Je découvre »** (action principale) → le tutoriel, étape 1 ;
- **« Je connais les règles »** → une partie tout de suite.
Le choix ne revient plus. Le tutoriel reste dans le menu.
**Ensuite**, de haut en bas :
1. **La partie en cours** : miniature du plateau, comptes de points,
« Reprendre la partie » (seule action principale de l'écran) et
« Nouvelle partie ». Sans partie en cours : « Nouvelle partie » devient
l'action principale.
2. **L'invitation à installer**, si elle doit apparaître (voir plus bas).
3. **La prochaine leçon** : une seule carte (titre, état, progression,
« Continuer » en secondaire), avec le lien « Toutes les leçons ».
4. **La progression résumée**, en une ligne `caption` : « 1 leçon terminée
sur 8 · 12 parties jouées · 4 gagnées ».
5. En pied de page, la phrase de l'Atelier du Huit.
Pas de chiffres d'erreur ou d'équité sur l'accueil : ils viennent avec
l'analyse.
## Installation
Le but : proposer l'installation au bon moment, une fois, sans jamais
interrompre.
- **Jamais** au premier lancement, jamais pendant une partie, jamais en
fenêtre qui s'impose.
- **Quand** : à partir de la fin de la **première partie terminée**, quand le
joueur a vu ce que vaut l'app.
- **Où** : une carte compacte sur l'accueil (symbole, « Installer
Ustagammon », « Sur l'écran d'accueil, en plein écran, sans réseau. »,
bouton « Installer » et croix « Plus tard »), et une ligne « Installer
l'application » dans le menu, toujours présente tant que l'app n'est pas
installée.
- **« Plus tard »** masque la carte ; elle revient une seule fois, après
trois parties de plus. Ensuite, seul le menu la propose.
- **Chrome Android** : le bouton déclenche l'invite du système, gardée depuis
l'événement `beforeinstallprompt`. Sans cet événement (navigateur qui ne
propose pas l'installation), le même bouton ouvre la marche à suivre.
- **Firefox Android** : une feuille en trois étapes numérotées (menu ⋮,
« Installer » ou « Ajouter à l'écran d'accueil », confirmer), qui se ferme
par « J'ai compris ».
- **iPhone (Safari)** : même feuille, avec ces étapes : bouton de partage,
« Sur l'écran d'accueil », « Ajouter ».
- **Une fois installée** (`display-mode: standalone`, ou événement
`appinstalled`) : plus aucune proposition, la ligne du menu disparaît.
## Tutoriel des règles
### Forme
- Huit étapes, chacune en **écrans courts** : un titre, un plateau illustré,
deux ou trois phrases. Une étape sur deux finit par un écran **« à vous »**
où le joueur fait le geste sur le vrai plateau, contrôlé par le moteur.
- En haut : une barre de progression en huit segments (`accent` pour les
étapes faites) et « Passer » à droite. En bas : « Retour » et
« Continuer ».
- Les positions sont données par leurs identifiants gnubg (ADR 0013) ; le
plateau est le composant de l'app, non jouable sauf sur les écrans
« à vous ». Aucune règle n'est codée hors du moteur : un écran « à vous »
demande au moteur si le coup du joueur fait partie des coups permis attendus.
- **Les pions bougent** : sur un écran d'explication, le coup illustré se joue
tout seul après une seconde, pion par pion (`duration-fast`), puis reste
affiché ; « Revoir » le rejoue. Sur les écrans à flèches (sens du jeu), un
tracé en pointillés `text` sur un liseré ivoire, jamais en brique (la brique
veut dire « à faire »).
- Un geste juste : coche `verdict-good`, vibration « pion posé », phrase
courte, « Continuer » devient l'action principale. Un geste faux : le pion
revient, et une phrase dit pourquoi, sans le mot « erreur ».
- Chaque terme nouveau est un lien vers sa fiche du glossaire, à sa première
apparition.
### Texte, première version
1. **Le but du jeu.** « Vous avez quinze pions ivoire, l'ordinateur quinze
pions noyer. Chacun fait faire le tour du plateau à ses pions, puis les
sort. Le premier qui a sorti tous les siens gagne la partie. »
2. **Dans quel sens avancer.** « Vos pions ivoire font le tour du plateau dans
le sens des pointillés : ils partent d'en haut à droite, passent à gauche,
puis reviennent en bas jusqu'aux six dernières flèches, en bas à droite.
C'est là que vous les rassemblerez avant de les sortir. Les pions noyer de
l'ordinateur font le même chemin, en sens inverse. »
3. **Les dés et les doubles.** « Chaque dé déplace un pion d'autant de
flèches. Avec 5 et 2, vous jouez un pion de 5 et un pion de 2, ou le même
pion de 5 puis de 2. Un double se joue quatre fois : avec 4-4, vous avancez
quatre fois de 4. » *À vous* : jouer 3-1 en faisant le point 5 (8/5 6/5).
4. **Frapper un pion seul.** « Un pion seul sur une flèche s'appelle un blot.
Si vous vous posez dessus, vous le frappez : il part sur la barre et devra
refaire tout le chemin. Une flèche où l'adversaire a deux pions ou plus est
fermée : vous ne pouvez pas vous y poser. » *À vous* : frapper le blot du
point 7 avec 6-1.
5. **Rentrer depuis la barre.** « Votre pion frappé attend sur la barre, au
milieu. Avant de jouer quoi que ce soit d'autre, il doit rentrer dans le
camp adverse, en haut à droite. Chaque dé indique une flèche d'entrée :
avec 3 et 4, la 22 ou la 21. Si les deux flèches sont fermées, votre tour
passe. »
6. **Sortir ses pions.** « Quand vos quinze pions sont dans les six dernières
flèches, vous pouvez commencer à les sortir : un 6 sort un pion de la
flèche 6, un 1 un pion de la flèche 1. Touchez le pion, puis la sortie à
droite. » *À vous* : sortir deux pions avec 6-3.
7. **Gammon et backgammon.** « Une partie gagnée vaut 1 point. Si
l'adversaire n'a sorti aucun pion quand vous finissez, c'est un gammon :
2 points. S'il lui reste en plus un pion sur la barre ou dans votre camp,
c'est un backgammon : 3 points. »
8. **Le videau.** « Le cube aux faces 2, 4, 8, 16, 32 et 64 sert à miser.
Avant de lancer vos dés, vous pouvez proposer de doubler la valeur de la
partie. L'ordinateur prend, et la partie continue en valant le double, ou il
passe, et vous gagnez tout de suite. Celui qui a pris garde le cube : lui
seul pourra redoubler. » *À vous* : décider de prendre ou passer, avec une
phrase du maître ensuite.
Fin du tutoriel : « Vous connaissez les règles. Le reste s'apprend en jouant,
et le maître vous accompagne. » → « Jouer ma première partie ».
## Aide
L'aide n'est plus une copie brute des fichiers : c'est une page organisée en
questions, avec un ton. **La source reste unique** (ADR 0008) : les mêmes
fichiers servent d'aide et de tests.
- **Trois onglets** : « Jouer » (les scénarios), « Les mots du jeu » (le
glossaire), « À propos ». Le tutoriel est proposé en tête de page.
- **« Jouer »** : un scénario = une question repliable (`details`), fermée par
défaut sauf celle qui correspond à l'écran d'où l'on vient.
- Le **titre du scénario** est la question, formulée comme le joueur se la
pose : « Comment jouer un coup ? », « Je me suis trompé de pion », « Je ne
peux rien jouer avec mes dés ». C'est un changement de titre dans les
`.feature` : les tests n'en dépendent pas.
- La **description du scénario** (le paragraphe sous le titre) est la
réponse affichée. Elle se lit seule, au présent, au « vous ».
- Les **étapes Gherkin** ne s'affichent pas dans l'aide : elles restent la
preuve que l'app fait ce que dit la réponse. « Voir sur le plateau » ouvre
la position de l'exemple quand le scénario en donne une (lien ADR 0013).
- La **description de la fonctionnalité** sert d'introduction à l'onglet.
- **« Les mots du jeu »** : une fiche du glossaire = une carte (le mot, son nom
anglais en `caption` italique, « En bref », les renvois), triées par ordre
alphabétique, avec un champ de recherche en tête.
- **Ton** : celui du maître de café, patient et concret. Pas de « Étant
donné que », pas de vocabulaire technique (moteur, scénario, événement).