/** * PlayAwale — Thème de plateau « Iroko pittoresque – Club Awalé » * ----------------------------------------------------------------------------- * Un choix de « Personnaliser mon awalé » (réglage « board », choix * « pittoresque ») : voir inc/game/customize.php et la documentation, section * 66.7. * * LE DEUXIÈME VRAI PLATEAU DU CLUB AWALÉ, EN PHOTO — 01/10/2026. Demandé : « on * va ajouter un plateau, celui-là s'appelle Iroko pittoresque – Club Awalé, * comme l'autre, avec aussi “vous pouvez l'acheter” ». Même recette que le * plateau « iroko » (themes/board/iroko.css), dont cette feuille reprend la * structure règle pour règle ; seules changent l'image, les mesures et la forme * des bols. * * L'IMAGE — assets/img/plateaux/pittoresque.webp, faite par le même outil : * node tools/plateau_iroko.mjs pittoresque * La photo porte les graines dans les bols du HAUT : l'outil les vide avec les * bols vides du bas. Le reste est identique : détourage, couleurs accordées au * site, ombre prise sur la silhouette, marge transparente. * * LES TROUS DU JEU TOMBENT SUR LES BOLS DE LA PHOTO — toutes les mesures sont * des fractions du bol (204 px = un trou), données par l'outil. * * DES BOLS PRESQUE CARRÉS — ceux de ce plateau sont des carrés aux coins très * arrondis, et non des ronds : le trou du jeu prend la même forme, pour que le * survol, l'anneau du tour et le voile de profondeur épousent le bol. * * @package PlayAwale * @version 2.0 * @author Nicolas Lion — Développeur web — https://nlion.fr * @copyright 2026 Nicolas Lion */ .board-style--pittoresque .board-container, .board-container.board-style--pittoresque { /* La géométrie de la photo, en fractions de son bol (tools/plateau_iroko.mjs). */ --board-padding: calc(var(--hole-size) * 0.1275); --hole-gap: calc(var(--hole-size) * 0.0549); --pittoresque-marge: calc(var(--hole-size) * 0.1471); /* La forme des bols de la photo. */ --pittoresque-bol: 32%; /* L'ombre est dans l'image, prise sur la silhouette : aucune autre. */ --board-shadow: none; --board-radius: 0; --board-groove-color: transparent; /* Les bols sont dans la photo : rien à creuser. */ --hole-shadow: none; --hole-hover-color: rgba(255, 240, 205, 0.16); /* Les ombres des graines, chaudes comme le bois qui les reçoit. */ --seed-shadow: inset 0 calc(var(--hole-size) / 120) calc(var(--hole-size) / 60) rgba(255, 255, 255, 0.5), 0 calc(var(--hole-size) / 50) calc(var(--hole-size) / 28) rgba(70, 30, 0, 0.42); --seed-number-color: #fff3d6; } /* Le plateau : pas de fond propre, des plans isolés ; sa boîte a toujours la taille de ses trous, sinon la photo se déforme (voir iroko.css). */ .board-style--pittoresque .board { background: none; isolation: isolate; width: fit-content; height: fit-content; margin-inline: auto; align-self: center; } /* LE CALQUE DE LA PHOTO — derrière les trous, débordant de la marge de l'ombre. */ .board-style--pittoresque .board::after { content: ''; position: absolute; inset: calc(var(--pittoresque-marge) * -1); z-index: -1; background: url('../../../img/plateaux/pittoresque.webp') center / 100% 100% no-repeat; pointer-events: none; } /* La place des deux rangées sur la photo — à la place des décalages du plateau ordinaire (components/board.css). */ .board-style--pittoresque .hole--ai { margin-top: calc(var(--hole-size) * -0.0441); } .board-style--pittoresque .hole--player { margin-top: calc(var(--hole-size) * 0.0578); margin-bottom: calc(var(--hole-size) * -0.0441); } /* Ce que la photo montre déjà : la fente, les charnières. */ .board-style--pittoresque .board::before, .board-style--pittoresque .board-hinge { display: none; } /* Le trou : transparent, la photo dessous, à la forme du bol. */ .board-style--pittoresque .hole { background: none; border-radius: var(--pittoresque-bol); } .board-style--pittoresque .hole.is-target::after, .board-style--pittoresque .hole.is-capture-target::after { border-radius: var(--pittoresque-bol); } /* Les ombres des graines « réelles » (components/seed-layouts.css), chaudes. */ .board-style--pittoresque.seeds-layout--real .hole .seed, .board-style--pittoresque .seeds-layout--real .hole .seed, .seeds-layout--real .board-style--pittoresque .hole .seed { box-shadow: inset calc(var(--seed-size) * -0.1) calc(var(--seed-size) * -0.14) calc(var(--seed-size) * 0.22) rgba(40, 20, 0, 0.36), inset calc(var(--seed-size) * 0.04) calc(var(--seed-size) * 0.05) calc(var(--seed-size) * 0.08) rgba(255, 245, 220, 0.22), calc(var(--seed-size) * 0.05) calc(var(--seed-size) * 0.12) calc(var(--seed-size) * 0.2) rgba(80, 35, 0, 0.42); } /* LA PROFONDEUR — le voile d'ombre du creux, au-dessus des graines : plus sombre sous la lèvre du haut, puis vers le pourtour. Il suit le bol et ne reçoit aucun clic. */ .board-style--pittoresque .hole .seeds::after { content: ''; position: absolute; inset: 0; z-index: 49; border-radius: var(--pittoresque-bol); background: radial-gradient(circle at 50% 60%, transparent 50%, rgba(70, 32, 2, 0.12) 72%, rgba(55, 24, 0, 0.28) 100%); box-shadow: inset 0 calc(var(--hole-size) * 0.1) calc(var(--hole-size) * 0.12) rgba(60, 26, 0, 0.3); pointer-events: none; } /* Les repères du jeu passent au-dessus du voile. */ .board-style--pittoresque .seed-count { z-index: 60; } .board-style--pittoresque .seed-counter { z-index: 61; } .board-style--pittoresque .capture-badge { z-index: 62; } .board-style--pittoresque .hole.is-target::after, .board-style--pittoresque .hole.is-capture-target::after { z-index: 59; } /* À QUI LE TOUR — pas de barre : la rangée qui joue s'éclaire. */ .board-style--pittoresque .turn-bar { display: none; } .board-style--pittoresque .hole { transition: background-color var(--duration-base) ease, box-shadow 450ms ease; } .board-style--pittoresque .board.is-player-turn .hole--player, .board-style--pittoresque .board[data-turn]:not([data-turn='0']):not(.is-player-turn) .hole--ai { --hole-shadow: 0 0 0 calc(var(--hole-size) * 0.02) rgba(255, 238, 200, 0.7), 0 0 calc(var(--hole-size) * 0.12) rgba(255, 226, 160, 0.4); } @media (prefers-reduced-motion: reduce) { .board-style--pittoresque .hole { transition: none; } }