Fusion de la MR !40 : écrans 1c

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

docs/feuille-de-route.md

@@ -24,7 +24,7 @@ Demandes de Pierre du 2026-11-03, traitées avant d'ouvrir l'étape 1.
 | Sous-étape | Contenu | État | Plan |
 | --- | --- | --- | --- |
 | 0e.4 | Une adresse par écran (aide, glossaire, menu, mes parties…) et par position, par de vrais liens (ADR 0013 amendé) | ⏳ | `plans/2026-11-03-position-dans-l-adresse.md` |
-| 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 | ⏳ | `plans/2026-11-03-accueil-tutoriel-aide.md` |
+| 0e.5 | Page d'accueil, mise à jour de l'app en un toucher, 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 | ⏳ | `plans/2026-11-03-accueil-tutoriel-aide.md` |
 
 ## Étapes suivantes
 

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 |
+| `ecrans-etape-1.md` | Écrans de l'étape 1, lot par lot : nouvelle partie et match (1c)… |
 | `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 |

docs/identite/charte/accueil-tutoriel-aide.md

@@ -151,3 +151,24 @@ fichiers servent d'aide et de tests.
   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).
+
+## Liens (ADR 0013, amendement : une adresse par écran)
+
+Chaque élément qui mène ailleurs est un vrai lien (`<a href>`), qu'on peut
+ouvrir, partager et retrouver avec le bouton « retour » du téléphone.
+
+| Élément | Adresse |
+| --- | --- |
+| « Je découvre », « Toutes les leçons » | `#/tutoriel/1` |
+| Étape *n* du tutoriel (« Continuer », « Retour », segments de la barre de progression) | `#/tutoriel/<n>` |
+| « Je connais les règles », « Reprendre la partie » | l'écran de jeu |
+| Un terme du jeu dans un texte (blot, barre, camp…) | `#/glossaire/<terme>` |
+| Une position illustrée, « Voir sur le plateau » | `#/position/<Position ID>/<Match ID>` |
+| Aide, onglet « Jouer » | `#/aide` ; une question ouverte : `#/aide/<scénario>` |
+| Menu | `#/menu` |
+
+- Les segments de la barre de progression du tutoriel sont des liens vers les
+  étapes déjà vues, pas vers les suivantes.
+- Le bouton « retour » du téléphone ferme d'abord la feuille ou la question
+  ouverte, puis revient à l'écran précédent ; il ne quitte jamais une partie
+  sans retour possible.

docs/identite/charte/ecrans-etape-1.md

@@ -0,0 +1,61 @@
+# É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.

docs/plans/2026-11-03-accueil-tutoriel-aide.md

@@ -41,9 +41,24 @@ Traiter les points 2 et 3 du message de Pierre du 2026-11-03 et sa demande d'ins
    - « Les mots du jeu » : les cartes du glossaire, avec une recherche ;
    - « À propos » : licence, crédits, version ;
    - le tutoriel est proposé en tête de l'aide.
-5. **Scénarios Gherkin** : premier lancement, installation, suivre le tutoriel.
-6. **`make test-browser`** :
+5. **Mise à jour de l'application** (demande de Pierre du 2026-11-09). Quand
+   le service worker trouve une nouvelle version, l'app affiche un bandeau
+   discret « Nouvelle version disponible » avec « Mettre à jour », jamais
+   pendant un coup en cours. Toucher le bouton active la nouvelle version
+   (`skipWaiting`, puis rechargement au `controllerchange`), et la partie
+   reprend où elle en était. Le menu propose aussi « Rechercher une mise à
+   jour » (`registration.update()`), qui dit « Vous avez la dernière
+   version » sinon. L'onglet « À propos » affiche la version publiée (le
+   commit de `version.json`). Aujourd'hui, `web/sw.js` appelle
+   `skipWaiting()` dès l'installation et efface l'ancien cache : une page
+   ouverte garde son ancien code et peut ne plus trouver les anciens
+   fichiers. Le nouveau service worker doit attendre l'accord du joueur, sauf
+   à la toute première installation.
+6. **Scénarios Gherkin** : premier lancement, installation, suivre le tutoriel.
+7. **`make test-browser`** :
    - premier lancement, tutoriel complet avec ses écrans « à vous », aide ;
+   - mise à jour : publier deux versions du site de test l'une après
+     l'autre, voir le bandeau, mettre à jour, retrouver la partie ;
    - `beforeinstallprompt` simulé dans Chromium ;
    - captures dans `build/browser-shots/accueil-tutoriel/` pour la recette design.
 

docs/plans/2026-11-03-bilan-et-analyse.md

@@ -0,0 +1,46 @@
+# Fin de partie et analyse (1e)
+
+- **Date** : 2026-11-03
+- **Étape** : 1e (`docs/etape-1.md`)
+- **Statut** : prévu (après 1d)
+- **Exécutant** : sous-agent general-purpose, dans un worktree
+
+## Objectif
+
+Que le joueur comprenne sa partie : le bilan de fin de partie (ADR 0011), puis un écran d'analyse avec graphe d'équité, liste des erreurs, visualiseur et « Rejouer d'ici ».
+
+## Consignes
+
+Respecter les ADR 0007, 0008, 0011 et 0013. Chaque écran a son adresse : `#/parties/<id>/bilan` et `#/parties/<id>/analyse/<coup>`, à ajouter au tableau de l'ADR 0013 par un amendement. Pour la charte, suivre les maquettes « Fin de partie » du canevas. Aucune nouvelle dépendance : le graphe est dessiné en SVG à la main.
+
+1. **Analyse de la partie.** Elle réutilise les analyses rangées par 1d (coups et videau) et complète celles qui manquent en arrière-plan, de façon progressive et annulable. Elle donne :
+   - le taux d'erreur à la manière de gnubg ;
+   - la chance aux dés (`luck`) pour chaque camp ;
+   - le décompte des coups par appréciation.
+2. **Bilan**, dans le panneau de fin de partie existant :
+   - le résultat ;
+   - les coups par appréciation ;
+   - le taux d'erreur comparé à la chance, en phrases simples ;
+   - « le coup à revoir » : la plus grosse erreur, avec sa position, le coup joué et le meilleur coup ;
+   - un emplacement pour le bouton « Demander à une IA » (1f) ;
+   - « Voir l'analyse ».
+3. **Écran d'analyse** :
+   - un graphe d'équité où toucher un point ouvre la position ;
+   - la liste des erreurs, filtrable par appréciation ;
+   - un visualiseur pas à pas qui montre sur le plateau le coup joué contre le meilleur coup, avec des pions animés ;
+   - « Rejouer d'ici », qui crée une branche (domaine de 1b) sans toucher l'original.
+4. **Tests** :
+   - scénarios Gherkin : bilan, coup à revoir, rejouer d'ici, chacun avec des dés imposés ;
+   - fiches du glossaire : taux d'erreur, graphe d'équité si absentes ;
+   - `make lint`, `make test`, `make test-browser`, avec des captures pour la recette design.
+
+## Critères de réussite
+
+- Après une partie, le bilan nomme le coup à revoir, conforme à l'analyse du moteur.
+- L'analyse s'ouvre par son adresse.
+- « Rejouer d'ici » crée une branche.
+- Les trois commandes passent.
+
+## Résultat
+
+À remplir à la clôture.

docs/plans/2026-11-03-lecons.md

@@ -0,0 +1,36 @@
+# Cinq premières leçons et accueil complet (1g)
+
+- **Date** : 2026-11-03
+- **Étape** : 1g (`docs/etape-1.md`) ; le tutoriel des règles est traité en 0e.5
+- **Statut** : prévu (après 0e.5 et 1d)
+- **Exécutant** : sous-agent general-purpose, dans un worktree
+
+## Objectif
+
+Mettre en place les cinq premières leçons numérotées de l'ADR 0011. Chaque leçon est faite d'écrans courts : une explication, une position animée, puis « à vous de jouer ». La progression est stockée localement, et l'accueil propose « Continuer la leçon ».
+
+## Consignes
+
+1. **Contenus.** Ils vivent dans une source unique sous `docs/lecons/`, sous licence CC BY-SA 4.0, au même format que le tutoriel de 0e.5 (réutiliser son moteur d'écrans). Cinq leçons du parcours 2 du cadrage, au niveau débutant :
+   1. Les ouvertures : bien jouer ses premiers dés.
+   2. Construire ses cases et faire des points.
+   3. Frapper ou ne pas frapper : sécurité et risque.
+   4. La course et le compte de points.
+   5. Sortir ses pions sans se faire frapper.
+
+   Chaque leçon compte deux à quatre exercices « à vous ». Leurs positions sont données par identifiants gnubg. La réponse attendue est le meilleur coup du moteur à 2 plis, vérifié par un test. Le texte n'affirme rien que le moteur ne confirme. Les contenus sont livrés en brouillon, marqués « à relire par un joueur fort » (cadrage, risque « contenus »), et Pierre les valide.
+2. **Progression.** Elle est enregistrée dans le stockage de 1b, dans le magasin `settings` ou dans un nouveau magasin avec montée de version (ADR 0007 amendé). Chaque leçon a son état : à commencer, « 2 exercices sur 4 », terminée.
+3. **Adresses** : `#/lecons` et `#/lecons/<n>/<écran>`, à ajouter au tableau de l'ADR 0013.
+4. **Accueil.** Il reçoit la carte « prochaine leçon » prévue par la charte.
+5. **Tests.**
+   - Pour chaque exercice, la position est valide et la réponse attendue est bien le meilleur coup du moteur.
+   - Scénarios Gherkin.
+   - `make lint`, `make test`, `make test-browser`, avec captures.
+
+## Critères de réussite
+
+Les cinq leçons se suivent jusqu'au bout. Chaque exercice accepte le coup du moteur et commente les autres avec bienveillance. Les trois commandes passent.
+
+## Résultat
+
+À remplir à la clôture.

docs/plans/2026-11-03-plateau-soigne.md

@@ -0,0 +1,32 @@
+# Plateau soigné : gestes et finitions (1i)
+
+- **Date** : 2026-11-03
+- **Étape** : 1i (`docs/etape-1.md`)
+- **Statut** : prévu
+- **Exécutant** : sous-agent general-purpose, dans un worktree
+
+## Objectif
+
+Terminer le plateau soigné du cadrage, une fois la révision UX en place :
+- les gestes naturels (principe d'expérience 2) ;
+- les écarts restants avec `docs/identite/charte/board.js`.
+
+## Consignes
+
+1. **Glisser-déposer.** On peut glisser un pion en plus du toucher pion puis destination. Le pion suit le doigt, et le lâcher hors d'une case permise le ramène à sa place. Les cibles restent celles du moteur.
+2. **Double toucher.** Un double toucher sur un pion joue le seul coup évident (cadrage). Un « coup évident » est défini ainsi : un seul coup légal complet commence par ce pion, ou le moteur ne propose qu'un coup. Sinon, rien ne se passe.
+3. **Écarts restants avec board.js.** Les relever par comparaison visuelle (filet des pions, numéros sur le cadre, videau…) et les corriger.
+4. **Clavier.** Faire ce que la révision UX a laissé :
+   - le choix des pions aux flèches ;
+   - l'affichage des raccourcis en `kbd` quand un clavier est détecté (interaction.md).
+5. **Tests.**
+   - Scénarios Gherkin si un nouveau comportement est visible.
+   - `make lint`, `make test`, `make test-browser` (glisser-déposer simulé, double toucher), avec captures pour la recette design.
+
+## Critères de réussite
+
+Un coup se joue entièrement au glisser-déposer. Le double toucher joue le coup évident. Les trois commandes passent.
+
+## Résultat
+
+À remplir à la clôture.

docs/plans/2026-11-03-progression.md

@@ -0,0 +1,30 @@
+# Progression (1h)
+
+- **Date** : 2026-11-03
+- **Étape** : 1h (`docs/etape-1.md`)
+- **Statut** : prévu (après 1e)
+- **Exécutant** : sous-agent general-purpose, dans un worktree
+
+## Objectif
+
+Mettre en place la progression du cadrage pour la V1 : l'historique des parties et la courbe du taux d'erreur.
+
+## Consignes
+
+1. **Écran `#/progression`.** Il est conforme à la charte et s'ajoute au tableau de l'ADR 0013. Il montre :
+   - la courbe du taux d'erreur par partie terminée, en SVG à la main, sans dépendance ;
+   - la liste des parties, reliée à leur bilan et à leur analyse (1e) ;
+   - un résumé en une phrase.
+2. **Accueil.** Il reçoit la « ligne de progression » de la charte.
+3. **Données.** Elles proviennent des analyses enregistrées : rien n'est recalculé si l'analyse existe. Une partie non analysée est analysée en arrière-plan.
+4. **Tests.**
+   - Scénarios Gherkin.
+   - `make lint`, `make test`, `make test-browser` avec trois parties jouées, et captures.
+
+## Critères de réussite
+
+Après trois parties, la courbe a trois points égaux aux taux d'erreur des bilans. Les trois commandes passent.
+
+## Résultat
+
+À remplir à la clôture.

docs/plans/2026-11-03-prompts.md

@@ -0,0 +1,42 @@
+# Prompts à copier (1f)
+
+- **Date** : 2026-11-03
+- **Étape** : 1f (`docs/etape-1.md`)
+- **Statut** : prévu (après 1e)
+- **Exécutant** : sous-agent general-purpose, dans un worktree
+
+## Objectif
+
+Mettre en place la section « IA générative en V1 » du cadrage. Un bouton « Demander à une IA » copie un prompt rempli avec le contexte exact. Le moteur décide, l'IA explique. L'app n'appelle aucune IA.
+
+## Consignes
+
+1. **Gabarits.** Les cinq gabarits du cadrage sont versionnés dans une source unique sous `docs/prompts/`, sous licence CC BY-SA 4.0 :
+   - « pourquoi ce coup est meilleur » ;
+   - « expliquer cette décision de videau » ;
+   - « bilan de ma partie » ;
+   - « expliquer ce concept » ;
+   - « créer des exercices », à garder pour la progression.
+
+   Chaque gabarit contient :
+   - le rôle et le niveau du joueur ;
+   - le Position ID et le Match ID ;
+   - un diagramme texte de la position, produit à partir du plateau décodé par le moteur ;
+   - les chiffres du moteur, avec le niveau d'évaluation ;
+   - la consigne de ne pas contredire ces chiffres ;
+   - la langue.
+
+   Ajouter aussi le lien `#/position/...` de l'ADR 0013, avec l'adresse publique du site.
+2. **Remplissage.** Une fonction pure remplit les gabarits. Elle est testée sur des analyses réelles du moteur : aucun champ vide ni `{inconnu}`, et les chiffres sont identiques à ceux du moteur.
+3. **Boutons.** Ils sont placés sur le conseil du maître (feuille d'explication), le bilan, l'analyse et la fiche d'un terme du glossaire. La copie passe par `navigator.clipboard`, avec un repli de sélection du texte. Un bandeau « Prompt copié » l'accompagne, et le texte reste visible pour qui veut le relire.
+4. **Tests.**
+   - Scénarios Gherkin : copier le prompt d'une erreur, et celui d'un bilan.
+   - `make lint`, `make test` et `make test-browser`, avec lecture du presse-papiers dans Chromium et captures.
+
+## Critères de réussite
+
+Le prompt copié après une erreur contient la position, les identifiants gnubg et le top 3 du moteur avec les mêmes chiffres que l'app. Les trois commandes passent.
+
+## Résultat
+
+À remplir à la clôture.