Compare commits

...
Author SHA1 Message Date
Pierre MARTINandClaude Opus 5.5 a238da77ec Contour des pions blancs plus sombre en thème clair ; recette des pions du joueur
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-12 09:05:45 +01:00
Pierre MARTINandClaude Opus 5.5 9f0f20896b Fusion de main (contour des pions blancs, règle de recette des pions du joueur) dans retours-joueurs
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-12 03:42:20 +01:00
pierre 32f5270215 Fusion de la MR !59 : contour des pions blancs 2026-11-12 02:41:51 +00:00
Pierre MARTINandClaude Opus 5.5 3fff880db2 Charte : contour des pions blancs plus sombre en thème clair (3:1 sur le chêne)
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-12 03:41:49 +01:00
Pierre MARTINandClaude Opus 5.5 57eeb19630 Plan des retours des premiers joueurs clos : résultat dans la description de la MR
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-12 03:34:40 +01:00
Pierre MARTINandClaude Opus 5.5 5a13c40bbb Recette des retours : capture après le bandeau, capture si le bouton reste caché
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-12 02:54:27 +01:00
Pierre MARTINandClaude Opus 5.5 8c2043aca5 Recette : contraste du contour des pions, retours des joueurs dans le navigateur
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-12 02:50:10 +01:00
Pierre MARTINandClaude Opus 5.5 966822084a Tutoriel : deux flèches circulaires ; les jans remplacent le camp
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-12 02:50:10 +01:00
Pierre MARTINandClaude Opus 5.5 09a2ddf566 Numéros des flèches sur le cadre en portrait aussi
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-12 02:50:10 +01:00
Pierre MARTINandClaude Opus 5.5 cfdbc1cedc Pions blancs et noirs, avec contour : valeurs de tokens.json dans app.css
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-12 02:50:10 +01:00
Pierre MARTINandClaude Opus 5.5 0e17334f45 Plan : retours des premiers joueurs
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-11 23:12:22 +01:00
Pierre MARTINandClaude Opus 5.5 1f69635c49 Fusion de la MR !57 : nouvelle partie directe après un bilan, bouton Commencer, fiche Notation des coups
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-11 23:02:48 +01:00
Pierre MARTINandClaude Opus 5.5 fb161789bf Liens de notation : pointillé discret, zone d'appui agrandie
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-11 22:41:42 +01:00
Pierre MARTINandClaude Opus 5.5 e20f215030 Fusion de main (1f, prompts à copier) dans nouvelle-partie-directe
Conflits résolus en gardant les deux apports : la feuille du prompt et la
correction de reviewFinishedGame dans app.ts ; prompts et nouvelle-partie
dans tests/browser.sh.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-11 22:41:42 +01:00
Pierre MARTINandClaude Opus 5.5 abff843519 Plan de la nouvelle partie directe clos : résultat dans la description de la MR
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-11 22:39:47 +01:00
Pierre MARTINandClaude Opus 5.5 4050517904 Glossaire : fiche « Notation des coups », touchable depuis la partie
La fiche explique 13/7, 24/22*, 6/off, bar/22 et 8/4(2), dans la notation
de gnubg. Le type MoveNotation la relie au code. Le coup de la ligne
« L'ordinateur a joué » et celui de la feuille du maître mènent à la fiche.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-11 22:15:09 +01:00
Pierre MARTINandClaude Opus 5.5 05d2479bd3 Écran « Nouvelle partie » : « Commencer la partie » ou « Commencer le match »
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-11 22:15:09 +01:00
Pierre MARTINandClaude Opus 5.5 5da3baecde Nouvelle partie : plus de retour au bilan de l'ancienne partie
Le passage différé au bilan (reviewFinishedGame) ne vérifiait pas que la
partie finie était encore à l'écran : « Commencer » redessinait d'abord
l'ancienne partie finie (adresse #/), puis lançait la nouvelle, et la
microtâche ouvrait le bilan de l'ancienne par-dessus. Le bilan ne s'ouvre
plus que pour la partie finie encore affichée, et « Commencer » lance la
partie avant de changer d'adresse.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-11 22:15:09 +01:00
Pierre MARTINandClaude Opus 5.5 0bb41524bf Test navigateur : nouvelle partie après une partie finie et son bilan
Reproduit le défaut signalé : après une partie finie, l'application
rouverte, « Commencer » de l'écran « Nouvelle partie » ramenait au bilan
de l'ancienne partie. Vérifie l'accueil, le menu et « Changer les réglages ».

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-11 22:14:46 +01:00
Pierre MARTINandClaude Opus 5.5 62ecff245f Plan : nouvelle partie directe, libellé « Commencer », notation des coups
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-11 21:54:18 +01:00
39 changed files with 1149 additions and 205 deletions
+2 -2
View File
@@ -10,7 +10,7 @@
// stockage, dans le journal (events.ts, champ advice). Le format est
// durable (ADR 0007) : chaque conseil porte sa version (ADVICE_VERSION).
import type { CubeAction, CubeEquities, Ply, Skill } from "./engine.js";
import type { CubeAction, CubeEquities, MoveNotation, Ply, Skill } from "./engine.js";
import type { HalfMove, PositionId } from "./position.js";
import type { Roll } from "./roll.js";
@@ -29,7 +29,7 @@ export type Advice = MoveAdvice | CubeAdvice;
/** Un coup, tel que le conseil le retient. */
export interface AdvisedMove {
/** Notation de gnubg, par exemple « 8/5 6/5 ». */
readonly notation: string;
readonly notation: MoveNotation;
readonly halfMoves: readonly HalfMove[];
/** Équité (avec videau) du point de vue du joueur, et le niveau auquel
* le moteur l'a évaluée. */
+10 -1
View File
@@ -281,6 +281,15 @@ export interface EngineMatchAfter {
readonly crawford: boolean;
}
/**
* Un coup écrit dans la notation de gnubg : « 8/5 6/5 », « 24/22* »,
* « 6/off », « bar/22 », « 8/4(2) ». Le moteur l'écrit ; l'application ne
* fait que l'afficher.
*
* Glossaire : docs/glossaire/notation-des-coups.md
*/
export type MoveNotation = string;
/**
* Un coup légal complet.
*
@@ -288,7 +297,7 @@ export interface EngineMatchAfter {
*/
export interface Move {
/** Notation de gnubg, par exemple « 8/5 6/5 ». */
readonly notation: string;
readonly notation: MoveNotation;
/** Ses demi-coups, dans un ordre jouable. */
readonly halfMoves: readonly HalfMove[];
/** La position après le coup, vue du joueur qui vient de jouer. */
+10 -2
View File
@@ -12,7 +12,15 @@
import type { Advice } from "./advice.js";
import { type Branch, branches, switchToBranch } from "./branches.js";
import { CENTERED_CUBE, type Cube } from "./cube.js";
import type { BoardSide, Engine, EngineCube, Level, Ply, ResultKind } from "./engine.js";
import type {
BoardSide,
Engine,
EngineCube,
Level,
MoveNotation,
Ply,
ResultKind,
} from "./engine.js";
import {
appendEvent,
currentLine,
@@ -290,7 +298,7 @@ export class Game {
* À défaut (aucun coup légal ne correspond), les demi-coups ; chaîne
* vide si l'événement n'est pas un coup ou si aucun pion n'a bougé.
*/
async moveNotation(eventId: string): Promise<string> {
async moveNotation(eventId: string): Promise<MoveNotation> {
const line = currentLine({ ...this.#journal, head: eventId });
const event = line.at(-1);
if (event?.type !== "MovePlayed" || event.halfMoves.length === 0) {
+5 -3
View File
@@ -21,6 +21,7 @@ import { ADVICE_TEXTS, CUBE_GLOSSARY, formatEquity } from "./advice-texts.js";
import { askAiLink, clearSheet } from "./ask-ai.js";
import { type IconName, icon } from "./icons.js";
import { boardSvg, createMovePlayer, drawSteps, type MovePlayer } from "./move-board.js";
import { showWithNotation } from "./notation.js";
import { routeHash } from "./router.js";
/** Préfixe des identifiants du plateau de la feuille. */
@@ -203,8 +204,9 @@ export function createAdviceView(options: AdviceViewOptions): AdviceView {
const svg = sheetBoard(boardBox);
if (best === null) {
svg.dataset.move = "mine";
svg.setAttribute("aria-label", ADVICE_TEXTS.legendSame(advice.played.notation));
legend.textContent = ADVICE_TEXTS.legendSame(advice.played.notation);
const text = ADVICE_TEXTS.legendSame(advice.played.notation);
svg.setAttribute("aria-label", text);
showWithNotation(legend, text, advice.played.notation);
void player?.play(mine);
return;
}
@@ -233,7 +235,7 @@ export function createAdviceView(options: AdviceViewOptions): AdviceView {
shown === "mine"
? ADVICE_TEXTS.legendMine(notation)
: ADVICE_TEXTS.legendBest(notation);
legend.textContent = text;
showWithNotation(legend, text, notation);
svg.setAttribute("aria-label", text);
svg.dataset.move = shown;
void player?.play(shown === "mine" ? mine : best);
+47 -14
View File
@@ -36,6 +36,7 @@ import {
} from "../domain/analysis/phrases.js";
import type { Advice } from "../domain/game/advice.js";
import type { Cube } from "../domain/game/cube.js";
import type { MoveNotation } from "../domain/game/engine.js";
import type { GameJournal } from "../domain/game/events.js";
import type { Game, MoveSteps, NewGame, SideBoards } from "../domain/game/game.js";
import type { HalfMove } from "../domain/game/position.js";
@@ -84,6 +85,7 @@ import { installPlatform, startInstaller } from "./install.js";
import { MATCH_TEXTS } from "./match-texts.js";
import { replacingLink, startNavigation } from "./navigation.js";
import { createNewGameView } from "./new-game-view.js";
import { showWithNotation } from "./notation.js";
import { createPromptSource, type PromptsAccess } from "./prompt-source.js";
import { createReviewRunner, type RunAnalysis } from "./review-runner.js";
import {
@@ -443,6 +445,10 @@ export function startApp(options: AppOptions): void {
let stuck = false;
let busy = true;
let info: string = TEXTS.loading;
// La dernière ligne « L'ordinateur a joué … » et le coup qu'elle cite :
// tant qu'elle est la ligne d'information, ce coup mène à la fiche
// « Notation des coups ».
let computerLine: ComputerTurnLine | null = null;
let engineFailed = false;
// Le dernier coup de l'ordinateur, montré (traces, « Revoir ») jusqu'à
// la prochaine action du joueur ; null : rien à montrer.
@@ -646,7 +652,11 @@ export function startApp(options: AppOptions): void {
} else if (computerCouldNotMove(game)) {
ui.info.textContent = TEXTS.computerCannotMove(rollBefore(game));
} else {
ui.info.textContent = info;
showWithNotation(
ui.info,
info,
computerLine?.text === info ? computerLine.notation : null,
);
}
ui.prompt.textContent = panelShown
? ""
@@ -1037,7 +1047,8 @@ export function startApp(options: AppOptions): void {
while (game !== null && game.state.turn === "computer" && isPlaying(game)) {
await refresh();
await game.playComputerTurn();
info = await describeComputerTurn(game);
computerLine = await describeComputerTurn(game);
info = computerLine.text;
save();
played = true;
}
@@ -1529,25 +1540,37 @@ export function startApp(options: AppOptions): void {
* La partie à l'écran vient de finir : son analyse part en
* arrière-plan, et le bilan remplace le panneau de fin de partie dès
* qu'il est prêt (charte 1e), si le panneau est toujours là.
*
* Le bilan s'ouvre un peu plus tard (microtâche) : seulement si cette
* partie finie est encore celle de l'écran. Sinon, « Commencer » de
* l'écran « Nouvelle partie » ouvrait le bilan de l'ancienne partie
* par-dessus la nouvelle, qui venait de commencer entre-temps (défaut
* signalé le 2026-11-11).
*/
function reviewFinishedGame(): void {
const id = options.games.shownId();
if (game === null || id === null || busy || game.state.phase !== "over") {
const finished = game;
if (finished === null || id === null || busy || finished.state.phase !== "over") {
return;
}
// L'analyse d'une autre partie, regardée, passe d'abord.
const running = reviewRunner.running;
if (running === null || running === id) {
review(id, game.journal);
review(id, finished.journal);
}
if (
navigation.route.screen === "game" &&
!panelDismissed &&
phrases !== null &&
readyForSummary(game.journal)
readyForSummary(finished.journal)
) {
queueMicrotask(() => {
if (navigation.route.screen === "game" && !panelDismissed) {
if (
game === finished &&
options.games.shownId() === id &&
navigation.route.screen === "game" &&
!panelDismissed
) {
navigation.go(routeHash({ screen: "summary", game: id }));
}
});
@@ -2015,8 +2038,10 @@ export function startApp(options: AppOptions): void {
welcomed: () => saveSettings(welcomed()),
});
// L'écran « Nouvelle partie » : « Commencer » remplace son adresse par
// celle de la partie (le retour du téléphone ne le rouvre pas).
// L'écran « Nouvelle partie » : « Commencer » lance la partie, puis
// remplace son adresse par celle de la partie (le retour du téléphone
// ne le rouvre pas). Dans cet ordre : l'écran de jeu ne se redessine
// jamais avec l'ancienne partie, finie, et son panneau de fin.
const newGameView = createNewGameView({
section: ui.newGameSection,
settings: () => settings,
@@ -2025,8 +2050,8 @@ export function startApp(options: AppOptions): void {
if (busy || game === null) {
return;
}
navigation.replace("#/");
newGame(chosenGame(settings));
navigation.replace("#/");
},
});
leavingLink(newGameView.closeLink, (route) => route.screen === "newGame");
@@ -2661,22 +2686,30 @@ async function computerMoveToShow(game: Game): Promise<MoveSteps | null> {
return game.lastMoveSteps();
}
/** La ligne d'information après le tour de l'ordinateur, et le coup
* qu'elle cite (null s'il n'a pas joué de coup). */
interface ComputerTurnLine {
readonly text: string;
readonly notation: MoveNotation | null;
}
/** Ce qu'a fait l'ordinateur pendant son tour (sans durée de calcul). Son
* coup s'écrit dans la notation du moteur, comme dans l'analyse. */
async function describeComputerTurn(game: Game): Promise<string> {
async function describeComputerTurn(game: Game): Promise<ComputerTurnLine> {
const last = game.events.at(-1);
if (last?.type === "CubeOffered") {
return "";
return { text: "", notation: null };
}
const played = game.events.findLast((e) => e.type === "MovePlayed");
if (played?.type !== "MovePlayed") {
return "";
return { text: "", notation: null };
}
const dice = rollBefore(game);
if (played.halfMoves.length === 0) {
return TEXTS.computerCannotMove(dice);
return { text: TEXTS.computerCannotMove(dice), notation: null };
}
return TEXTS.computerMoved(dice, await game.moveNotation(played.id));
const notation = await game.moveNotation(played.id);
return { text: TEXTS.computerMoved(dice, notation), notation };
}
/** Le résultat d'une partie finie, en deux parties : le titre du panneau
+37
View File
@@ -156,6 +156,43 @@ export function pointSlot(number: number): { top: boolean; column: number } {
return { top: true, column: number - 13 };
}
/**
* Le jan intérieur d'un camp : ses six dernières flèches avant la sortie,
* numérotées du point de vue du joueur (1 à 6 pour lui, 19 à 24 pour
* l'ordinateur), dans le sens de marche du camp. Pur dessin : le moteur
* reste seul juge des règles qui en dépendent (sortie, rentrée).
* Glossaire : docs/glossaire/jan-interieur.md
*/
export interface HomeBoard {
readonly side: Side;
readonly points: readonly number[];
}
/**
* Le jan extérieur d'un camp : les six flèches qui précèdent son jan
* intérieur (7 à 12 pour le joueur, 13 à 18 pour l'ordinateur), dans le sens
* de marche du camp.
* Glossaire : docs/glossaire/jan-exterieur.md
*/
export interface OuterBoard {
readonly side: Side;
readonly points: readonly number[];
}
/** Six flèches d'un camp, de sa flèche first à first - 5 dans sa propre
* numérotation, renumérotées pour le joueur. */
function sixPoints(side: Side, first: number): number[] {
return Array.from({ length: 6 }, (_, i) => (side === "player" ? first - i : 25 - (first - i)));
}
export function homeBoard(side: Side): HomeBoard {
return { side, points: sixPoints(side, 6) };
}
export function outerBoard(side: Side): OuterBoard {
return { side, points: sixPoints(side, 12) };
}
/** Le plateau de la position de départ, pour le dessiner avant que le
* moteur soit chargé (première ouverture) : chaque camp a 2 pions sur sa case
* 24, 5 sur la 13, 3 sur la 8 et 5 sur la 6 ; 167 points chacun. Une donnée,
+4 -10
View File
@@ -303,23 +303,17 @@ function drawPoint(
"data-point": number,
points: `${left},${base} ${left + g.pointWidth},${base} ${center},${tip}`,
});
// Numéros : sur le cadre en paysage, dans la bande centrale en
// portrait. Leur taille (12 px au moins à l'écran) dépend de l'échelle
// Numéros : sur le cadre, bandes haute et basse, en portrait comme en
// paysage. Leur taille (12 px au moins à l'écran) dépend de l'échelle
// du dessin : c'est une mesure du dessin, comme x et y.
const size = g.numberSize;
let y: number;
if (g.layout === "landscape") {
y = top ? g.edge / 2 + size * 0.36 : g.height - g.edge / 2 + size * 0.36;
} else {
y = top ? middle - g.die / 2 - 4 : middle + g.die / 2 + 4 + size * 0.72;
}
add(
svg,
"text",
{
class: g.layout === "landscape" ? "point-number on-frame" : "point-number",
class: "point-number",
x: center,
y,
y: top ? g.edge / 2 + size * 0.36 : g.height - g.edge / 2 + size * 0.36,
"font-size": size,
},
String(number),
+10 -5
View File
@@ -25,7 +25,7 @@ export interface Geometry {
readonly height: number;
/** Épaisseur du cadre sur les côtés. */
readonly frame: number;
/** Hauteur du cadre en haut et en bas : la bande des numéros en paysage. */
/** Hauteur du cadre en haut et en bas : la bande des numéros des flèches. */
readonly edge: number;
/** Colonne de commandes à gauche (0 en portrait). */
readonly left: number;
@@ -95,14 +95,19 @@ export function boardGeometry(layout: Layout, aspect: number, pxPerUnit: number)
arrowWidth: 2.5 / pxPerUnit,
};
if (layout === "portrait") {
// Les mesures du plateau d'origine : flèches de 44, pions de 20.
// Les mesures du plateau d'origine : flèches de 44. Les bandes haute
// et basse du cadre portent les numéros des flèches, comme en
// paysage (12 px au moins à l'écran) : pions de 19 au plus. La bande ne
// dépasse pas 36 unités : sur une miniature (moins de 275 px de
// large), les numéros rapetissent plutôt que d'écraser les flèches.
const frame = 8;
const edge = Math.min(36, Math.max(24, numberSize + 8));
const tray = 48;
const bar = 40;
const width = 640;
const pointWidth = (width - 3 * frame - tray - bar) / 12;
const band = 84;
const radius = Math.min(pointWidth / 2 - 2, (height / 2 - frame - band / 2) / 10);
const radius = Math.min(pointWidth / 2 - 2, (height / 2 - edge - band / 2) / 10);
const x0 = frame;
const barLeft = x0 + 6 * pointWidth;
return {
@@ -110,7 +115,7 @@ export function boardGeometry(layout: Layout, aspect: number, pxPerUnit: number)
width,
height,
frame,
edge: frame,
edge,
left: 0,
tray,
bar,
@@ -123,7 +128,7 @@ export function boardGeometry(layout: Layout, aspect: number, pxPerUnit: number)
rightHalf: barLeft + bar,
trayLeft: barLeft + bar + 6 * pointWidth + frame,
target,
numberSize,
numberSize: Math.min(numberSize, edge - 8),
bandFont: atLeast(13.5, pxPerUnit, 17),
chipFont: atLeast(13.5, pxPerUnit, 17),
...sizes,
+3 -2
View File
@@ -94,14 +94,15 @@ export const HOME_TEXTS = {
drop: "Passer",
tutorialLoading: "Chargement du tutoriel…",
tutorialFailed: "Le tutoriel n'a pas pu se charger.",
pathLabel: "Le sens du jeu de vos pions, en pointillés",
pathLabel:
"Le sens du jeu : la flèche claire pour vos pions, la sombre pour ceux de l'ordinateur",
/** Le résultat d'une partie finie par le coup illustré (étape 7). */
illustratedEnd: (kind: ResultKind) =>
kind === "single"
? "Partie finie : l'ordinateur avait sorti des pions, c'est une partie simple."
: kind === "gammon"
? "Partie finie : l'ordinateur n'a sorti aucun pion, c'est un gammon."
: "Partie finie : il reste un pion de l'ordinateur dans votre camp, c'est un backgammon.",
: "Partie finie : il reste un pion de l'ordinateur dans votre jan intérieur, c'est un backgammon.",
computerDoubles: "L'ordinateur double.",
// Aide
+1 -1
View File
@@ -57,7 +57,7 @@ export const MATCH_TEXTS = {
advice: "Conseil du maître",
adviceDetail: "Une ligne après chacun de vos coups",
startGame: "Commencer la partie",
startMatch: (n: number) => `Commencer le match en ${n} points`,
startMatch: "Commencer le match",
kept: "Vos choix sont gardés pour la prochaine fois.",
// Score du match sur l'écran de jeu
+1 -3
View File
@@ -200,9 +200,7 @@ export function createNewGameView(options: NewGameViewOptions): NewGameView {
levelName.textContent = MATCH_TEXTS.levels[s.level].name;
levelText.textContent = MATCH_TEXTS.levels[s.level].text;
advice.setAttribute("aria-checked", String(s.masterAdvice));
start.textContent = isMatch
? MATCH_TEXTS.startMatch(s.matchLength)
: MATCH_TEXTS.startGame;
start.textContent = isMatch ? MATCH_TEXTS.startMatch : MATCH_TEXTS.startGame;
start.disabled = busy;
},
focus() {
+34
View File
@@ -0,0 +1,34 @@
// Un coup écrit dans la notation du moteur (« 24/22* 6/1 », « 8/4(2) »),
// touchable vers sa fiche du glossaire : un débutant y apprend ce que
// veulent dire l'étoile, « off », « bar » et « (2) ».
//
// Copyright (C) 2026 les auteurs d'Ustagammon.
// Licence : GPLv3 ou ultérieure (voir LICENSE).
import type { MoveNotation } from "../domain/game/engine.js";
import { routeHash } from "./router.js";
/** La fiche du glossaire de la notation (docs/glossaire/, sans .md). */
export const NOTATION_TERM = "notation-des-coups";
/**
* Remplace le contenu de parent par text, où la première occurrence de
* notation devient un lien vers la fiche « Notation des coups ». Sans
* notation dans le texte, le texte seul.
*/
export function showWithNotation(
parent: HTMLElement,
text: string,
notation: MoveNotation | null,
): void {
const at = notation === null || notation === "" ? -1 : text.indexOf(notation);
if (notation === null || at < 0) {
parent.textContent = text;
return;
}
const link = document.createElement("a");
link.className = "notation";
link.href = routeHash({ screen: "glossary", term: NOTATION_TERM });
link.textContent = notation;
parent.replaceChildren(text.slice(0, at), link, text.slice(at + notation.length));
}
+1 -1
View File
@@ -188,7 +188,7 @@ export const TEXTS = {
) =>
[
winner === null
? "Vous avez la main : vos pions ivoire, en bas."
? "Vous avez la main : vos pions blancs, en bas."
: `La partie est finie dans cette position : ${
winner === "player" ? "vous gagnez" : "l'ordinateur gagne"
}.`,
+1 -1
View File
@@ -24,7 +24,7 @@ export interface TutorialScreen {
readonly roll: readonly [number, number] | null;
/** Explication : le coup illustré, en notation de gnubg. */
readonly move: string | null;
/** Explication : le sens du jeu dessiné en pointillés. */
/** Explication : le sens du jeu, deux flèches circulaires. */
readonly path: boolean;
/** « À vous » : les coups justes, en notation de gnubg. */
readonly expected: readonly string[];
+62 -45
View File
@@ -18,11 +18,14 @@ import type { Side } from "../domain/game/side.js";
import type { PracticeVerdict, TutorialBoard } from "../domain/learning/tutorial.js";
import {
boardModel,
homeBoard,
moveTargets,
moveTrace,
onlyHalfMove,
outerBoard,
type Place,
placeOf as placeOfChecker,
pointSlot,
} from "./board-model.js";
import {
type BoardDecor,
@@ -149,57 +152,71 @@ export function fillParagraph(target: HTMLElement, paragraph: Paragraph): void {
const SVG_NS = "http://www.w3.org/2000/svg";
/** Le sens du jeu des pions du joueur, en pointillés : du haut à droite
* (flèche 24) vers la gauche, puis en bas jusqu'à la flèche 1 et la sortie.
* Tracé sous les pions et sous les numéros des flèches, qu'il ne cache
* jamais. pxPerUnit : pixels à l'écran par unité du dessin (le liseré
* ivoire fait 8 px, les points 4 px, quelle que soit la taille). */
function drawPath(svg: SVGSVGElement, g: Geometry, pxPerUnit: number): void {
/** Le sens du jeu : deux flèches circulaires, une claire pour les pions du
* joueur (du haut à droite vers la gauche, puis en bas jusqu'à son jan
* intérieur), une sombre pour ceux de l'ordinateur, en sens inverse et à
* l'intérieur de la première. Chacune a un liseré de la couleur opposée et
* finit par une pointe ; jamais en brique (la brique veut dire « à faire »).
* Dessinées sous les pions, qu'elles ne cachent jamais. pxPerUnit : pixels
* à l'écran par unité du dessin (trait de 5 px sur un liseré de 9 px,
* quelle que soit la taille du plateau). */
function drawDirections(svg: SVGSVGElement, g: Geometry, pxPerUnit: number): void {
const px = (n: number) => n / pxPerUnit;
const center = (column: number) => columnLeft(g, column) + g.pointWidth / 2;
const top = g.height * 0.3;
const bottom = g.height * 0.7;
const right = center(11);
const left = center(0) - g.pointWidth * 0.25;
const turn = g.pointWidth * 0.6;
const end = g.trayLeft + g.tray * 0.25;
const d =
`M ${right} ${top} L ${left + turn} ${top} Q ${left} ${top} ${left} ${top + turn} ` +
`L ${left} ${bottom - turn} Q ${left} ${bottom} ${left + turn} ${bottom} L ${end} ${bottom}`;
const group = document.createElementNS(SVG_NS, "g");
group.setAttribute("class", "tutorial-path");
group.setAttribute("role", "img");
group.setAttribute("aria-label", HOME_TEXTS.pathLabel);
const px = (n: number) => n / pxPerUnit;
const width = px(4);
for (const [className, stroke] of [
["path-edge", px(8)],
["path-dots", width],
] as const) {
const path = document.createElementNS(SVG_NS, "path");
path.setAttribute("class", className);
path.setAttribute("d", d);
path.setAttribute("stroke-width", String(stroke));
if (className === "path-dots") {
path.setAttribute("stroke-dasharray", `0.1 ${px(10)}`);
// Chaque flèche part du jan intérieur adverse (sa flèche 24), longe les
// deux jans extérieurs, tourne au bout du sien et finit dans son jan
// intérieur. Celle de l'ordinateur passe à l'intérieur de la claire.
const column = (point: number) => pointSlot(point).column;
const loops = [
{
side: "player",
from: g.height * 0.29,
to: g.height * 0.71,
left: center(column(outerBoard("player").points[0] ?? 12)) - g.pointWidth * 0.1,
},
{
side: "computer",
from: g.height * 0.62,
to: g.height * 0.38,
left: center(column(outerBoard("computer").points[0] ?? 13) + 1) + g.pointWidth * 0.5,
},
] as const;
const head = px(18);
const half = px(10);
for (const { side, from, to, left } of loops) {
const other = side === "player" ? "computer" : "player";
const start = center(column(homeBoard(other).points[5] ?? 1));
const end = center(column(homeBoard(side).points[4] ?? 2)) + g.pointWidth * 0.3;
const turn = Math.min(Math.abs(to - from) / 2, g.pointWidth * 0.9);
const down = to > from ? 1 : -1;
const d =
`M ${start} ${from} L ${left + turn} ${from} Q ${left} ${from} ${left} ${from + down * turn} ` +
`L ${left} ${to - down * turn} Q ${left} ${to} ${left + turn} ${to} L ${end - head / 2} ${to}`;
for (const [part, stroke] of [
["edge", px(9)],
["line", px(5)],
] as const) {
const path = document.createElementNS(SVG_NS, "path");
path.setAttribute("class", `direction-${part} direction-${side}`);
path.setAttribute("d", d);
path.setAttribute("stroke-width", String(stroke));
group.append(path);
}
group.append(path);
}
const head = document.createElementNS(SVG_NS, "path");
head.setAttribute("class", "path-head");
const size = px(7);
head.setAttribute(
"d",
`M ${end - size} ${bottom - size} L ${end} ${bottom} L ${end - size} ${bottom + size}`,
);
head.setAttribute("stroke-width", String(px(3)));
group.append(head);
// Sous les pions, et sous les numéros des flèches, remontés au-dessus
// du tracé ; les zones à toucher restent devant tout.
const pieces = svg.querySelector(":scope > g.pieces");
svg.insertBefore(group, pieces);
for (const number of svg.querySelectorAll(":scope > .point-number")) {
svg.insertBefore(number, pieces);
const tip = document.createElementNS(SVG_NS, "path");
tip.setAttribute("class", `direction-head direction-${side}`);
tip.setAttribute(
"d",
`M ${end - head} ${to - half} L ${end} ${to} L ${end - head} ${to + half} Z`,
);
tip.setAttribute("stroke-width", String(px(2)));
group.append(tip);
}
// Sous les pions ; les zones à toucher restent devant tout.
svg.insertBefore(group, svg.querySelector(":scope > g.pieces"));
}
/** Crée l'écran du tutoriel dans section (vide dans index.html). */
@@ -359,7 +376,7 @@ export function createTutorialView(options: TutorialViewOptions): TutorialView {
};
renderBoard(svg, g, boardModel(current), decor);
if (screen?.path === true) {
drawPath(svg, g, (svg.getBoundingClientRect().width || g.width) / g.width);
drawDirections(svg, g, (svg.getBoundingClientRect().width || g.width) / g.width);
}
}
+29 -5
View File
@@ -9,7 +9,7 @@ import assert from "node:assert/strict";
import { readdirSync, readFileSync, statSync } from "node:fs";
import { test } from "node:test";
import { createSettingsStore } from "../src/storage/settings-store.js";
import { OPENING_BOARDS, pipLead } from "../src/ui/board-model.js";
import { homeBoard, OPENING_BOARDS, outerBoard, pipLead } from "../src/ui/board-model.js";
import { BOARD_HEIGHT, boardGeometry, MAX_STACK, stackY } from "../src/ui/geometry.js";
import { createHaptics, HAPTIC_PATTERNS } from "../src/ui/haptics.js";
import { ICON_PATHS } from "../src/ui/icons.js";
@@ -37,15 +37,32 @@ const LANDSCAPES: [number, number][] = [
[800, 308],
];
test("géométrie en portrait : les mesures du plateau d'origine", () => {
test("géométrie en portrait : les mesures du plateau d'origine, numéros sur le cadre", () => {
const g = boardGeometry("portrait", 640 / 520, 396 / 640);
assert.equal(g.width, 640);
assert.equal(g.pointWidth, 44);
assert.equal(g.radius, 20);
assert.equal(g.step, 42);
// Pions d'un peu moins de 19 unités (20 avant les numéros sur le cadre).
assert.ok(g.radius >= 18.5 && g.radius <= 19, `pions de ${g.radius}`);
assert.equal(g.step, 2 * g.radius + 2);
assert.equal(g.trayLeft + g.tray + g.frame, 640);
// Numéros d'au moins 12 px à l'écran, à 412 px de large.
// Numéros d'au moins 12 px à l'écran, à 412 px de large, logés dans les
// bandes haute et basse du cadre (retours des premiers joueurs).
assert.ok(g.numberSize * (396 / 640) >= 12, `numéros de ${g.numberSize} unités`);
assert.ok(g.numberSize + 8 <= g.edge, `bande de ${g.edge} pour des numéros de ${g.numberSize}`);
});
test("géométrie en portrait : numéros d'au moins 12 px sur le cadre dès 275 px de large", () => {
for (const width of [275, 320, 358, 380, 396, 600]) {
const px = width / 640;
const g = boardGeometry("portrait", 640 / 520, px);
assert.ok(g.numberSize * px >= 12, `${width} px : numéros de ${g.numberSize * px} px`);
assert.ok(g.numberSize < g.edge, `${width} px : numéros hors du cadre`);
assert.ok(g.edge <= 36, `${width} px : bande de ${g.edge}`);
}
// Une miniature : la bande reste de 36 unités, les numéros y tiennent.
const thumbnail = boardGeometry("portrait", 640 / 520, 200 / 640);
assert.equal(thumbnail.edge, 36);
assert.ok(thumbnail.numberSize < thumbnail.edge);
});
test("géométrie en paysage : le plateau remplit l'écran, flèches de 44 px et pions de 22 px au moins", () => {
@@ -93,6 +110,13 @@ test("en paysage, les pions de la barre s'arrêtent avant les pastilles des comp
}
});
test("les jans de chaque camp, numérotés pour le joueur, dans le sens de marche", () => {
assert.deepEqual(homeBoard("player").points, [6, 5, 4, 3, 2, 1]);
assert.deepEqual(outerBoard("player").points, [12, 11, 10, 9, 8, 7]);
assert.deepEqual(homeBoard("computer").points, [19, 20, 21, 22, 23, 24]);
assert.deepEqual(outerBoard("computer").points, [13, 14, 15, 16, 17, 18]);
});
// -------------------------------------------------------------- Vibrations
test("vibrations : les motifs de la charte, et rien quand elles sont coupées", () => {
+2 -2
View File
@@ -101,8 +101,8 @@ test("chaque position du tutoriel est valide pour le moteur", async () => {
const s = board.sides[side];
return s.points.reduce((a, b) => a + b, 0) + s.bar + s.off;
};
assert.equal(count("player"), 15, `${name} : pions ivoire`);
assert.equal(count("computer"), 15, `${name} : pions noyer`);
assert.equal(count("player"), 15, `${name} : pions blancs`);
assert.equal(count("computer"), 15, `${name} : pions noirs`);
}
});
+3 -3
View File
@@ -209,14 +209,14 @@ test("aide contextuelle : chaque question ouverte depuis la partie existe dans l
});
test("glossaire : nom anglais, renvois, recherche sans accents", () => {
const entry = parseGlossaryEntry(read("docs/glossaire/camp.md"));
const entry = parseGlossaryEntry(read("docs/glossaire/jan-interieur.md"));
assert.ok(entry !== null);
assert.equal(entry.english, "Home board");
assert.deepEqual(
entry.seeAlso.map((s) => s.name),
["sortie", "barre", "point"],
["jan-exterieur", "sortie", "barre", "point"],
);
assert.ok(matchesSearch(entry, "camp"));
assert.ok(matchesSearch(entry, "jan interieur"));
assert.ok(matchesSearch(entry, "HOME"));
assert.ok(matchesSearch(entry, "fleches sortir"));
assert.ok(!matchesSearch(entry, "videau"));
+2 -1
View File
@@ -71,7 +71,8 @@ au noyer. Après comparaison sur le canevas (rangée « Retours des premiers
joueurs »), Pierre retient le blanc et le noir, avec un contour.
- Pions du joueur blancs (`#FAFAF7`), contour et filet gris foncé
(`#6E6E69`) ; pions de l'ordinateur noirs (`#1C1C1C`), contour et filet gris
(`#55554F` en thème clair, pour 3:1 sur les flèches en chêne ; `#6E6E69` en
sombre) ; pions de l'ordinateur noirs (`#1C1C1C`), contour et filet gris
clair (`#B5B5B0`), dans les deux thèmes. Dés et videau suivent les pions.
- Le contour assure la lisibilité partout : pions noirs sur la barre (6,8:1
en thème clair, 8,5:1 en sombre), pions blancs sur le fond clair (3,8:1).
+3 -1
View File
@@ -40,7 +40,6 @@ exportée. `make test` vérifie le lien dans les deux sens : chaque fiche avec
| [Barre](barre.md) | Bar |
| [Blot](blot.md) | Blot |
| [Branche](branche.md) | Branch |
| [Camp](camp.md) | Home board |
| [Chance](chance.md) | Luck |
| [Compte de points](compte-de-points.md) | Pip count |
| [Conseil du maître](conseil-du-maitre.md) | Advice |
@@ -54,11 +53,14 @@ exportée. `make test` vérifie le lien dans les deux sens : chaque fiche avec
| [Gammon](gammon.md) | Gammon |
| [Identifiant de match](identifiant-de-match.md) | Match ID |
| [Identifiant de position](identifiant-de-position.md) | Position ID |
| [Jan extérieur](jan-exterieur.md) | Outer board |
| [Jan intérieur](jan-interieur.md) | Home board |
| [Jet](jet.md) | Roll |
| [Lien de position](lien-de-position.md) | Position link |
| [Match](match.md) | Match |
| [Moteur](moteur.md) | Engine |
| [Niveau de jeu](niveau-de-jeu.md) | Level |
| [Notation des coups](notation-des-coups.md) | Move notation |
| [Partie](partie.md) | Game |
| [Partie enregistrée](partie-enregistree.md) | Saved game |
| [Passer](passer.md) | Drop |
-12
View File
@@ -1,12 +0,0 @@
---
term: Camp
english: Home board
---
# Camp
**En bref** : les six dernières flèches d'un joueur, avant sa sortie : il y rassemble ses pions pour les sortir, et un pion adverse frappé doit y rentrer.
Votre camp est en bas à droite (vos flèches 1 à 6) ; celui de l'ordinateur,
en haut à droite (vos flèches 19 à 24), où rentrent vos pions frappés.
Voir aussi : [Sortie](sortie.md), [Barre](barre.md), [Point](point.md)
+15
View File
@@ -0,0 +1,15 @@
---
term: Jan extérieur
english: Outer board
code: OuterBoard
---
# Jan extérieur
**En bref** : les six flèches qui précèdent le jan intérieur d'un joueur : ses pions y passent avant d'y entrer.
Votre jan extérieur est en bas à gauche (vos flèches 7 à 12) ; celui de
l'ordinateur, en haut à gauche (vos flèches 13 à 18). Vos pions partent du jan
intérieur de l'ordinateur, traversent les deux jans extérieurs, puis entrent
dans votre jan intérieur.
Voir aussi : [Jan intérieur](jan-interieur.md), [Point](point.md)
+16
View File
@@ -0,0 +1,16 @@
---
term: Jan intérieur
english: Home board
code: HomeBoard
---
# Jan intérieur
**En bref** : les six dernières flèches d'un joueur avant la sortie : il y rassemble ses quinze pions pour les sortir, et les pions adverses frappés y rentrent.
Le plateau se partage en quatre jans de six flèches. Votre jan intérieur est
en bas à droite (vos flèches 1 à 6) ; celui de l'ordinateur, en haut à droite
(vos flèches 19 à 24) : c'est là que rentrent vos pions frappés. Un pion
adverse resté dans votre jan intérieur à la fin de la partie en fait un
backgammon.
Voir aussi : [Jan extérieur](jan-exterieur.md), [Sortie](sortie.md), [Barre](barre.md), [Point](point.md)
+27
View File
@@ -0,0 +1,27 @@
---
term: Notation des coups
english: Move notation
code: MoveNotation
---
# Notation des coups
**En bref** : un coup s'écrit case de départ/case d'arrivée pour chaque pion, comme 13/7 ; une étoile signale un pion adverse frappé (24/22*), « off » un pion sorti (6/off), « bar » un pion qui rentre depuis la barre (bar/22), et (2) un déplacement fait deux fois avec un double (8/4(2)).
Ustagammon écrit les coups comme GNU Backgammon, le moteur qui les calcule.
Chaque joueur numérote les cases de son propre point de vue, de 1 (la case la
plus proche de sa sortie) à 24 :
- `13/7` : un pion part de la case 13 et arrive sur la case 7. Un coup de deux
dés compte en général deux déplacements, séparés par une espace :
`13/7 8/7`.
- `24/22*` : l'étoile dit que le pion arrivé sur la 22 y a frappé un pion
seul de l'adversaire, qui part sur la barre.
- `6/off` : le pion de la case 6 sort du plateau.
- `bar/22` : un pion qui était sur la barre rentre sur la case 22.
- `8/4(2)` : le même déplacement, fait deux fois. Avec un double, on joue
quatre fois le dé : `8/4(2) 6/2(2)` déplace deux pions de 8 à 4 et deux de
6 à 2.
- `13/1*` : un seul pion qui avance avec ses deux dés s'écrit d'un trait,
de sa case de départ à sa case d'arrivée.
Voir aussi : [Coup](coup.md), [Demi-coup](demi-coup.md), [Barre](barre.md), [Sortie](sortie.md), [Blot](blot.md)
+2 -2
View File
@@ -38,8 +38,8 @@ Ouvert depuis le menu, l'accueil et la fin de partie. Une seule page, sans
3. **Pendant la partie** : interrupteur « Conseil du maître », sous-titre
« Une ligne après chacun de vos coups ».
4. **Barre d'action collée en bas** : un seul bouton principal, qui dit ce
qu'il lance (« Commencer la partie » ou « Commencer le match en 5
points »), et la mention « Vos choix sont gardés pour la prochaine fois. ».
qu'il lance (« Commencer la partie » ou « Commencer le match » ; choix
de Pierre du 2026-11-11, la longueur se lit déjà sur le bouton choisi), et la mention « Vos choix sont gardés pour la prochaine fois. ».
Par défaut : partie libre, Intermédiaire, conseil activé. Fermer (croix en
haut à gauche, ou retour du téléphone) ne change rien à la partie en cours.
+3 -2
View File
@@ -8,8 +8,9 @@ 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.
- [ ] Numéros des flèches à l'extérieur du plateau, sur le cadre (bande haute et bande basse), en portrait comme en paysage ; jamais dans le fond du plateau entre les deux rangées.
- [ ] Pions de l'ordinateur lisibles partout : contour et filet `checker-computer-edge` (gris clair) visibles sur la barre, sur les flèches sombres et en thème sombre.
- [ ] Numéros des flèches à l'extérieur du plateau, sur le cadre (bande haute et bande basse), en portrait comme en paysage ; jamais dans le fond du plateau entre les deux rangées. (Vérifié par `tests/browser/retours-joueurs.mjs`.)
- [ ] Pions du joueur lisibles partout : en thème clair, contour `checker-player-edge` à 3:1 au moins sur les flèches en chêne et sur le fond. Règle automatique : `checkerContrastProblems` de `tests/browser/recette.mjs`.
- [ ] Pions de l'ordinateur lisibles partout : contour et filet `checker-computer-edge` (gris clair) visibles sur la barre, sur les flèches sombres et en thème sombre. Règle automatique : là où sa couleur ne se détache pas de son fond (moins de 3:1), son contour s'en détache à 3:1 au moins (`checkerContrasts` de `tests/browser/recette.mjs`).
- [ ] 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).
+2 -2
View File
@@ -224,10 +224,10 @@
{
"name": "checker-player-edge",
"value": {
"light": "#6E6E69",
"light": "#55554F",
"dark": "#6E6E69"
},
"usage": "Contour et filet des pions blancs : gris foncé, pour qu'ils se détachent du fond clair du plateau."
"usage": "Contour des pions blancs. Thème clair : #55554F, pour 3:1 au moins sur les flèches en chêne (3,5:1) et le fond (5,5:1). Thème sombre : le pion blanc se détache déjà par sa couleur (plus de 5:1)."
},
{
"name": "checker-computer",
+3 -1
View File
@@ -4,7 +4,9 @@ Fonctionnalité: Choisir sa partie et jouer un match
L'écran « Nouvelle partie » s'ouvre depuis le menu, l'accueil et, à la
fin d'une partie, par « Changer les réglages ». Vous y choisissez une partie libre ou un match en 3, 5, 7
ou 11 points, le niveau de l'ordinateur, et si le maître commente vos
coups. Vos choix sont gardés pour la prochaine fois.
coups. Vos choix sont gardés pour la prochaine fois. « Commencer la
partie » (ou « Commencer le match ») lance aussitôt la partie, sur le
plateau, même juste après le bilan d'une partie finie.
Scénario: Comment choisir le niveau de l'ordinateur ?
Six niveaux, du Débutant, qui laisse passer des occasions, au Champion,
+1 -1
View File
@@ -144,7 +144,7 @@ Fonctionnalité: Jouer une partie contre l'ordinateur
@position:BQAACAIAAAAAAA
Scénario: Sortir ses pions dans l'ordre de son choix
Une fois tous vos pions dans les six dernières flèches, vous les
Une fois tous vos pions dans votre jan intérieur (flèches 1 à 6), vous les
sortez dans l'ordre que vous voulez. Avec 6-1, un pion sur la flèche 6
et un sur la flèche 1 : sortez l'un puis l'autre, ou l'inverse. Si vous
ne sortez que le pion de la 6, « Jouer ce coup » apparaît déjà, car ce
+2 -1
View File
@@ -51,7 +51,8 @@ Le texte de la fin du tutoriel.
position (par défaut, vous) ;
- `jet` et `coup` : sur un écran d'explication, le coup illustré, qui se
joue tout seul (notation de gnubg) ;
- `chemin: oui` : le sens du jeu, dessiné en pointillés sur le plateau ;
- `chemin: oui` : le sens du jeu, deux flèches circulaires sur le plateau
(claire pour vos pions, sombre pour ceux de l'ordinateur) ;
- `attendu` (une ligne par coup accepté) : sur un écran « à vous », les
coups justes, en notation de gnubg, tels que le moteur les écrit ;
- `réponse` : `prendre` ou `passer`, pour un écran « à vous » où
+11 -9
View File
@@ -1,13 +1,15 @@
# Les règles du backgammon
Tutoriel d'Ustagammon, en huit étapes. Texte sous licence CC BY-SA 4.0,
validé par Pierre le 9 novembre 2026. Format : voir README.md.
validé par Pierre le 9 novembre 2026 ; pions blancs et noirs, flèches
circulaires et jans repris de la charte le 11 novembre 2026
(docs/identite/charte/accueil-tutoriel-aide.md). Format : voir README.md.
## 1. Le but du jeu
- position: 4HPwATDgc/ABMA
Vous avez quinze [pions](pion.md) ivoire, l'ordinateur quinze pions noyer. Chacun fait faire le tour du [plateau](plateau.md) à ses pions, puis les [sort](sortie.md).
Vous avez quinze [pions](pion.md) blancs, l'ordinateur quinze pions noirs. Chacun fait faire le tour du [plateau](plateau.md) à ses pions, puis les [sort](sortie.md).
Le premier qui a sorti tous les siens gagne la [partie](partie.md).
@@ -16,9 +18,9 @@ Le premier qui a sorti tous les siens gagne la [partie](partie.md).
- position: 4HPwATDgc/ABMA
- chemin: oui
Vos pions ivoire font le tour du plateau dans le sens des pointillés : ils partent d'en haut à droite, passent à gauche, puis reviennent en bas jusqu'aux **six dernières flèches**, en bas à droite. C'est là que vous les rassemblerez avant de les sortir.
Vos pions suivent la **flèche claire** : ils partent d'en haut à droite, passent à gauche, puis reviennent en bas jusqu'à votre [jan intérieur](jan-interieur.md), les flèches 1 à 6. C'est là que vous les rassemblez avant de les sortir.
Les pions noyer de l'ordinateur font le même chemin, en sens inverse.
Les pions de l'ordinateur suivent la **flèche sombre**, en sens inverse, jusqu'à son jan intérieur, les flèches 19 à 24.
## 3. Les dés et les doubles
@@ -60,10 +62,10 @@ Une flèche où l'adversaire a deux pions ou plus est fermée : vous ne pouvez p
- attendu: 24/23 13/7*
- attendu: 24/18 8/7*
- attendu: 8/7* 8/2
- juste: Touché : le pion noyer part sur la barre, il devra refaire tout le chemin.
- juste: Touché : le pion noir part sur la barre, il devra refaire tout le chemin.
- refus: Ce coup ne frappe pas le pion seul de la flèche 7. Un pion qui s'y pose le frappe : celui de la flèche 13 avec le 6, ou celui de la flèche 8 avec le 1.
Vous avez 6 et 1. Le pion noyer de la flèche 7 est seul : frappez-le.
Vous avez 6 et 1. Le pion noir de la flèche 7 est seul : frappez-le.
## 5. Rentrer depuis la barre
@@ -71,7 +73,7 @@ Vous avez 6 et 1. Le pion noyer de la flèche 7 est seul : frappez-le.
- jet: 4-3
- coup: bar/22 13/9
Votre pion frappé attend sur la barre, au milieu. Avant de jouer quoi que ce soit d'autre, il doit rentrer dans le [camp](camp.md) adverse, en haut à droite.
Votre pion frappé attend sur la barre, au milieu. Avant de jouer quoi que ce soit d'autre, il doit rentrer dans le jan intérieur de l'ordinateur, en haut à droite.
Chaque dé indique une flèche d'entrée : avec 3 et 4, la 22 ou la 21. Si les deux flèches sont fermées, votre tour passe.
@@ -81,7 +83,7 @@ Chaque dé indique une flèche d'entrée : avec 3 et 4, la 22 ou la 21. Si les d
- jet: 5-2
- coup: 5/off 2/off
Quand vos quinze pions sont dans les six dernières flèches, vous pouvez commencer à les sortir : un 6 sort un pion de la flèche 6, un 1 un pion de la flèche 1.
Quand vos quinze pions sont dans votre jan intérieur (flèches 1 à 6), vous pouvez commencer à les sortir : un 6 sort un pion de la flèche 6, un 1 un pion de la flèche 1.
Touchez le pion, puis la sortie à droite.
@@ -101,7 +103,7 @@ Vous avez 6 et 3 : sortez deux pions.
- jet: 2-1
- coup: 2/off 1/off
Une partie gagnée vaut 1 point. Si l'adversaire n'a sorti aucun pion, c'est un [gammon](gammon.md) : 2 points ; s'il lui reste en plus un pion sur la barre ou dans votre camp, c'est un [backgammon](backgammon.md) : 3 points. En partie libre, gammon et backgammon ne comptent que si le videau a été doublé : c'est la [règle de Jacoby](regle-de-jacoby.md).
Une partie gagnée vaut 1 point. Si l'adversaire n'a sorti aucun pion, c'est un [gammon](gammon.md) : 2 points ; s'il lui reste en plus un pion sur la barre ou dans votre jan intérieur, c'est un [backgammon](backgammon.md) : 3 points. En partie libre, gammon et backgammon ne comptent que si le videau a été doublé : c'est la [règle de Jacoby](regle-de-jacoby.md).
## 8. Le videau
+27 -4
View File
@@ -12,10 +12,16 @@
# build/browser-shots/maitre/. Le bilan de fin de partie et l'écran
# d'analyse (tests/browser/bilan.mjs), captures dans
# build/browser-shots/bilan/. « Demander à une IA » (tests/browser/prompts.mjs),
# captures dans build/browser-shots/prompts/.
# captures dans build/browser-shots/prompts/. « Nouvelle partie » après une
# partie finie et son bilan, par chaque entrée
# (tests/browser/nouvelle-partie.mjs), captures dans
# build/browser-shots/nouvelle-partie/. Les retours des premiers joueurs
# (tests/browser/retours-joueurs.mjs : pions sur la barre, numéros sur le
# cadre, flèches du tutoriel, en thème clair et sombre), captures dans
# build/browser-shots/retours-joueurs/.
#
# BROWSERS=chromium et SCRIPTS=accueil (ou play, match, maitre, bilan,
# prompts) restreignent le test.
# prompts, nouvelle-partie, retours-joueurs) restreignent le test.
#
# Outils : l'image de Playwright (navigateurs) et le paquet playwright,
# installé une fois par npm dans build/browser-tools/ (réseau nécessaire la
@@ -28,7 +34,7 @@ cd "$(dirname "$0")/.."
image="${PLAYWRIGHT_IMAGE:?lancer via make test-browser}"
browsers="${BROWSERS:-chromium firefox}"
# Les scripts à lancer (tests/browser/<nom>.mjs), tous par défaut.
scripts="${SCRIPTS:-play accueil match maitre bilan prompts}"
scripts="${SCRIPTS:-play accueil match maitre bilan prompts nouvelle-partie retours-joueurs}"
unset MAKEFLAGS MFLAGS MAKELEVEL
make -s package >/dev/null
@@ -66,7 +72,8 @@ update_port="$(docker port "$update_container" 80/tcp | head -n1 | sed 's/.*://'
rm -rf build/browser-shots
mkdir -p build/browser-shots
cp tests/browser/play.mjs tests/browser/accueil.mjs tests/browser/match.mjs tests/browser/recette.mjs \
tests/browser/maitre.mjs tests/browser/bilan.mjs tests/browser/prompts.mjs "$tools/"
tests/browser/maitre.mjs tests/browser/bilan.mjs tests/browser/prompts.mjs tests/browser/nouvelle-partie.mjs \
tests/browser/retours-joueurs.mjs "$tools/"
status=0
for browser in $browsers; do
# Réseau de l'hôte : le site est sur 127.0.0.1. Le service worker
@@ -113,5 +120,21 @@ for browser in $browsers; do
-v "$PWD/$tools:/tools" -v "$PWD/build/browser-shots:/shots" -w /tools "$image" \
node prompts.mjs "http://localhost:$port/" "$browser" /shots || status=1
fi
if [[ " $scripts " == *" nouvelle-partie "* ]]; then
# « Nouvelle partie » après une partie finie et son bilan : la
# nouvelle partie tout de suite ; captures dans
# build/browser-shots/nouvelle-partie/.
docker run --rm --init --ipc=host --network host --user "$(id -u):$(id -g)" -e HOME=/tmp \
-v "$PWD/$tools:/tools" -v "$PWD/build/browser-shots:/shots" -w /tools "$image" \
node nouvelle-partie.mjs "http://localhost:$port/" "$browser" /shots || status=1
fi
if [[ " $scripts " == *" retours-joueurs "* ]]; then
# Retours des premiers joueurs : pions sur la barre, numéros sur le
# cadre, flèches du tutoriel ; captures dans
# build/browser-shots/retours-joueurs/.
docker run --rm --init --ipc=host --network host --user "$(id -u):$(id -g)" -e HOME=/tmp \
-v "$PWD/$tools:/tools" -v "$PWD/build/browser-shots:/shots" -w /tools "$image" \
node retours-joueurs.mjs "http://localhost:$port/" "$browser" /shots || status=1
fi
done
exit "$status"
+6 -7
View File
@@ -274,17 +274,16 @@ async function playTouches(page, touches) {
await tutorialReady(page, hash);
}
if (step === 2) {
check(await page.locator("#tutorial-board .tutorial-path").count() === 1,
"étape 2 : pas de chemin en pointillés");
// Sous les pions et sous les numéros des flèches.
check(await page.locator("#tutorial-board .tutorial-path .direction-line").count() === 2,
"étape 2 : pas les deux flèches du sens du jeu");
// Sous les pions (détail : retours-joueurs.mjs).
const order = await page.evaluate(() => {
const children = [...document.getElementById("tutorial-board").children];
const at = (selector) => children.findIndex((c) => c.matches(selector));
const numbers = children.filter((c) => c.matches(".point-number")).map((c) => children.indexOf(c));
return { path: at(".tutorial-path"), pieces: at("g.pieces"), firstNumber: Math.min(...numbers) };
return { path: at(".tutorial-path"), pieces: at("g.pieces") };
});
check(order.path >= 0 && order.path < order.pieces && order.path < order.firstNumber,
`étape 2 : le chemin passe au-dessus des pions ou des numéros ${JSON.stringify(order)}`);
check(order.path >= 0 && order.path < order.pieces,
`étape 2 : les flèches passent au-dessus des pions ${JSON.stringify(order)}`);
}
await tutorialCapture(page, `tutoriel-${step}`);
screens++;
+9
View File
@@ -184,6 +184,15 @@ await until("feuille du maître", () => document.getElementById("explain-mine")
await page.click("#explain-mine");
const sheetLegend = await page.textContent("#explain-legend");
check(sheetLegend.includes(" 6/off,"), `feuille du maître : ${sheetLegend}`);
// Le coup y est un lien vers la fiche « Notation des coups ».
const notationLink = await page.evaluate(() => {
const a = document.querySelector("#explain-legend a.notation");
return a === null ? null : { text: a.textContent, href: a.getAttribute("href") };
});
check(
notationLink?.text === "6/off" && notationLink.href === "#/glossaire/notation-des-coups",
`feuille du maître, lien de la notation : ${JSON.stringify(notationLink)}`,
);
await page.click("#explain-done");
await until("feuille fermée", () => document.getElementById("explain-veil").hidden);
// Le joueur passe.
+2 -2
View File
@@ -194,7 +194,7 @@ await page.click("#new-game-match");
await page.click("#new-game-length-3");
await page.click("#new-game-level-beginner");
s = await screen();
check(s.match === "true" && s.lengthsShown && !s.jacobyShown && s.start === "Commencer le match en 3 points",
check(s.match === "true" && s.lengthsShown && !s.jacobyShown && s.start === "Commencer le match",
`match en 3 points : ${JSON.stringify(s)}`);
check(s.level === "beginner" && s.reached === 1 && s.name === "Débutant", `Débutant : ${JSON.stringify(s)}`);
check((await page.getAttribute("#new-game-crawford a", "href")) === "#/glossaire/regle-de-crawford",
@@ -254,7 +254,7 @@ await page.click("#menu-new-game");
await until("écran « Nouvelle partie »", () => location.hash === "#/nouvelle-partie" &&
!document.getElementById("new-game").hidden);
s = await screen();
check(s.match === "true" && s.level === "beginner" && s.start === "Commencer le match en 3 points",
check(s.match === "true" && s.level === "beginner" && s.start === "Commencer le match",
`choix retrouvés : ${JSON.stringify(s)}`);
await page.click("#new-game-start");
await until("match commencé", () => location.hash === "#/" && !document.body.classList.contains("busy"));
+321
View File
@@ -0,0 +1,321 @@
// nouvelle-partie.mjs -- après une partie finie et son bilan, « Nouvelle
// partie » mène tout droit à la nouvelle partie, sur le plateau, avec les
// réglages choisis, par chaque entrée vers #/nouvelle-partie : l'accueil
// (l'application rouverte), le menu, « Changer les réglages » du bilan.
// Dans un vrai navigateur sans écran (Playwright), sur le site servi par
// l'image de production.
//
// Copyright (C) 2026 les auteurs d'Ustagammon.
// Licence : GPLv3 ou ultérieure (voir LICENSE).
//
// Usage : node nouvelle-partie.mjs <adresse du site> <chromium|firefox> <dossier des captures>
// Lancé par tests/browser.sh. Défaut signalé par un joueur : « tu fais
// nouvelle partie […] tu te retrouves sur le résultat du match précédent et
// tu dois cliquer à nouveau sur nouvelle partie ». Chaque partie finie est
// une fin de course courte, partie d'un lien de position avec des dés
// imposés, comme dans bilan.mjs. Vérifie aussi le libellé du bouton
// (« Commencer la partie », « Commencer le match ») et que le coup de
// l'ordinateur, sur la ligne d'information, mène à la fiche « Notation des
// coups ». Captures (Chromium) dans <dossier des captures>/nouvelle-partie/,
// en 412×915 et 915×412.
import { mkdirSync } from "node:fs";
import { chromium, firefox } from "playwright";
import { hiddenUnderActionBar } from "./recette.mjs";
const [base, browserName, shots] = process.argv.slice(2);
const browserType = { chromium, firefox }[browserName];
if (!base || !browserType || !shots) {
console.error("usage : node nouvelle-partie.mjs <adresse> <chromium|firefox> <dossier des captures>");
process.exit(2);
}
const full = browserName === "chromium";
const dir = `${shots}/nouvelle-partie`;
mkdirSync(dir, { recursive: true });
const PORTRAIT = { width: 412, height: 915 };
const LANDSCAPE = { width: 915, height: 412 };
// Le joueur au trait : un pion sur 6, un sur 1 ; l'ordinateur : un sur 1,
// un sur 2. Le joueur joue 6/5/off, l'ordinateur double, le joueur passe.
const BEAROFF = "BQAACAIAAAAAAA";
const problems = [];
const log = (text) => console.log(`[${browserName}] ${text}`);
const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
let captures = 0;
function check(condition, message) {
if (!condition) {
throw new Error(message);
}
}
const browser = await browserType.launch();
const context = await browser.newContext({
viewport: PORTRAIT,
deviceScaleFactor: 1,
locale: "fr-FR",
reducedMotion: "reduce",
});
await context.addInitScript(() => {
// Les dés imposés d'abord (un dé par valeur), puis une graine fixe.
window.__dice = [];
let state = 7;
Math.random = () => {
const die = window.__dice.shift();
if (die !== undefined) {
return (die - 0.5) / 6;
}
state = (state * 1103515245 + 12345) % 2147483648;
return state / 2147483648;
};
window.__csp = [];
document.addEventListener("securitypolicyviolation", (e) =>
window.__csp.push(`${e.effectiveDirective} ${e.blockedURI}`),
);
});
const page = await context.newPage();
page.on("pageerror", (error) => problems.push(`erreur de la page : ${error.message}`));
page.on("console", (message) => {
if (message.type() === "error") {
problems.push(`console : ${message.text()}`);
}
});
/** Attend une condition dans la page (sans page.waitForFunction, qui passe
* par eval, interdit par la politique de sécurité du site). */
async function until(what, fn, arg, ms = 120_000) {
for (let waited = 0; waited < ms; waited += 100) {
if (await page.evaluate(fn, arg)) {
return;
}
await sleep(100);
}
await page.screenshot({ path: `${dir}/${browserName}-bloque.png` }).catch(() => {});
throw new Error(`attente trop longue : ${what} (adresse ${await page.evaluate(() => location.hash)})`);
}
const idle = () => until("écran libre", () => !document.body.classList.contains("busy"));
/** Une capture en portrait et en paysage (Chromium seulement), après la
* règle de la recette : rien d'interactif sous une barre d'action. */
async function capture(name) {
if (!full) {
return;
}
for (const size of [PORTRAIT, LANDSCAPE]) {
await page.setViewportSize(size);
await sleep(300);
const hidden = await hiddenUnderActionBar(page);
check(
hidden.length === 0,
`${name} ${size.width}x${size.height} : caché sous la barre d'action : ${hidden.join(", ")}`,
);
await page.screenshot({ path: `${dir}/${name}-${size.width}x${size.height}.png` });
captures++;
}
await page.setViewportSize(PORTRAIT);
await sleep(300);
}
/** Une partie finie et son bilan à l'écran : une fin de course depuis un
* lien de position, 6/5/off, puis le double de l'ordinateur passé. Renvoie
* l'identifiant de la partie. */
async function finishedGameWithSummary() {
await page.goto(`${base}#/position/${encodeURIComponent(BEAROFF)}`);
await until("position lue", () => {
const play = document.getElementById("position-play");
return !play.hidden && !play.disabled;
});
await page.click("#position-play");
await until(
"partie commencée",
() =>
location.hash === "#/" &&
!document.body.classList.contains("busy") &&
!document.getElementById("roll").hidden,
);
await page.evaluate(() => window.__dice.push(6, 1));
await page.click("#roll");
await idle();
for (const [from, to] of [
["p6", "p5"],
["p5", "off-player"],
]) {
await page.click(`#board .hit[data-place="${from}"]`);
await idle();
const land = page.locator(`#board .hit.can-land[data-place="${to}"]`);
if ((await land.count()) > 0) {
await land.click();
await idle();
}
}
await page.click("#confirm");
await until("double de l'ordinateur", () => !document.getElementById("drop").hidden);
await page.click("#drop");
await until(
"bilan de la partie finie",
() =>
/^#\/parties\/[a-z0-9-]+\/bilan$/.test(location.hash) &&
document.getElementById("summary")?.dataset.ready === "true",
);
return page.evaluate(() => location.hash.split("/")[2]);
}
/** Choisit les réglages sur l'écran « Nouvelle partie », vérifie le libellé
* du bouton, puis commence. */
async function chooseAndStart(choice, shot) {
await until(
"écran « Nouvelle partie »",
() =>
location.hash === "#/nouvelle-partie" &&
!document.getElementById("new-game").hidden &&
!document.getElementById("new-game-start").disabled,
);
await page.click(choice.match ? "#new-game-match" : "#new-game-free");
if (choice.match) {
await page.click(`#new-game-length-${choice.length}`);
}
await page.click(`#new-game-level-${choice.level}`);
const label = await page.textContent("#new-game-start");
const expected = choice.match ? "Commencer le match" : "Commencer la partie";
check(label === expected, `bouton : « ${label} », attendu « ${expected} »`);
if (shot) {
await capture("1-nouvelle-partie");
}
await page.click("#new-game-start");
}
/** La nouvelle partie est à l'écran, sur le plateau, avec les réglages
* choisis ; ni le bilan ni le panneau de fin de l'ancienne partie, même un
* peu plus tard. */
async function checkNewGame(entry, oldId, choice) {
await until(
`${entry} : partie commencée`,
() => location.hash === "#/" && !document.body.classList.contains("busy"),
);
// Le défaut apparaissait juste après : l'adresse passait au bilan de
// l'ancienne partie. On regarde pendant deux secondes.
for (let waited = 0; waited < 2000; waited += 100) {
const s = await page.evaluate(() => ({
hash: location.hash,
summary: !document.getElementById("summary-veil").hidden,
panel: !document.getElementById("panel-veil").hidden,
board: !document.getElementById("game").hidden,
newGame: !document.getElementById("new-game").hidden,
}));
check(
s.hash === "#/" && !s.summary && !s.panel && s.board && !s.newGame,
`${entry} : la nouvelle partie n'est pas à l'écran (ancienne partie ${oldId}) : ${JSON.stringify(s)}`,
);
await sleep(100);
}
await idle();
const shown = await page.evaluate(() => ({
line: document.getElementById("match-line").textContent,
lineShown: !document.getElementById("match-line").hidden,
level: JSON.parse(localStorage.getItem("ustagammon.settings") ?? "{}").level,
over: document.getElementById("again").hidden === false,
}));
check(!shown.over, `${entry} : la partie à l'écran est finie`);
check(shown.level === choice.level, `${entry} : niveau ${shown.level}`);
if (choice.match) {
check(
shown.lineShown && shown.line === `Match en ${choice.length} points`,
`${entry} : ligne du match « ${shown.line} »`,
);
} else {
check(!shown.lineShown, `${entry} : un match au lieu d'une partie libre`);
}
log(`${entry} : nouvelle partie directe (${choice.match ? `match en ${choice.length}` : "partie libre"}, ${choice.level})`);
}
// --------------------------- 1. L'application rouverte, puis l'accueil
let oldId = await finishedGameWithSummary();
// L'application rouverte : sans adresse, elle ouvre l'accueil.
await page.goto(base);
await until(
"accueil",
() =>
location.hash === "#/accueil" &&
!document.getElementById("home-new").hidden &&
!document.getElementById("home-new").disabled,
);
await page.click("#home-new");
let choice = { match: true, length: 3, level: "beginner" };
await chooseAndStart(choice, true);
await checkNewGame("accueil", oldId, choice);
await capture("2-partie-demarree");
// Le coup de l'ordinateur, sur la ligne d'information, mène à la fiche
// « Notation des coups ». On joue jusqu'à ce qu'il ait joué un coup.
for (let actions = 0; ; actions++) {
check(actions < 200, "l'ordinateur ne joue pas de coup");
const link = await page.evaluate(() => document.querySelector("#info a.notation")?.href ?? null);
if (link !== null) {
check(link.endsWith("#/glossaire/notation-des-coups"), `lien de la notation : ${link}`);
break;
}
const what = await page.evaluate(() => {
const usable = (id) => {
const b = document.getElementById(id);
return !b.hidden && !b.disabled;
};
for (const id of ["take", "skip", "confirm", "roll"]) {
if (usable(id)) {
return `#${id}`;
}
}
if (document.querySelector("#board .hit.can-land")) {
return "#board .hit.can-land";
}
return document.querySelector("#board .hit.can-move") ? "#board .hit.can-move" : null;
});
if (what === null) {
await sleep(100);
continue;
}
await page.locator(what).first().click();
await idle();
}
await page.click("#info a.notation");
await until(
"fiche « Notation des coups »",
() =>
location.hash === "#/glossaire/notation-des-coups" &&
document.getElementById("glossaire-notation-des-coups") !== null,
);
await page.goBack();
await until("retour à la partie", () => location.hash === "#/");
log("ligne de l'ordinateur : la notation mène à sa fiche");
// --------------------------------- 2. L'application rouverte sur le menu
oldId = await finishedGameWithSummary();
await page.goto(`${base}#/menu`);
await until("menu", () => !document.getElementById("menu-veil").hidden);
await page.click("#menu-new-game");
choice = { match: false, level: "amateur" };
await chooseAndStart(choice, false);
await checkNewGame("menu", oldId, choice);
// ------------------------------- 3. « Changer les réglages » du bilan
oldId = await finishedGameWithSummary();
await page.click("#summary-settings");
choice = { match: true, length: 5, level: "intermediate" };
await chooseAndStart(choice, false);
await checkNewGame("bilan, « Changer les réglages »", oldId, choice);
const csp = await page.evaluate(() => window.__csp);
for (const violation of csp) {
problems.push(`politique de sécurité : ${violation}`);
}
await browser.close();
if (problems.length > 0) {
for (const problem of problems) {
console.error(`[${browserName}] ${problem}`);
}
process.exit(1);
}
log(`nouvelle partie : tout est conforme (${captures} captures)`);
+103
View File
@@ -167,3 +167,106 @@ export function tutorialWidthProblems(views) {
}
return problems;
}
/**
* Les contrastes des pions dessinés sur les plateaux visibles de la page
* (svg.board), mesurés sur le fond qui porte chacun : la barre, une flèche,
* le fond du plateau ou la sortie, trouvé au centre du pion (le dernier
* dessiné qui le contient). Pour chaque pion : son camp, ce fond, le
* contraste de son contour (stroke) et celui de sa couleur (fill) avec ce
* fond. Les pions entourés de brique (jouable, sélectionné) sont laissés :
* leur contour est celui du pion jouable, pas celui de son camp.
*/
export async function checkerContrasts(target) {
return target.evaluate(() => {
const rgb = (color) => (color.match(/[\d.]+/g) ?? []).slice(0, 3).map(Number);
const luminance = (color) => {
const [r, g, b] = rgb(color).map((v) => {
const c = v / 255;
return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
});
return 0.2126 * r + 0.7152 * g + 0.0722 * b;
};
const ratio = (a, b) => {
const [dark, light] = [luminance(a), luminance(b)].sort((x, y) => x - y);
return (light + 0.05) / (dark + 0.05);
};
const BACKGROUNDS = [
["board-bar", "barre"],
["board-tray", "sortie"],
["point-a", "flèche impaire"],
["point-b", "flèche paire"],
["board-bed", "fond"],
];
const selector = BACKGROUNDS.map(([c]) => `.${c}`).join(", ");
const found = [];
for (const svg of document.querySelectorAll("svg.board")) {
if (svg.closest("[hidden]") !== null || svg.getClientRects().length === 0) {
continue;
}
const shapes = [...svg.querySelectorAll(selector)].reverse();
for (const checker of svg.querySelectorAll("circle.checker")) {
if (checker.matches(".movable, .selected")) {
continue;
}
const point = svg.createSVGPoint();
point.x = Number(checker.getAttribute("cx"));
point.y = Number(checker.getAttribute("cy"));
const under = shapes.find((s) => s.isPointInFill(point));
if (under === undefined) {
continue;
}
const ground = getComputedStyle(under).fill;
const style = getComputedStyle(checker);
found.push({
board: svg.id || "plateau",
side: checker.matches(".checker-computer") ? "computer" : "player",
on: BACKGROUNDS.find(([c]) => under.classList.contains(c))[1],
edge: ratio(style.stroke, ground),
fill: ratio(style.fill, ground),
});
}
}
return found;
});
}
/**
* Règle de la recette (recette-ux.md, « Pions de l'ordinateur lisibles
* partout ») : là où un pion de l'ordinateur ne se détache pas de son fond
* par sa couleur (moins de 3:1 : sur la barre, les flèches sombres, le fond
* sombre), son contour s'en détache à 3:1 au moins (guide de marque :
* contours porteurs de sens à 3:1). Et (« Pions du joueur lisibles
* partout ») : en thème clair, le contour d'un pion du joueur atteint 3:1 sur
* les flèches en chêne et sur le fond. contrasts : le résultat de
* checkerContrasts ; theme : « light » ou « dark ». Renvoie la liste des
* écarts, décrits (vide si tout va bien).
*/
export function checkerContrastProblems(contrasts, theme) {
const problems = new Set();
for (const c of contrasts) {
if (c.side === "computer" && c.fill < 3 && c.edge < 3) {
problems.add(`pion de l'ordinateur sur ${c.on} (${c.board}) : contour à ${c.edge.toFixed(2)}:1`);
}
if (
c.side === "player" &&
theme === "light" &&
(c.on === "flèche paire" || c.on === "fond") &&
c.edge < 3
) {
problems.add(`pion du joueur sur ${c.on} (${c.board}) : contour à ${c.edge.toFixed(2)}:1`);
}
}
return [...problems];
}
/** Le plus faible contraste du contour, par camp et par fond, pour le
* journal du test (« ordinateur sur barre 6.79:1, … »). */
export function checkerContrastSummary(contrasts) {
const lowest = new Map();
for (const c of contrasts) {
const key = `${c.side === "computer" ? "ordinateur" : "joueur"} sur ${c.on}`;
lowest.set(key, Math.min(lowest.get(key) ?? Number.POSITIVE_INFINITY, c.edge));
}
return [...lowest].map(([key, edge]) => `${key} ${edge.toFixed(2)}:1`).join(", ");
}
+263
View File
@@ -0,0 +1,263 @@
// retours-joueurs.mjs -- les règles tirées des retours des premiers joueurs
// (ADR 0010, amendement du 2026-11-11 ; recette-ux.md), dans un vrai
// navigateur sans écran (Playwright), sur le site servi par l'image de
// production, en thème clair et en thème sombre :
//
// - pions de l'ordinateur lisibles sur la barre : un pion de chaque camp sur
// la barre, contraste du contour de chaque pion sur son fond
// (recette.mjs, checkerContrasts) ;
// - numéros des flèches sur le cadre, en portrait comme en paysage, de
// 12 px au moins ;
// - étape 2 du tutoriel : deux flèches circulaires, claire et sombre, sous
// les pions, jamais en brique.
//
// Copyright (C) 2026 les auteurs d'Ustagammon.
// Licence : GPLv3 ou ultérieure (voir LICENSE).
//
// Usage : node retours-joueurs.mjs <adresse du site> <chromium|firefox> <dossier des captures>
// Lancé par tests/browser.sh. Captures (Chromium) dans
// <dossier des captures>/retours-joueurs/, en 412×915 et 915×412.
import { mkdirSync, writeFileSync } from "node:fs";
import { chromium, firefox } from "playwright";
import {
checkerContrastProblems,
checkerContrastSummary,
checkerContrasts,
hiddenUnderActionBar,
} from "./recette.mjs";
const [base, browserName, shots] = process.argv.slice(2);
const browserType = { chromium, firefox }[browserName];
if (!base || !browserType || !shots) {
console.error("usage : node retours-joueurs.mjs <adresse> <chromium|firefox> <dossier des captures>");
process.exit(2);
}
const full = browserName === "chromium";
const dir = `${shots}/retours-joueurs`;
mkdirSync(dir, { recursive: true });
const SIZES = [
{ width: 412, height: 915 },
{ width: 915, height: 412 },
];
// Positions de gnubg, chacun vu de lui-même : la position de départ, et la
// même avec un pion de chaque camp de sa flèche 24 sur la barre.
const OPENING = "4HPwATDgc/ABMA";
const BOTH_ON_BAR = "4HPwAVDgc/ABUA";
const problems = [];
const log = (text) => console.log(`[${browserName}] ${text}`);
const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
const contrasts = { light: [], dark: [] };
let captures = 0;
function check(condition, message) {
if (!condition) {
throw new Error(message);
}
}
const browser = await browserType.launch();
/** Un contexte neuf dans un thème, tutoriel déjà vu (l'accueil ne propose
* plus le premier lancement). */
async function newPage(theme) {
const context = await browser.newContext({
viewport: SIZES[0],
deviceScaleFactor: 1,
locale: "fr-FR",
reducedMotion: "reduce",
});
await context.addInitScript((saved) => {
window.__csp = [];
document.addEventListener("securitypolicyviolation", (e) =>
window.__csp.push(`${e.effectiveDirective} ${e.blockedURI}`),
);
if (localStorage.getItem("ustagammon.settings") === null) {
localStorage.setItem("ustagammon.settings", saved);
}
}, JSON.stringify({ theme, tutorialSeen: 1 }));
const page = await context.newPage();
page.on("pageerror", (error) => problems.push(`erreur de la page : ${error.message}`));
page.on("console", (message) => {
if (message.type() === "error") {
problems.push(`console : ${message.text()}`);
}
});
return { context, page };
}
/** Attend une condition dans la page (sans page.waitForFunction, qui passe
* par eval, interdit par la politique de sécurité du site). */
async function until(page, what, fn, arg, ms = 60_000) {
for (let waited = 0; waited < ms; waited += 100) {
if (await page.evaluate(fn, arg).catch(() => false)) {
return;
}
await sleep(100);
}
await page.screenshot({ path: `${dir}/${browserName}-bloque.png` }).catch(() => {});
throw new Error(`attente trop longue : ${what}`);
}
/** Une partie à partir d'une position, joueur au trait, dés à lancer. */
async function startFrom(page, position) {
await page.goto(`${base}#/position/${encodeURIComponent(position)}`);
await until(page, "position lue", () => {
const play = document.getElementById("position-play");
return !play.hidden && !play.disabled;
});
await page.click("#position-play", { timeout: 15_000 }).catch(async (error) => {
await page.screenshot({ path: `${dir}/${browserName}-bloque.png` }).catch(() => {});
throw error;
});
await until(
page,
"partie commencée",
() =>
location.hash === "#/" &&
!document.body.classList.contains("busy") &&
!document.getElementById("roll").hidden,
);
}
/** Les numéros des flèches du plateau visible : tous sur le cadre (hors du
* fond du plateau) et de 12 px au moins à l'écran. Renvoie les écarts. */
async function numberProblems(page, selector) {
return page.evaluate((selector) => {
const svg = document.querySelector(selector);
const box = svg.getBoundingClientRect();
const vb = svg.viewBox.baseVal;
const scale = Math.min(box.width / vb.width, box.height / vb.height);
const bed = svg.querySelector(".board-bed").getBBox();
const found = [];
const numbers = [...svg.querySelectorAll(".point-number")];
if (numbers.length !== 24) {
found.push(`${numbers.length} numéros`);
}
for (const text of numbers) {
const b = text.getBBox();
const px = Number(text.getAttribute("font-size")) * scale;
if (b.y + b.height > bed.y + 0.5 && b.y < bed.y + bed.height - 0.5) {
found.push(`flèche ${text.textContent} dans le fond du plateau`);
}
if (px < 12) {
found.push(`flèche ${text.textContent} en ${px.toFixed(1)} px`);
}
}
return found;
}, selector);
}
/** Les règles sur l'écran courant, dans chaque taille, et sa capture
* (Chromium). */
async function checkScreen(page, theme, name, selector, settle = async () => {}) {
// Le bandeau « Reprendre l'ancienne » (10 s) n'est pas le sujet.
await until(page, "bandeau parti", () => document.getElementById("banner").hidden, null, 15_000);
for (const size of SIZES) {
await page.setViewportSize(size);
await sleep(300);
await settle();
const where = `${name} ${theme} ${size.width}x${size.height}`;
const numbers = await numberProblems(page, selector);
check(numbers.length === 0, `${where} : numéros : ${numbers.join(", ")}`);
const measured = await checkerContrasts(page);
check(measured.length > 0, `${where} : aucun pion mesuré`);
const low = checkerContrastProblems(measured, theme);
check(low.length === 0, `${where} : ${low.join(", ")}`);
contrasts[theme].push(...measured);
if (full) {
const hidden = await hiddenUnderActionBar(page);
check(hidden.length === 0, `${where} : caché sous la barre d'action : ${hidden.join(", ")}`);
await page.screenshot({ path: `${dir}/${name}-${theme}-${size.width}x${size.height}.png` });
captures++;
}
}
await page.setViewportSize(SIZES[0]);
await sleep(200);
}
for (const theme of ["light", "dark"]) {
const { context, page } = await newPage(theme);
// Un pion de chaque camp sur la barre.
await startFrom(page, BOTH_ON_BAR);
check(
(await page.evaluate(() => document.documentElement.dataset.theme)) === theme,
`thème ${theme} non appliqué`,
);
const onBar = await page.evaluate(() =>
["player", "computer"].map(
(side) => document.querySelectorAll(`#board [data-checker="bar-${side}"]`).length,
),
);
check(onBar[0] === 1 && onBar[1] === 1, `pions sur la barre : ${onBar}`);
await checkScreen(page, theme, "barre", "#board");
const bar = contrasts[theme].filter((c) => c.on === "barre" && c.side === "computer");
check(bar.length > 0, `${theme} : pion de l'ordinateur sur la barre non mesuré`);
// La position de départ : les numéros sur le cadre, en portrait aussi.
await startFrom(page, OPENING);
await checkScreen(page, theme, "numeros-sur-le-cadre", "#board");
// L'étape 2 du tutoriel : deux flèches circulaires sous les pions.
await page.goto(`${base}#/tutoriel/2`);
const ready = () =>
until(page, "tutoriel, étape 2", () => {
const section = document.getElementById("tutorial");
return (
location.hash === "#/tutoriel/2" &&
section.dataset.ready !== undefined &&
document.querySelectorAll("#tutorial-board .tutorial-path").length === 1
);
});
await ready();
const arrows = async () => {
const drawn = await page.evaluate(() => {
const svg = document.getElementById("tutorial-board");
const children = [...svg.children];
const path = svg.querySelector(".tutorial-path");
const colors = (selector) =>
[...path.querySelectorAll(selector)].map((el) => getComputedStyle(el).stroke);
return {
path: children.indexOf(path),
pieces: children.findIndex((c) => c.matches("g.pieces")),
player: colors(".direction-line.direction-player"),
computer: colors(".direction-line.direction-computer"),
heads: path.querySelectorAll(".direction-head").length,
pieceColors: ["player", "computer"].map(
(side) => getComputedStyle(svg.querySelector(`.checker-${side}`)).fill,
),
};
});
check(drawn.path >= 0 && drawn.path < drawn.pieces, `étape 2 : flèches au-dessus des pions ${JSON.stringify(drawn)}`);
check(drawn.player.length === 1 && drawn.computer.length === 1 && drawn.heads === 2,
`étape 2 : flèches ${JSON.stringify(drawn)}`);
// Aux couleurs des pions de chaque camp, donc jamais en brique.
check(drawn.player[0] === drawn.pieceColors[0] && drawn.computer[0] === drawn.pieceColors[1],
`étape 2 : flèches pas aux couleurs des pions ${JSON.stringify(drawn)}`);
};
await checkScreen(page, theme, "tutoriel-2", "#tutorial-board", async () => {
await ready();
await arrows();
});
const csp = await page.evaluate(() => window.__csp);
check(csp.length === 0, `violations de la CSP : ${csp.join(", ")}`);
await context.close();
log(`thème ${theme} : contours ${checkerContrastSummary(contrasts[theme])}`);
}
await browser.close();
if (full) {
// Les mesures, à côté des captures.
writeFileSync(
`${dir}/contrastes.txt`,
["light", "dark"].map((theme) => `${theme}\t${checkerContrastSummary(contrasts[theme])}`).join("\n") + "\n",
);
}
check(problems.length === 0, `problèmes relevés :\n ${problems.join("\n ")}`);
log(
"retours des joueurs : pions des deux camps sur la barre, numéros sur le cadre, " +
`flèches circulaires du tutoriel, thèmes clair et sombre${full ? ` ; ${captures} captures` : ""}`,
);
+69 -60
View File
@@ -81,29 +81,23 @@
--point-a: #6b4430;
--point-b: #c9ae88;
--point-number: #f3ead8;
--checker-player: #f7f0e2;
--checker-player-edge: #8c7a62;
--checker-computer: #2e1c12;
--checker-computer-edge: #120a05;
--count-player: #2b1d15;
--count-computer: #f3ead8;
--die-player: #f7f0e2;
--pip-player: #2b1d15;
--die-computer: #2e1c12;
--pip-computer: #f3ead8;
--cube: #f7f0e2;
--cube-text: #2b1d15;
--checker-player: #fafaf7;
--checker-player-edge: #55554f;
--checker-computer: #1c1c1c;
--checker-computer-edge: #b5b5b0;
--count-player: #1c1c1c;
--count-computer: #fafaf7;
--die-player: #fafaf7;
--pip-player: #1c1c1c;
--die-computer: #1c1c1c;
--pip-computer: #fafaf7;
--cube: #fafaf7;
--cube-text: #1c1c1c;
--highlight: #a8432b;
--target: rgba(168, 67, 43, 0.32);
/* Dernier coup joué (marques et traces) : le laiton, rien d'autre. */
--last-move: var(--brand-laiton);
/* Numéros des flèches. La charte les pose sur le cadre (point-number,
* ivoire) ; notre plateau les pose sur le fond, où l'ivoire ne se lirait
* pas : texte secondaire en thème clair (4,7:1 sur bed), point-number en
* thème sombre (6,3:1). */
--point-label: var(--muted);
--shadow-raised: 0 1px 2px rgba(43, 29, 21, 0.1);
--font-sans: "Alegreya Sans", "Gill Sans", "Segoe UI", system-ui, sans-serif;
@@ -167,23 +161,21 @@
--point-a: #3a2519;
--point-b: #7e6142;
--point-number: #cdbfa8;
--checker-player: #ede3cf;
--checker-player-edge: #8e7c64;
--checker-computer: #140d09;
--checker-computer-edge: #a8957d;
--count-player: #2b1d15;
--count-computer: #f3ead8;
--die-player: #ede3cf;
--pip-player: #2b1d15;
--die-computer: #140d09;
--pip-computer: #ede3cf;
--cube: #ede3cf;
--cube-text: #2b1d15;
--checker-player: #f2f2ef;
--checker-player-edge: #6e6e69;
--checker-computer: #141414;
--checker-computer-edge: #b5b5b0;
--count-player: #1c1c1c;
--count-computer: #fafaf7;
--die-player: #f2f2ef;
--pip-player: #1c1c1c;
--die-computer: #141414;
--pip-computer: #f2f2ef;
--cube: #f2f2ef;
--cube-text: #1c1c1c;
--highlight: #e07a5a;
--target: rgba(224, 122, 90, 0.38);
--point-label: var(--point-number);
--shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.4);
--scrim: rgba(0, 0, 0, 0.6);
color-scheme: dark;
@@ -215,23 +207,21 @@
--point-a: #3a2519;
--point-b: #7e6142;
--point-number: #cdbfa8;
--checker-player: #ede3cf;
--checker-player-edge: #8e7c64;
--checker-computer: #140d09;
--checker-computer-edge: #a8957d;
--count-player: #2b1d15;
--count-computer: #f3ead8;
--die-player: #ede3cf;
--pip-player: #2b1d15;
--die-computer: #140d09;
--pip-computer: #ede3cf;
--cube: #ede3cf;
--cube-text: #2b1d15;
--checker-player: #f2f2ef;
--checker-player-edge: #6e6e69;
--checker-computer: #141414;
--checker-computer-edge: #b5b5b0;
--count-player: #1c1c1c;
--count-computer: #fafaf7;
--die-player: #f2f2ef;
--pip-player: #1c1c1c;
--die-computer: #141414;
--pip-computer: #f2f2ef;
--cube: #f2f2ef;
--cube-text: #1c1c1c;
--highlight: #e07a5a;
--target: rgba(224, 122, 90, 0.38);
--point-label: var(--point-number);
--shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.4);
--scrim: rgba(0, 0, 0, 0.6);
color-scheme: dark;
@@ -586,6 +576,19 @@ button:disabled {
line-clamp: 2;
}
/* Un coup en notation du moteur, lien vers sa fiche du glossaire (ligne de
* l'ordinateur, feuille du maître) : couleur du texte, soulignement en
* pointillé discret. Le remplissage vertical d'un élément en ligne agrandit
* la zone d'appui sans changer la hauteur des lignes. */
a.notation {
padding-block: 8px;
color: inherit;
text-decoration-line: underline;
text-decoration-style: dotted;
text-decoration-color: var(--muted);
text-decoration-thickness: 1px;
}
.infoline .replay {
color: var(--accent);
}
@@ -971,9 +974,10 @@ button:disabled {
.point-b { fill: var(--point-b); }
/* Numéros des flèches : leur taille est une mesure du dessin (attribut
* font-size), calculée pour faire au moins 12 px à l'écran (geometry.ts). */
* font-size), calculée pour faire au moins 12 px à l'écran (geometry.ts).
* Posés sur le cadre, en portrait comme en paysage. */
.point-number {
fill: var(--point-label);
fill: var(--point-number);
font-weight: 500;
text-anchor: middle;
}
@@ -1105,10 +1109,8 @@ button:disabled {
cursor: pointer;
}
/* Paysage : numéros sur le cadre (ivoire), comptes de points en pastilles
* aux bouts de la barre, consigne dans la bande, commandes à gauche. */
.point-number.on-frame { fill: var(--point-number); }
/* Paysage : comptes de points en pastilles aux bouts de la barre, consigne
* dans la bande, commandes à gauche. */
.pip-chip { stroke-width: 1.5; }
.chip-player { fill: var(--checker-player); stroke: var(--checker-player-edge); }
.chip-computer { fill: var(--checker-computer); stroke: var(--checker-computer-edge); }
@@ -2033,9 +2035,10 @@ html.bare .topbar {
min-width: 0;
}
/* Le sens du jeu : pointillés text sur un liseré ivoire, jamais en brique
* (la brique veut dire « à faire »). Couleurs de marque, les mêmes dans les
* deux thèmes : le liseré reste lisible sur le bois. */
/* Le sens du jeu : deux flèches circulaires, claire pour le joueur, sombre
* pour l'ordinateur, aux couleurs de leurs pions, chacune avec un liseré de
* la couleur opposée pour rester lisible sur le bois ; jamais en brique (la
* brique veut dire « à faire »). */
.tutorial-path path {
fill: none;
stroke-linecap: round;
@@ -2043,13 +2046,19 @@ html.bare .topbar {
pointer-events: none;
}
.tutorial-path .path-edge {
stroke: var(--brand-ivoire);
.tutorial-path .direction-player.direction-line { stroke: var(--checker-player); }
.tutorial-path .direction-player.direction-edge { stroke: var(--checker-computer); }
.tutorial-path .direction-computer.direction-line { stroke: var(--checker-computer); }
.tutorial-path .direction-computer.direction-edge { stroke: var(--checker-player); }
.tutorial-path .direction-head.direction-player {
fill: var(--checker-player);
stroke: var(--checker-computer);
}
.tutorial-path .path-dots,
.tutorial-path .path-head {
stroke: var(--brand-noyer);
.tutorial-path .direction-head.direction-computer {
fill: var(--checker-computer);
stroke: var(--checker-player);
}
/* En paysage, comme la position partagée : le plateau à gauche sur toute