Bilan de fin de partie et écran d'analyse (1e) #52
@@ -139,9 +139,7 @@ export type AnalysisTask =
|
||||
* a pas encore (ou à un autre niveau). */
|
||||
export function reviewOf(journal: GameJournal): GameReview {
|
||||
const review = journal.review;
|
||||
return review !== undefined && review.ply === ANALYSIS_PLY
|
||||
? review
|
||||
: emptyReview(ANALYSIS_PLY);
|
||||
return review !== undefined && review.ply === ANALYSIS_PLY ? review : emptyReview(ANALYSIS_PLY);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -247,11 +245,7 @@ export async function runAnalysis(
|
||||
// Le camp qui joue le jet ; au jet d'ouverture, celui qu'il
|
||||
// désigne. La position de départ est la même pour les deux.
|
||||
const roller = event.side ?? replay(line).turn ?? "player";
|
||||
const luck = await engine.luck(
|
||||
before.position,
|
||||
engineCube(before, roller),
|
||||
event.roll,
|
||||
);
|
||||
const luck = await engine.luck(before.position, engineCube(before, roller), event.roll);
|
||||
return withReview(journal, { ...review, luck: { ...review.luck, [event.id]: luck } });
|
||||
}
|
||||
case "chance": {
|
||||
@@ -477,7 +471,10 @@ export function summarizeAnalysis(journal: GameJournal): GameSummary {
|
||||
if (!(a.kind === "cube" && a.action === "noDouble" && verdict === "good")) {
|
||||
counts[verdict]++;
|
||||
}
|
||||
if (verdict !== "good" && (toReview === null || a.equityLoss < toReview.advice.equityLoss)) {
|
||||
if (
|
||||
verdict !== "good" &&
|
||||
(toReview === null || a.equityLoss < toReview.advice.equityLoss)
|
||||
) {
|
||||
toReview = { turn: turnOf.get(a.eventId) ?? 0, advice: a };
|
||||
}
|
||||
}
|
||||
@@ -577,7 +574,6 @@ export function chanceCurve(journal: GameJournal): WinChanceCurve {
|
||||
export function replayPoint(journal: GameJournal, turn: Turn): string | null {
|
||||
const main = mainAdvice(journal, turn);
|
||||
const decisions = decisionsOf(turn.events, "player");
|
||||
const event =
|
||||
main === null ? decisions.at(-1) : decisions.find((e) => e.id === main.eventId);
|
||||
const event = main === null ? decisions.at(-1) : decisions.find((e) => e.id === main.eventId);
|
||||
return event?.parent ?? null;
|
||||
}
|
||||
|
||||
@@ -15,7 +15,8 @@ import {
|
||||
type Verdict,
|
||||
verdictOf,
|
||||
} from "../game/advice.js";
|
||||
import type { CubeAction } from "../game/engine.js";
|
||||
import type { CubeAction, LuckRating } from "../game/engine.js";
|
||||
import type { GameSummary } from "./game-analysis.js";
|
||||
|
||||
/** Les gabarits, par clé de section (« coup.meilleur »…). */
|
||||
export type MasterPhrases = ReadonlyMap<string, readonly string[]>;
|
||||
@@ -93,8 +94,52 @@ export const PHRASE_KEYS: readonly string[] = [
|
||||
"contexte.videau.double",
|
||||
"contexte.videau.pas-de-double",
|
||||
"contexte.videau.reponse",
|
||||
"bilan.jeu.gagne",
|
||||
"bilan.jeu.perdu",
|
||||
"bilan.des",
|
||||
"bilan.des.tres-pour",
|
||||
"bilan.des.pour",
|
||||
"bilan.des.neutres",
|
||||
"bilan.des.contre",
|
||||
"bilan.des.tres-contre",
|
||||
"bilan.aucun-coup",
|
||||
];
|
||||
|
||||
const DICE_KEYS: Readonly<Record<LuckRating, string>> = {
|
||||
veryLucky: "bilan.des.tres-pour",
|
||||
lucky: "bilan.des.pour",
|
||||
none: "bilan.des.neutres",
|
||||
unlucky: "bilan.des.contre",
|
||||
veryUnlucky: "bilan.des.tres-contre",
|
||||
};
|
||||
|
||||
/** La chance de vos dés sur la partie, en mots : « un peu contre vous »… */
|
||||
export function diceWords(phrases: MasterPhrases, rating: LuckRating): string {
|
||||
return pick(phrases, DICE_KEYS[rating], "0");
|
||||
}
|
||||
|
||||
/**
|
||||
* La lecture du bilan d'une partie finie : ce qui a fait la différence,
|
||||
* selon le résultat corrigé de la chance (gnubg) ; et vos dés, en mots.
|
||||
* Partie gagnée : votre jeu, si le résultat corrigé de la chance reste
|
||||
* positif, sinon les dés ; partie perdue : le jeu de l'ordinateur, si le
|
||||
* résultat corrigé reste négatif, sinon les dés.
|
||||
*/
|
||||
export function summaryReading(phrases: MasterPhrases, summary: GameSummary): string {
|
||||
const dice = diceWords(phrases, summary.player.luck.rating);
|
||||
const won = summary.result > 0;
|
||||
const playDecided = won ? summary.luckAdjustedResult > 0 : summary.luckAdjustedResult < 0;
|
||||
if (!playDecided) {
|
||||
return pick(phrases, "bilan.des", "0");
|
||||
}
|
||||
return fillIn(pick(phrases, won ? "bilan.jeu.gagne" : "bilan.jeu.perdu", "0"), { dice });
|
||||
}
|
||||
|
||||
/** « Aucun coup à revoir… » : la carte du coup à revoir sans erreur. */
|
||||
export function nothingToReview(phrases: MasterPhrases): string {
|
||||
return pick(phrases, "bilan.aucun-coup", "0");
|
||||
}
|
||||
|
||||
/** Ce que le maître dit d'un conseil du moteur. */
|
||||
export function masterWords(phrases: MasterPhrases, advice: Advice): MasterWords {
|
||||
return advice.kind === "move" ? moveWords(phrases, advice) : cubeWords(phrases, advice);
|
||||
|
||||
@@ -17,7 +17,7 @@ import type { Cube } from "./cube.js";
|
||||
import type { Level, ResultKind } from "./engine.js";
|
||||
import type { Match, MatchAfterGame } from "./match.js";
|
||||
import type { HalfMove, PositionId } from "./position.js";
|
||||
import { REVIEW_VERSION, type GameReview } from "./review.js";
|
||||
import { type GameReview, REVIEW_VERSION } from "./review.js";
|
||||
import type { Roll } from "./roll.js";
|
||||
import type { Side } from "./side.js";
|
||||
|
||||
|
||||
@@ -6,8 +6,10 @@
|
||||
// Licence : GPLv3 ou ultérieure (voir LICENSE).
|
||||
|
||||
import { analyseDecision } from "./domain/analysis/analyse.js";
|
||||
import { runAnalysis } from "./domain/analysis/game-analysis.js";
|
||||
import { Game } from "./domain/game/game.js";
|
||||
import { linkOf, readPosition } from "./domain/game/position-link.js";
|
||||
import { levelOf } from "./domain/game/saved-game.js";
|
||||
import { exportSgf } from "./domain/game/sgf.js";
|
||||
import {
|
||||
illustratedMove,
|
||||
@@ -103,6 +105,22 @@ startApp({
|
||||
journal: async (id) => (await storage().library.load(id))?.journal ?? null,
|
||||
shownId: () => storage().session.shownId,
|
||||
open: (id, branchHead) => storage().session.open(id, branchHead),
|
||||
view: async (id) => {
|
||||
const saved = await storage().library.load(id);
|
||||
if (saved === null) {
|
||||
return null;
|
||||
}
|
||||
try {
|
||||
return Game.resume(engine, saved.journal);
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
saveAnalyses: (id, journal) => {
|
||||
storage()
|
||||
.library.saveAnalyses(id, journal, { level: levelOf(journal) })
|
||||
.catch(() => {});
|
||||
},
|
||||
remove: (id) => storage().library.remove(id),
|
||||
exportSgf: async (id) => {
|
||||
const game = await storage().library.load(id);
|
||||
@@ -143,6 +161,9 @@ startApp({
|
||||
// Cela évite aussi de télécharger deux fois ces données à la première
|
||||
// visite.
|
||||
analyse: (journal, eventId) => analyseDecision(analysisEngine, journal, eventId),
|
||||
// Le bilan et l'analyse de partie (étape 1e) : les analyses qui
|
||||
// manquent, une à une, sur le même moteur à part.
|
||||
analyseGame: (journal, task) => runAnalysis(analysisEngine, journal, task),
|
||||
startUpdates: (onAvailable) =>
|
||||
startUpdates(new URL("../sw.js", import.meta.url), worker.ready, onAvailable),
|
||||
});
|
||||
|
||||
@@ -33,6 +33,10 @@ export interface GameLibrary {
|
||||
/** Enregistre la partie id (nouvelle ou non), qui devient la partie en
|
||||
* cours. Renvoie son résumé. */
|
||||
save(id: string, journal: GameJournal, details: SavedGameDetails): Promise<SavedGameSummary>;
|
||||
/** Enregistre le journal d'une partie analysée en arrière-plan (étape
|
||||
* 1e) : ni la partie en cours ni la date de la dernière action ne
|
||||
* changent. Rien si la partie n'existe plus. */
|
||||
saveAnalyses(id: string, journal: GameJournal, details: SavedGameDetails): Promise<void>;
|
||||
/** Supprime une partie (rien si elle n'existe pas). */
|
||||
remove(id: string): Promise<void>;
|
||||
/** La partie en cours : la dernière enregistrée ou choisie (setCurrent),
|
||||
@@ -118,6 +122,15 @@ export function createGameLibrary(
|
||||
await backend.setCurrentId(id);
|
||||
return summary;
|
||||
}),
|
||||
saveAnalyses: (id, journal, details) =>
|
||||
enqueue(async () => {
|
||||
const known = await backend.summary(id);
|
||||
if (known === undefined) {
|
||||
return;
|
||||
}
|
||||
const times = { startedAt: known.startedAt, updatedAt: known.updatedAt };
|
||||
await backend.write(summarizeGame(id, journal, details, times), journal);
|
||||
}),
|
||||
remove: (id) => enqueue(() => backend.remove(id)),
|
||||
current: () =>
|
||||
enqueue(async () => {
|
||||
|
||||
+17
-83
@@ -15,16 +15,14 @@ import {
|
||||
masterCubeAction,
|
||||
type Verdict,
|
||||
} from "../domain/game/advice.js";
|
||||
import type { Game, MoveSteps } from "../domain/game/game.js";
|
||||
import type { Game } from "../domain/game/game.js";
|
||||
import { ADVICE_TEXTS, CUBE_GLOSSARY, formatEquity } from "./advice-texts.js";
|
||||
import { boardModel, moveTrace, placeOf } from "./board-model.js";
|
||||
import { checkerSpot, NO_MARKS, renderBoard, slideChecker } from "./board-view.js";
|
||||
import { boardGeometry, PORTRAIT_ASPECT } from "./geometry.js";
|
||||
import { type IconName, icon } from "./icons.js";
|
||||
import { boardSvg, createMovePlayer, drawSteps, type MovePlayer } from "./move-board.js";
|
||||
import { routeHash } from "./router.js";
|
||||
|
||||
const SLIDE_MS = 160;
|
||||
const PAUSE_MS = 120;
|
||||
/** Préfixe des identifiants du plateau de la feuille. */
|
||||
const PREFIX = "explain-";
|
||||
|
||||
/** Le pictogramme d'une appréciation (interaction.md, pictogrammes). */
|
||||
export const VERDICT_ICONS: Readonly<Record<Verdict, IconName>> = {
|
||||
@@ -85,8 +83,8 @@ export function createAdviceView(options: AdviceViewOptions): AdviceView {
|
||||
// Chaque ouverture a son numéro : une ouverture plus récente, ou la
|
||||
// fermeture, arrête l'animation en cours.
|
||||
let opened = 0;
|
||||
// Chaque coup joué sur le plateau de la feuille a aussi le sien.
|
||||
let playing = 0;
|
||||
// Le plateau de la feuille joue un coup à la fois.
|
||||
let player: MovePlayer | null = null;
|
||||
|
||||
async function show(eventId: string): Promise<void> {
|
||||
const id = ++opened;
|
||||
@@ -165,75 +163,14 @@ export function createAdviceView(options: AdviceViewOptions): AdviceView {
|
||||
done.onclick = () => options.close();
|
||||
}
|
||||
|
||||
/** Le plateau de la feuille, dans son cadre. */
|
||||
function boardSvg(box: HTMLElement): SVGSVGElement {
|
||||
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||||
svg.id = "explain-board";
|
||||
svg.setAttribute("class", "board explain-board");
|
||||
svg.setAttribute("role", "img");
|
||||
box.append(svg);
|
||||
/** Le plateau de la feuille, dans son cadre, et ce qui y joue les
|
||||
* coups. */
|
||||
function sheetBoard(box: HTMLElement): SVGSVGElement {
|
||||
const svg = boardSvg(box, "explain-board", "explain-board");
|
||||
player = createMovePlayer(svg, PREFIX, options.reducedMotion);
|
||||
return svg;
|
||||
}
|
||||
|
||||
function draw(svg: SVGSVGElement, steps: MoveSteps, index: number, traced: boolean): void {
|
||||
const boards = steps.boards[index];
|
||||
if (boards === undefined) {
|
||||
return;
|
||||
}
|
||||
const width = svg.getBoundingClientRect().width || 358;
|
||||
renderBoard(
|
||||
svg,
|
||||
boardGeometry("portrait", PORTRAIT_ASPECT, width / 640),
|
||||
boardModel(boards),
|
||||
{
|
||||
...NO_MARKS,
|
||||
dice: [],
|
||||
cube: null,
|
||||
band: null,
|
||||
controls: null,
|
||||
trace: traced ? moveTrace(steps.side, steps.halfMoves, steps.hits) : null,
|
||||
},
|
||||
);
|
||||
// Les flèches des traces renvoient à leur pointe par identifiant :
|
||||
// celui du plateau de jeu serait pris à sa place.
|
||||
for (const marker of svg.querySelectorAll("marker[id]")) {
|
||||
marker.id = `explain-${marker.id}`;
|
||||
}
|
||||
for (const path of svg.querySelectorAll("[marker-end]")) {
|
||||
const ref = path.getAttribute("marker-end") ?? "";
|
||||
path.setAttribute("marker-end", ref.replace("url(#", "url(#explain-"));
|
||||
}
|
||||
}
|
||||
|
||||
/** Joue un coup pion par pion (sans mouvement si le système le
|
||||
* demande), puis laisse ses traces. */
|
||||
async function animate(svg: SVGSVGElement, steps: MoveSteps): Promise<void> {
|
||||
const id = ++playing;
|
||||
if (!options.reducedMotion.matches) {
|
||||
for (const [i, halfMove] of steps.halfMoves.entries()) {
|
||||
if (id !== playing) {
|
||||
return;
|
||||
}
|
||||
if (i > 0) {
|
||||
await new Promise((resolve) => setTimeout(resolve, PAUSE_MS));
|
||||
}
|
||||
const from = placeOf(steps.side, halfMove.from);
|
||||
const to = placeOf(steps.side, halfMove.to);
|
||||
draw(svg, steps, i, false);
|
||||
const start = checkerSpot(svg, from);
|
||||
const victim = steps.hits[i] === true ? checkerSpot(svg, to) : null;
|
||||
draw(svg, steps, i + 1, false);
|
||||
await Promise.all([
|
||||
start && slideChecker(svg, to, start, SLIDE_MS),
|
||||
victim && slideChecker(svg, "bar-computer", victim, SLIDE_MS),
|
||||
]);
|
||||
}
|
||||
}
|
||||
if (id === playing) {
|
||||
draw(svg, steps, steps.halfMoves.length, true);
|
||||
}
|
||||
}
|
||||
|
||||
async function showMoves(
|
||||
id: number,
|
||||
game: Game,
|
||||
@@ -250,13 +187,12 @@ export function createAdviceView(options: AdviceViewOptions): AdviceView {
|
||||
return;
|
||||
}
|
||||
const legend = element(body, "p", { id: "explain-legend", className: "explain-legend" });
|
||||
const svg = boardSvg(boardBox);
|
||||
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);
|
||||
draw(svg, mine, 0, false);
|
||||
void animate(svg, mine);
|
||||
void player?.play(mine);
|
||||
return;
|
||||
}
|
||||
const choice = element(body, "div", { id: "explain-choice", className: "segmented" });
|
||||
@@ -287,9 +223,7 @@ export function createAdviceView(options: AdviceViewOptions): AdviceView {
|
||||
legend.textContent = text;
|
||||
svg.setAttribute("aria-label", text);
|
||||
svg.dataset.move = shown;
|
||||
const steps = shown === "mine" ? mine : best;
|
||||
draw(svg, steps, 0, false);
|
||||
void animate(svg, steps);
|
||||
void player?.play(shown === "mine" ? mine : best);
|
||||
};
|
||||
for (const key of ["mine", "best"] as const) {
|
||||
const button = buttons[key];
|
||||
@@ -320,9 +254,9 @@ export function createAdviceView(options: AdviceViewOptions): AdviceView {
|
||||
if (id !== opened) {
|
||||
return;
|
||||
}
|
||||
const svg = boardSvg(boardBox);
|
||||
const svg = boardSvg(boardBox, "explain-board", "explain-board");
|
||||
svg.setAttribute("aria-label", ADVICE_TEXTS.legendCube);
|
||||
draw(svg, steps, 0, false);
|
||||
drawSteps(svg, steps, 0, false, PREFIX);
|
||||
element(boardBox, "p", { className: "explain-legend", text: ADVICE_TEXTS.legendCube });
|
||||
}
|
||||
|
||||
@@ -399,7 +333,7 @@ export function createAdviceView(options: AdviceViewOptions): AdviceView {
|
||||
show,
|
||||
hide() {
|
||||
opened++;
|
||||
playing++;
|
||||
player?.stop();
|
||||
if (!veil.hidden) {
|
||||
veil.hidden = true;
|
||||
sheet.replaceChildren();
|
||||
|
||||
@@ -0,0 +1,667 @@
|
||||
// L'écran d'analyse d'une partie (#/parties/<id>/analyse/<coup>, étape
|
||||
// 1e ; charte, ecrans-etape-1.md, « Analyse ») : une page qui défile, avec
|
||||
// la courbe de vos chances de gagner coup après coup, parcourue du doigt ;
|
||||
// le visualiseur du coup choisi (votre coup contre le coup du maître,
|
||||
// « Rejouer d'ici ») ; la liste des coups à revoir, filtrable ; et les
|
||||
// chiffres du moteur, repliés.
|
||||
//
|
||||
// Copyright (C) 2026 les auteurs d'Ustagammon.
|
||||
// Licence : GPLv3 ou ultérieure (voir LICENSE).
|
||||
//
|
||||
// La courbe est dessinée à la main en SVG (aucune bibliothèque). Chaque
|
||||
// coup y a une bande verticale sur toute la hauteur, cible du doigt : on
|
||||
// touche ou on glisse, et le coup sous le doigt est choisi. Le coup choisi
|
||||
// est dans l'adresse ; en changer remplace l'adresse (le retour du
|
||||
// téléphone quitte l'écran, il ne repasse pas par chaque coup).
|
||||
|
||||
import {
|
||||
chanceCurve,
|
||||
computerMoveAdvice,
|
||||
type GameSummary,
|
||||
gameTurns,
|
||||
mainAdvice,
|
||||
replayPoint,
|
||||
summarizeAnalysis,
|
||||
type Turn,
|
||||
type WinChanceCurve,
|
||||
} from "../domain/analysis/game-analysis.js";
|
||||
import { type MasterPhrases, masterWords } from "../domain/analysis/phrases.js";
|
||||
import { type Advice, type Verdict, verdictOf } from "../domain/game/advice.js";
|
||||
import type { GameJournal } from "../domain/game/events.js";
|
||||
import type { Game, MoveSteps } from "../domain/game/game.js";
|
||||
import { formatHalfMoves } from "../domain/game/position.js";
|
||||
import { VERDICT_ICONS } from "./advice-view.js";
|
||||
import { icon } from "./icons.js";
|
||||
import { MATCH_TEXTS } from "./match-texts.js";
|
||||
import { boardSvg, createMovePlayer, drawSteps, type MovePlayer } from "./move-board.js";
|
||||
import { percent, REVIEW_TEXTS, signed } from "./review-texts.js";
|
||||
import { routeHash } from "./router.js";
|
||||
|
||||
/** Ce que montre l'écran. */
|
||||
export interface AnalysisData {
|
||||
readonly id: string;
|
||||
readonly journal: GameJournal;
|
||||
/** La partie, pour rejouer les coups sur le plateau. */
|
||||
readonly game: Game;
|
||||
/** Le coup choisi (null : le coup à revoir, ou le premier). */
|
||||
readonly turn: number | null;
|
||||
readonly phrases: MasterPhrases | null;
|
||||
}
|
||||
|
||||
export interface AnalysisViewOptions {
|
||||
/** La page (index.html) ; son contenu est construit ici. */
|
||||
readonly section: HTMLElement;
|
||||
readonly reducedMotion: MediaQueryList;
|
||||
/** Choisir un autre coup : remplacer l'adresse. */
|
||||
readonly select: (turn: number) => void;
|
||||
/** « Rejouer d'ici » : revenir à cet événement de la partie. */
|
||||
readonly replay: (id: string, eventId: string) => void;
|
||||
/** Le lien « Retour » (quitter l'écran sans empiler d'adresse). */
|
||||
readonly back: (link: HTMLAnchorElement) => void;
|
||||
}
|
||||
|
||||
export interface AnalysisView {
|
||||
show(data: AnalysisData | null): void;
|
||||
hide(): void;
|
||||
/** ← et → : le coup d'avant ou d'après. */
|
||||
step(delta: number): void;
|
||||
}
|
||||
|
||||
type Filter = "all" | "errors" | "doubtful";
|
||||
type Shown = "mine" | "best";
|
||||
|
||||
const SVG_NS = "http://www.w3.org/2000/svg";
|
||||
/** Hauteur de la courbe, et marges du tracé (repère en pixels). */
|
||||
const CURVE_HEIGHT = 168;
|
||||
const PAD = { left: 40, right: 10, top: 10, bottom: 10 };
|
||||
|
||||
function element<K extends keyof HTMLElementTagNameMap>(
|
||||
parent: HTMLElement,
|
||||
tag: K,
|
||||
options: { id?: string; className?: string; text?: string } = {},
|
||||
): HTMLElementTagNameMap[K] {
|
||||
const child = document.createElement(tag);
|
||||
if (options.id !== undefined) {
|
||||
child.id = options.id;
|
||||
}
|
||||
if (options.className !== undefined) {
|
||||
child.className = options.className;
|
||||
}
|
||||
if (options.text !== undefined) {
|
||||
child.textContent = options.text;
|
||||
}
|
||||
parent.append(child);
|
||||
return child;
|
||||
}
|
||||
|
||||
function svgElement<K extends keyof SVGElementTagNameMap>(
|
||||
parent: Element,
|
||||
tag: K,
|
||||
attributes: Record<string, string | number>,
|
||||
): SVGElementTagNameMap[K] {
|
||||
const child = document.createElementNS(SVG_NS, tag);
|
||||
for (const [name, value] of Object.entries(attributes)) {
|
||||
child.setAttribute(name, String(value));
|
||||
}
|
||||
parent.append(child);
|
||||
return child;
|
||||
}
|
||||
|
||||
/** Les verdicts que montre chaque filtre. */
|
||||
const FILTERS: Readonly<Record<Filter, readonly Verdict[]>> = {
|
||||
all: ["good", "doubtful", "bad", "veryBad"],
|
||||
errors: ["bad", "veryBad"],
|
||||
doubtful: ["doubtful"],
|
||||
};
|
||||
|
||||
export function createAnalysisView(options: AnalysisViewOptions): AnalysisView {
|
||||
const { section } = options;
|
||||
let data: AnalysisData | null = null;
|
||||
let turns: Turn[] = [];
|
||||
let curve: WinChanceCurve = [];
|
||||
let selected = 1;
|
||||
let filter: Filter = "all";
|
||||
// Ce qui est dessiné dans le visualiseur, pour ne pas rejouer le coup à
|
||||
// chaque analyse rangée.
|
||||
let drawnTurn = "";
|
||||
let player: MovePlayer | null = null;
|
||||
// Chaque changement de coup a son numéro : un plateau qui arrive trop
|
||||
// tard n'est pas dessiné.
|
||||
let request = 0;
|
||||
|
||||
// La page : en-tête, courbe, visualiseur, liste, chiffres.
|
||||
const head = element(section, "div", { className: "analysis-head" });
|
||||
const back = element(head, "a", {
|
||||
id: "analysis-back",
|
||||
className: "button secondary",
|
||||
text: REVIEW_TEXTS.back,
|
||||
});
|
||||
back.href = "#/";
|
||||
options.back(back);
|
||||
element(head, "h2", {
|
||||
id: "analysis-title",
|
||||
className: "analysis-title",
|
||||
text: REVIEW_TEXTS.analysisTitle,
|
||||
});
|
||||
const message = element(section, "p", {
|
||||
id: "analysis-message",
|
||||
className: "analysis-message",
|
||||
});
|
||||
message.setAttribute("role", "status");
|
||||
|
||||
const curveCard = element(section, "section", { className: "analysis-card curve-card" });
|
||||
element(curveCard, "h3", { className: "overline", text: REVIEW_TEXTS.curveTitle });
|
||||
const curveSvg = document.createElementNS(SVG_NS, "svg");
|
||||
curveSvg.id = "analysis-curve";
|
||||
curveSvg.setAttribute("class", "analysis-curve");
|
||||
curveSvg.setAttribute("role", "slider");
|
||||
curveSvg.setAttribute("tabindex", "0");
|
||||
curveCard.append(curveSvg);
|
||||
|
||||
const viewer = element(section, "section", {
|
||||
id: "analysis-viewer",
|
||||
className: "analysis-card viewer",
|
||||
});
|
||||
const nav = element(viewer, "div", { className: "viewer-nav" });
|
||||
const prev = element(nav, "a", { id: "analysis-prev", className: "icon-button viewer-step" });
|
||||
prev.append(icon("chevron"));
|
||||
prev.setAttribute("aria-label", REVIEW_TEXTS.previous);
|
||||
const turnTitle = element(nav, "p", { id: "analysis-turn", className: "viewer-turn" });
|
||||
turnTitle.setAttribute("aria-live", "polite");
|
||||
const next = element(nav, "a", { id: "analysis-next", className: "icon-button viewer-step" });
|
||||
next.append(icon("chevron"));
|
||||
next.setAttribute("aria-label", REVIEW_TEXTS.next);
|
||||
for (const [link, delta] of [
|
||||
[prev, -1],
|
||||
[next, 1],
|
||||
] as const) {
|
||||
link.addEventListener("click", (event) => {
|
||||
event.preventDefault();
|
||||
step(delta);
|
||||
});
|
||||
}
|
||||
const viewerBody = element(viewer, "div", { className: "viewer-body" });
|
||||
const boardBox = element(viewerBody, "div", { className: "viewer-board-box" });
|
||||
const board = boardSvg(boardBox, "analysis-board", "analysis-board");
|
||||
player = createMovePlayer(board, "analysis-", options.reducedMotion);
|
||||
const viewerText = element(viewerBody, "div", { className: "viewer-text" });
|
||||
const phrase = element(viewerText, "p", { id: "analysis-phrase", className: "viewer-phrase" });
|
||||
const choice = element(viewerText, "div", { id: "analysis-choice", className: "segmented" });
|
||||
choice.setAttribute("role", "radiogroup");
|
||||
choice.setAttribute("aria-label", REVIEW_TEXTS.choiceLabel);
|
||||
const segments: Record<Shown, HTMLButtonElement> = {
|
||||
mine: element(choice, "button", { id: "analysis-mine", className: "segment" }),
|
||||
best: element(choice, "button", {
|
||||
id: "analysis-best",
|
||||
className: "segment",
|
||||
text: REVIEW_TEXTS.masterMove,
|
||||
}),
|
||||
};
|
||||
for (const key of ["mine", "best"] as const) {
|
||||
segments[key].type = "button";
|
||||
segments[key].setAttribute("role", "radio");
|
||||
}
|
||||
const legend = element(viewerText, "p", { id: "analysis-legend", className: "viewer-legend" });
|
||||
const chanceLine = element(viewerText, "p", {
|
||||
id: "analysis-chance",
|
||||
className: "viewer-chance",
|
||||
});
|
||||
const viewerActions = element(viewerText, "div", { className: "viewer-actions" });
|
||||
const replayButton = element(viewerActions, "button", {
|
||||
id: "analysis-replay",
|
||||
text: REVIEW_TEXTS.replayFromHere,
|
||||
});
|
||||
replayButton.type = "button";
|
||||
// L'emplacement de « Demander à une IA » (étape 1f).
|
||||
const slot = element(viewerActions, "div", { className: "ask-ai-slot" });
|
||||
slot.dataset.slot = "ask-ai";
|
||||
const replayHint = element(viewerText, "p", {
|
||||
className: "viewer-legend",
|
||||
text: REVIEW_TEXTS.replayHint,
|
||||
});
|
||||
|
||||
const listCard = element(section, "section", { className: "analysis-card list-card" });
|
||||
element(listCard, "h3", { className: "overline", text: REVIEW_TEXTS.listTitle });
|
||||
const filters = element(listCard, "div", { id: "analysis-filters", className: "filters" });
|
||||
filters.setAttribute("role", "group");
|
||||
filters.setAttribute("aria-label", REVIEW_TEXTS.filterLabel);
|
||||
const filterButtons: Record<Filter, HTMLButtonElement> = {
|
||||
all: element(filters, "button", { className: "filter" }),
|
||||
errors: element(filters, "button", { className: "filter" }),
|
||||
doubtful: element(filters, "button", { className: "filter" }),
|
||||
};
|
||||
for (const key of ["all", "errors", "doubtful"] as const) {
|
||||
const button = filterButtons[key];
|
||||
button.type = "button";
|
||||
button.dataset.filter = key;
|
||||
button.onclick = () => {
|
||||
filter = key;
|
||||
renderList();
|
||||
};
|
||||
}
|
||||
const list = element(listCard, "ul", { id: "analysis-list", className: "analysis-list" });
|
||||
|
||||
const numbers = element(section, "details", {
|
||||
id: "analysis-numbers",
|
||||
className: "analysis-card explain-numbers",
|
||||
});
|
||||
element(numbers, "summary", { text: REVIEW_TEXTS.numbers });
|
||||
const table = element(numbers, "div", { className: "explain-table analysis-table" });
|
||||
element(numbers, "p", { className: "explain-note", text: REVIEW_TEXTS.numbersNote });
|
||||
|
||||
// ------------------------------------------------------------ Courbe
|
||||
|
||||
/** Le coup sous l'abscisse x (pixels du tracé). */
|
||||
function turnAt(x: number): number {
|
||||
const width = curveSvg.getBoundingClientRect().width;
|
||||
const inner = Math.max(1, width - PAD.left - PAD.right);
|
||||
const index = Math.floor(((x - PAD.left) / inner) * turns.length);
|
||||
return Math.min(turns.length, Math.max(1, index + 1));
|
||||
}
|
||||
|
||||
let dragging = false;
|
||||
curveSvg.addEventListener("pointerdown", (event) => {
|
||||
dragging = true;
|
||||
curveSvg.setPointerCapture?.(event.pointerId);
|
||||
choose(turnAt(event.clientX - curveSvg.getBoundingClientRect().left));
|
||||
});
|
||||
curveSvg.addEventListener("pointermove", (event) => {
|
||||
if (dragging) {
|
||||
choose(turnAt(event.clientX - curveSvg.getBoundingClientRect().left));
|
||||
}
|
||||
});
|
||||
for (const end of ["pointerup", "pointercancel"] as const) {
|
||||
curveSvg.addEventListener(end, () => {
|
||||
dragging = false;
|
||||
});
|
||||
}
|
||||
curveSvg.addEventListener("keydown", (event) => {
|
||||
if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
step(event.key === "ArrowLeft" ? -1 : 1);
|
||||
}
|
||||
});
|
||||
|
||||
function renderCurve(): void {
|
||||
const width = Math.round(curveSvg.getBoundingClientRect().width || 360);
|
||||
const height = CURVE_HEIGHT;
|
||||
curveSvg.setAttribute("viewBox", `0 0 ${width} ${height}`);
|
||||
curveSvg.replaceChildren();
|
||||
const inner = width - PAD.left - PAD.right;
|
||||
const band = turns.length > 0 ? inner / turns.length : inner;
|
||||
const x = (turn: number) => PAD.left + (turn - 0.5) * band;
|
||||
const y = (chance: number) => PAD.top + (1 - chance) * (height - PAD.top - PAD.bottom);
|
||||
// Axe : 100 %, 50 % (pointillé), 0 %.
|
||||
for (const level of [1, 0.5, 0]) {
|
||||
svgElement(curveSvg, "line", {
|
||||
x1: PAD.left,
|
||||
x2: width - PAD.right,
|
||||
y1: y(level),
|
||||
y2: y(level),
|
||||
class: level === 0.5 ? "curve-half" : "curve-axis",
|
||||
});
|
||||
const label = svgElement(curveSvg, "text", {
|
||||
x: PAD.left - 6,
|
||||
y: y(level) + 4,
|
||||
class: "curve-label",
|
||||
"text-anchor": "end",
|
||||
});
|
||||
label.textContent = percent(level);
|
||||
}
|
||||
const known = curve.filter((p) => p.chance !== null) as {
|
||||
turn: number;
|
||||
chance: number;
|
||||
verdict: Verdict | null;
|
||||
side: string;
|
||||
}[];
|
||||
if (known.length > 0) {
|
||||
const line = known.map((p) => `${x(p.turn)},${y(p.chance)}`).join(" ");
|
||||
const first = known[0] as { turn: number };
|
||||
const last = known.at(-1) as { turn: number };
|
||||
svgElement(curveSvg, "polygon", {
|
||||
points: `${x(first.turn)},${y(0)} ${line} ${x(last.turn)},${y(0)}`,
|
||||
class: "curve-area",
|
||||
});
|
||||
svgElement(curveSvg, "polyline", { points: line, class: "curve-line" });
|
||||
}
|
||||
// Le coup choisi : un trait vertical brique.
|
||||
svgElement(curveSvg, "line", {
|
||||
x1: x(selected),
|
||||
x2: x(selected),
|
||||
y1: PAD.top,
|
||||
y2: height - PAD.bottom,
|
||||
class: "curve-cursor",
|
||||
});
|
||||
for (const point of known) {
|
||||
const commented = point.verdict !== null;
|
||||
svgElement(curveSvg, "circle", {
|
||||
cx: x(point.turn),
|
||||
cy: y(point.chance),
|
||||
r: commented ? 4 : 2,
|
||||
class: commented ? `curve-dot verdict-${point.verdict}` : "curve-dot other",
|
||||
});
|
||||
}
|
||||
const chosen = curve[selected - 1];
|
||||
if (chosen?.chance != null) {
|
||||
svgElement(curveSvg, "circle", {
|
||||
cx: x(selected),
|
||||
cy: y(chosen.chance),
|
||||
r: 7,
|
||||
class: "curve-ring",
|
||||
});
|
||||
}
|
||||
// Les bandes, sur toute la hauteur : cibles du doigt.
|
||||
for (const turn of turns) {
|
||||
const rect = svgElement(curveSvg, "rect", {
|
||||
x: PAD.left + (turn.number - 1) * band,
|
||||
y: 0,
|
||||
width: band,
|
||||
height,
|
||||
class: turn.number === selected ? "curve-band selected" : "curve-band",
|
||||
});
|
||||
rect.dataset.turn = String(turn.number);
|
||||
}
|
||||
const chance = chosen?.chance;
|
||||
curveSvg.setAttribute("aria-valuemin", "1");
|
||||
curveSvg.setAttribute("aria-valuemax", String(turns.length));
|
||||
curveSvg.setAttribute("aria-valuenow", String(selected));
|
||||
const spoken =
|
||||
chance === null || chance === undefined ? REVIEW_TEXTS.curveUnknown : percent(chance);
|
||||
curveSvg.setAttribute("aria-valuetext", spoken);
|
||||
curveSvg.setAttribute(
|
||||
"aria-label",
|
||||
REVIEW_TEXTS.curveLabel(selected, turns.length, spoken),
|
||||
);
|
||||
}
|
||||
|
||||
// -------------------------------------------------------- Visualiseur
|
||||
|
||||
function renderViewer(): void {
|
||||
const current = data;
|
||||
const turn = turns[selected - 1];
|
||||
if (current === null || turn === undefined) {
|
||||
return;
|
||||
}
|
||||
prev.href = routeHash({
|
||||
screen: "analysis",
|
||||
game: current.id,
|
||||
turn: Math.max(1, selected - 1),
|
||||
});
|
||||
next.href = routeHash({
|
||||
screen: "analysis",
|
||||
game: current.id,
|
||||
turn: Math.min(turns.length, selected + 1),
|
||||
});
|
||||
prev.setAttribute("aria-disabled", String(selected <= 1));
|
||||
next.setAttribute("aria-disabled", String(selected >= turns.length));
|
||||
const roll = turn.roll === null ? "" : ` · ${REVIEW_TEXTS.roll(turn.roll)}`;
|
||||
turnTitle.textContent = `${REVIEW_TEXTS.turnOf(selected, turns.length)}${roll}`;
|
||||
const chance = curve[selected - 1]?.chance;
|
||||
chanceLine.textContent =
|
||||
chance === null || chance === undefined
|
||||
? ""
|
||||
: REVIEW_TEXTS.chanceAfter(percent(chance));
|
||||
|
||||
const main = mainAdvice(current.journal, turn);
|
||||
const theirs = computerMoveAdvice(current.journal, turn);
|
||||
const key = [
|
||||
current.id,
|
||||
selected,
|
||||
main?.eventId ?? "",
|
||||
theirs?.eventId ?? "",
|
||||
current.phrases !== null,
|
||||
].join("|");
|
||||
replayButton.hidden = replayPoint(current.journal, turn) === null;
|
||||
replayHint.hidden = replayButton.hidden;
|
||||
replayButton.onclick = () => {
|
||||
const point = replayPoint(current.journal, turn);
|
||||
if (point !== null) {
|
||||
options.replay(current.id, point);
|
||||
}
|
||||
};
|
||||
if (key === drawnTurn) {
|
||||
return;
|
||||
}
|
||||
drawnTurn = key;
|
||||
player?.stop();
|
||||
phrase.replaceChildren();
|
||||
delete phrase.dataset.verdict;
|
||||
legend.textContent = "";
|
||||
const id = ++request;
|
||||
|
||||
// Ce qu'en dit le maître : la décision du joueur à revoir, ou ce
|
||||
// qu'a fait l'ordinateur.
|
||||
if (main !== null && current.phrases !== null) {
|
||||
const words = masterWords(current.phrases, main);
|
||||
phrase.dataset.verdict = words.verdict;
|
||||
const word = document.createElement("strong");
|
||||
word.append(icon(VERDICT_ICONS[words.verdict]), `${words.word}.`);
|
||||
const said = document.createElement("em");
|
||||
said.textContent = words.phrase;
|
||||
phrase.append(word, " ", said);
|
||||
} else if (turn.side === "computer") {
|
||||
phrase.textContent =
|
||||
turn.move === null
|
||||
? REVIEW_TEXTS.computerCube
|
||||
: turn.move.halfMoves.length === 0
|
||||
? REVIEW_TEXTS.computerCannotMove
|
||||
: REVIEW_TEXTS.computerPlayed(formatHalfMoves(turn.move.halfMoves));
|
||||
} else if (turn.move !== null && turn.move.halfMoves.length === 0) {
|
||||
phrase.textContent = REVIEW_TEXTS.playerCannotMove;
|
||||
}
|
||||
|
||||
// Le plateau : le coup joué et, s'il diffère, le meilleur coup.
|
||||
void (async () => {
|
||||
const side = turn.side;
|
||||
let mine: MoveSteps | null = null;
|
||||
let best: MoveSteps | null = null;
|
||||
const moveAdvice: Advice | null = side === "player" ? main : theirs;
|
||||
try {
|
||||
if (moveAdvice?.kind === "move") {
|
||||
mine = await current.game.stepsBefore(
|
||||
moveAdvice.eventId,
|
||||
side,
|
||||
moveAdvice.played.halfMoves,
|
||||
);
|
||||
if (moveAdvice.rank > 1) {
|
||||
best = await current.game.stepsBefore(
|
||||
moveAdvice.eventId,
|
||||
side,
|
||||
moveAdvice.best.halfMoves,
|
||||
);
|
||||
}
|
||||
} else if (moveAdvice?.kind === "cube") {
|
||||
mine = await current.game.stepsBefore(moveAdvice.eventId, "player", []);
|
||||
} else if (turn.move !== null) {
|
||||
mine = await current.game.stepsBefore(turn.move.id, side, turn.move.halfMoves);
|
||||
} else {
|
||||
const first = turn.events[0];
|
||||
mine =
|
||||
first === undefined
|
||||
? null
|
||||
: await current.game.stepsBefore(first.id, side, []);
|
||||
}
|
||||
} catch {
|
||||
mine = null;
|
||||
}
|
||||
if (id !== request || mine === null) {
|
||||
return;
|
||||
}
|
||||
showMoves(mine, best, side);
|
||||
})();
|
||||
}
|
||||
|
||||
function showMoves(mine: MoveSteps, best: MoveSteps | null, side: "player" | "computer"): void {
|
||||
const who = side === "player" ? REVIEW_TEXTS.yourMoveSegment : REVIEW_TEXTS.theirMove;
|
||||
segments.mine.textContent = who;
|
||||
choice.hidden = best === null;
|
||||
const notation = (steps: MoveSteps) => formatHalfMoves(steps.halfMoves);
|
||||
const select = (shown: Shown) => {
|
||||
const steps = shown === "best" && best !== null ? best : mine;
|
||||
for (const key of ["mine", "best"] as const) {
|
||||
segments[key].setAttribute("aria-checked", String(key === shown));
|
||||
}
|
||||
board.dataset.move = shown;
|
||||
if (steps.halfMoves.length === 0) {
|
||||
legend.textContent = REVIEW_TEXTS.legendPosition;
|
||||
board.setAttribute("aria-label", REVIEW_TEXTS.legendPosition);
|
||||
drawSteps(board, steps, 0, false, "analysis-");
|
||||
return;
|
||||
}
|
||||
const text = REVIEW_TEXTS.legendMove(
|
||||
shown === "best" ? REVIEW_TEXTS.masterMove : who,
|
||||
notation(steps),
|
||||
);
|
||||
legend.textContent = text;
|
||||
board.setAttribute("aria-label", text);
|
||||
void player?.play(steps);
|
||||
};
|
||||
segments.mine.onclick = () => select("mine");
|
||||
segments.best.onclick = () => select("best");
|
||||
choice.onkeydown = (event) => {
|
||||
if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
const nextShown =
|
||||
segments.mine.getAttribute("aria-checked") === "true" ? "best" : "mine";
|
||||
select(nextShown);
|
||||
segments[nextShown].focus();
|
||||
}
|
||||
};
|
||||
select("mine");
|
||||
}
|
||||
|
||||
// -------------------------------------------------------------- Liste
|
||||
|
||||
function renderList(): void {
|
||||
const current = data;
|
||||
if (current === null) {
|
||||
return;
|
||||
}
|
||||
const rows = turns
|
||||
.map((turn) => ({ turn, advice: mainAdvice(current.journal, turn) }))
|
||||
.filter((row): row is { turn: Turn; advice: Advice } => row.advice !== null);
|
||||
const count = (f: Filter) =>
|
||||
rows.filter((r) => FILTERS[f].includes(verdictOf(r.advice.skill))).length;
|
||||
for (const key of ["all", "errors", "doubtful"] as const) {
|
||||
filterButtons[key].textContent = `${REVIEW_TEXTS.filters[key]} · ${count(key)}`;
|
||||
filterButtons[key].setAttribute("aria-pressed", String(key === filter));
|
||||
}
|
||||
list.replaceChildren();
|
||||
const shown = rows.filter((r) => FILTERS[filter].includes(verdictOf(r.advice.skill)));
|
||||
if (shown.length === 0) {
|
||||
element(list, "li", { className: "analysis-empty", text: REVIEW_TEXTS.emptyFilter });
|
||||
return;
|
||||
}
|
||||
for (const { turn, advice } of shown) {
|
||||
const item = element(list, "li");
|
||||
const link = element(item, "a", { className: "analysis-row" });
|
||||
link.href = routeHash({ screen: "analysis", game: current.id, turn: turn.number });
|
||||
link.dataset.turn = String(turn.number);
|
||||
if (turn.number === selected) {
|
||||
link.setAttribute("aria-current", "true");
|
||||
}
|
||||
const verdict = verdictOf(advice.skill);
|
||||
const word = current.phrases === null ? "" : masterWords(current.phrases, advice).word;
|
||||
const roll = turn.roll === null ? "" : REVIEW_TEXTS.roll(turn.roll);
|
||||
const move =
|
||||
advice.kind === "move"
|
||||
? advice.played.notation
|
||||
: REVIEW_TEXTS.cubeActions[advice.action];
|
||||
link.setAttribute("aria-label", REVIEW_TEXTS.rowLabel(turn.number, roll, move, word));
|
||||
element(link, "span", { className: "row-number", text: String(turn.number) });
|
||||
element(link, "span", { className: "row-roll", text: roll });
|
||||
element(link, "span", { className: "row-move", text: move });
|
||||
const mark = element(link, "span", { className: "row-word" });
|
||||
mark.dataset.verdict = verdict;
|
||||
mark.append(icon(VERDICT_ICONS[verdict]), word);
|
||||
link.addEventListener("click", (event) => {
|
||||
if (event.button !== 0 || event.ctrlKey || event.metaKey || event.shiftKey) {
|
||||
return;
|
||||
}
|
||||
event.preventDefault();
|
||||
choose(turn.number);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// ------------------------------------------------- Chiffres du moteur
|
||||
|
||||
function renderNumbers(summary: GameSummary): void {
|
||||
table.replaceChildren();
|
||||
const cell = (text: string, className = "") => element(table, "span", { className, text });
|
||||
cell("");
|
||||
cell(REVIEW_TEXTS.numbersHead.you, "strong");
|
||||
cell(REVIEW_TEXTS.numbersHead.computer, "strong");
|
||||
const rows: [string, (s: GameSummary["player"]) => string][] = [
|
||||
[REVIEW_TEXTS.numbersRows.errorRate, (s) => signed(-s.errorRate.perDecision)],
|
||||
[REVIEW_TEXTS.numbersRows.decisions, (s) => String(s.errorRate.decisions)],
|
||||
[REVIEW_TEXTS.numbersRows.level, (s) => MATCH_TEXTS.levels[s.errorRate.level].name],
|
||||
[REVIEW_TEXTS.numbersRows.luck, (s) => signed(s.luck.perRoll)],
|
||||
];
|
||||
for (const [name, value] of rows) {
|
||||
cell(name);
|
||||
cell(value(summary.player));
|
||||
cell(value(summary.computer));
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------- Ensemble
|
||||
|
||||
function choose(turn: number): void {
|
||||
if (turn === selected || turn < 1 || turn > turns.length) {
|
||||
return;
|
||||
}
|
||||
selected = turn;
|
||||
renderCurve();
|
||||
renderViewer();
|
||||
renderList();
|
||||
options.select(turn);
|
||||
}
|
||||
|
||||
function step(delta: number): void {
|
||||
choose(selected + delta);
|
||||
}
|
||||
|
||||
window.addEventListener("resize", () => {
|
||||
if (!section.hidden && data !== null) {
|
||||
renderCurve();
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
show(next) {
|
||||
data = next;
|
||||
if (next === null) {
|
||||
message.textContent = REVIEW_TEXTS.missingGame;
|
||||
curveCard.hidden = true;
|
||||
viewer.hidden = true;
|
||||
listCard.hidden = true;
|
||||
numbers.hidden = true;
|
||||
return;
|
||||
}
|
||||
turns = gameTurns(next.journal);
|
||||
curve = chanceCurve(next.journal);
|
||||
const summary = summarizeAnalysis(next.journal);
|
||||
const fallback = summary.toReview?.turn ?? 1;
|
||||
selected = Math.min(Math.max(1, next.turn ?? fallback), Math.max(1, turns.length));
|
||||
message.textContent = turns.length === 0 ? REVIEW_TEXTS.emptyFilter : "";
|
||||
curveCard.hidden = turns.length === 0;
|
||||
viewer.hidden = turns.length === 0;
|
||||
listCard.hidden = turns.length === 0;
|
||||
numbers.hidden = turns.length === 0;
|
||||
renderCurve();
|
||||
renderViewer();
|
||||
renderList();
|
||||
renderNumbers(summary);
|
||||
},
|
||||
hide() {
|
||||
data = null;
|
||||
drawnTurn = "";
|
||||
player?.stop();
|
||||
request++;
|
||||
},
|
||||
step,
|
||||
};
|
||||
}
|
||||
+240
-3
@@ -21,6 +21,7 @@
|
||||
// dessine l'écran que désigne l'adresse, au démarrage et à chaque
|
||||
// changement. Les actions de jeu restent des boutons.
|
||||
|
||||
import { missingAnalyses, readyForSummary } from "../domain/analysis/game-analysis.js";
|
||||
import {
|
||||
type MasterPhrases,
|
||||
masterLine,
|
||||
@@ -39,6 +40,7 @@ import type { GameState } from "../domain/game/state.js";
|
||||
import { ADVICE_TEXTS } from "./advice-texts.js";
|
||||
import { type Analyse, createAdviceTracker } from "./advice-tracker.js";
|
||||
import { createAdviceView, VERDICT_ICONS } from "./advice-view.js";
|
||||
import { createAnalysisView } from "./analysis-view.js";
|
||||
import {
|
||||
boardModel,
|
||||
moveTargets,
|
||||
@@ -74,6 +76,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 { createReviewRunner, type RunAnalysis } from "./review-runner.js";
|
||||
import { isHelpScreen, type Route, routeHash } from "./router.js";
|
||||
import {
|
||||
chosenGame,
|
||||
@@ -83,6 +86,7 @@ import {
|
||||
parseSettings,
|
||||
type Settings,
|
||||
} from "./settings.js";
|
||||
import { createSummaryView } from "./summary-view.js";
|
||||
import { type PromptText, TEXTS } from "./texts.js";
|
||||
import { seenAfter } from "./tutorial-nav.js";
|
||||
import { createTutorialView, type TutorialAccess } from "./tutorial-view.js";
|
||||
@@ -133,6 +137,9 @@ export interface AppOptions {
|
||||
/** Le conseil du maître : l'analyse d'une décision du joueur, sur un
|
||||
* moteur à part (elle ne retarde jamais la partie). */
|
||||
readonly analyse: Analyse;
|
||||
/** L'analyse d'une partie pour son bilan (étape 1e), une analyse à la
|
||||
* fois, sur le même moteur à part. */
|
||||
readonly analyseGame: RunAnalysis;
|
||||
}
|
||||
|
||||
/** La source des phrases du maître, copiée dans le site (make site). */
|
||||
@@ -148,6 +155,12 @@ export interface SavedGamesAccess {
|
||||
/** Une partie reprise, au bout de la branche branchHead si elle est
|
||||
* donnée ; elle devient la partie à l'écran. */
|
||||
readonly open: (id: string, branchHead?: string) => Promise<Game>;
|
||||
/** Une partie enregistrée, reprise pour la regarder (bilan, analyse)
|
||||
* sans qu'elle devienne la partie à l'écran ; null si elle n'existe
|
||||
* pas ou est illisible. */
|
||||
readonly view: (id: string) => Promise<Game | null>;
|
||||
/** Enregistre les analyses d'une partie qui n'est pas à l'écran. */
|
||||
readonly saveAnalyses: (id: string, journal: GameJournal) => void;
|
||||
readonly remove: (id: string) => Promise<void>;
|
||||
readonly exportSgf: (id: string) => Promise<{ fileName: string; text: string }>;
|
||||
}
|
||||
@@ -213,6 +226,8 @@ export function startApp(options: AppOptions): void {
|
||||
info: byId("info"),
|
||||
adviceLine: byId<HTMLAnchorElement>("advice-line"),
|
||||
explainVeil: byId("explain-veil"),
|
||||
summaryVeil: byId("summary-veil"),
|
||||
analysis: byId("analysis"),
|
||||
menuAdvice: byId<HTMLButtonElement>("menu-advice"),
|
||||
prompt: byId("prompt"),
|
||||
strips: { computer: stripOf("strip-computer"), player: stripOf("strip-player") },
|
||||
@@ -665,6 +680,7 @@ export function startApp(options: AppOptions): void {
|
||||
document.body.classList.toggle("busy", busy);
|
||||
announceEnd(game);
|
||||
void keepScreenOn(isPlaying(game) || state.phase === "doubled");
|
||||
reviewFinishedGame();
|
||||
}
|
||||
|
||||
/** Le conseil du maître à montrer : le réglage le permet, ses phrases
|
||||
@@ -841,7 +857,13 @@ export function startApp(options: AppOptions): void {
|
||||
/** Le panneau centré : fin de partie, ou double de l'ordinateur en
|
||||
* paysage (en portrait, la barre d'actions s'en charge). */
|
||||
function renderPanel(g: Game, landscape: boolean, doubled: boolean): void {
|
||||
const over = g.state.phase === "over" && !panelDismissed;
|
||||
// Le panneau appartient à l'écran de jeu : ni sur une page, ni sous
|
||||
// le bilan.
|
||||
const over =
|
||||
g.state.phase === "over" &&
|
||||
!panelDismissed &&
|
||||
!ui.game.hidden &&
|
||||
navigation.route.screen !== "summary";
|
||||
const ask = landscape && doubled;
|
||||
ui.panelVeil.hidden = !(over || ask);
|
||||
const overline = byId("panel-overline");
|
||||
@@ -1123,6 +1145,9 @@ export function startApp(options: AppOptions): void {
|
||||
/** Commence une partie : celle des choix de l'écran « Nouvelle partie »
|
||||
* si rien d'autre n'est demandé. */
|
||||
function startNewGame(chosen: NewGame = chosenGame(settings)): void {
|
||||
// L'analyse d'une partie passée laisse le moteur à part au conseil
|
||||
// du maître.
|
||||
reviewRunner.stop();
|
||||
game = options.newGame(chosen);
|
||||
panelDismissed = false;
|
||||
announcedEnd = null;
|
||||
@@ -1212,7 +1237,8 @@ export function startApp(options: AppOptions): void {
|
||||
route.screen === "menu" ||
|
||||
route.screen === "games" ||
|
||||
route.screen === "install" ||
|
||||
route.screen === "explanation";
|
||||
route.screen === "explanation" ||
|
||||
route.screen === "summary";
|
||||
|
||||
// « Mes parties » : reprendre une partie (ou une branche) en change à
|
||||
// l'écran, sans recharger la page.
|
||||
@@ -1245,6 +1271,174 @@ export function startApp(options: AppOptions): void {
|
||||
close: () => leaveSheet(),
|
||||
});
|
||||
|
||||
// ------------------------------------------- Bilan et analyse (1e)
|
||||
|
||||
// Les analyses qui manquent à une partie, en arrière-plan, sur le
|
||||
// moteur à part ; la partie regardée (bilan, analyse) et son journal.
|
||||
const reviewRunner = createReviewRunner(options.analyseGame);
|
||||
let reviewed: { id: string; journal: GameJournal; game: Game } | null = null;
|
||||
|
||||
const summaryView = createSummaryView({
|
||||
veil: ui.summaryVeil,
|
||||
close: () => leaveSheet(),
|
||||
again: () => afterGame(),
|
||||
});
|
||||
|
||||
const analysisView = createAnalysisView({
|
||||
section: ui.analysis,
|
||||
reducedMotion,
|
||||
select: (turn) => {
|
||||
const route = navigation.route;
|
||||
if (route.screen === "analysis") {
|
||||
navigation.replace(routeHash({ ...route, turn }));
|
||||
}
|
||||
},
|
||||
replay: (id, eventId) => void replayFrom(id, eventId),
|
||||
back: (link) => leavingLink(link, (route) => route.screen === "analysis"),
|
||||
});
|
||||
|
||||
/** La partie à l'écran, si c'est la partie id. */
|
||||
function liveGame(id: string): Game | null {
|
||||
return game !== null && options.games.shownId() === id ? game : null;
|
||||
}
|
||||
|
||||
/** Ouvre le bilan ou l'analyse de la partie id, et lance ce qui manque
|
||||
* à son analyse. */
|
||||
async function openReview(id: string): Promise<void> {
|
||||
const live = liveGame(id);
|
||||
if (live !== null) {
|
||||
reviewed = { id, journal: live.journal, game: live };
|
||||
} else if (reviewed?.id !== id) {
|
||||
const [journal, viewed] = await Promise.all([
|
||||
options.games.journal(id),
|
||||
options.games.view(id),
|
||||
]);
|
||||
reviewed = journal === null || viewed === null ? null : { id, journal, game: viewed };
|
||||
if (reviewed === null) {
|
||||
showReview(id, true);
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (reviewed !== null) {
|
||||
review(reviewed.id, reviewed.journal);
|
||||
}
|
||||
showReview(id, false);
|
||||
}
|
||||
|
||||
/** Lance l'analyse de ce qui manque à la partie id (rien si tout est
|
||||
* là, ou si elle est déjà en cours). */
|
||||
function review(id: string, journal: GameJournal): void {
|
||||
if (missingAnalyses(journal).length === 0) {
|
||||
return;
|
||||
}
|
||||
reviewRunner.start(id, journal, (analysed) => {
|
||||
const live = liveGame(id);
|
||||
if (live !== null) {
|
||||
live.recordAnalyses(analysed);
|
||||
save();
|
||||
} else {
|
||||
options.games.saveAnalyses(id, analysed);
|
||||
}
|
||||
if (reviewed?.id === id) {
|
||||
reviewed = { ...reviewed, journal: live?.journal ?? analysed };
|
||||
}
|
||||
showReview(id, false);
|
||||
render();
|
||||
});
|
||||
}
|
||||
|
||||
/** L'analyse en cours d'une partie qui n'est ni regardée ni à l'écran
|
||||
* s'arrête : le moteur à part revient au conseil du maître. */
|
||||
function stopForeignReview(): void {
|
||||
const running = reviewRunner.running;
|
||||
if (running !== null && liveGame(running) === null) {
|
||||
reviewRunner.stop();
|
||||
}
|
||||
}
|
||||
|
||||
/** Redessine le bilan ou l'analyse de la partie id, s'ils sont à
|
||||
* l'écran. */
|
||||
function showReview(id: string, missing: boolean): void {
|
||||
const route = navigation.route;
|
||||
if ((route.screen !== "summary" && route.screen !== "analysis") || route.game !== id) {
|
||||
return;
|
||||
}
|
||||
const live = liveGame(id);
|
||||
const shown =
|
||||
missing || reviewed?.id !== id
|
||||
? null
|
||||
: { ...reviewed, journal: live?.journal ?? reviewed.journal };
|
||||
if (route.screen === "summary") {
|
||||
summaryView.show(
|
||||
shown === null
|
||||
? null
|
||||
: {
|
||||
id,
|
||||
journal: shown.journal,
|
||||
game: shown.game,
|
||||
end: shown.game.state.phase === "over" ? endParts(shown.game) : null,
|
||||
afterLabel: live === null ? null : afterGameLabel(live),
|
||||
phrases,
|
||||
},
|
||||
);
|
||||
} else {
|
||||
analysisView.show(
|
||||
shown === null
|
||||
? null
|
||||
: {
|
||||
id,
|
||||
journal: shown.journal,
|
||||
game: shown.game,
|
||||
turn: route.turn,
|
||||
phrases,
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 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à.
|
||||
*/
|
||||
function reviewFinishedGame(): void {
|
||||
const id = options.games.shownId();
|
||||
if (game === null || id === null || busy || game.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);
|
||||
}
|
||||
if (
|
||||
navigation.route.screen === "game" &&
|
||||
!panelDismissed &&
|
||||
phrases !== null &&
|
||||
readyForSummary(game.journal)
|
||||
) {
|
||||
queueMicrotask(() => {
|
||||
if (navigation.route.screen === "game" && !panelDismissed) {
|
||||
navigation.replace(routeHash({ screen: "summary", game: id }));
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/** « Rejouer d'ici » : la partie id reprend à l'événement eventId ; le
|
||||
* prochain coup ouvre une branche, la partie d'origine reste. */
|
||||
async function replayFrom(id: string, eventId: string): Promise<void> {
|
||||
if (busy) {
|
||||
return;
|
||||
}
|
||||
reviewRunner.stop();
|
||||
const other = await options.games.open(id);
|
||||
other.goBackTo(eventId);
|
||||
hideBanner();
|
||||
navigation.replace("#/");
|
||||
await act(() => showGame(other));
|
||||
}
|
||||
|
||||
/** Joue un demi-coup du joueur ; le coup attend ensuite sa suite ou sa
|
||||
* validation. Le pion qui se pose vibre (deux fois s'il frappe). */
|
||||
function playHalfMove(halfMove: HalfMove): void {
|
||||
@@ -1372,6 +1566,8 @@ export function startApp(options: AppOptions): void {
|
||||
navigation.leave((r) => r.screen === "position");
|
||||
} else if (route.screen === "newGame") {
|
||||
navigation.leave((r) => r.screen === "newGame");
|
||||
} else if (route.screen === "analysis") {
|
||||
navigation.leave((r) => r.screen === "analysis");
|
||||
} else if (route.screen === "tutorial" || route.screen === "tutorialEnd") {
|
||||
navigation.leave((r) => r.screen === "tutorial" || r.screen === "tutorialEnd");
|
||||
}
|
||||
@@ -1415,6 +1611,11 @@ export function startApp(options: AppOptions): void {
|
||||
ui.installVeil.hidden = true;
|
||||
gamesView?.hide();
|
||||
adviceView.hide();
|
||||
if (summaryView.isOpen) {
|
||||
// Le bilan fermé laisse voir la partie finie, sans le panneau.
|
||||
panelDismissed = true;
|
||||
summaryView.hide();
|
||||
}
|
||||
if (menuWasOpen) {
|
||||
(menuReturnFocus ?? ui.menuButton).focus();
|
||||
}
|
||||
@@ -1524,7 +1725,8 @@ export function startApp(options: AppOptions): void {
|
||||
const home = below.screen === "home";
|
||||
const tutorial = below.screen === "tutorial" || below.screen === "tutorialEnd";
|
||||
const choosing = below.screen === "newGame";
|
||||
const page = help || position || home || tutorial || choosing;
|
||||
const analysing = below.screen === "analysis";
|
||||
const page = help || position || home || tutorial || choosing || analysing;
|
||||
const wasPage = ui.game.hidden;
|
||||
const wasScreen = ui.root.dataset.screen;
|
||||
ui.game.hidden = page;
|
||||
@@ -1532,6 +1734,7 @@ export function startApp(options: AppOptions): void {
|
||||
ui.position.hidden = !position;
|
||||
ui.home.hidden = !home;
|
||||
ui.tutorial.hidden = !tutorial;
|
||||
ui.analysis.hidden = !analysing;
|
||||
const opening = choosing && ui.newGameSection.hidden;
|
||||
ui.newGameSection.hidden = !choosing;
|
||||
ui.root.classList.toggle("page-open", page);
|
||||
@@ -1591,6 +1794,28 @@ export function startApp(options: AppOptions): void {
|
||||
} else {
|
||||
adviceView.hide();
|
||||
}
|
||||
// Le bilan et l'analyse d'une partie : son journal, lu dans le
|
||||
// stockage (ouvert avec le moteur), puis analysé en arrière-plan.
|
||||
if (route.screen !== "summary" && summaryView.isOpen) {
|
||||
// Quitter le bilan (pour l'analyse, ou par le retour du
|
||||
// téléphone) laisse la partie finie sans le panneau.
|
||||
panelDismissed = true;
|
||||
summaryView.hide();
|
||||
}
|
||||
if (!analysing) {
|
||||
analysisView.hide();
|
||||
}
|
||||
if (route.screen === "summary" || route.screen === "analysis") {
|
||||
closeTransient();
|
||||
ui.menuVeil.hidden = true;
|
||||
const id = route.game;
|
||||
void options.engineReady.then(
|
||||
() => openReview(id),
|
||||
() => undefined,
|
||||
);
|
||||
} else {
|
||||
stopForeignReview();
|
||||
}
|
||||
if (route.screen === "games") {
|
||||
const expanded = route.game;
|
||||
// La liste vient du stockage, ouvert avec le moteur.
|
||||
@@ -2059,6 +2284,15 @@ export function startApp(options: AppOptions): void {
|
||||
}
|
||||
const onButton =
|
||||
event.target instanceof HTMLButtonElement || event.target instanceof HTMLAnchorElement;
|
||||
// L'écran d'analyse : les flèches passent d'un coup à l'autre.
|
||||
if (
|
||||
navigation.route.screen === "analysis" &&
|
||||
(event.key === "ArrowLeft" || event.key === "ArrowRight")
|
||||
) {
|
||||
event.preventDefault();
|
||||
analysisView.step(event.key === "ArrowLeft" ? -1 : 1);
|
||||
return;
|
||||
}
|
||||
let name: ActionName | null = null;
|
||||
switch (event.key) {
|
||||
case " ":
|
||||
@@ -2143,6 +2377,9 @@ export function startApp(options: AppOptions): void {
|
||||
if (route.screen === "explanation") {
|
||||
void adviceView.show(route.event);
|
||||
}
|
||||
if (route.screen === "summary" || route.screen === "analysis") {
|
||||
void openReview(route.game);
|
||||
}
|
||||
// Comme après une action du joueur : l'ordinateur joue si c'est
|
||||
// à lui (partie nouvelle ou reprise pendant son tour). Une partie
|
||||
// reprise juste après son coup le montre, sans l'animer.
|
||||
|
||||
@@ -28,6 +28,7 @@ export const GAMES_TEXTS = {
|
||||
close: "Fermer",
|
||||
resume: "Reprendre",
|
||||
showBranches: "Branches",
|
||||
summary: "Bilan",
|
||||
resumeBranch: "Reprendre cette branche",
|
||||
exportSgf: "Exporter (SGF)",
|
||||
remove: "Supprimer",
|
||||
|
||||
@@ -123,6 +123,7 @@ export function createGamesView(options: GamesViewOptions): GamesView {
|
||||
"resume",
|
||||
),
|
||||
branchesLink(game.id),
|
||||
...(game.status === "over" ? [summaryLink(game.id)] : []),
|
||||
button(
|
||||
GAMES_TEXTS.exportSgf,
|
||||
run(async () => download(await options.exportSgf(game.id))),
|
||||
@@ -171,6 +172,15 @@ export function createGamesView(options: GamesViewOptions): GamesView {
|
||||
return link;
|
||||
}
|
||||
|
||||
/** « Bilan » : le lien vers le bilan d'une partie finie (étape 1e). */
|
||||
function summaryLink(id: string): HTMLAnchorElement {
|
||||
const link = element("a", "button secondary");
|
||||
link.textContent = GAMES_TEXTS.summary;
|
||||
link.dataset.action = "summary";
|
||||
link.href = routeHash({ screen: "summary", game: id });
|
||||
return link;
|
||||
}
|
||||
|
||||
async function renderBranches(id: string, target: HTMLElement): Promise<void> {
|
||||
const journal = await options.journal(id);
|
||||
const all = journal === null ? [] : branches(journal);
|
||||
|
||||
@@ -31,6 +31,7 @@ export const FEATURES = [
|
||||
"docs/scenarios/jouer-une-partie.feature",
|
||||
"docs/scenarios/jouer-un-match.feature",
|
||||
"docs/scenarios/comprendre-mes-coups.feature",
|
||||
"docs/scenarios/revoir-ma-partie.feature",
|
||||
"docs/scenarios/apprendre-les-regles.feature",
|
||||
"docs/scenarios/mes-parties.feature",
|
||||
"docs/scenarios/partager-une-position.feature",
|
||||
|
||||
@@ -0,0 +1,109 @@
|
||||
// Un petit plateau qui rejoue un coup pion par pion, sur la position
|
||||
// d'avant le coup, puis laisse ses traces : la feuille d'explication du
|
||||
// maître (1d), le coup à revoir du bilan et le visualiseur de l'analyse
|
||||
// (1e).
|
||||
//
|
||||
// Copyright (C) 2026 les auteurs d'Ustagammon.
|
||||
// Licence : GPLv3 ou ultérieure (voir LICENSE).
|
||||
|
||||
import type { MoveSteps } from "../domain/game/game.js";
|
||||
import { boardModel, moveTrace, placeOf } from "./board-model.js";
|
||||
import { checkerSpot, NO_MARKS, renderBoard, slideChecker } from "./board-view.js";
|
||||
import { boardGeometry, PORTRAIT_ASPECT } from "./geometry.js";
|
||||
|
||||
const SLIDE_MS = 160;
|
||||
const PAUSE_MS = 120;
|
||||
|
||||
/** Un plateau SVG vide, dans son cadre. */
|
||||
export function boardSvg(box: HTMLElement, id: string, className: string): SVGSVGElement {
|
||||
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||||
svg.id = id;
|
||||
svg.setAttribute("class", `board ${className}`);
|
||||
svg.setAttribute("role", "img");
|
||||
box.append(svg);
|
||||
return svg;
|
||||
}
|
||||
|
||||
/**
|
||||
* Dessine le plateau d'un coup après index demi-coups (0 : avant le
|
||||
* coup), avec ses traces si traced. Les flèches des traces renvoient à leur
|
||||
* pointe par identifiant : prefix les distingue de celles du plateau de jeu.
|
||||
*/
|
||||
export function drawSteps(
|
||||
svg: SVGSVGElement,
|
||||
steps: MoveSteps,
|
||||
index: number,
|
||||
traced: boolean,
|
||||
prefix: string,
|
||||
): void {
|
||||
const boards = steps.boards[index];
|
||||
if (boards === undefined) {
|
||||
return;
|
||||
}
|
||||
const width = svg.getBoundingClientRect().width || 358;
|
||||
renderBoard(svg, boardGeometry("portrait", PORTRAIT_ASPECT, width / 640), boardModel(boards), {
|
||||
...NO_MARKS,
|
||||
dice: [],
|
||||
cube: null,
|
||||
band: null,
|
||||
controls: null,
|
||||
trace: traced ? moveTrace(steps.side, steps.halfMoves, steps.hits) : null,
|
||||
});
|
||||
for (const marker of svg.querySelectorAll("marker[id]")) {
|
||||
marker.id = `${prefix}${marker.id}`;
|
||||
}
|
||||
for (const path of svg.querySelectorAll("[marker-end]")) {
|
||||
const ref = path.getAttribute("marker-end") ?? "";
|
||||
path.setAttribute("marker-end", ref.replace("url(#", `url(#${prefix}`));
|
||||
}
|
||||
}
|
||||
|
||||
/** Un plateau qui joue des coups ; un coup demandé arrête le précédent. */
|
||||
export interface MovePlayer {
|
||||
/** Joue le coup pion par pion (sans mouvement si le système le
|
||||
* demande), puis laisse ses traces. */
|
||||
play(steps: MoveSteps): Promise<void>;
|
||||
/** Arrête le coup en cours. */
|
||||
stop(): void;
|
||||
}
|
||||
|
||||
export function createMovePlayer(
|
||||
svg: SVGSVGElement,
|
||||
prefix: string,
|
||||
reducedMotion: MediaQueryList,
|
||||
): MovePlayer {
|
||||
let playing = 0;
|
||||
return {
|
||||
async play(steps) {
|
||||
const id = ++playing;
|
||||
drawSteps(svg, steps, 0, false, prefix);
|
||||
if (!reducedMotion.matches) {
|
||||
for (const [i, halfMove] of steps.halfMoves.entries()) {
|
||||
if (id !== playing) {
|
||||
return;
|
||||
}
|
||||
if (i > 0) {
|
||||
await new Promise((resolve) => setTimeout(resolve, PAUSE_MS));
|
||||
}
|
||||
const from = placeOf(steps.side, halfMove.from);
|
||||
const to = placeOf(steps.side, halfMove.to);
|
||||
drawSteps(svg, steps, i, false, prefix);
|
||||
const start = checkerSpot(svg, from);
|
||||
const bar = steps.side === "player" ? "bar-computer" : "bar-player";
|
||||
const victim = steps.hits[i] === true ? checkerSpot(svg, to) : null;
|
||||
drawSteps(svg, steps, i + 1, false, prefix);
|
||||
await Promise.all([
|
||||
start && slideChecker(svg, to, start, SLIDE_MS),
|
||||
victim && slideChecker(svg, bar, victim, SLIDE_MS),
|
||||
]);
|
||||
}
|
||||
}
|
||||
if (id === playing) {
|
||||
drawSteps(svg, steps, steps.halfMoves.length, true, prefix);
|
||||
}
|
||||
},
|
||||
stop() {
|
||||
playing++;
|
||||
},
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
// L'analyse d'une partie en arrière-plan (étape 1e) : les analyses qui
|
||||
// manquent au bilan et à l'écran d'analyse sont demandées une à une au
|
||||
// second moteur, rangées au fur et à mesure, et l'ensemble s'arrête dès
|
||||
// qu'on n'en a plus besoin (une autre partie, une nouvelle partie). Sans
|
||||
// DOM : testé sous Node (app/tests/review-runner.test.ts).
|
||||
//
|
||||
// Copyright (C) 2026 les auteurs d'Ustagammon.
|
||||
// Licence : GPLv3 ou ultérieure (voir LICENSE).
|
||||
//
|
||||
// Une analyse déjà partie vers le moteur ne s'interrompt pas : l'arrêt
|
||||
// prend effet entre deux analyses, et le résultat d'une analyse arrêtée
|
||||
// n'est pas rangé.
|
||||
|
||||
import { type AnalysisTask, missingAnalyses } from "../domain/analysis/game-analysis.js";
|
||||
import type { GameJournal } from "../domain/game/events.js";
|
||||
|
||||
/** Fait une analyse et renvoie le journal qui la contient. */
|
||||
export type RunAnalysis = (journal: GameJournal, task: AnalysisTask) => Promise<GameJournal>;
|
||||
|
||||
export interface ReviewRunner {
|
||||
/** La partie en cours d'analyse (null : aucune). */
|
||||
readonly running: string | null;
|
||||
/**
|
||||
* Analyse ce qui manque au journal de la partie id ; record reçoit le
|
||||
* journal après chaque analyse rangée, done une fois tout analysé.
|
||||
* Une analyse en cours d'une autre partie est arrêtée ; la même partie
|
||||
* continue sans repartir.
|
||||
*/
|
||||
start(
|
||||
id: string,
|
||||
journal: GameJournal,
|
||||
record: (journal: GameJournal) => void,
|
||||
done?: () => void,
|
||||
): void;
|
||||
/** Arrête l'analyse en cours. */
|
||||
stop(): void;
|
||||
}
|
||||
|
||||
export function createReviewRunner(run: RunAnalysis): ReviewRunner {
|
||||
// Chaque analyse lancée a son jeton : stop() ou une autre partie
|
||||
// l'annulent.
|
||||
let token: object | null = null;
|
||||
let running: string | null = null;
|
||||
|
||||
return {
|
||||
get running() {
|
||||
return running;
|
||||
},
|
||||
start(id, journal, record, done) {
|
||||
if (running === id && token !== null) {
|
||||
return;
|
||||
}
|
||||
const mine = {};
|
||||
token = mine;
|
||||
running = id;
|
||||
void (async () => {
|
||||
let current = journal;
|
||||
try {
|
||||
for (;;) {
|
||||
const task = missingAnalyses(current)[0];
|
||||
if (task === undefined) {
|
||||
break;
|
||||
}
|
||||
const next = await run(current, task);
|
||||
if (token !== mine) {
|
||||
return;
|
||||
}
|
||||
current = next;
|
||||
record(current);
|
||||
}
|
||||
} catch {
|
||||
// Le moteur a échoué : l'analyse s'arrête là, ce qui est
|
||||
// rangé reste, et la prochaine demande reprendra.
|
||||
}
|
||||
if (token === mine) {
|
||||
token = null;
|
||||
running = null;
|
||||
done?.();
|
||||
}
|
||||
})();
|
||||
},
|
||||
stop() {
|
||||
token = null;
|
||||
running = null;
|
||||
},
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
// Les textes de l'interface du bilan et de l'écran d'analyse (étape 1e).
|
||||
// Les phrases du maître elles-mêmes (lecture du bilan, dés en mots) sont
|
||||
// dans docs/maitre/phrases.md (une seule source, ADR 0008).
|
||||
//
|
||||
// Copyright (C) 2026 les auteurs d'Ustagammon.
|
||||
// Licence : GPLv3 ou ultérieure (voir LICENSE).
|
||||
|
||||
import type { CubeAction } from "../domain/game/engine.js";
|
||||
import type { Roll } from "../domain/game/roll.js";
|
||||
|
||||
const plural = (n: number, one: string, many: string) => (n > 1 ? many : one);
|
||||
|
||||
/** « 41 % ». */
|
||||
export function percent(chance: number): string {
|
||||
return `${Math.round(chance * 100)} %`;
|
||||
}
|
||||
|
||||
/** Un nombre à la française, signé, à trois décimales : « +0,021 ». */
|
||||
export function signed(value: number): string {
|
||||
const text = Math.abs(value).toFixed(3).replace(".", ",");
|
||||
return value < -0.0005 ? `−${text}` : value > 0.0005 ? `+${text}` : text;
|
||||
}
|
||||
|
||||
export const REVIEW_TEXTS = {
|
||||
// Bilan
|
||||
summaryLabel: "Bilan de la partie",
|
||||
analysing: "Le maître analyse la partie…",
|
||||
progress: (done: number, total: number) => `Analyse : ${done} sur ${total}`,
|
||||
notOver: "Cette partie n'est pas finie : son bilan viendra à la fin.",
|
||||
missingGame: "Cette partie n'est plus sur ce téléphone.",
|
||||
counts: {
|
||||
good: (n: number) => plural(n, "Bon coup", "Bons coups"),
|
||||
doubtful: (n: number) => plural(n, "Imprécision", "Imprécisions"),
|
||||
bad: (n: number) => plural(n, "Erreur", "Erreurs"),
|
||||
},
|
||||
countsLabel: "Vos décisions, par appréciation",
|
||||
yourPlay: "Votre jeu",
|
||||
theDice: "Les dés",
|
||||
playGauge: (level: string) => `Votre jeu : niveau ${level}`,
|
||||
diceGauge: (words: string) => `Les dés : ${words}`,
|
||||
howToRead: "Comment lire ces mesures",
|
||||
toReview: "Le coup à revoir",
|
||||
yourMove: (notation: string) => `Votre coup : ${notation}`,
|
||||
yourDecision: (action: string) => `Votre décision : ${action}`,
|
||||
reviewMove: "Revoir ce coup",
|
||||
seeAnalysis: "Voir l'analyse",
|
||||
newGame: "Nouvelle partie",
|
||||
close: "Fermer",
|
||||
cubeActions: {
|
||||
double: "doubler",
|
||||
noDouble: "lancer sans doubler",
|
||||
take: "prendre",
|
||||
pass: "passer",
|
||||
} satisfies Record<CubeAction, string>,
|
||||
toReviewBoard: "La position au moment de la décision à revoir.",
|
||||
|
||||
// Analyse
|
||||
analysisTitle: "Analyse de la partie",
|
||||
back: "Retour",
|
||||
curveTitle: "Vos chances de gagner",
|
||||
curveLabel: (turn: number, total: number, chance: string) =>
|
||||
`Courbe de vos chances de gagner : coup ${turn} sur ${total}, ${chance}. Flèches gauche et droite pour changer de coup.`,
|
||||
curveUnknown: "pas encore calculé",
|
||||
turnOf: (turn: number, total: number) => `Coup ${turn} sur ${total}`,
|
||||
roll: (roll: Roll) => `${roll[0]}-${roll[1]}`,
|
||||
previous: "Coup précédent",
|
||||
next: "Coup suivant",
|
||||
who: { player: "Vous", computer: "L'ordinateur" },
|
||||
computerPlayed: (notation: string) => `L'ordinateur a joué ${notation}.`,
|
||||
computerCannotMove: "L'ordinateur ne pouvait pas jouer.",
|
||||
playerCannotMove: "Vous ne pouviez pas jouer.",
|
||||
computerCube: "L'ordinateur a doublé.",
|
||||
chanceAfter: (chance: string) => `Vos chances de gagner après ce coup : ${chance}`,
|
||||
theirMove: "Son coup",
|
||||
masterMove: "Le coup du maître",
|
||||
yourMoveSegment: "Votre coup",
|
||||
choiceLabel: "Coup montré sur le plateau",
|
||||
legendMove: (who: string, notation: string) =>
|
||||
`${who} : ${notation}, joué pion par pion sur la position d'avant le coup.`,
|
||||
legendPosition: "La position avant la décision.",
|
||||
replayFromHere: "Rejouer d'ici",
|
||||
replayHint: "Une nouvelle branche : la partie d'origine reste intacte.",
|
||||
listTitle: "Les coups à revoir",
|
||||
filters: { all: "Tout", errors: "Erreurs", doubtful: "Imprécisions" },
|
||||
filterLabel: "Filtrer les coups",
|
||||
emptyFilter: "Aucun coup de ce genre dans la partie.",
|
||||
rowLabel: (turn: number, roll: string, move: string, word: string) =>
|
||||
`Coup ${turn}, ${roll}, ${move} : ${word}`,
|
||||
numbers: "Voir les chiffres du moteur",
|
||||
numbersRows: {
|
||||
errorRate: "Erreur par décision",
|
||||
decisions: "Décisions comptées",
|
||||
luck: "Chance par tour",
|
||||
level: "Niveau",
|
||||
},
|
||||
numbersHead: { you: "Vous", computer: "L'ordinateur" },
|
||||
numbersNote:
|
||||
"Calculés comme GNU Backgammon : équité perdue par décision non forcée, chance des dés par tour, à 2 plis.",
|
||||
} as const;
|
||||
@@ -27,6 +27,12 @@ export type Route =
|
||||
| { readonly screen: "install" }
|
||||
/** #/parties, et une partie : #/parties/<identifiant>. */
|
||||
| { readonly screen: "games"; readonly game: string | null }
|
||||
/** #/parties/<identifiant>/bilan : le bilan de fin de partie (1e). */
|
||||
| { readonly screen: "summary"; readonly game: string }
|
||||
/** #/parties/<identifiant>/analyse/<coup> : l'écran d'analyse, placé
|
||||
* sur un coup (un tour de la partie, à partir de 1) ; sans coup :
|
||||
* #/parties/<identifiant>/analyse. */
|
||||
| { readonly screen: "analysis"; readonly game: string; readonly turn: number | null }
|
||||
/** #/menu. */
|
||||
| { readonly screen: "menu" }
|
||||
/** #/nouvelle-partie : le choix de la partie (type, niveau, conseil). */
|
||||
@@ -71,6 +77,9 @@ export function parseRoute(hash: string): Route {
|
||||
if (head === "tutoriel") {
|
||||
return tutorialRoute(rest) ?? unknown;
|
||||
}
|
||||
if (head === "parties" && rest.length > 1) {
|
||||
return gameReviewRoute(rest) ?? unknown;
|
||||
}
|
||||
if (rest.length > 1) {
|
||||
return unknown;
|
||||
}
|
||||
@@ -104,6 +113,24 @@ export function parseRoute(hash: string): Route {
|
||||
}
|
||||
}
|
||||
|
||||
/** #/parties/<id>/bilan, #/parties/<id>/analyse, #/parties/<id>/analyse/<n>. */
|
||||
function gameReviewRoute(rest: readonly string[]): Route | null {
|
||||
const [game = "", part, turn, ...more] = rest;
|
||||
if (!NAME.test(game) || more.length > 0) {
|
||||
return null;
|
||||
}
|
||||
if (part === "bilan") {
|
||||
return turn === undefined ? { screen: "summary", game } : null;
|
||||
}
|
||||
if (part !== "analyse") {
|
||||
return null;
|
||||
}
|
||||
if (turn === undefined) {
|
||||
return { screen: "analysis", game, turn: null };
|
||||
}
|
||||
return /^[1-9][0-9]{0,3}$/.test(turn) ? { screen: "analysis", game, turn: Number(turn) } : null;
|
||||
}
|
||||
|
||||
/** #/tutoriel, #/tutoriel/<n>, #/tutoriel/<n>/a-vous, #/tutoriel/fin. */
|
||||
function tutorialRoute(rest: readonly string[]): Route | null {
|
||||
const [name, part, ...more] = rest;
|
||||
@@ -173,6 +200,12 @@ export function routeHash(route: Route): string {
|
||||
return "#/installer";
|
||||
case "games":
|
||||
return route.game === null ? "#/parties" : `#/parties/${route.game}`;
|
||||
case "summary":
|
||||
return `#/parties/${route.game}/bilan`;
|
||||
case "analysis":
|
||||
return route.turn === null
|
||||
? `#/parties/${route.game}/analyse`
|
||||
: `#/parties/${route.game}/analyse/${route.turn}`;
|
||||
case "menu":
|
||||
return "#/menu";
|
||||
case "newGame":
|
||||
|
||||
@@ -0,0 +1,343 @@
|
||||
// Le bilan de fin de partie (#/parties/<id>/bilan, étape 1e ; charte,
|
||||
// ecrans-etape-1.md, « Bilan ») : un panneau centré sur un voile, à la
|
||||
// place du panneau de fin de partie. Le résultat et sa lecture, les
|
||||
// décisions par appréciation, deux jauges (votre jeu, les dés), le coup à
|
||||
// revoir, puis « Voir l'analyse » et l'action qui suit la partie.
|
||||
//
|
||||
// Copyright (C) 2026 les auteurs d'Ustagammon.
|
||||
// Licence : GPLv3 ou ultérieure (voir LICENSE).
|
||||
//
|
||||
// Tout ce qu'il affiche vient de l'analyse du moteur (game-analysis.ts) et
|
||||
// des phrases du maître (docs/maitre/phrases.md) ; tant que l'analyse
|
||||
// n'est pas prête, il dit où elle en est.
|
||||
|
||||
import {
|
||||
type GameSummary,
|
||||
missingAnalyses,
|
||||
readyForSummary,
|
||||
summarizeAnalysis,
|
||||
} from "../domain/analysis/game-analysis.js";
|
||||
import {
|
||||
diceWords,
|
||||
type MasterPhrases,
|
||||
masterWords,
|
||||
nothingToReview,
|
||||
summaryReading,
|
||||
} from "../domain/analysis/phrases.js";
|
||||
import { masterCubeAction } from "../domain/game/advice.js";
|
||||
import type { GameJournal } from "../domain/game/events.js";
|
||||
import type { Game } from "../domain/game/game.js";
|
||||
import { COMPUTER_LEVELS } from "../domain/game/level.js";
|
||||
import { VERDICT_ICONS } from "./advice-view.js";
|
||||
import { icon } from "./icons.js";
|
||||
import { MATCH_TEXTS } from "./match-texts.js";
|
||||
import { boardSvg, drawSteps } from "./move-board.js";
|
||||
import { REVIEW_TEXTS } from "./review-texts.js";
|
||||
import { routeHash } from "./router.js";
|
||||
import { TEXTS } from "./texts.js";
|
||||
|
||||
/** Ce que montre le bilan. */
|
||||
export interface SummaryData {
|
||||
readonly id: string;
|
||||
readonly journal: GameJournal;
|
||||
/** La partie, pour dessiner la position du coup à revoir. */
|
||||
readonly game: Game;
|
||||
/** Le titre et le détail du résultat (null : partie pas finie). */
|
||||
readonly end: { readonly title: string; readonly detail: string } | null;
|
||||
/** L'action qui suit la partie, si c'est la partie à l'écran :
|
||||
* « Rejouer » ou « Partie suivante ». Sinon, « Nouvelle partie » mène à
|
||||
* l'écran des choix. */
|
||||
readonly afterLabel: string | null;
|
||||
readonly phrases: MasterPhrases | null;
|
||||
}
|
||||
|
||||
export interface SummaryViewOptions {
|
||||
/** Le voile du bilan (index.html) ; le panneau est construit ici. */
|
||||
readonly veil: HTMLElement;
|
||||
/** La croix : revenir au plateau. */
|
||||
readonly close: () => void;
|
||||
/** « Rejouer » ou « Partie suivante ». */
|
||||
readonly again: () => void;
|
||||
}
|
||||
|
||||
export interface SummaryView {
|
||||
/** Ouvre (ou met à jour) le bilan. */
|
||||
show(data: SummaryData | null): void;
|
||||
hide(): void;
|
||||
readonly isOpen: boolean;
|
||||
}
|
||||
|
||||
function element<K extends keyof HTMLElementTagNameMap>(
|
||||
parent: HTMLElement,
|
||||
tag: K,
|
||||
options: { id?: string; className?: string; text?: string } = {},
|
||||
): HTMLElementTagNameMap[K] {
|
||||
const child = document.createElement(tag);
|
||||
if (options.id !== undefined) {
|
||||
child.id = options.id;
|
||||
}
|
||||
if (options.className !== undefined) {
|
||||
child.className = options.className;
|
||||
}
|
||||
if (options.text !== undefined) {
|
||||
child.textContent = options.text;
|
||||
}
|
||||
parent.append(child);
|
||||
return child;
|
||||
}
|
||||
|
||||
const DICE_SIDE = {
|
||||
veryLucky: "for-2",
|
||||
lucky: "for-1",
|
||||
none: "even",
|
||||
unlucky: "against-1",
|
||||
veryUnlucky: "against-2",
|
||||
} as const;
|
||||
|
||||
export function createSummaryView(options: SummaryViewOptions): SummaryView {
|
||||
const { veil } = options;
|
||||
const panel = element(veil, "div", { id: "summary", className: "panel summary-panel" });
|
||||
panel.setAttribute("role", "dialog");
|
||||
panel.setAttribute("aria-modal", "true");
|
||||
panel.setAttribute("aria-labelledby", "summary-title");
|
||||
veil.addEventListener("click", (event) => {
|
||||
if (event.target === veil) {
|
||||
options.close();
|
||||
}
|
||||
});
|
||||
// Ce qui est dessiné, pour ne redessiner qu'en cas de changement (le
|
||||
// bilan est mis à jour à chaque analyse rangée).
|
||||
let drawn = "";
|
||||
|
||||
function render(data: SummaryData | null): void {
|
||||
const ready = data !== null && data.phrases !== null && readyForSummary(data.journal);
|
||||
const summary = ready ? summarizeAnalysis(data.journal) : null;
|
||||
const key =
|
||||
data === null
|
||||
? "missing"
|
||||
: [
|
||||
data.id,
|
||||
data.end?.title ?? "",
|
||||
data.afterLabel ?? "",
|
||||
ready,
|
||||
ready ? JSON.stringify(summary) : missingAnalyses(data.journal).length,
|
||||
].join("|");
|
||||
if (key === drawn) {
|
||||
return;
|
||||
}
|
||||
drawn = key;
|
||||
panel.replaceChildren();
|
||||
delete panel.dataset.ready;
|
||||
const head = element(panel, "div", { className: "summary-head" });
|
||||
element(head, "p", { className: "overline", text: TEXTS.endOverline });
|
||||
const close = element(head, "button", { id: "summary-close", className: "icon-button" });
|
||||
close.type = "button";
|
||||
close.append(icon("close"));
|
||||
close.setAttribute("aria-label", REVIEW_TEXTS.close);
|
||||
close.onclick = () => options.close();
|
||||
const title = element(panel, "h2", { id: "summary-title", className: "summary-title" });
|
||||
if (data === null) {
|
||||
title.textContent = REVIEW_TEXTS.summaryLabel;
|
||||
element(panel, "p", { className: "summary-reading", text: REVIEW_TEXTS.missingGame });
|
||||
return;
|
||||
}
|
||||
if (data.end === null) {
|
||||
title.textContent = REVIEW_TEXTS.summaryLabel;
|
||||
element(panel, "p", { className: "summary-reading", text: REVIEW_TEXTS.notOver });
|
||||
actions(data);
|
||||
return;
|
||||
}
|
||||
title.textContent = data.end.title;
|
||||
const reading = element(panel, "p", {
|
||||
id: "summary-reading",
|
||||
className: "summary-reading",
|
||||
});
|
||||
reading.textContent =
|
||||
summary !== null && data.phrases !== null
|
||||
? `${data.end.detail} ${summaryReading(data.phrases, summary)}`
|
||||
: data.end.detail;
|
||||
if (summary === null || data.phrases === null) {
|
||||
const status = element(panel, "p", {
|
||||
id: "summary-status",
|
||||
className: "summary-status",
|
||||
text: REVIEW_TEXTS.analysing,
|
||||
});
|
||||
status.setAttribute("role", "status");
|
||||
actions(data);
|
||||
return;
|
||||
}
|
||||
panel.dataset.ready = "true";
|
||||
counts(summary);
|
||||
gauges(summary, data.phrases);
|
||||
toReview(data, summary, data.phrases);
|
||||
actions(data);
|
||||
}
|
||||
|
||||
function counts(summary: GameSummary): void {
|
||||
const box = element(panel, "div", { id: "summary-counts", className: "summary-counts" });
|
||||
box.setAttribute("role", "list");
|
||||
box.setAttribute("aria-label", REVIEW_TEXTS.countsLabel);
|
||||
const cells = [
|
||||
{ verdict: "good", n: summary.counts.good, word: REVIEW_TEXTS.counts.good },
|
||||
{
|
||||
verdict: "doubtful",
|
||||
n: summary.counts.doubtful,
|
||||
word: REVIEW_TEXTS.counts.doubtful,
|
||||
},
|
||||
{
|
||||
verdict: "bad",
|
||||
n: summary.counts.bad + summary.counts.veryBad,
|
||||
word: REVIEW_TEXTS.counts.bad,
|
||||
},
|
||||
] as const;
|
||||
for (const cell of cells) {
|
||||
const item = element(box, "div", { className: "summary-count" });
|
||||
item.setAttribute("role", "listitem");
|
||||
item.dataset.verdict = cell.verdict;
|
||||
element(item, "span", { className: "summary-number", text: String(cell.n) });
|
||||
const word = element(item, "span", { className: "summary-word" });
|
||||
word.append(icon(VERDICT_ICONS[cell.verdict]), cell.word(cell.n));
|
||||
}
|
||||
}
|
||||
|
||||
function gauges(summary: GameSummary, phrases: MasterPhrases): void {
|
||||
const box = element(panel, "div", { className: "summary-gauges" });
|
||||
const level = summary.player.errorRate.level;
|
||||
const levelName = MATCH_TEXTS.levels[level].name;
|
||||
const play = element(box, "div", { id: "gauge-play", className: "gauge" });
|
||||
play.setAttribute("aria-label", REVIEW_TEXTS.playGauge(levelName));
|
||||
play.setAttribute("role", "img");
|
||||
element(play, "span", { className: "gauge-name", text: REVIEW_TEXTS.yourPlay });
|
||||
const track = element(play, "span", { className: "gauge-track" });
|
||||
element(track, "span", {
|
||||
className: `gauge-fill level-${COMPUTER_LEVELS.indexOf(level) + 1}`,
|
||||
});
|
||||
element(play, "span", { className: "gauge-value", text: levelName });
|
||||
|
||||
const words = diceWords(phrases, summary.player.luck.rating);
|
||||
const dice = element(box, "div", { id: "gauge-dice", className: "gauge" });
|
||||
dice.setAttribute("aria-label", REVIEW_TEXTS.diceGauge(words));
|
||||
dice.setAttribute("role", "img");
|
||||
element(dice, "span", { className: "gauge-name", text: REVIEW_TEXTS.theDice });
|
||||
const centred = element(dice, "span", { className: "gauge-track centred" });
|
||||
element(centred, "span", {
|
||||
className: `gauge-fill dice ${DICE_SIDE[summary.player.luck.rating]}`,
|
||||
});
|
||||
element(dice, "span", { className: "gauge-value", text: words });
|
||||
const link = element(box, "a", {
|
||||
id: "summary-glossary",
|
||||
className: "link-button summary-glossary",
|
||||
text: REVIEW_TEXTS.howToRead,
|
||||
});
|
||||
link.href = routeHash({ screen: "glossary", term: "taux-d-erreur" });
|
||||
}
|
||||
|
||||
function toReview(data: SummaryData, summary: GameSummary, phrases: MasterPhrases): void {
|
||||
const card = element(panel, "section", {
|
||||
id: "summary-review",
|
||||
className: "summary-review",
|
||||
});
|
||||
card.setAttribute("aria-labelledby", "summary-review-title");
|
||||
element(card, "h3", {
|
||||
id: "summary-review-title",
|
||||
className: "overline",
|
||||
text: REVIEW_TEXTS.toReview,
|
||||
});
|
||||
const reviewed = summary.toReview;
|
||||
if (reviewed === null) {
|
||||
element(card, "p", { className: "summary-none", text: nothingToReview(phrases) });
|
||||
return;
|
||||
}
|
||||
const advice = reviewed.advice;
|
||||
const words = masterWords(phrases, advice);
|
||||
const body = element(card, "div", { className: "summary-review-body" });
|
||||
const box = element(body, "div", { className: "summary-board-box" });
|
||||
const svg = boardSvg(box, "summary-board", "summary-board");
|
||||
svg.setAttribute("aria-label", REVIEW_TEXTS.toReviewBoard);
|
||||
const halfMoves = advice.kind === "move" ? advice.played.halfMoves : [];
|
||||
void data.game
|
||||
.stepsBefore(advice.eventId, "player", halfMoves)
|
||||
.then((steps) => drawSteps(svg, steps, steps.halfMoves.length, true, "summary-"))
|
||||
.catch(() => undefined);
|
||||
const text = element(body, "div", { className: "summary-review-text" });
|
||||
const verdict = element(text, "p", { className: "summary-verdict" });
|
||||
verdict.dataset.verdict = words.verdict;
|
||||
verdict.append(icon(VERDICT_ICONS[words.verdict]), `${words.word} · ${words.context}`);
|
||||
element(text, "p", {
|
||||
className: "summary-played",
|
||||
text:
|
||||
advice.kind === "move"
|
||||
? REVIEW_TEXTS.yourMove(advice.played.notation)
|
||||
: REVIEW_TEXTS.yourDecision(REVIEW_TEXTS.cubeActions[advice.action]),
|
||||
});
|
||||
element(text, "p", {
|
||||
className: "summary-master",
|
||||
text:
|
||||
advice.kind === "move" || masterCubeAction(advice) !== advice.action
|
||||
? words.title
|
||||
: words.phrase,
|
||||
});
|
||||
const links = element(card, "div", { className: "summary-review-actions" });
|
||||
const revisit = element(links, "a", {
|
||||
id: "summary-revisit",
|
||||
className: "button secondary",
|
||||
text: REVIEW_TEXTS.reviewMove,
|
||||
});
|
||||
revisit.href = routeHash({ screen: "analysis", game: data.id, turn: reviewed.turn });
|
||||
// L'emplacement de « Demander à une IA » (étape 1f).
|
||||
const slot = element(links, "div", { className: "ask-ai-slot" });
|
||||
slot.dataset.slot = "ask-ai";
|
||||
}
|
||||
|
||||
function actions(data: SummaryData): void {
|
||||
const bar = element(panel, "div", { className: "panel-actions summary-actions" });
|
||||
const analysis = element(bar, "a", {
|
||||
id: "summary-analysis",
|
||||
className: "button secondary",
|
||||
text: REVIEW_TEXTS.seeAnalysis,
|
||||
});
|
||||
analysis.href = routeHash({ screen: "analysis", game: data.id, turn: null });
|
||||
if (data.afterLabel !== null) {
|
||||
const again = element(bar, "button", {
|
||||
id: "summary-primary",
|
||||
text: data.afterLabel,
|
||||
});
|
||||
again.type = "button";
|
||||
again.onclick = () => options.again();
|
||||
const settings = element(panel, "a", {
|
||||
id: "summary-settings",
|
||||
className: "panel-link",
|
||||
text: MATCH_TEXTS.changeSettings,
|
||||
});
|
||||
settings.href = routeHash({ screen: "newGame" });
|
||||
} else {
|
||||
const start = element(bar, "a", {
|
||||
id: "summary-primary",
|
||||
className: "button",
|
||||
text: REVIEW_TEXTS.newGame,
|
||||
});
|
||||
start.href = routeHash({ screen: "newGame" });
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
show(data) {
|
||||
const opening = veil.hidden;
|
||||
veil.hidden = false;
|
||||
render(data);
|
||||
if (opening) {
|
||||
panel.querySelector<HTMLElement>("#summary-close")?.focus();
|
||||
}
|
||||
},
|
||||
hide() {
|
||||
if (!veil.hidden) {
|
||||
veil.hidden = true;
|
||||
panel.replaceChildren();
|
||||
drawn = "";
|
||||
}
|
||||
},
|
||||
get isOpen() {
|
||||
return !veil.hidden;
|
||||
},
|
||||
};
|
||||
}
|
||||
@@ -241,7 +241,10 @@ test("l'analyse de partie enregistrée : migration du format durable", () => {
|
||||
const clean = { ...journal, review: migrated.review };
|
||||
assert.equal(migrateJournal(clean), clean);
|
||||
// Une autre version, ou une analyse mal formée, est oubliée.
|
||||
const other = migrateJournal({ ...journal, review: { ...review, version: REVIEW_VERSION + 1 } });
|
||||
const other = migrateJournal({
|
||||
...journal,
|
||||
review: { ...review, version: REVIEW_VERSION + 1 },
|
||||
});
|
||||
assert.equal(other.review, undefined);
|
||||
const broken = { ...journal, review: { version: REVIEW_VERSION } } as unknown as GameJournal;
|
||||
assert.equal(migrateJournal(broken).review, undefined);
|
||||
@@ -300,10 +303,7 @@ test("une partie complète analysée par le moteur, comme une partie d'avant 1d"
|
||||
assert.equal(summary.toReview?.advice.eventId, worst?.eventId);
|
||||
// La chance de chaque tour d'un camp est comptée.
|
||||
const moves = game.events.filter((e) => e.type === "MovePlayed");
|
||||
assert.equal(
|
||||
summary.player.luck.rolls + summary.computer.luck.rolls,
|
||||
moves.length,
|
||||
);
|
||||
assert.equal(summary.player.luck.rolls + summary.computer.luck.rolls, moves.length);
|
||||
// Les chances de gagner sont des probabilités, et la courbe finit sur
|
||||
// le résultat.
|
||||
const curve = chanceCurve(analysed);
|
||||
|
||||
@@ -0,0 +1,151 @@
|
||||
// L'analyse d'une partie en arrière-plan (app/src/ui/review-runner.ts) :
|
||||
// une analyse à la fois, rangée au fur et à mesure, arrêtée à la demande
|
||||
// ou par une autre partie ; et les phrases du bilan.
|
||||
//
|
||||
// Copyright (C) 2026 les auteurs d'Ustagammon.
|
||||
// Licence : GPLv3 ou ultérieure (voir LICENSE).
|
||||
|
||||
import assert from "node:assert/strict";
|
||||
import { test } from "node:test";
|
||||
import {
|
||||
type AnalysisTask,
|
||||
type GameSummary,
|
||||
missingAnalyses,
|
||||
} from "../src/domain/analysis/game-analysis.js";
|
||||
import { diceWords, nothingToReview, summaryReading } from "../src/domain/analysis/phrases.js";
|
||||
import {
|
||||
appendEvent,
|
||||
EMPTY_JOURNAL,
|
||||
type GameJournal,
|
||||
type NewGameEvent,
|
||||
} from "../src/domain/game/events.js";
|
||||
import { START_POSITION } from "../src/domain/game/position.js";
|
||||
import { emptyReview, type GameReview } from "../src/domain/game/review.js";
|
||||
import { createReviewRunner } from "../src/ui/review-runner.js";
|
||||
import { loadPhrases } from "./support/advice.js";
|
||||
|
||||
const P = START_POSITION;
|
||||
/** Un tour de l'ordinateur, sans décision du joueur. */
|
||||
const EVENTS: NewGameEvent[] = [
|
||||
{ type: "GameStarted", position: P, cube: { value: 1, owner: null }, firstTurn: "computer" },
|
||||
{ type: "DiceRolled", side: "computer", roll: [6, 5] },
|
||||
{ type: "MovePlayed", side: "computer", halfMoves: [], position: P },
|
||||
];
|
||||
const JOURNAL: GameJournal = EVENTS.reduce(appendEvent, EMPTY_JOURNAL);
|
||||
|
||||
/** Une fausse analyse : elle range la tâche sans moteur, quand on la
|
||||
* libère. */
|
||||
function fakeRun() {
|
||||
const waiting: (() => void)[] = [];
|
||||
const run = async (journal: GameJournal, task: AnalysisTask): Promise<GameJournal> => {
|
||||
await new Promise<void>((resolve) => waiting.push(resolve));
|
||||
const review: GameReview = journal.review ?? emptyReview(2);
|
||||
if (task.kind === "luck") {
|
||||
return {
|
||||
...journal,
|
||||
review: { ...review, luck: { [task.eventId]: { value: 0, rating: "none" } } },
|
||||
};
|
||||
}
|
||||
if (task.kind === "chance") {
|
||||
return {
|
||||
...journal,
|
||||
review: { ...review, winChances: { ...review.winChances, [task.eventId]: 0.5 } },
|
||||
};
|
||||
}
|
||||
return { ...journal, review: { ...review, unanalysed: [task.eventId] } };
|
||||
};
|
||||
const release = async () => {
|
||||
while (waiting.length === 0) {
|
||||
await new Promise((resolve) => setTimeout(resolve, 1));
|
||||
}
|
||||
waiting.shift()?.();
|
||||
await new Promise((resolve) => setTimeout(resolve, 1));
|
||||
};
|
||||
return { run, release };
|
||||
}
|
||||
|
||||
test("l'analyse en arrière-plan range chaque analyse, puis s'arrête une fois tout fait", async () => {
|
||||
const { run, release } = fakeRun();
|
||||
const runner = createReviewRunner(run);
|
||||
const recorded: GameJournal[] = [];
|
||||
let done = false;
|
||||
// La chance du jet, le jet sans doubler de l'ordinateur, ses chances
|
||||
// après le coup.
|
||||
const total = missingAnalyses(JOURNAL).length;
|
||||
assert.equal(total, 3);
|
||||
runner.start(
|
||||
"a",
|
||||
JOURNAL,
|
||||
(j) => recorded.push(j),
|
||||
() => {
|
||||
done = true;
|
||||
},
|
||||
);
|
||||
assert.equal(runner.running, "a");
|
||||
// La même partie redemandée ne repart pas.
|
||||
runner.start("a", JOURNAL, () => assert.fail("deuxième analyse"));
|
||||
for (let i = 0; i < total; i++) {
|
||||
await release();
|
||||
}
|
||||
assert.equal(recorded.length, total);
|
||||
assert.deepEqual(missingAnalyses(recorded.at(-1) as GameJournal), []);
|
||||
assert.ok(done);
|
||||
assert.equal(runner.running, null);
|
||||
});
|
||||
|
||||
test("l'analyse s'arrête à la demande, ou pour une autre partie, sans ranger la dernière", async () => {
|
||||
const { run, release } = fakeRun();
|
||||
const runner = createReviewRunner(run);
|
||||
const recorded: string[] = [];
|
||||
runner.start("a", JOURNAL, () => recorded.push("a"));
|
||||
runner.stop();
|
||||
assert.equal(runner.running, null);
|
||||
await release();
|
||||
assert.equal(recorded.length, 0);
|
||||
runner.start("b", JOURNAL, () => recorded.push("b"));
|
||||
runner.start("c", JOURNAL, () => recorded.push("c"));
|
||||
assert.equal(runner.running, "c");
|
||||
await release();
|
||||
await release();
|
||||
assert.deepEqual(recorded, ["c"]);
|
||||
});
|
||||
|
||||
/** Un bilan réduit à ce que lisent les phrases. */
|
||||
function summaryWith(result: number, luckAdjustedResult: number): GameSummary {
|
||||
const side = {
|
||||
errorRate: { total: 0, decisions: 0, perDecision: 0, level: "champion" as const },
|
||||
luck: { total: 0, rolls: 1, perRoll: -0.04, rating: "unlucky" as const, points: 0 },
|
||||
};
|
||||
return {
|
||||
player: side,
|
||||
computer: side,
|
||||
counts: { good: 0, doubtful: 0, bad: 0, veryBad: 0 },
|
||||
toReview: null,
|
||||
result,
|
||||
luckAdjustedResult,
|
||||
};
|
||||
}
|
||||
|
||||
test("les phrases du bilan : ce qui a fait la différence, et les dés en mots", () => {
|
||||
const phrases = loadPhrases();
|
||||
assert.equal(diceWords(phrases, "unlucky"), "un peu contre vous");
|
||||
assert.equal(
|
||||
summaryReading(phrases, summaryWith(1, 1.2)),
|
||||
"D'après mon analyse, votre jeu a fait la différence, avec des dés un peu contre vous.",
|
||||
);
|
||||
assert.equal(
|
||||
summaryReading(phrases, summaryWith(-2, -1.5)),
|
||||
"D'après mon analyse, le jeu de l'ordinateur a fait la différence, avec des dés un peu contre vous.",
|
||||
);
|
||||
// Gagnée grâce aux dés, ou perdue à cause d'eux : les dés.
|
||||
for (const [result, adjusted] of [
|
||||
[1, -0.3],
|
||||
[-1, 0.2],
|
||||
] as const) {
|
||||
assert.equal(
|
||||
summaryReading(phrases, summaryWith(result, adjusted)),
|
||||
"D'après mon analyse, les dés ont fait la différence, plus que le jeu.",
|
||||
);
|
||||
}
|
||||
assert.ok(nothingToReview(phrases).startsWith("Aucun coup à revoir"));
|
||||
});
|
||||
@@ -35,6 +35,9 @@ const TABLE: [string, Route][] = [
|
||||
["#/installer", { screen: "install" }],
|
||||
["#/parties", { screen: "games", game: null }],
|
||||
["#/parties/mh2k3x-a1b2c3", { screen: "games", game: "mh2k3x-a1b2c3" }],
|
||||
["#/parties/mh2k3x-a1b2c3/bilan", { screen: "summary", game: "mh2k3x-a1b2c3" }],
|
||||
["#/parties/mh2k3x-a1b2c3/analyse", { screen: "analysis", game: "mh2k3x-a1b2c3", turn: null }],
|
||||
["#/parties/mh2k3x-a1b2c3/analyse/7", { screen: "analysis", game: "mh2k3x-a1b2c3", turn: 7 }],
|
||||
["#/menu", { screen: "menu" }],
|
||||
["#/nouvelle-partie", { screen: "newGame" }],
|
||||
["#/explication/12", { screen: "explanation", event: "12" }],
|
||||
@@ -75,6 +78,12 @@ test("une adresse inconnue est reconnue comme telle", () => {
|
||||
"#/a-propos/x",
|
||||
"#/position",
|
||||
"#/position/%E0%A4%A",
|
||||
"#/parties/ab/autre",
|
||||
"#/parties/ab/bilan/2",
|
||||
"#/parties/ab/analyse/0",
|
||||
"#/parties/ab/analyse/x",
|
||||
"#/parties/ab/analyse/3/plus",
|
||||
"#/parties/AB/bilan",
|
||||
]) {
|
||||
assert.equal(parseRoute(hash).screen, "unknown", hash);
|
||||
}
|
||||
|
||||
+52
-2
@@ -1,7 +1,8 @@
|
||||
# Les phrases du maître
|
||||
|
||||
Les mots et les phrases du conseil du maître (étape 1d), en une seule source
|
||||
(ADR 0008) : `make site` copie ce dossier dans le site publié
|
||||
Les mots et les phrases du conseil du maître (étape 1d) et du bilan de fin
|
||||
de partie (étape 1e), en une seule source (ADR 0008) : `make site` copie ce
|
||||
dossier dans le site publié
|
||||
(`docs/maitre/`), l'application le lit à l'exécution
|
||||
(`app/src/domain/analysis/phrases.ts`), et `make test` rend chaque gabarit
|
||||
sur de vraies analyses du moteur (`app/tests/advice.test.ts`).
|
||||
@@ -37,6 +38,7 @@ mots entre accolades sont remplis avec les données du moteur :
|
||||
| `{points}` | « votre point 5 » ou « vos points 5 et 7 » |
|
||||
| `{roll}` | le jet, « 3-1 » |
|
||||
| `{hits}` | le nombre de pions frappés, en chiffres |
|
||||
| `{dice}` | la chance de vos dés sur la partie, en mots (bilan, étape 1e) |
|
||||
|
||||
Un fait (sections `fait.…`) s'ajoute à la phrase seulement si la ligne reste
|
||||
sous 140 caractères.
|
||||
@@ -231,3 +233,51 @@ Grosse erreur : le rang n'est jamais cité.
|
||||
## contexte.videau.reponse
|
||||
|
||||
- le double de l'ordinateur
|
||||
|
||||
## bilan.jeu.gagne
|
||||
|
||||
Bilan de fin de partie (étape 1e), partie gagnée, quand le résultat corrigé
|
||||
de la chance (celui qu'on aurait eu sans les dés, à la manière de gnubg)
|
||||
reste en votre faveur. {dice} : la chance de vos dés sur la partie (sections
|
||||
bilan.des.…).
|
||||
|
||||
- D'après mon analyse, votre jeu a fait la différence, avec des dés {dice}.
|
||||
|
||||
## bilan.jeu.perdu
|
||||
|
||||
Partie perdue, le résultat corrigé de la chance restant en faveur de
|
||||
l'ordinateur.
|
||||
|
||||
- D'après mon analyse, le jeu de l'ordinateur a fait la différence, avec des dés {dice}.
|
||||
|
||||
## bilan.des
|
||||
|
||||
Partie gagnée ou perdue, le résultat corrigé de la chance allant dans
|
||||
l'autre sens que le résultat : les dés des deux camps ont pesé plus que les
|
||||
erreurs.
|
||||
|
||||
- D'après mon analyse, les dés ont fait la différence, plus que le jeu.
|
||||
|
||||
## bilan.des.tres-pour
|
||||
|
||||
- nettement pour vous
|
||||
|
||||
## bilan.des.pour
|
||||
|
||||
- un peu pour vous
|
||||
|
||||
## bilan.des.neutres
|
||||
|
||||
- équilibrés
|
||||
|
||||
## bilan.des.contre
|
||||
|
||||
- un peu contre vous
|
||||
|
||||
## bilan.des.tres-contre
|
||||
|
||||
- nettement contre vous
|
||||
|
||||
## bilan.aucun-coup
|
||||
|
||||
- Aucun coup à revoir : vous avez joué comme je l'aurais fait.
|
||||
|
||||
+500
@@ -2892,3 +2892,503 @@ html.landscape .explain-sheet > .explain-body {
|
||||
grid-column: 1;
|
||||
grid-row: 1 / span 8;
|
||||
}
|
||||
|
||||
/* ------------------------------------------ Bilan de fin de partie (1e) */
|
||||
|
||||
/* Maquette « Bilan de fin de partie » (charte, ecrans-etape-1.md) : un
|
||||
* panneau centré, à la place du panneau de fin de partie ; il défile si
|
||||
* l'écran est trop bas. */
|
||||
.summary-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
width: min(26rem, 100%);
|
||||
max-height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.summary-panel p {
|
||||
margin: 0;
|
||||
font-size: 17px;
|
||||
line-height: 25px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.summary-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 44px;
|
||||
margin: calc(-1 * var(--space-2)) 0;
|
||||
}
|
||||
|
||||
.summary-title {
|
||||
margin: 0;
|
||||
font-size: 28px;
|
||||
line-height: 34px;
|
||||
}
|
||||
|
||||
.summary-panel .summary-status {
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
/* Trois cases : bons coups, imprécisions, erreurs. */
|
||||
.summary-counts {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.summary-count {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: var(--space-2) var(--space-1);
|
||||
background: var(--surface-sunken);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.summary-number {
|
||||
font-size: 28px;
|
||||
line-height: 34px;
|
||||
font-weight: 800;
|
||||
font-variant-numeric: tabular-nums lining-nums;
|
||||
}
|
||||
|
||||
.summary-word {
|
||||
display: inline-flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.summary-word .icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
[data-verdict="good"] > .summary-word,
|
||||
.summary-verdict[data-verdict="good"],
|
||||
.row-word[data-verdict="good"],
|
||||
.viewer-phrase[data-verdict="good"] strong { color: var(--verdict-good); }
|
||||
[data-verdict="doubtful"] > .summary-word,
|
||||
.summary-verdict[data-verdict="doubtful"],
|
||||
.row-word[data-verdict="doubtful"],
|
||||
.viewer-phrase[data-verdict="doubtful"] strong { color: var(--verdict-doubtful); }
|
||||
[data-verdict="bad"] > .summary-word,
|
||||
.summary-verdict[data-verdict="bad"],
|
||||
.summary-verdict[data-verdict="veryBad"],
|
||||
.row-word[data-verdict="bad"],
|
||||
.row-word[data-verdict="veryBad"],
|
||||
.viewer-phrase[data-verdict="bad"] strong,
|
||||
.viewer-phrase[data-verdict="veryBad"] strong { color: var(--verdict-bad); }
|
||||
|
||||
/* Deux jauges sur une ligne chacune : votre jeu (niveau), les dés. */
|
||||
.summary-gauges {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.gauge {
|
||||
display: grid;
|
||||
grid-template-columns: 5.5rem minmax(3rem, 1fr) auto;
|
||||
gap: var(--space-2);
|
||||
align-items: center;
|
||||
min-height: 28px;
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.gauge-name {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.gauge-value {
|
||||
color: var(--muted);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.gauge-track {
|
||||
position: relative;
|
||||
height: 8px;
|
||||
overflow: hidden;
|
||||
background: var(--surface-sunken);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.gauge-fill {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: var(--verdict-good);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.gauge-fill.level-1 { width: 16.7%; }
|
||||
.gauge-fill.level-2 { width: 33.3%; }
|
||||
.gauge-fill.level-3 { width: 50%; }
|
||||
.gauge-fill.level-4 { width: 66.7%; }
|
||||
.gauge-fill.level-5 { width: 83.3%; }
|
||||
.gauge-fill.level-6 { width: 100%; }
|
||||
|
||||
/* La chance : jauge centrée, à droite si elle vous a aidé. */
|
||||
.gauge-track.centred::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: calc(50% - 1px);
|
||||
width: 2px;
|
||||
background: var(--muted);
|
||||
}
|
||||
|
||||
.gauge-fill.dice { background: var(--border-strong); border-radius: 0; }
|
||||
.gauge-fill.dice.for-1 { left: 50%; width: 25%; }
|
||||
.gauge-fill.dice.for-2 { left: 50%; width: 50%; }
|
||||
.gauge-fill.dice.against-1 { left: 25%; width: 25%; }
|
||||
.gauge-fill.dice.against-2 { left: 0; width: 50%; }
|
||||
.gauge-fill.dice.even { left: calc(50% - 6px); width: 12px; }
|
||||
|
||||
.summary-glossary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
align-self: flex-start;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
/* Le coup à revoir : mini-plateau, mot, votre coup, celui du maître. */
|
||||
.summary-review {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
padding-top: var(--space-3);
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.summary-review-body {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
|
||||
gap: var(--space-3);
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.summary-panel .summary-verdict {
|
||||
display: inline-flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.summary-verdict .icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.summary-panel .summary-played,
|
||||
.summary-panel .summary-master {
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.summary-panel .summary-master {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.summary-review-actions,
|
||||
.viewer-actions {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* L'emplacement de « Demander à une IA » (étape 1f) : réservé, vide. */
|
||||
.ask-ai-slot {
|
||||
flex: 1 1 0;
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.summary-actions > * {
|
||||
flex: 1 1 0;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
/* En paysage : deux colonnes, le résultat et les mesures à gauche, le
|
||||
* coup à revoir et les actions à droite. */
|
||||
html.landscape .summary-panel {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
grid-auto-flow: row dense;
|
||||
column-gap: var(--space-6);
|
||||
align-content: start;
|
||||
width: min(52rem, 100%);
|
||||
}
|
||||
|
||||
html.landscape .summary-panel > * {
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
html.landscape .summary-panel > .summary-review,
|
||||
html.landscape .summary-panel > .summary-actions,
|
||||
html.landscape .summary-panel > .panel-link {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
html.landscape .summary-panel > .summary-review {
|
||||
grid-row: 1 / span 4;
|
||||
padding-top: 0;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
/* ------------------------------------------- Analyse d'une partie (1e) */
|
||||
|
||||
/* Maquette interactive « Analyse » : une page qui défile. */
|
||||
.analysis {
|
||||
max-width: var(--page-width);
|
||||
margin: 0 auto;
|
||||
padding-bottom: var(--space-6);
|
||||
}
|
||||
|
||||
.analysis-head {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
align-items: center;
|
||||
margin: var(--space-3) 0;
|
||||
}
|
||||
|
||||
.analysis-title {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.analysis-message:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.analysis-card {
|
||||
margin: 0 0 var(--space-4);
|
||||
padding: var(--space-3);
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.analysis-card > .overline {
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
/* La courbe de vos chances de gagner : on la parcourt du doigt. */
|
||||
.analysis-curve {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 168px;
|
||||
touch-action: pan-y;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
font-family: var(--font-sans);
|
||||
}
|
||||
|
||||
.analysis-curve:focus-visible {
|
||||
outline: 2px solid var(--focus);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.curve-axis { stroke: var(--border); stroke-width: 1; }
|
||||
.curve-half { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 4 4; }
|
||||
.curve-label { fill: var(--muted); font-size: 12px; }
|
||||
.curve-area { fill: var(--accent-soft); }
|
||||
.curve-line { fill: none; stroke: var(--text); stroke-width: 2; stroke-linejoin: round; }
|
||||
.curve-dot.other { fill: var(--text); }
|
||||
.curve-dot.verdict-good { fill: var(--verdict-good); }
|
||||
.curve-dot.verdict-doubtful { fill: var(--verdict-doubtful); }
|
||||
.curve-dot.verdict-bad,
|
||||
.curve-dot.verdict-veryBad { fill: var(--verdict-bad); }
|
||||
.curve-cursor { stroke: var(--accent); stroke-width: 2; }
|
||||
.curve-ring { fill: none; stroke: var(--accent); stroke-width: 2; }
|
||||
.curve-band { fill: transparent; cursor: pointer; }
|
||||
.curve-band.selected { fill: var(--accent); fill-opacity: 0.08; }
|
||||
|
||||
/* Le visualiseur : « ‹ Coup 7 sur 24 · 6-1 › », le plateau d'avant le
|
||||
* coup, la phrase du maître, votre coup contre celui du maître. */
|
||||
.viewer-nav {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#analysis-prev .icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.viewer-step[aria-disabled="true"] {
|
||||
opacity: 0.35;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.viewer-turn {
|
||||
margin: 0;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
font-variant-numeric: tabular-nums lining-nums;
|
||||
}
|
||||
|
||||
.viewer-body,
|
||||
.viewer-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.viewer-phrase {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.viewer-phrase strong {
|
||||
display: inline-flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.viewer-phrase strong .icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.viewer-legend {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.viewer-chance {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.viewer-chance:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.viewer-text .segment {
|
||||
min-height: 44px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.analysis-board[data-move="mine"] { --last-move: var(--text); }
|
||||
.analysis-board[data-move="best"] { --last-move: var(--verdict-good); }
|
||||
|
||||
/* Les coups à revoir : filtres en pastilles, une ligne par coup. */
|
||||
.filters {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
.filters .filter {
|
||||
min-height: 44px;
|
||||
padding: 0 14px;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: var(--text);
|
||||
background: var(--surface-sunken);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.filters .filter[aria-pressed="true"] {
|
||||
color: var(--surface);
|
||||
background: var(--text);
|
||||
border-color: var(--text);
|
||||
}
|
||||
|
||||
.analysis-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.analysis-row {
|
||||
display: grid;
|
||||
grid-template-columns: 2rem 2.5rem minmax(0, 1fr) auto;
|
||||
gap: var(--space-2);
|
||||
align-items: center;
|
||||
min-height: 44px;
|
||||
padding: 0 var(--space-1);
|
||||
color: var(--text);
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.analysis-row[aria-current="true"] {
|
||||
background: var(--accent-soft);
|
||||
}
|
||||
|
||||
.row-number,
|
||||
.row-roll {
|
||||
color: var(--muted);
|
||||
font-variant-numeric: tabular-nums lining-nums;
|
||||
}
|
||||
|
||||
.row-move {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.row-word {
|
||||
display: inline-flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.row-word .icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.analysis-empty {
|
||||
padding: var(--space-2) 0;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.analysis-table {
|
||||
grid-template-columns: minmax(0, 1fr) auto auto;
|
||||
}
|
||||
|
||||
/* En paysage : le plateau du visualiseur à gauche, tenu dans la hauteur
|
||||
* de l'écran ; le texte à droite. */
|
||||
html.landscape .viewer-body {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
gap: var(--space-4);
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
html.landscape .analysis-board {
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
height: calc(100vh - 120px);
|
||||
height: calc(100dvh - 120px);
|
||||
aspect-ratio: 640 / 520;
|
||||
}
|
||||
|
||||
/* Le mini-plateau du coup à revoir : trop petit pour les numéros des
|
||||
* flèches, qui se chevaucheraient. */
|
||||
.summary-board .point-number {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -101,6 +101,10 @@
|
||||
app/src/ui/new-game-view.ts. -->
|
||||
<section id="new-game" class="new-game page" hidden></section>
|
||||
|
||||
<!-- L'analyse d'une partie (#/parties/<id>/analyse/<coup>), construite par
|
||||
app/src/ui/analysis-view.ts. -->
|
||||
<section id="analysis" class="analysis page" hidden></section>
|
||||
|
||||
<!-- L'aide : un onglet par adresse (#/aide, #/glossaire, #/a-propos). -->
|
||||
<section id="help" class="help page" hidden>
|
||||
<!-- La barre haute de l'aide reste en vue quand la page défile. -->
|
||||
@@ -158,6 +162,10 @@
|
||||
construite par app/src/ui/advice-view.ts. -->
|
||||
<div id="explain-veil" class="veil sheet-veil" hidden></div>
|
||||
|
||||
<!-- Le bilan de fin de partie (#/parties/<id>/bilan) : un panneau centré,
|
||||
construit par app/src/ui/summary-view.ts. -->
|
||||
<div id="summary-veil" class="veil summary-veil" hidden></div>
|
||||
|
||||
<!-- La marche à suivre pour installer (#/installer) : une feuille. -->
|
||||
<div id="install-veil" class="veil sheet-veil" hidden>
|
||||
<div id="install-sheet" class="sheet" role="dialog" aria-modal="true" aria-labelledby="install-title">
|
||||
|
||||
Reference in New Issue
Block a user