next-chessground 0.7.1 → 0.9.0

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import React, { useState, createContext, useContext } from 'react';
+import React, { useState, createContext, useContext, forwardRef, useMemo } from 'react';
 import require$$1 from 'react-dom';
 
 function _defineProperty(obj, key, value) {
@@ -2181,31 +2181,15 @@ if (process.env.NODE_ENV !== 'production') {
 }
 });
 
-var types = createCommonjsModule(function (module, exports) {
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.files = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];
-exports.ranks = [1, 2, 3, 4, 5, 6, 7, 8];
-});
-
-var util = createCommonjsModule(function (module, exports) {
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-
-
-exports.colors = ['white', 'black'];
-exports.invRanks = [8, 7, 6, 5, 4, 3, 2, 1];
-exports.allKeys = Array.prototype.concat(...types.files.map(c => types.ranks.map(r => c + r)));
-
-exports.pos2key = pos => exports.allKeys[8 * pos[0] + pos[1] - 9];
-
-exports.key2pos = k => [k.charCodeAt(0) - 96, k.charCodeAt(1) - 48];
+const colors = ['white', 'black'];
+const files = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];
+const ranks = ['1', '2', '3', '4', '5', '6', '7', '8'];
 
+const invRanks = [...ranks].reverse();
+const allKeys = Array.prototype.concat(...files.map(c => ranks.map(r => c + r)));
+const pos2key = pos => allKeys[8 * pos[0] + pos[1]];
+const key2pos = k => [k.charCodeAt(0) - 97, k.charCodeAt(1) - 49];
+const allPos = allKeys.map(key2pos);
 function memo(f) {
   let v;
 
@@ -2220,10 +2204,7 @@ function memo(f) {
 
   return ret;
 }
-
-exports.memo = memo;
-
-exports.timer = () => {
+const timer = () => {
   let startAt;
   return {
     start() {
@@ -2243,72 +2224,51 @@ exports.timer = () => {
 
   };
 };
-
-exports.opposite = c => c === 'white' ? 'black' : 'white';
-
-function containsX(xs, x) {
-  return xs !== undefined && xs.indexOf(x) !== -1;
-}
-
-exports.containsX = containsX;
-
-exports.distanceSq = (pos1, pos2) => {
-  return Math.pow(pos1[0] - pos2[0], 2) + Math.pow(pos1[1] - pos2[1], 2);
-};
-
-exports.samePiece = (p1, p2) => p1.role === p2.role && p1.color === p2.color;
-
-const posToTranslateBase = (pos, asWhite, xFactor, yFactor) => [(asWhite ? pos[0] - 1 : 8 - pos[0]) * xFactor, (asWhite ? 8 - pos[1] : pos[1] - 1) * yFactor];
-
-exports.posToTranslateAbs = bounds => {
-  const xFactor = bounds.width / 8,
-        yFactor = bounds.height / 8;
-  return (pos, asWhite) => posToTranslateBase(pos, asWhite, xFactor, yFactor);
+const opposite = c => c === 'white' ? 'black' : 'white';
+const distanceSq = (pos1, pos2) => {
+  const dx = pos1[0] - pos2[0],
+        dy = pos1[1] - pos2[1];
+  return dx * dx + dy * dy;
 };
-
-exports.posToTranslateRel = (pos, asWhite) => posToTranslateBase(pos, asWhite, 100, 100);
-
-exports.translateAbs = (el, pos) => {
+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) => {
   el.style.transform = `translate(${pos[0]}px,${pos[1]}px)`;
 };
-
-exports.translateRel = (el, percents) => {
-  el.style.transform = `translate(${percents[0]}%,${percents[1]}%)`;
-};
-
-exports.setVisible = (el, v) => {
+const setVisible = (el, v) => {
   el.style.visibility = v ? 'visible' : 'hidden';
 };
+const eventPosition = e => {
+  var _a;
 
-exports.eventPosition = e => {
   if (e.clientX || e.clientX === 0) return [e.clientX, e.clientY];
-  if (e.touches && e.targetTouches[0]) return [e.targetTouches[0].clientX, e.targetTouches[0].clientY];
-  return undefined;
+  if ((_a = e.targetTouches) === null || _a === void 0 ? void 0 : _a[0]) return [e.targetTouches[0].clientX, e.targetTouches[0].clientY];
+  return; // touchend has no position!
 };
-
-exports.isRightButton = e => e.buttons === 2 || e.button === 2;
-
-exports.createEl = (tagName, className) => {
+const isRightButton = e => e.buttons === 2 || e.button === 2;
+const createEl = (tagName, className) => {
   const el = document.createElement(tagName);
   if (className) el.className = className;
   return el;
 };
-});
-
-var premove_1 = createCommonjsModule(function (module, exports) {
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+function computeSquareCenter(key, asWhite, bounds) {
+  const pos = key2pos(key);
 
+  if (!asWhite) {
+    pos[0] = 7 - pos[0];
+    pos[1] = 7 - pos[1];
+  }
 
+  return [bounds.left + bounds.width * pos[0] / 8 + bounds.width / 16, bounds.top + bounds.height * (7 - pos[1]) / 8 + bounds.height / 16];
+}
 
 function diff(a, b) {
   return Math.abs(a - b);
 }
 
 function pawn(color) {
-  return (x1, y1, x2, y2) => diff(x1, x2) < 2 && (color === 'white' ? y2 === y1 + 1 || y1 <= 2 && y2 === y1 + 2 && x1 === x2 : y2 === y1 - 1 || y1 >= 7 && y2 === y1 - 2 && x1 === x2);
+  return (x1, y1, x2, y2) => diff(x1, x2) < 2 && (color === 'white' ? // allow 2 squares from first two ranks, for horde
+  y2 === y1 + 1 || y1 <= 1 && y2 === y1 + 2 && x1 === x2 : y2 === y1 - 1 || y1 >= 6 && y2 === y1 - 2 && x1 === x2);
 }
 
 const knight = (x1, y1, x2, y2) => {
@@ -2330,83 +2290,53 @@ const queen = (x1, y1, x2, y2) => {
 };
 
 function king(color, rookFiles, canCastle) {
-  return (x1, y1, x2, y2) => diff(x1, x2) < 2 && diff(y1, y2) < 2 || canCastle && y1 === y2 && y1 === (color === 'white' ? 1 : 8) && (x1 === 5 && (util.containsX(rookFiles, 1) && x2 === 3 || util.containsX(rookFiles, 8) && x2 === 7) || util.containsX(rookFiles, x2));
+  return (x1, y1, x2, y2) => diff(x1, x2) < 2 && diff(y1, y2) < 2 || canCastle && y1 === y2 && y1 === (color === 'white' ? 0 : 7) && (x1 === 4 && (x2 === 2 && rookFiles.includes(0) || x2 === 6 && rookFiles.includes(7)) || rookFiles.includes(x2));
 }
 
 function rookFilesOf(pieces, color) {
   const backrank = color === 'white' ? '1' : '8';
-  return Object.keys(pieces).filter(key => {
-    const piece = pieces[key];
-    return key[1] === backrank && piece && piece.color === color && piece.role === 'rook';
-  }).map(key => util.key2pos(key)[0]);
-}
+  const files = [];
 
-const allPos = util.allKeys.map(util.key2pos);
+  for (const [key, piece] of pieces) {
+    if (key[1] === backrank && piece.color === color && piece.role === 'rook') {
+      files.push(key2pos(key)[0]);
+    }
+  }
+
+  return files;
+}
 
 function premove(pieces, key, canCastle) {
-  const piece = pieces[key],
-        pos = util.key2pos(key),
+  const piece = pieces.get(key);
+  if (!piece) return [];
+  const pos = key2pos(key),
         r = piece.role,
         mobility = r === 'pawn' ? pawn(piece.color) : r === 'knight' ? knight : r === 'bishop' ? bishop : r === 'rook' ? rook : r === 'queen' ? queen : king(piece.color, rookFilesOf(pieces, piece.color), canCastle);
-  return allPos.filter(pos2 => (pos[0] !== pos2[0] || pos[1] !== pos2[1]) && mobility(pos[0], pos[1], pos2[0], pos2[1])).map(util.pos2key);
+  return allPos.filter(pos2 => (pos[0] !== pos2[0] || pos[1] !== pos2[1]) && mobility(pos[0], pos[1], pos2[0], pos2[1])).map(pos2key);
 }
 
-exports.default = premove;
-});
-
-var board = createCommonjsModule(function (module, exports) {
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-
-
-
-
 function callUserFunction(f, ...args) {
   if (f) setTimeout(() => f(...args), 1);
 }
-
-exports.callUserFunction = callUserFunction;
-
 function toggleOrientation(state) {
-  state.orientation = util.opposite(state.orientation);
+  state.orientation = opposite(state.orientation);
   state.animation.current = state.draggable.current = state.selected = undefined;
 }
-
-exports.toggleOrientation = toggleOrientation;
-
-function reset(state) {
-  state.lastMove = undefined;
-  unselect(state);
-  unsetPremove(state);
-  unsetPredrop(state);
-}
-
-exports.reset = reset;
-
 function setPieces(state, pieces) {
-  for (const key in pieces) {
-    const piece = pieces[key];
-    if (piece) state.pieces[key] = piece;else delete state.pieces[key];
+  for (const [key, piece] of pieces) {
+    if (piece) state.pieces.set(key, piece);else state.pieces.delete(key);
   }
 }
-
-exports.setPieces = setPieces;
-
 function setCheck(state, color) {
   state.check = undefined;
   if (color === true) color = state.turnColor;
-  if (color) for (const k in state.pieces) {
-    if (state.pieces[k].role === 'king' && state.pieces[k].color === color) {
+  if (color) for (const [k, p] of state.pieces) {
+    if (p.role === 'king' && p.color === color) {
       state.check = k;
     }
   }
 }
 
-exports.setCheck = setCheck;
-
 function setPremove(state, orig, dest, meta) {
   unsetPredrop(state);
   state.premovable.current = [orig, dest];
@@ -2420,8 +2350,6 @@ function unsetPremove(state) {
   }
 }
 
-exports.unsetPremove = unsetPremove;
-
 function setPredrop(state, role, key) {
   unsetPremove(state);
   state.predroppable.current = {
@@ -2440,47 +2368,45 @@ function unsetPredrop(state) {
   }
 }
 
-exports.unsetPredrop = unsetPredrop;
-
 function tryAutoCastle(state, orig, dest) {
   if (!state.autoCastle) return false;
-  const king = state.pieces[orig];
+  const king = state.pieces.get(orig);
   if (!king || king.role !== 'king') return false;
-  const origPos = util.key2pos(orig);
-  const destPos = util.key2pos(dest);
-  if (origPos[1] !== 1 && origPos[1] !== 8 || origPos[1] !== destPos[1]) return false;
+  const origPos = key2pos(orig);
+  const destPos = key2pos(dest);
+  if (origPos[1] !== 0 && origPos[1] !== 7 || origPos[1] !== destPos[1]) return false;
 
-  if (origPos[0] === 5) {
-    if (destPos[0] === 7) dest = util.pos2key([8, destPos[1]]);else if (destPos[0] === 3) dest = util.pos2key([1, destPos[1]]);
+  if (origPos[0] === 4 && !state.pieces.has(dest)) {
+    if (destPos[0] === 6) dest = pos2key([7, destPos[1]]);else if (destPos[0] === 2) dest = pos2key([0, destPos[1]]);
   }
 
-  const rook = state.pieces[dest];
+  const rook = state.pieces.get(dest);
   if (!rook || rook.color !== king.color || rook.role !== 'rook') return false;
-  delete state.pieces[orig];
-  delete state.pieces[dest];
+  state.pieces.delete(orig);
+  state.pieces.delete(dest);
 
   if (origPos[0] < destPos[0]) {
-    state.pieces[util.pos2key([7, destPos[1]])] = king;
-    state.pieces[util.pos2key([6, destPos[1]])] = rook;
+    state.pieces.set(pos2key([6, destPos[1]]), king);
+    state.pieces.set(pos2key([5, destPos[1]]), rook);
   } else {
-    state.pieces[util.pos2key([3, destPos[1]])] = king;
-    state.pieces[util.pos2key([4, destPos[1]])] = rook;
+    state.pieces.set(pos2key([2, destPos[1]]), king);
+    state.pieces.set(pos2key([3, destPos[1]]), rook);
   }
 
   return true;
 }
 
 function baseMove(state, orig, dest) {
-  const origPiece = state.pieces[orig],
-        destPiece = state.pieces[dest];
+  const origPiece = state.pieces.get(orig),
+        destPiece = state.pieces.get(dest);
   if (orig === dest || !origPiece) return false;
   const captured = destPiece && destPiece.color !== origPiece.color ? destPiece : undefined;
   if (dest === state.selected) unselect(state);
   callUserFunction(state.events.move, orig, dest, captured);
 
   if (!tryAutoCastle(state, orig, dest)) {
-    state.pieces[dest] = origPiece;
-    delete state.pieces[orig];
+    state.pieces.set(dest, origPiece);
+    state.pieces.delete(orig);
   }
 
   state.lastMove = [orig, dest];
@@ -2488,32 +2414,27 @@ function baseMove(state, orig, dest) {
   callUserFunction(state.events.change);
   return captured || true;
 }
-
-exports.baseMove = baseMove;
-
 function baseNewPiece(state, piece, key, force) {
-  if (state.pieces[key]) {
-    if (force) delete state.pieces[key];else return false;
+  if (state.pieces.has(key)) {
+    if (force) state.pieces.delete(key);else return false;
   }
 
   callUserFunction(state.events.dropNewPiece, piece, key);
-  state.pieces[key] = piece;
+  state.pieces.set(key, piece);
   state.lastMove = [key];
   state.check = undefined;
   callUserFunction(state.events.change);
   state.movable.dests = undefined;
-  state.turnColor = util.opposite(state.turnColor);
+  state.turnColor = opposite(state.turnColor);
   return true;
 }
 
-exports.baseNewPiece = baseNewPiece;
-
 function baseUserMove(state, orig, dest) {
   const result = baseMove(state, orig, dest);
 
   if (result) {
     state.movable.dests = undefined;
-    state.turnColor = util.opposite(state.turnColor);
+    state.turnColor = opposite(state.turnColor);
     state.animation.current = undefined;
   }
 
@@ -2547,30 +2468,26 @@ function userMove(state, orig, dest) {
   unselect(state);
   return false;
 }
-
-exports.userMove = userMove;
-
 function dropNewPiece(state, orig, dest, force) {
-  if (canDrop(state, orig, dest) || force) {
-    const piece = state.pieces[orig];
-    delete state.pieces[orig];
+  const piece = state.pieces.get(orig);
+
+  if (piece && (canDrop(state, orig, dest) || force)) {
+    state.pieces.delete(orig);
     baseNewPiece(state, piece, dest, force);
     callUserFunction(state.movable.events.afterNewPiece, piece.role, dest, {
+      premove: false,
       predrop: false
     });
-  } else if (canPredrop(state, orig, dest)) {
-    setPredrop(state, state.pieces[orig].role, dest);
+  } else if (piece && canPredrop(state, orig, dest)) {
+    setPredrop(state, piece.role, dest);
   } else {
     unsetPremove(state);
     unsetPredrop(state);
   }
 
-  delete state.pieces[orig];
+  state.pieces.delete(orig);
   unselect(state);
 }
-
-exports.dropNewPiece = dropNewPiece;
-
 function selectSquare(state, key, force) {
   callUserFunction(state.events.select, key);
 
@@ -2592,65 +2509,54 @@ function selectSquare(state, key, force) {
     state.hold.start();
   }
 }
-
-exports.selectSquare = selectSquare;
-
 function setSelected(state, key) {
   state.selected = key;
 
   if (isPremovable(state, key)) {
-    state.premovable.dests = premove_1.default(state.pieces, key, state.premovable.castle);
+    state.premovable.dests = premove(state.pieces, key, state.premovable.castle);
   } else state.premovable.dests = undefined;
 }
-
-exports.setSelected = setSelected;
-
 function unselect(state) {
   state.selected = undefined;
   state.premovable.dests = undefined;
   state.hold.cancel();
 }
 
-exports.unselect = unselect;
-
 function isMovable(state, orig) {
-  const piece = state.pieces[orig];
+  const piece = state.pieces.get(orig);
   return !!piece && (state.movable.color === 'both' || state.movable.color === piece.color && state.turnColor === piece.color);
 }
 
 function canMove(state, orig, dest) {
-  return orig !== dest && isMovable(state, orig) && (state.movable.free || !!state.movable.dests && util.containsX(state.movable.dests[orig], dest));
-}
+  var _a, _b;
 
-exports.canMove = canMove;
+  return orig !== dest && isMovable(state, orig) && (state.movable.free || !!((_b = (_a = state.movable.dests) === null || _a === void 0 ? void 0 : _a.get(orig)) === null || _b === void 0 ? void 0 : _b.includes(dest)));
+}
 
 function canDrop(state, orig, dest) {
-  const piece = state.pieces[orig];
-  return !!piece && dest && (orig === dest || !state.pieces[dest]) && (state.movable.color === 'both' || state.movable.color === piece.color && state.turnColor === piece.color);
+  const piece = state.pieces.get(orig);
+  return !!piece && (orig === dest || !state.pieces.has(dest)) && (state.movable.color === 'both' || state.movable.color === piece.color && state.turnColor === piece.color);
 }
 
 function isPremovable(state, orig) {
-  const piece = state.pieces[orig];
+  const piece = state.pieces.get(orig);
   return !!piece && state.premovable.enabled && state.movable.color === piece.color && state.turnColor !== piece.color;
 }
 
 function canPremove(state, orig, dest) {
-  return orig !== dest && isPremovable(state, orig) && util.containsX(premove_1.default(state.pieces, orig, state.premovable.castle), dest);
+  return orig !== dest && isPremovable(state, orig) && premove(state.pieces, orig, state.premovable.castle).includes(dest);
 }
 
 function canPredrop(state, orig, dest) {
-  const piece = state.pieces[orig];
-  const destPiece = state.pieces[dest];
-  return !!piece && dest && (!destPiece || destPiece.color !== state.movable.color) && state.predroppable.enabled && (piece.role !== 'pawn' || dest[1] !== '1' && dest[1] !== '8') && state.movable.color === piece.color && state.turnColor !== piece.color;
+  const piece = state.pieces.get(orig);
+  const destPiece = state.pieces.get(dest);
+  return !!piece && (!destPiece || destPiece.color !== state.movable.color) && state.predroppable.enabled && (piece.role !== 'pawn' || dest[1] !== '1' && dest[1] !== '8') && state.movable.color === piece.color && state.turnColor !== piece.color;
 }
 
 function isDraggable(state, orig) {
-  const piece = state.pieces[orig];
+  const piece = state.pieces.get(orig);
   return !!piece && state.draggable.enabled && (state.movable.color === 'both' || state.movable.color === piece.color && (state.turnColor === piece.color || state.premovable.enabled));
 }
-
-exports.isDraggable = isDraggable;
-
 function playPremove(state) {
   const move = state.premovable.current;
   if (!move) return false;
@@ -2674,9 +2580,6 @@ function playPremove(state) {
   unsetPremove(state);
   return success;
 }
-
-exports.playPremove = playPremove;
-
 function playPredrop(state, validate) {
   const drop = state.predroppable.current;
   let success = false;
@@ -2690,6 +2593,7 @@ function playPredrop(state, validate) {
 
     if (baseNewPiece(state, piece, drop.key)) {
       callUserFunction(state.movable.events.afterNewPiece, drop.role, drop.key, {
+        premove: false,
         predrop: true
       });
       success = true;
@@ -2699,52 +2603,37 @@ function playPredrop(state, validate) {
   unsetPredrop(state);
   return success;
 }
-
-exports.playPredrop = playPredrop;
-
 function cancelMove(state) {
   unsetPremove(state);
   unsetPredrop(state);
   unselect(state);
 }
-
-exports.cancelMove = cancelMove;
-
 function stop(state) {
   state.movable.color = state.movable.dests = state.animation.current = undefined;
   cancelMove(state);
 }
-
-exports.stop = stop;
-
 function getKeyAtDomPos(pos, asWhite, bounds) {
-  let file = Math.ceil(8 * ((pos[0] - bounds.left) / bounds.width));
-  if (!asWhite) file = 9 - file;
-  let rank = Math.ceil(8 - 8 * ((pos[1] - bounds.top) / bounds.height));
-  if (!asWhite) rank = 9 - rank;
-  return file > 0 && file < 9 && rank > 0 && rank < 9 ? util.pos2key([file, rank]) : undefined;
+  let file = Math.floor(8 * (pos[0] - bounds.left) / bounds.width);
+  if (!asWhite) file = 7 - file;
+  let rank = 7 - Math.floor(8 * (pos[1] - bounds.top) / bounds.height);
+  if (!asWhite) rank = 7 - rank;
+  return file >= 0 && file < 8 && rank >= 0 && rank < 8 ? pos2key([file, rank]) : undefined;
+}
+function getSnappedKeyAtDomPos(orig, pos, asWhite, bounds) {
+  const origPos = key2pos(orig);
+  const validSnapPos = allPos.filter(pos2 => {
+    return queen(origPos[0], origPos[1], pos2[0], pos2[1]) || knight(origPos[0], origPos[1], pos2[0], pos2[1]);
+  });
+  const validSnapCenters = validSnapPos.map(pos2 => computeSquareCenter(pos2key(pos2), asWhite, bounds));
+  const validSnapDistances = validSnapCenters.map(pos2 => distanceSq(pos, pos2));
+  const [, closestSnapIndex] = validSnapDistances.reduce((a, b, index) => a[0] < b ? a : [b, index], [validSnapDistances[0], 0]);
+  return pos2key(validSnapPos[closestSnapIndex]);
 }
-
-exports.getKeyAtDomPos = getKeyAtDomPos;
-
 function whitePov(s) {
   return s.orientation === 'white';
 }
 
-exports.whitePov = whitePov;
-});
-
-var fen = createCommonjsModule(function (module, exports) {
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-
-
-
-
-exports.initial = 'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR';
+const initial = 'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR';
 const roles = {
   p: 'pawn',
   r: 'rook',
@@ -2761,11 +2650,10 @@ const letters = {
   queen: 'q',
   king: 'k'
 };
-
 function read(fen) {
-  if (fen === 'start') fen = exports.initial;
-  const pieces = {};
-  let row = 8,
+  if (fen === 'start') fen = initial;
+  const pieces = new Map();
+  let row = 7,
       col = 0;
 
   for (const c of fen) {
@@ -2775,36 +2663,37 @@ function read(fen) {
 
       case '/':
         --row;
-        if (row === 0) return pieces;
+        if (row < 0) return pieces;
         col = 0;
         break;
 
       case '~':
-        const piece = pieces[util.pos2key([col, row])];
-        if (piece) piece.promoted = true;
-        break;
+        {
+          const piece = pieces.get(pos2key([col, row]));
+          if (piece) piece.promoted = true;
+          break;
+        }
 
       default:
-        const nb = c.charCodeAt(0);
-        if (nb < 57) col += nb - 48;else {
-          ++col;
-          const role = c.toLowerCase();
-          pieces[util.pos2key([col, row])] = {
-            role: roles[role],
-            color: c === role ? 'black' : 'white'
-          };
+        {
+          const nb = c.charCodeAt(0);
+          if (nb < 57) col += nb - 48;else {
+            const role = c.toLowerCase();
+            pieces.set(pos2key([col, row]), {
+              role: roles[role],
+              color: c === role ? 'black' : 'white'
+            });
+            ++col;
+          }
         }
     }
   }
 
   return pieces;
 }
-
-exports.read = read;
-
 function write(pieces) {
-  return util.invRanks.map(y => types.ranks.map(x => {
-    const piece = pieces[util.pos2key([x, y])];
+  return invRanks.map(y => files.map(x => {
+    const piece = pieces.get(x + y);
 
     if (piece) {
       const letter = letters[piece.role];
@@ -2813,112 +2702,99 @@ function write(pieces) {
   }).join('')).join('/').replace(/1{2,}/g, s => s.length.toString());
 }
 
-exports.write = write;
-});
-
-var config = createCommonjsModule(function (module, exports) {
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-
+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.
 
 
-function configure(state, config) {
-  if (config.movable && config.movable.dests) state.movable.dests = undefined;
-  merge(state, config);
+  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
 
   if (config.fen) {
-    state.pieces = fen.read(config.fen);
+    state.pieces = read(config.fen);
     state.drawable.shapes = [];
-  }
+  } // apply config values that could be undefined yet meaningful
+
 
-  if (config.hasOwnProperty('check')) board.setCheck(state, config.check || false);
-  if (config.hasOwnProperty('lastMove') && !config.lastMove) state.lastMove = undefined;else if (config.lastMove) state.lastMove = config.lastMove;
-  if (state.selected) board.setSelected(state, state.selected);
-  if (!state.animation.duration || state.animation.duration < 100) state.animation.enabled = false;
+  if ('check' in config) setCheck(state, config.check || false);
+  if ('lastMove' in config && !config.lastMove) state.lastMove = undefined; // in case of ZH drop last move, there's a single square.
+  // if the previous last move had two squares,
+  // 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.movable.rookCastle && state.movable.dests) {
-    const rank = state.movable.color === 'white' ? 1 : 8,
+    const rank = state.movable.color === 'white' ? '1' : '8',
           kingStartPos = 'e' + rank,
-          dests = state.movable.dests[kingStartPos],
-          king = state.pieces[kingStartPos];
+          dests = state.movable.dests.get(kingStartPos),
+          king = state.pieces.get(kingStartPos);
     if (!dests || !king || king.role !== 'king') return;
-    state.movable.dests[kingStartPos] = dests.filter(d => !(d === 'a' + rank && dests.indexOf('c' + rank) !== -1) && !(d === 'h' + rank && dests.indexOf('g' + rank) !== -1));
+    state.movable.dests.set(kingStartPos, dests.filter(d => !(d === 'a' + rank && dests.includes('c' + rank)) && !(d === 'h' + rank && dests.includes('g' + rank))));
   }
 }
 
-exports.configure = configure;
-
-function merge(base, extend) {
+function deepMerge(base, extend) {
   for (const key in extend) {
-    if (isObject(base[key]) && isObject(extend[key])) merge(base[key], extend[key]);else base[key] = extend[key];
+    if (isObject(base[key]) && isObject(extend[key])) deepMerge(base[key], extend[key]);else base[key] = extend[key];
   }
 }
 
 function isObject(o) {
   return typeof o === 'object';
 }
-});
-
-var anim_1 = createCommonjsModule(function (module, exports) {
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-
 
 function anim(mutation, state) {
   return state.animation.enabled ? animate(mutation, state) : render(mutation, state);
 }
-
-exports.anim = anim;
-
 function render(mutation, state) {
   const result = mutation(state);
   state.dom.redraw();
   return result;
 }
 
-exports.render = render;
-
 function makePiece(key, piece) {
   return {
     key: key,
-    pos: util.key2pos(key),
+    pos: key2pos(key),
     piece: piece
   };
 }
 
 function closer(piece, pieces) {
   return pieces.sort((p1, p2) => {
-    return util.distanceSq(piece.pos, p1.pos) - util.distanceSq(piece.pos, p2.pos);
+    return distanceSq(piece.pos, p1.pos) - distanceSq(piece.pos, p2.pos);
   })[0];
 }
 
 function computePlan(prevPieces, current) {
-  const anims = {},
+  const anims = new Map(),
         animedOrigs = [],
-        fadings = {},
+        fadings = new Map(),
         missings = [],
         news = [],
-        prePieces = {};
+        prePieces = new Map();
   let curP, preP, vector;
 
-  for (const i in prevPieces) {
-    prePieces[i] = makePiece(i, prevPieces[i]);
+  for (const [k, p] of prevPieces) {
+    prePieces.set(k, makePiece(k, p));
   }
 
-  for (const key of util.allKeys) {
-    curP = current.pieces[key];
-    preP = prePieces[key];
+  for (const key of allKeys) {
+    curP = current.pieces.get(key);
+    preP = prePieces.get(key);
 
     if (curP) {
       if (preP) {
-        if (!util.samePiece(curP, preP.piece)) {
+        if (!samePiece(curP, preP.piece)) {
           missings.push(preP);
           news.push(makePiece(key, curP));
         }
@@ -2927,17 +2803,17 @@ function computePlan(prevPieces, current) {
   }
 
   for (const newP of news) {
-    preP = closer(newP, missings.filter(p => util.samePiece(newP.piece, p.piece)));
+    preP = closer(newP, missings.filter(p => samePiece(newP.piece, p.piece)));
 
     if (preP) {
       vector = [preP.pos[0] - newP.pos[0], preP.pos[1] - newP.pos[1]];
-      anims[newP.key] = vector.concat(vector);
+      anims.set(newP.key, vector.concat(vector));
       animedOrigs.push(preP.key);
     }
   }
 
   for (const p of missings) {
-    if (!util.containsX(animedOrigs, p.key)) fadings[p.key] = p.piece;
+    if (!animedOrigs.includes(p.key)) fadings.set(p.key, p.piece);
   }
 
   return {
@@ -2950,6 +2826,7 @@ function step(state, now) {
   const cur = state.animation.current;
 
   if (cur === undefined) {
+    // animation was canceled :(
     if (!state.dom.destroyed) state.dom.redrawNow();
     return;
   }
@@ -2962,23 +2839,24 @@ function step(state, now) {
   } else {
     const ease = easing(rest);
 
-    for (const i in cur.plan.anims) {
-      const cfg = cur.plan.anims[i];
+    for (const cfg of cur.plan.anims.values()) {
       cfg[2] = cfg[0] * ease;
       cfg[3] = cfg[1] * ease;
     }
 
-    state.dom.redrawNow(true);
+    state.dom.redrawNow(true); // optimisation: don't render SVG changes during animations
+
     requestAnimationFrame((now = performance.now()) => step(state, now));
   }
 }
 
 function animate(mutation, state) {
-  const prevPieces = Object.assign({}, state.pieces);
+  // clone state before mutating it
+  const prevPieces = new Map(state.pieces);
   const result = mutation(state);
   const plan = computePlan(prevPieces, state);
 
-  if (!isObjectEmpty(plan.anims) || !isObjectEmpty(plan.fadings)) {
+  if (plan.anims.size || plan.fadings.size) {
     const alreadyRunning = state.animation.current && state.animation.current.start;
     state.animation.current = {
       start: performance.now(),
@@ -2987,59 +2865,48 @@ function animate(mutation, state) {
     };
     if (!alreadyRunning) step(state, performance.now());
   } else {
+    // don't animate, just render right away
     state.dom.redraw();
   }
 
   return result;
-}
+} // https://gist.github.com/gre/1650294
 
-function isObjectEmpty(o) {
-  for (const _ in o) return false;
-
-  return true;
-}
 
 function easing(t) {
   return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
 }
-});
-
-var draw = createCommonjsModule(function (module, exports) {
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-
-
-
 
 const brushes = ['green', 'red', 'blue', 'yellow'];
-
 function start(state, e) {
+  // support one finger touch only
   if (e.touches && e.touches.length > 1) return;
   e.stopPropagation();
   e.preventDefault();
-  e.ctrlKey ? board.unselect(state) : board.cancelMove(state);
-  const pos = util.eventPosition(e),
-        orig = board.getKeyAtDomPos(pos, board.whitePov(state), state.dom.bounds());
+  e.ctrlKey ? unselect(state) : cancelMove(state);
+  const pos = eventPosition(e),
+        orig = getKeyAtDomPos(pos, whitePov(state), state.dom.bounds());
   if (!orig) return;
   state.drawable.current = {
     orig,
     pos,
-    brush: eventBrush(e)
+    brush: eventBrush(e),
+    snapToValidMove: state.drawable.defaultSnapToValidMove
   };
   processDraw(state);
 }
-
-exports.start = start;
-
 function processDraw(state) {
   requestAnimationFrame(() => {
     const cur = state.drawable.current;
 
     if (cur) {
-      const mouseSq = board.getKeyAtDomPos(cur.pos, board.whitePov(state), state.dom.bounds());
+      const keyAtDomPos = getKeyAtDomPos(cur.pos, whitePov(state), state.dom.bounds());
+
+      if (!keyAtDomPos) {
+        cur.snapToValidMove = false;
+      }
+
+      const mouseSq = cur.snapToValidMove ? getSnappedKeyAtDomPos(cur.orig, cur.pos, whitePov(state), state.dom.bounds()) : keyAtDomPos;
 
       if (mouseSq !== cur.mouseSq) {
         cur.mouseSq = mouseSq;
@@ -3051,15 +2918,9 @@ function processDraw(state) {
     }
   });
 }
-
-exports.processDraw = processDraw;
-
 function move(state, e) {
-  if (state.drawable.current) state.drawable.current.pos = util.eventPosition(e);
+  if (state.drawable.current) state.drawable.current.pos = eventPosition(e);
 }
-
-exports.move = move;
-
 function end(state) {
   const cur = state.drawable.current;
 
@@ -3068,18 +2929,12 @@ function end(state) {
     cancel(state);
   }
 }
-
-exports.end = end;
-
 function cancel(state) {
   if (state.drawable.current) {
     state.drawable.current = undefined;
     state.dom.redraw();
   }
 }
-
-exports.cancel = cancel;
-
 function clear(state) {
   if (state.drawable.shapes.length) {
     state.drawable.shapes = [];
@@ -3088,11 +2943,11 @@ function clear(state) {
   }
 }
 
-exports.clear = clear;
-
 function eventBrush(e) {
-  const modA = (e.shiftKey || e.ctrlKey) && util.isRightButton(e);
-  const modB = e.altKey || e.metaKey || e.getModifierState('AltGraph');
+  var _a;
+
+  const modA = (e.shiftKey || e.ctrlKey) && isRightButton(e);
+  const modB = e.altKey || e.metaKey || ((_a = e.getModifierState) === null || _a === void 0 ? void 0 : _a.call(e, 'AltGraph'));
   return brushes[(modA ? 1 : 0) + (modB ? 2 : 0)];
 }
 
@@ -3108,136 +2963,115 @@ function addShape(drawable, cur) {
 function onChange(drawable) {
   if (drawable.onChange) drawable.onChange(drawable.shapes);
 }
-});
-
-var drag = createCommonjsModule(function (module, exports) {
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
 
+function start$1(s, e) {
+  if (!e.isTrusted || e.button !== undefined && e.button !== 0) return; // only touch or left click
 
+  if (e.touches && e.touches.length > 1) return; // support one finger touch only
 
-
-
-
-
-
-
-function start(s, e) {
-  if (e.button !== undefined && e.button !== 0) return;
-  if (e.touches && e.touches.length > 1) return;
   const bounds = s.dom.bounds(),
-        position = util.eventPosition(e),
-        orig = board.getKeyAtDomPos(position, board.whitePov(s), bounds);
+        position = eventPosition(e),
+        orig = getKeyAtDomPos(position, whitePov(s), bounds);
   if (!orig) return;
-  const piece = s.pieces[orig];
+  const piece = s.pieces.get(orig);
   const previouslySelected = s.selected;
-  if (!previouslySelected && s.drawable.enabled && (s.drawable.eraseOnClick || !piece || piece.color !== s.turnColor)) draw.clear(s);
-  if (e.cancelable !== false && (!e.touches || !s.movable.color || piece || previouslySelected || pieceCloseTo(s, position))) e.preventDefault();
+  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.
+
+  if (e.cancelable !== false && (!e.touches || s.blockTouchScroll || piece || previouslySelected || pieceCloseTo(s, position))) e.preventDefault();
   const hadPremove = !!s.premovable.current;
   const hadPredrop = !!s.predroppable.current;
   s.stats.ctrlKey = e.ctrlKey;
 
-  if (s.selected && board.canMove(s, s.selected, orig)) {
-    anim_1.anim(state => board.selectSquare(state, orig), s);
+  if (s.selected && canMove(s, s.selected, orig)) {
+    anim(state => selectSquare(state, orig), s);
   } else {
-    board.selectSquare(s, orig);
+    selectSquare(s, orig);
   }
 
   const stillSelected = s.selected === orig;
   const element = pieceElementByKey(s, orig);
 
-  if (piece && element && stillSelected && board.isDraggable(s, orig)) {
-    const squareBounds = computeSquareBounds(orig, board.whitePov(s), bounds);
+  if (piece && element && stillSelected && isDraggable(s, orig)) {
     s.draggable.current = {
       orig,
-      origPos: util.key2pos(orig),
       piece,
-      rel: position,
-      epos: position,
-      pos: [0, 0],
-      dec: s.draggable.centerPiece ? [position[0] - (squareBounds.left + squareBounds.width / 2), position[1] - (squareBounds.top + squareBounds.height / 2)] : [0, 0],
+      origPos: position,
+      pos: position,
       started: s.draggable.autoDistance && s.stats.dragged,
       element,
       previouslySelected,
-      originTarget: e.target
+      originTarget: e.target,
+      keyHasChanged: false
     };
     element.cgDragging = true;
-    element.classList.add('dragging');
+    element.classList.add('dragging'); // place ghost
+
     const ghost = s.dom.elements.ghost;
 
     if (ghost) {
       ghost.className = `ghost ${piece.color} ${piece.role}`;
-      util.translateAbs(ghost, util.posToTranslateAbs(bounds)(util.key2pos(orig), board.whitePov(s)));
-      util.setVisible(ghost, true);
+      translate(ghost, posToTranslate(bounds)(key2pos(orig), whitePov(s)));
+      setVisible(ghost, true);
     }
 
     processDrag(s);
   } else {
-    if (hadPremove) board.unsetPremove(s);
-    if (hadPredrop) board.unsetPredrop(s);
+    if (hadPremove) unsetPremove(s);
+    if (hadPredrop) unsetPredrop(s);
   }
 
   s.dom.redraw();
 }
 
-exports.start = start;
-
 function pieceCloseTo(s, pos) {
-  const asWhite = board.whitePov(s),
+  const asWhite = whitePov(s),
         bounds = s.dom.bounds(),
         radiusSq = Math.pow(bounds.width / 8, 2);
 
-  for (const key in s.pieces) {
-    const squareBounds = computeSquareBounds(key, asWhite, bounds),
-          center = [squareBounds.left + squareBounds.width / 2, squareBounds.top + squareBounds.height / 2];
-    if (util.distanceSq(center, pos) <= radiusSq) return true;
+  for (const key of s.pieces.keys()) {
+    const center = computeSquareCenter(key, asWhite, bounds);
+    if (distanceSq(center, pos) <= radiusSq) return true;
   }
 
   return false;
 }
 
-exports.pieceCloseTo = pieceCloseTo;
-
 function dragNewPiece(s, piece, e, force) {
   const key = 'a0';
-  s.pieces[key] = piece;
+  s.pieces.set(key, piece);
   s.dom.redraw();
-  const position = util.eventPosition(e),
-        asWhite = board.whitePov(s),
-        bounds = s.dom.bounds(),
-        squareBounds = computeSquareBounds(key, asWhite, bounds);
-  const rel = [(asWhite ? 0 : 7) * squareBounds.width + bounds.left, (asWhite ? 8 : -1) * squareBounds.height + bounds.top];
+  const position = eventPosition(e);
   s.draggable.current = {
     orig: key,
-    origPos: util.key2pos(key),
     piece,
-    rel,
-    epos: position,
-    pos: [position[0] - rel[0], position[1] - rel[1]],
-    dec: [-squareBounds.width / 2, -squareBounds.height / 2],
+    origPos: position,
+    pos: position,
     started: true,
     element: () => pieceElementByKey(s, key),
     originTarget: e.target,
     newPiece: true,
-    force: !!force
+    force: !!force,
+    keyHasChanged: false
   };
   processDrag(s);
 }
 
-exports.dragNewPiece = dragNewPiece;
-
 function processDrag(s) {
   requestAnimationFrame(() => {
+    var _a;
+
     const cur = s.draggable.current;
-    if (!cur) return;
-    if (s.animation.current && s.animation.current.plan.anims[cur.orig]) s.animation.current = undefined;
-    const origPiece = s.pieces[cur.orig];
-    if (!origPiece || !util.samePiece(origPiece, cur.piece)) cancel(s);else {
-      if (!cur.started && util.distanceSq(cur.epos, cur.rel) >= Math.pow(s.draggable.distance, 2)) cur.started = true;
+    if (!cur) return; // cancel animations while dragging
+
+    if ((_a = s.animation.current) === null || _a === void 0 ? void 0 : _a.plan.anims.has(cur.orig)) s.animation.current = undefined; // if moving piece is gone, cancel
+
+    const origPiece = s.pieces.get(cur.orig);
+    if (!origPiece || !samePiece(origPiece, cur.piece)) cancel$1(s);else {
+      if (!cur.started && distanceSq(cur.pos, cur.origPos) >= Math.pow(s.draggable.distance, 2)) cur.started = true;
 
       if (cur.started) {
+        // support lazy elements
         if (typeof cur.element === 'function') {
           const found = cur.element();
           if (!found) return;
@@ -3246,93 +3080,71 @@ function processDrag(s) {
           cur.element = found;
         }
 
-        cur.pos = [cur.epos[0] - cur.rel[0], cur.epos[1] - cur.rel[1]];
-        const translation = util.posToTranslateAbs(s.dom.bounds())(cur.origPos, board.whitePov(s));
-        translation[0] += cur.pos[0] + cur.dec[0];
-        translation[1] += cur.pos[1] + cur.dec[1];
-        util.translateAbs(cur.element, translation);
+        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));
       }
     }
     processDrag(s);
   });
 }
 
-function move(s, e) {
+function move$1(s, e) {
+  // support one finger touch only
   if (s.draggable.current && (!e.touches || e.touches.length < 2)) {
-    s.draggable.current.epos = util.eventPosition(e);
+    s.draggable.current.pos = eventPosition(e);
   }
 }
-
-exports.move = move;
-
-function end(s, e) {
+function end$1(s, e) {
   const cur = s.draggable.current;
-  if (!cur) return;
-  if (e.type === 'touchend' && e.cancelable !== false) e.preventDefault();
+  if (!cur) return; // create no corresponding mouse event
 
-  if (e.type === 'touchend' && cur && cur.originTarget !== e.target && !cur.newPiece) {
+  if (e.type === 'touchend' && e.cancelable !== false) e.preventDefault(); // comparing with the origin target is an easy way to test that the end event
+  // has the same touch origin
+
+  if (e.type === 'touchend' && cur.originTarget !== e.target && !cur.newPiece) {
     s.draggable.current = undefined;
     return;
   }
 
-  board.unsetPremove(s);
-  board.unsetPredrop(s);
-  const eventPos = util.eventPosition(e) || cur.epos;
-  const dest = board.getKeyAtDomPos(eventPos, board.whitePov(s), s.dom.bounds());
+  unsetPremove(s);
+  unsetPredrop(s); // touchend has no position; so use the last touchmove position instead
+
+  const eventPos = eventPosition(e) || cur.pos;
+  const dest = getKeyAtDomPos(eventPos, whitePov(s), s.dom.bounds());
 
   if (dest && cur.started && cur.orig !== dest) {
-    if (cur.newPiece) board.dropNewPiece(s, cur.orig, dest, cur.force);else {
+    if (cur.newPiece) dropNewPiece(s, cur.orig, dest, cur.force);else {
       s.stats.ctrlKey = e.ctrlKey;
-      if (board.userMove(s, cur.orig, dest)) s.stats.dragged = true;
+      if (userMove(s, cur.orig, dest)) s.stats.dragged = true;
     }
   } else if (cur.newPiece) {
-    delete s.pieces[cur.orig];
+    s.pieces.delete(cur.orig);
   } else if (s.draggable.deleteOnDropOff && !dest) {
-    delete s.pieces[cur.orig];
-    board.callUserFunction(s.events.change);
+    s.pieces.delete(cur.orig);
+    callUserFunction(s.events.change);
   }
 
-  if (cur.orig === cur.previouslySelected && (cur.orig === dest || !dest)) board.unselect(s);else if (!s.selectable.enabled) board.unselect(s);
+  if ((cur.orig === cur.previouslySelected || cur.keyHasChanged) && (cur.orig === dest || !dest)) unselect(s);else if (!s.selectable.enabled) unselect(s);
   removeDragElements(s);
   s.draggable.current = undefined;
   s.dom.redraw();
 }
-
-exports.end = end;
-
-function cancel(s) {
+function cancel$1(s) {
   const cur = s.draggable.current;
 
   if (cur) {
-    if (cur.newPiece) delete s.pieces[cur.orig];
+    if (cur.newPiece) s.pieces.delete(cur.orig);
     s.draggable.current = undefined;
-    board.unselect(s);
+    unselect(s);
     removeDragElements(s);
     s.dom.redraw();
   }
 }
 
-exports.cancel = cancel;
-
 function removeDragElements(s) {
   const e = s.dom.elements;
-  if (e.ghost) util.setVisible(e.ghost, false);
-}
-
-function computeSquareBounds(key, asWhite, bounds) {
-  const pos = util.key2pos(key);
-
-  if (!asWhite) {
-    pos[0] = 9 - pos[0];
-    pos[1] = 9 - pos[1];
-  }
-
-  return {
-    left: bounds.left + bounds.width * (pos[0] - 1) / 8,
-    top: bounds.top + bounds.height * (8 - pos[1]) / 8,
-    width: bounds.width / 8,
-    height: bounds.height / 8
-  };
+  if (e.ghost) setVisible(e.ghost, false);
 }
 
 function pieceElementByKey(s, key) {
@@ -3343,15 +3155,8 @@ function pieceElementByKey(s, key) {
     el = el.nextSibling;
   }
 
-  return undefined;
+  return;
 }
-});
-
-var explosion_1 = createCommonjsModule(function (module, exports) {
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
 
 function explosion(state, keys) {
   state.exploding = {
@@ -3365,71 +3170,53 @@ function explosion(state, keys) {
   }, 120);
 }
 
-exports.default = explosion;
-
 function setStage(state, stage) {
   if (state.exploding) {
     if (stage) state.exploding.stage = stage;else state.exploding = undefined;
     state.dom.redraw();
   }
 }
-});
-
-var api = createCommonjsModule(function (module, exports) {
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-
 
-
-
-
-
-
-
-
-
-
-
-function start(state, redrawAll) {
-  function toggleOrientation() {
-    board.toggleOrientation(state);
+function start$2(state, redrawAll) {
+  function toggleOrientation$1() {
+    toggleOrientation(state);
     redrawAll();
   }
+
   return {
-    set(config$1) {
-      if (config$1.orientation && config$1.orientation !== state.orientation) toggleOrientation();
-      (config$1.fen ? anim_1.anim : anim_1.render)(state => config.configure(state, config$1), state);
+    set(config) {
+      if (config.orientation && config.orientation !== state.orientation) toggleOrientation$1();
+      applyAnimation(state, config);
+      (config.fen ? anim : render)(state => configure(state, config), state);
     },
 
     state,
-    getFen: () => fen.write(state.pieces),
-    toggleOrientation,
+    getFen: () => write(state.pieces),
+    toggleOrientation: toggleOrientation$1,
 
     setPieces(pieces) {
-      anim_1.anim(state => board.setPieces(state, pieces), state);
+      anim(state => setPieces(state, pieces), state);
     },
 
     selectSquare(key, force) {
-      if (key) anim_1.anim(state => board.selectSquare(state, key, force), state);else if (state.selected) {
-        board.unselect(state);
+      if (key) anim(state => selectSquare(state, key, force), state);else if (state.selected) {
+        unselect(state);
         state.dom.redraw();
       }
     },
 
     move(orig, dest) {
-      anim_1.anim(state => board.baseMove(state, orig, dest), state);
+      anim(state => baseMove(state, orig, dest), state);
     },
 
     newPiece(piece, key) {
-      anim_1.anim(state => board.baseNewPiece(state, piece, key), state);
+      anim(state => baseNewPiece(state, piece, key), state);
     },
 
     playPremove() {
       if (state.premovable.current) {
-        if (anim_1.anim(board.playPremove, state)) return true;
+        if (anim(playPremove, state)) return true; // if the premove couldn't be played, redraw to clear it up
+
         state.dom.redraw();
       }
 
@@ -3438,7 +3225,7 @@ function start(state, redrawAll) {
 
     playPredrop(validate) {
       if (state.predroppable.current) {
-        const result = board.playPredrop(state, validate);
+        const result = playPredrop(state, validate);
         state.dom.redraw();
         return result;
       }
@@ -3447,51 +3234,51 @@ function start(state, redrawAll) {
     },
 
     cancelPremove() {
-      anim_1.render(board.unsetPremove, state);
+      render(unsetPremove, state);
     },
 
     cancelPredrop() {
-      anim_1.render(board.unsetPredrop, state);
+      render(unsetPredrop, state);
     },
 
     cancelMove() {
-      anim_1.render(state => {
-        board.cancelMove(state);
-        drag.cancel(state);
+      render(state => {
+        cancelMove(state);
+        cancel$1(state);
       }, state);
     },
 
     stop() {
-      anim_1.render(state => {
-        board.stop(state);
-        drag.cancel(state);
+      render(state => {
+        stop(state);
+        cancel$1(state);
       }, state);
     },
 
     explode(keys) {
-      explosion_1.default(state, keys);
+      explosion(state, keys);
     },
 
     setAutoShapes(shapes) {
-      anim_1.render(state => state.drawable.autoShapes = shapes, state);
+      render(state => state.drawable.autoShapes = shapes, state);
     },
 
     setShapes(shapes) {
-      anim_1.render(state => state.drawable.shapes = shapes, state);
+      render(state => state.drawable.shapes = shapes, state);
     },
 
     getKeyAtDomPos(pos) {
-      return board.getKeyAtDomPos(pos, board.whitePov(state), state.dom.bounds());
+      return getKeyAtDomPos(pos, whitePov(state), state.dom.bounds());
     },
 
     redrawAll,
 
     dragNewPiece(piece, event, force) {
-      drag.dragNewPiece(state, piece, event, force);
+      dragNewPiece(state, piece, event, force);
     },
 
     destroy() {
-      board.stop(state);
+      stop(state);
       state.dom.unbind && state.dom.unbind();
       state.dom.destroyed = true;
     }
@@ -3499,30 +3286,18 @@ function start(state, redrawAll) {
   };
 }
 
-exports.start = start;
-});
-
-var state = createCommonjsModule(function (module, exports) {
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-
-
-
-
 function defaults() {
   return {
-    pieces: fen.read(fen.initial),
+    pieces: read(initial),
     orientation: 'white',
     turnColor: 'white',
     coordinates: true,
     autoCastle: true,
     viewOnly: false,
     disableContextMenu: false,
-    resizable: true,
     addPieceZIndex: false,
+    addDimensionsCssVars: false,
+    blockTouchScroll: false,
     pieceKey: false,
     highlight: {
       lastMove: true,
@@ -3553,7 +3328,6 @@ function defaults() {
       enabled: true,
       distance: 3,
       autoDistance: true,
-      centerPiece: true,
       showGhost: true,
       deleteOnDropOff: false
     },
@@ -3564,12 +3338,15 @@ function defaults() {
       enabled: true
     },
     stats: {
+      // on touchscreen, default to "tap-tap" moves
+      // instead of drag
       dragged: !('ontouchstart' in window)
     },
     events: {},
     drawable: {
       enabled: true,
       visible: true,
+      defaultSnapToValidMove: true,
       eraseOnClick: true,
       shapes: [],
       autoShapes: [],
@@ -3628,36 +3405,22 @@ function defaults() {
       },
       prevSvgHash: ''
     },
-    hold: util.timer()
+    hold: timer()
   };
 }
 
-exports.defaults = defaults;
-});
-
-var svg = createCommonjsModule(function (module, exports) {
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-
-
 function createElement(tagName) {
   return document.createElementNS('http://www.w3.org/2000/svg', tagName);
 }
-
-exports.createElement = createElement;
-
-function renderSvg(state, root) {
+function renderSvg(state, svg, customSvg) {
   const d = state.drawable,
         curD = d.current,
         cur = curD && curD.mouseSq ? curD : undefined,
-        arrowDests = {},
+        arrowDests = new Map(),
         bounds = state.dom.bounds();
 
   for (const s of d.shapes.concat(d.autoShapes).concat(cur ? [cur] : [])) {
-    if (s.dest) arrowDests[s.dest] = (arrowDests[s.dest] || 0) + 1;
+    if (s.dest) arrowDests.set(s.dest, (arrowDests.get(s.dest) || 0) + 1);
   }
 
   const shapes = d.shapes.concat(d.autoShapes).map(s => {
@@ -3672,61 +3435,85 @@ function renderSvg(state, root) {
     current: true,
     hash: shapeHash(cur, arrowDests, true, bounds)
   });
-  const fullHash = shapes.map(sc => sc.hash).join('');
+  const fullHash = shapes.map(sc => sc.hash).join(';');
   if (fullHash === state.drawable.prevSvgHash) return;
   state.drawable.prevSvgHash = fullHash;
-  const defsEl = root.firstChild;
+  /*
+    -- DOM hierarchy --
+    <svg class="cg-shapes">      (<= svg)
+      <defs>
+        ...(for brushes)...
+      </defs>
+      <g>
+        ...(for arrows, circles, and pieces)...
+      </g>
+    </svg>
+    <svg class="cg-custom-svgs"> (<= customSvg)
+      <g>
+        ...(for custom svgs)...
+      </g>
+    </svg>
+  */
+
+  const defsEl = svg.querySelector('defs');
+  const shapesEl = svg.querySelector('g');
+  const customSvgsEl = customSvg.querySelector('g');
   syncDefs(d, shapes, defsEl);
-  syncShapes(state, shapes, d.brushes, arrowDests, root, defsEl);
-}
-
-exports.renderSvg = renderSvg;
+  syncShapes(state, shapes.filter(s => !s.shape.customSvg), d.brushes, arrowDests, shapesEl);
+  syncShapes(state, shapes.filter(s => s.shape.customSvg), d.brushes, arrowDests, customSvgsEl);
+} // append only. Don't try to update/remove.
 
 function syncDefs(d, shapes, defsEl) {
-  const brushes = {};
+  const brushes = new Map();
   let brush;
 
   for (const s of shapes) {
     if (s.shape.dest) {
       brush = d.brushes[s.shape.brush];
       if (s.shape.modifiers) brush = makeCustomBrush(brush, s.shape.modifiers);
-      brushes[brush.key] = brush;
+      brushes.set(brush.key, brush);
     }
   }
 
-  const keysInDom = {};
+  const keysInDom = new Set();
   let el = defsEl.firstChild;
 
   while (el) {
-    keysInDom[el.getAttribute('cgKey')] = true;
+    keysInDom.add(el.getAttribute('cgKey'));
     el = el.nextSibling;
   }
 
-  for (const key in brushes) {
-    if (!keysInDom[key]) defsEl.appendChild(renderMarker(brushes[key]));
+  for (const [key, brush] of brushes.entries()) {
+    if (!keysInDom.has(key)) defsEl.appendChild(renderMarker(brush));
   }
-}
+} // append and remove only. No updates.
+
 
-function syncShapes(state, shapes, brushes, arrowDests, root, defsEl) {
+function syncShapes(state, shapes, brushes, arrowDests, root) {
   const bounds = state.dom.bounds(),
-        hashesInDom = {},
-        toRemove = [];
+        hashesInDom = new Map(),
+        // by hash
+  toRemove = [];
 
-  for (const sc of shapes) hashesInDom[sc.hash] = false;
+  for (const sc of shapes) hashesInDom.set(sc.hash, false);
 
-  let el = defsEl.nextSibling,
+  let el = root.firstChild,
       elHash;
 
   while (el) {
-    elHash = el.getAttribute('cgHash');
-    if (hashesInDom.hasOwnProperty(elHash)) hashesInDom[elHash] = true;else toRemove.push(el);
+    elHash = el.getAttribute('cgHash'); // found a shape element that's here to stay
+
+    if (hashesInDom.has(elHash)) hashesInDom.set(elHash, true); // or remove it
+    else toRemove.push(el);
     el = el.nextSibling;
-  }
+  } // remove old shapes
+
+
+  for (const el of toRemove) root.removeChild(el); // insert shapes that are not yet in dom
 
-  for (const el of toRemove) root.removeChild(el);
 
   for (const sc of shapes) {
-    if (!hashesInDom[sc.hash]) root.appendChild(renderShape(state, sc, brushes, arrowDests, bounds));
+    if (!hashesInDom.get(sc.hash)) root.appendChild(renderShape(state, sc, brushes, arrowDests, bounds));
   }
 }
 
@@ -3735,9 +3522,10 @@ function shapeHash({
   dest,
   brush,
   piece,
-  modifiers
+  modifiers,
+  customSvg
 }, arrowDests, current, bounds) {
-  return [bounds.width, bounds.height, current, orig, dest, brush, dest && arrowDests[dest] > 1, piece && pieceHash(piece), modifiers && modifiersHash(modifiers)].filter(x => x).join(',');
+  return [bounds.width, bounds.height, current, orig, dest, brush, dest && (arrowDests.get(dest) || 0) > 1, piece && pieceHash(piece), modifiers && modifiersHash(modifiers), customSvg && customSvgHash(customSvg)].filter(x => x).join(',');
 }
 
 function pieceHash(piece) {
@@ -3748,29 +3536,62 @@ function modifiersHash(m) {
   return '' + (m.lineWidth || '');
 }
 
+function customSvgHash(s) {
+  // Rolling hash with base 31 (cf. https://stackoverflow.com/questions/7616461/generate-a-hash-from-string-in-javascript)
+  let h = 0;
+
+  for (let i = 0; i < s.length; i++) {
+    h = (h << 5) - h + s.charCodeAt(i) >>> 0;
+  }
+
+  return 'custom-' + h.toString();
+}
+
 function renderShape(state, {
   shape,
   current,
   hash
 }, brushes, arrowDests, bounds) {
   let el;
-  if (shape.piece) el = renderPiece(state.drawable.pieces.baseUrl, orient(util.key2pos(shape.orig), state.orientation), shape.piece, bounds);else {
-    const orig = orient(util.key2pos(shape.orig), state.orientation);
+
+  if (shape.customSvg) {
+    const orig = orient(key2pos(shape.orig), state.orientation);
+    el = renderCustomSvg(shape.customSvg, orig, bounds);
+  } else if (shape.piece) el = renderPiece(state.drawable.pieces.baseUrl, orient(key2pos(shape.orig), state.orientation), shape.piece, bounds);else {
+    const orig = orient(key2pos(shape.orig), state.orientation);
 
     if (shape.dest) {
       let brush = brushes[shape.brush];
       if (shape.modifiers) brush = makeCustomBrush(brush, shape.modifiers);
-      el = renderArrow(brush, orig, orient(util.key2pos(shape.dest), state.orientation), current, arrowDests[shape.dest] > 1, bounds);
+      el = renderArrow(brush, orig, orient(key2pos(shape.dest), state.orientation), current, (arrowDests.get(shape.dest) || 0) > 1, bounds);
     } else el = renderCircle(brushes[shape.brush], orig, current, bounds);
   }
+
   el.setAttribute('cgHash', hash);
   return el;
 }
 
+function renderCustomSvg(customSvg, pos, bounds) {
+  const [x, y] = pos2user(pos, bounds); // 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,
+    viewBox: '0 0 100 100'
+  });
+  g.appendChild(svg);
+  svg.innerHTML = customSvg;
+  return g;
+}
+
 function renderCircle(brush, pos, current, bounds) {
-  const o = pos2px(pos, bounds),
-        widths = circleWidth(bounds),
-        radius = (bounds.width + bounds.height) / 32;
+  const o = pos2user(pos, bounds),
+        widths = circleWidth(),
+        radius = (bounds.width + bounds.height) / (4 * Math.max(bounds.width, bounds.height));
   return setAttributes(createElement('circle'), {
     stroke: brush.color,
     'stroke-width': widths[current ? 0 : 1],
@@ -3783,9 +3604,9 @@ function renderCircle(brush, pos, current, bounds) {
 }
 
 function renderArrow(brush, orig, dest, current, shorten, bounds) {
-  const m = arrowMargin(bounds, shorten && !current),
-        a = pos2px(orig, bounds),
-        b = pos2px(dest, bounds),
+  const m = arrowMargin(shorten && !current),
+        a = pos2user(orig, bounds),
+        b = pos2user(dest, bounds),
         dx = b[0] - a[0],
         dy = b[1] - a[1],
         angle = Math.atan2(dy, dx),
@@ -3793,7 +3614,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, bounds),
+    'stroke-width': lineWidth(brush, current),
     'stroke-linecap': 'round',
     'marker-end': 'url(#arrowhead-' + brush.key + ')',
     opacity: opacity(brush, current),
@@ -3805,16 +3626,17 @@ function renderArrow(brush, orig, dest, current, shorten, bounds) {
 }
 
 function renderPiece(baseUrl, pos, piece, bounds) {
-  const o = pos2px(pos, bounds),
-        size = bounds.width / 8 * (piece.scale || 1),
+  const o = pos2user(pos, bounds),
         name = piece.color[0] + (piece.role === 'knight' ? 'n' : piece.role[0]).toUpperCase();
   return setAttributes(createElement('image'), {
     className: `${piece.role} ${piece.color}`,
-    x: o[0] - size / 2,
-    y: o[1] - size / 2,
-    width: size,
-    height: size,
-    href: baseUrl + name + '.svg'
+    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]}`
   });
 }
 
@@ -3842,179 +3664,147 @@ function setAttributes(el, attrs) {
 }
 
 function orient(pos, color) {
-  return color === 'white' ? pos : [9 - pos[0], 9 - pos[1]];
+  return color === 'white' ? pos : [7 - pos[0], 7 - pos[1]];
 }
 
 function makeCustomBrush(base, modifiers) {
-  const brush = {
+  return {
     color: base.color,
     opacity: Math.round(base.opacity * 10) / 10,
-    lineWidth: Math.round(modifiers.lineWidth || base.lineWidth)
+    lineWidth: Math.round(modifiers.lineWidth || base.lineWidth),
+    key: [base.key, modifiers.lineWidth].filter(x => x).join('')
   };
-  brush.key = [base.key, modifiers.lineWidth].filter(x => x).join('');
-  return brush;
 }
 
-function circleWidth(bounds) {
-  const base = bounds.width / 512;
-  return [3 * base, 4 * base];
+function circleWidth() {
+  return [3 / 64, 4 / 64];
 }
 
-function lineWidth(brush, current, bounds) {
-  return (brush.lineWidth || 10) * (current ? 0.85 : 1) / 512 * bounds.width;
+function lineWidth(brush, current) {
+  return (brush.lineWidth || 10) * (current ? 0.85 : 1) / 64;
 }
 
 function opacity(brush, current) {
   return (brush.opacity || 1) * (current ? 0.9 : 1);
 }
 
-function arrowMargin(bounds, shorten) {
-  return (shorten ? 20 : 10) / 512 * bounds.width;
+function arrowMargin(shorten) {
+  return (shorten ? 20 : 10) / 64;
 }
 
-function pos2px(pos, bounds) {
-  return [(pos[0] - 0.5) * bounds.width / 8, (8.5 - pos[1]) * bounds.height / 8];
+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];
 }
-});
-
-var wrap_1 = createCommonjsModule(function (module, exports) {
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
 
+function renderWrap(element, s) {
+  // .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
+  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
+  // for a slight performance improvement! (avoids recomputing style)
 
-
-
-
-
-
-function wrap(element, s, relative) {
-  element.innerHTML = '';
   element.classList.add('cg-wrap');
 
-  for (const c of util.colors) element.classList.toggle('orientation-' + c, s.orientation === c);
+  for (const c of colors) element.classList.toggle('orientation-' + c, s.orientation === c);
 
   element.classList.toggle('manipulable', !s.viewOnly);
-  const helper = util.createEl('cg-helper');
-  element.appendChild(helper);
-  const container = util.createEl('cg-container');
-  helper.appendChild(container);
-  const board = util.createEl('cg-board');
+  const container = createEl('cg-container');
+  element.appendChild(container);
+  const board = createEl('cg-board');
   container.appendChild(board);
-  let svg$1;
-
-  if (s.drawable.visible && !relative) {
-    svg$1 = svg.createElement('svg');
-    svg$1.appendChild(svg.createElement('defs'));
-    container.appendChild(svg$1);
+  let svg;
+  let customSvg;
+
+  if (s.drawable.visible) {
+    svg = setAttributes(createElement('svg'), {
+      class: 'cg-shapes',
+      viewBox: '-4 -4 8 8',
+      preserveAspectRatio: 'xMidYMid slice'
+    });
+    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'
+    });
+    customSvg.appendChild(createElement('g'));
+    container.appendChild(svg);
+    container.appendChild(customSvg);
   }
 
   if (s.coordinates) {
     const orientClass = s.orientation === 'black' ? ' black' : '';
-    container.appendChild(renderCoords(types.ranks.map(r => r.toString()), 'ranks' + orientClass));
-    container.appendChild(renderCoords(types.files, 'files' + orientClass));
+    container.appendChild(renderCoords(ranks, 'ranks' + orientClass));
+    container.appendChild(renderCoords(files, 'files' + orientClass));
   }
 
   let ghost;
 
-  if (s.draggable.showGhost && !relative) {
-    ghost = util.createEl('piece', 'ghost');
-    util.setVisible(ghost, false);
+  if (s.draggable.showGhost) {
+    ghost = createEl('piece', 'ghost');
+    setVisible(ghost, false);
     container.appendChild(ghost);
   }
 
   return {
     board,
     container,
+    wrap: element,
     ghost,
-    svg: svg$1
+    svg,
+    customSvg
   };
 }
 
-exports.default = wrap;
-
 function renderCoords(elems, className) {
-  const el = util.createEl('coords', className);
+  const el = createEl('coords', className);
   let f;
 
   for (const elem of elems) {
-    f = util.createEl('coord');
+    f = createEl('coord');
     f.textContent = elem;
     el.appendChild(f);
   }
 
   return el;
 }
-});
-
-var drop_1 = createCommonjsModule(function (module, exports) {
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-
-
-
-
-
-
-function setDropMode(s, piece) {
-  s.dropmode = {
-    active: true,
-    piece
-  };
-  drag.cancel(s);
-}
-
-exports.setDropMode = setDropMode;
-
-function cancelDropMode(s) {
-  s.dropmode = {
-    active: false
-  };
-}
-
-exports.cancelDropMode = cancelDropMode;
 
 function drop(s, e) {
   if (!s.dropmode.active) return;
-  board.unsetPremove(s);
-  board.unsetPredrop(s);
+  unsetPremove(s);
+  unsetPredrop(s);
   const piece = s.dropmode.piece;
 
   if (piece) {
-    s.pieces.a0 = piece;
-    const position = util.eventPosition(e);
-    const dest = position && board.getKeyAtDomPos(position, board.whitePov(s), s.dom.bounds());
-    if (dest) board.dropNewPiece(s, 'a0', dest);
+    s.pieces.set('a0', piece);
+    const position = eventPosition(e);
+    const dest = position && getKeyAtDomPos(position, whitePov(s), s.dom.bounds());
+    if (dest) dropNewPiece(s, 'a0', dest);
   }
 
   s.dom.redraw();
 }
 
-exports.drop = drop;
-});
-
-var events = createCommonjsModule(function (module, exports) {
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-
-
-
+function bindBoard(s, onResize) {
+  const boardEl = s.dom.elements.board;
+  if ('ResizeObserver' in window) new ResizeObserver(onResize).observe(s.dom.elements.wrap);
+  if (s.viewOnly) return; // Cannot be passive, because we prevent touch scrolling and dragging of
+  // selected elements.
 
-
-
-
-
-function bindBoard(s, boundsUpdated) {
-  if (s.viewOnly) return;
-  const boardEl = s.dom.elements.board,
-        onStart = startDragOrDraw(s);
+  const onStart = startDragOrDraw(s);
   boardEl.addEventListener('touchstart', onStart, {
     passive: false
   });
@@ -4025,25 +3815,17 @@ function bindBoard(s, boundsUpdated) {
   if (s.disableContextMenu || s.drawable.enabled) {
     boardEl.addEventListener('contextmenu', e => e.preventDefault());
   }
+} // returns the unbind function
 
-  if (!s.dom.relative && s.resizable && 'ResizeObserver' in window) {
-    const observer = new window['ResizeObserver'](boundsUpdated);
-    observer.observe(boardEl);
-  }
-}
-
-exports.bindBoard = bindBoard;
+function bindDocument(s, onResize) {
+  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.
 
-function bindDocument(s, boundsUpdated) {
-  const unbinds = [];
-
-  if (!s.dom.relative && s.resizable && !('ResizeObserver' in window)) {
-    unbinds.push(unbindable(document.body, 'chessground.resize', boundsUpdated));
-  }
+  if (!('ResizeObserver' in window)) unbinds.push(unbindable(document.body, 'chessground.resize', onResize));
 
   if (!s.viewOnly) {
-    const onmove = dragOrDraw(s, drag.move, draw.move);
-    const onend = dragOrDraw(s, drag.end, draw.end);
+    const onmove = dragOrDraw(s, move$1, move);
+    const onend = dragOrDraw(s, end$1, end);
 
     for (const ev of ['touchmove', 'mousemove']) unbinds.push(unbindable(document, ev, onmove));
 
@@ -4063,8 +3845,6 @@ function bindDocument(s, boundsUpdated) {
   return () => unbinds.forEach(f => f());
 }
 
-exports.bindDocument = bindDocument;
-
 function unbindable(el, eventName, callback, options) {
   el.addEventListener(eventName, callback, options);
   return () => el.removeEventListener(eventName, callback, options);
@@ -4072,136 +3852,136 @@ function unbindable(el, eventName, callback, options) {
 
 function startDragOrDraw(s) {
   return e => {
-    if (s.draggable.current) drag.cancel(s);else if (s.drawable.current) draw.cancel(s);else if (e.shiftKey || util.isRightButton(e)) {
-      if (s.drawable.enabled) draw.start(s, e);
+    if (s.draggable.current) cancel$1(s);else if (s.drawable.current) cancel(s);else if (e.shiftKey || isRightButton(e)) {
+      if (s.drawable.enabled) start(s, e);
     } else if (!s.viewOnly) {
-      if (s.dropmode.active) drop_1.drop(s, e);else drag.start(s, e);
+      if (s.dropmode.active) drop(s, e);else start$1(s, e);
     }
   };
 }
 
 function dragOrDraw(s, withDrag, withDraw) {
   return e => {
-    if (e.shiftKey || util.isRightButton(e)) {
+    if (s.drawable.current) {
       if (s.drawable.enabled) withDraw(s, e);
     } else if (!s.viewOnly) withDrag(s, e);
   };
 }
-});
-
-var render_1 = createCommonjsModule(function (module, exports) {
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
 
+// in case of bugs, blame @veloce
 
-
-
-
-const util$1 = util;
-
-function render(s) {
-  const asWhite = board.whitePov(s),
-        posToTranslate = s.dom.relative ? util$1.posToTranslateRel : util$1.posToTranslateAbs(s.dom.bounds()),
-        translate = s.dom.relative ? util$1.translateRel : util$1.translateAbs,
+function render$1(s) {
+  const asWhite = whitePov(s),
+        posToTranslate$1 = posToTranslate(s.dom.bounds()),
         boardEl = s.dom.elements.board,
         pieces = s.pieces,
         curAnim = s.animation.current,
-        anims = curAnim ? curAnim.plan.anims : {},
-        fadings = curAnim ? curAnim.plan.fadings : {},
+        anims = curAnim ? curAnim.plan.anims : new Map(),
+        fadings = curAnim ? curAnim.plan.fadings : new Map(),
         curDrag = s.draggable.current,
         squares = computeSquareClasses(s),
-        samePieces = {},
-        sameSquares = {},
-        movedPieces = {},
-        movedSquares = {},
-        piecesKeys = Object.keys(pieces);
-  let k, p, el, pieceAtKey, elPieceName, anim, fading, pMvdset, pMvd, sMvdset, sMvd;
+        samePieces = new Set(),
+        sameSquares = new Set(),
+        movedPieces = new Map(),
+        movedSquares = new Map(); // by class name
+
+  let k, el, pieceAtKey, elPieceName, anim, fading, pMvdset, pMvd, sMvdset, sMvd; // walk over all board dom elements, apply animations and flag moved pieces
+
   el = boardEl.firstChild;
 
   while (el) {
     k = el.cgKey;
 
     if (isPieceNode(el)) {
-      pieceAtKey = pieces[k];
-      anim = anims[k];
-      fading = fadings[k];
-      elPieceName = el.cgPiece;
+      pieceAtKey = pieces.get(k);
+      anim = anims.get(k);
+      fading = fadings.get(k);
+      elPieceName = el.cgPiece; // if piece not being dragged anymore, remove dragging style
 
       if (el.cgDragging && (!curDrag || curDrag.orig !== k)) {
         el.classList.remove('dragging');
-        translate(el, posToTranslate(util.key2pos(k), asWhite));
+        translate(el, posToTranslate$1(key2pos(k), asWhite));
         el.cgDragging = false;
-      }
+      } // remove fading class if it still remains
+
 
       if (!fading && el.cgFading) {
         el.cgFading = false;
         el.classList.remove('fading');
-      }
+      } // there is now a piece at this dom key
+
 
       if (pieceAtKey) {
+        // continue animation if already animating and same piece
+        // (otherwise it could animate a captured piece)
         if (anim && el.cgAnimating && elPieceName === pieceNameOf(pieceAtKey)) {
-          const pos = util.key2pos(k);
+          const pos = key2pos(k);
           pos[0] += anim[2];
           pos[1] += anim[3];
           el.classList.add('anim');
-          translate(el, posToTranslate(pos, asWhite));
+          translate(el, posToTranslate$1(pos, asWhite));
         } else if (el.cgAnimating) {
           el.cgAnimating = false;
           el.classList.remove('anim');
-          translate(el, posToTranslate(util.key2pos(k), asWhite));
-          if (s.addPieceZIndex) el.style.zIndex = posZIndex(util.key2pos(k), asWhite);
-        }
+          translate(el, posToTranslate$1(key2pos(k), asWhite));
+          if (s.addPieceZIndex) el.style.zIndex = posZIndex(key2pos(k), asWhite);
+        } // same piece: flag as same
+
 
         if (elPieceName === pieceNameOf(pieceAtKey) && (!fading || !el.cgFading)) {
-          samePieces[k] = true;
-        } else {
-          if (fading && elPieceName === pieceNameOf(fading)) {
-            el.classList.add('fading');
-            el.cgFading = true;
-          } else {
-            if (movedPieces[elPieceName]) movedPieces[elPieceName].push(el);else movedPieces[elPieceName] = [el];
+          samePieces.add(k);
+        } // different piece: flag as moved unless it is a fading piece
+        else {
+            if (fading && elPieceName === pieceNameOf(fading)) {
+              el.classList.add('fading');
+              el.cgFading = true;
+            } else {
+              appendValue(movedPieces, elPieceName, el);
+            }
           }
+      } // no piece: flag as moved
+      else {
+          appendValue(movedPieces, elPieceName, el);
         }
-      } else {
-        if (movedPieces[elPieceName]) movedPieces[elPieceName].push(el);else movedPieces[elPieceName] = [el];
-      }
     } else if (isSquareNode(el)) {
       const cn = el.className;
-      if (squares[k] === cn) sameSquares[k] = true;else if (movedSquares[cn]) movedSquares[cn].push(el);else movedSquares[cn] = [el];
+      if (squares.get(k) === cn) sameSquares.add(k);else appendValue(movedSquares, cn, el);
     }
 
     el = el.nextSibling;
-  }
+  } // walk over all squares in current set, apply dom changes to moved squares
+  // or append new squares
+
 
-  for (const sk in squares) {
-    if (!sameSquares[sk]) {
-      sMvdset = movedSquares[squares[sk]];
+  for (const [sk, className] of squares) {
+    if (!sameSquares.has(sk)) {
+      sMvdset = movedSquares.get(className);
       sMvd = sMvdset && sMvdset.pop();
-      const translation = posToTranslate(util.key2pos(sk), asWhite);
+      const translation = posToTranslate$1(key2pos(sk), asWhite);
 
       if (sMvd) {
         sMvd.cgKey = sk;
         translate(sMvd, translation);
       } else {
-        const squareNode = util.createEl('square', squares[sk]);
+        const squareNode = createEl('square', className);
         squareNode.cgKey = sk;
         translate(squareNode, translation);
         boardEl.insertBefore(squareNode, boardEl.firstChild);
       }
     }
-  }
+  } // walk over all pieces in current set, apply dom changes to moved pieces
+  // or append new pieces
+
 
-  for (k of piecesKeys) {
-    p = pieces[k];
-    anim = anims[k];
+  for (const [k, p] of pieces) {
+    anim = anims.get(k);
 
-    if (!samePieces[k]) {
-      pMvdset = movedPieces[pieceNameOf(p)];
-      pMvd = pMvdset && pMvdset.pop();
+    if (!samePieces.has(k)) {
+      pMvdset = movedPieces.get(pieceNameOf(p));
+      pMvd = pMvdset && pMvdset.pop(); // a same piece was moved
 
       if (pMvd) {
+        // apply dom changes
         pMvd.cgKey = k;
 
         if (pMvd.cgFading) {
@@ -4209,7 +3989,7 @@ function render(s) {
           pMvd.cgFading = false;
         }
 
-        const pos = util.key2pos(k);
+        const pos = key2pos(k);
         if (s.addPieceZIndex) pMvd.style.zIndex = posZIndex(pos, asWhite);
 
         if (anim) {
@@ -4219,50 +3999,62 @@ function render(s) {
           pos[1] += anim[3];
         }
 
-        translate(pMvd, posToTranslate(pos, asWhite));
-      } else {
-        const pieceName = pieceNameOf(p),
-              pieceNode = util.createEl('piece', pieceName),
-              pos = util.key2pos(k);
-        pieceNode.cgPiece = pieceName;
-        pieceNode.cgKey = k;
+        translate(pMvd, posToTranslate$1(pos, asWhite));
+      } // no piece in moved obj: insert the new piece
+      // assumes the new piece is not being dragged
+      else {
+          const pieceName = pieceNameOf(p),
+                pieceNode = createEl('piece', pieceName),
+                pos = key2pos(k);
+          pieceNode.cgPiece = pieceName;
+          pieceNode.cgKey = k;
+
+          if (anim) {
+            pieceNode.cgAnimating = true;
+            pos[0] += anim[2];
+            pos[1] += anim[3];
+          }
 
-        if (anim) {
-          pieceNode.cgAnimating = true;
-          pos[0] += anim[2];
-          pos[1] += anim[3];
+          translate(pieceNode, posToTranslate$1(pos, asWhite));
+          if (s.addPieceZIndex) pieceNode.style.zIndex = posZIndex(pos, asWhite);
+          boardEl.appendChild(pieceNode);
         }
-
-        translate(pieceNode, posToTranslate(pos, asWhite));
-        if (s.addPieceZIndex) pieceNode.style.zIndex = posZIndex(pos, asWhite);
-        boardEl.appendChild(pieceNode);
-      }
     }
-  }
+  } // remove any element that remains in the moved sets
 
-  for (const i in movedPieces) removeNodes(s, movedPieces[i]);
 
-  for (const i in movedSquares) removeNodes(s, movedSquares[i]);
-}
+  for (const nodes of movedPieces.values()) removeNodes(s, nodes);
 
-exports.render = render;
-
-function updateBounds(s) {
-  if (s.dom.relative) return;
-  const asWhite = board.whitePov(s),
-        posToTranslate = util$1.posToTranslateAbs(s.dom.bounds());
+  for (const nodes of movedSquares.values()) removeNodes(s, nodes);
+}
+function renderResized(s) {
+  const asWhite = whitePov(s),
+        posToTranslate$1 = posToTranslate(s.dom.bounds());
   let el = s.dom.elements.board.firstChild;
 
   while (el) {
     if (isPieceNode(el) && !el.cgAnimating || isSquareNode(el)) {
-      util$1.translateAbs(el, posToTranslate(util.key2pos(el.cgKey), asWhite));
+      translate(el, posToTranslate$1(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();
 
-exports.updateBounds = updateBounds;
+  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';
@@ -4277,8 +4069,8 @@ function removeNodes(s, nodes) {
 }
 
 function posZIndex(pos, asWhite) {
-  let z = 2 + (pos[1] - 1) * 8 + (8 - pos[0]);
-  if (asWhite) z = 67 - z;
+  let z = 3 + pos[1] * 8 + (7 - pos[0]);
+  if (asWhite) z = 69 - z;
   return z + '';
 }
 
@@ -4287,7 +4079,9 @@ function pieceNameOf(piece) {
 }
 
 function computeSquareClasses(s) {
-  const squares = {};
+  var _a;
+
+  const squares = new Map();
   if (s.lastMove && s.highlight.lastMove) for (const k of s.lastMove) {
     addSquare(squares, k, 'last-move');
   }
@@ -4297,13 +4091,13 @@ function computeSquareClasses(s) {
     addSquare(squares, s.selected, 'selected');
 
     if (s.movable.showDests) {
-      const dests = s.movable.dests && s.movable.dests[s.selected];
+      const dests = (_a = s.movable.dests) === null || _a === void 0 ? void 0 : _a.get(s.selected);
       if (dests) for (const k of dests) {
-        addSquare(squares, k, 'move-dest' + (s.pieces[k] ? ' oc' : ''));
+        addSquare(squares, k, 'move-dest' + (s.pieces.has(k) ? ' oc' : ''));
       }
       const pDests = s.premovable.dests;
       if (pDests) for (const k of pDests) {
-        addSquare(squares, k, 'premove-dest' + (s.pieces[k] ? ' oc' : ''));
+        addSquare(squares, k, 'premove-dest' + (s.pieces.has(k) ? ' oc' : ''));
       }
     }
   }
@@ -4316,73 +4110,54 @@ function computeSquareClasses(s) {
 }
 
 function addSquare(squares, key, klass) {
-  if (squares[key]) squares[key] += ' ' + klass;else squares[key] = klass;
+  const classes = squares.get(key);
+  if (classes) squares.set(key, `${classes} ${klass}`);else squares.set(key, klass);
 }
-});
-
-var chessground = createCommonjsModule(function (module, exports) {
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
 
+function appendValue(map, key, value) {
+  const arr = map.get(key);
+  if (arr) arr.push(value);else map.set(key, [value]);
+}
 
-function Chessground(element, config$1) {
-  const state$1 = state.defaults();
-  config.configure(state$1, config$1 || {});
+function Chessground(element, config) {
+  const maybeState = defaults();
+  configure(maybeState, config || {});
 
   function redrawAll() {
-    const prevUnbind = state$1.dom && state$1.dom.unbind;
+    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 relative = state$1.viewOnly && !state$1.drawable.visible,
-          elements = wrap_1.default(element, state$1, relative),
-          bounds = util.memo(() => elements.board.getBoundingClientRect()),
+    const elements = renderWrap(element, maybeState),
+          bounds = memo(() => elements.board.getBoundingClientRect()),
           redrawNow = skipSvg => {
-      render_1.render(state$1);
-      if (!skipSvg && elements.svg) svg.renderSvg(state$1, elements.svg);
+      render$1(state);
+      if (!skipSvg && elements.svg) renderSvg(state, elements.svg, elements.customSvg);
     },
-          boundsUpdated = () => {
-      bounds.clear();
-      render_1.updateBounds(state$1);
-      if (elements.svg) svg.renderSvg(state$1, elements.svg);
+          onResize = () => {
+      updateBounds(state);
+      renderResized(state);
     };
 
-    state$1.dom = {
+    const state = maybeState;
+    state.dom = {
       elements,
       bounds,
       redraw: debounceRedraw(redrawNow),
       redrawNow,
-      unbind: prevUnbind,
-      relative
+      unbind: prevUnbind
     };
-    state$1.drawable.prevSvgHash = '';
+    state.drawable.prevSvgHash = '';
+    updateBounds(state);
     redrawNow(false);
-    events.bindBoard(state$1, boundsUpdated);
-    if (!prevUnbind) state$1.dom.unbind = events.bindDocument(state$1, boundsUpdated);
-    state$1.events.insert && state$1.events.insert(elements);
+    bindBoard(state, onResize);
+    if (!prevUnbind) state.dom.unbind = bindDocument(state, onResize);
+    state.events.insert && state.events.insert(elements);
+    return state;
   }
 
-  redrawAll();
-  return api.start(state$1, redrawAll);
+  return start$2(redrawAll(), redrawAll);
 }
 
-exports.Chessground = Chessground;
-
 function debounceRedraw(redrawNow) {
   let redrawing = false;
   return () => {
@@ -4394,14 +4169,13 @@ function debounceRedraw(redrawNow) {
     });
   };
 }
-});
 
-class Chessground extends React.Component {
+class Chessground$1 extends React.Component {
   buildConfigFromProps(props) {
     const config = {
       events: {}
     };
-    Object.keys(Chessground.types).forEach(k => {
+    Object.keys(Chessground$1.types).forEach(k => {
       const v = props[k];
 
       if (typeof v !== 'undefined') {
@@ -4418,7 +4192,7 @@ class Chessground extends React.Component {
   }
 
   componentDidMount() {
-    this.board = chessground.Chessground(this.el, this.buildConfigFromProps(this.props));
+    this.board = Chessground(this.el, this.buildConfigFromProps(this.props));
 
     if (this.props.shapes) {
       this.board.setShapes(this.props.shapes);
@@ -4426,7 +4200,7 @@ class Chessground extends React.Component {
   }
 
   componentDidUpdate() {
-    this.board = chessground.Chessground(this.el, this.buildConfigFromProps(this.props));
+    this.board = Chessground(this.el, this.buildConfigFromProps(this.props));
 
     if (this.props.shapes) {
       this.board.setShapes(this.props.shapes);
@@ -4454,7 +4228,7 @@ class Chessground extends React.Component {
 
 }
 
-_defineProperty(Chessground, "types", {
+_defineProperty(Chessground$1, "types", {
   width: propTypes.oneOfType([propTypes.string, propTypes.number]),
   height: propTypes.oneOfType([propTypes.string, propTypes.number]),
   fen: propTypes.string,
@@ -4484,7 +4258,7 @@ _defineProperty(Chessground, "types", {
   drawable: propTypes.object
 });
 
-_defineProperty(Chessground, "defaultProps", {
+_defineProperty(Chessground$1, "defaultProps", {
   coordinates: false,
   resizable: true,
   hightlight: {
@@ -4534,13 +4308,16 @@ const audio = sound => {
  * @param {*} chess
  */
 const toDests = chess => {
-  const dests = {};
+  const dests = new Map();
   chess.SQUARES.forEach(s => {
     const ms = chess.moves({
       square: s,
       verbose: true
     });
-    if (ms.length) dests[s] = ms.map(m => m.to);
+
+    if (ms.length) {
+      dests.set(s, ms.map(m => m.to));
+    }
   });
   const color = chess.turn() === 'w' ? 'white' : 'black';
   return {
@@ -6571,18 +6348,21 @@ var Chess = function (fen) {
 exports.Chess = Chess;
 });
 
-const fen$1 = {
+const fen = {
   initial: 'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1',
   empty: '8/8/8/8/8/8/8/8 w - - 0 1'
 };
-const initial = fen$1.initial;
+const initial$1 = fen.initial;
 
 const useChess = props => {
-  const [fen, setFen] = useState(props.fen || initial);
+  const [fen, setFen] = useState(props.fen || initial$1);
   const [chess$1] = useState(new chess.Chess(fen));
   const [lastMove, setLastMove] = useState([]);
   const turnColor = chess$1.turn() === 'w' ? 'white' : 'black';
   const [orientation] = useState(props.orientation || turnColor);
+  const [sideToMove] = useState(turnColor);
+  const autoQueen = props.options && props.options.autoQueen;
+  const promotion = autoQueen && turnColor !== sideToMove ? 'q' : '';
 
   const onMove = (from, to, promotion) => {
     const move = chess$1.move({
@@ -6595,8 +6375,14 @@ const useChess = props => {
     return move;
   };
 
-  const onPromote = promotion => {
-    return onMove(lastMove[0], lastMove[1], promotion);
+  const onPromote = async promotion => {
+    const move = onMove(lastMove[0], lastMove[1], promotion);
+
+    if (typeof props.onMove === 'function') {
+      await props.onMove(chess$1);
+    }
+
+    return move;
   };
 
   return {
@@ -6605,6 +6391,7 @@ const useChess = props => {
     turnColor,
     lastMove,
     orientation,
+    promotion,
     onMove,
     onPromote
   };
@@ -6668,7 +6455,61 @@ const Promote = ({
   })));
 };
 
-const Chessboard = props => {
+const cgProps = props => {
+  const cgProps = {};
+
+  if (props.viewOnly) {
+    cgProps.draggable = false;
+    cgProps.movable = {
+      free: false
+    };
+    cgProps.drawable = {
+      enabled: false
+    };
+  }
+
+  if (props.readOnly) {
+    cgProps.draggable = false;
+    cgProps.movable = {
+      free: false
+    };
+    cgProps.drawable = {
+      enabled: false
+    };
+    cgProps.coordinates = false;
+  } // normalize orientation for Chessground
+
+
+  if (props.orientation) {
+    cgProps.orientation = props.orientation;
+
+    if (cgProps.orientation === 'w') {
+      cgProps.orientation = 'white';
+    }
+
+    if (cgProps.orientation === 'b') {
+      cgProps.orientation = 'black';
+    }
+  }
+
+  if (props.options && props.options.shapes === false) {
+    cgProps.drawable = {
+      enabled: false
+    };
+  }
+
+  if (props.reply && props.reply.from && props.reply.to) {
+    cgProps.onMove = () => {};
+  }
+
+  if (props.shapes) {
+    cgProps.shapes = props.shapes;
+  }
+
+  return cgProps;
+};
+
+const Chessboard = (props, ref) => {
   const {
     theme
   } = useChessground();
@@ -6683,19 +6524,21 @@ const Chessboard = props => {
     turnColor,
     lastMove,
     orientation,
+    promotion,
     onMove,
     onPromote
   } = useChess(props);
 
-  const handleMove = (from, to) => {
-    const move = onMove(from, to);
+  const handleMove = async (from, to) => {
+    const move = onMove(from, to, promotion);
 
     if (!move) {
       show();
-    }
+    } // pass the chess object to callback function
+
 
     if (typeof props.onMove === 'function') {
-      props.onMove(from, to);
+      await props.onMove(chess);
     }
 
     if (theme.playSounds) {
@@ -6703,31 +6546,15 @@ const Chessboard = props => {
     }
   };
 
-  const cgProps = {};
-
-  if (props.viewOnly) {
-    cgProps.draggable = false;
-    cgProps.movable = {
-      free: false
-    };
-  } // normalize orientation for Chessground
-
-
-  if (props.orientation) {
-    cgProps.orientation = props.orientation;
-
-    if (cgProps.orientation === 'w') {
-      cgProps.orientation = 'white';
-    }
-
-    if (cgProps.orientation === 'b') {
-      cgProps.orientation = 'black';
-    }
+  if (props.reply && props.reply.from && props.reply.to) {
+    const cg = ref.current.board;
+    cg.move(props.reply.from, props.reply.to);
   }
 
   return /*#__PURE__*/React.createElement("div", {
     className: mergeClassNames('chessground', theme.highlight && 'highlight', theme.board, theme.pieces)
-  }, /*#__PURE__*/React.createElement(Chessground, _extends({
+  }, /*#__PURE__*/React.createElement(Chessground$1, _extends({
+    ref: ref,
     coordinates: theme.coordinates,
     onMove: handleMove,
     fen: fen,
@@ -6735,7 +6562,7 @@ const Chessboard = props => {
     lastMove: lastMove,
     orientation: orientation,
     movable: toDests(chess)
-  }, cgProps)), /*#__PURE__*/React.createElement(Promote, {
+  }, cgProps(props))), /*#__PURE__*/React.createElement(Promote, {
     isOpen: isOpen,
     hide: hide,
     color: turnColor,
@@ -6743,6 +6570,8 @@ const Chessboard = props => {
   }));
 };
 
+var Chessboard$1 = /*#__PURE__*/forwardRef(Chessboard);
+
 const getOrientation = props => {
   try {
     if (props.orientation) {
@@ -6772,9 +6601,10 @@ const useOrientation = props => {
   return [orientation, flip];
 };
 
-const NextChessground = props => {
+const NextChessground = (props, ref) => {
   const [theme, setTheme] = useState(themable());
   const [orientation, flip] = useOrientation(props);
+  const showSettings = useMemo(() => !(props.readOnly === true), []);
   return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
     value: {
       theme,
@@ -6782,15 +6612,18 @@ const NextChessground = props => {
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: "next-chessground"
-  }, /*#__PURE__*/React.createElement(Chessboard, _extends({}, props, {
+  }, /*#__PURE__*/React.createElement(Chessboard$1, _extends({}, props, {
+    ref: ref,
     orientation: orientation
-  })), /*#__PURE__*/React.createElement("div", {
+  })), showSettings && /*#__PURE__*/React.createElement("div", {
     className: "text-gray-400 flex flex-row-reverse gap-2 py-1.5"
   }, /*#__PURE__*/React.createElement(Settings, null), /*#__PURE__*/React.createElement(Flip, {
     onClick: flip
   }))));
 };
 
+var NextChessground$1 = /*#__PURE__*/forwardRef(NextChessground);
+
 function styleInject(css, ref) {
   if (ref === void 0) ref = {};
   var insertAt = ref.insertAt;
@@ -6844,5 +6677,5 @@ styleInject(css_248z$6);
 var css_248z$7 = ".flex {\n  display: flex;\n}\n.flex-col {\n  flex-direction: column;\n}\n.flex-row-reverse {\n  flex-direction: row-reverse;\n}\n.grid {\n  display: grid;\n}\n.grid-cols-2 {\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.gap-2 {\n  gap: 0.5rem;\n}\n.gap-3 {\n  gap: 0.75rem;\n}\n.w-full {\n  width: 100%;\n}\n.items-center {\n  align-items: center;\n}\n.justify-center {\n  justify-content: center;\n}\n.py-1\\.5 {\n  padding-top: 0.375rem;\n  padding-bottom: 0.375rem;\n}\n.px-2 {\n  padding-left: 0.25rem;\n  padding-right: 0.25rem;\n}\n.cursor-pointer {\n  cursor: pointer;\n}\n.cursor-resize {\n  cursor: nesw-resize;\n}\n.outline-none,\n.outline-none:focus {\n  outline: none;\n}\n.text-sm {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.text-gray-400 {\n  color: rgba(156, 163, 175);\n}\n.text-gray-800 {\n  color: rgba(31, 41, 55);\n}\n.bg-white {\n  background-color: #fff;\n}\n.border {\n  border-width: 1px;\n  border-style: solid;\n}\n.border-gray-300 {\n  border-color: rgba(209, 213, 219);\n}\n.rounded {\n  border-radius: 0.25rem;\n}\n";
 styleInject(css_248z$7);
 
-export default NextChessground;
-export { NextChessground, useChess, useChessground };
+export default NextChessground$1;
+export { NextChessground$1 as NextChessground, fen, useChess, useChessground };