From 0aec6cb7b1d2b596c99f4d80e725a49c33356727 Mon Sep 17 00:00:00 2001 From: Pierre MARTIN Date: Thu, 12 Nov 2026 10:01:30 +0100 Subject: [PATCH] =?UTF-8?q?Plateau=20soign=C3=A9=20:=201i=20faite,=20recet?= =?UTF-8?q?te=20des=20gestes,=20plan=20clos=20;=20glisser=20r=C3=A9serv?= =?UTF-8?q?=C3=A9=20au=20plateau=20de=20jeu?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 5.5 --- docs/etape-1.md | 2 +- docs/identite/charte/recette-ux.md | 3 +++ docs/plans/2026-11-03-plateau-soigne.md | 32 ------------------------- web/app.css | 11 ++++++--- 4 files changed, 12 insertions(+), 36 deletions(-) delete mode 100644 docs/plans/2026-11-03-plateau-soigne.md diff --git a/docs/etape-1.md b/docs/etape-1.md index 34e3972..71abb4b 100644 --- a/docs/etape-1.md +++ b/docs/etape-1.md @@ -25,7 +25,7 @@ Repris du cadrage (modules, écrans clés, IA générative en V1) et des ADR 001 | 1f. Prompts à copier (fait) | Gabarits versionnés et testés (`docs/prompts/` ou équivalent, source unique), bouton « Demander à une IA » sur le plateau, le conseil du maître, l'analyse et la fin de partie ; le moteur décide, l'IA explique | 1d, 1e | | 1g. Accueil, tutoriel et leçons | Accueil (reprendre, nouvelle partie, prochaine leçon, progression résumée), tutoriel des règles interactif et illustré (0e.5), cinq premières leçons numérotées (ADR 0011) avec positions et « à vous de jouer », progression locale ; contenus CC BY-SA 4.0 en brouillon, à relire par un joueur fort | 0e.5, 1a | | 1h. Progression | Historique des parties et courbe du taux d'erreur | 1b, 1e | -| 1i. Plateau soigné | Dessin du plateau aligné sur la charte (`docs/identite/charte/board.js`), animations des pions, glisser-déposer en plus du toucher, double toucher pour le seul coup évident | 0e.3 | +| 1i. Plateau soigné (fait) | Dessin du plateau aligné sur la charte (`docs/identite/charte/board.js`), animations des pions, glisser-déposer en plus du toucher, double toucher pour le seul coup évident | 0e.3 | | 1j. Plan de test | `docs/guide-test-etape-1.md` : parcours du débutant et du joueur de club sur le téléphone, avec ce qu'il faut rapporter | toutes | ## Orientation donnée par Pierre diff --git a/docs/identite/charte/recette-ux.md b/docs/identite/charte/recette-ux.md index 910bd55..577d2e0 100644 --- a/docs/identite/charte/recette-ux.md +++ b/docs/identite/charte/recette-ux.md @@ -47,3 +47,6 @@ Référence : `interaction.md`, maquettes « Révision UX » du canevas. - [ ] « Nouvelle partie » depuis le menu : effet immédiat, bandeau « Reprendre l'ancienne » 10 s, et la reprise restaure la partie exacte. - [ ] Vibrations aux quatre moments, coupées par l'interrupteur du menu (test unitaire sur `haptic()` ; ressenti à la main). - [ ] Écran maintenu allumé pendant une partie, interrupteur dans le menu. +- [ ] Glisser-déposer : le pion suit le doigt, agrandi et au-dessus de lui, un fantôme en pointillés à son départ ; lâché hors d'une case permise, il revient à sa place sans vibration ni message (`tests/browser/plateau.mjs`, captures `plateau/glissement-*`). +- [ ] Double toucher : le coup évident seulement (un seul coup commence par ce pion, ou un seul coup possible) ; sinon rien de plus qu'un toucher. +- [ ] Clavier : `←` `→` choisissent un pion, `↑` `↓` sa case (anneau `focus`), `Entrée` le pose ; les raccourcis s'affichent en `kbd` sur les boutons dès qu'un clavier est détecté (capture `plateau/clavier-*`). diff --git a/docs/plans/2026-11-03-plateau-soigne.md b/docs/plans/2026-11-03-plateau-soigne.md deleted file mode 100644 index 710fcc2..0000000 --- a/docs/plans/2026-11-03-plateau-soigne.md +++ /dev/null @@ -1,32 +0,0 @@ -# Plateau soigné : gestes et finitions (1i) - -- **Date** : 2026-11-03 -- **Étape** : 1i (`docs/etape-1.md`) -- **Statut** : prévu -- **Exécutant** : sous-agent general-purpose, dans un worktree - -## Objectif - -Terminer le plateau soigné du cadrage, une fois la révision UX en place : -- les gestes naturels (principe d'expérience 2) ; -- les écarts restants avec `docs/identite/charte/board.js`. - -## Consignes - -1. **Glisser-déposer.** On peut glisser un pion en plus du toucher pion puis destination. Le pion suit le doigt, et le lâcher hors d'une case permise le ramène à sa place. Les cibles restent celles du moteur. -2. **Double toucher.** Un double toucher sur un pion joue le seul coup évident (cadrage). Un « coup évident » est défini ainsi : un seul coup légal complet commence par ce pion, ou le moteur ne propose qu'un coup. Sinon, rien ne se passe. -3. **Écarts restants avec board.js.** Les relever par comparaison visuelle (filet des pions, numéros sur le cadre, videau…) et les corriger. -4. **Clavier.** Faire ce que la révision UX a laissé : - - le choix des pions aux flèches ; - - l'affichage des raccourcis en `kbd` quand un clavier est détecté (interaction.md). -5. **Tests.** - - Scénarios Gherkin si un nouveau comportement est visible. - - `make lint`, `make test`, `make test-browser` (glisser-déposer simulé, double toucher), avec captures pour la recette design. - -## Critères de réussite - -Un coup se joue entièrement au glisser-déposer. Le double toucher joue le coup évident. Les trois commandes passent. - -## Résultat - -À remplir à la clôture. diff --git a/web/app.css b/web/app.css index b60bdc4..3f869a2 100644 --- a/web/app.css +++ b/web/app.css @@ -990,9 +990,7 @@ a.notation { aspect-ratio: 640 / 520; user-select: none; -webkit-user-select: none; - /* Le doigt fait glisser les pions : le plateau ne fait ni défiler ni - * zoomer la page (glisser-déposer, double toucher ; charte, 1i). */ - touch-action: none; + touch-action: manipulation; -webkit-tap-highlight-color: transparent; font-family: var(--font-sans); /* Alegreya Sans dessine par défaut des chiffres elzéviriens (de hauteurs @@ -1000,6 +998,13 @@ a.notation { font-variant-numeric: tabular-nums lining-nums; } +/* Le plateau de la partie : le doigt y fait glisser les pions, il ne fait + * ni défiler ni zoomer la page (glisser-déposer, double toucher ; charte, + * 1i). Les autres plateaux (accueil, tutoriel, position) laissent défiler. */ +#board { + touch-action: none; +} + .board-frame { fill: var(--frame); } .board-bed { fill: var(--bed); } .board-bar { fill: var(--bar); }