From f24315fb98914dd27a44778620723452999a993b Mon Sep 17 00:00:00 2001 From: Pierre MARTIN Date: Tue, 3 Nov 2026 14:58:25 +0100 Subject: [PATCH] =?UTF-8?q?Charte=20:=20accueil,=20installation,=20tutorie?= =?UTF-8?q?l=20des=20r=C3=A8gles,=20aide=20en=20questions?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 5.5 --- docs/identite/charte/README.md | 1 + docs/identite/charte/accueil-tutoriel-aide.md | 153 ++++++++++++++++++ 2 files changed, 154 insertions(+) create mode 100644 docs/identite/charte/accueil-tutoriel-aide.md diff --git a/docs/identite/charte/README.md b/docs/identite/charte/README.md index 8a5be9a..a4048ce 100644 --- a/docs/identite/charte/README.md +++ b/docs/identite/charte/README.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 | +| `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 | diff --git a/docs/identite/charte/accueil-tutoriel-aide.md b/docs/identite/charte/accueil-tutoriel-aide.md new file mode 100644 index 0000000..2d7f99c --- /dev/null +++ b/docs/identite/charte/accueil-tutoriel-aide.md @@ -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). -- 2.54.0