/** * PlayAwale — Thème de plateau « bois » * ----------------------------------------------------------------------------- * Apparence du plateau : matières, couleurs, reliefs. Reprend l'aspect du * plateau de bois de la version 1. * * CE FICHIER NE CONTIENT QUE DES VARIABLES. * Aucune règle de mise en page, aucune animation : tout cela appartient à * components/board.css, qui reste identique quel que soit le thème. Un thème ne * décide que de l'aspect. * * TOUTES LES MESURES SONT DES PROPORTIONS DU TROU * Un rayon d'arrondi, une épaisseur de cerne, une portée d'ombre relèvent de * l'aspect et vivent donc ici — mais jamais en pixels fixes. Écrites en * fraction de --hole-size, elles donnent la même image sur un téléphone et sur * un écran de bureau ; écrites en pixels, elles donneraient un plateau aux * bords démesurément ronds et aux trous noyés d'ombre dès que le plateau * rétrécit. Les fractions sont données pour un trou de 120 px, la taille de * référence de la version 1. * * D'OÙ LA PORTÉE : .board-container, ET NON :root * Une propriété personnalisée qui en cite une autre est résolue SUR L'ÉLÉMENT * OÙ ELLE EST DÉCLARÉE, puis héritée déjà résolue. Déclarées sur :root, ces * variables y chercheraient --hole-size, qui n'y existe pas : elles * deviendraient invalides, et le plateau perdrait son arrondi et le creux de * ses trous. Déclarées sur .board-container, où --hole-size est définie, elles * se résolvent correctement. * * Toutes les variables de ce fichier ne servent qu'à l'intérieur du plateau : * cette portée plus étroite ne retire donc rien. * * CRÉER UN AUTRE THÈME * Copier ce fichier sous assets/css/themes/board/.css, changer les * valeurs, puis sélectionner le thème dans config.inc.php (constante * AWALE_BOARD_THEME) ou par page. Rien d'autre à modifier : ni le HTML, ni la * feuille de structure, ni le JavaScript. * * @package PlayAwale * @version 2.0 * @author Nicolas Lion — Développeur web — https://nlion.fr * @copyright 2026 Nicolas Lion */ .board-container { /* ========================================================================== PLATEAU ========================================================================== */ /* Teinte de fond, visible sous la texture. */ --board-base-color: #a3693c; /* Texture du bois : quelques dégradés superposés imitent les veines et les rainures. Empilés du plus proche au plus lointain, comme toute pile de background-image. SEULE EXCEPTION À LA RÈGLE DES PROPORTIONS Les épaisseurs de veine restent en pixels. Le grain d'un bois est une matière, non une forme : il ne rétrécit pas avec l'objet. Et une veine proportionnelle tomberait sous le demi-pixel sur un téléphone, où elle ne donnerait plus qu'un flou gris au lieu d'un trait. */ --board-texture: radial-gradient(circle at 20% 20%, rgba(0, 0, 0, 0.1), transparent 20%), radial-gradient(circle at 80% 80%, rgba(0, 0, 0, 0.1), transparent 20%), repeating-linear-gradient(90deg, #a05a2c 0%, #a3693c 100%), repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0px, rgba(0, 0, 0, 0.1) 1px, transparent 1px, transparent 20px), repeating-linear-gradient(45deg, #7a4f34 0px, #7a4f34 2px, transparent 2px, transparent 10px), repeating-linear-gradient(-45deg, #8c5e3d 0px, #8c5e3d 2px, transparent 2px, transparent 10px); --board-blend-mode: overlay, multiply, normal; /* Ombre portée sous le plateau, qui le décolle du fond. */ --board-shadow: 0 calc(var(--hole-size) * 0.1) calc(var(--hole-size) * 0.2) rgba(0, 0, 0, 0.35); --board-radius: calc(var(--hole-size) / 2.4); /* ========================================================================== RAINURE CENTRALE ET CHARNIÈRES Le plateau évoque une boîte qui se replie en deux. ========================================================================== */ --board-groove-color: rgba(255, 255, 255, 0.3); --board-hinge-color: #3a2723; --board-hinge-dot-color: #d7ccc8; /* ========================================================================== TROUS ========================================================================== */ /* Creux du trou : une ombre interne suffit à donner la profondeur, sans image ni bordure. */ --hole-shadow: inset 0 0 calc(var(--hole-size) / 2.4) rgba(68, 37, 1, 0.8); /* Éclaircissement au survol, sur les seuls trous jouables. */ --hole-hover-color: #5e4137; /* ========================================================================== GRAINES ========================================================================== */ /* Graine dorée : le point clair décalé en haut à gauche suggère une source de lumière unique, cohérente sur tout le plateau. */ --seed-fill: radial-gradient(circle at 30% 30%, #ffd54f, #ffa000); --seed-shadow: inset 0 calc(var(--hole-size) / 120) calc(var(--hole-size) / 60) rgba(255, 255, 255, 0.6), 0 calc(var(--hole-size) / 60) calc(var(--hole-size) / 30) rgba(0, 0, 0, 0.3); /* ========================================================================== REPÈRES DE JEU ========================================================================== */ /* Pastille indiquant le nombre de graines d'un trou. */ --seed-count-bg: rgba(0, 0, 0, 0.6); --seed-count-color: #ffffff; /* Compteur des graines restant en main pendant le semis. */ --seed-counter-bg: rgba(0, 0, 0, 0.7); --seed-counter-color: #ffffff; /* Trou en cours d'alimentation pendant le semis. */ --hole-distribution-outline: calc(var(--hole-size) / 24) solid #ffffff; /* Coups envisagés par l'ordinateur, puis celui qu'il retient. */ --hole-candidate-outline: calc(var(--hole-size) * 0.025) solid #ffeb3b; --hole-chosen-outline: calc(var(--hole-size) * 0.025) solid #e53935; /* Le même anneau, mais pour le camp du BAS — celui de qui regarde. Il ne sert qu'au lecteur de parties, qui montre chaque coup avant de le jouer : sans deux couleurs, on verrait qu'un trou a été choisi sans voir par qui. Le vert est celui de la barre du camp du bas, pour qu'il veuille dire partout la même chose. */ --hole-chosen-mine-outline: calc(var(--hole-size) * 0.025) solid #66bb6a; /* Aide au survol, sur les niveaux d initiation. Ambre pour le trajet des graines, vert pour ce qui serait capturé : deux teintes franchement distinctes, lisibles sur le bois du plateau. */ --hint-path-outline: calc(var(--hole-size) * 0.025) dashed rgba(243, 156, 18, 0.95); --hint-capture-outline: calc(var(--hole-size) * 0.025) dashed rgba(46, 204, 113, 0.95); --hint-badge-bg: #2ecc71; --hint-badge-color: #ffffff; /* Barre indiquant à qui est le tour. */ --turn-bar-player-color: #66bb6a; --turn-bar-ai-color: #ef5350; }