diff --git a/CREDITS.md b/CREDITS.md index 358f87d..f7e62ec 100644 --- a/CREDITS.md +++ b/CREDITS.md @@ -41,6 +41,14 @@ Les contenus pédagogiques (leçons, textes) sont sous licence CC BY-SA 4.0. **Python 3** (licence PSF, compatible GPL), qui exécute le comparateur `tests/reference/compare.py`, et **jq** (licence MIT), qui lit les JSON dans `tests/test_reference.sh`. Aucun des deux n'est utilisé sur le PC. + Le serveur HTTP de Python sert aussi la page de test (`make deploy-web`). +- **Emscripten** (licence MIT et University of Illinois/NCSA), image Docker + `emscripten/emsdk:3.1.64`, compile le moteur en WebAssembly + (`make engine-wasm`). Le code JavaScript qu'il génère + (`build/wasm/engine.mjs`) et sa bibliothèque C (musl, licence MIT) sont + inclus dans le moteur WebAssembly, licences compatibles GPLv3. L'image + fournit aussi **Node.js** (MIT), qui rejoue la suite de contrat sur le + moteur WebAssembly et lance `make bench`. ## Remerciements diff --git a/Makefile b/Makefile index 4b94caf..861c59e 100644 --- a/Makefile +++ b/Makefile @@ -76,8 +76,10 @@ deploy: ## Installe l'application sur le téléphone (pas encore disponible) @echo "Page de test du moteur WebAssembly : make deploy-web" @exit 1 -# Sert web/ à la racine et build/wasm/ sous /wasm/, en lecture seule, avec le -# serveur HTTP de Python (types MIME corrects, dont application/wasm). +# Sert web/ à la racine et build/wasm/ sous /wasm/ avec le serveur HTTP de +# Python (types MIME corrects, dont application/wasm). Les deux dossiers sont +# montés en lecture seule puis copiés dans le conteneur au démarrage : relancer +# après une modification. # L'adresse affichée est celle du PC sur l'interface de sa route par défaut, # c'est-à-dire sur le réseau local (Wi-Fi ou câble). deploy-web: engine-wasm ## Sert la page de test WebAssembly sur le réseau local (Ctrl+C pour arrêter) @@ -86,8 +88,9 @@ deploy-web: engine-wasm ## Sert la page de test WebAssembly sur le réseau local echo "Page de mesure : http://$${ip:-ADRESSE-DU-PC}:$(WEB_PORT)/bench.html"; \ echo "À ouvrir depuis le téléphone, sur le même Wi-Fi. Ctrl+C pour arrêter." @docker run --rm --init -p $(WEB_PORT):8080 \ - -v "$(CURDIR)/web:/site:ro" -v "$(CURDIR)/build/wasm:/site/wasm:ro" \ - $(BUILD_C_IMAGE) python3 -m http.server 8080 --directory /site + -v "$(CURDIR)/web:/web:ro" -v "$(CURDIR)/build/wasm:/wasm:ro" $(BUILD_C_IMAGE) \ + sh -c 'cp -r /web /tmp/site && cp -r /wasm /tmp/site/wasm \ + && exec python3 -m http.server 8080 --directory /tmp/site' clean: ## Supprime les artefacts de build (garde les images Docker) rm -rf $(BUILD_DIR) diff --git a/docs/guide-test-etape-0.md b/docs/guide-test-etape-0.md new file mode 100644 index 0000000..0b39e69 --- /dev/null +++ b/docs/guide-test-etape-0.md @@ -0,0 +1,83 @@ +# Guide de test : le moteur sur le Fairphone 4 (étape 0b) + +Document temporaire de l'étape 0 : il sera supprimé avec `docs/etape-0.md`. + +Le but : ouvrir sur le téléphone une page web où le moteur de backgammon +calcule, puis lancer une mesure et coller son rapport dans la conversation. +Comptez un quart d'heure. + +## 1. Préparer le PC + +1. Ouvrez un terminal dans le dossier du projet (`~/Code/ustagammon`). +2. Si ce n'est pas déjà fait, tapez `make setup` puis Entrée. Cela prépare les + outils. La première fois, c'est long ; ensuite, c'est immédiat. +3. Le PC et le téléphone doivent être sur **le même Wi-Fi** (la même box). + +## 2. Lancer la page + +1. Tapez `make deploy-web` puis Entrée. +2. La première fois, le moteur se compile : quelques minutes. +3. Le terminal affiche deux adresses, par exemple : + + ``` + Page de test : http://192.168.1.21:8080/ + Page de mesure : http://192.168.1.21:8080/bench.html + ``` + + Vos chiffres peuvent être différents : notez ceux de votre écran. +4. Laissez ce terminal ouvert pendant tout le test. Pour arrêter la page à la + fin : Ctrl+C dans le terminal. + +## 3. Essayer un meilleur coup + +1. Sur le Fairphone, ouvrez le navigateur (Chrome ou Firefox). +2. Tapez l'adresse de la **page de test** dans la barre d'adresse, exactement + comme affichée (avec `http://` et `:8080`). +3. Attendez le message « Moteur prêt, chargé en … ms ». +4. Dans « Exemple », choisissez une position, par exemple « middlegame-1 ». +5. Dans « Niveau », choisissez « fort (2 plis) ». +6. Touchez « Meilleur coup ». +7. La page affiche le coup conseillé et le **temps de calcul**. Notez ce temps + si vous voulez, il sera aussi dans le rapport. + +## 4. Lancer la mesure + +1. En bas de la page, touchez « Page de mesure » (ou tapez l'adresse de la + page de mesure). +2. Touchez « Lancer la mesure ». +3. Attendez « Mesure terminée » : de une à quelques minutes. Pendant ce temps, + gardez l'écran allumé et la page ouverte, sans changer d'application. +4. Un tableau résume les résultats : « OK » si le seuil est respecté, + « dépassé » sinon. + +## 5. Envoyer le rapport + +1. Touchez « Copier les résultats ». +2. Si la page dit « Rapport copié », c'est bon. +3. Sinon, le texte du rapport est sélectionné : faites un appui long dessus, + puis « Copier ». +4. Collez le rapport dans la conversation avec Claude Code (sur le téléphone, + ou envoyez-le vous sur le PC). + +Si vous en avez le temps, refaites la mesure une deuxième fois (rechargez la +page de mesure) et collez aussi ce second rapport : cela montre si les temps +sont stables. + +## Si la page ne s'ouvre pas + +- **Vérifiez l'adresse** : `http://` (et non `https://`), les chiffres exacts, + et `:8080` à la fin. +- **Vérifiez le Wi-Fi** : le téléphone doit être sur le même réseau que le PC, + pas sur la 4G ni sur un Wi-Fi invité. +- **Vérifiez que la page tourne** : sur le PC, ouvrez + `http://localhost:8080/` dans un navigateur. Si elle ne s'ouvre pas non + plus, relancez `make deploy-web` et lisez le message d'erreur. +- **Le pare-feu du PC** peut bloquer le téléphone. S'il est actif + (`sudo ufw status` affiche « Status: active »), autorisez le port le temps + du test : `sudo ufw allow 8080/tcp`, puis à la fin `sudo ufw delete allow + 8080/tcp`. +- **« Le moteur n'a pas pu se charger »** : notez le message exact et + collez-le dans la conversation. Essayez aussi l'autre navigateur (Chrome ou + Firefox), à jour. +- **Le port 8080 est déjà pris** : un autre programme l'utilise. Lancez + `make deploy-web WEB_PORT=8081` et utilisez `:8081` dans l'adresse. diff --git a/engine-wasm/bench.mjs b/engine-wasm/bench.mjs new file mode 100644 index 0000000..dc2b53c --- /dev/null +++ b/engine-wasm/bench.mjs @@ -0,0 +1,44 @@ +// bench.mjs -- la mesure de la page bench.html, sous Node, sur le PC +// (`make bench`). Premier ordre de grandeur seulement : le chiffre qui compte +// est celui du téléphone. +// +// Copyright (C) 2026 les auteurs d'Ustagammon. +// Licence : GPLv3 ou ultérieure (voir LICENSE). + +import { readFileSync } from "node:fs"; +import os from "node:os"; +import { fileURLToPath } from "node:url"; +import { gzipSync } from "node:zlib"; +import createEngineModule from "../build/wasm/engine.mjs"; +import { DOWNLOADED_FILES, formatReport, measureTimes } from "../web/benchmark.mjs"; +import { commands, loadEngine } from "../web/engine-wasm.mjs"; + +const root = new URL("../", import.meta.url); +const wasmDir = fileURLToPath(new URL("build/wasm/", root)); + +// Les fichiers du site : web/, et build/wasm/ servi sous wasm/. +function sitePath(name) { + const path = name.startsWith("wasm/") ? "build/" + name : "web/" + name; + return fileURLToPath(new URL(path, root)); +} + +const files = DOWNLOADED_FILES.map((name) => { + const content = readFileSync(sitePath(name)); + return { name, bytes: content.length, gzipBytes: gzipSync(content).length }; +}); + +const start = performance.now(); +const engine = await loadEngine(createEngineModule, wasmDir); +const loadMs = performance.now() - start; + +const { positions } = JSON.parse(readFileSync(sitePath("wasm/positions.json"), "utf8")); +const times = await measureTimes({ + bestMove: (...args) => engine.run(commands.bestMove(...args)), + cubeDecision: (...args) => engine.run(commands.cubeDecision(...args)), +}, positions, (done, total) => process.stderr.write("\r " + done + "/" + total + " calculs")); +process.stderr.write("\n"); + +const environment = "Node " + process.version + ", " + os.cpus()[0].model + " (PC de développement)"; +process.stdout.write(formatReport({ + environment, files, loadMs, memoryBytes: engine.memoryBytes(), times, +})); diff --git a/web/bench-page.mjs b/web/bench-page.mjs new file mode 100644 index 0000000..eab399b --- /dev/null +++ b/web/bench-page.mjs @@ -0,0 +1,97 @@ +// bench-page.mjs -- page de mesure (bench.html) : chronomètre le moteur +// dans un Web Worker et produit le rapport à copier. +// +// Copyright (C) 2026 les auteurs d'Ustagammon. +// Licence : GPLv3 ou ultérieure (voir LICENSE). + +import { DOWNLOADED_FILES, DOWNLOAD_LIMIT_BYTES, formatReport, measureTimes, summarize } + from "./benchmark.mjs"; +import { startEngine } from "./engine-client.mjs"; + +const $ = (id) => document.getElementById(id); + +// Taille d'un fichier du site, brute et compressée gzip (comme le ferait un +// serveur qui compresse ses réponses). +async function fileSize(name) { + const blob = await (await fetch(name, { cache: "no-store" })).blob(); + const gzipped = blob.stream().pipeThrough(new CompressionStream("gzip")); + const gzipBytes = (await new Response(gzipped).arrayBuffer()).byteLength; + return { name, bytes: blob.size, gzipBytes }; +} + +function addRow(cells) { + const row = $("table").insertRow(); + for (const text of cells) { + row.insertCell().textContent = text; + } +} + +async function measure() { + $("start").disabled = true; + $("results").hidden = true; + $("table").replaceChildren(); + + $("status").textContent = "Chargement du moteur…"; + const start = performance.now(); + const engine = startEngine(); + await engine.ready; + const loadMs = performance.now() - start; + + const { positions } = await (await fetch("wasm/positions.json")).json(); + let memoryBytes = 0; + const times = await measureTimes({ + bestMove: (...args) => engine.bestMove(...args).then(keepMemory), + cubeDecision: (...args) => engine.cubeDecision(...args).then(keepMemory), + }, positions, (done, total) => { + $("status").textContent = "Calcul " + done + " sur " + total + "…"; + }); + function keepMemory(answer) { + memoryBytes = answer.memoryBytes; + return answer; + } + + $("status").textContent = "Mesure de la taille à télécharger…"; + const files = await Promise.all(DOWNLOADED_FILES.map(fileSize)); + + for (const s of summarize(times)) { + addRow([s.label, Math.round(s.medianMs) + " ms", Math.round(s.maxMs) + " ms", + s.limitMs + " ms", s.ok ? "OK" : "dépassé"]); + } + const gzipTotal = files.reduce((sum, f) => sum + f.gzipBytes, 0); + addRow(["Taille compressée", "", (gzipTotal / 1e6).toFixed(1).replace(".", ",") + " Mo", + DOWNLOAD_LIMIT_BYTES / 1e6 + " Mo", gzipTotal < DOWNLOAD_LIMIT_BYTES ? "OK" : "dépassé"]); + + $("report").value = formatReport({ + environment: navigator.userAgent, files, loadMs, memoryBytes, times, + }); + $("results").hidden = false; + $("status").textContent = "Mesure terminée."; +} + +// Copie dans le presse-papiers. L'API moderne n'existe que sur les pages +// sécurisées (https ou localhost) : sur le réseau local en http, on +// sélectionne le texte et on utilise l'ancienne commande de copie. +async function copyReport() { + try { + if (navigator.clipboard) { + await navigator.clipboard.writeText($("report").value); + } else { + $("report").select(); + if (!document.execCommand("copy")) { + throw new Error(); + } + } + $("copy-status").textContent = "Rapport copié : collez-le dans la conversation."; + } catch { + $("report").select(); + $("copy-status").textContent = "Copie impossible : le texte est sélectionné, " + + "copiez-le à la main (appui long, puis Copier)."; + } +} + +$("start").onclick = () => measure().catch((error) => { + $("status").textContent = "La mesure a échoué : " + error.message; + $("status").classList.add("error"); + $("start").disabled = false; +}); +$("copy").onclick = copyReport; diff --git a/web/bench.html b/web/bench.html new file mode 100644 index 0000000..ca4d92a --- /dev/null +++ b/web/bench.html @@ -0,0 +1,35 @@ + + + + + +Ustagammon : mesure du moteur + + + + +
+

Mesure du moteur

+

Cette page chronomètre le moteur sur les positions de référence : meilleur coup + aux niveaux rapide et fort, décision de videau au niveau fort. Elle mesure aussi + la taille à télécharger et la mémoire utilisée. Comptez une à quelques minutes ; + gardez l'écran allumé et la page au premier plan.

+ +

+ + + +

Page de test

+
+ + diff --git a/web/benchmark.mjs b/web/benchmark.mjs new file mode 100644 index 0000000..ee0aa86 --- /dev/null +++ b/web/benchmark.mjs @@ -0,0 +1,138 @@ +// benchmark.mjs -- mesure du moteur WebAssembly, partagée par la page de +// mesure (bench.html, dans le navigateur) et `make bench` (sous Node). +// +// Copyright (C) 2026 les auteurs d'Ustagammon. +// Licence : GPLv3 ou ultérieure (voir LICENSE). +// +// Sur les positions de référence (tests/reference/positions.json) : temps du +// meilleur coup à 0 et 2 plis pour les positions avec dés, temps de la +// décision de videau à 2 plis pour les autres. Le rapport compare aux seuils +// de l'étape 0b (docs/etape-0.md). + +// Seuils de l'étape 0b. Un temps respecte son seuil si son maximum, sur +// toutes les positions, est en dessous (la médiane est donnée en plus). +export const TIME_THRESHOLDS = [ + { key: "move0", label: "Meilleur coup, 0 pli", limitMs: 300 }, + { key: "move2", label: "Meilleur coup, 2 plis", limitMs: 3000 }, + { key: "cube2", label: "Décision de videau, 2 plis", limitMs: 3000 }, +]; + +// Taille totale à télécharger, compressée : moins de 40 Mo. +export const DOWNLOAD_LIMIT_BYTES = 40e6; + +// Fichiers téléchargés pour faire tourner le moteur dans la page, chemins +// relatifs à la racine du site (web/ ; wasm/ est build/wasm/). +export const DOWNLOADED_FILES = [ + "index.html", + "style.css", + "page.mjs", + "engine-client.mjs", + "engine-worker.mjs", + "engine-wasm.mjs", + "wasm/engine.mjs", + "wasm/engine.wasm", + "wasm/engine.data", +]; + +// engine : objet avec bestMove(positionId, matchId, dice, ply) et +// cubeDecision(positionId, matchId, ply), qui renvoient (ou promettent) +// { result, ms }. +// positions : le tableau « positions » de positions.json. +// onProgress(done, total) : appelé après chaque calcul. +// Renvoie, pour chaque clé de TIME_THRESHOLDS, la liste des +// { id, ms } mesurés. +export async function measureTimes(engine, positions, onProgress = () => {}) { + const tasks = []; + for (const p of positions) { + if (p.type === "move") { + tasks.push(["move0", p, () => engine.bestMove(p.position_id, p.match_id, p.dice, 0)]); + tasks.push(["move2", p, () => engine.bestMove(p.position_id, p.match_id, p.dice, 2)]); + } else { + tasks.push(["cube2", p, () => engine.cubeDecision(p.position_id, p.match_id, 2)]); + } + } + + const times = Object.fromEntries(TIME_THRESHOLDS.map((t) => [t.key, []])); + for (const [i, [key, position, compute]] of tasks.entries()) { + const { ms } = await compute(); + times[key].push({ id: position.id, ms }); + onProgress(i + 1, tasks.length); + } + return times; +} + +function median(values) { + const sorted = [...values].sort((a, b) => a - b); + const middle = Math.floor(sorted.length / 2); + return sorted.length % 2 ? sorted[middle] : (sorted[middle - 1] + sorted[middle]) / 2; +} + +// Nombres à la française : virgule décimale. +function decimal(value, digits) { + return value.toFixed(digits).replace(".", ","); +} + +function megabytes(bytes) { + return decimal(bytes / 1e6, 1) + " Mo"; +} + +function verdict(ok) { + return ok ? "OK" : "DÉPASSÉ"; +} + +// Résumé d'une série de temps : { count, medianMs, maxMs, maxId, ok }. +export function summarize(times) { + return TIME_THRESHOLDS.map((threshold) => { + const list = times[threshold.key]; + const worst = list.reduce((a, b) => (b.ms > a.ms ? b : a)); + return { + ...threshold, + count: list.length, + medianMs: median(list.map((t) => t.ms)), + maxMs: worst.ms, + maxId: worst.id, + ok: worst.ms < threshold.limitMs, + }; + }); +} + +// Rapport texte, à coller dans la conversation. +// environment : description de l'appareil (navigateur ou Node) ; +// files : [{ name, bytes, gzipBytes }] ; loadMs : chargement du moteur ; +// memoryBytes : mémoire WebAssembly après la mesure ; times : measureTimes. +export function formatReport({ environment, files, loadMs, memoryBytes, times }) { + const total = files.reduce((sum, f) => sum + f.bytes, 0); + const totalGzip = files.reduce((sum, f) => sum + f.gzipBytes, 0); + const sizeOk = totalGzip < DOWNLOAD_LIMIT_BYTES; + const summary = summarize(times); + const allOk = sizeOk && summary.every((s) => s.ok); + + const lines = [ + "Ustagammon : mesure du moteur WebAssembly (étape 0b)", + "Date : " + new Date().toISOString(), + "Environnement : " + environment, + "", + "Chargement du moteur : " + Math.round(loadMs) + " ms", + "Mémoire WebAssembly après la mesure : " + megabytes(memoryBytes), + "Taille téléchargée : " + megabytes(total) + " non compressée, " + + megabytes(totalGzip) + " compressée gzip ; seuil " + + megabytes(DOWNLOAD_LIMIT_BYTES) + " compressée : " + verdict(sizeOk), + "", + ]; + for (const s of summary) { + lines.push(s.label + " (" + s.count + " positions) : médiane " + + decimal(s.medianMs, 1) + " ms, maximum " + decimal(s.maxMs, 1) + " ms (" + + s.maxId + ") ; seuil " + s.limitMs + " ms : " + verdict(s.ok)); + } + lines.push("", "Bilan : " + (allOk ? "tous les seuils sont respectés." + : "au moins un seuil est dépassé."), "", "Détail des fichiers :"); + for (const f of files) { + lines.push(" " + f.name + " : " + f.bytes + " octets, " + f.gzipBytes + " compressé gzip"); + } + lines.push("", "Détail des temps (ms) :"); + for (const s of summary) { + lines.push(" " + s.label + " : " + times[s.key] + .map((t) => t.id + " " + Math.round(t.ms)).join(", ")); + } + return lines.join("\n") + "\n"; +} diff --git a/web/engine-client.mjs b/web/engine-client.mjs new file mode 100644 index 0000000..d25459c --- /dev/null +++ b/web/engine-client.mjs @@ -0,0 +1,65 @@ +// engine-client.mjs -- le moteur vu depuis la page : démarre le Web Worker +// (engine-worker.mjs) et lui envoie les commandes. +// +// Copyright (C) 2026 les auteurs d'Ustagammon. +// Licence : GPLv3 ou ultérieure (voir LICENSE). +// +// Toutes les fonctions renvoient une promesse de { result, ms, memoryBytes } : +// result est l'objet JSON d'engine-cli, ms le temps de calcul mesuré dans le +// Worker. La promesse est rejetée si le moteur signale une erreur. + +import { commands } from "./engine-wasm.mjs"; + +export function startEngine() { + const worker = new Worker(new URL("engine-worker.mjs", import.meta.url), { type: "module" }); + const pending = new Map(); + let nextId = 1; + let resolveReady, rejectReady; + const ready = new Promise((resolve, reject) => { + resolveReady = resolve; + rejectReady = reject; + }); + + worker.onmessage = (event) => { + const message = event.data; + if (message.type === "ready") { + resolveReady(message); + } else if (message.type === "failed") { + rejectReady(new Error(message.message)); + } else { + const { resolve, reject } = pending.get(message.id); + pending.delete(message.id); + if (message.error) { + reject(new Error(message.error)); + } else { + resolve(message); + } + } + }; + // Erreur au chargement du Worker lui-même (fichier absent, navigateur + // trop ancien pour les Workers en module ES…). + worker.onerror = (event) => { + rejectReady(new Error(event.message || "le Web Worker du moteur n'a pas démarré")); + }; + + function run(args) { + const id = nextId++; + return new Promise((resolve, reject) => { + pending.set(id, { resolve, reject }); + worker.postMessage({ id, args: args.map(String) }); + }); + } + + return { + // Promesse de { loadMs, memoryBytes } une fois le moteur chargé. + ready, + bestMove: (positionId, matchId, dice, ply) => + run(commands.bestMove(positionId, matchId, dice, ply)), + cubeDecision: (positionId, matchId, ply) => + run(commands.cubeDecision(positionId, matchId, ply)), + evaluate: (positionId, matchId, ply) => + run(commands.evaluate(positionId, matchId, ply)), + reference: (positionId, matchId, dice, ply) => + run(commands.reference(positionId, matchId, dice, ply)), + }; +} diff --git a/web/engine-worker.mjs b/web/engine-worker.mjs new file mode 100644 index 0000000..ec97e35 --- /dev/null +++ b/web/engine-worker.mjs @@ -0,0 +1,38 @@ +// engine-worker.mjs -- Web Worker qui fait tourner le moteur WebAssembly. +// +// Copyright (C) 2026 les auteurs d'Ustagammon. +// Licence : GPLv3 ou ultérieure (voir LICENSE). +// +// Le moteur calcule ici, jamais sur le fil d'affichage de la page. Messages : +// - envoyé une fois au chargement : { type: "ready", loadMs, memoryBytes } +// ou { type: "failed", message } ; +// - reçu : { id, args }, les arguments d'une commande engine-cli ; +// - répondu : { id, result, ms, memoryBytes } ou { id, error }. +// Les commandes sont traitées une à une, dans l'ordre d'arrivée. + +import createEngineModule from "./wasm/engine.mjs"; +import { loadEngine } from "./engine-wasm.mjs"; + +const start = performance.now(); +const wasmDir = new URL("wasm/", import.meta.url).href; +const ready = loadEngine(createEngineModule, wasmDir); + +ready.then( + (engine) => postMessage({ + type: "ready", + loadMs: performance.now() - start, + memoryBytes: engine.memoryBytes(), + }), + (error) => postMessage({ type: "failed", message: String(error.message || error) }), +); + +onmessage = async (event) => { + const { id, args } = event.data; + try { + const engine = await ready; + const { result, ms } = engine.run(args); + postMessage({ id, result, ms, memoryBytes: engine.memoryBytes() }); + } catch (error) { + postMessage({ id, error: String(error.message || error) }); + } +}; diff --git a/web/index.html b/web/index.html new file mode 100644 index 0000000..26aaad9 --- /dev/null +++ b/web/index.html @@ -0,0 +1,48 @@ + + + + + +Ustagammon : test du moteur + + + + +
+

Test du moteur

+

Le moteur GNU Backgammon, compilé en WebAssembly, calcule dans le navigateur.

+

Chargement du moteur…

+ +
+ + + +
+ + + +
+ +
+ + + +

Page de mesure

+
+ + diff --git a/web/page.mjs b/web/page.mjs new file mode 100644 index 0000000..a4a325c --- /dev/null +++ b/web/page.mjs @@ -0,0 +1,71 @@ +// page.mjs -- page de test du moteur (index.html) : meilleur coup d'une +// position, avec son temps de calcul. +// +// Copyright (C) 2026 les auteurs d'Ustagammon. +// Licence : GPLv3 ou ultérieure (voir LICENSE). + +import { startEngine } from "./engine-client.mjs"; + +const $ = (id) => document.getElementById(id); +const engine = startEngine(); + +engine.ready.then( + ({ loadMs }) => { + $("status").textContent = "Moteur prêt, chargé en " + Math.round(loadMs) + " ms."; + $("best-move").disabled = false; + }, + (error) => { + $("status").textContent = "Le moteur n'a pas pu se charger : " + error.message; + $("status").classList.add("error"); + }, +); + +// Exemples : les positions de référence avec des dés. +fetch("wasm/positions.json") + .then((response) => response.json()) + .then(({ positions }) => { + for (const p of positions.filter((p) => p.type === "move")) { + const option = new Option(p.id + " : " + p.description, p.id); + option.position = p; + $("example").add(option); + } + }) + .catch(() => {}); // la page reste utilisable sans les exemples + +$("example").onchange = () => { + const p = $("example").selectedOptions[0].position; + if (p) { + $("position-id").value = p.position_id; + $("match-id").value = p.match_id; + [$("die1").value, $("die2").value] = p.dice; + } +}; + +function showResult(move, details, time) { + $("move").textContent = move; + $("details").textContent = details; + $("time").textContent = time; + $("result").hidden = false; +} + +$("form").onsubmit = async (event) => { + event.preventDefault(); + $("best-move").disabled = true; + $("result").hidden = true; + try { + const { result, ms } = await engine.bestMove($("position-id").value.trim(), + $("match-id").value.trim(), [$("die1").value, $("die2").value], $("ply").value); + const best = result.best_move; + if (best) { + showResult(best.move, "Équité " + best.equity.toFixed(3).replace(".", ",") + + ", chances de gain " + (100 * best.probabilities.win).toFixed(1).replace(".", ",") + + " %, évalué à " + best.ply + " pli(s).", Math.round(ms) + " ms"); + } else { + showResult("aucun coup possible", "", Math.round(ms) + " ms"); + } + } catch (error) { + showResult("erreur", error.message, ""); + } finally { + $("best-move").disabled = false; + } +}; diff --git a/web/style.css b/web/style.css new file mode 100644 index 0000000..9bdc915 --- /dev/null +++ b/web/style.css @@ -0,0 +1,113 @@ +/* Pages de test du moteur : mise en forme minimale, lisible sur téléphone. */ + +:root { + --text: #1d1d1b; + --background: #fbfaf7; + --muted: #5f5e5a; + --accent: #1f5c4a; + --error: #a3261b; + --border: #cfccc4; +} + +@media (prefers-color-scheme: dark) { + :root { + --text: #ecebe6; + --background: #1b1c1a; + --muted: #a9a8a2; + --accent: #7cc4a8; + --error: #f08a7e; + --border: #4a4a46; + } +} + +* { + box-sizing: border-box; +} + +body { + margin: 0; + font: 17px/1.5 system-ui, sans-serif; + color: var(--text); + background: var(--background); +} + +main { + max-width: 40rem; + margin: 0 auto; + padding: 1rem; +} + +h1 { + font-size: 1.5rem; +} + +label { + display: block; + margin-bottom: 0.75rem; +} + +input, +select, +button, +textarea { + display: block; + width: 100%; + margin-top: 0.25rem; + padding: 0.5rem; + font: inherit; + color: inherit; + background: transparent; + border: 1px solid var(--border); + border-radius: 6px; +} + +.row { + display: flex; + gap: 0.75rem; +} + +.row label { + flex: 1; +} + +button { + margin: 0.5rem 0 1rem; + font-weight: 600; + color: var(--background); + background: var(--accent); + border-color: var(--accent); +} + +button:disabled { + opacity: 0.5; +} + +textarea { + height: 16rem; + font: 13px/1.4 monospace; +} + +table { + width: 100%; + border-collapse: collapse; +} + +th, +td { + padding: 0.25rem; + text-align: left; + border-bottom: 1px solid var(--border); +} + +.status { + color: var(--muted); +} + +.error { + color: var(--error); +} + +.result { + padding: 0.5rem 1rem; + border-left: 4px solid var(--accent); +}