From cfdbc1cedc4add5056a1798fae0d3fc028366c66 Mon Sep 17 00:00:00 2001 From: Pierre MARTIN Date: Thu, 12 Nov 2026 02:50:10 +0100 Subject: [PATCH] Pions blancs et noirs, avec contour : valeurs de tokens.json dans app.css Co-Authored-By: Claude Opus 5.5 --- docs/glossaire/camp.md | 12 ----- web/app.css | 116 ++++++++++++++++++++--------------------- 2 files changed, 56 insertions(+), 72 deletions(-) delete mode 100644 docs/glossaire/camp.md diff --git a/docs/glossaire/camp.md b/docs/glossaire/camp.md deleted file mode 100644 index 3b9b8c3..0000000 --- a/docs/glossaire/camp.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -term: Camp -english: Home board ---- -# Camp - -**En bref** : les six dernières flèches d'un joueur, avant sa sortie : il y rassemble ses pions pour les sortir, et un pion adverse frappé doit y rentrer. - -Votre camp est en bas à droite (vos flèches 1 à 6) ; celui de l'ordinateur, -en haut à droite (vos flèches 19 à 24), où rentrent vos pions frappés. - -Voir aussi : [Sortie](sortie.md), [Barre](barre.md), [Point](point.md) diff --git a/web/app.css b/web/app.css index 5d658f0..e01ab88 100644 --- a/web/app.css +++ b/web/app.css @@ -81,29 +81,23 @@ --point-a: #6b4430; --point-b: #c9ae88; --point-number: #f3ead8; - --checker-player: #f7f0e2; - --checker-player-edge: #8c7a62; - --checker-computer: #2e1c12; - --checker-computer-edge: #120a05; - --count-player: #2b1d15; - --count-computer: #f3ead8; - --die-player: #f7f0e2; - --pip-player: #2b1d15; - --die-computer: #2e1c12; - --pip-computer: #f3ead8; - --cube: #f7f0e2; - --cube-text: #2b1d15; + --checker-player: #fafaf7; + --checker-player-edge: #6e6e69; + --checker-computer: #1c1c1c; + --checker-computer-edge: #b5b5b0; + --count-player: #1c1c1c; + --count-computer: #fafaf7; + --die-player: #fafaf7; + --pip-player: #1c1c1c; + --die-computer: #1c1c1c; + --pip-computer: #fafaf7; + --cube: #fafaf7; + --cube-text: #1c1c1c; --highlight: #a8432b; --target: rgba(168, 67, 43, 0.32); /* Dernier coup joué (marques et traces) : le laiton, rien d'autre. */ --last-move: var(--brand-laiton); - /* Numéros des flèches. La charte les pose sur le cadre (point-number, - * ivoire) ; notre plateau les pose sur le fond, où l'ivoire ne se lirait - * pas : texte secondaire en thème clair (4,7:1 sur bed), point-number en - * thème sombre (6,3:1). */ - --point-label: var(--muted); - --shadow-raised: 0 1px 2px rgba(43, 29, 21, 0.1); --font-sans: "Alegreya Sans", "Gill Sans", "Segoe UI", system-ui, sans-serif; @@ -167,23 +161,21 @@ --point-a: #3a2519; --point-b: #7e6142; --point-number: #cdbfa8; - --checker-player: #ede3cf; - --checker-player-edge: #8e7c64; - --checker-computer: #140d09; - --checker-computer-edge: #a8957d; - --count-player: #2b1d15; - --count-computer: #f3ead8; - --die-player: #ede3cf; - --pip-player: #2b1d15; - --die-computer: #140d09; - --pip-computer: #ede3cf; - --cube: #ede3cf; - --cube-text: #2b1d15; + --checker-player: #f2f2ef; + --checker-player-edge: #6e6e69; + --checker-computer: #141414; + --checker-computer-edge: #b5b5b0; + --count-player: #1c1c1c; + --count-computer: #fafaf7; + --die-player: #f2f2ef; + --pip-player: #1c1c1c; + --die-computer: #141414; + --pip-computer: #f2f2ef; + --cube: #f2f2ef; + --cube-text: #1c1c1c; --highlight: #e07a5a; --target: rgba(224, 122, 90, 0.38); - --point-label: var(--point-number); - --shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.4); --scrim: rgba(0, 0, 0, 0.6); color-scheme: dark; @@ -215,23 +207,21 @@ --point-a: #3a2519; --point-b: #7e6142; --point-number: #cdbfa8; - --checker-player: #ede3cf; - --checker-player-edge: #8e7c64; - --checker-computer: #140d09; - --checker-computer-edge: #a8957d; - --count-player: #2b1d15; - --count-computer: #f3ead8; - --die-player: #ede3cf; - --pip-player: #2b1d15; - --die-computer: #140d09; - --pip-computer: #ede3cf; - --cube: #ede3cf; - --cube-text: #2b1d15; + --checker-player: #f2f2ef; + --checker-player-edge: #6e6e69; + --checker-computer: #141414; + --checker-computer-edge: #b5b5b0; + --count-player: #1c1c1c; + --count-computer: #fafaf7; + --die-player: #f2f2ef; + --pip-player: #1c1c1c; + --die-computer: #141414; + --pip-computer: #f2f2ef; + --cube: #f2f2ef; + --cube-text: #1c1c1c; --highlight: #e07a5a; --target: rgba(224, 122, 90, 0.38); - --point-label: var(--point-number); - --shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.4); --scrim: rgba(0, 0, 0, 0.6); color-scheme: dark; @@ -984,9 +974,10 @@ a.notation { .point-b { fill: var(--point-b); } /* Numéros des flèches : leur taille est une mesure du dessin (attribut - * font-size), calculée pour faire au moins 12 px à l'écran (geometry.ts). */ + * font-size), calculée pour faire au moins 12 px à l'écran (geometry.ts). + * Posés sur le cadre, en portrait comme en paysage. */ .point-number { - fill: var(--point-label); + fill: var(--point-number); font-weight: 500; text-anchor: middle; } @@ -1118,10 +1109,8 @@ a.notation { cursor: pointer; } -/* Paysage : numéros sur le cadre (ivoire), comptes de points en pastilles - * aux bouts de la barre, consigne dans la bande, commandes à gauche. */ -.point-number.on-frame { fill: var(--point-number); } - +/* Paysage : comptes de points en pastilles aux bouts de la barre, consigne + * dans la bande, commandes à gauche. */ .pip-chip { stroke-width: 1.5; } .chip-player { fill: var(--checker-player); stroke: var(--checker-player-edge); } .chip-computer { fill: var(--checker-computer); stroke: var(--checker-computer-edge); } @@ -2046,9 +2035,10 @@ html.bare .topbar { min-width: 0; } -/* Le sens du jeu : pointillés text sur un liseré ivoire, jamais en brique - * (la brique veut dire « à faire »). Couleurs de marque, les mêmes dans les - * deux thèmes : le liseré reste lisible sur le bois. */ +/* Le sens du jeu : deux flèches circulaires, claire pour le joueur, sombre + * pour l'ordinateur, aux couleurs de leurs pions, chacune avec un liseré de + * la couleur opposée pour rester lisible sur le bois ; jamais en brique (la + * brique veut dire « à faire »). */ .tutorial-path path { fill: none; stroke-linecap: round; @@ -2056,13 +2046,19 @@ html.bare .topbar { pointer-events: none; } -.tutorial-path .path-edge { - stroke: var(--brand-ivoire); +.tutorial-path .direction-player.direction-line { stroke: var(--checker-player); } +.tutorial-path .direction-player.direction-edge { stroke: var(--checker-computer); } +.tutorial-path .direction-computer.direction-line { stroke: var(--checker-computer); } +.tutorial-path .direction-computer.direction-edge { stroke: var(--checker-player); } + +.tutorial-path .direction-head.direction-player { + fill: var(--checker-player); + stroke: var(--checker-computer); } -.tutorial-path .path-dots, -.tutorial-path .path-head { - stroke: var(--brand-noyer); +.tutorial-path .direction-head.direction-computer { + fill: var(--checker-computer); + stroke: var(--checker-player); } /* En paysage, comme la position partagée : le plateau à gauche sur toute