Recette automatisée de la révision UX dans make test-browser ; chiffres du plateau à 13 px au moins

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

app/src/ui/app.ts

@@ -358,7 +358,7 @@ export function startApp(options: AppOptions): void {
                         : moveTrace(shownMove.side, shownMove.halfMoves, shownMove.hits),
                 diceAction: action,
                 canDouble: !busy && canDouble,
-                band: landscape ? (text === null ? resultText(game) : text.short) : null,
+                band: landscape ? (text === null ? TEXTS.gameOver : text.short) : null,
                 controls: landscape ? controls() : null,
             });
         }

app/src/ui/board-view.ts

@@ -85,7 +85,6 @@ export const NO_MARKS = {
 } as const;
 
 const OFF_SLAB = 12; // épaisseur d'un pion sorti
-const CUBE = 36;
 
 const SVG_NS = "http://www.w3.org/2000/svg";
 
@@ -340,7 +339,12 @@ function drawStack(
             add(
                 svg,
                 "text",
-                { class: `checker-count count-${side}`, x, y: y + g.radius * 0.3 },
+                {
+                    class: `checker-count count-${side}`,
+                    x,
+                    y: y + g.countFont * 0.35,
+                    "font-size": g.countFont,
+                },
                 String(count),
             );
         }
@@ -721,14 +725,20 @@ function drawDice(svg: SVGSVGElement, g: Geometry, dice: readonly ShownDie[]): v
  * sinon du côté de son propriétaire. */
 function drawCube(svg: SVGSVGElement, g: Geometry, cube: Cube): SVGElement {
     const center = cubeCenter(g, cube);
-    const x = center.x - CUBE / 2;
-    const y = center.y - CUBE / 2;
+    const size = g.cube;
+    const x = center.x - size / 2;
+    const y = center.y - size / 2;
     const group = add(svg, "g", { class: "cube", "data-owner": cube.owner ?? "center" });
-    add(group, "rect", { class: "cube-face", x, y, width: CUBE, height: CUBE, rx: 4 });
+    add(group, "rect", { class: "cube-face", x, y, width: size, height: size, rx: 4 });
     add(
         group,
         "text",
-        { class: "cube-value", x: center.x, y: center.y + 6 },
+        {
+            class: "cube-value",
+            x: center.x,
+            y: center.y + g.cubeFont * 0.35,
+            "font-size": g.cubeFont,
+        },
         String(cube.owner === null ? 64 : cube.value),
     );
     return group;

app/src/ui/geometry.ts

@@ -51,6 +51,11 @@ export interface Geometry {
     readonly numberSize: number;
     readonly bandFont: number;
     readonly chipFont: number;
+    /** Videau : côté et taille du chiffre ; nombre posé sur une pile trop
+     * haute (13 px au moins à l'écran). */
+    readonly cube: number;
+    readonly cubeFont: number;
+    readonly countFont: number;
     readonly die: number;
     /** Nombre de pions dessinés au plus sur la barre, par camp (au-delà, un
      * nombre sur le dernier) : en paysage, ils s'arrêtent avant les
@@ -80,6 +85,12 @@ export function boardGeometry(layout: Layout, aspect: number, pxPerUnit: number)
     const height = BOARD_HEIGHT;
     const target = atLeast(46, pxPerUnit, 40);
     const numberSize = atLeast(12.5, pxPerUnit, 13);
+    const text = atLeast(13.5, pxPerUnit, 17);
+    const sizes = {
+        cubeFont: text,
+        cube: Math.max(36, text + 20),
+        countFont: Math.max(18, text),
+    };
     if (layout === "portrait") {
         // Les mesures du plateau d'origine : flèches de 44, pions de 20.
         const frame = 8;
@@ -112,6 +123,7 @@ export function boardGeometry(layout: Layout, aspect: number, pxPerUnit: number)
             numberSize,
             bandFont: atLeast(13.5, pxPerUnit, 17),
             chipFont: atLeast(13.5, pxPerUnit, 17),
+            ...sizes,
             die: 36,
             barStack: MAX_STACK,
             chipHeight: 0,
@@ -156,6 +168,7 @@ export function boardGeometry(layout: Layout, aspect: number, pxPerUnit: number)
         numberSize,
         bandFont: atLeast(13.5, pxPerUnit, 22),
         chipFont,
+        ...sizes,
         die: Math.min(40, band - 12),
         barStack,
         chipHeight,

app/tests/layout.test.ts

@@ -62,6 +62,9 @@ test("géométrie en paysage : le plateau remplit l'écran, flèches de 44 px et
         assert.ok(g.bandFont * px >= 13, `${where} : consigne de ${g.bandFont * px} px`);
         assert.ok(g.chipFont * px >= 13, `${where} : comptes de ${g.chipFont * px} px`);
         assert.ok(g.target * px >= 44, `${where} : cibles de ${g.target * px} px`);
+        assert.ok(g.cubeFont * px >= 13, `${where} : videau en ${g.cubeFont * px} px`);
+        assert.ok(g.countFont * px >= 13, `${where} : nombres des piles en ${g.countFont * px} px`);
+        assert.ok(g.cube <= g.left - 8, `${where} : videau plus large que sa colonne`);
         assert.ok(g.left - 4 >= g.target - 4, `${where} : colonne de commandes trop étroite`);
         // Les numéros tiennent dans le cadre.
         assert.ok(g.numberSize < g.edge, `${where} : numéros hors du cadre`);