Spaces:
Running
Running
| /** | |
| * theme.js: Board and piece theming module | |
| * | |
| * Owns the chess board's visual styling: square colours, rank/file label | |
| * colours, last-move highlight colour, and the piece-set image path. Colours | |
| * are read from the --board-* tokens in styles/tokens.css. The board uses | |
| * Libre Brown and the piece set uses CBurnett. | |
| * Exposes a small public API consumed by board.js and useExplorer.js. | |
| * | |
| * The CSS-generation function below targets chessground's DOM/class model | |
| * (`cg-board`, `coords.ranks`/`coords.files`) - see the comment above | |
| * _coordLabelCss() for how coordinate-label positioning and colouring are | |
| * derived against that model. | |
| * | |
| * Public API: | |
| * Theme.init(reconstructBoard) - register board reconstruction callback | |
| * Theme.apply() - inject the board's theme <style> tag | |
| * Theme.currentPieceSet() - return the active piece set id string | |
| * Theme.pieceThemeFn() - return piece-code → image-path function | |
| * (used by board.js's spare trays and | |
| * promotion dialog) | |
| */ | |
| function _token(name) { | |
| return getComputedStyle(document.documentElement).getPropertyValue(name).trim(); | |
| } | |
| function _boardColors() { | |
| const light = _token('--board-light'); | |
| const dark = _token('--board-dark'); | |
| return { | |
| id: 'libre-brown', | |
| lightSquare: light, | |
| darkSquare: dark, | |
| labelLight: dark, // label colour on light-square corners | |
| labelDark: light, // label colour on dark-square corners | |
| highlight: _token('--board-highlight'), | |
| }; | |
| } | |
| const PIECE_SET = 'cburnett'; | |
| let _reconstructBoard = null; // callback registered via init() | |
| // ── Private: CSS generation ─────────────────────────────────────────────── | |
| // | |
| // Chessground has no per-square light/dark CSS classes - the checkerboard | |
| // pattern is a single background-image on `cg-board`. It is rendered here | |
| // as a tiny tiled SVG data URI (_checkerboardDataUri). Rank/file labels | |
| // are chessground's own `coords.ranks`/`coords.files` elements, positioned | |
| // by static CSS in chess/board.css to sit inset at the board's corners | |
| // rather than chessground's default outside-the-board placement. Colour is | |
| // done with :nth-child selectors scoped by orientation, not the | |
| // `.coord-light`/`.coord-dark` classes renderCoords() (wrap.ts) puts on | |
| // each label: those classes don't correspond to the actual square each | |
| // label overlays once repositioned this way (chessground's own official | |
| // theme CSS doesn't use them for coords.ranks/coords.files either, for the | |
| // same reason: they're only meaningful for chessground's default | |
| // outside-the-board placement). See the matching comment in | |
| // chess/board.css for the full derivation. | |
| function _checkerboardDataUri(light, dark) { | |
| const svg = `<svg xmlns='http://www.w3.org/2000/svg' width='2' height='2'> | |
| <rect width='1' height='1' fill='${light}'/> | |
| <rect x='1' width='1' height='1' fill='${dark}'/> | |
| <rect y='1' width='1' height='1' fill='${dark}'/> | |
| <rect x='1' y='1' width='1' height='1' fill='${light}'/> | |
| </svg>`; | |
| return `data:image/svg+xml;base64,${btoa(svg)}`; | |
| } | |
| // A light-square label gets c.labelLight, a dark-square label gets | |
| // c.labelDark. class + type + type + :nth-child, matched on all four | |
| // orientation/parity combinations, carries the specificity needed to | |
| // override chess/board.css's own default coord-label rule (see the comment there | |
| // for why .coord-light/.coord-dark aren't used) regardless of source | |
| // order. For white orientation the odd nth-child positions land on the | |
| // a-file's dark squares (a1/a3/a5/a7, per chess/board.css's comment) and so take | |
| // c.labelDark; the even positions (a2/a4/a6/a8, light squares) take | |
| // c.labelLight. No text-shadow: the label colour itself carries enough | |
| // contrast against its own square. | |
| function _coordLabelCss(c) { | |
| return `.orientation-white coords.ranks coord:nth-child(odd), | |
| .orientation-white coords.files coord:nth-child(odd) { color: ${c.labelDark} !important; } | |
| .orientation-white coords.ranks coord:nth-child(even), | |
| .orientation-white coords.files coord:nth-child(even) { color: ${c.labelLight} !important; } | |
| .orientation-black coords.ranks coord:nth-child(odd), | |
| .orientation-black coords.files coord:nth-child(odd) { color: ${c.labelLight} !important; } | |
| .orientation-black coords.ranks coord:nth-child(even), | |
| .orientation-black coords.files coord:nth-child(even) { color: ${c.labelDark} !important; }`; | |
| } | |
| function _cssForBoard(c) { | |
| return `/* chesstb-theme: ${c.id} */ | |
| cg-board { | |
| background-image: url("${_checkerboardDataUri(c.lightSquare, c.darkSquare)}"); | |
| /* _checkerboardDataUri() returns a 2x2 tile (2 squares per axis). | |
| 25% 25% sizes it to 2/8 of the board per axis, so the tile repeats | |
| 4x4 (background-repeat's default) to fill all 64 squares; matches | |
| the base checkerboard sizing in chess/board.css. */ | |
| background-size: 25% 25%; | |
| } | |
| ${_coordLabelCss(c)} | |
| cg-board square.last-move { background-color: ${c.highlight} !important; }`; | |
| } | |
| function _applyCSS() { | |
| let tag = document.getElementById('chesstb-theme'); | |
| if (!tag) { | |
| tag = document.createElement('style'); | |
| tag.id = 'chesstb-theme'; | |
| document.head.appendChild(tag); | |
| } | |
| tag.textContent = `@layer app {\n${_cssForBoard(_boardColors())}\n}`; | |
| } | |
| // ── Public API ──────────────────────────────────────────────────────────── | |
| /** | |
| * Register the board reconstruction callback from board.js. | |
| * Must be called before Board.init(). | |
| */ | |
| function init(reconstructBoard) { | |
| _reconstructBoard = reconstructBoard; | |
| } | |
| /** | |
| * Inject the board's theme <style> tag and populate the piece-set-dependent | |
| * tray/promotion images. | |
| */ | |
| function apply() { | |
| _applyCSS(); | |
| if (_reconstructBoard) _reconstructBoard(); | |
| } | |
| /** Return the active piece set id string. */ | |
| function currentPieceSet() { return PIECE_SET; } | |
| // Built once - pieceThemeFn() below always returns this same function, | |
| // rather than allocating a fresh closure per call. | |
| function _pieceThemePath(piece) { | |
| return `/static/pieces/${PIECE_SET}/${piece}.svg`; | |
| } | |
| /** | |
| * Return the piece-code → image-path function for the active piece set | |
| * (e.g. 'wQ' -> '/static/pieces/cburnett/wQ.svg'). Called by board.js to | |
| * populate the spare-tray and promotion-dialog images. | |
| */ | |
| function pieceThemeFn() { | |
| return _pieceThemePath; | |
| } | |
| export const Theme = { | |
| init, apply, | |
| currentPieceSet, | |
| pieceThemeFn, | |
| }; | |