Compare commits

...
5 Commits
4 changed files with 80 additions and 3 deletions
+1 -1
View File
@@ -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
+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)… |
| `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 |
+61
View File
@@ -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.
+17 -2
View File
@@ -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.