From 02050eff0137865180a30a5200f789b630524e14 Mon Sep 17 00:00:00 2001 From: Pierre MARTIN Date: Tue, 3 Nov 2026 04:56:53 +0100 Subject: [PATCH] =?UTF-8?q?Charte=20appliqu=C3=A9e=20:=20plan=20clos=20;?= =?UTF-8?q?=20fluidit=C3=A9=20ajout=C3=A9e=20=C3=A0=20la=20feuille=20de=20?= =?UTF-8?q?route?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 5.5 --- docs/feuille-de-route.md | 2 +- docs/plans/2026-11-03-charte-ui.md | 105 ----------------------------- 2 files changed, 1 insertion(+), 106 deletions(-) delete mode 100644 docs/plans/2026-11-03-charte-ui.md diff --git a/docs/feuille-de-route.md b/docs/feuille-de-route.md index 466946d..1504fd8 100644 --- a/docs/feuille-de-route.md +++ b/docs/feuille-de-route.md @@ -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. diff --git a/docs/plans/2026-11-03-charte-ui.md b/docs/plans/2026-11-03-charte-ui.md deleted file mode 100644 index 29757d9..0000000 --- a/docs/plans/2026-11-03-charte-ui.md +++ /dev/null @@ -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 `. - -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`.