kokopu-react 1.8.0 → 1.9.0

package/dist/lib/Chessboard.js

@@ -11,8 +11,6 @@ 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"));
@@ -21,6 +19,8 @@ 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"));
@@ -77,10 +77,7 @@ 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';
 /**
@@ -107,28 +104,32 @@ 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();
@@ -162,7 +163,7 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
 
       var squares = [];
       (0, _kokopu.forEachSquare)(function (sq) {
-        return squares.push(_this2.renderSquare(squareSize, colorset, sq));
+        return squares.push(_this3.renderSquare(squareSize, colorset, sq));
       }); // Render coordinates.
 
       var rankCoordinates = [];
@@ -191,19 +192,15 @@ 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);
@@ -215,14 +212,14 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
 
   }, {
     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).
@@ -231,7 +228,7 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
   }, {
     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);
@@ -243,10 +240,10 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
       var pieces = [];
       var handles = [];
       (0, _kokopu.forEachSquare)(function (sq) {
-        pieces.push(_this5.renderPiece(position, squareSize, pieceset, sq));
+        pieces.push(_this6.renderPiece(position, squareSize, pieceset, sq));
 
-        if (_this5.props.interactionMode) {
-          handles.push(_this5.renderSquareHandle(position, squareSize, 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));
@@ -315,7 +312,7 @@ 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) {
@@ -331,10 +328,10 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
             xTo = _this$getSquareCoordi5.x,
             yTo = _this$getSquareCoordi5.y;
 
-        x = xTo * alpha + x * (1 - alpha);
-        y = yTo * alpha + y * (1 - alpha);
+        x = xTo * motionCursor + x * (1 - motionCursor);
+        y = yTo * motionCursor + y * (1 - motionCursor);
 
-        if (move.isPromotion() && alpha > 0.8) {
+        if (move.isPromotion() && motionCursor > 0.8) {
           cp = move.coloredPromotion();
         }
       } else if (move.isCastling() && sq === move.rookFrom()) {
@@ -342,8 +339,8 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
             _xTo = _this$getSquareCoordi6.x,
             _yTo = _this$getSquareCoordi6.y;
 
-        x = _xTo * alpha + x * (1 - alpha);
-        y = _yTo * alpha + y * (1 - alpha);
+        x = _xTo * motionCursor + x * (1 - motionCursor);
+        y = _yTo * motionCursor + y * (1 - motionCursor);
       }
 
       return /*#__PURE__*/_react["default"].createElement("image", {
@@ -410,7 +407,7 @@ 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;
@@ -434,7 +431,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 +442,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,7 +462,7 @@ 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,
@@ -485,13 +482,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 +506,7 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
           width: squareSize,
           height: squareSize,
           onClick: function onClick() {
-            return _this7.handleSquareClicked(sq);
+            return _this8.handleSquareClicked(sq);
           }
         });
       } else {
@@ -519,7 +516,7 @@ 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) {
@@ -527,9 +524,9 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
             sq = _ref2[0],
             color = _ref2[1];
 
-        var _this8$getSquareCoord = _this8.getSquareCoordinates(squareSize, sq),
-            x = _this8$getSquareCoord.x,
-            y = _this8$getSquareCoord.y;
+        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,
@@ -546,7 +543,7 @@ 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) {
@@ -554,9 +551,9 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
             sq = _ref4[0],
             value = _ref4[1];
 
-        var _this9$getSquareCoord = _this9.getSquareCoordinates(squareSize, sq),
-            x = _this9$getSquareCoord.x,
-            y = _this9$getSquareCoord.y;
+        var _this10$getSquareCoor = _this10.getSquareCoordinates(squareSize, sq),
+            x = _this10$getSquareCoor.x,
+            y = _this10$getSquareCoor.y;
 
         x += squareSize / 2;
         y += squareSize / 2;
@@ -576,7 +573,7 @@ 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;
@@ -592,13 +589,13 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
           return;
         }
 
-        var _this10$getSquareCoor = _this10.getSquareCoordinates(squareSize, from),
-            xFrom = _this10$getSquareCoor.x,
-            yFrom = _this10$getSquareCoor.y;
+        var _this11$getSquareCoor = _this11.getSquareCoordinates(squareSize, from),
+            xFrom = _this11$getSquareCoor.x,
+            yFrom = _this11$getSquareCoor.y;
 
-        var _this10$getSquareCoor2 = _this10.getSquareCoordinates(squareSize, to),
-            xTo = _this10$getSquareCoor2.x,
-            yTo = _this10$getSquareCoor2.y;
+        var _this11$getSquareCoor2 = _this11.getSquareCoordinates(squareSize, to),
+            xTo = _this11$getSquareCoor2.x,
+            yTo = _this11$getSquareCoor2.y;
 
         xFrom += squareSize / 2;
         yFrom += squareSize / 2;
@@ -607,7 +604,7 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
         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,
@@ -625,8 +622,8 @@ 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;
       }
 
@@ -645,8 +642,8 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
       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",

package/dist/lib/impl/ArrowTip.js

@@ -42,9 +42,9 @@ function ArrowTip(props) {
     markerHeight: 4,
     refX: 2.5,
     refY: 2,
-    orient: "auto",
-    fill: props.color
+    orient: "auto"
   }, /*#__PURE__*/_react["default"].createElement("path", {
+    fill: props.color,
     d: "M 4,2 L 0,4 L 1,2 L 0,0 Z"
   }));
 }

package/dist/lib/impl/Motion.js

@@ -0,0 +1,133 @@
+"use strict";
+
+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); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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 DEBUG_KEY = '__kokopu_debug_freeze_motion';
+/**
+ * Wrap some animated content.
+ */
+
+var Motion = /*#__PURE__*/function (_React$Component) {
+  _inherits(Motion, _React$Component);
+
+  var _super = _createSuper(Motion);
+
+  function Motion(props) {
+    var _this;
+
+    _classCallCheck(this, Motion);
+
+    _this = _super.call(this, props);
+    _this.state = {
+      cursor: 0
+    };
+    _this.animationFrameId = null;
+    _this.cursorStop = 1; // WARNING: this hack exists only for testing purposes. DO NOT USE IT IN PRODUCTION.
+
+    if (typeof window[DEBUG_KEY] === 'number' && window[DEBUG_KEY] >= 0 && window[DEBUG_KEY] <= 1) {
+      _this.cursorStop = window[DEBUG_KEY];
+    }
+
+    return _this;
+  }
+
+  _createClass(Motion, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+
+      this.animationFrameId = window.requestAnimationFrame(function (ts) {
+        return _this2.handleAnimationStep(ts);
+      });
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (this.animationFrameId !== null) {
+        window.cancelAnimationFrame(this.animationFrameId);
+        this.animationFrameId = null;
+      }
+    }
+  }, {
+    key: "handleAnimationStep",
+    value: function handleAnimationStep(timestamp) {
+      var _this3 = this;
+
+      if (this.initialTimestamp === undefined) {
+        this.initialTimestamp = timestamp;
+      } // Compute the animation cursor and update the state.
+
+
+      var cursor = (timestamp - this.initialTimestamp) / this.props.duration;
+
+      if (cursor < 0) {
+        cursor = 0;
+      } else if (cursor > this.cursorStop) {
+        cursor = this.cursorStop;
+      }
+
+      this.setState({
+        cursor: cursor
+      }); // Schedule the next animation frame if necessary.
+
+      if (cursor === this.cursorStop) {
+        this.animationFrameId = null;
+      } else {
+        this.animationFrameId = window.requestAnimationFrame(function (ts) {
+          return _this3.handleAnimationStep(ts);
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return this.props.children(this.state.cursor);
+    }
+  }]);
+
+  return Motion;
+}(_react["default"].Component);
+
+exports["default"] = Motion;
+Motion.propTypes = {
+  /**
+   * Duration of the animation. Must be > 0.
+   */
+  duration: _propTypes["default"].number.isRequired,
+
+  /**
+   * Factory for the content being animated. The animation cursor is guaranteed to be valued between 0 and 1 inclusive.
+   */
+  children: _propTypes["default"].func.isRequired
+};

package/graphic_test_src/05_chessboard_move.js

@@ -32,8 +32,8 @@ testApp([ /* eslint-disable react/jsx-key */
 	<Chessboard move="e4" animated={false} />,
 	<Chessboard move="Nf3" moveArrowVisible={false} animated={false} />,
 	<Chessboard move="Nf4" animated={false} />,
-	<Chessboard position="rnbqkbnr/pppp1ppp/4p3/8/3PP3/8/PPP2PPP/RNBQKBNR b KQkq - 0 2" move="Bb4+" moveArrowVisible={true} flipped={true} animated={false} />,
-	<Chessboard position={pos} move={move} animated={false} moveArrowColor="g" />,
+	<Chessboard position="rnbqkbnr/pppp1ppp/4p3/8/3PP3/8/PPP2PPP/RNBQKBNR b KQkq - 0 2" move="Bb4+" moveArrowVisible={true} flipped={true} animated={true} />,
+	<Chessboard position={pos} move={move} animated={true} moveArrowColor="g" />,
 	<Chessboard position="r3k2r/pppppppp/8/8/8/8/PPPPPPPP/R3K2R b KQkq - 0 1" move="O-O-O" animated={false} moveArrowColor="r" />,
 	<Chessboard position="rnbqkbnr/ppp1p1pp/8/3pPp2/8/8/PPPP1PPP/RNBQKBNR w KQkq f6 0 3" move="exf6" animated={false} moveArrowColor="y" />,
 	<Chessboard position="8/8/8/1K6/8/4k3/1p6/8 b - - 0 1" move="b1=R+" animated={false} moveArrowColor="b" />,

package/graphic_test_src/06a_chessboard_animated_move.js

@@ -0,0 +1,36 @@
+/******************************************************************************
+ *                                                                            *
+ *    This file is part of Kokopu-React, a JavaScript chess library.          *
+ *    Copyright (C) 2021-2022  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *                                                                            *
+ *    This program is free software: you can redistribute it and/or           *
+ *    modify it under the terms of the GNU Lesser General Public License      *
+ *    as published by the Free Software Foundation, either version 3 of       *
+ *    the License, or (at your option) any later version.                     *
+ *                                                                            *
+ *    This program is distributed in the hope that it will be useful,         *
+ *    but WITHOUT ANY WARRANTY; without even the implied warranty of          *
+ *    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the            *
+ *    GNU Lesser General Public License for more details.                     *
+ *                                                                            *
+ *    You should have received a copy of the GNU Lesser General               *
+ *    Public License along with this program. If not, see                     *
+ *    <http://www.gnu.org/licenses/>.                                         *
+ *                                                                            *
+ ******************************************************************************/
+
+
+import React from 'react';
+import testApp from './common/test_app';
+import { Chessboard } from '../src/index';
+
+window['__kokopu_debug_freeze_motion'] = 0.09;
+
+testApp([ /* eslint-disable react/jsx-key */
+	<Chessboard move="e4" animated={true} />,
+	<Chessboard move="Nf3" animated={true} moveArrowVisible={false} />,
+	<Chessboard position="r1bqkbnr/pppppppp/n7/8/4P3/8/PPPP1PPP/RNBQKBNR w KQkq - 1 2" move="Bxa6" animated={true} flipped />,
+	<Chessboard position="r3k2r/pppppppp/8/8/8/8/PPPPPPPP/R3K2R b KQkq - 0 1" move="O-O-O" animated={true} />,
+	<Chessboard position="rnbqkbnr/ppp1p1pp/8/3pPp2/8/8/PPPP1PPP/RNBQKBNR w KQkq f6 0 3" move="exf6" animated={true} />,
+	<Chessboard position="8/8/8/1K6/8/4k3/1p6/8 b - - 0 1" move="b1=R+" animated={true} />,
+]); /* eslint-enable react/jsx-key */

package/graphic_test_src/06b_chessboard_animated_move.js

@@ -0,0 +1,36 @@
+/******************************************************************************
+ *                                                                            *
+ *    This file is part of Kokopu-React, a JavaScript chess library.          *
+ *    Copyright (C) 2021-2022  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *                                                                            *
+ *    This program is free software: you can redistribute it and/or           *
+ *    modify it under the terms of the GNU Lesser General Public License      *
+ *    as published by the Free Software Foundation, either version 3 of       *
+ *    the License, or (at your option) any later version.                     *
+ *                                                                            *
+ *    This program is distributed in the hope that it will be useful,         *
+ *    but WITHOUT ANY WARRANTY; without even the implied warranty of          *
+ *    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the            *
+ *    GNU Lesser General Public License for more details.                     *
+ *                                                                            *
+ *    You should have received a copy of the GNU Lesser General               *
+ *    Public License along with this program. If not, see                     *
+ *    <http://www.gnu.org/licenses/>.                                         *
+ *                                                                            *
+ ******************************************************************************/
+
+
+import React from 'react';
+import testApp from './common/test_app';
+import { Chessboard } from '../src/index';
+
+window['__kokopu_debug_freeze_motion'] = 0.7;
+
+testApp([ /* eslint-disable react/jsx-key */
+	<Chessboard move="e4" animated={true} />,
+	<Chessboard move="Nf3" animated={true} moveArrowVisible={false} />,
+	<Chessboard position="r1bqkbnr/pppppppp/n7/8/4P3/8/PPPP1PPP/RNBQKBNR w KQkq - 1 2" move="Bxa6" animated={true} flipped />,
+	<Chessboard position="r3k2r/pppppppp/8/8/8/8/PPPPPPPP/R3K2R b KQkq - 0 1" move="O-O-O" animated={true} />,
+	<Chessboard position="rnbqkbnr/ppp1p1pp/8/3pPp2/8/8/PPPP1PPP/RNBQKBNR w KQkq f6 0 3" move="exf6" animated={true} />,
+	<Chessboard position="8/8/8/1K6/8/4k3/1p6/8 b - - 0 1" move="b1=R+" animated={true} />,
+]); /* eslint-enable react/jsx-key */

package/graphic_test_src/06c_chessboard_animated_move.js

@@ -0,0 +1,36 @@
+/******************************************************************************
+ *                                                                            *
+ *    This file is part of Kokopu-React, a JavaScript chess library.          *
+ *    Copyright (C) 2021-2022  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *                                                                            *
+ *    This program is free software: you can redistribute it and/or           *
+ *    modify it under the terms of the GNU Lesser General Public License      *
+ *    as published by the Free Software Foundation, either version 3 of       *
+ *    the License, or (at your option) any later version.                     *
+ *                                                                            *
+ *    This program is distributed in the hope that it will be useful,         *
+ *    but WITHOUT ANY WARRANTY; without even the implied warranty of          *
+ *    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the            *
+ *    GNU Lesser General Public License for more details.                     *
+ *                                                                            *
+ *    You should have received a copy of the GNU Lesser General               *
+ *    Public License along with this program. If not, see                     *
+ *    <http://www.gnu.org/licenses/>.                                         *
+ *                                                                            *
+ ******************************************************************************/
+
+
+import React from 'react';
+import testApp from './common/test_app';
+import { Chessboard } from '../src/index';
+
+window['__kokopu_debug_freeze_motion'] = 0.91;
+
+testApp([ /* eslint-disable react/jsx-key */
+	<Chessboard move="e4" animated={true} />,
+	<Chessboard move="Nf3" animated={true} moveArrowVisible={false} />,
+	<Chessboard position="r1bqkbnr/pppppppp/n7/8/4P3/8/PPPP1PPP/RNBQKBNR w KQkq - 1 2" move="Bxa6" animated={true} flipped />,
+	<Chessboard position="r3k2r/pppppppp/8/8/8/8/PPPPPPPP/R3K2R b KQkq - 0 1" move="O-O-O" animated={true} />,
+	<Chessboard position="rnbqkbnr/ppp1p1pp/8/3pPp2/8/8/PPPP1PPP/RNBQKBNR w KQkq f6 0 3" move="exf6" animated={true} />,
+	<Chessboard position="8/8/8/1K6/8/4k3/1p6/8 b - - 0 1" move="b1=R+" animated={true} />,
+]); /* eslint-enable react/jsx-key */