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 });