Compare commits

...
2 changed files with 141 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 |
| `ecrans-etape-1.md` | Écrans de l'étape 1, lot par lot : nouvelle partie et match (1c), conseil du maître (1d)… |
| `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 |
+140
View File
@@ -0,0 +1,140 @@
# Écrans de l'étape 1
Règles de design des écrans de l'étape 1 (`docs/etape-1.md`), lot par lot.
Maquettes : canevas https://claude.ai/artifact/CQw6vbDpi6XQqVWQa4sANe, rangées
« Étape 1 ». Comportement général : `interaction.md` ; liens : ADR 0013.
## 1c. Nouvelle partie et match
### Écran « Nouvelle partie » (`#/nouvelle-partie`)
Ouvert depuis le menu, l'accueil et la fin de partie. Une seule page, sans
étapes, de haut en bas :
1. **Type de partie** : un sélecteur à deux segments, « Partie libre » et
« Match » (fond `surface-sunken`, segment choisi en `surface` avec
`shadow-raised`).
- **Match** : « Le premier à [3] [5] [7] [11] points », quatre boutons
carrés de 44 px, le choisi en brique. Dessous, une phrase sur la règle de
Crawford, avec le lien vers sa fiche du glossaire.
- **Partie libre** : une phrase sur la règle de Jacoby, avec le lien vers
sa fiche. Pas d'interrupteur pour Crawford ni Jacoby : ce sont les règles
usuelles, et le joueur débutant n'a pas à les choisir.
2. **Niveau de l'ordinateur** : six barres de hauteur croissante, à toucher
(Débutant, Amateur, Intermédiaire, Avancé, Expert, Champion) ; les barres
jusqu'au niveau choisi sont en brique, le niveau choisi porte l'anneau de
focus. Dessous, le nom en `heading` et une phrase qui le décrit en mots de
joueur, jamais en plis ni en bruit :
- Débutant : « Joue simplement et laisse passer des occasions. Idéal pour
vos premières parties. »
- Amateur : « Un joueur qui connaît les règles et commet encore des
erreurs. »
- Intermédiaire : « Un habitué de la table : solide, sans être
implacable. »
- Avancé : « Un bon joueur de club. Peu d'erreurs de pions, un videau
sérieux. »
- Expert : « Très peu d'erreurs. Chaque point se gagne. »
- Champion : « GNU Backgammon à son meilleur niveau sur ce téléphone. »
3. **Pendant la partie** : interrupteur « Conseil du maître », sous-titre
« Une ligne après chacun de vos coups ».
4. **Barre d'action collée en bas** : un seul bouton principal, qui dit ce
qu'il lance (« Commencer la partie » ou « Commencer le match en 5
points »), et la mention « Vos choix sont gardés pour la prochaine fois. ».
Par défaut : partie libre, Intermédiaire, conseil activé. Fermer (croix en
haut à gauche, ou retour du téléphone) ne change rien à la partie en cours.
Commencer une nouvelle partie alors qu'une partie est en cours suit la règle
« annuler plutôt que confirmer » (bandeau « Reprendre l'ancienne »).
### Score de match sur l'écran de jeu
- **Portrait** : une ligne `overline` centrée sous la barre haute, « Match en
5 points », complétée par « · partie Crawford » pendant la partie Crawford ;
dans chaque bandeau, une pastille carrée (contour `border-strong`, chiffre
gras) avec le score de ce joueur, juste avant son compte de points.
- **Paysage** : dans la colonne de commandes, sous le menu, une case qui
empile le score de l'ordinateur, « sur 5 », puis le vôtre (même ordre que
les bandeaux : l'ordinateur en haut, vous en bas).
- Le score se lit aussi au lecteur d'écran : « Match en 5 points :
l'ordinateur 4, vous 2 ».
- Pendant la partie Crawford, le videau n'est pas affiché : il n'existe pas
pour cette partie.
## 1d. Conseil du maître
### La ligne du maître
Maquette « Portrait révisé : conseil du maître après le coup ». Une ligne de
44 px, réservée sous le bandeau du joueur (elle ne pousse rien) :
- icône d'appréciation, puis le **mot en couleur** suivi d'un point
(« Bon coup. »), puis la **phrase du maître en italique**, sur une ligne,
tronquée par des points de suspension si elle est trop longue, et un
chevron ;
- elle apparaît **après** la validation du coup du joueur (ou sa décision de
videau), dès que l'analyse est prête, en fondu de `duration-fast` ; elle
s'efface à l'action suivante du joueur (lancer les dés, toucher un pion) ;
- **pendant que le joueur réfléchit, rien n'apparaît** ; si l'analyse arrive
trop tard (le joueur a déjà relancé), la ligne n'apparaît pas, et le coup
reste commenté dans le bilan ;
- conseil désactivé : la ligne reste réservée et vide (la mise en page ne
bouge pas).
### Les mots
| Seuil gnubg (écart d'équité) | Mot | Couleur | Icône |
| --- | --- | --- | --- |
| meilleur coup, ou moins de 0,03 | Bon coup | `verdict-good` | coche |
| 0,03 à 0,06 (doubtful) | Imprécision | `verdict-doubtful` | point d'interrogation |
| 0,06 à 0,12 (bad) | Erreur | `verdict-bad` | croix |
| plus de 0,12 (very bad) | Grosse erreur | `verdict-bad` | croix |
Pour le videau : « Bon choix » et « Bonne décision » remplacent « Bon coup ».
« Grosse erreur » est la recommandation de design ; `docs/etape-1.md` écrit
« gaffe », et le choix final revient à Pierre (ton).
### La feuille d'explication
Maquette « Feuille d'explication du maître ». Toucher la ligne ouvre une
feuille qui monte du bas (`duration-moderate`), au-dessus du plateau voilé :
1. le mot d'appréciation et le contexte (« Erreur · votre 3-1 d'ouverture ») ;
2. le titre : le coup du maître, à la première personne (« J'aurais joué
8/5 6/5 ») ; pour un bon coup : « C'est aussi le coup que j'aurais joué » ;
3. la phrase du maître, en italique ;
4. un sélecteur à deux segments, « Votre coup » et « Le coup du maître », au-
dessus d'un plateau qui montre la position d'avant le coup ; le coup choisi
se joue pion par pion (`duration-fast`), avec un tracé du départ à
l'arrivée : `text` pour votre coup, `verdict-good` pour celui du maître ;
5. « Voir les chiffres du moteur » (repliée par défaut) : le classement des
coups avec leur écart d'équité et le niveau d'évaluation ; votre coup est en
gras ;
6. « Demander à une IA » (1f) et « Fermer ».
Le lien vers la fiche d'un concept du glossaire n'apparaît que si le moteur
permet de le déterminer, sinon rien.
### Les phrases du maître
- **Le maître parle à la première personne et vouvoie** : « J'aurais joué… »,
jamais « Vous auriez dû… », jamais « Il fallait… ».
- **Il ne cite que des faits** : le coup recommandé, le rang de votre coup,
les pions frappés, les points faits ou laissés (lisibles dans le coup
lui-même), l'écart d'équité sur demande. Aucune explication stratégique
inventée (« la case la plus précieuse », « trop risqué ») : celles-là
viendront des leçons, relues par un joueur fort.
- **Trois parties au plus** : ce que vous avez fait, ce que le maître préfère,
un fait qui les distingue. Moins de 140 caractères pour la ligne ; la
feuille peut aller jusqu'à deux phrases.
- **Ton** : encourageant et sobre. Pas de point d'exclamation, pas d'émoji, pas
de superlatif. Les bons coups ont plusieurs formules qui tournent
(« C'est le coup du maître. », « Exactement ce que j'aurais joué. »,
« Bien vu. »), pour ne pas lasser.
- **Exemples** (gabarits à remplir avec les données du moteur) :
- Bon coup : « Bien vu. 8/5 6/5 fait votre point 5. »
- Imprécision : « J'aurais joué {meilleur}. Votre coup était le
{rang}e choix, tout près. »
- Erreur : « J'aurais joué {meilleur}. Votre {joué} était le {rang}e
choix. »
- Videau, prise juste : « Bonne décision : prendre était le bon choix. »
- Videau, double manqué : « Ici, j'aurais doublé. »