Recette design : tutoriel en paysage, sens du jeu, bandeau de mise à jour
- Sens du jeu (étape 2) : le tracé passe sous les pions et sous les numéros des flèches ; liseré ivoire de 8 px, points de 4 px à l'écran. - Tutoriel en paysage : plateau à gauche sur toute la hauteur (géométrie du jeu en paysage, colonne gauche du cadre), colonne à droite avec la barre de progression, le titre, le texte, la consigne et les boutons ; seul le texte peut défiler. Tient en 915x412 et 844x320. - Recette automatique étendue au tutoriel : numéros d'au moins 12 px, page sans défilement et boutons en vue en paysage, captures en 844x320. - Boutons du videau « Prendre » et « Passer », lien « Quitter ». - Bandeau « Nouvelle version prête. » en bas, au-dessus de la barre d'actions, seulement entre deux tours (betweenTurns, testé). - Test des adresses : le lien Aide est lu au moment du toucher, la carte du terme ouvert est mesurée sous la barre de l'aide. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Pierre MARTIN
co-authored by
Claude Opus 5.5
Claude Opus 5.5
parent
7c10c688c3
commit
86c0ebfc36
+133
-15
@@ -11,7 +11,8 @@
|
||||
// Lancé par tests/browser.sh. Le second site sert la même chose depuis un
|
||||
// dossier que ce script modifie : il y publie une deuxième version pour
|
||||
// essayer la mise à jour. Captures de la recette design (Chromium) dans
|
||||
// <dossier des captures>/accueil-tutoriel/, en 412×915 et 915×412.
|
||||
// <dossier des captures>/accueil-tutoriel/, en 412×915 et 915×412, et aussi
|
||||
// en 844×320 pour le tutoriel.
|
||||
|
||||
import { readFileSync, writeFileSync, mkdirSync } from "node:fs";
|
||||
import { chromium, firefox } from "playwright";
|
||||
@@ -29,6 +30,8 @@ const SIZES = [
|
||||
[412, 915],
|
||||
[915, 412],
|
||||
];
|
||||
// Le tutoriel est aussi vérifié dans le plus petit paysage de la recette.
|
||||
const TUTORIAL_SIZES = [...SIZES, [844, 320]];
|
||||
|
||||
const browser = await browserType.launch();
|
||||
const problems = [];
|
||||
@@ -102,12 +105,12 @@ async function until(page, what, test, arg, ms = 30_000) {
|
||||
throw new Error(`${what} : attente dépassée (${JSON.stringify(last)})`);
|
||||
}
|
||||
|
||||
/** Range une capture de l'écran courant dans les deux tailles (Chromium). */
|
||||
async function capture(page, name, settle = async () => {}) {
|
||||
/** Range une capture de l'écran courant dans chaque taille (Chromium). */
|
||||
async function capture(page, name, settle = async () => {}, sizes = SIZES) {
|
||||
if (!full) {
|
||||
return;
|
||||
}
|
||||
for (const [width, height] of SIZES) {
|
||||
for (const [width, height] of sizes) {
|
||||
await page.setViewportSize({ width, height });
|
||||
await sleep(250);
|
||||
await settle();
|
||||
@@ -139,6 +142,60 @@ async function tutorialReady(page, hash) {
|
||||
}, hash);
|
||||
}
|
||||
|
||||
/** Recette du tutoriel dans la taille courante : numéros des flèches de
|
||||
* 12 px au moins ; en paysage, rien ne défile et les boutons sont en vue. */
|
||||
async function checkTutorialView(page, name) {
|
||||
const view = await page.evaluate(() => {
|
||||
const svg = document.getElementById("tutorial-board");
|
||||
const box = svg.getBoundingClientRect();
|
||||
const vb = svg.viewBox.baseVal;
|
||||
const scale = Math.min(box.width / vb.width, box.height / vb.height);
|
||||
const numbers = [...svg.querySelectorAll(".point-number")]
|
||||
.map((t) => Number(t.getAttribute("font-size")) * scale);
|
||||
const buttons = ["tutorial-back", "tutorial-next", "tutorial-drop", "tutorial-take"]
|
||||
.map((id) => document.getElementById(id))
|
||||
.filter((el) => el !== null && el.closest("[hidden]") === null)
|
||||
.map((el) => {
|
||||
const r = el.getBoundingClientRect();
|
||||
return { id: el.id, top: r.top, bottom: r.bottom };
|
||||
});
|
||||
return {
|
||||
landscape: document.documentElement.classList.contains("landscape"),
|
||||
minNumber: numbers.length === 0 ? 0 : Math.min(...numbers),
|
||||
scroll: document.scrollingElement.scrollHeight - innerHeight,
|
||||
body: (() => {
|
||||
const b = document.querySelector("#tutorial .tutorial-body");
|
||||
return b.scrollHeight - b.clientHeight;
|
||||
})(),
|
||||
height: innerHeight,
|
||||
buttons,
|
||||
};
|
||||
});
|
||||
const size = `${name} en ${await page.evaluate(() => `${innerWidth}x${innerHeight}`)}`;
|
||||
check(view.minNumber >= 12, `${size} : numéros des flèches de ${view.minNumber.toFixed(1)} px`);
|
||||
if (view.landscape) {
|
||||
check(view.scroll <= 1, `${size} : la page défile de ${view.scroll} px`);
|
||||
check(view.body <= 1, `${size} : le texte défile de ${view.body} px`);
|
||||
if (view.body > tutorialBodyScroll.px) {
|
||||
tutorialBodyScroll = { px: view.body, where: size };
|
||||
}
|
||||
for (const b of view.buttons) {
|
||||
check(b.top >= 0 && b.bottom <= view.height + 0.5,
|
||||
`${size} : « ${b.id} » hors de l'écran (${b.top}-${b.bottom} pour ${view.height})`);
|
||||
}
|
||||
}
|
||||
tutorialViews++;
|
||||
tutorialMinNumber = Math.min(tutorialMinNumber, view.minNumber);
|
||||
}
|
||||
let tutorialViews = 0;
|
||||
let tutorialBodyScroll = { px: 0, where: "" };
|
||||
let tutorialMinNumber = Infinity;
|
||||
|
||||
/** Capture d'un écran du tutoriel, recette comprise, dans les trois tailles. */
|
||||
async function tutorialCapture(page, name) {
|
||||
await capture(page, name, () => checkTutorialView(page, name), TUTORIAL_SIZES);
|
||||
}
|
||||
|
||||
/** Touche une case du plateau du tutoriel. */
|
||||
async function touch(page, place) {
|
||||
await page.click(`#tutorial-board [data-place="${place}"]`);
|
||||
@@ -210,8 +267,17 @@ async function playTouches(page, touches) {
|
||||
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.
|
||||
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) };
|
||||
});
|
||||
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)}`);
|
||||
}
|
||||
await capture(page, `tutoriel-${step}`);
|
||||
await tutorialCapture(page, `tutoriel-${step}`);
|
||||
screens++;
|
||||
await page.click("#tutorial-next");
|
||||
const practice = await page.evaluate(() => location.hash.endsWith("/a-vous"));
|
||||
@@ -222,11 +288,11 @@ async function playTouches(page, touches) {
|
||||
await tutorialReady(page, avous);
|
||||
check(await page.evaluate(() => document.getElementById("tutorial-next").classList.contains("secondary")),
|
||||
`étape ${step}, à vous : « Continuer » principal avant le geste`);
|
||||
await capture(page, `tutoriel-${step}-a-vous`);
|
||||
await tutorialCapture(page, `tutoriel-${step}-a-vous`);
|
||||
if (step === 8) {
|
||||
await page.click("#tutorial-drop");
|
||||
check(await verdict(page) === "wrong", "étape 8 : « Je passe » accepté");
|
||||
await capture(page, "tutoriel-8-a-vous-refuse");
|
||||
check(await verdict(page) === "wrong", "étape 8 : « Passer » accepté");
|
||||
await tutorialCapture(page, "tutoriel-8-a-vous-refuse");
|
||||
await page.click("#tutorial-take");
|
||||
await until(page, "étape 8 juste", () =>
|
||||
document.getElementById("tutorial-feedback").dataset.verdict === "right");
|
||||
@@ -238,7 +304,7 @@ async function playTouches(page, touches) {
|
||||
await until(page, "pion revenu", () => document.querySelectorAll("#tutorial-board .hit.can-move").length > 0);
|
||||
const words = await page.textContent("#tutorial-feedback");
|
||||
check(!/erreur/i.test(words), `étape ${step} : « erreur » dans le refus`);
|
||||
await capture(page, `tutoriel-${step}-a-vous-refuse`);
|
||||
await tutorialCapture(page, `tutoriel-${step}-a-vous-refuse`);
|
||||
await playTouches(page, moves.right);
|
||||
check(await verdict(page) === "right", `étape ${step} : bon coup refusé`);
|
||||
check(await page.locator("#tutorial-board .hit.can-move").count() === 0,
|
||||
@@ -248,13 +314,13 @@ async function playTouches(page, touches) {
|
||||
`étape ${step} : « Continuer » pas principal après le bon geste`);
|
||||
const vibrated = await page.evaluate(() => window.__vibrations.at(-1));
|
||||
check(vibrated === "12", `étape ${step} : vibration ${vibrated}`);
|
||||
await capture(page, `tutoriel-${step}-a-vous-reussi`);
|
||||
await tutorialCapture(page, `tutoriel-${step}-a-vous-reussi`);
|
||||
screens++;
|
||||
await page.click("#tutorial-next");
|
||||
}
|
||||
await until(page, "fin du tutoriel", () => location.hash === "#/tutoriel/fin" &&
|
||||
document.getElementById("tutorial").dataset.ready !== undefined);
|
||||
await capture(page, "tutoriel-fin");
|
||||
await tutorialCapture(page, "tutoriel-fin");
|
||||
// Le retour du téléphone : l'écran d'avant.
|
||||
await page.goBack();
|
||||
await tutorialReady(page, "#/tutoriel/8/a-vous");
|
||||
@@ -262,7 +328,9 @@ async function playTouches(page, touches) {
|
||||
await until(page, "fin", () => location.hash === "#/tutoriel/fin");
|
||||
await page.click("#tutorial-next");
|
||||
await until(page, "première partie", () => location.hash === "#/" && window.__shown("game"));
|
||||
log(`tutoriel : ${screens} écrans, gestes refusés puis justes sur les 4 écrans « à vous », fin`);
|
||||
log(`tutoriel : ${screens} écrans, gestes refusés puis justes sur les 4 écrans « à vous », fin` +
|
||||
(full ? ` ; recette sur ${tutorialViews} vues, numéros de ${tutorialMinNumber.toFixed(1)} px au moins, ` +
|
||||
`texte défilant au plus de ${tutorialBodyScroll.px} px${tutorialBodyScroll.px > 0 ? ` (${tutorialBodyScroll.where})` : ""}` : ""));
|
||||
|
||||
// Le choix ne revient plus : l'accueil, ensuite.
|
||||
await page.goto(base);
|
||||
@@ -391,8 +459,27 @@ if (browserName === "chromium") {
|
||||
};
|
||||
open.onerror = () => resolve(null);
|
||||
}));
|
||||
const gameBefore = await journal();
|
||||
check(await page.isHidden("#update-banner"), "bandeau de mise à jour sans nouvelle version");
|
||||
// Si vous avez la main (jet d'ouverture), le bandeau attend la fin du
|
||||
// tour : on publie la nouvelle version d'abord, puis on joue le coup.
|
||||
const toPlay = () => page.evaluate(() => {
|
||||
if (document.body.classList.contains("busy")) {
|
||||
return "busy";
|
||||
}
|
||||
const usable = (id) => {
|
||||
const b = document.getElementById(id);
|
||||
return b !== null && !b.hidden && !b.disabled;
|
||||
};
|
||||
for (const id of ["roll", "again", "confirm", "skip", "take"]) {
|
||||
if (usable(id)) {
|
||||
return id;
|
||||
}
|
||||
}
|
||||
if (document.querySelector("#board .hit.can-land")) {
|
||||
return "land";
|
||||
}
|
||||
return document.querySelector("#board .hit.can-move") ? "move" : "busy";
|
||||
});
|
||||
// Une deuxième version publiée : autre version.json, autre sw.js.
|
||||
writeFileSync(`${updateDir}/version.json`, '{"commit": "0123456789abcdef0123", "dirty": false}\n');
|
||||
const sw = readFileSync(`${updateDir}/sw.js`, "utf8");
|
||||
@@ -400,9 +487,40 @@ if (browserName === "chromium") {
|
||||
await page.click("#menu-button");
|
||||
await page.waitForSelector("#menu", { state: "visible" });
|
||||
await page.click("#menu-update");
|
||||
await until(page, "nouvelle version trouvée", () =>
|
||||
document.getElementById("update-text")?.textContent !== "Recherche d'une mise à jour…", undefined, 120_000);
|
||||
// Pendant votre coup, jamais de bandeau : seulement entre deux tours.
|
||||
let waited = false;
|
||||
for (let i = 0; i < 40; i++) {
|
||||
const todo = await toPlay();
|
||||
if (todo === "roll" || todo === "again") {
|
||||
break;
|
||||
}
|
||||
if (todo === "busy") {
|
||||
await sleep(100);
|
||||
continue;
|
||||
}
|
||||
if (todo === "move" || todo === "land" || todo === "confirm") {
|
||||
await sleep(400);
|
||||
check(await page.isHidden("#update-banner"), `bandeau de mise à jour pendant votre coup (${todo})`);
|
||||
waited = true;
|
||||
}
|
||||
await page.click(todo === "move" ? "#board .hit.can-move" : todo === "land" ? "#board .hit.can-land" : `#${todo}`);
|
||||
await sleep(200);
|
||||
}
|
||||
await until(page, "bandeau de mise à jour", () => window.__shown("update-banner") && window.__shown("update-apply"), undefined, 120_000);
|
||||
check((await page.textContent("#update-text")) === "Nouvelle version disponible.",
|
||||
check((await page.textContent("#update-text")) === "Nouvelle version prête.",
|
||||
`bandeau : « ${await page.textContent("#update-text")} »`);
|
||||
// En bas, au-dessus de la barre d'actions, comme « Reprendre l'ancienne ».
|
||||
const place = await page.evaluate(() => {
|
||||
const banner = document.getElementById("update-banner").getBoundingClientRect();
|
||||
const actions = document.getElementById("actions").getBoundingClientRect();
|
||||
const top = document.querySelector(".topbar").getBoundingClientRect();
|
||||
return { bottom: banner.bottom, top: banner.top, actions: actions.top, bar: top.bottom };
|
||||
});
|
||||
check(place.bottom <= place.actions && place.top > place.bar,
|
||||
`bandeau de mise à jour mal placé : ${JSON.stringify(place)}`);
|
||||
const gameBefore = await journal();
|
||||
await capture(page, "09-mise-a-jour");
|
||||
await Promise.all([page.waitForEvent("load", { timeout: 60_000 }), page.click("#update-apply")]);
|
||||
await until(page, "partie reprise", () => location.hash === "#/" && !document.body.classList.contains("busy"), undefined, 60_000);
|
||||
@@ -410,7 +528,7 @@ if (browserName === "chromium") {
|
||||
await page.goto(`${updateBase}#/a-propos`);
|
||||
await until(page, "nouvelle version", () =>
|
||||
document.getElementById("about-version")?.textContent === "Version publiée : 0123456789ab.");
|
||||
log("mise à jour : deuxième version publiée, bandeau, « Mettre à jour », partie retrouvée, nouvelle version");
|
||||
log(`mise à jour : deuxième version publiée, bandeau ${waited ? "retenu pendant votre coup, puis " : ""}entre deux tours, « Mettre à jour », partie retrouvée, nouvelle version`);
|
||||
// Rien de neuf : « Vous avez la dernière version ».
|
||||
await page.goto(`${updateBase}#/`);
|
||||
await until(page, "partie", () => !document.body.classList.contains("busy"), undefined, 60_000);
|
||||
|
||||
Reference in New Issue
Block a user