pierre/Ustagammon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

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

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Pierre MARTIN
2026-11-12 23:31:46 +01:00
co-authored by Claude Opus 5.5
parent 68d1c3a8c4 ee661661fd
commit 44e535d94b
35 changed files with 2340 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/browser.sh
+18 -8
View File
@@ -20,14 +20,16 @@
# cadre, flèches du tutoriel, en thème clair et sombre), captures dans
# build/browser-shots/retours-joueurs/. Les leçons (tests/browser/lecons.mjs :
# carte de l'accueil, liste, explication, exercice refusé puis réussi,
# progression gardée), captures dans build/browser-shots/lecons/. Les gestes
# du plateau soigné (tests/browser/plateau.mjs : glisser-déposer, pion lâché
# hors cible, double toucher, clavier, filet des pions), captures dans
# build/browser-shots/plateau/.
# progression gardée), captures dans build/browser-shots/lecons/. La
# progression (tests/browser/progression.mjs : cas vide, trois parties, courbe
# égale aux taux des bilans, ligne de l'accueil, « Créer des exercices »),
# captures dans build/browser-shots/progression/. Les gestes du plateau soigné
# (tests/browser/plateau.mjs : glisser-déposer, pion lâché hors cible, double
# toucher, clavier, filet des pions), captures dans build/browser-shots/plateau/.
#
# BROWSERS=chromium et SCRIPTS=accueil (ou play, match, maitre, bilan,
# prompts, nouvelle-partie, retours-joueurs, lecons, plateau) restreignent le
# test.
# prompts, nouvelle-partie, retours-joueurs, lecons, progression, plateau)
# 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
@@ -40,7 +42,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 nouvelle-partie retours-joueurs lecons plateau}"
scripts="${SCRIPTS:-play accueil match maitre bilan prompts nouvelle-partie retours-joueurs lecons progression plateau}"
unset MAKEFLAGS MFLAGS MAKELEVEL
make -s package >/dev/null
@@ -79,7 +81,8 @@ 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 tests/browser/nouvelle-partie.mjs \
tests/browser/retours-joueurs.mjs tests/browser/lecons.mjs tests/browser/plateau.mjs "$tools/"
tests/browser/retours-joueurs.mjs tests/browser/lecons.mjs tests/browser/progression.mjs tests/browser/plateau.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
@@ -149,6 +152,13 @@ for browser in $browsers; do
-v "$PWD/$tools:/tools" -v "$PWD/build/browser-shots:/shots" -w /tools "$image" \
node lecons.mjs "http://localhost:$port/" "$browser" /shots || status=1
fi
if [[ " $scripts " == *" progression "* ]]; then
# La progression : courbe du taux d'erreur, parties, exercices ;
# captures dans build/browser-shots/progression/.
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 progression.mjs "http://localhost:$port/" "$browser" /shots || status=1
fi
if [[ " $scripts " == *" plateau "* ]]; then
# Gestes du plateau : glisser-déposer, lâcher hors cible, double
# toucher, clavier ; captures dans build/browser-shots/plateau/.
tests/browser/progression.mjs
+395
View File
@@ -0,0 +1,395 @@
// progression.mjs -- l'écran de progression (étape 1h) dans un vrai
// navigateur sans écran (Playwright), sur le site servi par l'image de
// production (charte, ecrans-etape-1.md, « 1h. Progression »).
//
// Copyright (C) 2026 les auteurs d'Ustagammon.
// Licence : GPLv3 ou ultérieure (voir LICENSE).
//
// Usage : node progression.mjs <adresse du site> <chromium|firefox> <dossier des captures>
// Lancé par tests/browser.sh. L'écran sans partie terminée, puis trois
// courses courtes jouées jusqu'au bout par l'interface, depuis un lien de
// position (celle des tests du domaine), dés d'une graine fixe : le joueur
// joue toujours le premier pion jouable et la première case d'arrivée, et
// prend les doubles, ce qui donne plusieurs décisions par partie et des
// taux d'erreur réalistes. Vérifie que la ligne de l'accueil (44 px au
// moins) mène à #/progression, que la carte de la partie ne montre plus la
// partie finie, que la courbe a trois points égaux, dans l'ordre, aux taux
// d'erreur des trois bilans, le dernier point en vert seulement si le taux
// baisse, la phrase du maître, la liste (un lien par partie, vers son
// bilan) et « Demander des exercices à une IA » (feuille du prompt). Rien
// d'interactif sous
// une barre d'action, aucune erreur ni violation de la politique de
// sécurité. Captures (Chromium) dans <dossier des captures>/progression/,
// en 412×915 et 915×412.
import { mkdirSync } from "node:fs";
import { chromium, firefox } from "playwright";
import { hiddenUnderActionBar, tallButtons } from "./recette.mjs";
const [base, browserName, shots] = process.argv.slice(2);
const browserType = { chromium, firefox }[browserName];
if (!base || !browserType || !shots) {
console.error("usage : node progression.mjs <adresse> <chromium|firefox> <dossier des captures>");
process.exit(2);
}
const full = browserName === "chromium";
const dir = `${shots}/progression`;
mkdirSync(dir, { recursive: true });
const PORTRAIT = { width: 412, height: 915 };
const LANDSCAPE = { width: 915, height: 412 };
const SIZES = [PORTRAIT, LANDSCAPE];
// Une course courte (Position ID de gnubg, app/tests/progression.test.ts).
const RACE = "trsXAADs7mwAAA";
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 = 5;
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}`);
}
/** Une capture de la recette dans les deux tailles (Chromium seulement),
* après la règle commune ; settle replace l'écran après le changement de
* taille. */
async function capture(name, settle = async () => {}) {
if (!full) {
return;
}
// Le bandeau « Reprendre l'ancienne » (10 s) d'une partie commencée.
await until("bandeau parti", () => document.getElementById("banner").hidden, null, 15_000);
for (const size of SIZES) {
await page.setViewportSize(size);
await sleep(300);
await settle();
const hidden = await hiddenUnderActionBar(page);
check(
hidden.length === 0,
`${name} ${size.width}x${size.height} : caché sous la barre d'action : ${hidden.join(", ")}`,
);
const tall = await tallButtons(page);
check(tall.length === 0, `${name} ${size.width}x${size.height} : boutons étirés : ${tall.join(", ")}`);
await page.screenshot({ path: `${dir}/${name}-${size.width}x${size.height}.png`, fullPage: true });
captures++;
}
await page.setViewportSize(PORTRAIT);
await sleep(300);
}
/** Une nouvelle partie à partir d'une position, joueur au trait. */
async function startFrom(position) {
await page.goto(`${base}#/position/${encodeURIComponent(position)}`);
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,
);
}
/** Joue la partie jusqu'au bout : lancer, le premier pion jouable et sa
* première case d'arrivée, valider ; prendre les doubles ; passer quand
* aucun coup n'est possible. */
async function playOut() {
for (let step = 0; step < 2000; step++) {
const s = await page.evaluate(() => {
const shown = (id) => {
const el = document.getElementById(id);
return el !== null && !el.hidden && el.closest("[hidden]") === null && !el.disabled;
};
return {
over: !document.getElementById("panel-veil").hidden || /\/bilan$/.test(location.hash),
busy: document.body.classList.contains("busy"),
take: shown("take"),
confirm: shown("confirm"),
skip: shown("skip"),
roll: shown("roll"),
land: document.querySelector("#board .hit.can-land") !== null,
move: document.querySelector("#board .hit.can-move") !== null,
};
});
if (s.over) {
return;
}
if (s.busy) {
await sleep(100);
} else if (s.take) {
await page.click("#take");
} else if (s.confirm) {
await page.click("#confirm");
} else if (s.skip) {
await page.click("#skip");
} else if (s.land) {
await page.locator("#board .hit.can-land").first().click();
} else if (s.move) {
await page.locator("#board .hit.can-move").first().click();
} else if (s.roll) {
await page.click("#roll");
} else {
await sleep(100);
}
}
throw new Error("la partie ne finit pas");
}
/** Le bilan de la partie qui vient de finir : son identifiant et son taux
* d'erreur (celui de la jauge « Votre jeu »). */
async function summaryRate() {
await until(
"bilan prêt",
() =>
/^#\/parties\/[a-z0-9-]+\/bilan$/.test(location.hash) &&
document.getElementById("summary")?.dataset.ready === "true",
);
return page.evaluate(() => ({
id: location.hash.split("/")[2],
rate: document.getElementById("gauge-play").dataset.errorRate,
}));
}
/** Une course jouée jusqu'au bout, et le taux de son bilan. */
async function oneGame() {
await startFrom(RACE);
await playOut();
return summaryRate();
}
/** L'écran de progression lu, prêt (toutes ses parties analysées). */
async function progressionReady() {
await until(
"progression prête",
() =>
location.hash === "#/progression" &&
!document.getElementById("progression").hidden &&
document.getElementById("progression").dataset.ready === "true",
null,
300_000,
);
}
// --------------------------------------------------- Aucune partie terminée
await page.goto(`${base}#/progression`);
await progressionReady();
const empty = await page.evaluate(() => ({
summary: document.getElementById("progression-summary").textContent,
start: document.getElementById("progression-new-game")?.getAttribute("href") ?? null,
curve: document.getElementById("progression-curve") !== null,
list: document.getElementById("progression-list") !== null,
}));
check(
empty.summary.startsWith("Aucune partie terminée pour l'instant") &&
empty.start === "#/nouvelle-partie" &&
!empty.curve &&
!empty.list,
`cas vide : ${JSON.stringify(empty)}`,
);
await capture("1-vide");
log("progression sans partie terminée : phrase et « Nouvelle partie »");
// ----------------------------------------------------- Trois parties jouées
const games = [];
for (let i = 0; i < 3; i++) {
games.push(await oneGame());
}
check(
games.every((g) => g.id && g.rate !== undefined && !Number.isNaN(Number(g.rate))),
`bilans : ${JSON.stringify(games)}`,
);
log(`trois parties jouées, taux des bilans : ${games.map((g) => g.rate).join(", ")}`);
// La ligne de l'accueil mène à la progression.
await page.goto(`${base}#/accueil`);
await until("accueil", () => {
const line = document.getElementById("home-progress");
return (
!document.getElementById("home").hidden &&
line !== null &&
!line.hidden &&
line.textContent.includes("3 parties jouées")
);
});
const line = await page.evaluate(() => {
const a = document.getElementById("home-progress");
return {
tag: a.tagName,
href: a.getAttribute("href"),
text: a.textContent,
height: a.getBoundingClientRect().height,
// La carte de la partie, sans partie en cours : ni miniature ni
// compte de la partie finie (recette 1h).
mini: !document.querySelector("#home-game .home-mini").hidden,
pips: !document.getElementById("home-pips").hidden,
resume: !document.getElementById("home-resume").hidden,
};
});
check(
line.tag === "A" && line.href === "#/progression" && line.height >= 44,
`ligne de l'accueil : ${JSON.stringify(line)}`,
);
check(!line.mini && !line.pips && !line.resume, `carte de la partie finie : ${JSON.stringify(line)}`);
await capture("3-accueil-ligne", async () => {
await page.locator("#home-progress").scrollIntoViewIfNeeded();
});
log(`accueil : « ${line.text} » mène à #/progression`);
await page.click("#home-progress");
await progressionReady();
// La courbe : trois points, dans l'ordre des parties, égaux aux taux des
// bilans.
const shown = await page.evaluate(() => ({
summary: document.getElementById("progression-summary").textContent,
dots: [...document.querySelectorAll("#progression-curve .progression-dot")].map((c) => ({
id: c.getAttribute("data-id"),
rate: c.getAttribute("data-rate"),
last: c.classList.contains("last"),
better: c.classList.contains("better"),
r: Number(c.getAttribute("r")),
})),
values: [...document.querySelectorAll("#progression-curve .progression-value")].length,
axisLabels: [...document.querySelectorAll("#progression-curve .curve-label")].length,
items: [...document.querySelectorAll("#progression-list .progression-item")].map((li) => ({
id: li.dataset.id,
summary: li.querySelector(".progression-game").getAttribute("href"),
links: li.querySelectorAll("a, button").length,
result: li.querySelector(".progression-text strong").textContent,
chevron: li.querySelector(".progression-game > svg.icon") !== null,
rate: li.querySelector(".progression-rate")?.dataset.rate,
})),
glossary: document.getElementById("progression-glossary")?.getAttribute("href"),
exercises: document.getElementById("progression-exercises")?.getAttribute("href"),
exercisesText: document.getElementById("progression-exercises")?.textContent,
back: document.getElementById("progression-back") !== null,
title: document.getElementById("progression-title")?.tagName,
}));
check(shown.dots.length === 3, `courbe : ${shown.dots.length} points`);
for (const [i, game] of games.entries()) {
const dot = shown.dots[i];
check(dot.id === game.id && dot.rate === game.rate, `point ${i + 1} : ${JSON.stringify(dot)} contre ${JSON.stringify(game)}`);
}
check(shown.dots[2].last && !shown.dots[0].last && shown.dots[2].r > shown.dots[0].r,
"le dernier point n'est pas plus gros");
// Vert seulement si le taux baisse (progression.baisse).
const down = shown.summary.includes("vous faites moins d'erreurs");
check(shown.dots[2].better === down && !shown.dots[0].better, `vert du dernier point : ${shown.summary}`);
check(shown.values === 2 && shown.axisLabels === 0, `valeurs de la courbe : ${shown.values}, axe : ${shown.axisLabels}`);
check(!shown.back && shown.title === "H1", `en-tête : ${JSON.stringify({ back: shown.back, title: shown.title })}`);
check(shown.summary.startsWith("Sur vos 3 dernières parties"), `phrase : ${shown.summary}`);
check(!shown.summary.includes("!"), `phrase : ${shown.summary}`);
check(shown.items.length === 3 && shown.items[0].id === games[2].id, `liste : ${JSON.stringify(shown.items)}`);
for (const item of shown.items) {
const game = games.find((g) => g.id === item.id);
check(
item.summary === `#/parties/${item.id}/bilan` &&
item.links === 1 &&
item.chevron &&
item.rate === game.rate,
`ligne : ${JSON.stringify(item)}`,
);
}
check(shown.glossary === "#/glossaire/taux-d-erreur", `lien du glossaire : ${shown.glossary}`);
check(
shown.exercises === "#/progression/ia" && shown.exercisesText === "Demander des exercices à une IA",
`exercices : ${shown.exercises} « ${shown.exercisesText} »`,
);
await capture("2-trois-parties");
log(`courbe : ${shown.dots.map((d) => d.rate).join(", ")} ; « ${shown.summary} » ; résultats : ${shown.items.map((i) => i.result).join(" | ")}`);
// Une ligne ouvre le bilan ; le fermer ramène à la progression.
await page.click(`#progression-list .progression-item[data-id="${games[0].id}"] .progression-game`);
await until(
"bilan depuis la progression",
([id]) =>
location.hash === `#/parties/${id}/bilan` &&
document.getElementById("summary")?.dataset.ready === "true",
[games[0].id],
);
await page.click("#summary-close");
await progressionReady();
log("une ligne ouvre le bilan, la croix ramène à la progression");
// « Demander des exercices à une IA » : la feuille du prompt.
await page.click("#progression-exercises");
await until(
"prompt des exercices",
() =>
location.hash === "#/progression/ia" &&
document.getElementById("prompt-page")?.dataset.ready === "true",
);
const prompt = await page.textContent("#prompt-text");
check(prompt.includes("Voici mes 3 dernières parties"), `prompt : ${prompt}`);
check(prompt.includes("Ce qui revient dans ces erreurs"), `prompt : ${prompt}`);
check(/Je débute au backgammon\.|Je suis un joueur de niveau /.test(prompt), `prompt : ${prompt}`);
check(!/[{}]/.test(prompt), `repère non rempli : ${prompt}`);
await page.keyboard.press("Escape");
await until("retour à la progression", () => location.hash === "#/progression");
log("« Demander des exercices à une IA » : prompt avec les erreurs et leurs thèmes");
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(`progression : tout est conforme (${captures} captures)`);