next-chessground 0.9.2 → 0.9.3

package/dist/index.es.js

@@ -2231,10 +2231,21 @@ const distanceSq = (pos1, pos2) => {
   return dx * dx + dy * dy;
 };
 const samePiece = (p1, p2) => p1.role === p2.role && p1.color === p2.color;
-const posToTranslate = bounds => (pos, asWhite) => [(asWhite ? pos[0] : 7 - pos[0]) * bounds.width / 8, (asWhite ? 7 - pos[1] : pos[1]) * bounds.height / 8];
-const translate = (el, pos) => {
+
+const posToTranslateBase = (pos, asWhite, xFactor, yFactor) => [(asWhite ? pos[0] : 7 - pos[0]) * xFactor, (asWhite ? 7 - pos[1] : pos[1]) * yFactor];
+
+const posToTranslateAbs = bounds => {
+  const xFactor = bounds.width / 8,
+        yFactor = bounds.height / 8;
+  return (pos, asWhite) => posToTranslateBase(pos, asWhite, xFactor, yFactor);
+};
+const posToTranslateRel = (pos, asWhite) => posToTranslateBase(pos, asWhite, 100, 100);
+const translateAbs = (el, pos) => {
   el.style.transform = `translate(${pos[0]}px,${pos[1]}px)`;
 };
+const translateRel = (el, percents) => {
+  el.style.transform = `translate(${percents[0]}%,${percents[1]}%)`;
+};
 const setVisible = (el, v) => {
   el.style.visibility = v ? 'visible' : 'hidden';
 };
@@ -2702,20 +2713,13 @@ function write(pieces) {
   }).join('')).join('/').replace(/1{2,}/g, s => s.length.toString());
 }
 
-function applyAnimation(state, config) {
-  if (config.animation) {
-    deepMerge(state.animation, config.animation); // no need for such short animations
-
-    if ((state.animation.duration || 0) < 70) state.animation.enabled = false;
-  }
-}
 function configure(state, config) {
   var _a, _b; // don't merge destinations and autoShapes. Just override.
 
 
   if ((_a = config.movable) === null || _a === void 0 ? void 0 : _a.dests) state.movable.dests = undefined;
   if ((_b = config.drawable) === null || _b === void 0 ? void 0 : _b.autoShapes) state.drawable.autoShapes = [];
-  deepMerge(state, config); // if a fen was provided, replace the pieces
+  merge(state, config); // if a fen was provided, replace the pieces
 
   if (config.fen) {
     state.pieces = read(config.fen);
@@ -2729,8 +2733,9 @@ function configure(state, config) {
   // the merge algorithm will incorrectly keep the second square.
   else if (config.lastMove) state.lastMove = config.lastMove; // fix move/premove dests
 
-  if (state.selected) setSelected(state, state.selected);
-  applyAnimation(state, config);
+  if (state.selected) setSelected(state, state.selected); // no need for such short animations
+
+  if (!state.animation.duration || state.animation.duration < 100) state.animation.enabled = false;
 
   if (!state.movable.rookCastle && state.movable.dests) {
     const rank = state.movable.color === 'white' ? '1' : '8',
@@ -2742,9 +2747,9 @@ function configure(state, config) {
   }
 }
 
-function deepMerge(base, extend) {
+function merge(base, extend) {
   for (const key in extend) {
-    if (isObject(base[key]) && isObject(extend[key])) deepMerge(base[key], extend[key]);else base[key] = extend[key];
+    if (isObject(base[key]) && isObject(extend[key])) merge(base[key], extend[key]);else base[key] = extend[key];
   }
 }
 
@@ -2976,9 +2981,11 @@ function start$1(s, e) {
   const piece = s.pieces.get(orig);
   const previouslySelected = s.selected;
   if (!previouslySelected && s.drawable.enabled && (s.drawable.eraseOnClick || !piece || piece.color !== s.turnColor)) clear(s); // Prevent touch scroll and create no corresponding mouse event, if there
-  // is an intent to interact with the board.
+  // is an intent to interact with the board. If no color is movable
+  // (and the board is not for viewing only), touches are likely intended to
+  // select squares.
 
-  if (e.cancelable !== false && (!e.touches || s.blockTouchScroll || piece || previouslySelected || pieceCloseTo(s, position))) e.preventDefault();
+  if (e.cancelable !== false && (!e.touches || !s.movable.color || piece || previouslySelected || pieceCloseTo(s, position))) e.preventDefault();
   const hadPremove = !!s.premovable.current;
   const hadPredrop = !!s.predroppable.current;
   s.stats.ctrlKey = e.ctrlKey;
@@ -3001,8 +3008,7 @@ function start$1(s, e) {
       started: s.draggable.autoDistance && s.stats.dragged,
       element,
       previouslySelected,
-      originTarget: e.target,
-      keyHasChanged: false
+      originTarget: e.target
     };
     element.cgDragging = true;
     element.classList.add('dragging'); // place ghost
@@ -3011,7 +3017,7 @@ function start$1(s, e) {
 
     if (ghost) {
       ghost.className = `ghost ${piece.color} ${piece.role}`;
-      translate(ghost, posToTranslate(bounds)(key2pos(orig), whitePov(s)));
+      translateAbs(ghost, posToTranslateAbs(bounds)(key2pos(orig), whitePov(s)));
       setVisible(ghost, true);
     }
 
@@ -3029,7 +3035,7 @@ function pieceCloseTo(s, pos) {
         bounds = s.dom.bounds(),
         radiusSq = Math.pow(bounds.width / 8, 2);
 
-  for (const key of s.pieces.keys()) {
+  for (const key in s.pieces) {
     const center = computeSquareCenter(key, asWhite, bounds);
     if (distanceSq(center, pos) <= radiusSq) return true;
   }
@@ -3051,8 +3057,7 @@ function dragNewPiece(s, piece, e, force) {
     element: () => pieceElementByKey(s, key),
     originTarget: e.target,
     newPiece: true,
-    force: !!force,
-    keyHasChanged: false
+    force: !!force
   };
   processDrag(s);
 }
@@ -3081,8 +3086,7 @@ function processDrag(s) {
         }
 
         const bounds = s.dom.bounds();
-        translate(cur.element, [cur.pos[0] - bounds.left - bounds.width / 16, cur.pos[1] - bounds.top - bounds.height / 16]);
-        cur.keyHasChanged || (cur.keyHasChanged = cur.orig !== getKeyAtDomPos(cur.pos, whitePov(s), bounds));
+        translateAbs(cur.element, [cur.pos[0] - bounds.left - bounds.width / 16, cur.pos[1] - bounds.top - bounds.height / 16]);
       }
     }
     processDrag(s);
@@ -3125,7 +3129,7 @@ function end$1(s, e) {
     callUserFunction(s.events.change);
   }
 
-  if ((cur.orig === cur.previouslySelected || cur.keyHasChanged) && (cur.orig === dest || !dest)) unselect(s);else if (!s.selectable.enabled) unselect(s);
+  if (cur.orig === cur.previouslySelected && (cur.orig === dest || !dest)) unselect(s);else if (!s.selectable.enabled) unselect(s);
   removeDragElements(s);
   s.draggable.current = undefined;
   s.dom.redraw();
@@ -3186,7 +3190,6 @@ function start$2(state, redrawAll) {
   return {
     set(config) {
       if (config.orientation && config.orientation !== state.orientation) toggleOrientation$1();
-      applyAnimation(state, config);
       (config.fen ? anim : render)(state => configure(state, config), state);
     },
 
@@ -3295,9 +3298,8 @@ function defaults() {
     autoCastle: true,
     viewOnly: false,
     disableContextMenu: false,
+    resizable: true,
     addPieceZIndex: false,
-    addDimensionsCssVars: false,
-    blockTouchScroll: false,
     pieceKey: false,
     highlight: {
       lastMove: true,
@@ -3572,15 +3574,22 @@ function renderShape(state, {
 }
 
 function renderCustomSvg(customSvg, pos, bounds) {
-  const [x, y] = pos2user(pos, bounds); // Translate to top-left of `orig` square
+  const {
+    width,
+    height
+  } = bounds;
+  const w = width / 8;
+  const h = height / 8;
+  const x = pos[0] * w;
+  const y = (7 - pos[1]) * h; // Translate to top-left of `orig` square
 
   const g = setAttributes(createElement('g'), {
     transform: `translate(${x},${y})`
   }); // Give 100x100 coordinate system to the user for `orig` square
 
   const svg = setAttributes(createElement('svg'), {
-    width: 1,
-    height: 1,
+    width: w,
+    height: h,
     viewBox: '0 0 100 100'
   });
   g.appendChild(svg);
@@ -3589,9 +3598,9 @@ function renderCustomSvg(customSvg, pos, bounds) {
 }
 
 function renderCircle(brush, pos, current, bounds) {
-  const o = pos2user(pos, bounds),
-        widths = circleWidth(),
-        radius = (bounds.width + bounds.height) / (4 * Math.max(bounds.width, bounds.height));
+  const o = pos2px(pos, bounds),
+        widths = circleWidth(bounds),
+        radius = (bounds.width + bounds.height) / 32;
   return setAttributes(createElement('circle'), {
     stroke: brush.color,
     'stroke-width': widths[current ? 0 : 1],
@@ -3604,9 +3613,9 @@ function renderCircle(brush, pos, current, bounds) {
 }
 
 function renderArrow(brush, orig, dest, current, shorten, bounds) {
-  const m = arrowMargin(shorten && !current),
-        a = pos2user(orig, bounds),
-        b = pos2user(dest, bounds),
+  const m = arrowMargin(bounds, shorten && !current),
+        a = pos2px(orig, bounds),
+        b = pos2px(dest, bounds),
         dx = b[0] - a[0],
         dy = b[1] - a[1],
         angle = Math.atan2(dy, dx),
@@ -3614,7 +3623,7 @@ function renderArrow(brush, orig, dest, current, shorten, bounds) {
         yo = Math.sin(angle) * m;
   return setAttributes(createElement('line'), {
     stroke: brush.color,
-    'stroke-width': lineWidth(brush, current),
+    'stroke-width': lineWidth(brush, current, bounds),
     'stroke-linecap': 'round',
     'marker-end': 'url(#arrowhead-' + brush.key + ')',
     opacity: opacity(brush, current),
@@ -3626,17 +3635,16 @@ function renderArrow(brush, orig, dest, current, shorten, bounds) {
 }
 
 function renderPiece(baseUrl, pos, piece, bounds) {
-  const o = pos2user(pos, bounds),
+  const o = pos2px(pos, bounds),
+        size = bounds.width / 8 * (piece.scale || 1),
         name = piece.color[0] + (piece.role === 'knight' ? 'n' : piece.role[0]).toUpperCase();
   return setAttributes(createElement('image'), {
     className: `${piece.role} ${piece.color}`,
-    x: o[0] - 0.5,
-    y: o[1] - 0.5,
-    width: 1,
-    height: 1,
-    href: baseUrl + name + '.svg',
-    transform: `scale(${piece.scale || 1})`,
-    'transform-origin': `${o[0]} ${o[1]}`
+    x: o[0] - size / 2,
+    y: o[1] - size / 2,
+    width: size,
+    height: size,
+    href: baseUrl + name + '.svg'
   });
 }
 
@@ -3676,40 +3684,40 @@ function makeCustomBrush(base, modifiers) {
   };
 }
 
-function circleWidth() {
-  return [3 / 64, 4 / 64];
+function circleWidth(bounds) {
+  const base = bounds.width / 512;
+  return [3 * base, 4 * base];
 }
 
-function lineWidth(brush, current) {
-  return (brush.lineWidth || 10) * (current ? 0.85 : 1) / 64;
+function lineWidth(brush, current, bounds) {
+  return (brush.lineWidth || 10) * (current ? 0.85 : 1) / 512 * bounds.width;
 }
 
 function opacity(brush, current) {
   return (brush.opacity || 1) * (current ? 0.9 : 1);
 }
 
-function arrowMargin(shorten) {
-  return (shorten ? 20 : 10) / 64;
+function arrowMargin(bounds, shorten) {
+  return (shorten ? 20 : 10) / 512 * bounds.width;
 }
 
-function pos2user(pos, bounds) {
-  const xScale = Math.min(1, bounds.width / bounds.height);
-  const yScale = Math.min(1, bounds.height / bounds.width);
-  return [(pos[0] - 3.5) * xScale, (3.5 - pos[1]) * yScale];
+function pos2px(pos, bounds) {
+  return [(pos[0] + 0.5) * bounds.width / 8, (7.5 - pos[1]) * bounds.height / 8];
 }
 
-function renderWrap(element, s) {
+function renderWrap(element, s, relative) {
   // .cg-wrap (element passed to Chessground)
-  //   cg-container
-  //     cg-board
-  //     svg.cg-shapes
-  //       defs
-  //       g
-  //     svg.cg-custom-svgs
-  //       g
-  //     coords.ranks
-  //     coords.files
-  //     piece.ghost
+  //   cg-helper (12.5%, display: table)
+  //     cg-container (800%)
+  //       cg-board
+  //       svg.cg-shapes
+  //         defs
+  //         g
+  //       svg.cg-custom-svgs
+  //         g
+  //       coords.ranks
+  //       coords.files
+  //       piece.ghost
   element.innerHTML = ''; // ensure the cg-wrap class is set
   // so bounds calculation can use the CSS width/height values
   // add that class yourself to the element before calling chessground
@@ -3720,25 +3728,23 @@ function renderWrap(element, s) {
   for (const c of colors) element.classList.toggle('orientation-' + c, s.orientation === c);
 
   element.classList.toggle('manipulable', !s.viewOnly);
+  const helper = createEl('cg-helper');
+  element.appendChild(helper);
   const container = createEl('cg-container');
-  element.appendChild(container);
+  helper.appendChild(container);
   const board = createEl('cg-board');
   container.appendChild(board);
   let svg;
   let customSvg;
 
-  if (s.drawable.visible) {
+  if (s.drawable.visible && !relative) {
     svg = setAttributes(createElement('svg'), {
-      class: 'cg-shapes',
-      viewBox: '-4 -4 8 8',
-      preserveAspectRatio: 'xMidYMid slice'
+      class: 'cg-shapes'
     });
     svg.appendChild(createElement('defs'));
     svg.appendChild(createElement('g'));
     customSvg = setAttributes(createElement('svg'), {
-      class: 'cg-custom-svgs',
-      viewBox: '-3.5 -3.5 8 8',
-      preserveAspectRatio: 'xMidYMid slice'
+      class: 'cg-custom-svgs'
     });
     customSvg.appendChild(createElement('g'));
     container.appendChild(svg);
@@ -3753,7 +3759,7 @@ function renderWrap(element, s) {
 
   let ghost;
 
-  if (s.draggable.showGhost) {
+  if (s.draggable.showGhost && !relative) {
     ghost = createEl('piece', 'ghost');
     setVisible(ghost, false);
     container.appendChild(ghost);
@@ -3762,7 +3768,6 @@ function renderWrap(element, s) {
   return {
     board,
     container,
-    wrap: element,
     ghost,
     svg,
     customSvg
@@ -3798,9 +3803,14 @@ function drop(s, e) {
   s.dom.redraw();
 }
 
-function bindBoard(s, onResize) {
+function bindBoard(s, boundsUpdated) {
   const boardEl = s.dom.elements.board;
-  if ('ResizeObserver' in window) new ResizeObserver(onResize).observe(s.dom.elements.wrap);
+
+  if (!s.dom.relative && s.resizable && 'ResizeObserver' in window) {
+    const observer = new window['ResizeObserver'](boundsUpdated);
+    observer.observe(boardEl);
+  }
+
   if (s.viewOnly) return; // Cannot be passive, because we prevent touch scrolling and dragging of
   // selected elements.
 
@@ -3817,11 +3827,13 @@ function bindBoard(s, onResize) {
   }
 } // returns the unbind function
 
-function bindDocument(s, onResize) {
+function bindDocument(s, boundsUpdated) {
   const unbinds = []; // Old versions of Edge and Safari do not support ResizeObserver. Send
   // chessground.resize if a user action has changed the bounds of the board.
 
-  if (!('ResizeObserver' in window)) unbinds.push(unbindable(document.body, 'chessground.resize', onResize));
+  if (!s.dom.relative && s.resizable && !('ResizeObserver' in window)) {
+    unbinds.push(unbindable(document.body, 'chessground.resize', boundsUpdated));
+  }
 
   if (!s.viewOnly) {
     const onmove = dragOrDraw(s, move$1, move);
@@ -3872,7 +3884,8 @@ function dragOrDraw(s, withDrag, withDraw) {
 
 function render$1(s) {
   const asWhite = whitePov(s),
-        posToTranslate$1 = posToTranslate(s.dom.bounds()),
+        posToTranslate = s.dom.relative ? posToTranslateRel : posToTranslateAbs(s.dom.bounds()),
+        translate = s.dom.relative ? translateRel : translateAbs,
         boardEl = s.dom.elements.board,
         pieces = s.pieces,
         curAnim = s.animation.current,
@@ -3900,7 +3913,7 @@ function render$1(s) {
 
       if (el.cgDragging && (!curDrag || curDrag.orig !== k)) {
         el.classList.remove('dragging');
-        translate(el, posToTranslate$1(key2pos(k), asWhite));
+        translate(el, posToTranslate(key2pos(k), asWhite));
         el.cgDragging = false;
       } // remove fading class if it still remains
 
@@ -3919,11 +3932,11 @@ function render$1(s) {
           pos[0] += anim[2];
           pos[1] += anim[3];
           el.classList.add('anim');
-          translate(el, posToTranslate$1(pos, asWhite));
+          translate(el, posToTranslate(pos, asWhite));
         } else if (el.cgAnimating) {
           el.cgAnimating = false;
           el.classList.remove('anim');
-          translate(el, posToTranslate$1(key2pos(k), asWhite));
+          translate(el, posToTranslate(key2pos(k), asWhite));
           if (s.addPieceZIndex) el.style.zIndex = posZIndex(key2pos(k), asWhite);
         } // same piece: flag as same
 
@@ -3957,7 +3970,7 @@ function render$1(s) {
     if (!sameSquares.has(sk)) {
       sMvdset = movedSquares.get(className);
       sMvd = sMvdset && sMvdset.pop();
-      const translation = posToTranslate$1(key2pos(sk), asWhite);
+      const translation = posToTranslate(key2pos(sk), asWhite);
 
       if (sMvd) {
         sMvd.cgKey = sk;
@@ -3999,7 +4012,7 @@ function render$1(s) {
           pos[1] += anim[3];
         }
 
-        translate(pMvd, posToTranslate$1(pos, asWhite));
+        translate(pMvd, posToTranslate(pos, asWhite));
       } // no piece in moved obj: insert the new piece
       // assumes the new piece is not being dragged
       else {
@@ -4015,7 +4028,7 @@ function render$1(s) {
             pos[1] += anim[3];
           }
 
-          translate(pieceNode, posToTranslate$1(pos, asWhite));
+          translate(pieceNode, posToTranslate(pos, asWhite));
           if (s.addPieceZIndex) pieceNode.style.zIndex = posZIndex(pos, asWhite);
           boardEl.appendChild(pieceNode);
         }
@@ -4027,34 +4040,20 @@ function render$1(s) {
 
   for (const nodes of movedSquares.values()) removeNodes(s, nodes);
 }
-function renderResized(s) {
+function updateBounds(s) {
+  if (s.dom.relative) return;
   const asWhite = whitePov(s),
-        posToTranslate$1 = posToTranslate(s.dom.bounds());
+        posToTranslate = posToTranslateAbs(s.dom.bounds());
   let el = s.dom.elements.board.firstChild;
 
   while (el) {
     if (isPieceNode(el) && !el.cgAnimating || isSquareNode(el)) {
-      translate(el, posToTranslate$1(key2pos(el.cgKey), asWhite));
+      translateAbs(el, posToTranslate(key2pos(el.cgKey), asWhite));
     }
 
     el = el.nextSibling;
   }
 }
-function updateBounds(s) {
-  const bounds = s.dom.elements.wrap.getBoundingClientRect();
-  const container = s.dom.elements.container;
-  const ratio = bounds.height / bounds.width;
-  const width = Math.floor(bounds.width * window.devicePixelRatio / 8) * 8 / window.devicePixelRatio;
-  const height = width * ratio;
-  container.style.width = width + 'px';
-  container.style.height = height + 'px';
-  s.dom.bounds.clear();
-
-  if (s.addDimensionsCssVars) {
-    document.documentElement.style.setProperty('--cg-width', width + 'px');
-    document.documentElement.style.setProperty('--cg-height', height + 'px');
-  }
-}
 
 function isPieceNode(el) {
   return el.tagName === 'PIECE';
@@ -4069,8 +4068,8 @@ function removeNodes(s, nodes) {
 }
 
 function posZIndex(pos, asWhite) {
-  let z = 3 + pos[1] * 8 + (7 - pos[0]);
-  if (asWhite) z = 69 - z;
+  let z = 2 + pos[1] * 8 + (7 - pos[0]);
+  if (asWhite) z = 67 - z;
   return z + '';
 }
 
@@ -4127,15 +4126,17 @@ function Chessground(element, config) {
     const prevUnbind = 'dom' in maybeState ? maybeState.dom.unbind : undefined; // compute bounds from existing board element if possible
     // this allows non-square boards from CSS to be handled (for 3D)
 
-    const elements = renderWrap(element, maybeState),
+    const relative = maybeState.viewOnly && !maybeState.drawable.visible,
+          elements = renderWrap(element, maybeState, relative),
           bounds = memo(() => elements.board.getBoundingClientRect()),
           redrawNow = skipSvg => {
       render$1(state);
       if (!skipSvg && elements.svg) renderSvg(state, elements.svg, elements.customSvg);
     },
-          onResize = () => {
+          boundsUpdated = () => {
+      bounds.clear();
       updateBounds(state);
-      renderResized(state);
+      if (elements.svg) renderSvg(state, elements.svg, elements.customSvg);
     };
 
     const state = maybeState;
@@ -4144,13 +4145,13 @@ function Chessground(element, config) {
       bounds,
       redraw: debounceRedraw(redrawNow),
       redrawNow,
-      unbind: prevUnbind
+      unbind: prevUnbind,
+      relative
     };
     state.drawable.prevSvgHash = '';
-    updateBounds(state);
     redrawNow(false);
-    bindBoard(state, onResize);
-    if (!prevUnbind) state.dom.unbind = bindDocument(state, onResize);
+    bindBoard(state, boundsUpdated);
+    if (!prevUnbind) state.dom.unbind = bindDocument(state, boundsUpdated);
     state.events.insert && state.events.insert(elements);
     return state;
   }

package/dist/index.js

@@ -2240,10 +2240,21 @@ const distanceSq = (pos1, pos2) => {
   return dx * dx + dy * dy;
 };
 const samePiece = (p1, p2) => p1.role === p2.role && p1.color === p2.color;
-const posToTranslate = bounds => (pos, asWhite) => [(asWhite ? pos[0] : 7 - pos[0]) * bounds.width / 8, (asWhite ? 7 - pos[1] : pos[1]) * bounds.height / 8];
-const translate = (el, pos) => {
+
+const posToTranslateBase = (pos, asWhite, xFactor, yFactor) => [(asWhite ? pos[0] : 7 - pos[0]) * xFactor, (asWhite ? 7 - pos[1] : pos[1]) * yFactor];
+
+const posToTranslateAbs = bounds => {
+  const xFactor = bounds.width / 8,
+        yFactor = bounds.height / 8;
+  return (pos, asWhite) => posToTranslateBase(pos, asWhite, xFactor, yFactor);
+};
+const posToTranslateRel = (pos, asWhite) => posToTranslateBase(pos, asWhite, 100, 100);
+const translateAbs = (el, pos) => {
   el.style.transform = `translate(${pos[0]}px,${pos[1]}px)`;
 };
+const translateRel = (el, percents) => {
+  el.style.transform = `translate(${percents[0]}%,${percents[1]}%)`;
+};
 const setVisible = (el, v) => {
   el.style.visibility = v ? 'visible' : 'hidden';
 };
@@ -2711,20 +2722,13 @@ function write(pieces) {
   }).join('')).join('/').replace(/1{2,}/g, s => s.length.toString());
 }
 
-function applyAnimation(state, config) {
-  if (config.animation) {
-    deepMerge(state.animation, config.animation); // no need for such short animations
-
-    if ((state.animation.duration || 0) < 70) state.animation.enabled = false;
-  }
-}
 function configure(state, config) {
   var _a, _b; // don't merge destinations and autoShapes. Just override.
 
 
   if ((_a = config.movable) === null || _a === void 0 ? void 0 : _a.dests) state.movable.dests = undefined;
   if ((_b = config.drawable) === null || _b === void 0 ? void 0 : _b.autoShapes) state.drawable.autoShapes = [];
-  deepMerge(state, config); // if a fen was provided, replace the pieces
+  merge(state, config); // if a fen was provided, replace the pieces
 
   if (config.fen) {
     state.pieces = read(config.fen);
@@ -2738,8 +2742,9 @@ function configure(state, config) {
   // the merge algorithm will incorrectly keep the second square.
   else if (config.lastMove) state.lastMove = config.lastMove; // fix move/premove dests
 
-  if (state.selected) setSelected(state, state.selected);
-  applyAnimation(state, config);
+  if (state.selected) setSelected(state, state.selected); // no need for such short animations
+
+  if (!state.animation.duration || state.animation.duration < 100) state.animation.enabled = false;
 
   if (!state.movable.rookCastle && state.movable.dests) {
     const rank = state.movable.color === 'white' ? '1' : '8',
@@ -2751,9 +2756,9 @@ function configure(state, config) {
   }
 }
 
-function deepMerge(base, extend) {
+function merge(base, extend) {
   for (const key in extend) {
-    if (isObject(base[key]) && isObject(extend[key])) deepMerge(base[key], extend[key]);else base[key] = extend[key];
+    if (isObject(base[key]) && isObject(extend[key])) merge(base[key], extend[key]);else base[key] = extend[key];
   }
 }
 
@@ -2985,9 +2990,11 @@ function start$1(s, e) {
   const piece = s.pieces.get(orig);
   const previouslySelected = s.selected;
   if (!previouslySelected && s.drawable.enabled && (s.drawable.eraseOnClick || !piece || piece.color !== s.turnColor)) clear(s); // Prevent touch scroll and create no corresponding mouse event, if there
-  // is an intent to interact with the board.
+  // is an intent to interact with the board. If no color is movable
+  // (and the board is not for viewing only), touches are likely intended to
+  // select squares.
 
-  if (e.cancelable !== false && (!e.touches || s.blockTouchScroll || piece || previouslySelected || pieceCloseTo(s, position))) e.preventDefault();
+  if (e.cancelable !== false && (!e.touches || !s.movable.color || piece || previouslySelected || pieceCloseTo(s, position))) e.preventDefault();
   const hadPremove = !!s.premovable.current;
   const hadPredrop = !!s.predroppable.current;
   s.stats.ctrlKey = e.ctrlKey;
@@ -3010,8 +3017,7 @@ function start$1(s, e) {
       started: s.draggable.autoDistance && s.stats.dragged,
       element,
       previouslySelected,
-      originTarget: e.target,
-      keyHasChanged: false
+      originTarget: e.target
     };
     element.cgDragging = true;
     element.classList.add('dragging'); // place ghost
@@ -3020,7 +3026,7 @@ function start$1(s, e) {
 
     if (ghost) {
       ghost.className = `ghost ${piece.color} ${piece.role}`;
-      translate(ghost, posToTranslate(bounds)(key2pos(orig), whitePov(s)));
+      translateAbs(ghost, posToTranslateAbs(bounds)(key2pos(orig), whitePov(s)));
       setVisible(ghost, true);
     }
 
@@ -3038,7 +3044,7 @@ function pieceCloseTo(s, pos) {
         bounds = s.dom.bounds(),
         radiusSq = Math.pow(bounds.width / 8, 2);
 
-  for (const key of s.pieces.keys()) {
+  for (const key in s.pieces) {
     const center = computeSquareCenter(key, asWhite, bounds);
     if (distanceSq(center, pos) <= radiusSq) return true;
   }
@@ -3060,8 +3066,7 @@ function dragNewPiece(s, piece, e, force) {
     element: () => pieceElementByKey(s, key),
     originTarget: e.target,
     newPiece: true,
-    force: !!force,
-    keyHasChanged: false
+    force: !!force
   };
   processDrag(s);
 }
@@ -3090,8 +3095,7 @@ function processDrag(s) {
         }
 
         const bounds = s.dom.bounds();
-        translate(cur.element, [cur.pos[0] - bounds.left - bounds.width / 16, cur.pos[1] - bounds.top - bounds.height / 16]);
-        cur.keyHasChanged || (cur.keyHasChanged = cur.orig !== getKeyAtDomPos(cur.pos, whitePov(s), bounds));
+        translateAbs(cur.element, [cur.pos[0] - bounds.left - bounds.width / 16, cur.pos[1] - bounds.top - bounds.height / 16]);
       }
     }
     processDrag(s);
@@ -3134,7 +3138,7 @@ function end$1(s, e) {
     callUserFunction(s.events.change);
   }
 
-  if ((cur.orig === cur.previouslySelected || cur.keyHasChanged) && (cur.orig === dest || !dest)) unselect(s);else if (!s.selectable.enabled) unselect(s);
+  if (cur.orig === cur.previouslySelected && (cur.orig === dest || !dest)) unselect(s);else if (!s.selectable.enabled) unselect(s);
   removeDragElements(s);
   s.draggable.current = undefined;
   s.dom.redraw();
@@ -3195,7 +3199,6 @@ function start$2(state, redrawAll) {
   return {
     set(config) {
       if (config.orientation && config.orientation !== state.orientation) toggleOrientation$1();
-      applyAnimation(state, config);
       (config.fen ? anim : render)(state => configure(state, config), state);
     },
 
@@ -3304,9 +3307,8 @@ function defaults() {
     autoCastle: true,
     viewOnly: false,
     disableContextMenu: false,
+    resizable: true,
     addPieceZIndex: false,
-    addDimensionsCssVars: false,
-    blockTouchScroll: false,
     pieceKey: false,
     highlight: {
       lastMove: true,
@@ -3581,15 +3583,22 @@ function renderShape(state, {
 }
 
 function renderCustomSvg(customSvg, pos, bounds) {
-  const [x, y] = pos2user(pos, bounds); // Translate to top-left of `orig` square
+  const {
+    width,
+    height
+  } = bounds;
+  const w = width / 8;
+  const h = height / 8;
+  const x = pos[0] * w;
+  const y = (7 - pos[1]) * h; // Translate to top-left of `orig` square
 
   const g = setAttributes(createElement('g'), {
     transform: `translate(${x},${y})`
   }); // Give 100x100 coordinate system to the user for `orig` square
 
   const svg = setAttributes(createElement('svg'), {
-    width: 1,
-    height: 1,
+    width: w,
+    height: h,
     viewBox: '0 0 100 100'
   });
   g.appendChild(svg);
@@ -3598,9 +3607,9 @@ function renderCustomSvg(customSvg, pos, bounds) {
 }
 
 function renderCircle(brush, pos, current, bounds) {
-  const o = pos2user(pos, bounds),
-        widths = circleWidth(),
-        radius = (bounds.width + bounds.height) / (4 * Math.max(bounds.width, bounds.height));
+  const o = pos2px(pos, bounds),
+        widths = circleWidth(bounds),
+        radius = (bounds.width + bounds.height) / 32;
   return setAttributes(createElement('circle'), {
     stroke: brush.color,
     'stroke-width': widths[current ? 0 : 1],
@@ -3613,9 +3622,9 @@ function renderCircle(brush, pos, current, bounds) {
 }
 
 function renderArrow(brush, orig, dest, current, shorten, bounds) {
-  const m = arrowMargin(shorten && !current),
-        a = pos2user(orig, bounds),
-        b = pos2user(dest, bounds),
+  const m = arrowMargin(bounds, shorten && !current),
+        a = pos2px(orig, bounds),
+        b = pos2px(dest, bounds),
         dx = b[0] - a[0],
         dy = b[1] - a[1],
         angle = Math.atan2(dy, dx),
@@ -3623,7 +3632,7 @@ function renderArrow(brush, orig, dest, current, shorten, bounds) {
         yo = Math.sin(angle) * m;
   return setAttributes(createElement('line'), {
     stroke: brush.color,
-    'stroke-width': lineWidth(brush, current),
+    'stroke-width': lineWidth(brush, current, bounds),
     'stroke-linecap': 'round',
     'marker-end': 'url(#arrowhead-' + brush.key + ')',
     opacity: opacity(brush, current),
@@ -3635,17 +3644,16 @@ function renderArrow(brush, orig, dest, current, shorten, bounds) {
 }
 
 function renderPiece(baseUrl, pos, piece, bounds) {
-  const o = pos2user(pos, bounds),
+  const o = pos2px(pos, bounds),
+        size = bounds.width / 8 * (piece.scale || 1),
         name = piece.color[0] + (piece.role === 'knight' ? 'n' : piece.role[0]).toUpperCase();
   return setAttributes(createElement('image'), {
     className: `${piece.role} ${piece.color}`,
-    x: o[0] - 0.5,
-    y: o[1] - 0.5,
-    width: 1,
-    height: 1,
-    href: baseUrl + name + '.svg',
-    transform: `scale(${piece.scale || 1})`,
-    'transform-origin': `${o[0]} ${o[1]}`
+    x: o[0] - size / 2,
+    y: o[1] - size / 2,
+    width: size,
+    height: size,
+    href: baseUrl + name + '.svg'
   });
 }
 
@@ -3685,40 +3693,40 @@ function makeCustomBrush(base, modifiers) {
   };
 }
 
-function circleWidth() {
-  return [3 / 64, 4 / 64];
+function circleWidth(bounds) {
+  const base = bounds.width / 512;
+  return [3 * base, 4 * base];
 }
 
-function lineWidth(brush, current) {
-  return (brush.lineWidth || 10) * (current ? 0.85 : 1) / 64;
+function lineWidth(brush, current, bounds) {
+  return (brush.lineWidth || 10) * (current ? 0.85 : 1) / 512 * bounds.width;
 }
 
 function opacity(brush, current) {
   return (brush.opacity || 1) * (current ? 0.9 : 1);
 }
 
-function arrowMargin(shorten) {
-  return (shorten ? 20 : 10) / 64;
+function arrowMargin(bounds, shorten) {
+  return (shorten ? 20 : 10) / 512 * bounds.width;
 }
 
-function pos2user(pos, bounds) {
-  const xScale = Math.min(1, bounds.width / bounds.height);
-  const yScale = Math.min(1, bounds.height / bounds.width);
-  return [(pos[0] - 3.5) * xScale, (3.5 - pos[1]) * yScale];
+function pos2px(pos, bounds) {
+  return [(pos[0] + 0.5) * bounds.width / 8, (7.5 - pos[1]) * bounds.height / 8];
 }
 
-function renderWrap(element, s) {
+function renderWrap(element, s, relative) {
   // .cg-wrap (element passed to Chessground)
-  //   cg-container
-  //     cg-board
-  //     svg.cg-shapes
-  //       defs
-  //       g
-  //     svg.cg-custom-svgs
-  //       g
-  //     coords.ranks
-  //     coords.files
-  //     piece.ghost
+  //   cg-helper (12.5%, display: table)
+  //     cg-container (800%)
+  //       cg-board
+  //       svg.cg-shapes
+  //         defs
+  //         g
+  //       svg.cg-custom-svgs
+  //         g
+  //       coords.ranks
+  //       coords.files
+  //       piece.ghost
   element.innerHTML = ''; // ensure the cg-wrap class is set
   // so bounds calculation can use the CSS width/height values
   // add that class yourself to the element before calling chessground
@@ -3729,25 +3737,23 @@ function renderWrap(element, s) {
   for (const c of colors) element.classList.toggle('orientation-' + c, s.orientation === c);
 
   element.classList.toggle('manipulable', !s.viewOnly);
+  const helper = createEl('cg-helper');
+  element.appendChild(helper);
   const container = createEl('cg-container');
-  element.appendChild(container);
+  helper.appendChild(container);
   const board = createEl('cg-board');
   container.appendChild(board);
   let svg;
   let customSvg;
 
-  if (s.drawable.visible) {
+  if (s.drawable.visible && !relative) {
     svg = setAttributes(createElement('svg'), {
-      class: 'cg-shapes',
-      viewBox: '-4 -4 8 8',
-      preserveAspectRatio: 'xMidYMid slice'
+      class: 'cg-shapes'
     });
     svg.appendChild(createElement('defs'));
     svg.appendChild(createElement('g'));
     customSvg = setAttributes(createElement('svg'), {
-      class: 'cg-custom-svgs',
-      viewBox: '-3.5 -3.5 8 8',
-      preserveAspectRatio: 'xMidYMid slice'
+      class: 'cg-custom-svgs'
     });
     customSvg.appendChild(createElement('g'));
     container.appendChild(svg);
@@ -3762,7 +3768,7 @@ function renderWrap(element, s) {
 
   let ghost;
 
-  if (s.draggable.showGhost) {
+  if (s.draggable.showGhost && !relative) {
     ghost = createEl('piece', 'ghost');
     setVisible(ghost, false);
     container.appendChild(ghost);
@@ -3771,7 +3777,6 @@ function renderWrap(element, s) {
   return {
     board,
     container,
-    wrap: element,
     ghost,
     svg,
     customSvg
@@ -3807,9 +3812,14 @@ function drop(s, e) {
   s.dom.redraw();
 }
 
-function bindBoard(s, onResize) {
+function bindBoard(s, boundsUpdated) {
   const boardEl = s.dom.elements.board;
-  if ('ResizeObserver' in window) new ResizeObserver(onResize).observe(s.dom.elements.wrap);
+
+  if (!s.dom.relative && s.resizable && 'ResizeObserver' in window) {
+    const observer = new window['ResizeObserver'](boundsUpdated);
+    observer.observe(boardEl);
+  }
+
   if (s.viewOnly) return; // Cannot be passive, because we prevent touch scrolling and dragging of
   // selected elements.
 
@@ -3826,11 +3836,13 @@ function bindBoard(s, onResize) {
   }
 } // returns the unbind function
 
-function bindDocument(s, onResize) {
+function bindDocument(s, boundsUpdated) {
   const unbinds = []; // Old versions of Edge and Safari do not support ResizeObserver. Send
   // chessground.resize if a user action has changed the bounds of the board.
 
-  if (!('ResizeObserver' in window)) unbinds.push(unbindable(document.body, 'chessground.resize', onResize));
+  if (!s.dom.relative && s.resizable && !('ResizeObserver' in window)) {
+    unbinds.push(unbindable(document.body, 'chessground.resize', boundsUpdated));
+  }
 
   if (!s.viewOnly) {
     const onmove = dragOrDraw(s, move$1, move);
@@ -3881,7 +3893,8 @@ function dragOrDraw(s, withDrag, withDraw) {
 
 function render$1(s) {
   const asWhite = whitePov(s),
-        posToTranslate$1 = posToTranslate(s.dom.bounds()),
+        posToTranslate = s.dom.relative ? posToTranslateRel : posToTranslateAbs(s.dom.bounds()),
+        translate = s.dom.relative ? translateRel : translateAbs,
         boardEl = s.dom.elements.board,
         pieces = s.pieces,
         curAnim = s.animation.current,
@@ -3909,7 +3922,7 @@ function render$1(s) {
 
       if (el.cgDragging && (!curDrag || curDrag.orig !== k)) {
         el.classList.remove('dragging');
-        translate(el, posToTranslate$1(key2pos(k), asWhite));
+        translate(el, posToTranslate(key2pos(k), asWhite));
         el.cgDragging = false;
       } // remove fading class if it still remains
 
@@ -3928,11 +3941,11 @@ function render$1(s) {
           pos[0] += anim[2];
           pos[1] += anim[3];
           el.classList.add('anim');
-          translate(el, posToTranslate$1(pos, asWhite));
+          translate(el, posToTranslate(pos, asWhite));
         } else if (el.cgAnimating) {
           el.cgAnimating = false;
           el.classList.remove('anim');
-          translate(el, posToTranslate$1(key2pos(k), asWhite));
+          translate(el, posToTranslate(key2pos(k), asWhite));
           if (s.addPieceZIndex) el.style.zIndex = posZIndex(key2pos(k), asWhite);
         } // same piece: flag as same
 
@@ -3966,7 +3979,7 @@ function render$1(s) {
     if (!sameSquares.has(sk)) {
       sMvdset = movedSquares.get(className);
       sMvd = sMvdset && sMvdset.pop();
-      const translation = posToTranslate$1(key2pos(sk), asWhite);
+      const translation = posToTranslate(key2pos(sk), asWhite);
 
       if (sMvd) {
         sMvd.cgKey = sk;
@@ -4008,7 +4021,7 @@ function render$1(s) {
           pos[1] += anim[3];
         }
 
-        translate(pMvd, posToTranslate$1(pos, asWhite));
+        translate(pMvd, posToTranslate(pos, asWhite));
       } // no piece in moved obj: insert the new piece
       // assumes the new piece is not being dragged
       else {
@@ -4024,7 +4037,7 @@ function render$1(s) {
             pos[1] += anim[3];
           }
 
-          translate(pieceNode, posToTranslate$1(pos, asWhite));
+          translate(pieceNode, posToTranslate(pos, asWhite));
           if (s.addPieceZIndex) pieceNode.style.zIndex = posZIndex(pos, asWhite);
           boardEl.appendChild(pieceNode);
         }
@@ -4036,34 +4049,20 @@ function render$1(s) {
 
   for (const nodes of movedSquares.values()) removeNodes(s, nodes);
 }
-function renderResized(s) {
+function updateBounds(s) {
+  if (s.dom.relative) return;
   const asWhite = whitePov(s),
-        posToTranslate$1 = posToTranslate(s.dom.bounds());
+        posToTranslate = posToTranslateAbs(s.dom.bounds());
   let el = s.dom.elements.board.firstChild;
 
   while (el) {
     if (isPieceNode(el) && !el.cgAnimating || isSquareNode(el)) {
-      translate(el, posToTranslate$1(key2pos(el.cgKey), asWhite));
+      translateAbs(el, posToTranslate(key2pos(el.cgKey), asWhite));
     }
 
     el = el.nextSibling;
   }
 }
-function updateBounds(s) {
-  const bounds = s.dom.elements.wrap.getBoundingClientRect();
-  const container = s.dom.elements.container;
-  const ratio = bounds.height / bounds.width;
-  const width = Math.floor(bounds.width * window.devicePixelRatio / 8) * 8 / window.devicePixelRatio;
-  const height = width * ratio;
-  container.style.width = width + 'px';
-  container.style.height = height + 'px';
-  s.dom.bounds.clear();
-
-  if (s.addDimensionsCssVars) {
-    document.documentElement.style.setProperty('--cg-width', width + 'px');
-    document.documentElement.style.setProperty('--cg-height', height + 'px');
-  }
-}
 
 function isPieceNode(el) {
   return el.tagName === 'PIECE';
@@ -4078,8 +4077,8 @@ function removeNodes(s, nodes) {
 }
 
 function posZIndex(pos, asWhite) {
-  let z = 3 + pos[1] * 8 + (7 - pos[0]);
-  if (asWhite) z = 69 - z;
+  let z = 2 + pos[1] * 8 + (7 - pos[0]);
+  if (asWhite) z = 67 - z;
   return z + '';
 }
 
@@ -4136,15 +4135,17 @@ function Chessground(element, config) {
     const prevUnbind = 'dom' in maybeState ? maybeState.dom.unbind : undefined; // compute bounds from existing board element if possible
     // this allows non-square boards from CSS to be handled (for 3D)
 
-    const elements = renderWrap(element, maybeState),
+    const relative = maybeState.viewOnly && !maybeState.drawable.visible,
+          elements = renderWrap(element, maybeState, relative),
           bounds = memo(() => elements.board.getBoundingClientRect()),
           redrawNow = skipSvg => {
       render$1(state);
       if (!skipSvg && elements.svg) renderSvg(state, elements.svg, elements.customSvg);
     },
-          onResize = () => {
+          boundsUpdated = () => {
+      bounds.clear();
       updateBounds(state);
-      renderResized(state);
+      if (elements.svg) renderSvg(state, elements.svg, elements.customSvg);
     };
 
     const state = maybeState;
@@ -4153,13 +4154,13 @@ function Chessground(element, config) {
       bounds,
       redraw: debounceRedraw(redrawNow),
       redrawNow,
-      unbind: prevUnbind
+      unbind: prevUnbind,
+      relative
     };
     state.drawable.prevSvgHash = '';
-    updateBounds(state);
     redrawNow(false);
-    bindBoard(state, onResize);
-    if (!prevUnbind) state.dom.unbind = bindDocument(state, onResize);
+    bindBoard(state, boundsUpdated);
+    if (!prevUnbind) state.dom.unbind = bindDocument(state, boundsUpdated);
     state.events.insert && state.events.insert(elements);
     return state;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-chessground",
-  "version": "0.9.2",
+  "version": "0.9.3",
   "description": "React and Next wrapper for Chessground with chessboard and pieces out of the box",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "chess.js": "^0.12.0",
-    "chessground": "^8.1.7",
+    "chessground": "^7.12.0",
     "merge-class-names": "^1.4.2",
     "react-pure-modal": "^2.1.0",
     "store2": "^2.12.0"