app/src/ui/board-model.ts

@@ -139,6 +139,14 @@ export function moveTrace(
     return { side, arrows, landed, left, hits: hits.filter(Boolean).length };
 }
 
+/** La couleur d'une flèche (case), d'après son numéro affiché (1 à 24,
+ * pour le joueur) : impaire en point-a, paire en point-b (charte). Jamais
+ * d'après sa colonne : les cases 12 et 13, l'une au-dessus de l'autre,
+ * n'ont pas la même couleur. */
+export function pointColor(number: number): "point-a" | "point-b" {
+    return number % 2 === 1 ? "point-a" : "point-b";
+}
+
 /** Où se trouve une case sur le dessin : rangée du haut ou du bas, et
  * colonne de 0 (à gauche) à 11 (à droite), sans compter la barre. */
 export function pointSlot(number: number): { top: boolean; column: number } {

app/src/ui/board-view.ts

@@ -11,7 +11,13 @@
 
 import type { Cube } from "../domain/game/cube.js";
 import type { Side } from "../domain/game/side.js";
-import { type BoardModel, type MoveTrace, type Place, pointSlot } from "./board-model.js";
+import {
+    type BoardModel,
+    type MoveTrace,
+    type Place,
+    pointColor,
+    pointSlot,
+} from "./board-model.js";
 import { TEXTS } from "./texts.js";
 
 /** Un dé affiché, de la couleur du camp qui l'a lancé. */
@@ -221,7 +227,7 @@ function drawPoint(
     const base = top ? FRAME : HEIGHT - FRAME;
     const tip = top ? FRAME + POINT_HEIGHT : HEIGHT - FRAME - POINT_HEIGHT;
     add(svg, "polygon", {
-        class: column % 2 === 0 ? "point-a" : "point-b",
+        class: pointColor(number),
         points: `${left},${base} ${left + POINT_WIDTH},${base} ${center},${tip}`,
     });
     add(

app/tests/ui.test.ts

@@ -18,6 +18,7 @@ import {
     moveTrace,
     onlyHalfMove,
     placeOf,
+    pointColor,
     pointSlot,
 } from "../src/ui/board-model.js";
 import { parseFeature, parseGlossaryEntry, parseGlossaryIndex } from "../src/ui/help-text.js";
@@ -54,6 +55,18 @@ test("cases, barre et sortie de chaque camp", () => {
     assert.equal(placeOf("computer", 0), "off-computer");
 });
 
+test("couleur des flèches : impaires en point-a, paires en point-b, quelle que soit la colonne", () => {
+    for (const number of [1, 13, 23]) {
+        assert.equal(pointColor(number), "point-a", `flèche ${number}`);
+    }
+    for (const number of [2, 12, 24]) {
+        assert.equal(pointColor(number), "point-b", `flèche ${number}`);
+    }
+    // 12 et 13 partagent la colonne 0, mais pas la couleur.
+    assert.equal(pointSlot(12).column, pointSlot(13).column);
+    assert.notEqual(pointColor(12), pointColor(13));
+});
+
 test("disposition : 1 à 12 en bas de droite à gauche, 13 à 24 en haut de gauche à droite", () => {
     assert.deepEqual(pointSlot(1), { top: false, column: 11 });
     assert.deepEqual(pointSlot(7), { top: false, column: 5 });