diff --git a/docs/identite/charte/README.md b/docs/identite/charte/README.md index 7559af1..d0accad 100644 --- a/docs/identite/charte/README.md +++ b/docs/identite/charte/README.md @@ -14,7 +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)… | +| `ecrans-etape-1.md` | Écrans de l'étape 1, lot par lot : nouvelle partie et match (1c), conseil du maître (1d), bilan et analyse (1e), IA (1f), leçons (1g), progression (1h), gestes (1i) | | `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 | diff --git a/docs/identite/charte/ecrans-etape-1.md b/docs/identite/charte/ecrans-etape-1.md index d0865b3..f5c71b9 100644 --- a/docs/identite/charte/ecrans-etape-1.md +++ b/docs/identite/charte/ecrans-etape-1.md @@ -138,3 +138,116 @@ permet de le déterminer, sinon rien. choix. » - Videau, prise juste : « Bonne décision : prendre était le bon choix. » - Videau, double manqué : « Ici, j'aurais doublé. » + +## 1e. Bilan et analyse + +### Bilan (`#/parties//bilan`) + +Maquette « Bilan de fin de partie ». Il remplace le panneau de fin de partie +quand l'analyse est prête ; avant, le panneau actuel s'affiche et le bilan le +remplace en place, sans saut. + +1. `overline` « Fin de partie », titre `display` (« Vous gagnez », « L'ordinateur + gagne un gammon »), puis une phrase : le résultat en points et une + lecture simple du jeu et des dés (« Votre jeu a fait la différence, avec + des dés un peu contre vous. »), construite à partir du taux d'erreur et de + la chance donnés par le moteur, jamais inventée. +2. Trois cases côte à côte : le nombre de bons coups, d'imprécisions et + d'erreurs (grosses erreurs comprises), chiffre en 28 px, mot et icône en + couleur d'appréciation. +3. Deux jauges sur une ligne chacune : + - « Votre jeu » : le taux d'erreur traduit en niveau (correspondance avec + les classements de gnubg documentée, mêmes noms que les niveaux de + l'ordinateur), jauge en `verdict-good` ; + - « Les dés » : la chance, jauge centrée (à droite si elle vous a aidé, à + gauche sinon), en `border-strong`, avec trois mots possibles : « pour + vous », « équilibrés », « contre vous » (« un peu » ou « nettement » + selon l'écart). + Lien « Comment lire ces mesures » vers les fiches du glossaire. +4. « Le coup à revoir » : la plus grosse erreur, mini-plateau, mot + d'appréciation, coup joué et coup du maître ; « Revoir ce coup » (ouvre + l'analyse sur ce coup) et « Demander à une IA ». Sans erreur ni + imprécision : la carte dit « Aucun coup à revoir : vous avez joué comme le + maître. » +5. Barre d'actions : « Voir l'analyse » et « Nouvelle partie » (principale). + +### Analyse (`#/parties//analyse/`) + +Maquette interactive « Analyse ». Une page qui défile, de haut en bas : + +1. **Courbe de vos chances de gagner**, coup après coup, en pourcentage (pas + en équité : un débutant lit « 41 % », pas « −0,18 »). Tracé `text` de 2 px, + aire `accent-soft`, ligne pointillée à 50 %. Les coups commentés sont des + points de couleur d'appréciation, les autres de petits points `text`. + **On parcourt la courbe du doigt** : chaque coup possède une bande verticale + sur toute la hauteur du graphique, qui sert de cible tactile ; le coup + choisi porte un trait vertical brique et un point cerclé. +2. **Visualiseur** : « ‹ Coup 7 sur 24 · 6-1 › », le plateau de la position + d'avant le coup, la phrase du maître, le sélecteur « Votre coup » / « Le + coup du maître » de la feuille 1d, puis « Rejouer d'ici » (crée une + branche, ADR 0011 et 1b) et « Demander à une IA ». +3. **Les coups à revoir** : filtres en pastilles de 44 px (« Tout », + « Erreurs », « Imprécisions », avec leurs nombres), puis une ligne par + coup : numéro, dés, coup joué, mot d'appréciation. Toucher une ligne place + le visualiseur et la courbe sur ce coup. + +Sur ordinateur, `←` et `→` passent d'un coup à l'autre. + +## 1f. Demander à une IA + +Le bouton est secondaire partout, jamais l'action principale, avec l'icône +de copie : dans la feuille du maître (1d), dans la carte « Le coup à +revoir » du bilan, dans le visualiseur de l'analyse, et dans une fiche du +glossaire. Après la copie, le bandeau « Prompt copié » (`verdict-good`, 2 s), +puis le texte du prompt reste lisible dans une zone `surface-sunken` +repliable, pour qui veut le relire avant de le coller (composant `AskAI`). + +## 1g. Leçons (`#/lecons`, `#/lecons//<écran>`) + +Maquette « Leçons ». En tête, un rappel discret « Les règles du jeu · +revoir » (le tutoriel de 0e.5). Puis les cinq leçons numérotées, dans +l'ordre, chacune avec une pastille ronde à son numéro : + +- terminée : pastille `verdict-good`, « Terminée » ; +- en cours : carte bordée de brique, pastille brique, « 2 exercices sur 4 », + barre de progression, bouton « Continuer » (seule action principale de + l'écran) ; +- à commencer : pastille au contour `border-strong`. + +Toutes les leçons restent ouvertes : l'ordre est conseillé, jamais imposé. +Les écrans d'une leçon suivent la forme du tutoriel (barre de progression, +« Passer », « Retour », « Continuer », écrans « à vous » contrôlés par le +moteur). + +## 1h. Progression (`#/progression`) + +Maquette « Progression ». + +- Une phrase de synthèse, factuelle (« Sur vos 8 dernières parties, vous + faites moins d'erreurs : votre taux d'erreur est passé de 14 à 7. »). Si la + tendance monte, la phrase reste encourageante et sans reproche (« Votre + taux d'erreur remonte un peu ces derniers jours. Les leçons sont là + pour reprendre un point. »). +- La courbe du taux d'erreur par partie terminée, avec le rappel « plus bas, + c'est mieux » dans son titre, le dernier point en `verdict-good`, et un lien + vers la fiche « taux d'erreur ». +- La liste des parties (résultat, date, niveau de l'ordinateur, taux d'erreur + en chiffre gras aligné à droite), chacune ouvrant son bilan. +- Moins de trois parties analysées : pas de courbe, une phrase « Votre + courbe apparaîtra après trois parties. ». + +## 1i. Gestes sur le plateau + +- **Glisser-déposer** : le pion suit le doigt, agrandi à 115 % et décalé de + 12 px vers le haut pour rester visible sous le doigt ; à son départ, un pion + fantôme en pointillés ; les cases d'arrivée permises gardent leur voile et + leur anneau (révision UX). Lâché sur une case permise : il s'y pose + (`duration-fast`, vibration « pion posé ») ; lâché ailleurs : il revient à + sa place en `duration-fast`, sans vibration ni message. +- **Double toucher** : joue le coup évident quand il existe (un seul coup légal + complet commence par ce pion, ou le moteur n'en propose qu'un) ; sinon, il + vaut un simple toucher, sans message d'erreur. +- **Toucher simple** : inchangé (pion puis case, ou avance directe s'il n'a + qu'une case d'arrivée). +- Les trois gestes coexistent ; aucun n'est expliqué par une fenêtre : le + tutoriel et l'aide en parlent.