Charte graphique appliquée à l'application, passe d'ergonomie #18

2026-11-03T03:56:55Z

pierre commented

2026-11-03 03:56:55 +00:00

Pourquoi

La session design a fixé l'identité d'Ustagammon (ADR 0010) et livré la charte graphique dans docs/identite/ (MR !12 et !14) : couleurs des deux thèmes, police Alegreya Sans, composants, logo et icônes. L'application publiée avait encore une palette provisoire, avec un accent vert et la police système. Pierre a demandé un agent designer UI pour appliquer la charte et améliorer l'interface.

Quoi

Charte appliquée (docs/identite/charte/README.md) :

couleurs des deux thèmes reprises de tokens.json, avec la brique comme accent. Les couleurs nouvelles sont ajoutées (surface, accent-soft, verdicts, focus). --last-move passe au laiton, prêt pour les traces du coup de l'ordinateur ;
police Alegreya Sans, cinq graisses en woff2 réduites aux caractères latins : 143 Ko au lieu de 1,3 Mo en TTF. Licence OFL jointe, mise en cache par le service worker, donc disponible hors ligne ;
composants : boutons ronds de 48 px, anneau de focus visible, zone de consigne ;
logo et icônes : logo horizontal dans la barre haute, en version sombre quand le thème est sombre. Icônes any et maskable et favicon. make site les copie depuis docs/identite/logo/, qui reste la seule source. Le manifeste a la theme_color #4A2E1F.

Passe d'ergonomie du designer :

la consigne du moment ressort, dans un cadre teinté quand c'est au joueur et neutre pendant que l'ordinateur réfléchit ;
la fin de partie affiche le résultat en grand, avec une seule action principale ;
le compte de points et le dernier coup restent discrets ;
le plateau est plus grand en portrait (344 px de large en 360) ;
en paysage, la barre haute passe dans la colonne de droite et le plateau prend toute la hauteur (396 px en 915×412, 344 px en 740×360) ;
toutes les cibles font au moins 44 px, le double toucher ne zoome plus, et un retour visuel accompagne le toucher ;
l'aide est plus lisible : colonne de lecture, titres, glossaire en liste de définitions ;
les chiffres sont alignés, alors qu'Alegreya dessine par défaut des chiffres de hauteurs variables ;
le réglage de mouvement réduit du système est respecté.

Tests : tests/test_site.sh vérifie aussi :

les types MIME des polices et des icônes ;
que chaque fichier désigné par index.html est servi ;
que les icônes servies sont identiques à docs/identite/logo/ ;
le manifeste ;
la présence de la police dans le cache du service worker.

Feuille de route : ajout de la demande de Pierre sur la fluidité de la partie (supprimer ce qui interrompt le jeu sans nécessité, comme le bouton « Nouvelle partie » toujours visible).

Comment

Travail délégué à un sous-agent dans le rôle d'un designer UI, selon un plan écrit avant la délégation, supprimé à la clôture ; son résultat est repris ici. Pour ne pas entrer en conflit avec l'agent qui ajoute en parallèle l'animation du coup de l'ordinateur, il n'a touché ni au dessin du plateau ni à la logique de l'interface : il a agi par le CSS, index.html et les fichiers statiques.

Vérification par la session principale, après fusion de main :

make lint, make test (10/10) ;
make test-browser : partie complète dans Chromium et Firefox. Le paysage tient dans l'écran, le hors ligne fonctionne (86 adresses en cache), la CSP ne relève aucune violation et la page aucune erreur ;
captures relues : portrait clair et paysage sombre conformes à la charte.

Le designer a aussi vérifié, avec un script hors dépôt, quatre tailles d'écran dans les deux thèmes et les deux navigateurs : pas de défilement horizontal, rien hors de l'écran, aucun bouton sous 44 px.

Choix et compromis

Écarts à la charte, à valider par Pierre :

Symbole seul dans la barre haute sous 392 px de large et dans la colonne du paysage : en 360 px, le logo horizontal et les deux boutons ne tiennent pas côte à côte.
Numéros des flèches en couleur muted en thème clair. La couleur ivoire prévue par la charte vise le cadre, où notre plateau ne pose pas encore ces numéros.
Chiffres alignés (lining-nums) : la charte ne parle pas du style des chiffres.
Survol des boutons secondaires en surface-sunken : la charte n'a pas de couleur de survol.

Risques et déploiement

Le site grossit de 143 Ko de polices, mises en cache une fois.
Après publication, le service worker sert d'abord l'ancienne version : il faudra peut-être recharger la page deux fois.

Retour arrière : redéployer l'image précédente dans CapRover, ou annuler le commit de fusion.

Comment vérifier

git switch main && git pull
make setup && make build
make lint && make test && make test-browser

Puis https://ustagammon.sans.pub sur le téléphone, en clair et en sombre, en portrait et en paysage.

Hors périmètre

Ce qui demande de toucher au dessin du plateau, pour rejoindre le dessin de référence (docs/identite/charte/board.js), sera fait après l'intégration du coup de l'ordinateur :

filet intérieur des pions ;
numéros des flèches sur le cadre ;
voile de cible en triangle ;
dernier coup marqué par une barrette laiton ;
videau sur la barre ;
alternance des couleurs des flèches.

Generated with Claude Code https://claude.com/claude-code

## Pourquoi La session design a fixé l'identité d'Ustagammon (ADR 0010) et livré la charte graphique dans `docs/identite/` (MR !12 et !14) : couleurs des deux thèmes, police Alegreya Sans, composants, logo et icônes. L'application publiée avait encore une palette provisoire, avec un accent vert et la police système. Pierre a demandé un agent designer UI pour appliquer la charte et améliorer l'interface. ## Quoi **Charte appliquée** (`docs/identite/charte/README.md`) : - **couleurs** des deux thèmes reprises de `tokens.json`, avec la brique comme accent. Les couleurs nouvelles sont ajoutées (surface, accent-soft, verdicts, focus). `--last-move` passe au laiton, prêt pour les traces du coup de l'ordinateur ; - **police Alegreya Sans**, cinq graisses en woff2 réduites aux caractères latins : **143 Ko** au lieu de 1,3 Mo en TTF. Licence OFL jointe, mise en cache par le service worker, donc disponible hors ligne ; - **composants** : boutons ronds de 48 px, anneau de focus visible, zone de consigne ; - **logo et icônes** : logo horizontal dans la barre haute, en version sombre quand le thème est sombre. Icônes any et maskable et favicon. `make site` les copie depuis `docs/identite/logo/`, qui reste la seule source. Le manifeste a la `theme_color` `#4A2E1F`. **Passe d'ergonomie du designer** : 1. la consigne du moment ressort, dans un cadre teinté quand c'est au joueur et neutre pendant que l'ordinateur réfléchit ; 2. la fin de partie affiche le résultat en grand, avec une seule action principale ; 3. le compte de points et le dernier coup restent discrets ; 4. le plateau est plus grand en portrait (344 px de large en 360) ; 5. en paysage, la barre haute passe dans la colonne de droite et le plateau prend toute la hauteur (396 px en 915×412, 344 px en 740×360) ; 6. toutes les cibles font au moins 44 px, le double toucher ne zoome plus, et un retour visuel accompagne le toucher ; 7. l'aide est plus lisible : colonne de lecture, titres, glossaire en liste de définitions ; 8. les chiffres sont alignés, alors qu'Alegreya dessine par défaut des chiffres de hauteurs variables ; 9. le réglage de mouvement réduit du système est respecté. **Tests** : `tests/test_site.sh` vérifie aussi : - les types MIME des polices et des icônes ; - que chaque fichier désigné par `index.html` est servi ; - que les icônes servies sont identiques à `docs/identite/logo/` ; - le manifeste ; - la présence de la police dans le cache du service worker. **Feuille de route** : ajout de la demande de Pierre sur la fluidité de la partie (supprimer ce qui interrompt le jeu sans nécessité, comme le bouton « Nouvelle partie » toujours visible). ## Comment Travail délégué à un sous-agent dans le rôle d'un designer UI, selon un plan écrit avant la délégation, supprimé à la clôture ; son résultat est repris ici. Pour ne pas entrer en conflit avec l'agent qui ajoute en parallèle l'animation du coup de l'ordinateur, il n'a touché ni au dessin du plateau ni à la logique de l'interface : il a agi par le CSS, `index.html` et les fichiers statiques. Vérification par la session principale, après fusion de `main` : - `make lint`, `make test` (10/10) ; - `make test-browser` : partie complète dans Chromium et Firefox. Le paysage tient dans l'écran, le hors ligne fonctionne (86 adresses en cache), la CSP ne relève aucune violation et la page aucune erreur ; - captures relues : portrait clair et paysage sombre conformes à la charte. Le designer a aussi vérifié, avec un script hors dépôt, quatre tailles d'écran dans les deux thèmes et les deux navigateurs : pas de défilement horizontal, rien hors de l'écran, aucun bouton sous 44 px. ## Choix et compromis Écarts à la charte, à valider par Pierre : 1. **Symbole seul dans la barre haute** sous 392 px de large et dans la colonne du paysage : en 360 px, le logo horizontal et les deux boutons ne tiennent pas côte à côte. 2. **Numéros des flèches** en couleur `muted` en thème clair. La couleur ivoire prévue par la charte vise le cadre, où notre plateau ne pose pas encore ces numéros. 3. **Chiffres alignés** (`lining-nums`) : la charte ne parle pas du style des chiffres. 4. **Survol des boutons secondaires** en `surface-sunken` : la charte n'a pas de couleur de survol. ## Risques et déploiement - Le site grossit de 143 Ko de polices, mises en cache une fois. - Après publication, le service worker sert d'abord l'ancienne version : il faudra peut-être recharger la page deux fois. Retour arrière : redéployer l'image précédente dans CapRover, ou annuler le commit de fusion. ## Comment vérifier ``` git switch main && git pull make setup && make build make lint && make test && make test-browser ``` Puis https://ustagammon.sans.pub sur le téléphone, en clair et en sombre, en portrait et en paysage. ## Hors périmètre Ce qui demande de toucher au dessin du plateau, pour rejoindre le dessin de référence (`docs/identite/charte/board.js`), sera fait après l'intégration du coup de l'ordinateur : - filet intérieur des pions ; - numéros des flèches sur le cadre ; - voile de cible en triangle ; - dernier coup marqué par une barrette laiton ; - videau sur la barre ; - alternance des couleurs des flèches. Generated with Claude Code https://claude.com/claude-code

pierre added 9 commits 2026-11-03 03:56:55 +00:00

Plan : appliquer la charte graphique à l'application e0f811d2b8

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Police Alegreya Sans embarquée (woff2, sous-ensemble latin) f1c52941e9

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Icônes et logo de la charte, copiés depuis docs/identite/logo/ 5d3dedcc90

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Charte appliquée à l'interface : couleurs, composants, mises en page 27ae0285a0

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Lint : la licence de la police reste identique à l'original 797c1724ab

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Chiffres alignés sur le plateau et dans le compte de points 62dfc1922a

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Plan : résultat de l'application de la charte d61efbc9ae

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Merge remote-tracking branch 'origin/main' into charte-ui 15caf4da6e

Charte appliquée : plan clos ; fluidité ajoutée à la feuille de route 02050eff01

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

pierre merged commit 99e87a3f50 into main

2026-11-03 03:56:56 +00:00

pierre referenced this pull request

2026-11-03 04:06:49 +00:00

Coup de l'ordinateur montré, aucun coup possible, dés et videau touchables #19

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: pierre/Ustagammon#18