diff --git a/docs/plans/2026-11-03-charte-ui.md b/docs/plans/2026-11-03-charte-ui.md index f272c19..29757d9 100644 --- a/docs/plans/2026-11-03-charte-ui.md +++ b/docs/plans/2026-11-03-charte-ui.md @@ -2,7 +2,7 @@ - **Date** : 2026-11-03 - **Étape** : 0d (finition demandée par Pierre) -- **Statut** : en cours +- **Statut** : terminé - **Exécutant** : sous-agent general-purpose dans le rôle d'un designer UI, dans un worktree isolé ## Objectif @@ -69,4 +69,37 @@ plateau, les écarts à la charte, le résultat des tests. ## Résultat -À remplir à la clôture. +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`.