Tutoriel : deux flèches circulaires ; les jans remplacent le camp

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-12 02:50:10 +01:00
parent 09a2ddf566
commit 966822084a
13 changed files with 156 additions and 66 deletions
@@ -156,6 +156,43 @@ export function pointSlot(number: number): { top: boolean; column: number } {
    return { top: true, column: number - 13 };
 }

+/**
+ * Le jan intérieur d'un camp : ses six dernières flèches avant la sortie,
+ * numérotées du point de vue du joueur (1 à 6 pour lui, 19 à 24 pour
+ * l'ordinateur), dans le sens de marche du camp. Pur dessin : le moteur
+ * reste seul juge des règles qui en dépendent (sortie, rentrée).
+ * Glossaire : docs/glossaire/jan-interieur.md
+ */
+export interface HomeBoard {
+    readonly side: Side;
+    readonly points: readonly number[];
+}
+
+/**
+ * Le jan extérieur d'un camp : les six flèches qui précèdent son jan
+ * intérieur (7 à 12 pour le joueur, 13 à 18 pour l'ordinateur), dans le sens
+ * de marche du camp.
+ * Glossaire : docs/glossaire/jan-exterieur.md
+ */
+export interface OuterBoard {
+    readonly side: Side;
+    readonly points: readonly number[];
+}
+
+/** Six flèches d'un camp, de sa flèche first à first - 5 dans sa propre
+ * numérotation, renumérotées pour le joueur. */
+function sixPoints(side: Side, first: number): number[] {
+    return Array.from({ length: 6 }, (_, i) => (side === "player" ? first - i : 25 - (first - i)));
+}
+
+export function homeBoard(side: Side): HomeBoard {
+    return { side, points: sixPoints(side, 6) };
+}
+
+export function outerBoard(side: Side): OuterBoard {
+    return { side, points: sixPoints(side, 12) };
+}
+
 /** Le plateau de la position de départ, pour le dessiner avant que le
 * moteur soit chargé (première ouverture) : chaque camp a 2 pions sur sa case
 * 24, 5 sur la 13, 3 sur la 8 et 5 sur la 6 ; 167 points chacun. Une donnée,
@@ -94,14 +94,15 @@ export const HOME_TEXTS = {
    drop: "Passer",
    tutorialLoading: "Chargement du tutoriel…",
    tutorialFailed: "Le tutoriel n'a pas pu se charger.",
-    pathLabel: "Le sens du jeu de vos pions, en pointillés",
+    pathLabel:
+        "Le sens du jeu : la flèche claire pour vos pions, la sombre pour ceux de l'ordinateur",
    /** Le résultat d'une partie finie par le coup illustré (étape 7). */
    illustratedEnd: (kind: ResultKind) =>
        kind === "single"
            ? "Partie finie : l'ordinateur avait sorti des pions, c'est une partie simple."
            : kind === "gammon"
              ? "Partie finie : l'ordinateur n'a sorti aucun pion, c'est un gammon."
-              : "Partie finie : il reste un pion de l'ordinateur dans votre camp, c'est un backgammon.",
+              : "Partie finie : il reste un pion de l'ordinateur dans votre jan intérieur, c'est un backgammon.",
    computerDoubles: "L'ordinateur double.",

    // Aide
@@ -188,7 +188,7 @@ export const TEXTS = {
    ) =>
        [
            winner === null
-                ? "Vous avez la main : vos pions ivoire, en bas."
+                ? "Vous avez la main : vos pions blancs, en bas."
                : `La partie est finie dans cette position : ${
                      winner === "player" ? "vous gagnez" : "l'ordinateur gagne"
                  }.`,
@@ -24,7 +24,7 @@ export interface TutorialScreen {
    readonly roll: readonly [number, number] | null;
    /** Explication : le coup illustré, en notation de gnubg. */
    readonly move: string | null;
-    /** Explication : le sens du jeu dessiné en pointillés. */
+    /** Explication : le sens du jeu, deux flèches circulaires. */
    readonly path: boolean;
    /** « À vous » : les coups justes, en notation de gnubg. */
    readonly expected: readonly string[];
@@ -18,11 +18,14 @@ import type { Side } from "../domain/game/side.js";
 import type { PracticeVerdict, TutorialBoard } from "../domain/learning/tutorial.js";
 import {
    boardModel,
+    homeBoard,
    moveTargets,
    moveTrace,
    onlyHalfMove,
+    outerBoard,
    type Place,
    placeOf as placeOfChecker,
+    pointSlot,
 } from "./board-model.js";
 import {
    type BoardDecor,
@@ -149,57 +152,71 @@ export function fillParagraph(target: HTMLElement, paragraph: Paragraph): void {

 const SVG_NS = "http://www.w3.org/2000/svg";

-/** Le sens du jeu des pions du joueur, en pointillés : du haut à droite
- * (flèche 24) vers la gauche, puis en bas jusqu'à la flèche 1 et la sortie.
- * Tracé sous les pions et sous les numéros des flèches, qu'il ne cache
- * jamais. pxPerUnit : pixels à l'écran par unité du dessin (le liseré
- * ivoire fait 8 px, les points 4 px, quelle que soit la taille). */
-function drawPath(svg: SVGSVGElement, g: Geometry, pxPerUnit: number): void {
+/** Le sens du jeu : deux flèches circulaires, une claire pour les pions du
+ * joueur (du haut à droite vers la gauche, puis en bas jusqu'à son jan
+ * intérieur), une sombre pour ceux de l'ordinateur, en sens inverse et à
+ * l'intérieur de la première. Chacune a un liseré de la couleur opposée et
+ * finit par une pointe ; jamais en brique (la brique veut dire « à faire »).
+ * Dessinées sous les pions, qu'elles ne cachent jamais. pxPerUnit : pixels
+ * à l'écran par unité du dessin (trait de 5 px sur un liseré de 9 px,
+ * quelle que soit la taille du plateau). */
+function drawDirections(svg: SVGSVGElement, g: Geometry, pxPerUnit: number): void {
+    const px = (n: number) => n / pxPerUnit;
    const center = (column: number) => columnLeft(g, column) + g.pointWidth / 2;
-    const top = g.height * 0.3;
-    const bottom = g.height * 0.7;
-    const right = center(11);
-    const left = center(0) - g.pointWidth * 0.25;
-    const turn = g.pointWidth * 0.6;
-    const end = g.trayLeft + g.tray * 0.25;
-    const d =
-        `M ${right} ${top} L ${left + turn} ${top} Q ${left} ${top} ${left} ${top + turn} ` +
-        `L ${left} ${bottom - turn} Q ${left} ${bottom} ${left + turn} ${bottom} L ${end} ${bottom}`;
    const group = document.createElementNS(SVG_NS, "g");
    group.setAttribute("class", "tutorial-path");
    group.setAttribute("role", "img");
    group.setAttribute("aria-label", HOME_TEXTS.pathLabel);
-    const px = (n: number) => n / pxPerUnit;
-    const width = px(4);
-    for (const [className, stroke] of [
-        ["path-edge", px(8)],
-        ["path-dots", width],
-    ] as const) {
-        const path = document.createElementNS(SVG_NS, "path");
-        path.setAttribute("class", className);
-        path.setAttribute("d", d);
-        path.setAttribute("stroke-width", String(stroke));
-        if (className === "path-dots") {
-            path.setAttribute("stroke-dasharray", `0.1 ${px(10)}`);
+    // Chaque flèche part du jan intérieur adverse (sa flèche 24), longe les
+    // deux jans extérieurs, tourne au bout du sien et finit dans son jan
+    // intérieur. Celle de l'ordinateur passe à l'intérieur de la claire.
+    const column = (point: number) => pointSlot(point).column;
+    const loops = [
+        {
+            side: "player",
+            from: g.height * 0.29,
+            to: g.height * 0.71,
+            left: center(column(outerBoard("player").points[0] ?? 12)) - g.pointWidth * 0.1,
+        },
+        {
+            side: "computer",
+            from: g.height * 0.62,
+            to: g.height * 0.38,
+            left: center(column(outerBoard("computer").points[0] ?? 13) + 1) + g.pointWidth * 0.5,
+        },
+    ] as const;
+    const head = px(18);
+    const half = px(10);
+    for (const { side, from, to, left } of loops) {
+        const other = side === "player" ? "computer" : "player";
+        const start = center(column(homeBoard(other).points[5] ?? 1));
+        const end = center(column(homeBoard(side).points[4] ?? 2)) + g.pointWidth * 0.3;
+        const turn = Math.min(Math.abs(to - from) / 2, g.pointWidth * 0.9);
+        const down = to > from ? 1 : -1;
+        const d =
+            `M ${start} ${from} L ${left + turn} ${from} Q ${left} ${from} ${left} ${from + down * turn} ` +
+            `L ${left} ${to - down * turn} Q ${left} ${to} ${left + turn} ${to} L ${end - head / 2} ${to}`;
+        for (const [part, stroke] of [
+            ["edge", px(9)],
+            ["line", px(5)],
+        ] as const) {
+            const path = document.createElementNS(SVG_NS, "path");
+            path.setAttribute("class", `direction-${part} direction-${side}`);
+            path.setAttribute("d", d);
+            path.setAttribute("stroke-width", String(stroke));
+            group.append(path);
        }
-        group.append(path);
-    }
-    const head = document.createElementNS(SVG_NS, "path");
-    head.setAttribute("class", "path-head");
-    const size = px(7);
-    head.setAttribute(
-        "d",
-        `M ${end - size} ${bottom - size} L ${end} ${bottom} L ${end - size} ${bottom + size}`,
-    );
-    head.setAttribute("stroke-width", String(px(3)));
-    group.append(head);
-    // Sous les pions, et sous les numéros des flèches, remontés au-dessus
-    // du tracé ; les zones à toucher restent devant tout.
-    const pieces = svg.querySelector(":scope > g.pieces");
-    svg.insertBefore(group, pieces);
-    for (const number of svg.querySelectorAll(":scope > .point-number")) {
-        svg.insertBefore(number, pieces);
+        const tip = document.createElementNS(SVG_NS, "path");
+        tip.setAttribute("class", `direction-head direction-${side}`);
+        tip.setAttribute(
+            "d",
+            `M ${end - head} ${to - half} L ${end} ${to} L ${end - head} ${to + half} Z`,
+        );
+        tip.setAttribute("stroke-width", String(px(2)));
+        group.append(tip);
    }
+    // Sous les pions ; les zones à toucher restent devant tout.
+    svg.insertBefore(group, svg.querySelector(":scope > g.pieces"));
 }

 /** Crée l'écran du tutoriel dans section (vide dans index.html). */
@@ -359,7 +376,7 @@ export function createTutorialView(options: TutorialViewOptions): TutorialView {
        };
        renderBoard(svg, g, boardModel(current), decor);
        if (screen?.path === true) {
-            drawPath(svg, g, (svg.getBoundingClientRect().width || g.width) / g.width);
+            drawDirections(svg, g, (svg.getBoundingClientRect().width || g.width) / g.width);
        }
    }