Plateau soigné (1i) : glisser-déposer, double toucher, clavier, filet des pions #69

2026-11-12T23:13:19Z

pierre commented

2026-11-12 23:13:19 +00:00

Pourquoi

La sous-étape 1i demande des gestes naturels sur le plateau (cadrage, principe d'expérience 2). Jusqu'ici, on ne pouvait que toucher un pion, puis toucher sa case d'arrivée.

La charte (ecrans-etape-1.md, chapitre 1i) décrit deux gestes :

le glisser-déposer : pion agrandi à 115 %, porté 12 px au-dessus du doigt, fantôme au point de départ, retour silencieux s'il est lâché hors d'une case permise ;
le double toucher : il joue le seul coup évident.

La révision UX avait laissé de côté le clavier complet. Le filet intérieur des pions, l'écho du logo, n'était pas dessiné.

Quoi

Glisser-déposer, à la souris comme au doigt. Lâché sur une case permise, le pion s'y pose en 160 ms et le téléphone vibre. Lâché ailleurs, le pion revient sans vibration ni message. Le toucher pion puis case reste possible.
Double toucher. Deux touchers rapprochés sur un pion jouent le coup évident :
- soit le seul coup légal complet qui commence par ce pion ;
- soit le seul coup possible.
S'il n'y a pas de coup évident, le second toucher compte comme un toucher simple. Le coup attend ensuite sa validation, comme tout coup saisi.
Clavier. ← → choisissent un pion, ↑ ↓ choisissent sa case, Entrée le pose. Les raccourcis s'affichent en petites touches sur ordinateur.
Filet des pions. Chaque pion porte son filet intérieur.

Comment

Le travail a été délégué à un sous-agent, interrompu par la limite d'usage.

Domaine. Il gagne Game.obviousMove. Chaque demi-coup essayé est soumis au moteur (checkHalfMoves), et la recherche s'arrête dès que deux positions finales différentes apparaissent. Aucune règle n'est réimplémentée.
Gestes. Ils sont dans app/src/ui/board-gestures.ts, avec les Pointer Events et la capture du pointeur.
Pion glissé. Il bouge par l'attribut SVG transform, sans redessiner le plateau et sans .style., comme l'exige la CSP. Chaque pion est un groupe disque plus filet, et c'est ce groupe qui glisse : le surcoût est négligeable.
Tests.
- Unitaires : obvious-move.test.ts, sur le vrai moteur, et board-gestures.test.ts.
- Scénario d'aide « Puis-je faire glisser un pion, ou jouer au clavier ? ».
- Test navigateur tests/browser/plateau.mjs : glisser-déposer complet, lâcher hors cible, double toucher, coup joué au clavier, filet des pions.

Vérification :

make lint : aucun problème ;
make test : 10/10 ;
make test-browser : suite complète au vert dans Chromium et Firefox, relancée par la session principale sur la version finale.

Choix et compromis

Second toucher sans coup évident. Il vaut un toucher simple au lieu d'être ignoré, comme le prévoit la charte. Sinon, des touchers rapides sur une pile seraient avalés.
Validation. Le coup évident n'est pas validé d'office : le joueur garde « Annuler ».
touch-action: none. Il est réservé au plateau de la partie ; les autres plateaux laissent défiler la page.
Raccourcis. Ils s'affichent sur ordinateur, ou après une frappe au clavier.
Écarts avec board.js. La barrette laiton, la place du videau et les points des dés restent volontairement comme dans la révision UX, qui fait foi. La session design met board.js à jour.

Risques et déploiement

Format durable. Aucun changement.
À vérifier sur le Fairphone 4. En plein écran, avec le repli par rotation CSS, la position sous le doigt dépend de getScreenCTM.
Retour arrière. Annuler la fusion.

Comment vérifier

make lint && make test && SCRIPTS=plateau make test-browser
ls build/browser-shots/plateau/

Sur le téléphone :

glisser un pion jusqu'à sa case ;
lâcher un pion hors cible : il revient à sa place ;
avec un 6-1 depuis #/position/BQAACAIAAAAAAA, toucher deux fois un pion pour jouer le coup évident.

Hors périmètre

Le tutoriel garde le seul toucher.
La consigne parle encore de « case » au lieu de « flèche » : ce sera corrigé dans le prochain lot.

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

## Pourquoi La sous-étape 1i demande des gestes naturels sur le plateau (cadrage, principe d'expérience 2). Jusqu'ici, on ne pouvait que toucher un pion, puis toucher sa case d'arrivée. La charte (`ecrans-etape-1.md`, chapitre 1i) décrit deux gestes : - **le glisser-déposer** : pion agrandi à 115 %, porté 12 px au-dessus du doigt, fantôme au point de départ, retour silencieux s'il est lâché hors d'une case permise ; - **le double toucher** : il joue le seul coup évident. La révision UX avait laissé de côté le clavier complet. Le filet intérieur des pions, l'écho du logo, n'était pas dessiné. ## Quoi - **Glisser-déposer**, à la souris comme au doigt. Lâché sur une case permise, le pion s'y pose en 160 ms et le téléphone vibre. Lâché ailleurs, le pion revient sans vibration ni message. Le toucher pion puis case reste possible. - **Double toucher.** Deux touchers rapprochés sur un pion jouent le coup évident : - soit le seul coup légal complet qui commence par ce pion ; - soit le seul coup possible. S'il n'y a pas de coup évident, le second toucher compte comme un toucher simple. Le coup attend ensuite sa validation, comme tout coup saisi. - **Clavier.** ← → choisissent un pion, ↑ ↓ choisissent sa case, Entrée le pose. Les raccourcis s'affichent en petites touches sur ordinateur. - **Filet des pions.** Chaque pion porte son filet intérieur. ## Comment Le travail a été délégué à un sous-agent, interrompu par la limite d'usage. - **Domaine.** Il gagne `Game.obviousMove`. Chaque demi-coup essayé est soumis au moteur (`checkHalfMoves`), et la recherche s'arrête dès que deux positions finales différentes apparaissent. Aucune règle n'est réimplémentée. - **Gestes.** Ils sont dans `app/src/ui/board-gestures.ts`, avec les Pointer Events et la capture du pointeur. - **Pion glissé.** Il bouge par l'attribut SVG `transform`, sans redessiner le plateau et sans `.style.`, comme l'exige la CSP. Chaque pion est un groupe disque plus filet, et c'est ce groupe qui glisse : le surcoût est négligeable. - **Tests.** - Unitaires : `obvious-move.test.ts`, sur le vrai moteur, et `board-gestures.test.ts`. - Scénario d'aide « Puis-je faire glisser un pion, ou jouer au clavier ? ». - Test navigateur `tests/browser/plateau.mjs` : glisser-déposer complet, lâcher hors cible, double toucher, coup joué au clavier, filet des pions. **Vérification** : - `make lint` : aucun problème ; - `make test` : 10/10 ; - `make test-browser` : suite complète au vert dans Chromium et Firefox, relancée par la session principale sur la version finale. ## Choix et compromis - **Second toucher sans coup évident.** Il vaut un toucher simple au lieu d'être ignoré, comme le prévoit la charte. Sinon, des touchers rapides sur une pile seraient avalés. - **Validation.** Le coup évident n'est pas validé d'office : le joueur garde « Annuler ». - **`touch-action: none`.** Il est réservé au plateau de la partie ; les autres plateaux laissent défiler la page. - **Raccourcis.** Ils s'affichent sur ordinateur, ou après une frappe au clavier. - **Écarts avec `board.js`.** La barrette laiton, la place du videau et les points des dés restent volontairement comme dans la révision UX, qui fait foi. La session design met `board.js` à jour. ## Risques et déploiement - **Format durable.** Aucun changement. - **À vérifier sur le Fairphone 4.** En plein écran, avec le repli par rotation CSS, la position sous le doigt dépend de `getScreenCTM`. - **Retour arrière.** Annuler la fusion. ## Comment vérifier ``` make lint && make test && SCRIPTS=plateau make test-browser ls build/browser-shots/plateau/ ``` Sur le téléphone : - glisser un pion jusqu'à sa case ; - lâcher un pion hors cible : il revient à sa place ; - avec un 6-1 depuis `#/position/BQAACAIAAAAAAA`, toucher deux fois un pion pour jouer le coup évident. ## Hors périmètre - Le tutoriel garde le seul toucher. - La consigne parle encore de « case » au lieu de « flèche » : ce sera corrigé dans le prochain lot. Generated with Claude Code https://claude.com/claude-code

pierre added 6 commits 2026-11-12 23:13:20 +00:00

Domaine : le coup évident du double toucher, jugé par le moteur 6dd0e93d3d

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

Plateau : glisser-déposer, double toucher, clavier, raccourcis et filet des pions 835a907b9c

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

Plateau soigné : 1i faite, recette des gestes, plan clos ; glisser réservé au plateau de jeu 0aec6cb7b1

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

Double toucher sans coup évident : un toucher simple ; tests navigateur adaptés aux raccourcis 094f535c84

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

Fusion de main (leçons, 1g) dans plateau-soigne 68d1c3a8c4

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

Fusion de main (progression, 1h) dans plateau-soigne 44e535d94b

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

pierre manually merged commit da9845466b into main

2026-11-12 23:18:39 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: pierre/Ustagammon#69