Charte appliquée : plan clos ; fluidité ajoutée à la feuille de route
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
15caf4da6e
commit
02050eff01
@@ -21,7 +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` |
|
||||
| 0d.2+ | Fluidité de la partie : supprimer ce qui interrompt le jeu sans nécessité (bouton « Nouvelle partie » toujours visible, confirmations, étapes inutiles) : demande de Pierre | ⏳ | |
|
||||
|
||||
**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.
|
||||
|
||||
@@ -1,105 +0,0 @@
|
||||
# Appliquer la charte graphique à l'application
|
||||
|
||||
- **Date** : 2026-11-03
|
||||
- **Étape** : 0d (finition demandée par Pierre)
|
||||
- **Statut** : terminé
|
||||
- **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 <noreply@anthropic.com>`.
|
||||
|
||||
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
|
||||
|
||||
Branche `charte-ui-travail`. Tests : `make lint`, `make test` (10/10) et
|
||||
`make test-browser` (Chromium et Firefox, partie complète, paysage, hors
|
||||
ligne, CSP) au vert. Contrôle supplémentaire en 360 × 740, 412 × 915,
|
||||
915 × 412 et 740 × 360, clair et sombre, dans les deux navigateurs : aucun
|
||||
défilement horizontal, rien hors de l'écran, aucun bouton sous 44 px.
|
||||
|
||||
**Appliqué** : couleurs des deux thèmes depuis `tokens.json` (brique en
|
||||
accent, laiton pour `--last-move`) ; Alegreya Sans en cinq graisses dans
|
||||
`web/fonts/` (woff2, sous-ensemble latin, 143 Ko au lieu de 1,3 Mo en TTF,
|
||||
licence `OFL.txt`), mise en cache par le service worker comme tout le site ;
|
||||
boutons ronds, anneau de focus, zone de consigne ; logo dans la barre haute
|
||||
(version sombre en thème sombre) ; icônes, favicon et icône Apple copiés de
|
||||
`docs/identite/logo/` par `make site` (une seule source ; anciennes icônes
|
||||
et `scripts/make-icons.py` supprimés) ; `theme-color` `#4A2E1F`.
|
||||
|
||||
**Passe d'interface** : consigne dans un cadre `accent-soft` (neutre pendant
|
||||
que l'ordinateur réfléchit, `body.busy` dès le chargement) ; résultat de fin
|
||||
de partie en taille titre ; compte de points et dernier coup en texte
|
||||
secondaire ; plateau à 8 px des bords en portrait ; en paysage, barre haute
|
||||
dans la colonne de droite, le plateau gagne toute la hauteur (344 px au lieu
|
||||
de 304 en 740 × 360) ; cibles de 44 à 48 px, `touch-action: manipulation` ;
|
||||
aide en colonne de lecture, titres de la charte, glossaire en carte ; chiffres
|
||||
alignés sur le plateau ; `prefers-reduced-motion` respecté.
|
||||
|
||||
**Écarts à valider** : symbole seul au lieu du logo horizontal sous 392 px
|
||||
de large et dans la colonne du paysage (le logo et les deux boutons ne
|
||||
tiennent pas en 360 px) ; numéros des flèches en `muted` (clair) et
|
||||
`point-number` (sombre), parce que notre plateau les pose sur le fond et non
|
||||
sur le cadre ; chiffres alignés (`lining-nums`) en plus de `tabular-nums`.
|
||||
|
||||
**À faire dans `board-view.ts`** (hors périmètre) : filet intérieur des pions
|
||||
(classe `.checker-ring` prête), numéros sur le cadre, voile de cible en
|
||||
triangle, marque du dernier coup en barrette laiton à la base de la flèche,
|
||||
videau sur la barre, comme `docs/identite/charte/board.js`.
|
||||
Reference in New Issue
Block a user