From 77c76deacd0a99e05fbc7e3aad1bffc8cca34282 Mon Sep 17 00:00:00 2001
From: Pierre MARTIN <contact@pierre-martin.fr>
Date: Tue, 3 Nov 2026 09:54:09 +0100
Subject: [PATCH] =?UTF-8?q?Couleur=20des=20fl=C3=A8ches=20selon=20leur=20n?=
 =?UTF-8?q?um=C3=A9ro=20(impaires=20point-a,=20paires=20point-b)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 app/src/ui/board-model.ts |  8 ++++++++
 app/src/ui/board-view.ts  | 10 ++++++++--
 app/tests/ui.test.ts      | 13 +++++++++++++
 3 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/app/src/ui/board-model.ts b/app/src/ui/board-model.ts
index bbf19f1..a8e1465 100644
--- a/app/src/ui/board-model.ts
+++ b/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 } {
diff --git a/app/src/ui/board-view.ts b/app/src/ui/board-view.ts
index b96d4ab..b17a1aa 100644
--- a/app/src/ui/board-view.ts
+++ b/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(
diff --git a/app/tests/ui.test.ts b/app/tests/ui.test.ts
index 4ba786d..ff72201 100644
--- a/app/tests/ui.test.ts
+++ b/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 });