Author SHA1 Message Date
Pierre MARTINandClaude Opus 5.5 b28a37d411 ADR 0013 : position dans l'adresse ; plan 0e.4
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-03 10:25:50 +01:00
Pierre MARTINandClaude Opus 5.5 07e66dd2c3 Fusion de la MR !28 : saisie du coup, un toucher, validation, Annuler, dés joués, videau confirmé
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-03 10:17:35 +01:00
Pierre MARTINandClaude Opus 5.5 15fb77c64b Saisie du coup : plan clos
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-03 10:11:29 +01:00
Pierre MARTIN 0da5794659 Fusion de main dans saisie-du-coup 2026-11-03 10:11:23 +01:00
Pierre MARTINandClaude Opus 5.5 0d0e6631b0 Fusion de la MR !24 : plan des parties enregistrées (1b)
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-03 10:11:18 +01:00
pierre 4024859a03 Fusion de la MR !27 : recette design 2026-11-03 09:05:01 +00:00
Pierre MARTINandClaude Opus 5.5 95167da223 Charte : critères de recette design de l'écran de jeu
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-03 10:04:59 +01:00
Pierre MARTINandClaude Opus 5.5 7747fc1e49 Annuler : écran occupé pendant le recalcul des coups possibles
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-03 10:01:36 +01:00
pierre 4837d5c26e Fusion de la MR !26 : journal 2026-11-03 08:58:54 +00:00
Pierre MARTINandClaude Opus 5.5 31174e9817 Journal : coordination design et développement
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-03 09:58:52 +01:00
pierre 6793a0a3db Fusion de la MR !25 : couleur des flèches 2026-11-03 08:57:24 +00:00
Pierre MARTINandClaude Opus 5.5 e8372872be Charte : couleur des flèches selon leur numéro (impaires, paires)
Les flèches impaires sont en point-a (noyer clair), les paires en
point-b (chêne), comme sur un vrai plateau ; le dessin de référence
alternait en miroir. Signalé par Pierre.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-03 09:57:21 +01:00
Pierre MARTINandClaude Opus 5.5 77c76deacd Couleur des flèches selon leur numéro (impaires point-a, paires point-b)
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-03 09:54:09 +01:00
Pierre MARTINandClaude Opus 5.5 409e99070c Plan des parties enregistrées (1b)
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-03 09:52:28 +01:00
Pierre MARTINandClaude Opus 5.5 b5d8eed262 Fusion de la MR !22 : étape 1 découpée, revue UX arbitrée, plans 1a et 0e.3
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-03 07:13:30 +01:00
pierre 5d0cf45539 Fusion de la MR !23 : règles d'interaction 2026-11-03 06:12:51 +00:00
Pierre MARTINandClaude Opus 5.5 4403fc2844 Charte : règles d'interaction, jetons de mouvement, ADR 0012 précisé
interaction.md : réponse immédiate, annuler plutôt que confirmer,
mouvement (durées et courbes), vibrations, clavier sur ordinateur,
mises en page de l'écran de jeu, pictogrammes. ADR 0012 : placement des
contrôles en paysage après la revue UX (colonne de commandes à gauche,
sorties libres, comptes en pastilles sur la barre).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-03 07:12:49 +01:00
Pierre MARTINandClaude Opus 5.5 1f324cfef0 Confirmation du videau : boutons hors de la classe actions (mode paysage)
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-03 07:12:08 +01:00
Pierre MARTINandClaude Opus 5.5 2d934529d5 Saisie du coup : pion à destination unique, validation, Annuler, dés estompés, videau confirmé
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-03 07:04:26 +01:00
Pierre MARTINandClaude Opus 5.5 2c5278965b Domaine : coup à valider, demi-coups défaits un par un, dés joués
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-03 07:04:26 +01:00
Pierre MARTINandClaude Opus 5.5 ce2bd46ec3 Pages de test du moteur retirées du site ; make bench garde sa mesure
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-03 07:00:38 +01:00
Pierre MARTINandClaude Opus 5.5 949bfd952e Plan : saisie du coup, videau confirmé, pages de test retirées
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-03 07:00:38 +01:00
42 changed files with 1177 additions and 638 deletions
+1 -3
View File
@@ -107,8 +107,6 @@ lint: ## Vérifie le style et les erreurs courantes
deploy: site ## Sert l'application sur le réseau local (Ctrl+C pour arrêter)
@ip="$$(ip -4 route get 1.1.1.1 2>/dev/null | awk '{ for (i = 1; i < NF; i++) if ($$i == "src") print $$(i + 1) }')"; \
echo "Application : http://$${ip:-ADRESSE-DU-PC}:$(WEB_PORT)/"; \
echo "Test du moteur : http://$${ip:-ADRESSE-DU-PC}:$(WEB_PORT)/moteur/"; \
echo "Page de mesure : http://$${ip:-ADRESSE-DU-PC}:$(WEB_PORT)/moteur/bench.html"; \
echo "À ouvrir depuis le téléphone, sur le même Wi-Fi. Ctrl+C pour arrêter."
@docker run --rm --init -p $(WEB_PORT):8080 -v "$(CURDIR)/$(BUILD_DIR)/site:/site:ro" \
$(BUILD_C_IMAGE) python3 -m http.server 8080 --directory /site
@@ -123,7 +121,7 @@ SITE_ICONS := icone.svg icone-192.png icone-512.png icone-maskable-192.png icone
# Le site tel qu'il sera publié, reconstruit entièrement à chaque appel :
# - web/ à la racine : la page de l'application, son style, sa police, le
# manifeste, le Web Worker du moteur, et les pages de test sous moteur/ ;
# manifeste et le Web Worker du moteur ;
# - sous icons/, le logo et les icônes de la charte, copiés depuis
# docs/identite/logo/ (une seule source, ADR 0010) ;
# - l'application compilée (build/web/src/) sous app/ ;
+113 -24
View File
@@ -79,9 +79,10 @@ export class Game {
readonly #dice: DiceSource;
readonly #ply: Ply;
#journal: GameJournal = EMPTY_JOURNAL;
// Coup du joueur en cours de saisie : pas encore dans le journal.
#pending: HalfMove[] = [];
#pendingPosition: PositionId | null = null;
// Coup du joueur en cours de saisie : pas encore dans le journal (il n'y
// entre qu'à sa validation, confirmMove). Pour chaque demi-coup saisi, la
// position après lui, et si le coup est alors complet, selon le moteur.
#pending: PendingHalfMove[] = [];
private constructor(engine: Engine, options: GameOptions) {
this.#engine = engine;
@@ -141,12 +142,37 @@ export class Game {
/** Les demi-coups déjà saisis du coup en cours. */
get pendingHalfMoves(): readonly HalfMove[] {
return this.#pending;
return this.#pending.map((p) => p.halfMove);
}
/** Les demi-coups saisis forment un coup complet (le moteur le dit) : il
* n'attend plus que d'être validé (confirmMove) ou défait
* (undoLastHalfMove). */
get moveComplete(): boolean {
return this.#pending.at(-1)?.complete === true;
}
/** La position à afficher : après les demi-coups déjà saisis. */
get displayedPosition(): PositionId {
return this.#pendingPosition ?? this.state.position;
return this.#pending.at(-1)?.position ?? this.state.position;
}
/**
* Les dés du jet à jouer (quatre pour un double), et pour chacun s'il est
* déjà utilisé par un demi-coup saisi ; liste vide hors de la saisie d'un
* coup du joueur. Un demi-coup utilise le dé qui l'a produit dans
* nextHalfMoves (de from vers from - dé, ou vers la sortie) : aucune
* règle n'est jugée ici, la légalité vient du moteur.
*/
get diceToPlay(): DieToPlay[] {
const state = this.state;
if (state.turn !== "player" || state.phase !== "moving" || state.roll === null) {
return [];
}
const [a, b] = state.roll;
const dice = a === b ? [a, a, a, a] : [a, b];
const used = assignDice(dice, this.pendingHalfMoves);
return dice.map((value, i) => ({ value, used: used[i] === true }));
}
/** Le plateau affiché (après les demi-coups déjà saisis), décodé par le
@@ -205,7 +231,7 @@ export class Game {
*/
async nextHalfMoves(): Promise<HalfMove[]> {
const state = this.state;
if (state.turn !== "player" || state.phase !== "moving") {
if (state.turn !== "player" || state.phase !== "moving" || this.moveComplete) {
return [];
}
const roll = rollToPlay(state);
@@ -220,7 +246,7 @@ export class Game {
const moves = [...candidates.values()];
const checks = await Promise.all(
moves.map((h) =>
this.#engine.checkHalfMoves(state.position, roll, [...this.#pending, h]),
this.#engine.checkHalfMoves(state.position, roll, [...this.pendingHalfMoves, h]),
),
);
return moves.filter((_, i) => checks[i]?.valid === true);
@@ -274,34 +300,51 @@ export class Game {
/**
* Le joueur déplace un pion (un dé). Renvoie false si ce demi-coup ne
* mène à aucun coup légal : il est refusé et rien ne change. Quand les
* demi-coups forment un coup complet, le coup est joué.
* mène à aucun coup légal (ou si le coup est déjà complet) : il est
* refusé et rien ne change. Le coup n'est pas joué pour autant : une fois
* complet (moveComplete), il attend d'être validé (confirmMove).
*/
async playHalfMove(halfMove: HalfMove): Promise<boolean> {
const state = this.#expect("player", "moving");
const halfMoves = [...this.#pending, halfMove];
const check = await this.#engine.checkHalfMoves(
state.position,
rollToPlay(state),
halfMoves,
);
if (this.moveComplete) {
return false;
}
const check = await this.#engine.checkHalfMoves(state.position, rollToPlay(state), [
...this.pendingHalfMoves,
halfMove,
]);
if (!check.valid || check.position === null) {
return false;
}
if (check.complete) {
this.cancelHalfMoves();
await this.#playMove("player", halfMoves, check.position);
} else {
this.#pending = halfMoves;
this.#pendingPosition = check.position;
}
this.#pending = [
...this.#pending,
{ halfMove, position: check.position, complete: check.complete },
];
return true;
}
/** Oublie les demi-coups saisis du coup en cours. */
/** Défait le dernier demi-coup saisi du coup en cours (rien s'il n'y en a
* pas) : il n'a jamais été dans le journal. */
undoLastHalfMove(): void {
this.#pending = this.#pending.slice(0, -1);
}
/** Oublie tous les demi-coups saisis du coup en cours. */
cancelHalfMoves(): void {
this.#pending = [];
this.#pendingPosition = null;
}
/** Le joueur valide son coup complet : il entre dans le journal
* (MovePlayed) et le tour passe. Erreur si le coup n'est pas complet. */
async confirmMove(): Promise<void> {
this.#expect("player", "moving");
const last = this.#pending.at(-1);
if (last?.complete !== true) {
throw new Error("le coup n'est pas complet : jouez encore");
}
const halfMoves = this.pendingHalfMoves;
this.cancelHalfMoves();
await this.#playMove("player", halfMoves, last.position);
}
/** Le joueur double, avant de lancer les dés ; l'ordinateur prend ou passe
@@ -454,6 +497,52 @@ export class Game {
}
}
/** Un dé du jet à jouer, et s'il est déjà utilisé par un demi-coup saisi. */
export interface DieToPlay {
readonly value: number;
readonly used: boolean;
}
/** Un demi-coup saisi, pas encore validé. */
interface PendingHalfMove {
readonly halfMove: HalfMove;
/** La position après lui, vue du joueur. */
readonly position: PositionId;
/** Les demi-coups saisis jusqu'à lui forment un coup complet. */
readonly complete: boolean;
}
/**
* Quels dés les demi-coups ont utilisés : chaque demi-coup reçoit un dé
* différent qui le produit (de from vers from - dé, ou vers la sortie si le
* dé dépasse), comme les candidats de nextHalfMoves. Les dés sont essayés du
* plus petit au plus grand : un pion sorti l'est avec le plus petit dé
* suffisant. Si aucune répartition ne convient, les premiers dés sont
* marqués, un par demi-coup.
*/
function assignDice(dice: readonly number[], halfMoves: readonly HalfMove[]): boolean[] {
const order = dice.map((_, i) => i).sort((i, j) => (dice[i] ?? 0) - (dice[j] ?? 0));
const used = dice.map(() => false);
const fits = (h: HalfMove, die: number) => Math.max(h.from - die, OFF) === h.to;
const place = (k: number): boolean => {
const h = halfMoves[k];
if (h === undefined) {
return true;
}
for (const i of order) {
if (!used[i] && fits(h, dice[i] ?? 0)) {
used[i] = true;
if (place(k + 1)) {
return true;
}
used[i] = false;
}
}
return false;
};
return place(0) ? used : dice.map((_, i) => i < halfMoves.length);
}
/** Le jet à jouer, en phase moving. */
function rollToPlay(state: GameState): Roll {
if (state.roll === null) {
+115 -23
View File
@@ -13,8 +13,22 @@ import type { GameJournal } from "../domain/game/events.js";
import type { Game, MoveSteps, SideBoards } from "../domain/game/game.js";
import { formatHalfMoves, type HalfMove } from "../domain/game/position.js";
import { otherSide, type Side } from "../domain/game/side.js";
import { boardModel, moveTargets, moveTrace, type Place, placeOf } from "./board-model.js";
import { checkerSpot, NO_MARKS, renderBoard, type ShownDie, slideChecker } from "./board-view.js";
import {
boardModel,
moveTargets,
moveTrace,
onlyHalfMove,
type Place,
placeOf,
} from "./board-model.js";
import {
checkerSpot,
type DiceAction,
NO_MARKS,
renderBoard,
type ShownDie,
slideChecker,
} from "./board-view.js";
import { showHelp } from "./help.js";
import { TEXTS } from "./texts.js";
@@ -51,6 +65,7 @@ export function startApp(options: AppOptions): void {
double: byId<HTMLButtonElement>("double"),
take: byId<HTMLButtonElement>("take"),
drop: byId<HTMLButtonElement>("drop"),
confirm: byId<HTMLButtonElement>("confirm"),
cancel: byId<HTMLButtonElement>("cancel"),
skip: byId<HTMLButtonElement>("skip"),
replay: byId<HTMLButtonElement>("replay"),
@@ -61,12 +76,19 @@ export function startApp(options: AppOptions): void {
game: byId("game"),
help: byId("help"),
helpContent: byId("help-content"),
doubleDialog: byId<HTMLDialogElement>("double-dialog"),
doubleQuestion: byId("double-question"),
doubleConfirm: byId<HTMLButtonElement>("double-confirm"),
doubleCancel: byId<HTMLButtonElement>("double-cancel"),
};
ui.board.setAttribute("aria-label", TEXTS.boardLabel);
ui.roll.textContent = TEXTS.roll;
ui.double.textContent = TEXTS.double;
ui.take.textContent = TEXTS.take;
ui.drop.textContent = TEXTS.drop;
ui.confirm.textContent = TEXTS.confirm;
ui.doubleConfirm.textContent = TEXTS.double;
ui.doubleCancel.textContent = TEXTS.cancel;
ui.cancel.textContent = TEXTS.cancel;
ui.skip.textContent = TEXTS.skip;
ui.replay.textContent = TEXTS.replay;
@@ -131,9 +153,9 @@ export function startApp(options: AppOptions): void {
shownMove === null
? null
: moveTrace(shownMove.side, shownMove.halfMoves, shownMove.hits),
// Mêmes conditions que les boutons « Lancer les dés » et
// « Doubler ».
canRoll: !busy && state.turn === "player" && state.phase === "rolling",
// Mêmes conditions que les boutons « Lancer les dés »,
// « Valider » et « Doubler ».
diceAction: busy ? null : diceAction(game),
canDouble: !busy && canDouble,
});
}
@@ -156,6 +178,7 @@ export function startApp(options: AppOptions): void {
show(ui.roll, player && state.phase === "rolling");
show(ui.double, player && state.phase === "rolling");
ui.double.disabled = busy || !canDouble;
show(ui.confirm, player && state.phase === "moving" && game.moveComplete);
show(ui.cancel, player && state.phase === "moving" && !stuck);
show(ui.skip, stuck);
ui.cancel.disabled = busy || game.pendingHalfMoves.length === 0;
@@ -168,6 +191,7 @@ export function startApp(options: AppOptions): void {
ui.roll,
ui.take,
ui.drop,
ui.confirm,
ui.skip,
ui.replay,
ui.again,
@@ -304,11 +328,22 @@ export function startApp(options: AppOptions): void {
await g.skipTurn();
});
ui.double.onclick = () =>
act(async (g) => {
// Doubler demande confirmation : un double proposé ne se reprend pas.
ui.double.onclick = () => {
if (busy || game === null || !canDouble) {
return;
}
ui.doubleQuestion.textContent = TEXTS.confirmDouble(2 * game.state.cube.value);
ui.doubleDialog.showModal();
};
ui.doubleCancel.onclick = () => ui.doubleDialog.close();
ui.doubleConfirm.onclick = () => {
ui.doubleDialog.close();
void act(async (g) => {
await g.double();
info = g.state.phase === "over" ? "" : TEXTS.computerTakes(g.state.cube.value);
});
};
ui.take.onclick = () =>
act((g) => {
@@ -322,12 +357,23 @@ export function startApp(options: AppOptions): void {
info = "";
});
// Le coup saisi, complet, entre dans la partie : le tour passe.
ui.confirm.onclick = () =>
act(async (g) => {
info = "";
await g.confirmMove();
});
// Annuler défait le dernier demi-coup saisi, un par un. L'écran est
// occupé le temps que le moteur recalcule les coups possibles.
ui.cancel.onclick = () => {
if (!busy && game !== null) {
game.cancelHalfMoves();
game.undoLastHalfMove();
selected = null;
shownMove = null;
void refresh();
busy = true;
render();
void settle(false);
}
};
@@ -344,15 +390,30 @@ export function startApp(options: AppOptions): void {
ui.newGame.onclick = newGame;
ui.again.onclick = newGame;
// Toucher le plateau : un pion jouable, puis une de ses cases d'arrivée.
/** Joue un demi-coup du joueur ; le coup attend ensuite sa suite ou sa
* validation. */
function playHalfMove(halfMove: HalfMove): void {
void act(async (g) => {
info = "";
await g.playHalfMove(halfMove);
});
}
// Toucher le plateau : un pion jouable, puis une de ses cases d'arrivée
// (ou aucune, s'il n'en a qu'une : il y va tout de suite).
ui.board.addEventListener("click", (event) => {
const target = event.target as Element | null;
// Toucher les dés en attente ou le videau : comme leurs boutons.
// Toucher les dés (d'un côté ou de l'autre du plateau) ou le videau :
// comme leurs boutons.
const action = target?.closest("[data-action]")?.getAttribute("data-action");
if (action === "roll" && !ui.roll.hidden && !ui.roll.disabled) {
ui.roll.click();
return;
}
if (action === "confirm" && !ui.confirm.hidden && !ui.confirm.disabled) {
ui.confirm.click();
return;
}
if (action === "double" && !ui.double.hidden && !ui.double.disabled) {
ui.double.click();
return;
@@ -363,10 +424,12 @@ export function startApp(options: AppOptions): void {
}
const halfMove = selected === null ? undefined : targets.get(selected)?.get(place);
if (halfMove !== undefined) {
void act(async (g) => {
info = "";
await g.playHalfMove(halfMove);
});
playHalfMove(halfMove);
return;
}
const only = place === selected ? null : onlyHalfMove(targets, place);
if (only !== null) {
playHalfMove(only);
return;
}
selected = targets.has(place) && place !== selected ? place : null;
@@ -405,6 +468,7 @@ export function startApp(options: AppOptions): void {
ui.double,
ui.take,
ui.drop,
ui.confirm,
ui.cancel,
ui.skip,
ui.replay,
@@ -452,19 +516,44 @@ function rollBefore(game: Game): readonly number[] {
return rolled?.type === "DiceRolled" ? rolled.roll : [];
}
/** Les dés à montrer : le dernier jet, de la couleur de qui l'a lancé
* (au jet d'ouverture, un dé chacun). Ils sont barrés si le jet ne permet
* aucun coup : le joueur est bloqué (stuck), ou l'ordinateur vient de passer
* son tour sans bouger. */
/** Ce que fait un toucher sur les dés : lancer quand le joueur peut lancer,
* valider quand son coup est complet. */
function diceAction(game: Game): DiceAction | null {
const state = game.state;
if (state.turn !== "player") {
return null;
}
if (state.phase === "rolling") {
return "roll";
}
return state.phase === "moving" && game.moveComplete ? "confirm" : null;
}
/** Les dés à montrer : le dernier jet, de la couleur de qui l'a lancé (au
* jet d'ouverture, un dé chacun ; quatre pour un double). Pendant que le
* joueur saisit son coup, chaque dé déjà utilisé est estompé. Ils sont
* barrés si le jet ne permet aucun coup : le joueur est bloqué (stuck), ou
* l'ordinateur vient de passer son tour sans bouger. */
function shownDice(game: Game, stuck: boolean): ShownDie[] {
const toPlay = game.diceToPlay;
const rolled = game.events.findLast((e) => e.type === "DiceRolled");
if (rolled?.type !== "DiceRolled") {
return [];
}
const blocked = stuck || computerCouldNotMove(game);
const sides: Side[] =
rolled.side === null ? ["player", "computer"] : [rolled.side, rolled.side];
return rolled.roll.map((value, i) => ({ value, side: sides[i] ?? "player", blocked }));
// Au jet d'ouverture, un dé chacun.
const sideOf = (i: number): Side => rolled.side ?? (i === 0 ? "player" : "computer");
if (toPlay.length > 0) {
return toPlay.map((die, i) => ({
value: die.value,
side: sideOf(i),
blocked: stuck,
used: die.used,
}));
}
const blocked = computerCouldNotMove(game);
const [a, b] = rolled.roll;
const values = a === b ? [a, a, a, a] : [a, b];
return values.map((value, i) => ({ value, side: sideOf(i), blocked, used: false }));
}
/** La dernière chose jouée (fin de partie mise à part) est un tour de
@@ -519,6 +608,9 @@ function prompt(game: Game, selecting: boolean, canDouble: boolean): string {
if (state.phase === "rolling") {
return canDouble ? TEXTS.yourRoll : TEXTS.yourRollNoDouble;
}
if (state.phase === "moving" && game.moveComplete) {
return TEXTS.confirmOrUndo;
}
if (state.phase === "moving" && state.roll !== null) {
return selecting ? TEXTS.pickTarget : TEXTS.yourMove(state.roll);
}
+21
View File
@@ -82,6 +82,19 @@ export function moveTargets(halfMoves: readonly HalfMove[]): Map<Place, Map<Plac
return targets;
}
/** Le seul demi-coup possible depuis place, s'il n'a qu'une case d'arrivée
* (le pion y va dès qu'on le touche) ; null sinon. */
export function onlyHalfMove(
targets: ReadonlyMap<Place, ReadonlyMap<Place, HalfMove>>,
place: Place,
): HalfMove | null {
const tos = targets.get(place);
if (tos === undefined || tos.size !== 1) {
return null;
}
return [...tos.values()][0] ?? null;
}
/** Ce qui reste dessiné d'un coup une fois joué. */
export interface MoveTrace {
/** Le camp qui a joué. */
@@ -126,6 +139,14 @@ export function moveTrace(
return { side, arrows, landed, left, hits: hits.filter(Boolean).length };
}
/** La couleur d'une flèche (case), d'après son numéro affiché (1 à 24,
* pour le joueur) : impaire en point-a, paire en point-b (charte). Jamais
* d'après sa colonne : les cases 12 et 13, l'une au-dessus de l'autre,
* n'ont pas la même couleur. */
export function pointColor(number: number): "point-a" | "point-b" {
return number % 2 === 1 ? "point-a" : "point-b";
}
/** Où se trouve une case sur le dessin : rangée du haut ou du bas, et
* colonne de 0 (à gauche) à 11 (à droite), sans compter la barre. */
export function pointSlot(number: number): { top: boolean; column: number } {
+36 -15
View File
@@ -11,7 +11,13 @@
import type { Cube } from "../domain/game/cube.js";
import type { Side } from "../domain/game/side.js";
import { type BoardModel, type MoveTrace, type Place, pointSlot } from "./board-model.js";
import {
type BoardModel,
type MoveTrace,
type Place,
pointColor,
pointSlot,
} from "./board-model.js";
import { TEXTS } from "./texts.js";
/** Un dé affiché, de la couleur du camp qui l'a lancé. */
@@ -20,8 +26,13 @@ export interface ShownDie {
readonly side: Side;
/** Le jet ne permet aucun coup : le dé est estompé et barré. */
readonly blocked: boolean;
/** Le dé est déjà utilisé par un demi-coup saisi : il est estompé. */
readonly used: boolean;
}
/** Ce que fait un toucher sur les dés : lancer, ou valider le coup saisi. */
export type DiceAction = "roll" | "confirm";
/** Ce qui s'ajoute aux pions : dés, videau, mises en évidence. */
export interface BoardDecor {
readonly dice: readonly ShownDie[];
@@ -33,8 +44,10 @@ export interface BoardDecor {
readonly targets: ReadonlySet<Place>;
/** Les traces du dernier coup de l'ordinateur, tant qu'on les montre. */
readonly trace: MoveTrace | null;
/** Le joueur peut lancer les dés : ses dés en attente se touchent. */
readonly canRoll: boolean;
/** Ce que fait un toucher sur la zone des dés, d'un côté ou de l'autre
* du plateau (null : rien). Pour « roll », les dés du joueur en attente
* sont dessinés. */
readonly diceAction: DiceAction | null;
/** Le joueur peut doubler : le videau se touche. */
readonly canDouble: boolean;
}
@@ -45,7 +58,7 @@ export const NO_MARKS = {
selected: null,
targets: new Set<Place>(),
trace: null,
canRoll: false,
diceAction: null,
canDouble: false,
} as const;
@@ -158,9 +171,16 @@ export function renderBoard(svg: SVGSVGElement, board: BoardModel, decor: BoardD
if (decor.trace !== null) {
drawTrace(svg, board, decor.trace);
}
if (decor.canRoll) {
const center = waitingDice(svg);
addAction(hits, "roll", TEXTS.roll, center, 2 * DIE + 8 + MIN_TARGET / 2);
if (decor.diceAction !== null) {
if (decor.diceAction === "roll") {
waitingDice(svg);
}
// Une zone sur chaque moitié du plateau : les dés en attente (à
// gauche) comme le dernier jet (à droite) se touchent.
const label = decor.diceAction === "roll" ? TEXTS.roll : TEXTS.confirm;
for (const x of [FRAME + HALF_WIDTH / 2, RIGHT_HALF + HALF_WIDTH / 2]) {
addAction(hits, decor.diceAction, label, { x, y: MIDDLE }, HALF_WIDTH - 2 * FRAME);
}
}
if (decor.canDouble) {
cube.classList.add("can-double");
@@ -207,7 +227,7 @@ function drawPoint(
const base = top ? FRAME : HEIGHT - FRAME;
const tip = top ? FRAME + POINT_HEIGHT : HEIGHT - FRAME - POINT_HEIGHT;
add(svg, "polygon", {
class: column % 2 === 0 ? "point-a" : "point-b",
class: pointColor(number),
points: `${left},${base} ${left + POINT_WIDTH},${base} ${center},${tip}`,
});
add(
@@ -493,7 +513,9 @@ function drawDice(svg: SVGSVGElement, dice: readonly ShownDie[]): void {
const x = center - total / 2 + i * (DIE + gap);
const y = MIDDLE - DIE / 2;
const group = add(svg, "g", {
class: die.blocked ? "die die-blocked" : "die",
class: ["die", die.blocked ? "die-blocked" : "", die.used ? "die-used" : ""]
.filter(Boolean)
.join(" "),
"data-value": die.value,
});
add(group, "rect", { class: `die-${die.side}`, x, y, width: DIE, height: DIE, rx: 6 });
@@ -535,9 +557,8 @@ function cubeCenter(cube: Cube): Spot {
}
/** Les dés du joueur en attente d'être lancés, faces vides, au milieu de la
* moitié gauche (la droite garde le dernier jet de l'ordinateur). Renvoie
* leur centre. */
function waitingDice(svg: SVGSVGElement): Spot {
* moitié gauche (la droite garde le dernier jet de l'ordinateur). */
function waitingDice(svg: SVGSVGElement): void {
const center = { x: FRAME + HALF_WIDTH / 2, y: MIDDLE };
const gap = 8;
const group = add(svg, "g", { class: "die die-waiting" });
@@ -551,13 +572,13 @@ function waitingDice(svg: SVGSVGElement): Spot {
rx: 6,
});
}
return center;
}
/**
* Une zone à toucher qui fait la même chose qu'un bouton (lancer les dés,
* doubler) : au moins MIN_TARGET de côté, centrée sur ce qu'on touche, avec
* un rôle et un nom accessibles. Les boutons restent pour le clavier.
* valider le coup, doubler) : au moins MIN_TARGET de côté, centrée sur ce
* qu'on touche, avec un rôle et un nom accessibles. Les boutons restent
* pour le clavier.
*/
function addAction(
hits: Element,
+1 -3
View File
@@ -91,10 +91,8 @@ export async function showHelp(container: HTMLElement): Promise<void> {
renderFeature(container, feature);
}
renderGlossary(container, glossary);
const about = element(container, "p", `${TEXTS.about} `);
const about = element(container, "p", TEXTS.about);
about.className = "about";
const link = element(about, "a", TEXTS.engineTestLink);
link.href = "moteur/";
container.dataset.loaded = "true";
} catch {
status.textContent = TEXTS.helpFailed;
+4 -1
View File
@@ -36,6 +36,7 @@ export const TEXTS = {
double: "Doubler",
take: "Prendre",
drop: "Passer",
confirm: "Valider",
cancel: "Annuler",
skip: "Continuer",
replay: "Revoir",
@@ -60,6 +61,8 @@ export const TEXTS = {
yourMove: (dice: readonly number[]) =>
`Jouez ${roll(dice)} : touchez un pion, puis sa case d'arrivée.`,
pickTarget: "Touchez une case d'arrivée en surbrillance, ou un autre pion.",
confirmOrUndo:
"Touchez vos dés ou « Valider » pour jouer ce coup, ou « Annuler » pour reprendre un pion.",
youCannotMove: (dice: readonly number[]) => `Aucun coup possible avec ${roll(dice)}.`,
pressContinue: "Touchez « Continuer » : le tour passe à l'ordinateur.",
thinking: "L'ordinateur réfléchit…",
@@ -67,6 +70,7 @@ export const TEXTS = {
`L'ordinateur a joué ${roll(dice)} : ${move} (${seconds(ms)}).`,
computerCannotMove: (dice: readonly number[]) =>
`L'ordinateur ne peut pas jouer ${roll(dice)}.`,
confirmDouble: (value: number) => `Doubler à ${value} ? L'ordinateur pourra prendre ou passer.`,
computerDoubles: "L'ordinateur vous propose de doubler : prenez ou passez.",
computerTakes: (value: number) =>
`L'ordinateur prend : la partie vaut maintenant ${points(value)}.`,
@@ -90,5 +94,4 @@ export const TEXTS = {
helpLoading: "Chargement de l'aide…",
helpFailed: "L'aide n'a pas pu se charger.",
about: "Ustagammon est un logiciel libre (GPLv3). L'ordinateur joue avec GNU Backgammon.",
engineTestLink: "Test du moteur",
} as const;
+2
View File
@@ -45,6 +45,8 @@ async function playToTheEnd(game: Game, engine: Awaited<ReturnType<typeof loadNo
for (const halfMove of first.halfMoves) {
assert.equal(await game.playHalfMove(halfMove), true);
}
assert.equal(game.moveComplete, true);
await game.confirmMove();
}
}
return actions;
+100
View File
@@ -78,14 +78,111 @@ test("un coup se saisit demi-coup par demi-coup ; un demi-coup refusé ne change
assert.deepEqual(game.pendingHalfMoves, [{ from: 8, to: 5 }]);
assert.equal(await game.playHalfMove({ from: 6, to: 5 }), true);
// Coup complet : il attend la validation, hors du journal.
assert.equal(game.moveComplete, true);
assert.equal(game.displayedPosition, "AFTER");
assert.equal(game.events.length, 2);
assert.equal(game.state.turn, "player");
assert.deepEqual(await game.nextHalfMoves(), []);
assert.equal(await game.playHalfMove({ from: 8, to: 7 }), false);
await game.confirmMove();
const last = game.events.at(-1);
assert.equal(last?.type, "MovePlayed");
assert.deepEqual(game.pendingHalfMoves, []);
assert.equal(game.moveComplete, false);
assert.equal(game.state.turn, "computer");
assert.equal(game.state.phase, "rolling");
assert.equal(game.state.position, "SWAPPED");
});
test("un coup incomplet ne se valide pas", async () => {
const game = Game.start(fakeEngine(), { dice: fixedDice([3, 1]) });
await assert.rejects(game.confirmMove(), /pas complet/);
await game.playHalfMove({ from: 8, to: 5 });
await assert.rejects(game.confirmMove(), /pas complet/);
assert.equal(game.events.length, 2);
});
test("Annuler défait les demi-coups un par un, sans toucher au journal", async () => {
const game = Game.start(fakeEngine(), { dice: fixedDice([3, 1]) });
await game.playHalfMove({ from: 8, to: 5 });
await game.playHalfMove({ from: 6, to: 5 });
const journal = game.journal;
game.undoLastHalfMove();
assert.deepEqual(game.pendingHalfMoves, [{ from: 8, to: 5 }]);
assert.equal(game.moveComplete, false);
assert.equal(game.displayedPosition, "HALF");
game.undoLastHalfMove();
assert.deepEqual(game.pendingHalfMoves, []);
assert.equal(game.displayedPosition, START_POSITION);
game.undoLastHalfMove(); // rien à défaire : sans effet
assert.equal(game.journal, journal);
// Le coup se ressaisit ensuite normalement.
assert.equal(await game.playHalfMove({ from: 8, to: 5 }), true);
assert.equal(await game.playHalfMove({ from: 6, to: 5 }), true);
assert.equal(game.moveComplete, true);
});
test("les dés utilisés par les demi-coups saisis sont marqués", async () => {
const game = Game.start(fakeEngine(), { dice: fixedDice([3, 1]) });
assert.deepEqual(game.diceToPlay, [
{ value: 3, used: false },
{ value: 1, used: false },
]);
await game.playHalfMove({ from: 8, to: 5 });
assert.deepEqual(game.diceToPlay, [
{ value: 3, used: true },
{ value: 1, used: false },
]);
await game.playHalfMove({ from: 6, to: 5 });
assert.deepEqual(
game.diceToPlay.map((d) => d.used),
[true, true],
);
await game.confirmMove();
assert.deepEqual(game.diceToPlay, []);
});
test("un double donne quatre dés, marqués un par un ; une sortie prend le plus petit dé suffisant", async () => {
const engine = fakeEngine({
checkHalfMoves: async () => ({ valid: true, complete: false, position: "P" }),
});
const double = Game.start(engine, {
dice: fixedDice([2, 2]),
setup: { position: "X", firstTurn: "player" },
});
await double.roll();
assert.equal(double.diceToPlay.length, 4);
await double.playHalfMove({ from: 13, to: 11 });
await double.playHalfMove({ from: 11, to: 9 });
assert.deepEqual(
double.diceToPlay.map((d) => d.used),
[true, true, false, false],
);
const bearOff = Game.start(engine, {
dice: fixedDice([6, 4]),
setup: { position: "X", firstTurn: "player" },
});
await bearOff.roll();
// 3/off : le 4 suffit, le 6 reste.
await bearOff.playHalfMove({ from: 3, to: 0 });
assert.deepEqual(bearOff.diceToPlay, [
{ value: 6, used: false },
{ value: 4, used: true },
]);
// 6/2 demande le 4 : la sortie a donc pris le 6.
await bearOff.playHalfMove({ from: 6, to: 2 });
assert.deepEqual(
bearOff.diceToPlay.map((d) => d.used),
[true, true],
);
});
test("sans coup possible, le tour passe quand le joueur le laisse passer", async () => {
const engine = fakeEngine({ legalMoves: async () => [] });
const game = Game.start(engine, {
@@ -192,6 +289,7 @@ test("annuler repart du parent ; l'action suivante ouvre une branche", async ()
const game = Game.start(fakeEngine(), { dice: fixedDice([3, 1, 6, 5, 4, 2]) });
await game.playHalfMove({ from: 8, to: 5 });
await game.playHalfMove({ from: 6, to: 5 });
await game.confirmMove();
const played = game.events.at(-1);
assert.equal(played?.type, "MovePlayed");
@@ -200,6 +298,7 @@ test("annuler repart du parent ; l'action suivante ouvre une branche", async ()
assert.equal(game.state.turn, "player");
await game.playHalfMove({ from: 8, to: 5 });
await game.playHalfMove({ from: 6, to: 5 });
await game.confirmMove();
// Deux coups accrochés au même jet : l'ancien reste dans le journal.
const moves = game.journal.events.filter((e) => e.type === "MovePlayed");
@@ -244,6 +343,7 @@ test("une partie se reprend depuis son journal ; un journal d'une autre version
const game = Game.start(fakeEngine(), { dice: fixedDice([3, 1]) });
await game.playHalfMove({ from: 8, to: 5 });
await game.playHalfMove({ from: 6, to: 5 });
await game.confirmMove();
const saved = JSON.parse(JSON.stringify(game.journal));
const resumed = Game.resume(fakeEngine(), saved);
+3
View File
@@ -42,6 +42,7 @@ async function playerMove(position: PositionId, dice: [number, number], move: st
for (const halfMove of parseHalfMoves(move)) {
assert.equal(await game.playHalfMove(halfMove), true, formatHalfMoves([halfMove]));
}
await game.confirmMove();
return game;
}
@@ -59,6 +60,7 @@ test("un coup simple : un plateau par demi-coup, sans pion frappé", async () =>
for (const halfMove of parseHalfMoves("8/5 6/5")) {
await game.playHalfMove(halfMove);
}
await game.confirmMove();
const steps = await game.lastMoveSteps();
assert.ok(steps !== null);
assert.equal(steps.side, "player");
@@ -121,6 +123,7 @@ test("le coup de l'ordinateur, vu dans sa propre numérotation", async () => {
for (const halfMove of parseHalfMoves("8/5 6/5")) {
await game.playHalfMove(halfMove);
}
await game.confirmMove();
await game.playComputerTurn();
const steps = await game.lastMoveSteps();
assert.ok(steps !== null);
+107 -2
View File
@@ -80,6 +80,15 @@ async function play(text: string): Promise<boolean> {
return true;
}
/** Joue les demi-coups puis valide le coup, complet. */
async function playAndConfirm(text: string): Promise<boolean> {
if (!(await play(text))) {
return false;
}
await game.confirmMove();
return true;
}
function lastEvent(): GameEvent {
const event = game.events.at(-1);
assert.ok(event !== undefined, "aucun événement");
@@ -160,12 +169,62 @@ Then("la position n'a pas changé", () => {
assert.equal(lastEvent().type, "DiceRolled");
});
// ------------------------------------------ Valider ou reprendre son coup
Then("votre coup attend votre validation", async () => {
assert.equal(accepted, true);
assert.equal(game.moveComplete, true);
// Rien n'est encore dans le journal, et plus aucun pion ne bouge.
assert.equal(lastEvent().type, "DiceRolled");
assert.equal(game.state.turn, "player");
assert.deepEqual(await game.nextHalfMoves(), []);
});
Then("vos dés sont tous marqués comme joués", () => {
assert.ok(game.diceToPlay.length > 0);
assert.ok(game.diceToPlay.every((die) => die.used));
});
When("vous validez votre coup", async () => {
await game.confirmMove();
});
Then("seul votre {int} est marqué comme joué", (value: number) => {
const used = game.diceToPlay.filter((die) => die.used);
assert.deepEqual(
used.map((die) => die.value),
[value],
);
});
Then("chacun de vos pions jouables n'a plus qu'une case d'arrivée", async () => {
const halfMoves = await game.nextHalfMoves();
assert.ok(halfMoves.length > 0);
const starts = halfMoves.map((h) => h.from);
assert.equal(new Set(starts).size, starts.length);
});
When("vous annulez le dernier demi-coup", () => {
game.undoLastHalfMove();
});
Then("il ne reste de joué que {word}", (text: string) => {
assert.deepEqual(game.pendingHalfMoves, parseHalfMoves(text));
assert.equal(game.moveComplete, false);
assert.equal(lastEvent().type, "DiceRolled");
});
Then("aucun de vos dés n'est marqué comme joué", () => {
assert.ok(game.diceToPlay.length > 0);
assert.ok(game.diceToPlay.every((die) => !die.used));
});
// ------------------------------------------------------- L'ordinateur joue
Given("c'est au tour de l'ordinateur", async () => {
// Vous commencez avec 3-1, puis l'ordinateur tirera 6-4.
game = Game.start(engine, { dice: fixedDice([3, 1, 6, 4]) });
assert.equal(await play("8/5 6/5"), true);
assert.equal(await playAndConfirm("8/5 6/5"), true);
assert.equal(game.state.turn, "computer");
});
@@ -287,6 +346,52 @@ Then("vous pouvez revoir son coup", async () => {
// ------------------------------------------------------------------ Videau
// La confirmation elle-même est une question de l'interface (une fenêtre
// « Doubler à 2 ? ») : ces étapes vérifient que rien n'est proposé tant que
// vous n'avez pas confirmé, et ce qui suit votre confirmation.
Given("vous pouvez doubler", async () => {
game = Game.start(engine, { setup: { position: START_POSITION, firstTurn: "player" } });
assert.equal(game.state.phase, "rolling");
});
When("vous demandez à doubler", async () => {
assert.equal(await game.canDouble(), true);
});
When("vous changez d'avis", () => {
// Vous refermez la question : la partie n'est pas touchée.
});
Then("rien n'est proposé à l'ordinateur", () => {
assert.ok(!game.events.some((e) => e.type === "CubeOffered"));
assert.equal(game.state.phase, "rolling");
assert.equal(game.state.turn, "player");
assert.deepEqual(game.state.cube, { value: 1, owner: null });
});
When("vous confirmez", async () => {
await game.double();
});
Then("l'ordinateur prend ou passe, comme le recommande le moteur", async () => {
const decision = await engine.cubeDecision(
START_POSITION,
{ value: 1, owner: "centered" },
STANDARD_PLY,
);
const offered = game.events.findIndex((e) => e.type === "CubeOffered");
const answer = game.events[offered + 1];
assert.ok(offered >= 0 && answer !== undefined);
if (decision.take) {
assert.equal(answer.type, "CubeTaken");
assert.deepEqual(game.state.cube, { value: 2, owner: "computer" });
} else {
assert.equal(answer.type, "CubeDropped");
assert.deepEqual(game.state.result, { winner: "player", kind: "single", points: 1 });
}
});
Given("l'ordinateur vous propose de doubler", async () => {
game = Game.start(engine, { setup: { position: COMPUTER_DOUBLES, firstTurn: "computer" } });
await game.playComputerTurn();
@@ -346,7 +451,7 @@ Given("un joueur a sorti tous ses pions", async () => {
dice: fixedDice([6, 5]),
});
await game.roll();
assert.equal(await play("6/off 5/off"), true);
assert.equal(await playAndConfirm("6/off 5/off"), true);
});
Then("le résultat indique le gagnant et les points gagnés", () => {
+26 -1
View File
@@ -12,7 +12,15 @@ import type { BoardSide } from "../src/domain/game/engine.js";
import { appendEvent, EMPTY_JOURNAL } from "../src/domain/game/events.js";
import { parseHalfMoves, START_POSITION } from "../src/domain/game/position.js";
import { createGameStore } from "../src/storage/game-store.js";
import { boardModel, moveTargets, moveTrace, placeOf, pointSlot } from "../src/ui/board-model.js";
import {
boardModel,
moveTargets,
moveTrace,
onlyHalfMove,
placeOf,
pointColor,
pointSlot,
} from "../src/ui/board-model.js";
import { parseFeature, parseGlossaryEntry, parseGlossaryIndex } from "../src/ui/help-text.js";
import { TEXTS } from "../src/ui/texts.js";
@@ -47,6 +55,18 @@ test("cases, barre et sortie de chaque camp", () => {
assert.equal(placeOf("computer", 0), "off-computer");
});
test("couleur des flèches : impaires en point-a, paires en point-b, quelle que soit la colonne", () => {
for (const number of [1, 13, 23]) {
assert.equal(pointColor(number), "point-a", `flèche ${number}`);
}
for (const number of [2, 12, 24]) {
assert.equal(pointColor(number), "point-b", `flèche ${number}`);
}
// 12 et 13 partagent la colonne 0, mais pas la couleur.
assert.equal(pointSlot(12).column, pointSlot(13).column);
assert.notEqual(pointColor(12), pointColor(13));
});
test("disposition : 1 à 12 en bas de droite à gauche, 13 à 24 en haut de gauche à droite", () => {
assert.deepEqual(pointSlot(1), { top: false, column: 11 });
assert.deepEqual(pointSlot(7), { top: false, column: 5 });
@@ -65,6 +85,11 @@ test("les demi-coups possibles donnent les pions jouables et leurs cases d'arriv
assert.deepEqual([...targets.keys()], ["p8", "bar-player", "p3"]);
assert.deepEqual([...(targets.get("p8")?.keys() ?? [])], ["p5", "p7"]);
assert.deepEqual(targets.get("p3")?.get("off-player"), { from: 3, to: 0 });
// Un seul toucher suffit pour un pion à destination unique.
assert.deepEqual(onlyHalfMove(targets, "p3"), { from: 3, to: 0 });
assert.deepEqual(onlyHalfMove(targets, "bar-player"), { from: 25, to: 22 });
assert.equal(onlyHalfMove(targets, "p8"), null);
assert.equal(onlyHalfMove(targets, "p13"), null);
});
test("traces d'un coup simple : une flèche par demi-coup, départs et arrivées", () => {
+21
View File
@@ -68,3 +68,24 @@ vérification des dépendances.
standard ») est tenu même au niveau fort (2 plis) : c'est le niveau standard
de l'ordinateur à l'étape 0d.
- Firefox sur le téléphone reste à vérifier, sans bloquer.
## Amendements
### 2026-11-03 — Pages de test du moteur retirées du site
Décidé par Pierre après son premier test sur le téléphone : « supprimer la
partie test du moteur totalement ».
- Les pages de test et de mesure de l'étape 0b (`web/moteur/` : `index.html`,
`bench.html` et leurs scripts) sont supprimées. Le site publié n'a plus rien
sous `/moteur/`, ni dans le cache du service worker ; `make deploy`
n'annonce plus que l'application, et l'aide ne renvoie plus vers le test du
moteur.
- Les mesures du Fairphone 4 ci-dessus, faites avec `bench.html`, restent la
référence. Pour les refaire, la mesure se lance sous Node sur le PC
(`make bench`) : son code partagé est déplacé de `web/moteur/benchmark.mjs`
vers `engine-wasm/benchmark.mjs`. Une mesure sur le téléphone demanderait de
remettre une page de mesure, à décider le moment venu.
- Le moteur reste vérifié par la suite de contrat sur WebAssembly
(`make test`) et, dans l'application, par la partie jouée dans un navigateur
(`make test-browser`).
+20
View File
@@ -77,3 +77,23 @@ paru « vraiment pas optimale ».
La bascule automatique écartée plus haut était celle qui forçait
l'orientation ; ici, seule la mise en page suit l'orientation choisie par le
joueur.
### 2026-11-03 — Placement des contrôles en paysage, après la revue UX
La revue UX de l'étape 0e.2 a montré deux conflits dans le placement décrit
par l'amendement précédent : la moitié basse de la colonne des sorties est une
cible de jeu (toucher fait sortir un pion), et les pions frappés s'empilent
depuis le milieu de la barre. Arbitrage de la session design, sur délégation
de Pierre :
- une colonne de commandes à gauche, dans le cadre : menu en haut, videau au
milieu (il monte ou descend selon son propriétaire), « Annuler le
demi-coup » en bas, remplacé par « Revoir » quand le coup de l'ordinateur
est montré ; « Quitter le plein écran » passe dans le menu ;
- la colonne des sorties reste réservée aux pions sortis ;
- les comptes de points sont des pastilles aux deux bouts de la barre, aux
couleurs du camp, en 13 px.
Maquettes : rangée « Révision UX (étape 0e) : paysage » du canevas
(variantes thème sombre, barre d'adresse visible et fin de partie). Règles de
comportement : `docs/identite/charte/interaction.md`.
+49
View File
@@ -0,0 +1,49 @@
# 0013. Une position du plateau dans l'adresse de la page
- **Statut** : accepté
- **Date** : 2026-11-03
- **Décideurs** : Pierre (besoin), Claude Code (format)
## Contexte
Pierre a demandé, au premier test sur le téléphone (2026-11-03), qu'avec la
seule adresse on arrive à une position du plateau : chaque position devient un
lien direct, à partager, à mettre dans une leçon ou dans un prompt pour une IA.
GNU Backgammon décrit déjà toute position par deux identifiants publics et
documentés : le Position ID (14 caractères, les pions) et le Match ID
(12 caractères : videau, score, longueur du match, joueur au trait, dés). Le
moteur sait les lire et les écrire (`engine.h`).
## Décision
- L'adresse porte la position dans le fragment (après `#`) :
`https://ustagammon.sans.pub/#position=<Position ID>&match=<Match ID>`,
chaque identifiant encodé avec `encodeURIComponent` (le base64 de gnubg
contient `+` et `/`). `match` est facultatif : sans lui, partie libre, videau
au centre, joueur du bas au trait, sans dés.
- Ouvrir un tel lien affiche la position, non jouable, avec deux actions :
« Jouer à partir d'ici » (nouvelle partie contre l'ordinateur depuis cette
position, sans toucher à la partie en cours) et « Retour à ma partie ».
- Toute position affichée (partie, coup de l'ordinateur, analyse, leçon) peut
être copiée en lien (« Copier le lien de la position »).
- Un identifiant illisible pour le moteur donne un message clair et le retour
à la partie, jamais une page cassée.
## Alternatives écartées
- **Paramètres de requête (`?position=`)** : ils changent l'adresse demandée
au serveur et au service worker ; hors ligne, la page en cache ne
correspondrait plus. Le fragment ne quitte jamais le navigateur.
- **XGID (format d'eXtreme Gammon)** : répandu, mais un seul identifiant de
plus à décoder ; gnubg l'importe, son import pourra s'ajouter plus tard
(outil « import d'un identifiant GNU ou XGID » du cadrage).
- **Format maison plus lisible** : il faudrait le décoder sans le moteur, donc
réimplémenter une règle de représentation (ADR 0007).
## Conséquences
- Le fragment est lu au chargement et à chaque changement (`hashchange`) ; le
domaine reçoit une position et un Match ID, le moteur les valide.
- Les liens restent valables tant que GNU Backgammon garde ces formats, stables
depuis des années.
- Les liens contiennent la position, rien d'autre : pas de donnée personnelle.
+1
View File
@@ -19,3 +19,4 @@ l'ancien passe au statut « remplacé par NNNN ». Voir l'ADR 0001.
| [0010](0010-identite-visuelle.md) | Identité visuelle : symbole, logotype, palette | accepté |
| [0011](0011-lecons-conseil-et-bilan.md) | Leçons numérotées, conseil du maître après le coup, bilan de fin de partie | accepté |
| [0012](0012-mode-immersif.md) | Mode immersif : le plateau en paysage, sur demande | accepté |
| [0013](0013-position-dans-l-adresse.md) | Une position du plateau dans l'adresse de la page | accepté |
+3 -4
View File
@@ -2,8 +2,8 @@
Ustagammon est un site statique (PWA, ADR 0009) : des fichiers HTML,
JavaScript, le moteur en WebAssembly et ses données. L'application est à la
racine ; les pages de test du moteur de l'étape 0b restent publiées sous
`/moteur/` (test du moteur) et `/moteur/bench.html` (mesure). Il est publié sur
racine ; les pages de test du moteur de l'étape 0b ont été retirées (ADR
0009, amendement du 2026-11-03). Il est publié sur
CapRover, machine `sans-pub` (https://captain.cloud.sans.pub), app
`ustagammon`, sur https://ustagammon.sans.pub.
@@ -112,8 +112,7 @@ ssh sans.pub 'sudo docker service ps srv-captain--ustagammon --format "{{.Image}
```
Puis ouvrir le site sur le téléphone : le plateau s'affiche et une consigne
remplace « Chargement du moteur… ». La page de test du moteur
(https://ustagammon.sans.pub/moteur/) doit afficher « Moteur prêt ».
remplace « Chargement du moteur… ».
## Retour arrière
+1 -2
View File
@@ -23,9 +23,8 @@ Demandes de Pierre du 2026-11-03, traitées avant d'ouvrir l'étape 1.
| Sous-étape | Contenu | État | Plan |
| --- | --- | --- | --- |
| 0e.1 | Saisie du coup : pion à destination unique joué en un toucher, coup à valider et annulable demi-coup par demi-coup, dés joués marqués, dés des deux côtés touchables, videau confirmé ; pages de test du moteur retirées | 🔄 | `plans/2026-11-03-saisie-du-coup.md` |
| 0e.3 | Révision UX arbitrée (session « identité », sur délégation de Pierre) : portrait stable, bandeaux de compte de points, menu en feuille et nouvelle partie annulable, vibrations, écran allumé, paysage « plateau = écran » dès la rotation (ADR 0012 amendé) | ⏳ | `plans/2026-11-03-revision-ux.md` |
| 0e.4 | Position dans l'adresse : chaque position du plateau a un lien direct (nouvel ADR pour le format) | ⏳ | |
| 0e.4 | Position dans l'adresse : chaque position du plateau a un lien direct (ADR 0013) | ⏳ | `plans/2026-11-03-position-dans-l-adresse.md` |
| 0e.5 | Page d'accueil, installation en un toucher (« Ajouter à l'écran d'accueil », proposée par l'app), tutoriel des règles très didactique avec plateaux illustrés, aide réécrite sur un ton plus humain ; textes à valider par Pierre | ⏳ | |
## Étapes suivantes
+2
View File
@@ -14,6 +14,8 @@ Décisions : ADR 0010. Fichiers du logo et des icônes : `../logo/`.
| Fichier | Contenu |
| --- | --- |
| `guide-de-marque.md` | Règles d'usage : ton, couleurs, typographie, formes, mouvement, icônes, composants |
| `recette-ux.md` | Critères de recette design de l'écran de jeu, à cocher sur les captures et sur le téléphone |
| `interaction.md` | Comportement : réponse immédiate, annuler plutôt que confirmer, mouvement, vibrations, clavier, mises en page de l'écran de jeu (portrait, paysage, ordinateur), pictogrammes |
| `tokens.json` | Toutes les valeurs, thèmes clair et sombre, avec une note d'usage par couleur |
| `bundle.css` | Styles des composants ; mêmes noms de classes que `web/app.css` |
| `board.js` | Dessin de référence du plateau (repère 640 × 520), pour comparaison |
+1 -1
View File
@@ -34,7 +34,7 @@ window.UstaBoard = (function () {
o += '<rect class="board-tray" x="' + TRAY_X + '" y="' + TB + '" width="' + TRAY_W + '" height="' + (H / 2 - TB - 4) + '" rx="4"/>';
o += '<rect class="board-tray" x="' + TRAY_X + '" y="' + (H / 2 + 4) + '" width="' + TRAY_W + '" height="' + (H / 2 - TB - 4) + '" rx="4"/>';
for (var point = 1; point <= 24; point++) {
var pl = place(point), x = colX(pl.col), cls = (pl.col % 2 === 0) === pl.top ? "point-a" : "point-b";
var pl = place(point), x = colX(pl.col), cls = point % 2 === 1 ? "point-a" : "point-b"; // impairs en noyer, pairs en chêne
var base = pl.top ? TB : H - TB, apex = pl.top ? TB + PH : H - TB - PH;
o += '<polygon class="' + cls + '" points="' + x + ',' + base + ' ' + (x + PW) + ',' + base + ' ' + (x + PW / 2) + ',' + apex + '"/>';
if ((state.targets || []).indexOf(point) >= 0)
+6 -2
View File
@@ -22,7 +22,7 @@ La palette, c'est le bois, les pions et le café, avec **un seul accent : le rou
- `accent-soft` : fond léger pour signaler « c'est à vous », avec du texte `text` dessus.
- Les appréciations de coups ont leurs propres couleurs, distinctes de la brique : `verdict-good` (vert), `verdict-doubtful` (ocre), `verdict-bad` (lie-de-vin). **Toujours avec le mot et l'icône**, jamais la couleur seule.
- `brand-laiton` (via `last-move`) marque le dernier coup joué, comme les charnières en laiton d'un plateau de tavla. Rien d'autre.
- Le plateau : cadre `frame` en noyer, fond `bed`, flèches alternées `point-a` (noyer clair) et `point-b` (chêne), barre `bar`, sorties `tray`. Le joueur a les pions ivoire (`checker-player`, l'apprenti), l'ordinateur les pions noyer (`checker-computer`, le maître), comme dans le logo.
- Le plateau : cadre `frame` en noyer, fond `bed`, flèches impaires en `point-a` (noyer clair) et paires en `point-b` (chêne), barre `bar`, sorties `tray`. Le joueur a les pions ivoire (`checker-player`, l'apprenti), l'ordinateur les pions noyer (`checker-computer`, le maître), comme dans le logo.
- **À éviter** : le vert feutre de casino, le noir et or, les dégradés, les néons.
Les deux thèmes, clair et sombre, sont complets. Tous les textes atteignent 4,5:1 sur leurs fonds dans les deux thèmes ; les contours et marques porteuses de sens, 3:1.
@@ -56,6 +56,10 @@ Sobre et utile : un pion glisse vers sa flèche (150 à 250 ms, sans rebond), le
- Icônes d'interface : traits simples de 2px à bouts ronds, dessinés en SVG dans le code (pas de police d'icônes, pas d'émoji). Les seules icônes du système pour l'instant : les trois appréciations de coups (coche, point d'interrogation, croix) et la copie (deux feuillets).
- Dés, pions et videau sont dessinés en SVG avec les couleurs du plateau, jamais en images.
## Interaction
Règles de comportement (réponse immédiate, annuler plutôt que confirmer, mouvement, vibrations, clavier, mises en page de l’écran de jeu) : section « Interaction ».
## Composants
Plateau (`Board`) et ses pièces (`Checker`, `Die`, `DoublingCube`), boutons (`Button`), barre haute (`TopBar`), zone de consigne (`GamePrompt`), appréciation d'un coup (`MoveVerdict`), fiche de glossaire (`GlossaryCard`), carte de leçon (`LessonCard`) et « Demander à une IA » (`AskAI`). Chacun a sa fiche avec ses règles d'usage et un aperçu dans les deux thèmes.
Plateau (`Board`) et ses pièces (`Checker`, `Die`, `DoublingCube`), boutons (`Button`), barre haute (`TopBar`), zone de consigne (`GamePrompt`), appréciation d’un coup (`MoveVerdict`), pictogrammes (`Icons`), fiche de glossaire (`GlossaryCard`), carte de leçon (`LessonCard`) et « Demander à une IA » (`AskAI`). Chacun a sa fiche avec ses règles d'usage et un aperçu dans les deux thèmes.
+72
View File
@@ -0,0 +1,72 @@
# Interaction
Ustagammon doit se sentir **net et rapide**, comme un outil bien réglé : chaque toucher répond tout de suite, rien ne saute, rien n'interrompt la partie sans raison. La chaleur vient de la matière et du ton ; la précision vient du comportement.
## Principes
1. **Réponse immédiate.** Un toucher produit un effet visible en moins de 100 ms : le pion part, le bouton s'enfonce. Le moteur calcule ensuite, en arrière-plan ; l'interface ne l'attend jamais pour réagir.
2. **Rien ne bouge sous le doigt.** Les zones de l'écran de jeu ont une hauteur fixe : seuls leurs contenus changent. Une ligne vide garde sa place.
3. **Annuler plutôt que confirmer.** Une action se fait tout de suite et se rattrape pendant 10 s par un bandeau « Reprendre » (nouvelle partie, abandon). Une boîte de confirmation n'est permise que pour une décision de jeu irréversible qui engage la partie : prendre ou passer un double, doubler.
4. **Une seule action principale par moment**, en brique, à droite, sous le pouce.
5. **Le joueur garde la main.** L'app ne joue jamais à sa place : quand aucun coup n'est possible, les dés se barrent et le joueur passe en les touchant (demande explicite de Pierre).
6. **Le maître parle après le coup, discrètement** (ADR 0011) : une ligne réservée sous le plateau, qui s'ouvre sur l'explication si on la touche. Jamais de fenêtre qui s'impose.
7. **Le sens passe toujours par deux canaux** : couleur et mot, vibration et marque visible, raccourci et bouton.
## Mouvement
| Jeton | Valeur | Usage |
| --- | --- | --- |
| `duration-instant` | 90ms | Retour d'appui d'un bouton, apparition du contour d'un pion jouable. |
| `duration-fast` | 160ms | Pion qui glisse d'une flèche à l'autre, dés qui se posent, bandeaux. |
| `duration-moderate` | 240ms | Feuille du menu qui monte, panneau de fin de partie, bascule de mise en page. |
| `easing-standard` | cubic-bezier(0.2, 0, 0, 1) | Tout ce qui se déplace : départ franc, arrivée douce. |
| `easing-exit` | cubic-bezier(0.4, 0, 1, 1) | Ce qui disparaît. |
- Pas de rebond, pas d'élastique, pas de fondu de plus de 240 ms.
- Les coups de l'ordinateur se jouent demi-coup par demi-coup, 160 ms par pion, 120 ms de pause entre deux : on suit le coup sans l'attendre.
- Le bouton enfoncé descend de 1 px et s'assombrit de 6 %, sans ombre.
- `prefers-reduced-motion` : les déplacements deviennent des apparitions instantanées ; les dés ne roulent pas.
## Vibrations
Activées par défaut, désactivables dans le menu (« Vibrations »). Elles doublent un événement visible, jamais seules. Rien ne vibre pour un toucher de bouton ni pour le lancer des dés.
| Moment | Motif (ms) |
| --- | --- |
| Votre pion se pose | `12` |
| Un pion est frappé | `25, 40, 25` |
| L'ordinateur propose de doubler | `40, 60, 40` |
| Fin de partie gagnée | `30, 50, 30, 50, 60` |
| Fin de partie perdue | `60` |
Les durées se règlent en main sur le Fairphone 4. Une seule vibration à la fois : la dernière annule la précédente.
## Clavier (ordinateur)
Chaque action a son raccourci, affiché sur le bouton en petite touche (`kbd`) quand un clavier est détecté. `?` ouvre la liste.
| Touche | Action |
| --- | --- |
| `Espace` | Lancer les dés ; jouer le coup quand il est complet ; passer quand aucun coup n'est possible |
| `←` `→` | Choisir un pion jouable (le focus se voit : anneau `focus`) |
| `↑` `↓` | Choisir sa case d'arrivée |
| `Entrée` | Poser le pion |
| `Z` | Annuler le demi-coup (aussi `Ctrl+Z`) |
| `D` | Doubler |
| `P` / `N` | Prendre / passer, quand l'ordinateur double |
| `F` | Plein écran |
| `M` | Menu |
| `?` | Aide et raccourcis |
| `Échap` | Fermer le menu, l'aide ou la bulle ouverte ; ne touche jamais à la partie |
Le plateau entier se joue au clavier : c'est aussi ce qui le rend accessible aux lecteurs d'écran.
## Pictogrammes
Trait de 2 px à bouts ronds, sur une grille de 20 × 20, `currentColor`, dessinés en SVG dans le code. Le jeu complet : menu, aide, plein écran, quitter le plein écran, annuler (flèche de retour), revoir (flèche circulaire), fermer, chevron, copier, et les trois appréciations (coche, point d'interrogation, croix dans un cercle). En portrait, la barre haute affiche un libellé de 13 px sous chaque pictogramme ; en paysage et sur ordinateur, le pictogramme seul avec son `aria-label`.
## Mises en page de l'écran de jeu
- **Portrait** : barre haute, bandeau de l'ordinateur, plateau, bandeau du joueur (teinté `accent-soft` quand c'est à lui), ligne du maître ou du dernier coup, consigne, et barre d'actions collée en bas. Hauteurs fixes.
- **Paysage** (dès que le téléphone est tourné ; ADR 0012) : le plateau est l'écran. Colonne de commandes à gauche dans le cadre (menu, videau, annuler ou revoir), sorties à droite, comptes de points en pastilles aux deux bouts de la barre, consigne et dés dans la bande centrale. Numéros des flèches à 12 px au moins.
- **Ordinateur** : plateau à gauche, colonne à droite avec les bandeaux des joueurs, la liste des coups, la consigne, les actions et leurs raccourcis.
+45
View File
@@ -0,0 +1,45 @@
# Recette design de l'écran de jeu
Critères vérifiables sur les captures de `make test-browser` (412×915,
915×412, 844×320, thèmes clair et sombre) et à la main sur le Fairphone 4.
Chaque ligne se coche ou se refuse ; une ligne refusée dit pourquoi.
Référence : `interaction.md`, maquettes « Révision UX » du canevas.
## Toutes tailles
- [ ] Flèches impaires en `point-a`, paires en `point-b` ; 12 et 13 de couleurs différentes.
- [ ] Une seule action principale (brique) visible à la fois.
- [ ] Aucun `window.confirm` ni `alert` dans le code de l'app (`grep -rn "confirm(\|alert(" app/src` vide).
- [ ] Aucune cible tactile sous 44 × 44 px (boutons, pictogrammes, dés, videau).
- [ ] Textes à lire : 13 px au moins ; numéros des flèches : 12 px au moins.
- [ ] Thème sombre : aucune couleur codée en dur hors `tokens` ; le cadre se distingue du fond.
- [ ] Anneau de focus `focus` visible au clavier sur chaque élément interactif.
- [ ] `overscroll-behavior: none` : tirer vers le bas ne recharge pas la page.
## Portrait (412 × 915)
- [ ] Ordre de haut en bas : barre haute, bandeau ordinateur, plateau, bandeau joueur, ligne du maître ou du dernier coup, consigne, barre d'actions collée en bas.
- [ ] Stabilité : sur une partie complète, la position verticale du plateau et de la barre d'actions ne varie pas d'un pixel (comparer les boîtes entre deux captures successives).
- [ ] Barre haute : pictogrammes avec libellé de 13 px (Aide, Plein écran, Menu) ; pas de bouton « Nouvelle partie ».
- [ ] Comptes de points en 20 px gras, chiffres alignés ; le bandeau du joueur qui a la main est teinté `accent-soft` ; l'écart s'écrit « mène de N ».
- [ ] Plus de durée de calcul « (0,5 s) » dans les messages.
- [ ] Aucun coup possible : dés barrés et message ; le tour ne passe qu'au toucher des dés.
- [ ] Conseil du maître : une ligne, après le coup du joueur seulement ; toucher l'ouvre.
## Paysage (915 × 412 et 844 × 320)
- [ ] Le cadre noyer touche les quatre bords ; aucune marge de page, aucune colonne de texte.
- [ ] Flèches d'au moins 44 px de large ; pions d'au moins 22 px de diamètre à 844 × 320.
- [ ] Colonne de commandes à gauche : menu en haut, videau au milieu, annuler (ou revoir) en bas ; colonne des sorties libre.
- [ ] Comptes en pastilles aux deux bouts de la barre, 13 px, couleur du camp ; ils ne chevauchent pas les pions sur la barre.
- [ ] Consigne et dés dans la bande centrale, sans chevaucher un pion.
- [ ] Rotation portrait ↔ paysage en cours de partie : la position, la sélection et les dés sont conservés.
- [ ] Fin de partie : panneau centré sur un voile, « Revoir la partie » et « Nouvelle partie ».
## Comportement
- [ ] Un toucher sur un pion produit un effet visible en moins de 100 ms (trace de performance de Playwright).
- [ ] Déplacements à 160 ms en `easing-standard`, sans rebond ; coups de l'ordinateur pion par pion ; tout est instantané avec `prefers-reduced-motion`.
- [ ] « 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.
+35 -2
View File
@@ -195,7 +195,7 @@
"light": "#6B4430",
"dark": "#3A2519"
},
"usage": "Flèches sombres (noyer clair), une sur deux."
"usage": "Flèches impaires (1, 3, 5…), noyer clair."
},
{
"name": "point-b",
@@ -203,7 +203,7 @@
"light": "#C9AE88",
"dark": "#7E6142"
},
"usage": "Flèches claires (chêne), une sur deux."
"usage": "Flèches paires (2, 4, 6…), chêne."
},
{
"name": "point-number",
@@ -526,5 +526,38 @@
},
"meta": {
"source": "Brief créatif + ADR 0010 + web/app.css (noms des variables du plateau)"
},
"duration": {
"tokens": [
{
"name": "duration-instant",
"value": "90ms",
"usage": "Retour d'appui d'un bouton, contour d'un pion jouable."
},
{
"name": "duration-fast",
"value": "160ms",
"usage": "Pion qui glisse, dés qui se posent, bandeaux."
},
{
"name": "duration-moderate",
"value": "240ms",
"usage": "Feuille du menu, panneau de fin de partie, bascule de mise en page. Jamais plus long."
}
]
},
"easing": {
"tokens": [
{
"name": "easing-standard",
"value": "cubic-bezier(0.2, 0, 0, 1)",
"usage": "Tout ce qui se déplace : départ franc, arrivée douce."
},
{
"name": "easing-exit",
"value": "cubic-bezier(0.4, 0, 1, 1)",
"usage": "Ce qui disparaît."
}
]
}
}
+27
View File
@@ -136,3 +136,30 @@ Une entrée datée par session : ce qui a été fait, décidé, et la suite.
**Reste à faire**
- Firefox sur le téléphone reste à mesurer.
## 2026-11-03 (jour) : coordination design et développement
**Fait**
- Leçons numérotées, conseil du maître après le coup et bilan de fin de partie
retenus par Pierre (ADR 0011) ; mode immersif en paysage (ADR 0012), puis
vue paysage dès la rotation, avec le plateau qui occupe tout l'écran.
- Revue UX du designer de la session de développement (étape 0e.2), arbitrée
par la session design sur délégation de Pierre : portrait à zones fixes,
compte de points en bandeaux (pastilles en paysage), menu en feuille,
« annuler plutôt que confirmer », pas de passage automatique du tour,
vibrations, pictogrammes, clavier sur ordinateur. Règles dans
`docs/identite/charte/interaction.md` (MR !23), second amendement de
l'ADR 0012 (placement des contrôles en paysage).
- Maquettes des variantes sur le canevas (paysage clair, sombre, avec barre
d'adresse, fin de partie ; portrait révisé, conseil, nouvelle partie
annulable ; menu ; ordinateur avec raccourcis).
- Couleur des flèches corrigée dans la charte (impaires en noyer clair, paires
en chêne ; MR !25). La correction dans l'app est faite par la session de
développement, dans la MR de saisie du coup.
**Reste à faire**
- Implémentation par la session de développement (plan
`docs/plans/2026-11-03-revision-ux.md`), puis revue design sur ses captures
Playwright (412×915, 915×412, 844×320, clair et sombre) avant l'essai de
Pierre sur le téléphone.
- Réglage en main des vibrations sur le Fairphone 4.
@@ -0,0 +1,57 @@
# Parties enregistrées, branches et export SGF (1b)
- **Date** : 2026-11-03
- **Étape** : 1b (`docs/etape-1.md`)
- **Statut** : prévu (lancé après la fusion de 0e.1)
- **Exécutant** : sous-agent general-purpose, dans un worktree
## Objectif
Garder toutes les parties du joueur sur le téléphone, avec leurs branches, et
les exporter au format SGF de GNU Backgammon.
## Consignes
ADR 0007 (domaine pur, stockage derrière une interface), ADR 0008 (scénarios
et glossaire). Aucune nouvelle dépendance : l'API IndexedDB du navigateur
directement.
1. **Stockage IndexedDB** derrière l'interface de `app/src/storage/` : une
liste de parties (identifiant, date de début et de dernière action,
adversaire et niveau, score, état en cours ou finie, résultat) et le
journal d'événements de chacune. Migration transparente de la partie
en cours enregistrée aujourd'hui dans `localStorage`. Si IndexedDB est
indisponible (navigation privée), repli sur le comportement actuel.
2. **Branches** : le journal est déjà un arbre (événements avec parent,
`goBackTo`). Exposer dans le domaine la liste des branches d'une partie
(feuilles de l'arbre, avec le coup d'origine) et le passage de l'une à
l'autre. « Rejouer d'ici » depuis un coup passé crée une branche ; la
branche d'origine reste intacte et rechargeable. Pas d'écran d'analyse ici
(1e) : un accès minimal suffit pour le test (menu « Mes parties » :
reprendre une partie, voir ses branches).
3. **Nouvelle partie annulable** : l'arbitrage UX (plan
`2026-11-03-revision-ux.md`, point 3) prévoit « Reprendre l'ancienne »
pendant 10 s. Fournir l'API de stockage qui le permet (reprendre une partie
par son identifiant) ; l'interface viendra avec la révision UX.
4. **Export SGF** : une partie (et ses branches en variantes) au format SGF
de GNU Backgammon, téléchargeable depuis « Mes parties ». Vérification par
le gnubg de bureau de référence (Docker existant) : le fichier exporté se
charge sans erreur et ses positions successives sont les mêmes que celles
du journal, sur des parties générées par les tests.
5. Scénarios Gherkin : reprendre une partie parmi plusieurs, rejouer d'ici
sans perdre l'original, exporter une partie. Fiches du glossaire pour les
nouveaux termes (branche, SGF…).
`make lint`, `make test` et `make test-browser` passent (ajouter au test
navigateur : deux parties enregistrées, reprise de la première après
rechargement). Commits fréquents ; pas de push ni de MR.
## Critères de réussite
- Après rechargement, la liste des parties et chaque branche sont intactes.
- Un SGF exporté se charge dans gnubg de bureau avec les mêmes positions.
- Les trois commandes de test passent.
## Résultat
À remplir à la clôture.
@@ -0,0 +1,39 @@
# Position dans l'adresse (0e.4)
- **Date** : 2026-11-03
- **Étape** : 0e.4 (feuille de route)
- **Statut** : prévu (après la fusion de la révision UX, qui touche les mêmes fichiers)
- **Exécutant** : sous-agent general-purpose, dans un worktree
## Objectif
Appliquer l'ADR 0013 : chaque position du plateau a un lien direct.
## Consignes
ADR 0007, 0008 et 0013. Aucune nouvelle dépendance.
1. Lecture du fragment `#position=…&match=…` au chargement et sur
`hashchange` ; validation par le moteur ; message clair si illisible.
2. Vue de la position, non jouable, avec « Jouer à partir d'ici » (nouvelle
partie depuis la position, la partie en cours restant reprenable) et
« Retour à ma partie ».
3. Domaine : démarrer une partie depuis une position et un Match ID donnés
(événement GameStarted étendu de façon rétrocompatible, ou équivalent
justifié), sans règle réimplémentée.
4. « Copier le lien de la position » depuis le menu de la partie et depuis la
vue du coup de l'ordinateur ; le lien copié rouvre exactement la même
position (test aller-retour).
5. Scénarios Gherkin (« Ouvrir un lien vers une position », « Partager la
position »), fiches du glossaire (Position ID, Match ID si absentes).
6. `make lint`, `make test`, `make test-browser` (ouvrir un lien, jouer à
partir d'ici, revenir, lien invalide).
## Critères de réussite
Un lien copié depuis l'app, ouvert dans un nouvel onglet, montre la même
position ; les trois commandes passent.
## Résultat
À remplir à la clôture.
+1 -1
View File
@@ -2,7 +2,7 @@
- **Date** : 2026-11-03
- **Étape** : 0e.3 (feuille de route)
- **Statut** : prévu (après la fusion de 0e.1, qui touche les mêmes fichiers)
- **Statut** : prévu
- **Exécutant** : sous-agent general-purpose, dans un worktree
## Objectif
-65
View File
@@ -1,65 +0,0 @@
# Saisie du coup, videau confirmé, pages de test du moteur retirées
- **Date** : 2026-11-03
- **Étape** : 0e (retours du premier test de Pierre sur le téléphone)
- **Statut** : en cours
- **Exécutant** : sous-agent general-purpose, dans un worktree
## Objectif
Rendre la saisie du coup aussi confortable que dans CBG, d'après les retours de
Pierre du 2026-11-03 (points 1, 6, 7, 8, 9 et 11 de son message), et retirer du
site les pages de test du moteur.
## Consignes
Règles de code : ADR 0007 (domaine pur, aucune règle de backgammon
réimplémentée : tout vient du moteur via le domaine). Glossaire et scénarios :
ADR 0008 (chaque comportement visible a son scénario Gherkin dans
`docs/scenarios/`, chaque nouveau terme sa fiche). Aucune nouvelle dépendance.
1. **Pages de test du moteur retirées** (« supprimer la partie test du moteur
totalement ») : plus de `/moteur/` sur le site ni dans `make deploy`.
`make bench` (mesure sous Node) reste : déplacer ce dont il a besoin hors de
`web/`. Mettre à jour `tests/test_site.sh`, le Makefile, `deploy/`, le
service worker, `docs/guide-test-etape-0.md` et ajouter un amendement daté à
l'ADR 0009.
2. **Un seul coup possible, le pion avance** : quand le joueur touche un pion
(ou une case) et qu'une seule case d'arrivée est possible pour ce pion, le
demi-coup est joué aussitôt, sans second toucher. S'il y en a plusieurs, la
sélection actuelle reste.
3. **Coup à valider, annulable** : quand tous les demi-coups sont joués (ou
qu'aucun autre n'est possible), le coup n'est pas envoyé tout de suite. Le
joueur le valide en touchant ses dés (ou un bouton « Valider »). Tant qu'il
ne l'a pas validé, « Annuler » défait le dernier demi-coup, un par un. Le
journal d'événements ne reçoit `MovePlayed` qu'à la validation.
4. **Dés joués marqués** : chaque dé déjà utilisé par un demi-coup est
visiblement estompé. Pour un double, quatre dés, marqués un par un.
5. **Dés de l'adversaire touchables** : toucher la zone des dés de l'un ou
l'autre côté du plateau lance les dés quand le joueur peut lancer (et valide
le coup en attente de validation).
6. **Confirmation du videau** : toucher le videau ou « Doubler » ouvre une
confirmation courte (« Doubler à 2 ? L'ordinateur pourra prendre ou
passer. » : Doubler / Annuler) avant d'envoyer le double.
Tests : scénarios Gherkin mis à jour ou ajoutés (validation du coup, annulation
demi-coup par demi-coup, confirmation du videau), tests unitaires, et
`tests/browser/play.mjs` adapté (Playwright est validé par Pierre). Lancer
`make lint`, `make test` et `make test-browser`.
Rapporter : ce qui a été fait, les écarts, les résultats des trois commandes,
et un brouillon de description de MR (7 sections, voir `docs/organisation.md`).
Commits fréquents sur la branche du worktree ; ne pas pousser, ne pas ouvrir de
MR : la session principale s'en charge.
## Critères de réussite
- `make lint`, `make test` et `make test-browser` passent.
- Dans le navigateur : un pion à destination unique avance en un toucher ; un
coup complet attend la validation ; « Annuler » défait un demi-coup à la
fois ; les dés joués sont estompés ; le videau demande confirmation.
- `https://…/moteur/` n'existe plus dans le site construit (`make site`).
## Résultat
À remplir à la clôture.
+42
View File
@@ -11,11 +11,40 @@ Fonctionnalité: Jouer une partie contre l'ordinateur
Et le premier jet de dés désigne qui commence
Scénario: Jouer un coup permis
Touchez un pion, puis sa case d'arrivée ; s'il n'en a qu'une, il y va dès
que vous le touchez. Chaque dé joué s'estompe. Une fois tous vos dés
joués, votre coup attend que vous le validiez : touchez vos dés, d'un côté
ou de l'autre du plateau, ou « Valider ».
Étant donné que c'est à vous de jouer avec le jet 3-1
Quand vous jouez 8/5 6/5
Alors votre coup attend votre validation
Et vos dés sont tous marqués comme joués
Quand vous validez votre coup
Alors votre coup est accepté
Et c'est ensuite au tour de l'ordinateur
Scénario: Un pion qui n'a qu'une case d'arrivée
Après 8/5, il ne vous reste que le 1 : chaque pion jouable n'a plus
qu'une case d'arrivée, et il y va dès que vous le touchez.
Étant donné que c'est à vous de jouer avec le jet 3-1
Quand vous jouez 8/5
Alors seul votre 3 est marqué comme joué
Et chacun de vos pions jouables n'a plus qu'une case d'arrivée
Scénario: Reprendre un pion avant de valider
Tant que vous n'avez pas validé votre coup, « Annuler » reprend le
dernier pion déplacé ; touchez-le encore pour reprendre le précédent.
Étant donné que c'est à vous de jouer avec le jet 3-1
Quand vous jouez 8/5 6/5
Et que vous annulez le dernier demi-coup
Alors il ne reste de joué que 8/5
Quand vous annulez le dernier demi-coup
Alors la position n'a pas changé
Et aucun de vos dés n'est marqué comme joué
Scénario: Un coup interdit est refusé
La case 12 est tenue par l'ordinateur, qui y a cinq pions : vous ne
pouvez pas vous y poser.
@@ -54,6 +83,19 @@ Fonctionnalité: Jouer une partie contre l'ordinateur
Et votre pion frappé part sur la barre
Et vous pouvez revoir son coup
Scénario: Doubler, après confirmation
Avant de lancer les dés, vous pouvez doubler en touchant le videau ou
« Doubler ». L'application vous demande de confirmer : une fois proposé,
un double ne se reprend pas.
Étant donné que vous pouvez doubler
Quand vous demandez à doubler
Mais que vous changez d'avis
Alors rien n'est proposé à l'ordinateur
Quand vous demandez à doubler
Et que vous confirmez
Alors l'ordinateur prend ou passe, comme le recommande le moteur
Scénario: Prendre le double de l'ordinateur
Étant donné que l'ordinateur vous propose de doubler
Quand vous prenez
+2 -2
View File
@@ -1,4 +1,4 @@
// bench.mjs -- la mesure de la page bench.html, sous Node, sur le PC
// bench.mjs -- mesure du moteur WebAssembly sous Node, sur le PC
// (`make bench`). Premier ordre de grandeur seulement : le chiffre qui compte
// est celui du téléphone.
//
@@ -10,7 +10,7 @@ import os from "node:os";
import { fileURLToPath } from "node:url";
import { gzipSync } from "node:zlib";
import createEngineModule from "../build/wasm/engine.mjs";
import { DOWNLOADED_FILES, formatReport, measureTimes } from "../web/moteur/benchmark.mjs";
import { DOWNLOADED_FILES, formatReport, measureTimes } from "./benchmark.mjs";
import { commands, loadEngine } from "../web/engine-wasm.mjs";
const root = new URL("../", import.meta.url);
@@ -1,5 +1,7 @@
// benchmark.mjs -- mesure du moteur WebAssembly, partagée par la page de
// mesure (bench.html, dans le navigateur) et `make bench` (sous Node).
// benchmark.mjs -- mesure du moteur WebAssembly sous Node, pour `make bench`
// (engine-wasm/bench.mjs). Elle servait aussi à la page de mesure du site,
// retirée avec les pages de test du moteur (ADR 0009, amendement du
// 2026-11-03).
//
// Copyright (C) 2026 les auteurs d'Ustagammon.
// Licence : GPLv3 ou ultérieure (voir LICENSE).
@@ -20,13 +22,12 @@ export const TIME_THRESHOLDS = [
// Taille totale à télécharger, compressée : moins de 40 Mo.
export const DOWNLOAD_LIMIT_BYTES = 40e6;
// Fichiers téléchargés pour faire tourner le moteur dans la page de test,
// chemins relatifs à la racine du site (web/ ; wasm/ est build/wasm/).
// Fichiers téléchargés pour faire tourner le moteur dans l'application
// (hors code de l'application elle-même, quelques dizaines de Ko), chemins
// relatifs à la racine du site (web/ ; wasm/ est build/wasm/).
export const DOWNLOADED_FILES = [
"moteur/index.html",
"moteur/style.css",
"moteur/page.mjs",
"moteur/engine-client.mjs",
"index.html",
"app.css",
"engine-worker.mjs",
"engine-wasm.mjs",
"wasm/engine.mjs",
+155 -32
View File
@@ -1,6 +1,7 @@
// play.mjs -- joue une partie complète par l'interface, dans un vrai
// navigateur sans écran (Playwright), sur le site servi par l'image de
// production : dés, coups au toucher, coups de l'ordinateur, videau, reprise
// production : dés, coups au toucher (validés, annulés), coups de
// l'ordinateur, videau (avec sa confirmation), reprise
// après rechargement, aide, puis hors ligne (service worker).
//
// Copyright (C) 2026 les auteurs d'Ustagammon.
@@ -101,7 +102,7 @@ async function waitForPlayer() {
const b = document.getElementById(id);
return !b.hidden && !b.disabled;
};
for (const id of ["again", "take", "skip", "roll"]) {
for (const id of ["again", "take", "skip", "confirm", "roll"]) {
if (usable(id)) {
return id;
}
@@ -161,7 +162,8 @@ async function checkTraces() {
// L'ordinateur n'a pas pu jouer : son jet reste barré, avec un message.
const info = await page.textContent("#info");
const blocked = await page.locator(".die-blocked").count();
check(/^L'ordinateur ne peut pas jouer \d-\d\.$/.test(info ?? "") && blocked === 2,
check(/^L'ordinateur ne peut pas jouer \d-\d\.$/.test(info ?? "") && blocked >= 2 &&
blocked === (await shownDice()).dice,
`jet de l'ordinateur sans coup mal montré : « ${info} », ${blocked} dés barrés`);
log(`l'ordinateur ne peut pas jouer : « ${info} »`);
}
@@ -175,18 +177,35 @@ async function checkTraces() {
return traces;
}
/** La zone à toucher d'une action du plateau (dés ou videau) : un bouton
* accessible, d'au moins 44 px de côté. Renvoie son sélecteur. */
async function touchTarget(action, label) {
const selector = `[data-action="${action}"]`;
const zone = page.locator(selector);
check((await zone.count()) === 1, `zone ${action} absente du plateau`);
check((await zone.getAttribute("role")) === "button" &&
(await zone.getAttribute("aria-label")) === label, `zone ${action} sans rôle accessible`);
const box = await zone.boundingBox();
check(box.width >= 44 && box.height >= 44,
`zone ${action} trop petite : ${Math.round(box.width)} x ${Math.round(box.height)} px`);
return selector;
/** Une zone à toucher d'une action du plateau (dés ou videau) : count zones
* (les dés en ont une de chaque côté du plateau), chacune un bouton
* accessible d'au moins 44 px de côté. Renvoie le locator de la zone index. */
async function touchTarget(action, label, count = 1, index = 0) {
const zones = page.locator(`[data-action="${action}"]`);
check((await zones.count()) === count,
`zone ${action} : ${await zones.count()} sur le plateau, ${count} attendues`);
for (const zone of await zones.all()) {
check((await zone.getAttribute("role")) === "button" &&
(await zone.getAttribute("aria-label")) === label, `zone ${action} sans rôle accessible`);
const box = await zone.boundingBox();
check(box.width >= 44 && box.height >= 44,
`zone ${action} trop petite : ${Math.round(box.width)} x ${Math.round(box.height)} px`);
}
return zones.nth(index);
}
/** Le nombre de dés montrés, et de dés estompés (déjà joués). */
async function shownDice() {
return {
dice: await page.locator("g.die[data-value]").count(),
used: await page.locator("g.die-used").count(),
};
}
/** Le dernier jet du joueur, d'après le journal. */
function lastPlayerRoll(journal) {
const rolled = journal.events.filter((e) => e.type === "DiceRolled").at(-1);
return rolled?.roll ?? [];
}
/** Observe la page pendant ms millisecondes : le plus grand nombre
@@ -256,13 +275,24 @@ let tracesSeen = 0;
let replays = 0;
let skips = 0;
let rolls = 0;
// Saisie du coup : demi-coups du coup en cours, pions avancés d'un seul
// toucher ou en deux (pion, puis case), coups validés et annulations.
let halfMoves = 0;
let singleTouch = 0;
let twoTouches = 0;
let confirms = 0;
let undone = 0;
let doubles = 0;
// Vrai dès que le joueur a touché un pion ou « Annuler » pendant son coup :
// le coup de l'ordinateur n'est plus montré.
let touched = false;
for (let actions = 0; ; actions++) {
check(actions < 800, "la partie ne finit pas");
check(actions < 1500, "la partie ne finit pas");
const todo = await waitForPlayer();
step(`partie, action ${actions}`);
// Le coup de l'ordinateur est montré jusqu'à l'action suivante du
// joueur ; deux fois, on le revoit (la seconde en mouvement réduit).
const traces = await checkTraces();
const traces = touched ? null : await checkTraces();
if (traces !== null) {
tracesSeen++;
if (replays < 2) {
@@ -292,7 +322,8 @@ for (let actions = 0; ; actions++) {
// message, et le tour ne passe qu'en touchant « Continuer ».
const info = await page.textContent("#info");
const blocked = await page.locator(".die-blocked").count();
check(/^Aucun coup possible avec \d-\d\.$/.test(info ?? "") && blocked === 2,
check(/^Aucun coup possible avec \d-\d\.$/.test(info ?? "") && blocked >= 2 &&
blocked === (await shownDice()).dice,
`aucun coup possible mal montré : « ${info} », ${blocked} dés barrés`);
skips++;
log(`aucun coup possible : « ${info} », vous continuez`);
@@ -304,30 +335,115 @@ for (let actions = 0; ; actions++) {
} else if (todo === "roll") {
if (!doubled && (await page.isEnabled("#double"))) {
doubled = true;
log("vous doublez en touchant le videau");
await page.click(await touchTarget("double", "Doubler"));
// Toucher le videau demande confirmation ; « Annuler » ne
// propose rien, puis « Doubler » (le bouton) et confirmer.
const dialog = page.locator("#double-dialog");
const question = "Doubler à 2 ? L'ordinateur pourra prendre ou passer.";
await (await touchTarget("double", "Doubler")).click();
check(await dialog.isVisible(), "videau touché : pas de confirmation");
check((await page.textContent("#double-question")) === question,
`confirmation du videau : « ${await page.textContent("#double-question")} »`);
await shot("videau-confirmation");
await page.click("#double-cancel");
check(!(await dialog.isVisible()), "Annuler ne ferme pas la confirmation");
const offered = (await savedJournal()).events.some((e) => e.type === "CubeOffered");
check(!offered && (await page.isVisible("#roll")), "double proposé malgré Annuler");
await page.click("#double");
check(await dialog.isVisible(), "« Doubler » : pas de confirmation");
await page.click("#double-confirm");
await waitForPlayer();
const answer = (await page.textContent("#info")) || (await page.textContent("#prompt"));
log(`réponse : ${answer}`);
log(`videau touché : confirmation demandée, annulée, puis double confirmé ; réponse : ${answer}`);
continue;
}
// Une fois sur deux, en touchant les dés en attente plutôt que le
// bouton.
// Une fois sur deux, en touchant les dés plutôt que le bouton, d'un
// côté puis de l'autre du plateau.
rolls++;
await page.click(rolls % 2 === 0 ? await touchTarget("roll", "Lancer les dés") : "#roll");
if (rolls % 2 === 0) {
await (await touchTarget("roll", "Lancer les dés", 2, (rolls / 2) % 2)).click();
} else {
await page.click("#roll");
}
} else if (todo === "confirm") {
// Coup complet : rien n'est joué tant qu'il n'est pas validé.
const journal = await savedJournal();
const last = journal.events.at(-1);
check(last?.type === "DiceRolled" && (await page.isEnabled("#cancel")),
`coup complet déjà joué ou non annulable (dernier événement ${last?.type})`);
check(/Valider/.test((await page.textContent("#prompt")) ?? ""),
`consigne de validation absente : « ${await page.textContent("#prompt")} »`);
const dice = await shownDice();
check(dice.used === halfMoves && dice.used > 0,
`dés estompés : ${dice.used} pour ${halfMoves} demi-coups`);
if (undone === 0 && halfMoves >= 2) {
// Une fois : « Annuler » défait les demi-coups un par un.
if (confirms === 0) {
await shot("2b-coup-a-valider");
}
for (let left = halfMoves - 1; left >= 0; left--) {
await page.click("#cancel");
await waitForPlayer();
const after = await shownDice();
check(after.used === left && (await page.isHidden("#confirm")),
`Annuler : ${after.used} dés estompés, ${left} attendus`);
undone++;
}
check(await page.isDisabled("#cancel"), "Annuler reste actif sans demi-coup à défaire");
check((await savedJournal()).head === journal.head, "Annuler a touché au journal");
log(`Annuler : ${undone} demi-coups défaits un par un, journal intact`);
halfMoves = 0;
continue;
}
confirms++;
// Une fois sur trois avec le bouton, sinon en touchant les dés
// (d'un côté ou de l'autre).
if (confirms % 3 === 0) {
await page.click("#confirm");
} else {
await (await touchTarget("confirm", "Valider", 2, confirms % 2)).click();
}
await waitForPlayer();
const played = await savedJournal();
check(countMoves(played, "player") === countMoves(journal, "player") + 1,
"le coup validé n'est pas dans le journal");
halfMoves = 0;
touched = false;
} else {
check((await page.locator("[data-action]").count()) === 0,
"dés ou videau touchables pendant que vous jouez votre coup");
await page.click(".hit.can-move");
await page.waitForSelector(".hit.can-land");
if (!selectionShot) {
selectionShot = true;
await shot("2-pion-touche");
if (halfMoves === 0) {
// Quatre dés pour un double, deux sinon.
const [a, b] = lastPlayerRoll(await savedJournal());
const dice = await shownDice();
check(dice.dice === (a === b ? 4 : 2) && dice.used === 0,
`jet ${a}-${b} : ${dice.dice} dés montrés, ${dice.used} estompés`);
if (a === b) {
doubles++;
}
}
await page.click(".hit.can-land");
touched = true;
// Un pion à destination unique avance dès qu'on le touche ; sinon,
// ses cases d'arrivée s'allument.
await page.click(".hit.can-move");
if ((await page.locator(".hit.can-land").count()) > 0) {
twoTouches++;
if (!selectionShot) {
selectionShot = true;
await shot("2-pion-touche");
}
await page.click(".hit.can-land");
} else {
singleTouch++;
}
halfMoves++;
await waitForPlayer();
const dice = await shownDice();
check(dice.used === halfMoves, `${dice.used} dés estompés après ${halfMoves} demi-coups`);
continue;
}
// Une fois, au milieu de la partie : fermer et rouvrir la page.
// Une fois, au milieu de la partie, entre deux coups : fermer et rouvrir
// la page.
const journal = await savedJournal();
if (!reloaded && countMoves(journal, "computer") >= 3 && countMoves(journal, "player") >= 3) {
reloaded = true;
@@ -355,7 +471,14 @@ check(countMoves(journal, "player") >= 3 && countMoves(journal, "computer") >= 3
check(reloaded, "la reprise après rechargement n'a pas été essayée");
check(replays === 2, "le coup de l'ordinateur n'a pas été revu");
check(doubled && rolls >= 2, "dés ou videau jamais touchés sur le plateau");
log(`dés lancés ${Math.floor(rolls / 2)} fois en les touchant, videau touché pour doubler`);
check(singleTouch > 0 && twoTouches > 0,
`saisie : ${singleTouch} pions avancés d'un toucher, ${twoTouches} en deux touchers`);
check(undone >= 2, "Annuler n'a pas été essayé sur un coup complet");
check(confirms >= 3, "trop peu de coups validés pour essayer dés et bouton");
log(`dés lancés ${Math.floor(rolls / 2)} fois en les touchant, des deux côtés du plateau`);
log(`demi-coups : ${singleTouch} d'un seul toucher (destination unique), ${twoTouches} en deux ` +
`touchers ; ${confirms} coups validés (${Math.floor(confirms / 3)} par le bouton, les autres ` +
`en touchant les dés) ; ${doubles} doubles montrés en quatre dés`);
log(`coup de l'ordinateur montré ${tracesSeen} fois, et effacé à chaque action suivante`);
log(skips > 0 ? `« Continuer » demandé ${skips} fois` : "aucun jet sans coup possible dans cette partie");
if (computerMs.length > 0) {
+14 -10
View File
@@ -1,8 +1,9 @@
#!/usr/bin/env bash
# Vérifie l'image de production (deploy/) avec le site assemblé (make package) :
# construit l'image en local, la lance, et contrôle ce que reçoit un
# navigateur (application, pages de test du moteur, aide, manifeste, service
# worker, types MIME, compression, politique de sécurité, version).
# navigateur (application, aide, manifeste, service worker, types MIME,
# compression, politique de sécurité, version), et l'absence des anciennes
# pages de test du moteur.
set -euo pipefail
cd "$(dirname "$0")/.."
@@ -71,10 +72,12 @@ check "wasm/engine.mjs" "text/javascript"
check "wasm/engine.wasm" "application/wasm"
check "wasm/engine.data" "application/octet-stream"
check "version.json" "application/json"
# Pages de test du moteur (étape 0b).
check "moteur/" "text/html"
check "moteur/bench.html" "text/html"
check "moteur/engine-client.mjs" "text/javascript"
# Les pages de test du moteur (étape 0b) sont retirées (ADR 0009,
# amendement du 2026-11-03) : plus rien sous /moteur/.
[ ! -e build/site/moteur ] || report "build/site/moteur/ existe encore"
for gone in moteur/ moteur/bench.html; do
curl -s -o /dev/null -w "%{http_code}" "$base/$gone" | grep -qx 404 || report "/$gone : 404 attendu"
done
# Aide : copies du glossaire et des scénarios (ADR 0008).
check "docs/scenarios/jouer-une-partie.feature" "text/plain"
check "docs/glossaire/README.md" "text/markdown"
@@ -94,15 +97,16 @@ done < <(grep -o '"src": "[^"]*"' <<<"$manifest" | sed 's/"src": "\(.*\)"/\1/')
# Le service worker met en cache chaque fichier du site, avec une version.
sw="$(curl -s "$base/sw.js")"
grep -qE '^const VERSION = "[0-9a-f]{16}";' <<<"$sw" || report "sw.js : version absente"
for file in ./ index.html app/main.js wasm/engine.data wasm/engine.wasm moteur/ \
for file in ./ index.html app/main.js wasm/engine.data wasm/engine.wasm \
docs/glossaire/videau.md version.json fonts/AlegreyaSans-Bold.woff2 icons/favicon.svg; do
grep -qF " \"$file\"," <<<"$sw" || report "sw.js : $file absent de la liste à mettre en cache"
done
listed="$(grep -c '^ "' <<<"$sw")"
present="$(find build/site -type f ! -name sw.js | wc -l)"
# Chaque fichier, plus « ./ » et « moteur/ » pour les deux index.html.
[ "$listed" -eq "$((present + 2))" ] \
|| report "sw.js liste $listed adresses pour $present fichiers (plus 2 dossiers)"
# Chaque fichier, plus « ./ » pour index.html.
[ "$listed" -eq "$((present + 1))" ] \
|| report "sw.js liste $listed adresses pour $present fichiers (plus « ./ »)"
grep -q '"moteur/' <<<"$sw" && report "sw.js met encore en cache des pages de test du moteur"
grep -o '^ "[^"]*"' <<<"$sw" | tr -d ' "' | while read -r file; do
curl -sf -o /dev/null "$base/$file" || echo "sw.js : $file introuvable sur le site"
done | grep . && report "sw.js liste des fichiers introuvables"
+37 -6
View File
@@ -499,6 +499,10 @@ body.busy .prompt {
stroke-linecap: round;
}
/* Dé déjà utilisé par un demi-coup du coup en cours : estompé, sans être
* barré (il n'est pas perdu : « Annuler » le rend). */
.die-used { opacity: 0.35; }
.cube-face { fill: var(--cube); stroke: var(--checker-player-edge); stroke-width: 2; }
.cube-value {
@@ -513,6 +517,39 @@ body.busy .prompt {
cursor: pointer;
}
/* ------------------------------------------------ Confirmation (videau) */
/* Une carte au milieu de l'écran, comme le glossaire ; le fond de la page
* s'assombrit derrière. */
.confirm {
width: min(22rem, calc(100vw - 2 * var(--space-4)));
padding: var(--space-4);
color: var(--text);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-raised);
}
.confirm::backdrop {
background: rgba(43, 29, 21, 0.5);
}
.confirm p {
margin: 0 0 var(--space-4);
font-weight: 700;
}
.confirm-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.confirm-actions button {
flex: 1 1 auto;
}
/* --------------------------------------------------------------- Aide */
.help {
@@ -582,12 +619,6 @@ body.busy .prompt {
color: var(--muted);
}
/* Une cible tactile confortable pour le lien. */
.about a {
display: inline-block;
padding-block: 12px;
}
/* ------------------------------------------------------- Mode paysage */
/* Téléphone tourné : le plateau prend toute la hauteur de l'écran, à
+9
View File
@@ -43,11 +43,20 @@
<button id="double" type="button" class="secondary" hidden></button>
<button id="take" type="button" hidden></button>
<button id="drop" type="button" class="secondary" hidden></button>
<button id="confirm" type="button" hidden></button>
<button id="cancel" type="button" class="secondary" hidden></button>
<button id="skip" type="button" hidden></button>
<button id="replay" type="button" class="secondary" hidden></button>
<button id="again" type="button" hidden></button>
</div>
<!-- Confirmation avant de doubler (ouverte par app/ui/app.js). -->
<dialog id="double-dialog" class="confirm" aria-labelledby="double-question">
<p id="double-question"></p>
<div class="confirm-actions">
<button id="double-confirm" type="button"></button>
<button id="double-cancel" type="button" class="secondary"></button>
</div>
</dialog>
<noscript><p>Ustagammon a besoin de JavaScript.</p></noscript>
</main>
-98
View File
@@ -1,98 +0,0 @@
// bench-page.mjs -- page de mesure (bench.html) : chronomètre le moteur
// dans un Web Worker et produit le rapport à copier.
//
// Copyright (C) 2026 les auteurs d'Ustagammon.
// Licence : GPLv3 ou ultérieure (voir LICENSE).
import { DOWNLOADED_FILES, DOWNLOAD_LIMIT_BYTES, formatReport, measureTimes, summarize }
from "./benchmark.mjs";
import { startEngine } from "./engine-client.mjs";
const $ = (id) => document.getElementById(id);
// Taille d'un fichier du site, brute et compressée gzip (comme le ferait un
// serveur qui compresse ses réponses).
// name est relatif à la racine du site, un dossier au-dessus de cette page.
async function fileSize(name) {
const blob = await (await fetch("../" + name, { cache: "no-store" })).blob();
const gzipped = blob.stream().pipeThrough(new CompressionStream("gzip"));
const gzipBytes = (await new Response(gzipped).arrayBuffer()).byteLength;
return { name, bytes: blob.size, gzipBytes };
}
function addRow(cells) {
const row = $("table").insertRow();
for (const text of cells) {
row.insertCell().textContent = text;
}
}
async function measure() {
$("start").disabled = true;
$("results").hidden = true;
$("table").replaceChildren();
$("status").textContent = "Chargement du moteur…";
const start = performance.now();
const engine = startEngine();
await engine.ready;
const loadMs = performance.now() - start;
const { positions } = await (await fetch("../wasm/positions.json")).json();
let memoryBytes = 0;
const times = await measureTimes({
bestMove: (...args) => engine.bestMove(...args).then(keepMemory),
cubeDecision: (...args) => engine.cubeDecision(...args).then(keepMemory),
}, positions, (done, total) => {
$("status").textContent = "Calcul " + done + " sur " + total + "…";
});
function keepMemory(answer) {
memoryBytes = answer.memoryBytes;
return answer;
}
$("status").textContent = "Mesure de la taille à télécharger…";
const files = await Promise.all(DOWNLOADED_FILES.map(fileSize));
for (const s of summarize(times)) {
addRow([s.label, Math.round(s.medianMs) + " ms", Math.round(s.maxMs) + " ms",
s.limitMs + " ms", s.ok ? "OK" : "dépassé"]);
}
const gzipTotal = files.reduce((sum, f) => sum + f.gzipBytes, 0);
addRow(["Taille compressée", "", (gzipTotal / 1e6).toFixed(1).replace(".", ",") + " Mo",
DOWNLOAD_LIMIT_BYTES / 1e6 + " Mo", gzipTotal < DOWNLOAD_LIMIT_BYTES ? "OK" : "dépassé"]);
$("report").value = formatReport({
environment: navigator.userAgent, files, loadMs, memoryBytes, times,
});
$("results").hidden = false;
$("status").textContent = "Mesure terminée.";
}
// Copie dans le presse-papiers. L'API moderne n'existe que sur les pages
// sécurisées (https ou localhost) : sur le réseau local en http, on
// sélectionne le texte et on utilise l'ancienne commande de copie.
async function copyReport() {
try {
if (navigator.clipboard) {
await navigator.clipboard.writeText($("report").value);
} else {
$("report").select();
if (!document.execCommand("copy")) {
throw new Error();
}
}
$("copy-status").textContent = "Rapport copié : collez-le dans la conversation.";
} catch {
$("report").select();
$("copy-status").textContent = "Copie impossible : le texte est sélectionné, "
+ "copiez-le à la main (appui long, puis Copier).";
}
}
$("start").onclick = () => measure().catch((error) => {
$("status").textContent = "La mesure a échoué : " + error.message;
$("status").classList.add("error");
$("start").disabled = false;
});
$("copy").onclick = copyReport;
-35
View File
@@ -1,35 +0,0 @@
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ustagammon : mesure du moteur</title>
<link rel="stylesheet" href="style.css">
<script type="module" src="bench-page.mjs"></script>
</head>
<body>
<main>
<h1>Mesure du moteur</h1>
<p>Cette page chronomètre le moteur sur les positions de référence : meilleur coup
aux niveaux rapide et fort, décision de videau au niveau fort. Elle mesure aussi
la taille à télécharger et la mémoire utilisée. Comptez une à quelques minutes ;
gardez l'écran allumé et la page au premier plan.</p>
<button id="start" type="button">Lancer la mesure</button>
<p id="status" class="status"></p>
<section id="results" hidden>
<h2>Résultats</h2>
<table>
<thead><tr><th>Mesure</th><th>Médiane</th><th>Maximum</th><th>Seuil</th><th></th></tr></thead>
<tbody id="table"></tbody>
</table>
<h2>Rapport</h2>
<button id="copy" type="button">Copier les résultats</button>
<p id="copy-status" class="status"></p>
<textarea id="report" readonly></textarea>
</section>
<p><a href="./">Page de test</a></p>
</main>
</body>
</html>
-66
View File
@@ -1,66 +0,0 @@
// engine-client.mjs -- le moteur vu depuis les pages de test : démarre le
// Web Worker (../engine-worker.mjs, partagé avec l'application) et lui envoie
// les commandes.
//
// Copyright (C) 2026 les auteurs d'Ustagammon.
// Licence : GPLv3 ou ultérieure (voir LICENSE).
//
// Toutes les fonctions renvoient une promesse de { result, ms, memoryBytes } :
// result est l'objet JSON d'engine-cli, ms le temps de calcul mesuré dans le
// Worker. La promesse est rejetée si le moteur signale une erreur.
import { commands } from "../engine-wasm.mjs";
export function startEngine() {
const worker = new Worker(new URL("../engine-worker.mjs", import.meta.url), { type: "module" });
const pending = new Map();
let nextId = 1;
let resolveReady, rejectReady;
const ready = new Promise((resolve, reject) => {
resolveReady = resolve;
rejectReady = reject;
});
worker.onmessage = (event) => {
const message = event.data;
if (message.type === "ready") {
resolveReady(message);
} else if (message.type === "failed") {
rejectReady(new Error(message.message));
} else {
const { resolve, reject } = pending.get(message.id);
pending.delete(message.id);
if (message.error) {
reject(new Error(message.error));
} else {
resolve(message);
}
}
};
// Erreur au chargement du Worker lui-même (fichier absent, navigateur
// trop ancien pour les Workers en module ES…).
worker.onerror = (event) => {
rejectReady(new Error(event.message || "le Web Worker du moteur n'a pas démarré"));
};
function run(args) {
const id = nextId++;
return new Promise((resolve, reject) => {
pending.set(id, { resolve, reject });
worker.postMessage({ id, args: args.map(String) });
});
}
return {
// Promesse de { loadMs, memoryBytes } une fois le moteur chargé.
ready,
bestMove: (positionId, matchId, dice, ply) =>
run(commands.bestMove(positionId, matchId, dice, ply)),
cubeDecision: (positionId, matchId, ply) =>
run(commands.cubeDecision(positionId, matchId, ply)),
evaluate: (positionId, matchId, ply) =>
run(commands.evaluate(positionId, matchId, ply)),
reference: (positionId, matchId, dice, ply) =>
run(commands.reference(positionId, matchId, dice, ply)),
};
}
-48
View File
@@ -1,48 +0,0 @@
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ustagammon : test du moteur</title>
<link rel="stylesheet" href="style.css">
<script type="module" src="page.mjs"></script>
</head>
<body>
<main>
<h1>Test du moteur</h1>
<p>Le moteur GNU Backgammon, compilé en WebAssembly, calcule dans le navigateur.</p>
<p id="status" class="status">Chargement du moteur…</p>
<form id="form">
<label>Exemple
<select id="example"><option value="">(choisir une position de référence)</option></select>
</label>
<label>Position ID
<input id="position-id" required autocomplete="off" spellcheck="false" value="4HPwATDgc/ABMA">
</label>
<label>Match ID
<input id="match-id" required autocomplete="off" spellcheck="false" value="cIkFAAAAAAAA">
</label>
<div class="row">
<label>Dé 1 <input id="die1" type="number" min="1" max="6" required value="3"></label>
<label>Dé 2 <input id="die2" type="number" min="1" max="6" required value="1"></label>
<label>Niveau
<select id="ply">
<option value="0">rapide (0 pli)</option>
<option value="2">fort (2 plis)</option>
</select>
</label>
</div>
<button id="best-move" type="submit" disabled>Meilleur coup</button>
</form>
<section id="result" class="result" hidden>
<p>Meilleur coup : <strong id="move"></strong></p>
<p id="details"></p>
<p>Temps de calcul : <strong id="time"></strong></p>
</section>
<p><a href="bench.html">Page de mesure</a> · <a href="../">L'application</a></p>
</main>
</body>
</html>
-71
View File
@@ -1,71 +0,0 @@
// page.mjs -- page de test du moteur (index.html) : meilleur coup d'une
// position, avec son temps de calcul.
//
// Copyright (C) 2026 les auteurs d'Ustagammon.
// Licence : GPLv3 ou ultérieure (voir LICENSE).
import { startEngine } from "./engine-client.mjs";
const $ = (id) => document.getElementById(id);
const engine = startEngine();
engine.ready.then(
({ loadMs }) => {
$("status").textContent = "Moteur prêt, chargé en " + Math.round(loadMs) + " ms.";
$("best-move").disabled = false;
},
(error) => {
$("status").textContent = "Le moteur n'a pas pu se charger : " + error.message;
$("status").classList.add("error");
},
);
// Exemples : les positions de référence avec des dés.
fetch("../wasm/positions.json")
.then((response) => response.json())
.then(({ positions }) => {
for (const p of positions.filter((p) => p.type === "move")) {
const option = new Option(p.id + " : " + p.description, p.id);
option.position = p;
$("example").add(option);
}
})
.catch(() => {}); // la page reste utilisable sans les exemples
$("example").onchange = () => {
const p = $("example").selectedOptions[0].position;
if (p) {
$("position-id").value = p.position_id;
$("match-id").value = p.match_id;
[$("die1").value, $("die2").value] = p.dice;
}
};
function showResult(move, details, time) {
$("move").textContent = move;
$("details").textContent = details;
$("time").textContent = time;
$("result").hidden = false;
}
$("form").onsubmit = async (event) => {
event.preventDefault();
$("best-move").disabled = true;
$("result").hidden = true;
try {
const { result, ms } = await engine.bestMove($("position-id").value.trim(),
$("match-id").value.trim(), [$("die1").value, $("die2").value], $("ply").value);
const best = result.best_move;
if (best) {
showResult(best.move, "Équité " + best.equity.toFixed(3).replace(".", ",")
+ ", chances de gain " + (100 * best.probabilities.win).toFixed(1).replace(".", ",")
+ " %, évalué à " + best.ply + " pli(s).", Math.round(ms) + " ms");
} else {
showResult("aucun coup possible", "", Math.round(ms) + " ms");
}
} catch (error) {
showResult("erreur", error.message, "");
} finally {
$("best-move").disabled = false;
}
};
-113
View File
@@ -1,113 +0,0 @@
/* Pages de test du moteur : mise en forme minimale, lisible sur téléphone. */
:root {
--text: #1d1d1b;
--background: #fbfaf7;
--muted: #5f5e5a;
--accent: #1f5c4a;
--error: #a3261b;
--border: #cfccc4;
}
@media (prefers-color-scheme: dark) {
:root {
--text: #ecebe6;
--background: #1b1c1a;
--muted: #a9a8a2;
--accent: #7cc4a8;
--error: #f08a7e;
--border: #4a4a46;
}
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font: 17px/1.5 system-ui, sans-serif;
color: var(--text);
background: var(--background);
}
main {
max-width: 40rem;
margin: 0 auto;
padding: 1rem;
}
h1 {
font-size: 1.5rem;
}
label {
display: block;
margin-bottom: 0.75rem;
}
input,
select,
button,
textarea {
display: block;
width: 100%;
margin-top: 0.25rem;
padding: 0.5rem;
font: inherit;
color: inherit;
background: transparent;
border: 1px solid var(--border);
border-radius: 6px;
}
.row {
display: flex;
gap: 0.75rem;
}
.row label {
flex: 1;
}
button {
margin: 0.5rem 0 1rem;
font-weight: 600;
color: var(--background);
background: var(--accent);
border-color: var(--accent);
}
button:disabled {
opacity: 0.5;
}
textarea {
height: 16rem;
font: 13px/1.4 monospace;
}
table {
width: 100%;
border-collapse: collapse;
}
th,
td {
padding: 0.25rem;
text-align: left;
border-bottom: 1px solid var(--border);
}
.status {
color: var(--muted);
}
.error {
color: var(--error);
}
.result {
padding: 0.5rem 1rem;
border-left: 4px solid var(--accent);
}