Charte : règles d'interaction, jetons de mouvement, ADR 0012 précisé
interaction.md : réponse immédiate, annuler plutôt que confirmer, mouvement (durées et courbes), vibrations, clavier sur ordinateur, mises en page de l'écran de jeu, pictogrammes. ADR 0012 : placement des contrôles en paysage après la revue UX (colonne de commandes à gauche, sorties libres, comptes en pastilles sur la barre). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Pierre MARTIN
co-authored by
Claude Opus 5.5
Claude Opus 5.5
parent
19808d9afa
commit
4403fc2844
@@ -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 |
|
||||
| `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 |
|
||||
| `bundle.css` | Styles des composants ; mêmes noms de classes que `web/app.css` |
|
||||
| `board.js` | Dessin de référence du plateau (repère 640 × 520), pour comparaison |
|
||||
|
||||
@@ -56,6 +56,10 @@ Sobre et utile : un pion glisse vers sa flèche (150 à 250 ms, sans rebond), le
|
||||
- Icônes d'interface : traits simples de 2px à bouts ronds, dessinés en SVG dans le code (pas de police d'icônes, pas d'émoji). Les seules icônes du système pour l'instant : les trois appréciations de coups (coche, point d'interrogation, croix) et la copie (deux feuillets).
|
||||
- Dés, pions et videau sont dessinés en SVG avec les couleurs du plateau, jamais en images.
|
||||
|
||||
## Interaction
|
||||
|
||||
Règles de comportement (réponse immédiate, annuler plutôt que confirmer, mouvement, vibrations, clavier, mises en page de l’écran de jeu) : section « Interaction ».
|
||||
|
||||
## Composants
|
||||
|
||||
Plateau (`Board`) et ses pièces (`Checker`, `Die`, `DoublingCube`), boutons (`Button`), barre haute (`TopBar`), zone de consigne (`GamePrompt`), appréciation d'un coup (`MoveVerdict`), fiche de glossaire (`GlossaryCard`), carte de leçon (`LessonCard`) et « Demander à une IA » (`AskAI`). Chacun a sa fiche avec ses règles d'usage et un aperçu dans les deux thèmes.
|
||||
Plateau (`Board`) et ses pièces (`Checker`, `Die`, `DoublingCube`), boutons (`Button`), barre haute (`TopBar`), zone de consigne (`GamePrompt`), appréciation d’un coup (`MoveVerdict`), pictogrammes (`Icons`), fiche de glossaire (`GlossaryCard`), carte de leçon (`LessonCard`) et « Demander à une IA » (`AskAI`). Chacun a sa fiche avec ses règles d'usage et un aperçu dans les deux thèmes.
|
||||
|
||||
@@ -0,0 +1,72 @@
|
||||
# Interaction
|
||||
|
||||
Ustagammon doit se sentir **net et rapide**, comme un outil bien réglé : chaque toucher répond tout de suite, rien ne saute, rien n'interrompt la partie sans raison. La chaleur vient de la matière et du ton ; la précision vient du comportement.
|
||||
|
||||
## Principes
|
||||
|
||||
1. **Réponse immédiate.** Un toucher produit un effet visible en moins de 100 ms : le pion part, le bouton s'enfonce. Le moteur calcule ensuite, en arrière-plan ; l'interface ne l'attend jamais pour réagir.
|
||||
2. **Rien ne bouge sous le doigt.** Les zones de l'écran de jeu ont une hauteur fixe : seuls leurs contenus changent. Une ligne vide garde sa place.
|
||||
3. **Annuler plutôt que confirmer.** Une action se fait tout de suite et se rattrape pendant 10 s par un bandeau « Reprendre » (nouvelle partie, abandon). Une boîte de confirmation n'est permise que pour une décision de jeu irréversible qui engage la partie : prendre ou passer un double, doubler.
|
||||
4. **Une seule action principale par moment**, en brique, à droite, sous le pouce.
|
||||
5. **Le joueur garde la main.** L'app ne joue jamais à sa place : quand aucun coup n'est possible, les dés se barrent et le joueur passe en les touchant (demande explicite de Pierre).
|
||||
6. **Le maître parle après le coup, discrètement** (ADR 0011) : une ligne réservée sous le plateau, qui s'ouvre sur l'explication si on la touche. Jamais de fenêtre qui s'impose.
|
||||
7. **Le sens passe toujours par deux canaux** : couleur et mot, vibration et marque visible, raccourci et bouton.
|
||||
|
||||
## Mouvement
|
||||
|
||||
| Jeton | Valeur | Usage |
|
||||
| --- | --- | --- |
|
||||
| `duration-instant` | 90ms | Retour d'appui d'un bouton, apparition du contour d'un pion jouable. |
|
||||
| `duration-fast` | 160ms | Pion qui glisse d'une flèche à l'autre, dés qui se posent, bandeaux. |
|
||||
| `duration-moderate` | 240ms | Feuille du menu qui monte, panneau de fin de partie, bascule de mise en page. |
|
||||
| `easing-standard` | cubic-bezier(0.2, 0, 0, 1) | Tout ce qui se déplace : départ franc, arrivée douce. |
|
||||
| `easing-exit` | cubic-bezier(0.4, 0, 1, 1) | Ce qui disparaît. |
|
||||
|
||||
- Pas de rebond, pas d'élastique, pas de fondu de plus de 240 ms.
|
||||
- Les coups de l'ordinateur se jouent demi-coup par demi-coup, 160 ms par pion, 120 ms de pause entre deux : on suit le coup sans l'attendre.
|
||||
- Le bouton enfoncé descend de 1 px et s'assombrit de 6 %, sans ombre.
|
||||
- `prefers-reduced-motion` : les déplacements deviennent des apparitions instantanées ; les dés ne roulent pas.
|
||||
|
||||
## Vibrations
|
||||
|
||||
Activées par défaut, désactivables dans le menu (« Vibrations »). Elles doublent un événement visible, jamais seules. Rien ne vibre pour un toucher de bouton ni pour le lancer des dés.
|
||||
|
||||
| Moment | Motif (ms) |
|
||||
| --- | --- |
|
||||
| Votre pion se pose | `12` |
|
||||
| Un pion est frappé | `25, 40, 25` |
|
||||
| L'ordinateur propose de doubler | `40, 60, 40` |
|
||||
| Fin de partie gagnée | `30, 50, 30, 50, 60` |
|
||||
| Fin de partie perdue | `60` |
|
||||
|
||||
Les durées se règlent en main sur le Fairphone 4. Une seule vibration à la fois : la dernière annule la précédente.
|
||||
|
||||
## Clavier (ordinateur)
|
||||
|
||||
Chaque action a son raccourci, affiché sur le bouton en petite touche (`kbd`) quand un clavier est détecté. `?` ouvre la liste.
|
||||
|
||||
| Touche | Action |
|
||||
| --- | --- |
|
||||
| `Espace` | Lancer les dés ; jouer le coup quand il est complet ; passer quand aucun coup n'est possible |
|
||||
| `←` `→` | Choisir un pion jouable (le focus se voit : anneau `focus`) |
|
||||
| `↑` `↓` | Choisir sa case d'arrivée |
|
||||
| `Entrée` | Poser le pion |
|
||||
| `Z` | Annuler le demi-coup (aussi `Ctrl+Z`) |
|
||||
| `D` | Doubler |
|
||||
| `P` / `N` | Prendre / passer, quand l'ordinateur double |
|
||||
| `F` | Plein écran |
|
||||
| `M` | Menu |
|
||||
| `?` | Aide et raccourcis |
|
||||
| `Échap` | Fermer le menu, l'aide ou la bulle ouverte ; ne touche jamais à la partie |
|
||||
|
||||
Le plateau entier se joue au clavier : c'est aussi ce qui le rend accessible aux lecteurs d'écran.
|
||||
|
||||
## Pictogrammes
|
||||
|
||||
Trait de 2 px à bouts ronds, sur une grille de 20 × 20, `currentColor`, dessinés en SVG dans le code. Le jeu complet : menu, aide, plein écran, quitter le plein écran, annuler (flèche de retour), revoir (flèche circulaire), fermer, chevron, copier, et les trois appréciations (coche, point d'interrogation, croix dans un cercle). En portrait, la barre haute affiche un libellé de 13 px sous chaque pictogramme ; en paysage et sur ordinateur, le pictogramme seul avec son `aria-label`.
|
||||
|
||||
## Mises en page de l'écran de jeu
|
||||
|
||||
- **Portrait** : barre haute, bandeau de l'ordinateur, plateau, bandeau du joueur (teinté `accent-soft` quand c'est à lui), ligne du maître ou du dernier coup, consigne, et barre d'actions collée en bas. Hauteurs fixes.
|
||||
- **Paysage** (dès que le téléphone est tourné ; ADR 0012) : le plateau est l'écran. Colonne de commandes à gauche dans le cadre (menu, videau, annuler ou revoir), sorties à droite, comptes de points en pastilles aux deux bouts de la barre, consigne et dés dans la bande centrale. Numéros des flèches à 12 px au moins.
|
||||
- **Ordinateur** : plateau à gauche, colonne à droite avec les bandeaux des joueurs, la liste des coups, la consigne, les actions et leurs raccourcis.
|
||||
@@ -526,5 +526,38 @@
|
||||
},
|
||||
"meta": {
|
||||
"source": "Brief créatif + ADR 0010 + web/app.css (noms des variables du plateau)"
|
||||
},
|
||||
"duration": {
|
||||
"tokens": [
|
||||
{
|
||||
"name": "duration-instant",
|
||||
"value": "90ms",
|
||||
"usage": "Retour d'appui d'un bouton, contour d'un pion jouable."
|
||||
},
|
||||
{
|
||||
"name": "duration-fast",
|
||||
"value": "160ms",
|
||||
"usage": "Pion qui glisse, dés qui se posent, bandeaux."
|
||||
},
|
||||
{
|
||||
"name": "duration-moderate",
|
||||
"value": "240ms",
|
||||
"usage": "Feuille du menu, panneau de fin de partie, bascule de mise en page. Jamais plus long."
|
||||
}
|
||||
]
|
||||
},
|
||||
"easing": {
|
||||
"tokens": [
|
||||
{
|
||||
"name": "easing-standard",
|
||||
"value": "cubic-bezier(0.2, 0, 0, 1)",
|
||||
"usage": "Tout ce qui se déplace : départ franc, arrivée douce."
|
||||
},
|
||||
{
|
||||
"name": "easing-exit",
|
||||
"value": "cubic-bezier(0.4, 0, 1, 1)",
|
||||
"usage": "Ce qui disparaît."
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user