kokopu-react 1.11.0 → 2.0.0

package/dist/lib/Chessboard.js

@@ -1,1276 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react = _interopRequireDefault(require("react"));
-var _kokopu = require("kokopu");
-var _colorsets2 = _interopRequireDefault(require("./impl/colorsets"));
-var _piecesets2 = _interopRequireDefault(require("./impl/piecesets"));
-var _ArrowTip = _interopRequireDefault(require("./impl/ArrowTip"));
-var _DraggableHandle = _interopRequireDefault(require("./impl/DraggableHandle"));
-var _Motion = _interopRequireDefault(require("./impl/Motion"));
-var _TextSymbol = _interopRequireDefault(require("./impl/TextSymbol"));
-var _ErrorBox = _interopRequireDefault(require("./ErrorBox"));
-var _i18n = _interopRequireDefault(require("./i18n"));
-var _markers = require("./markers");
-var _util = require("./impl/util");
-require("./css/chessboard.css");
-require("./css/arrow.css");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-var TURN_FLAG_SPACING_FACTOR = 0.1;
-var RANK_COORDINATE_WIDTH_FACTOR = 1;
-var FILE_COORDINATE_HEIGHT_FACTOR = 1.4;
-var HOVER_MARKER_THICKNESS_FACTOR = 0.1;
-var STROKE_THICKNESS_FACTOR = 0.15;
-var ARROW_TIP_OFFSET_FACTOR = 0.3;
-var MOTION_DURATION = 150;
-var RANK_LABELS = '12345678';
-var FILE_LABELS = 'abcdefgh';
-
-/**
- * SVG image representing a chessboard diagram. Optionally, the user may interact with the board (move pieces, click on squares...).
- * Annotations such as square markers or arrows can also be added to the board.
- */
-var Chessboard = /*#__PURE__*/function (_React$Component) {
-  _inherits(Chessboard, _React$Component);
-  var _super = _createSuper(Chessboard);
-  function Chessboard(props) {
-    var _this;
-    _classCallCheck(this, Chessboard);
-    _this = _super.call(this, props);
-    _this.state = {
-      inhibitedSquare: '-',
-      draggedSquare: '-',
-      hoveredSquare: '-',
-      promotionDrawer: false,
-      windowWidth: window.innerWidth
-    };
-    _this.arrowTipIdSuffix = (0, _util.generateRandomId)();
-    return _this;
-  }
-  _createClass(Chessboard, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this2 = this;
-      this.windowResizeListener = function () {
-        return _this2.handleWindowResize();
-      };
-      window.addEventListener('resize', this.windowResizeListener);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      if (this.windowResizeListener) {
-        window.removeEventListener('resize', this.windowResizeListener);
-        this.windowResizeListener = null;
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this3 = this;
-      // Compute the current position.
-      var info = this.getPositionAndMoveInfo();
-      if (info.positionError) {
-        return /*#__PURE__*/_react["default"].createElement(_ErrorBox["default"], {
-          title: _i18n["default"].INVALID_FEN_ERROR_TITLE,
-          message: info.message
-        });
-      } else if (info.moveError) {
-        return /*#__PURE__*/_react["default"].createElement(_ErrorBox["default"], {
-          title: _i18n["default"].INVALID_NOTATION_ERROR_TITLE,
-          message: info.message
-        });
-      }
-      var position = info.position,
-        move = info.move,
-        positionBefore = info.positionBefore;
-
-      // Compute the attributes.
-      var squareSize = this.getSquareSize();
-      var coordinateVisible = this.isCoordinateVisible();
-      var fontSize = computeCoordinateFontSize(squareSize);
-      var colorset = _colorsets2["default"][this.props.colorset];
-      var pieceset = _piecesets2["default"][this.props.pieceset];
-      if (isNaN(squareSize) || !colorset || !pieceset) {
-        return undefined;
-      }
-
-      // Render the squares.
-      var squares = [];
-      (0, _kokopu.forEachSquare)(function (sq) {
-        return squares.push(_this3.renderSquare(squareSize, colorset, sq));
-      });
-
-      // Render coordinates.
-      var rankCoordinates = [];
-      var fileCoordinates = [];
-      if (coordinateVisible) {
-        for (var c = 0; c < 8; ++c) {
-          rankCoordinates.push(this.renderRankCoordinate(squareSize, fontSize, c));
-          fileCoordinates.push(this.renderFileCoordinate(squareSize, fontSize, c));
-        }
-      }
-
-      // Render the whole canvas.
-      var xmin = coordinateVisible ? Math.round(-RANK_COORDINATE_WIDTH_FACTOR * fontSize) : 0;
-      var ymin = 0;
-      var xmax = 9 * squareSize + Math.round(TURN_FLAG_SPACING_FACTOR * squareSize);
-      var ymax = 8 * squareSize + (coordinateVisible ? Math.round(FILE_COORDINATE_HEIGHT_FACTOR * fontSize) : 0);
-      var viewBox = "".concat(xmin, " ").concat(ymin, " ").concat(xmax - xmin, " ").concat(ymax - ymin);
-      return /*#__PURE__*/_react["default"].createElement("svg", {
-        className: "kokopu-chessboard",
-        viewBox: viewBox,
-        width: xmax - xmin,
-        height: ymax - ymin
-      }, /*#__PURE__*/_react["default"].createElement("defs", null, this.renderArrowTip(colorset, 'b'), this.renderArrowTip(colorset, 'g'), this.renderArrowTip(colorset, 'r'), this.renderArrowTip(colorset, 'y')), squares, rankCoordinates, fileCoordinates, this.renderBoardContent(position, positionBefore, move, squareSize, colorset, pieceset));
-    }
-  }, {
-    key: "renderBoardContent",
-    value: function renderBoardContent(position, positionBefore, move, squareSize, colorset, pieceset) {
-      var _this4 = this;
-      if (move && this.props.animated) {
-        var key = positionBefore.variant() + '|' + positionBefore.fen() + '|' + move.toString();
-        return /*#__PURE__*/_react["default"].createElement(_Motion["default"], {
-          key: key,
-          duration: MOTION_DURATION
-        }, function (motionCursor) {
-          return motionCursor === 1 ? _this4.renderBoardContentStill(position, move, squareSize, colorset, pieceset) : _this4.renderBoardContentAnimated(positionBefore, move, motionCursor, squareSize, colorset, pieceset);
-        });
-      } else {
-        return this.renderBoardContentStill(position, move, squareSize, colorset, pieceset);
-      }
-    }
-
-    /**
-     * Render the board content during the animation.
-     */
-  }, {
-    key: "renderBoardContentAnimated",
-    value: function renderBoardContentAnimated(positionBefore, move, motionCursor, squareSize, colorset, pieceset) {
-      var _this5 = this;
-      var pieces = [];
-      (0, _kokopu.forEachSquare)(function (sq) {
-        return pieces.push(_this5.renderPieceAnimated(positionBefore, move, motionCursor, squareSize, pieceset, sq));
-      });
-      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, pieces, this.renderMoveArrow(move, motionCursor, squareSize, colorset), this.renderTurnFlag((0, _kokopu.oppositeColor)(positionBefore.turn()), squareSize, pieceset));
-    }
-
-    /**
-     * Render the board content when the animation has been completed (or if there is no animation).
-     */
-  }, {
-    key: "renderBoardContentStill",
-    value: function renderBoardContentStill(position, move, squareSize, colorset, pieceset) {
-      var _this6 = this;
-      // Compute the annotations.
-      var sqm = parseMarkers(this.props.squareMarkers, _markers.parseSquareMarkers, _util.isValidSquare, _util.isValidColor);
-      var txtm = parseMarkers(this.props.textMarkers, _markers.parseTextMarkers, _util.isValidSquare, function (value) {
-        return value && (0, _util.isValidSymbol)(value.symbol) && (0, _util.isValidColor)(value.color);
-      });
-      var arm = parseMarkers(this.props.arrowMarkers, _markers.parseArrowMarkers, _util.isValidVector, _util.isValidColor);
-
-      // Render the square-related objects.
-      var pieces = [];
-      var handles = [];
-      (0, _kokopu.forEachSquare)(function (sq) {
-        pieces.push(_this6.renderPiece(position, squareSize, pieceset, sq));
-        if (_this6.props.interactionMode) {
-          handles.push(_this6.renderSquareHandle(position, squareSize, sq));
-        }
-      });
-      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, this.renderSquareMarkers(sqm, squareSize, colorset), this.renderHoveredSquare(squareSize, colorset), pieces, this.renderTextMarkers(txtm, squareSize, colorset), this.renderArrowMarkers(arm, squareSize, colorset), this.renderMoveArrow(move, 1, squareSize, colorset), handles, this.renderPromotionDrawer(position, squareSize, colorset, pieceset), this.renderDraggedPiece(position, squareSize, pieceset), this.renderDraggedArrow(squareSize, colorset), this.renderTurnFlag(position.turn(), squareSize, pieceset));
-    }
-  }, {
-    key: "renderSquare",
-    value: function renderSquare(squareSize, colorset, sq) {
-      var _this$getSquareCoordi = this.getSquareCoordinates(squareSize, sq),
-        x = _this$getSquareCoordi.x,
-        y = _this$getSquareCoordi.y;
-      return /*#__PURE__*/_react["default"].createElement("rect", {
-        key: sq,
-        x: x,
-        y: y,
-        width: squareSize,
-        height: squareSize,
-        fill: colorset[(0, _kokopu.squareColor)(sq)]
-      });
-    }
-  }, {
-    key: "renderHoveredSquare",
-    value: function renderHoveredSquare(squareSize, colorset) {
-      if (this.state.hoveredSquare === '-') {
-        return undefined;
-      }
-      var _this$getSquareCoordi2 = this.getSquareCoordinates(squareSize, this.state.hoveredSquare),
-        x = _this$getSquareCoordi2.x,
-        y = _this$getSquareCoordi2.y;
-      var thickness = Math.max(2, Math.round(HOVER_MARKER_THICKNESS_FACTOR * squareSize));
-      var size = squareSize - thickness;
-      var color = this.isEditArrowModeEnabled() ? this.props.editedArrowColor : this.props.moveArrowColor;
-      return /*#__PURE__*/_react["default"].createElement("rect", {
-        className: "kokopu-hoveredSquare",
-        x: x + thickness / 2,
-        y: y + thickness / 2,
-        width: size,
-        height: size,
-        stroke: colorset['c' + color],
-        strokeWidth: thickness
-      });
-    }
-  }, {
-    key: "renderPiece",
-    value: function renderPiece(position, squareSize, pieceset, sq) {
-      var cp = position.square(sq);
-      if (cp === '-' || this.state.inhibitedSquare === sq) {
-        return undefined;
-      }
-      var _this$getSquareCoordi3 = this.getSquareCoordinates(squareSize, sq),
-        x = _this$getSquareCoordi3.x,
-        y = _this$getSquareCoordi3.y;
-      return /*#__PURE__*/_react["default"].createElement("image", {
-        key: 'piece-' + sq,
-        x: x,
-        y: y,
-        width: squareSize,
-        height: squareSize,
-        href: pieceset[cp]
-      });
-    }
-  }, {
-    key: "renderPieceAnimated",
-    value: function renderPieceAnimated(positionBefore, move, motionCursor, squareSize, pieceset, sq) {
-      var cp = positionBefore.square(sq);
-      if (cp === '-' || move.to() === sq || move.isEnPassant() && move.enPassantSquare() === sq) {
-        return undefined;
-      }
-      var _this$getSquareCoordi4 = this.getSquareCoordinates(squareSize, sq),
-        x = _this$getSquareCoordi4.x,
-        y = _this$getSquareCoordi4.y;
-      if (sq === move.from()) {
-        var _this$getSquareCoordi5 = this.getSquareCoordinates(squareSize, move.to()),
-          xTo = _this$getSquareCoordi5.x,
-          yTo = _this$getSquareCoordi5.y;
-        x = xTo * motionCursor + x * (1 - motionCursor);
-        y = yTo * motionCursor + y * (1 - motionCursor);
-        if (move.isPromotion() && motionCursor > 0.8) {
-          cp = move.coloredPromotion();
-        }
-      } else if (move.isCastling() && sq === move.rookFrom()) {
-        var _this$getSquareCoordi6 = this.getSquareCoordinates(squareSize, move.rookTo()),
-          _xTo = _this$getSquareCoordi6.x,
-          _yTo = _this$getSquareCoordi6.y;
-        x = _xTo * motionCursor + x * (1 - motionCursor);
-        y = _yTo * motionCursor + y * (1 - motionCursor);
-      }
-      return /*#__PURE__*/_react["default"].createElement("image", {
-        key: 'piece-' + sq,
-        x: x,
-        y: y,
-        width: squareSize,
-        height: squareSize,
-        href: pieceset[cp]
-      });
-    }
-  }, {
-    key: "renderDraggedPiece",
-    value: function renderDraggedPiece(position, squareSize, pieceset) {
-      if (!(this.isMovePieceModeEnabled() || this.isPlayMoveModeEnabled()) || this.state.draggedSquare === '-') {
-        return undefined;
-      }
-      var _this$getSquareCoordi7 = this.getSquareCoordinates(squareSize, this.state.draggedSquare),
-        x = _this$getSquareCoordi7.x,
-        y = _this$getSquareCoordi7.y;
-      x = Math.min(Math.max(x + this.state.dragPosition.x, 0), 7 * squareSize);
-      y = Math.min(Math.max(y + this.state.dragPosition.y, 0), 7 * squareSize);
-      var cp = position.square(this.state.draggedSquare);
-      return /*#__PURE__*/_react["default"].createElement("image", {
-        className: "kokopu-pieceDraggable kokopu-dragging",
-        x: x,
-        y: y,
-        width: squareSize,
-        height: squareSize,
-        href: pieceset[cp]
-      });
-    }
-  }, {
-    key: "renderDraggedArrow",
-    value: function renderDraggedArrow(squareSize, colorset) {
-      if (!this.isEditArrowModeEnabled() || this.state.draggedSquare === '-') {
-        return undefined;
-      }
-      var strokeWidth = squareSize * STROKE_THICKNESS_FACTOR;
-      var arrowTipId = this.getArrowTipId(this.props.editedArrowColor);
-      var _this$getSquareCoordi8 = this.getSquareCoordinates(squareSize, this.state.draggedSquare),
-        x = _this$getSquareCoordi8.x,
-        y = _this$getSquareCoordi8.y;
-      var xFrom = x + squareSize / 2;
-      var yFrom = y + squareSize / 2;
-      var xTo = Math.min(Math.max(x + this.state.dragPosition.x + this.state.cursorOffset.x, squareSize / 2), 15 * squareSize / 2);
-      var yTo = Math.min(Math.max(y + this.state.dragPosition.y + this.state.cursorOffset.y, squareSize / 2), 15 * squareSize / 2);
-      return /*#__PURE__*/_react["default"].createElement("line", {
-        className: "kokopu-annotation kokopu-arrow kokopu-arrowDraggable kokopu-dragging",
-        x1: xFrom,
-        y1: yFrom,
-        x2: xTo,
-        y2: yTo,
-        stroke: colorset['c' + this.props.editedArrowColor],
-        strokeWidth: strokeWidth,
-        markerEnd: "url(#".concat(arrowTipId, ")")
-      });
-    }
-  }, {
-    key: "renderPromotionDrawer",
-    value: function renderPromotionDrawer(position, squareSize, colorset, pieceset) {
-      var _this7 = this;
-      if (!this.state.promotionDrawer) {
-        return undefined;
-      }
-      var _this$getSquareCoordi9 = this.getSquareCoordinates(squareSize, this.state.promotionDrawer.origin),
-        x = _this$getSquareCoordi9.x,
-        y = _this$getSquareCoordi9.y;
-      var inverted = position.turn() === (this.props.flipped ? 'w' : 'b'); // false==top-to-bottom true==bottom-to-top
-      var y0 = inverted ? y - squareSize * (this.state.promotionDrawer.buttons.length - 1) : y;
-      var buttons = this.state.promotionDrawer.buttons.map(function (p, i) {
-        var cp = position.turn() + p;
-        return /*#__PURE__*/_react["default"].createElement("image", {
-          key: 'drawer-piece-' + p,
-          className: "kokopu-clickable",
-          x: x,
-          y: y + i * (inverted ? -squareSize : squareSize),
-          width: squareSize,
-          height: squareSize,
-          href: pieceset[cp],
-          onClick: function onClick() {
-            return _this7.handleDrawerButtonClicked(p);
-          }
-        });
-      });
-      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("rect", {
-        className: "kokopu-handle",
-        x: 0,
-        y: 0,
-        width: squareSize * 8,
-        height: squareSize * 8,
-        onClick: function onClick() {
-          return _this7.handleDrawerCancelButtonClicked();
-        }
-      }), /*#__PURE__*/_react["default"].createElement("rect", {
-        x: x,
-        y: y0,
-        width: squareSize,
-        height: squareSize * this.state.promotionDrawer.buttons.length,
-        fill: colorset.b
-      }), /*#__PURE__*/_react["default"].createElement("rect", {
-        x: x,
-        y: y0,
-        width: squareSize,
-        height: squareSize * this.state.promotionDrawer.buttons.length,
-        className: "kokopu-drawerMask",
-        fill: colorset.w
-      }), buttons);
-    }
-  }, {
-    key: "renderSquareHandle",
-    value: function renderSquareHandle(position, squareSize, sq) {
-      var _this8 = this;
-      var _this$getSquareCoordi10 = this.getSquareCoordinates(squareSize, sq),
-        x = _this$getSquareCoordi10.x,
-        y = _this$getSquareCoordi10.y;
-      var dragEnabledForMovePieces = this.isMovePieceModeEnabled() && position.square(sq) !== '-';
-      var dragEnabledForEditArrows = this.isEditArrowModeEnabled();
-      var dragEnabledForPlayMoves = this.isPlayMoveModeEnabled() && position.isLegal() && position.square(sq).startsWith(position.turn()) && !this.state.promotionDrawer;
-      if (dragEnabledForMovePieces || dragEnabledForEditArrows || dragEnabledForPlayMoves) {
-        return /*#__PURE__*/_react["default"].createElement(_DraggableHandle["default"], {
-          key: 'handle-' + sq,
-          x: x,
-          y: y,
-          width: squareSize,
-          height: squareSize,
-          isArrowHandle: this.isEditArrowModeEnabled(),
-          onDragStart: function onDragStart(x0, y0) {
-            return _this8.handleDragStart(sq, x0, y0);
-          },
-          onDrag: function onDrag(dx, dy) {
-            return _this8.handleDrag(sq, dx, dy);
-          },
-          onDragStop: function onDragStop(dx, dy) {
-            return _this8.handleDragStop(sq, dx, dy);
-          },
-          onDragCanceled: function onDragCanceled() {
-            return _this8.handleDragCanceled();
-          }
-        });
-      } else if (this.props.interactionMode === 'clickSquares') {
-        return /*#__PURE__*/_react["default"].createElement("rect", {
-          key: 'handle-' + sq,
-          className: "kokopu-handle kokopu-clickable",
-          x: x,
-          y: y,
-          width: squareSize,
-          height: squareSize,
-          onClick: function onClick() {
-            return _this8.handleSquareClicked(sq);
-          }
-        });
-      } else {
-        return undefined;
-      }
-    }
-  }, {
-    key: "renderSquareMarkers",
-    value: function renderSquareMarkers(sqm, squareSize, colorset) {
-      var _this9 = this;
-      var result = [];
-      Object.entries(sqm).forEach(function (_ref) {
-        var _ref2 = _slicedToArray(_ref, 2),
-          sq = _ref2[0],
-          color = _ref2[1];
-        var _this9$getSquareCoord = _this9.getSquareCoordinates(squareSize, sq),
-          x = _this9$getSquareCoord.x,
-          y = _this9$getSquareCoord.y;
-        result.push( /*#__PURE__*/_react["default"].createElement("rect", {
-          key: 'sqm-' + sq,
-          className: "kokopu-annotation",
-          x: x,
-          y: y,
-          width: squareSize,
-          height: squareSize,
-          fill: colorset['c' + color]
-        }));
-      });
-      return result;
-    }
-  }, {
-    key: "renderTextMarkers",
-    value: function renderTextMarkers(txtm, squareSize, colorset) {
-      var _this10 = this;
-      var result = [];
-      Object.entries(txtm).forEach(function (_ref3) {
-        var _ref4 = _slicedToArray(_ref3, 2),
-          sq = _ref4[0],
-          value = _ref4[1];
-        var _this10$getSquareCoor = _this10.getSquareCoordinates(squareSize, sq),
-          x = _this10$getSquareCoor.x,
-          y = _this10$getSquareCoor.y;
-        x += squareSize / 2;
-        y += squareSize / 2;
-        result.push( /*#__PURE__*/_react["default"].createElement("g", {
-          key: 'txtm-' + sq,
-          className: "kokopu-annotation"
-        }, /*#__PURE__*/_react["default"].createElement(_TextSymbol["default"], {
-          x: x,
-          y: y,
-          size: squareSize,
-          symbol: value.symbol,
-          color: colorset['c' + value.color]
-        })));
-      });
-      return result;
-    }
-  }, {
-    key: "renderArrowMarkers",
-    value: function renderArrowMarkers(arm, squareSize, colorset) {
-      var _this11 = this;
-      var result = [];
-      var strokeWidth = squareSize * STROKE_THICKNESS_FACTOR;
-      Object.entries(arm).forEach(function (_ref5) {
-        var _ref6 = _slicedToArray(_ref5, 2),
-          vect = _ref6[0],
-          color = _ref6[1];
-        var from = vect.substring(0, 2);
-        var to = vect.substring(2, 4);
-        if (from === to) {
-          return;
-        }
-        var _this11$getSquareCoor = _this11.getSquareCoordinates(squareSize, from),
-          xFrom = _this11$getSquareCoor.x,
-          yFrom = _this11$getSquareCoor.y;
-        var _this11$getSquareCoor2 = _this11.getSquareCoordinates(squareSize, to),
-          xTo = _this11$getSquareCoor2.x,
-          yTo = _this11$getSquareCoor2.y;
-        xFrom += squareSize / 2;
-        yFrom += squareSize / 2;
-        xTo += squareSize / 2;
-        yTo += squareSize / 2;
-        xTo += Math.sign(xFrom - xTo) * ARROW_TIP_OFFSET_FACTOR * squareSize;
-        yTo += Math.sign(yFrom - yTo) * ARROW_TIP_OFFSET_FACTOR * squareSize;
-        var arrowTipId = _this11.getArrowTipId(color);
-        result.push( /*#__PURE__*/_react["default"].createElement("line", {
-          key: 'arm-' + vect,
-          className: "kokopu-annotation kokopu-arrow",
-          x1: xFrom,
-          y1: yFrom,
-          x2: xTo,
-          y2: yTo,
-          stroke: colorset['c' + color],
-          strokeWidth: strokeWidth,
-          markerEnd: "url(#".concat(arrowTipId, ")")
-        }));
-      });
-      return result;
-    }
-  }, {
-    key: "renderMoveArrow",
-    value: function renderMoveArrow(move, motionCursor, squareSize, colorset) {
-      if (!move || motionCursor < 0.1 || !this.props.moveArrowVisible || move.from() === move.to()) {
-        return undefined;
-      }
-      var _this$getSquareCoordi11 = this.getSquareCoordinates(squareSize, move.from()),
-        xFrom = _this$getSquareCoordi11.x,
-        yFrom = _this$getSquareCoordi11.y;
-      xFrom += squareSize / 2;
-      yFrom += squareSize / 2;
-      var _this$getSquareCoordi12 = this.getSquareCoordinates(squareSize, move.to()),
-        xTo = _this$getSquareCoordi12.x,
-        yTo = _this$getSquareCoordi12.y;
-      xTo += squareSize / 2;
-      yTo += squareSize / 2;
-      xTo += Math.sign(xFrom - xTo) * ARROW_TIP_OFFSET_FACTOR * squareSize;
-      yTo += Math.sign(yFrom - yTo) * ARROW_TIP_OFFSET_FACTOR * squareSize;
-      var x = xTo * motionCursor + xFrom * (1 - motionCursor);
-      var y = yTo * motionCursor + yFrom * (1 - motionCursor);
-      var color = this.props.moveArrowColor;
-      return /*#__PURE__*/_react["default"].createElement("line", {
-        className: "kokopu-annotation kokopu-arrow",
-        x1: xFrom,
-        y1: yFrom,
-        x2: x,
-        y2: y,
-        stroke: colorset['c' + color],
-        strokeWidth: squareSize * STROKE_THICKNESS_FACTOR,
-        markerEnd: "url(#".concat(this.getArrowTipId(color), ")")
-      });
-    }
-  }, {
-    key: "renderArrowTip",
-    value: function renderArrowTip(colorset, color) {
-      return /*#__PURE__*/_react["default"].createElement(_ArrowTip["default"], {
-        id: this.getArrowTipId(color),
-        color: colorset['c' + color]
-      });
-    }
-  }, {
-    key: "renderTurnFlag",
-    value: function renderTurnFlag(turn, squareSize, pieceset) {
-      var x = 8 * squareSize + Math.round(TURN_FLAG_SPACING_FACTOR * squareSize);
-      var y = turn === (this.props.flipped ? 'b' : 'w') ? 7 * squareSize : 0;
-      return /*#__PURE__*/_react["default"].createElement("image", {
-        key: 'turn-' + turn,
-        x: x,
-        y: y,
-        width: squareSize,
-        height: squareSize,
-        href: pieceset[turn + 'x']
-      });
-    }
-  }, {
-    key: "renderRankCoordinate",
-    value: function renderRankCoordinate(squareSize, fontSize, rank) {
-      var x = Math.round(-RANK_COORDINATE_WIDTH_FACTOR * fontSize) / 2;
-      var y = (this.props.flipped ? rank + 0.5 : 7.5 - rank) * squareSize;
-      var label = RANK_LABELS[rank];
-      return /*#__PURE__*/_react["default"].createElement("text", {
-        key: 'rank-' + label,
-        className: "kokopu-coordinate",
-        x: x,
-        y: y,
-        fontSize: fontSize
-      }, label);
-    }
-  }, {
-    key: "renderFileCoordinate",
-    value: function renderFileCoordinate(squareSize, fontSize, file) {
-      var x = (this.props.flipped ? 7.5 - file : 0.5 + file) * squareSize;
-      var y = 8 * squareSize + Math.round(FILE_COORDINATE_HEIGHT_FACTOR * fontSize) / 2;
-      var label = FILE_LABELS[file];
-      return /*#__PURE__*/_react["default"].createElement("text", {
-        key: 'file-' + label,
-        className: "kokopu-coordinate",
-        x: x,
-        y: y,
-        fontSize: fontSize
-      }, label);
-    }
-  }, {
-    key: "handleWindowResize",
-    value: function handleWindowResize() {
-      this.setState({
-        windowWidth: window.innerWidth
-      });
-    }
-  }, {
-    key: "handleDragStart",
-    value: function handleDragStart(sq, x0, y0) {
-      this.setState({
-        inhibitedSquare: this.isMovePieceModeEnabled() || this.isPlayMoveModeEnabled() ? sq : '-',
-        draggedSquare: sq,
-        hoveredSquare: sq,
-        cursorOffset: {
-          x: x0,
-          y: y0
-        },
-        dragPosition: {
-          x: 0,
-          y: 0
-        }
-      });
-    }
-  }, {
-    key: "handleDrag",
-    value: function handleDrag(sq, dx, dy) {
-      var squareSize = this.getSquareSize();
-      var _this$getSquareCoordi13 = this.getSquareCoordinates(squareSize, sq),
-        x = _this$getSquareCoordi13.x,
-        y = _this$getSquareCoordi13.y;
-      var targetSq = this.getSquareAt(squareSize, x + dx + this.state.cursorOffset.x, y + dy + this.state.cursorOffset.y);
-      this.setState({
-        hoveredSquare: targetSq,
-        dragPosition: {
-          x: dx,
-          y: dy
-        }
-      });
-    }
-  }, {
-    key: "handleDragStop",
-    value: function handleDragStop(sq, dx, dy) {
-      var squareSize = this.getSquareSize();
-      var _this$getSquareCoordi14 = this.getSquareCoordinates(squareSize, sq),
-        x = _this$getSquareCoordi14.x,
-        y = _this$getSquareCoordi14.y;
-      var targetSq = this.getSquareAt(squareSize, x + dx + this.state.cursorOffset.x, y + dy + this.state.cursorOffset.y);
-      this.setState({
-        inhibitedSquare: '-',
-        draggedSquare: '-',
-        hoveredSquare: '-'
-      });
-      if (sq === targetSq || targetSq === '-') {
-        return;
-      }
-      if (this.isMovePieceModeEnabled() && this.props.onPieceMoved) {
-        this.props.onPieceMoved(sq, targetSq);
-      } else if (this.isEditArrowModeEnabled() && this.props.onArrowEdited) {
-        this.props.onArrowEdited(sq, targetSq);
-      } else if (this.isPlayMoveModeEnabled()) {
-        var _this$getPositionAndM = this.getPositionAndMoveInfo(),
-          position = _this$getPositionAndM.position;
-        var info = position.isMoveLegal(sq, targetSq);
-        if (!info) {
-          return;
-        }
-        switch (info.status) {
-          // Regular move.
-          case 'regular':
-            if (this.props.onMovePlayed) {
-              this.props.onMovePlayed(position.notation(info()));
-            }
-            break;
-
-          // Promotion move.
-          case 'promotion':
-            this.setState({
-              inhibitedSquare: sq,
-              promotionDrawer: {
-                origin: targetSq,
-                buttons: position.variant() === 'antichess' ? ['q', 'r', 'b', 'n', 'k'] : ['q', 'r', 'b', 'n'],
-                builder: function builder(piece) {
-                  return position.notation(info(piece));
-                }
-              }
-            });
-            break;
-
-          // Other cases are not supposed to happen.
-          // istanbul ignore next
-          default:
-            break;
-        }
-      }
-    }
-  }, {
-    key: "handleDragCanceled",
-    value: function handleDragCanceled() {
-      this.setState({
-        inhibitedSquare: '-',
-        draggedSquare: '-',
-        hoveredSquare: '-'
-      });
-    }
-  }, {
-    key: "handleDrawerCancelButtonClicked",
-    value: function handleDrawerCancelButtonClicked() {
-      this.setState({
-        inhibitedSquare: '-',
-        promotionDrawer: false
-      });
-    }
-  }, {
-    key: "handleDrawerButtonClicked",
-    value: function handleDrawerButtonClicked(piece) {
-      var builder = this.state.promotionDrawer.builder;
-      this.setState({
-        inhibitedSquare: '-',
-        promotionDrawer: false
-      });
-      if (this.props.onMovePlayed) {
-        this.props.onMovePlayed(builder(piece));
-      }
-    }
-  }, {
-    key: "handleSquareClicked",
-    value: function handleSquareClicked(sq) {
-      if (this.props.onSquareClicked) {
-        this.props.onSquareClicked(sq);
-      }
-    }
-
-    /**
-     * Whether the "move piece" mode is enabled or not.
-     */
-  }, {
-    key: "isMovePieceModeEnabled",
-    value: function isMovePieceModeEnabled() {
-      return this.props.interactionMode === 'movePieces';
-    }
-
-    /**
-     * Whether the "play move" mode is enabled or not.
-     */
-  }, {
-    key: "isPlayMoveModeEnabled",
-    value: function isPlayMoveModeEnabled() {
-      return this.props.interactionMode === 'playMoves';
-    }
-
-    /**
-     * Whether the "edit arrow" mode is enabled or not.
-     */
-  }, {
-    key: "isEditArrowModeEnabled",
-    value: function isEditArrowModeEnabled() {
-      return this.props.interactionMode === 'editArrows' && (0, _util.isValidColor)(this.props.editedArrowColor);
-    }
-
-    /**
-     * Return the (sanitized) square size.
-     */
-  }, {
-    key: "getSquareSize",
-    value: function getSquareSize() {
-      var squareSize = (0, _util.sanitizeInteger)(this.props.squareSize, _util.MIN_SQUARE_SIZE, _util.MAX_SQUARE_SIZE);
-      var limit = computeSmallScreenLimits('squareSize', this.props.smallScreenLimits, this.state.windowWidth);
-      return isNaN(limit) ? squareSize : (0, _util.sanitizeInteger)(limit, _util.MIN_SQUARE_SIZE, squareSize);
-    }
-
-    /**
-     * Whether the file/rank coordinates are visible or not.
-     */
-  }, {
-    key: "isCoordinateVisible",
-    value: function isCoordinateVisible() {
-      var limit = computeSmallScreenLimits('coordinateVisible', this.props.smallScreenLimits, this.state.windowWidth);
-      return this.props.coordinateVisible && (limit === undefined || limit);
-    }
-
-    /**
-     * Return the (x,y) coordinates of the given square in the SVG canvas.
-     */
-  }, {
-    key: "getSquareCoordinates",
-    value: function getSquareCoordinates(squareSize, sq) {
-      var _squareToCoordinates = (0, _kokopu.squareToCoordinates)(sq),
-        file = _squareToCoordinates.file,
-        rank = _squareToCoordinates.rank;
-      var x = this.props.flipped ? (7 - file) * squareSize : file * squareSize;
-      var y = this.props.flipped ? rank * squareSize : (7 - rank) * squareSize;
-      return {
-        x: x,
-        y: y
-      };
-    }
-
-    /**
-     * Return information regarding the currently displayed position and move, or parsing error message if something went wrong.
-     */
-  }, {
-    key: "getPositionAndMoveInfo",
-    value: function getPositionAndMoveInfo() {
-      // Parse the position.
-      var positionInfo = parsePosition(this.props.position);
-      if (positionInfo.error) {
-        return {
-          positionError: true,
-          moveError: true,
-          message: positionInfo.message
-        };
-      }
-
-      // Nothing else to do if no move is defined.
-      if (!this.props.move) {
-        return {
-          positionError: false,
-          moveError: false,
-          position: positionInfo.position
-        };
-      }
-
-      // Parse the move.
-      var moveInfo = parseMove(positionInfo.position, this.props.move);
-      if (moveInfo.error) {
-        return {
-          positionError: false,
-          moveError: true,
-          message: moveInfo.message,
-          positionBefore: positionInfo.position
-        };
-      }
-
-      // Compute the position after the move and return the result.
-      var positionAfter = new _kokopu.Position(positionInfo.position);
-      positionAfter.play(moveInfo.move);
-      return {
-        positionError: false,
-        moveError: false,
-        positionBefore: positionInfo.position,
-        move: moveInfo.move,
-        position: positionAfter
-      };
-    }
-
-    /**
-     * Return the square at the given location.
-     */
-  }, {
-    key: "getSquareAt",
-    value: function getSquareAt(squareSize, x, y) {
-      var file = this.props.flipped ? 7 - Math.floor(x / squareSize) : Math.floor(x / squareSize);
-      var rank = this.props.flipped ? Math.floor(y / squareSize) : 7 - Math.floor(y / squareSize);
-      return file >= 0 && file < 8 && rank >= 0 && rank < 8 ? (0, _kokopu.coordinatesToSquare)(file, rank) : '-';
-    }
-
-    /**
-     * Return the DOM ID of an arrow tip with the given color.
-     */
-  }, {
-    key: "getArrowTipId",
-    value: function getArrowTipId(color) {
-      return 'kokopu-arrowTip-' + color + '-' + this.arrowTipIdSuffix;
-    }
-
-    /**
-     * Return the size of the chessboard, assuming it is built with the given attributes.
-     *
-     * @param {number} squareSize
-     * @param {boolean} coordinateVisible
-     * @param {{width:number, squareSize:number, coordinateVisible:boolean}[]} smallScreenLimits
-     * @returns {{width:number, height:number}}
-     * @public
-     */
-  }], [{
-    key: "size",
-    value: function size(squareSize, coordinateVisible, smallScreenLimits) {
-      // Enforce small-screen limits, if any.
-      if (typeof window !== 'undefined') {
-        var squareSizeLimit = computeSmallScreenLimits('squareSize', smallScreenLimits, window.innerWidth);
-        var coordinateVisibleLimit = computeSmallScreenLimits('coordinateVisible', smallScreenLimits, window.innerWidth);
-        if (!isNaN(squareSizeLimit)) {
-          squareSize = (0, _util.sanitizeInteger)(squareSizeLimit, _util.MIN_SQUARE_SIZE, squareSize);
-        }
-        coordinateVisible = coordinateVisible && (coordinateVisibleLimit === undefined || coordinateVisibleLimit);
-      }
-
-      // Compute the dimensions.
-      var width = 9 * squareSize + Math.round(TURN_FLAG_SPACING_FACTOR * squareSize);
-      var height = 8 * squareSize;
-      if (coordinateVisible) {
-        var fontSize = computeCoordinateFontSize(squareSize);
-        width += Math.round(RANK_COORDINATE_WIDTH_FACTOR * fontSize);
-        height += Math.round(FILE_COORDINATE_HEIGHT_FACTOR * fontSize);
-      }
-      return {
-        width: width,
-        height: height
-      };
-    }
-
-    /**
-     * Return the maximum square size that would allow the chessboard to fit in a rectangle of size `width x height`.
-     *
-     * @param {number} width
-     * @param {number} height
-     * @param {boolean} coordinateVisible
-     * @param {{width:number, squareSize:number, coordinateVisible:boolean}[]} smallScreenLimits
-     * @returns {number}
-     * @public
-     */
-  }, {
-    key: "adaptSquareSize",
-    value: function adaptSquareSize(width, height, coordinateVisible, smallScreenLimits) {
-      var maxSquareSize = _util.MAX_SQUARE_SIZE;
-
-      // Enforce small-screen limits, if any.
-      if (typeof window !== 'undefined') {
-        var squareSizeLimit = computeSmallScreenLimits('squareSize', smallScreenLimits, window.innerWidth);
-        var coordinateVisibleLimit = computeSmallScreenLimits('coordinateVisible', smallScreenLimits, window.innerWidth);
-        if (!isNaN(squareSizeLimit)) {
-          maxSquareSize = (0, _util.sanitizeInteger)(squareSizeLimit, _util.MIN_SQUARE_SIZE, maxSquareSize);
-        }
-        coordinateVisible = coordinateVisible && (coordinateVisibleLimit === undefined || coordinateVisibleLimit);
-      }
-      function isAdapted(squareSize) {
-        var actualWidth = 9 * squareSize + Math.round(TURN_FLAG_SPACING_FACTOR * squareSize);
-        var actualHeight = 8 * squareSize;
-        if (coordinateVisible) {
-          var fontSize = computeCoordinateFontSize(squareSize);
-          actualWidth += Math.round(RANK_COORDINATE_WIDTH_FACTOR * fontSize);
-          actualHeight += Math.round(FILE_COORDINATE_HEIGHT_FACTOR * fontSize);
-        }
-        return actualWidth <= width && actualHeight <= height;
-      }
-
-      // Check min/max bounds.
-      if (isAdapted(maxSquareSize)) {
-        return maxSquareSize;
-      } else if (!isAdapted(_util.MIN_SQUARE_SIZE)) {
-        return _util.MIN_SQUARE_SIZE;
-      }
-
-      // Dichotomic search, between a (inclusive) and b (exclusive).
-      var a = _util.MIN_SQUARE_SIZE;
-      var b = maxSquareSize;
-      while (a + 1 < b) {
-        var mid = Math.floor((a + b) / 2);
-        if (isAdapted(mid)) {
-          a = mid;
-        } else {
-          b = mid;
-        }
-      }
-      return a;
-    }
-
-    /**
-     * Minimum square size (inclusive).
-     *
-     * @returns {number}
-     * @public
-     */
-  }, {
-    key: "minSquareSize",
-    value: function minSquareSize() {
-      return _util.MIN_SQUARE_SIZE;
-    }
-
-    /**
-     * Maximum square size (inclusive).
-     *
-     * @returns {number}
-     * @public
-     */
-  }, {
-    key: "maxSquareSize",
-    value: function maxSquareSize() {
-      return _util.MAX_SQUARE_SIZE;
-    }
-
-    /**
-     * Available colorsets for theming.
-     *
-     * @returns {Object.<string, { w: string, b: string, cb: string, cg: string, cr: string, cy: string }>}
-     * @public
-     */
-  }, {
-    key: "colorsets",
-    value: function colorsets() {
-      return _colorsets2["default"];
-    }
-
-    /**
-     * Available piecesets for theming.
-     *
-     * @returns {Object.<string, { bb: string, bk: string, bn: string, bp: string, bq: string, br: string, bx: string,
-     *                             wb: string, wk: string, wn: string, wp: string, wq: string, wr: string, wx: string }>}
-     * @public
-     */
-  }, {
-    key: "piecesets",
-    value: function piecesets() {
-      return _piecesets2["default"];
-    }
-  }]);
-  return Chessboard;
-}(_react["default"].Component);
-exports["default"] = Chessboard;
-Chessboard.propTypes = {
-  /**
-   * Displayed position. Can be a [kokopu.Position](https://kokopu.yo35.org/docs/current/classes/Position.html) object,
-   * a [FEN string](https://en.wikipedia.org/wiki/Forsyth%E2%80%93Edwards_Notation),
-   * `'start'` (usual starting position), or `'empty'` (empty board).
-   *
-   * Optionally, the FEN string can be prefixed with `'variant:'`, `variant` corresponding to one of the
-   * [game variant](https://kokopu.yo35.org/docs/current/types/GameVariant.html) supported by Kokopu. For instance:
-   * `'chess960:nrkbqrbn/pppppppp/8/8/8/8/PPPPPPPP/NRKBQRBN w KQkq - 0 1'`.
-   */
-  position: _propTypes["default"].oneOfType([_propTypes["default"].instanceOf(_kokopu.Position), _propTypes["default"].string]),
-  /**
-   * Displayed move (optional), defined either as a [kokopu.MoveDescriptor](https://kokopu.yo35.org/docs/current/classes/MoveDescriptor.html) object
-   * or as a [SAN string](https://en.wikipedia.org/wiki/Algebraic_notation_(chess)) (e.g. `'Nf3'`). In both cases, it must represent
-   * a legal move in position defined in attribute `position`.
-   */
-  move: _propTypes["default"].oneOfType([_propTypes["default"].instanceOf(_kokopu.MoveDescriptor), _propTypes["default"].string]),
-  /**
-   * Square markers, defined as a "square -> color" struct (e.g. `{ e4: 'g', d5: 'r' }`) or as a comma-separated CSL string (e.g. `'Rd5,Ge4'`).
-   */
-  squareMarkers: _propTypes["default"].oneOfType([_propTypes["default"].objectOf(_propTypes["default"].oneOf(['b', 'g', 'r', 'y'])), _propTypes["default"].string]),
-  /**
-   * Text markers, defined as a "square -> (symbol, color)" struct (e.g. `{ e4: { symbol: 'A', color: 'g' }, d5: { symbol: 'z', color: 'r' }}`)
-   * or as a comma-separated CTL string (e.g. `'Rzd5,GAe4'`).
-   */
-  textMarkers: _propTypes["default"].oneOfType([_propTypes["default"].objectOf(_propTypes["default"].shape({
-    symbol: _propTypes["default"].string.isRequired,
-    color: _propTypes["default"].oneOf(['b', 'g', 'r', 'y']).isRequired
-  })), _propTypes["default"].string]),
-  /**
-   * Arrow markers, defined as a "squareFromSquareTo -> color" struct (e.g. `{ e2e4: 'g', g8f6: 'r', g8h6: 'y' }`)
-   * or as a comma-separated CAL string (e.g. `'Ge2e4,Rg8f6,Yg8h6'`).
-   */
-  arrowMarkers: _propTypes["default"].oneOfType([_propTypes["default"].objectOf(_propTypes["default"].oneOf(['b', 'g', 'r', 'y'])), _propTypes["default"].string]),
-  /**
-   * Whether the board is flipped (i.e. seen from Black's point of view) or not.
-   */
-  flipped: _propTypes["default"].bool,
-  /**
-   * Size of the squares (in pixels). Must be an integer between `Chessboard.minSquareSize()` and `Chessboard.maxSquareSize()`.
-   */
-  squareSize: _propTypes["default"].number,
-  /**
-   * Whether the row and column coordinates are visible or not.
-   */
-  coordinateVisible: _propTypes["default"].bool,
-  /**
-   * Whether moves are highlighted with an arrow or not.
-   */
-  moveArrowVisible: _propTypes["default"].bool,
-  /**
-   * Color of the move arrow.
-   */
-  moveArrowColor: _propTypes["default"].oneOf(['b', 'g', 'r', 'y']),
-  /**
-   * Whether moves are animated or not.
-   */
-  animated: _propTypes["default"].bool,
-  /**
-   * Color theme ID.
-   */
-  colorset: _propTypes["default"].oneOf(Object.keys(_colorsets2["default"])),
-  /**
-   * Piece theme ID.
-   */
-  pieceset: _propTypes["default"].oneOf(Object.keys(_piecesets2["default"])),
-  /**
-   * Limits applicable on small-screen devices. For instance, if set to
-   * ```
-   * [
-   *   { width: 768, squareSize: 40 },
-   *   { width: 375, squareSize: 24, coordinateVisible: false }
-   * ]
-   * ```
-   * then on screens with resolution ≤768 pixels, the square size will be limited to 40 (whatever the value
-   * of the `squareSize` attribute); in addition, on screens with resolution ≤375 pixels, the square size
-   * will be limited to 24 and the row and column coordinates will always be hidden (whatever the value of the
-   * `coordinateVisible` attribute).
-   */
-  smallScreenLimits: _propTypes["default"].arrayOf(_propTypes["default"].shape({
-    width: _propTypes["default"].number.isRequired,
-    squareSize: _propTypes["default"].number,
-    coordinateVisible: _propTypes["default"].bool
-  })),
-  /**
-   * Type of action allowed with the mouse on the chessboard. If undefined, then the user cannot interact with the component.
-   *
-   * - `'movePieces'` allows the user to drag & drop the chess pieces from one square to another (regardless of the chess rules),
-   * - `'clickSquares'` allows the user to click on squares,
-   * - `'editArrows'` allows the user to draw arrow markers from one square to another (warning: attribute `editedArrowColor` must be set),
-   * - `'playMoves'` allows the user to play legal chess moves (thus no interaction is possible if the displayed position is not legal).
-   */
-  interactionMode: _propTypes["default"].oneOf(['movePieces', 'clickSquares', 'editArrows', 'playMoves']),
-  /**
-   * Color of the edited arrow (only used if `interactionMode` is set to `'editArrows'`).
-   */
-  editedArrowColor: _propTypes["default"].oneOf(['b', 'g', 'r', 'y']),
-  /**
-   * Callback invoked when a piece is moved through drag&drop (only if `interactionMode` is set to `'movePieces'`).
-   *
-   * @param {string} from Origin square (e.g. `'g1'`).
-   * @param {string} to Target square (e.g. `'f3'`).
-   */
-  onPieceMoved: _propTypes["default"].func,
-  /**
-   * Callback invoked when the user clicks on a square (only if `interactionMode` is set to `'clickSquares'`).
-   *
-   * @param {string} square Clicked square (e.g. `e4`).
-   */
-  onSquareClicked: _propTypes["default"].func,
-  /**
-   * Callback invoked when an arrow is dragged (only if `interactionMode` is set to `'editArrows'`).
-   *
-   * @param {string} from Origin square (e.g. `'g1'`).
-   * @param {string} to Target square (e.g. `'f3'`).
-   */
-  onArrowEdited: _propTypes["default"].func,
-  /**
-   * Callback invoked when a move is played (only if `interactionMode` is set to `'playMoves'`).
-   *
-   * @param {string} move SAN notation representing the played move (e.g. `Nxe5`).
-   */
-  onMovePlayed: _propTypes["default"].func
-};
-Chessboard.defaultProps = {
-  position: 'start',
-  flipped: false,
-  squareSize: 40,
-  coordinateVisible: true,
-  moveArrowVisible: true,
-  moveArrowColor: 'b',
-  animated: false,
-  colorset: 'original',
-  pieceset: 'cburnett'
-};
-
-/**
- * Compute the limit applicable to the given window width.
- */
-function computeSmallScreenLimits(key, smallScreenLimits, windowWidth) {
-  if (!(smallScreenLimits instanceof Array)) {
-    return undefined;
-  }
-  var applicableLimits = smallScreenLimits.filter(function (limit) {
-    return limit && key in limit && windowWidth <= limit.width;
-  }).sort(function (la, lb) {
-    return la.width - lb.width;
-  });
-  return applicableLimits.length > 0 ? applicableLimits[0][key] : undefined;
-}
-
-/**
- * Return the font size to use for coordinates assuming the given square size.
- */
-function computeCoordinateFontSize(squareSize) {
-  return squareSize <= 32 ? 8 : 8 + (squareSize - 32) * 0.2;
-}
-
-/**
- * Try to interpret the given object as a chess position.
- */
-function parsePosition(position) {
-  if (position instanceof _kokopu.Position) {
-    return {
-      error: false,
-      position: position
-    };
-  } else if (typeof position === 'string') {
-    try {
-      return {
-        error: false,
-        position: new _kokopu.Position(position)
-      };
-    } catch (e) {
-      // istanbul ignore else
-      if (e instanceof _kokopu.exception.InvalidFEN) {
-        return {
-          error: true,
-          message: e.message
-        };
-      } else {
-        throw e;
-      }
-    }
-  } else {
-    return {
-      error: true,
-      message: _i18n["default"].INVALID_POSITION_ATTRIBUTE_ERROR_MESSAGE
-    };
-  }
-}
-
-/**
- * Try to interpret the given object `move` as a move descriptor based on the given position.
- */
-function parseMove(position, move) {
-  if (move instanceof _kokopu.MoveDescriptor) {
-    return {
-      error: false,
-      move: move
-    };
-  } else if (typeof move === 'string') {
-    try {
-      return {
-        error: false,
-        move: position.notation(move)
-      };
-    } catch (e) {
-      // istanbul ignore else
-      if (e instanceof _kokopu.exception.InvalidNotation) {
-        return {
-          error: true,
-          message: e.message
-        };
-      } else {
-        throw e;
-      }
-    }
-  } else {
-    return {
-      error: true,
-      message: _i18n["default"].INVALID_MOVE_ATTRIBUTE_ERROR_MESSAGE
-    };
-  }
-}
-
-/**
- * Try to interpret the given object as a list of markers.
- */
-function parseMarkers(markers, parse, isValidKey, isValidValue) {
-  if (typeof markers === 'string') {
-    return parse(markers);
-  } else if (_typeof(markers) === 'object') {
-    var result = {};
-    Object.entries(markers).filter(function (_ref7) {
-      var _ref8 = _slicedToArray(_ref7, 2),
-        key = _ref8[0],
-        value = _ref8[1];
-      return isValidKey(key) && isValidValue(value);
-    }).forEach(function (_ref9) {
-      var _ref10 = _slicedToArray(_ref9, 2),
-        key = _ref10[0],
-        value = _ref10[1];
-      result[key] = value;
-    });
-    return result;
-  } else {
-    return {};
-  }
-}