diff --git a/docs/feuille-de-route.md b/docs/feuille-de-route.md index b5a8b6e..d31c81a 100644 --- a/docs/feuille-de-route.md +++ b/docs/feuille-de-route.md @@ -21,6 +21,7 @@ garde-fous d'architecture (0d.1), déploiement sur https://ustagammon.sans.pub. | Sous-étape | Contenu | État | Plan | | --- | --- | --- | --- | | 0d.2 | Plateau minimal jouable (PWA hors ligne), publié ; reste la vérification avec Pierre sur le Fairphone 4 (`docs/guide-test-etape-0.md`, section « Étape 0d ») | 🔄 | | +| 0d.2+ | Appliquer la charte graphique à l'application (agent designer UI) : demande de Pierre | 🔄 | `plans/2026-11-03-charte-ui.md` | **Critère de fin** : une partie complète jouée sur le Fairphone 4, moins de 2 s par coup de l'IA en niveau standard, tous les tests au vert. diff --git a/docs/plans/2026-11-03-charte-ui.md b/docs/plans/2026-11-03-charte-ui.md new file mode 100644 index 0000000..f272c19 --- /dev/null +++ b/docs/plans/2026-11-03-charte-ui.md @@ -0,0 +1,72 @@ +# Appliquer la charte graphique à l'application + +- **Date** : 2026-11-03 +- **Étape** : 0d (finition demandée par Pierre) +- **Statut** : en cours +- **Exécutant** : sous-agent general-purpose dans le rôle d'un designer UI, dans un worktree isolé + +## Objectif + +L'application publiée (https://ustagammon.sans.pub) adopte l'identité +d'Ustagammon (ADR 0010, `docs/identite/`) et gagne en qualité d'interface : +lisible, chaleureuse, agréable au toucher, dans les deux thèmes et les deux +orientations. Les choix d'identité sont déjà faits par Pierre : il s'agit de +les appliquer fidèlement et de soigner l'ergonomie, pas de les réinventer. + +## Consignes + +1. **Appliquer la charte** en suivant `docs/identite/charte/README.md` (section + « Appliquer la charte à `web/` ») : couleurs des deux thèmes depuis + `tokens.json`, police Alegreya Sans embarquée (OFL, licence jointe, ajoutée + au cache du service worker), composants de `bundle.css` (boutons, focus, + zone de consigne, filet des pions), logo horizontal dans la barre haute, + icônes et favicon de `docs/identite/logo/`, `theme-color` du manifeste. + Lire aussi `guide-de-marque.md` (ton, formes, mouvement). +2. **Passe de designer UI** sur les écrans existants (plateau, consignes et + boutons, fin de partie, aide, thème sombre, paysage) : + - hiérarchie visuelle claire : la consigne du moment ressort, l'information + secondaire (compte de points, dernier coup) reste discrète ; + - cibles tactiles d'au moins 44 à 48 px, espacements réguliers, rien qui + déborde en 360 px de large ni en paysage ; + - contrastes conformes aux tokens (déjà vérifiés par la charte) ; anneau de + focus visible au clavier ; + - page d'aide agréable à lire (titres, glossaire en liste de définitions) ; + - respecter `prefers-reduced-motion`. + Lister dans le rapport chaque amélioration et sa raison. +3. **Périmètre, pour éviter les conflits** : un autre agent ajoute en parallèle + l'animation et les traces du coup de l'ordinateur (`board-view.ts`, + `app.ts`, nouvelles classes CSS de traces). Ne modifie pas la géométrie ni + la logique de `board-view.ts` et `app.ts` ; agis par le CSS, les variables, + `index.html`, `texts.ts` (sans changer le sens des textes) et les fichiers + statiques. Si une amélioration demande de toucher au dessin du plateau, + décris-la dans le rapport au lieu de la faire. Prévois les couleurs des + traces dans les variables (`--last-move` en laiton selon les tokens). +4. **Tests** : `make lint`, `make test` (dont `tests/test_site.sh`, à mettre à + jour pour la police, les icônes et le service worker) et `make test-browser` + verts ; captures d'écran avant et après (portrait clair, portrait sombre, + paysage, aide, fin de partie) dans le dossier de travail temporaire. +5. `CREDITS.md` : Alegreya Sans (OFL) et le logo (CC BY-SA 4.0). + +Contraintes : +- `CLAUDE.md`, ADR 0007 à 0010 : simplicité, pas de framework CSS, identifiants + en anglais, commentaires et textes en français ; +- aucune modification de l'identité elle-même (couleurs, logo, police) : en cas + de doute ou de manque dans la charte, le signaler dans le rapport ; +- ne pas publier, ne pas pousser, ne pas créer de merge request ; +- commits petits, en français, avec la ligne + `Co-Authored-By: Claude Opus 5.5 `. + +Rapport attendu : ce qui a été appliqué, les améliorations d'interface et leurs +raisons, les captures avant et après (chemins), ce qui demande de toucher au +plateau, les écarts à la charte, le résultat des tests. + +## Critères de réussite + +- L'application suit la charte dans les deux thèmes (couleurs, police, logo, + icônes, composants), hors ligne compris. +- Rien ne déborde en 360 × 740, 412 × 915, 915 × 412 et 740 × 360. +- `make lint`, `make test` et `make test-browser` passent. + +## Résultat + +À remplir à la clôture.