kokopu-react 1.8.0 → 1.9.1

package/dist/lib/Chessboard.js

@@ -4,100 +4,59 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _reactDraggable = _interopRequireDefault(require("react-draggable"));
-
-var _reactMotion = require("react-motion");
-
 var _kokopu = require("kokopu");
-
 var _colorsets2 = _interopRequireDefault(require("./impl/colorsets"));
-
 var _piecesets2 = _interopRequireDefault(require("./impl/piecesets"));
-
 var _ArrowTip = _interopRequireDefault(require("./impl/ArrowTip"));
-
+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 = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["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, 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 _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 ANIMATION_SPEED = {
-  stiffness: 700,
-  damping: 40
-};
+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: '-',
@@ -107,32 +66,31 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
       windowWidth: window.innerWidth
     };
     _this.arrowTipIdSuffix = (0, _util.generateRandomId)();
-
-    _this.windowResizeListener = function () {
-      return _this.handleWindowResize();
-    };
-
     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() {
-      window.removeEventListener('resize', this.windowResizeListener);
+      if (this.windowResizeListener) {
+        window.removeEventListener('resize', this.windowResizeListener);
+        this.windowResizeListener = null;
+      }
     }
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
-
+      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,
@@ -144,38 +102,37 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
           message: info.message
         });
       }
-
       var position = info.position,
-          move = info.move,
-          positionBefore = info.positionBefore; // Compute the attributes.
+        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.
-
+      }
 
+      // Render the squares.
       var squares = [];
       (0, _kokopu.forEachSquare)(function (sq) {
-        return squares.push(_this2.renderSquare(squareSize, colorset, sq));
-      }); // Render coordinates.
+        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.
-
+      }
 
+      // 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);
@@ -191,62 +148,55 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderBoardContent",
     value: function renderBoardContent(position, positionBefore, move, squareSize, colorset, pieceset) {
-      var _this3 = this;
-
+      var _this4 = this;
       if (move && this.props.animated) {
-        return /*#__PURE__*/_react["default"].createElement(_reactMotion.Motion, {
-          key: move.toString(),
-          defaultStyle: {
-            alpha: 0
-          },
-          style: {
-            alpha: (0, _reactMotion.spring)(1, ANIMATION_SPEED)
-          }
-        }, function (currentStyle) {
-          return currentStyle.alpha >= 1 ? _this3.renderBoardContentStill(position, move, squareSize, colorset, pieceset) : _this3.renderBoardContentAnimated(positionBefore, move, currentStyle.alpha, squareSize, colorset, pieceset);
+        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, alpha, squareSize, colorset, pieceset) {
-      var _this4 = this;
-
+    value: function renderBoardContentAnimated(positionBefore, move, motionCursor, squareSize, colorset, pieceset) {
+      var _this5 = this;
       var pieces = [];
       (0, _kokopu.forEachSquare)(function (sq) {
-        return pieces.push(_this4.renderPieceAnimated(positionBefore, move, alpha, squareSize, pieceset, 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, alpha, squareSize, colorset), this.renderTurnFlag((0, _kokopu.oppositeColor)(positionBefore.turn()), squareSize, pieceset));
+      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 _this5 = this;
-
+      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 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(_this5.renderPiece(position, squareSize, pieceset, sq));
-
-        if (_this5.props.interactionMode) {
-          handles.push(_this5.renderSquareHandle(position, squareSize, 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));
@@ -255,9 +205,8 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
     key: "renderSquare",
     value: function renderSquare(squareSize, colorset, sq) {
       var _this$getSquareCoordi = this.getSquareCoordinates(squareSize, sq),
-          x = _this$getSquareCoordi.x,
-          y = _this$getSquareCoordi.y;
-
+        x = _this$getSquareCoordi.x,
+        y = _this$getSquareCoordi.y;
       return /*#__PURE__*/_react["default"].createElement("rect", {
         key: sq,
         x: x,
@@ -273,11 +222,9 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
       if (this.state.hoveredSquare === '-') {
         return undefined;
       }
-
       var _this$getSquareCoordi2 = this.getSquareCoordinates(squareSize, this.state.hoveredSquare),
-          x = _this$getSquareCoordi2.x,
-          y = _this$getSquareCoordi2.y;
-
+        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;
@@ -295,15 +242,12 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
     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;
-
+        x = _this$getSquareCoordi3.x,
+        y = _this$getSquareCoordi3.y;
       return /*#__PURE__*/_react["default"].createElement("image", {
         key: 'piece-' + sq,
         x: x,
@@ -315,37 +259,30 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
     }
   }, {
     key: "renderPieceAnimated",
-    value: function renderPieceAnimated(positionBefore, move, alpha, squareSize, pieceset, sq) {
+    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;
-
+        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 * alpha + x * (1 - alpha);
-        y = yTo * alpha + y * (1 - alpha);
-
-        if (move.isPromotion() && alpha > 0.8) {
+          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 * alpha + x * (1 - alpha);
-        y = _yTo * alpha + y * (1 - alpha);
+          _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,
@@ -361,11 +298,9 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
       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 = _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);
@@ -384,14 +319,11 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
       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;
-
+        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);
@@ -410,18 +342,14 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderPromotionDrawer",
     value: function renderPromotionDrawer(position, squareSize, colorset, pieceset) {
-      var _this6 = this;
-
+      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;
-
+        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;
@@ -434,7 +362,7 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
           height: squareSize,
           href: pieceset[cp],
           onClick: function onClick() {
-            return _this6.handleDrawerButtonClicked(p);
+            return _this7.handleDrawerButtonClicked(p);
           }
         });
       });
@@ -445,7 +373,7 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
         width: squareSize * 8,
         height: squareSize * 8,
         onClick: function onClick() {
-          return _this6.handleDrawerCancelButtonClicked();
+          return _this7.handleDrawerCancelButtonClicked();
         }
       }), /*#__PURE__*/_react["default"].createElement("rect", {
         x: x,
@@ -465,16 +393,13 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderSquareHandle",
     value: function renderSquareHandle(position, squareSize, sq) {
-      var _this7 = this;
-
+      var _this8 = this;
       var _this$getSquareCoordi10 = this.getSquareCoordinates(squareSize, sq),
-          x = _this$getSquareCoordi10.x,
-          y = _this$getSquareCoordi10.y;
-
+        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) {
         var dragPosition = this.state.draggedSquare === sq ? this.state.dragPosition : {
           x: 0,
@@ -485,13 +410,13 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
           key: 'handle-' + sq,
           position: dragPosition,
           onStart: function onStart(evt) {
-            return _this7.handleDragStart(sq, evt);
+            return _this8.handleDragStart(sq, evt);
           },
           onDrag: function onDrag(_, dragData) {
-            return _this7.handleDrag(sq, dragData);
+            return _this8.handleDrag(sq, dragData);
           },
           onStop: function onStop(_, dragData) {
-            return _this7.handleDragStop(sq, dragData);
+            return _this8.handleDragStop(sq, dragData);
           }
         }, /*#__PURE__*/_react["default"].createElement("rect", {
           className: classNames.join(' '),
@@ -509,7 +434,7 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
           width: squareSize,
           height: squareSize,
           onClick: function onClick() {
-            return _this7.handleSquareClicked(sq);
+            return _this8.handleSquareClicked(sq);
           }
         });
       } else {
@@ -519,18 +444,15 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderSquareMarkers",
     value: function renderSquareMarkers(sqm, squareSize, colorset) {
-      var _this8 = this;
-
+      var _this9 = this;
       var result = [];
       Object.entries(sqm).forEach(function (_ref) {
         var _ref2 = _slicedToArray(_ref, 2),
-            sq = _ref2[0],
-            color = _ref2[1];
-
-        var _this8$getSquareCoord = _this8.getSquareCoordinates(squareSize, sq),
-            x = _this8$getSquareCoord.x,
-            y = _this8$getSquareCoord.y;
-
+          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",
@@ -546,18 +468,15 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderTextMarkers",
     value: function renderTextMarkers(txtm, squareSize, colorset) {
-      var _this9 = this;
-
+      var _this10 = this;
       var result = [];
       Object.entries(txtm).forEach(function (_ref3) {
         var _ref4 = _slicedToArray(_ref3, 2),
-            sq = _ref4[0],
-            value = _ref4[1];
-
-        var _this9$getSquareCoord = _this9.getSquareCoordinates(squareSize, sq),
-            x = _this9$getSquareCoord.x,
-            y = _this9$getSquareCoord.y;
-
+          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", {
@@ -576,39 +495,31 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderArrowMarkers",
     value: function renderArrowMarkers(arm, squareSize, colorset) {
-      var _this10 = this;
-
+      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];
-
+          vect = _ref6[0],
+          color = _ref6[1];
         var from = vect.substring(0, 2);
         var to = vect.substring(2, 4);
-
         if (from === to) {
           return;
         }
-
-        var _this10$getSquareCoor = _this10.getSquareCoordinates(squareSize, from),
-            xFrom = _this10$getSquareCoor.x,
-            yFrom = _this10$getSquareCoor.y;
-
-        var _this10$getSquareCoor2 = _this10.getSquareCoordinates(squareSize, to),
-            xTo = _this10$getSquareCoor2.x,
-            yTo = _this10$getSquareCoor2.y;
-
+        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 = _this10.getArrowTipId(color);
-
+        var arrowTipId = _this11.getArrowTipId(color);
         result.push( /*#__PURE__*/_react["default"].createElement("line", {
           key: 'arm-' + vect,
           className: "kokopu-annotation kokopu-arrow",
@@ -625,28 +536,24 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
     }
   }, {
     key: "renderMoveArrow",
-    value: function renderMoveArrow(move, alpha, squareSize, colorset) {
-      if (!move || alpha < 0.1 || !this.props.moveArrowVisible || move.from() === move.to()) {
+    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 = _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 = _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 * alpha + xFrom * (1 - alpha);
-      var y = yTo * alpha + yFrom * (1 - alpha);
+      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",
@@ -738,11 +645,9 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
     key: "handleDrag",
     value: function handleDrag(sq, dragData) {
       var squareSize = this.getSquareSize();
-
       var _this$getSquareCoordi13 = this.getSquareCoordinates(squareSize, sq),
-          x = _this$getSquareCoordi13.x,
-          y = _this$getSquareCoordi13.y;
-
+        x = _this$getSquareCoordi13.x,
+        y = _this$getSquareCoordi13.y;
       var targetSq = this.getSquareAt(squareSize, x + dragData.x + this.state.cursorOffset.x, y + dragData.y + this.state.cursorOffset.y);
       this.setState({
         hoveredSquare: targetSq,
@@ -756,46 +661,38 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
     key: "handleDragStop",
     value: function handleDragStop(sq, dragData) {
       var squareSize = this.getSquareSize();
-
       var _this$getSquareCoordi14 = this.getSquareCoordinates(squareSize, sq),
-          x = _this$getSquareCoordi14.x,
-          y = _this$getSquareCoordi14.y;
-
+        x = _this$getSquareCoordi14.x,
+        y = _this$getSquareCoordi14.y;
       var targetSq = this.getSquareAt(squareSize, x + dragData.x + this.state.cursorOffset.x, y + dragData.y + 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;
-
+          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.
 
+          // Promotion move.
           case 'promotion':
             this.setState({
               inhibitedSquare: sq,
@@ -808,9 +705,9 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
               }
             });
             break;
+
           // Other cases are not supposed to happen.
           // istanbul ignore next
-
           default:
             break;
         }
@@ -832,7 +729,6 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
         inhibitedSquare: '-',
         promotionDrawer: false
       });
-
       if (this.props.onMovePlayed) {
         this.props.onMovePlayed(builder(piece));
       }
@@ -844,37 +740,37 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
         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() {
@@ -882,27 +778,26 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
       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;
-
+        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 {
@@ -910,36 +805,34 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
         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.
-
+      }
 
+      // Nothing else to do if no move is defined.
       if (!this.props.move) {
         return {
           positionError: false,
           moveError: false,
           position: positionInfo.position
         };
-      } // Parse the move.
-
+      }
 
+      // Parse the move.
       var moveInfo = parseMove(positionInfo.position, this.props.move);
-
       if (moveInfo.error) {
         return {
           positionError: false,
@@ -947,9 +840,9 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
           message: moveInfo.message,
           positionBefore: positionInfo.position
         };
-      } // Compute the position after the move and return the result.
-
+      }
 
+      // Compute the position after the move and return the result.
       var positionAfter = new _kokopu.Position(positionInfo.position);
       positionAfter.play(moveInfo.move);
       return {
@@ -960,10 +853,10 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
         position: positionAfter
       };
     }
+
     /**
      * Return the square at the given location.
      */
-
   }, {
     key: "getSquareAt",
     value: function getSquareAt(squareSize, x, y) {
@@ -971,15 +864,16 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
       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.
      *
@@ -989,7 +883,6 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
      * @returns {{width:number, height:number}}
      * @public
      */
-
   }], [{
     key: "size",
     value: function size(squareSize, coordinateVisible, smallScreenLimits) {
@@ -997,29 +890,26 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
       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.
-
+      }
 
+      // 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`.
      *
@@ -1030,95 +920,88 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
      * @returns {number}
      * @public
      */
-
   }, {
     key: "adaptSquareSize",
     value: function adaptSquareSize(width, height, coordinateVisible, smallScreenLimits) {
-      var maxSquareSize = _util.MAX_SQUARE_SIZE; // Enforce small-screen limits, if any.
+      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.
-
+      }
 
+      // 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).
-
+      }
 
+      // 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.
      *
@@ -1126,17 +1009,14 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
      *                             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 = {
   /**
@@ -1149,19 +1029,16 @@ Chessboard.propTypes = {
    * `'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'`).
@@ -1170,53 +1047,43 @@ Chessboard.propTypes = {
     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
    * ```
@@ -1235,7 +1102,6 @@ Chessboard.propTypes = {
     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.
    *
@@ -1245,12 +1111,10 @@ Chessboard.propTypes = {
    * - `'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'`).
    *
@@ -1258,14 +1122,12 @@ Chessboard.propTypes = {
    * @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'`).
    *
@@ -1273,7 +1135,6 @@ Chessboard.propTypes = {
    * @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'`).
    *
@@ -1292,15 +1153,14 @@ Chessboard.defaultProps = {
   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) {
@@ -1308,19 +1168,17 @@ function computeSmallScreenLimits(key, smallScreenLimits, windowWidth) {
   });
   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 {
@@ -1351,11 +1209,10 @@ function parsePosition(position) {
     };
   }
 }
+
 /**
  * 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 {
@@ -1386,11 +1243,10 @@ function parseMove(position, move) {
     };
   }
 }
+
 /**
  * Try to interpret the given object as a list of markers.
  */
-
-
 function parseMarkers(markers, parse, isValidKey, isValidValue) {
   if (typeof markers === 'string') {
     return parse(markers);
@@ -1398,15 +1254,13 @@ function parseMarkers(markers, parse, isValidKey, isValidValue) {
     var result = {};
     Object.entries(markers).filter(function (_ref7) {
       var _ref8 = _slicedToArray(_ref7, 2),
-          key = _ref8[0],
-          value = _ref8[1];
-
+        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];
-
+        key = _ref10[0],
+        value = _ref10[1];
       result[key] = value;
     });
     return result;