345 lines
14 KiB
JavaScript
345 lines
14 KiB
JavaScript
// 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
|
||
// fins de course courtes jouées par l'interface, depuis un lien de
|
||
// position, avec des dés imposés (comme bilan.mjs) : le joueur a 6-1 et
|
||
// deux pions, sur 6 et 1 ; il joue 6/5/off (grosse erreur, l'ordinateur
|
||
// double et le joueur passe), puis 6/off 1/off (gagne), puis de nouveau
|
||
// 6/5/off. Vérifie que la ligne de l'accueil mène à #/progression, que la
|
||
// courbe a trois points égaux, dans l'ordre, aux taux d'erreur des trois
|
||
// bilans, la phrase du maître, la liste reliée aux bilans et aux analyses,
|
||
// et « Créer des exercices » (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];
|
||
// Le joueur au trait : un pion sur 6, un sur 1 ; l'ordinateur : un sur 1,
|
||
// un sur 2 (positions de gnubg, chacun vu de lui-même).
|
||
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 = 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}`);
|
||
}
|
||
|
||
const idle = () => until("écran libre", () => !document.body.classList.contains("busy"));
|
||
|
||
/** 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;
|
||
}
|
||
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,
|
||
);
|
||
}
|
||
|
||
const place = (point) => (point === 0 ? "off-player" : `p${point}`);
|
||
|
||
/** Lance les dés imposés et joue un coup, demi-coup par demi-coup. */
|
||
async function play(dice, halfMoves) {
|
||
await page.evaluate((d) => {
|
||
window.__dice.push(...d);
|
||
}, dice);
|
||
await page.click("#roll");
|
||
await idle();
|
||
for (const [from, to] of halfMoves) {
|
||
await page.click(`#board .hit[data-place="${place(from)}"]`);
|
||
await idle();
|
||
const land = page.locator(`#board .hit.can-land[data-place="${place(to)}"]`);
|
||
if ((await land.count()) > 0) {
|
||
await land.click();
|
||
await idle();
|
||
}
|
||
}
|
||
check(!(await page.locator("#confirm").isHidden()), `coup incomplet : ${JSON.stringify(halfMoves)}`);
|
||
await page.click("#confirm");
|
||
}
|
||
|
||
/** 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 partie : le joueur joue 6/5/off (puis passe le double) ou 6/off
|
||
* 1/off. */
|
||
async function oneGame(mistake) {
|
||
await startFrom(BEAROFF);
|
||
if (mistake) {
|
||
await play([6, 1], [[6, 5], [5, 0]]);
|
||
await until("double de l'ordinateur", () => !document.getElementById("drop").hidden);
|
||
await page.click("#drop");
|
||
} else {
|
||
await play([6, 1], [[6, 0], [1, 0]]);
|
||
}
|
||
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 (const mistake of [true, false, true]) {
|
||
games.push(await oneGame(mistake));
|
||
}
|
||
check(
|
||
games.every((g) => g.id && g.rate !== undefined && !Number.isNaN(Number(g.rate))),
|
||
`bilans : ${JSON.stringify(games)}`,
|
||
);
|
||
check(Number(games[0].rate) > 0 && Number(games[1].rate) === 0, `taux des 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 };
|
||
});
|
||
check(line.tag === "A" && line.href === "#/progression", `ligne de l'accueil : ${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"),
|
||
})),
|
||
items: [...document.querySelectorAll("#progression-list .progression-item")].map((li) => ({
|
||
id: li.dataset.id,
|
||
summary: li.querySelector(".progression-game").getAttribute("href"),
|
||
analysis: li.querySelector(".progression-analysis").getAttribute("href"),
|
||
rate: li.querySelector(".progression-rate")?.dataset.rate,
|
||
})),
|
||
glossary: document.getElementById("progression-glossary")?.getAttribute("href"),
|
||
exercises: document.getElementById("progression-exercises")?.getAttribute("href"),
|
||
}));
|
||
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, "le dernier point n'est pas mis en avant");
|
||
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.analysis === `#/parties/${item.id}/analyse` &&
|
||
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", `exercices : ${shown.exercises}`);
|
||
await capture("2-trois-parties");
|
||
log(`courbe : ${shown.dots.map((d) => d.rate).join(", ")} ; « ${shown.summary} »`);
|
||
|
||
// 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");
|
||
|
||
// « Créer des exercices » : 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(prompt.includes("Je débute au backgammon."), `prompt : ${prompt}`);
|
||
check(!/[{}]/.test(prompt), `repère non rempli : ${prompt}`);
|
||
await page.keyboard.press("Escape");
|
||
await until("retour à la progression", () => location.hash === "#/progression");
|
||
log("« Créer des exercices » : 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)`);
|