Add dimensionsCssVarsPostfix to support bughouse separate board zoom (#…

…49)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chessgroundx",
-  "version": "10.5.6",
+  "version": "10.6.0",
   "description": "Extended lichess.org Chess UI",
   "type": "module",
   "module": "chessground.js",

src/config.ts

@@ -16,6 +16,7 @@ export interface Config {
   disableContextMenu?: boolean; // because who needs a context menu on a chessboard
   addPieceZIndex?: boolean; // adds z-index values to pieces (for 3D)
   addDimensionsCssVarsTo?: HTMLElement; // add --cg-width and --cg-height CSS vars containing the board's dimensions to this element
+  dimensionsCssVarsSuffix?: string; // sufix to add to --cg-width and --cg-height CSS var names (for bughouse boards)
   blockTouchScroll?: boolean; // block scrolling via touch dragging on the board, e.g. for coordinate training
   // pieceKey: boolean; // add a data-key attribute to piece elements
   highlight?: {

src/events.ts

@@ -11,7 +11,10 @@ type StateMouchBind = (d: State, e: cg.MouchEvent) => void;
 export function bindBoard(s: State, onResize: () => void): void {
   const boardEl = s.dom.elements.board;
 
-  if ('ResizeObserver' in window) new ResizeObserver(onResize).observe(s.dom.elements.wrap);
+  // In case of zooming boards in bughouse, observing s.dom.elements.wrap
+  // causes recursive onResize calls, so we will just observe the document.body
+  const target = (s.dimensionsCssVarsSuffix) ? document.body : s.dom.elements.wrap;
+  if ('ResizeObserver' in window) new ResizeObserver(onResize).observe(target);
 
   if (s.viewOnly) return;
 

src/render.ts

@@ -202,12 +202,13 @@ export function updateBounds(s: State): void {
   container.style.height = height + 'px';
   s.dom.bounds.clear();
 
-  s.addDimensionsCssVarsTo?.style.setProperty('--cg-width', width + 'px');
-  s.addDimensionsCssVarsTo?.style.setProperty('--cg-height', height + 'px');
-  s.dom.elements.pocketTop?.style.setProperty('--cg-width', width + 'px');
-  s.dom.elements.pocketTop?.style.setProperty('--cg-height', height + 'px');
-  s.dom.elements.pocketBottom?.style.setProperty('--cg-width', width + 'px');
-  s.dom.elements.pocketBottom?.style.setProperty('--cg-height', height + 'px');
+  const suffix = (s.dimensionsCssVarsSuffix) ? '-' + s.dimensionsCssVarsSuffix : '';
+  s.addDimensionsCssVarsTo?.style.setProperty('--cg-width' + suffix, width + 'px');
+  s.addDimensionsCssVarsTo?.style.setProperty('--cg-height' + suffix, height + 'px');
+  s.dom.elements.pocketTop?.style.setProperty('--cg-width' + suffix, width + 'px');
+  s.dom.elements.pocketTop?.style.setProperty('--cg-height' + suffix, height + 'px');
+  s.dom.elements.pocketBottom?.style.setProperty('--cg-width' + suffix, width + 'px');
+  s.dom.elements.pocketBottom?.style.setProperty('--cg-height' + suffix, height + 'px');
 }
 
 const isPieceNode = (el: cg.PieceNode | cg.SquareNode): el is cg.PieceNode => el.tagName === 'PIECE';

src/state.ts

@@ -20,6 +20,7 @@ export interface HeadlessState {
   disableContextMenu: boolean; // because who needs a context menu on a chessboard
   addPieceZIndex: boolean; // adds z-index values to pieces (for 3D)
   addDimensionsCssVarsTo?: HTMLElement; // add --cg-width and --cg-height CSS vars containing the board's dimensions to this element
+  dimensionsCssVarsSuffix?: string; // suffix to add to --cg-width and --cg-height CSS var names (for bughouse boards)
   blockTouchScroll: boolean; // block scrolling via touch dragging on the board, e.g. for coordinate training
   pieceKey: boolean; // add a data-key attribute to piece elements
   highlight: {