kokopu-react 1.7.1 → 1.9.0

package/dist/lib/Chessboard.js

@@ -11,9 +11,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactDraggable = _interopRequireDefault(require("react-draggable"));
 
-var _reactMotion = require("react-motion");
-
-var _kokopu = _interopRequireDefault(require("kokopu"));
+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();
@@ -161,12 +162,10 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
 
 
       var squares = [];
-
-      _kokopu["default"].forEachSquare(function (sq) {
-        return squares.push(_this2.renderSquare(squareSize, colorset, sq));
+      (0, _kokopu.forEachSquare)(function (sq) {
+        return squares.push(_this3.renderSquare(squareSize, colorset, sq));
       }); // Render coordinates.
 
-
       var rankCoordinates = [];
       var fileCoordinates = [];
 
@@ -193,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);
@@ -217,16 +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 = [];
-
-      _kokopu["default"].forEachSquare(function (sq) {
-        return pieces.push(_this4.renderPieceAnimated(positionBefore, move, alpha, squareSize, pieceset, sq));
+      (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, alpha, squareSize, colorset), this.renderTurnFlag(_kokopu["default"].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).
@@ -235,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);
@@ -246,15 +239,13 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
 
       var pieces = [];
       var handles = [];
+      (0, _kokopu.forEachSquare)(function (sq) {
+        pieces.push(_this6.renderPiece(position, squareSize, pieceset, sq));
 
-      _kokopu["default"].forEachSquare(function (sq) {
-        pieces.push(_this5.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));
     }
   }, {
@@ -270,7 +261,7 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
         y: y,
         width: squareSize,
         height: squareSize,
-        fill: colorset[_kokopu["default"].squareColor(sq)]
+        fill: colorset[(0, _kokopu.squareColor)(sq)]
       });
     }
   }, {
@@ -321,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) {
@@ -337,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()) {
@@ -348,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", {
@@ -416,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;
@@ -440,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);
           }
         });
       });
@@ -451,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,
@@ -471,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,
@@ -491,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(' '),
@@ -515,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 {
@@ -525,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) {
@@ -533,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,
@@ -552,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) {
@@ -560,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;
@@ -582,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;
@@ -598,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;
@@ -613,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,
@@ -631,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;
       }
 
@@ -651,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",
@@ -905,9 +896,9 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "getSquareCoordinates",
     value: function getSquareCoordinates(squareSize, sq) {
-      var _kokopu$squareToCoord = _kokopu["default"].squareToCoordinates(sq),
-          file = _kokopu$squareToCoord.file,
-          rank = _kokopu$squareToCoord.rank;
+      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;
@@ -956,7 +947,7 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
       } // Compute the position after the move and return the result.
 
 
-      var positionAfter = new _kokopu["default"].Position(positionInfo.position);
+      var positionAfter = new _kokopu.Position(positionInfo.position);
       positionAfter.play(moveInfo.move);
       return {
         positionError: false,
@@ -975,7 +966,7 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
     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 ? _kokopu["default"].coordinatesToSquare(file, rank) : '-';
+      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.
@@ -1146,26 +1137,22 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
 exports["default"] = Chessboard;
 Chessboard.propTypes = {
   /**
-   * Displayed position. Can be a [kokopu.Position](https://kokopu.yo35.org/docs/Position.html) object,
+   * 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/global.html#GameVariant) supported by Kokopu. For instance:
+   * [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["default"].Position), _propTypes["default"].string]),
+  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/MoveDescriptor.html) object
+   * 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([function (props, propName, componentName) {
-    if (!_kokopu["default"].isMoveDescriptor(props[propName])) {
-      return new Error("Invalid prop ".concat(propName, " supplied to ").concat(componentName, ". Validation failed."));
-    }
-  }, _propTypes["default"].string]),
+  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'`).
@@ -1332,7 +1319,7 @@ function computeCoordinateFontSize(squareSize) {
 
 
 function parsePosition(position) {
-  if (position instanceof _kokopu["default"].Position) {
+  if (position instanceof _kokopu.Position) {
     return {
       error: false,
       position: position
@@ -1341,11 +1328,11 @@ function parsePosition(position) {
     try {
       return {
         error: false,
-        position: new _kokopu["default"].Position(position)
+        position: new _kokopu.Position(position)
       };
     } catch (e) {
       // istanbul ignore else
-      if (e instanceof _kokopu["default"].exception.InvalidFEN) {
+      if (e instanceof _kokopu.exception.InvalidFEN) {
         return {
           error: true,
           message: e.message
@@ -1367,7 +1354,7 @@ function parsePosition(position) {
 
 
 function parseMove(position, move) {
-  if (_kokopu["default"].isMoveDescriptor(move)) {
+  if (move instanceof _kokopu.MoveDescriptor) {
     return {
       error: false,
       move: move
@@ -1380,7 +1367,7 @@ function parseMove(position, move) {
       };
     } catch (e) {
       // istanbul ignore else
-      if (e instanceof _kokopu["default"].exception.InvalidNotation) {
+      if (e instanceof _kokopu.exception.InvalidNotation) {
         return {
           error: true,
           message: e.message

package/dist/lib/ErrorBox.js

@@ -11,6 +11,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _i18n = _interopRequireDefault(require("./i18n"));
 
+var _util = require("./impl/util");
+
 require("./css/error_box.css");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -133,7 +135,7 @@ function ellipsisAt(text, pos, backwardCharacters, forwardCharacters, lineNumber
   var secondLine = Array(1 + e1.length + pos - p1).join(' ') + '^';
 
   if (lineNumber) {
-    secondLine += ' (' + _i18n["default"].LINE.replace(/\{0\}/g, lineNumber) + ')';
+    secondLine += " (".concat((0, _util.fillPlaceholder)(_i18n["default"].LINE, lineNumber), ")");
   }
 
   return excerpt + '\n' + secondLine;

package/dist/lib/Movetext.js

@@ -11,10 +11,12 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireDefault(require("react"));
 
-var _kokopu = _interopRequireDefault(require("kokopu"));
+var _kokopu = require("kokopu");
 
 var _HtmlSanitizer = _interopRequireDefault(require("./impl/HtmlSanitizer"));
 
+var _util = require("./impl/util");
+
 var _Chessboard = _interopRequireDefault(require("./Chessboard"));
 
 var _ErrorBox = _interopRequireDefault(require("./ErrorBox"));
@@ -147,7 +149,7 @@ var Movetext = /*#__PURE__*/function (_React$Component) {
       }, sanitizeHtml(title));
       var ratingElement = rating === undefined ? undefined : /*#__PURE__*/_react["default"].createElement("span", {
         className: "kokopu-header-playerRating"
-      }, sanitizeHtml(rating));
+      }, rating);
       var separator = title === undefined || rating === undefined ? undefined : "\xA0"; // \u00a0 ==  
 
       var titleRatingGroup = title === undefined && rating === undefined ? undefined : /*#__PURE__*/_react["default"].createElement("span", {
@@ -225,7 +227,7 @@ var Movetext = /*#__PURE__*/function (_React$Component) {
         return undefined;
       }
 
-      annotator = _i18n["default"].ANNOTATED_BY.replace(/\{0\}/g, annotator);
+      annotator = (0, _util.fillPlaceholder)(_i18n["default"].ANNOTATED_BY, annotator);
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "kokopu-header-annotator",
         key: "annotator"
@@ -405,7 +407,7 @@ var Movetext = /*#__PURE__*/function (_React$Component) {
         return /*#__PURE__*/_react["default"].createElement("span", {
           className: "kokopu-nag",
           key: nag
-        }, _kokopu["default"].nagSymbol(nag));
+        }, (0, _kokopu.nagSymbol)(nag));
       }); // Class
 
       var nodeId = node.id();
@@ -706,14 +708,14 @@ var Movetext = /*#__PURE__*/function (_React$Component) {
 exports["default"] = Movetext;
 Movetext.propTypes = {
   /**
-   * Displayed position. Can be a [kokopu.Game](https://kokopu.yo35.org/docs/Game.html) object,
-   * a [kokopu.Database](https://kokopu.yo35.org/docs/Database.html) object,
+   * Displayed position. Can be a [kokopu.Game](https://kokopu.yo35.org/docs/current/classes/Game.html) object,
+   * a [kokopu.Database](https://kokopu.yo35.org/docs/current/classes/Database.html) object,
    * or a [PGN string](https://en.wikipedia.org/wiki/Portable_Game_Notation).
    */
-  game: _propTypes["default"].oneOfType([_propTypes["default"].instanceOf(_kokopu["default"].Game), _propTypes["default"].instanceOf(_kokopu["default"].Database), _propTypes["default"].string]),
+  game: _propTypes["default"].oneOfType([_propTypes["default"].instanceOf(_kokopu.Game), _propTypes["default"].instanceOf(_kokopu.Database), _propTypes["default"].string]),
 
   /**
-   * Index of the game to display (only if attribute `game` is a [kokopu.Database](https://kokopu.yo35.org/docs/Database.html)
+   * Index of the game to display (only if attribute `game` is a [kokopu.Database](https://kokopu.yo35.org/docs/current/classes/Database.html)
    * or a [PGN string](https://en.wikipedia.org/wiki/Portable_Game_Notation)): `0` for the first game of the database/PGN, `1` for the second one, etc.
    * If omitted, the first game of the database/PGN is displayed.
    */
@@ -759,7 +761,7 @@ Movetext.propTypes = {
 
   /**
    * ID of the selected move (or `'start'` for the beginning of the main variation).
-   * Use [kokopu.Node#id](https://kokopu.yo35.org/docs/Node.html#id) to get the ID of a game move.
+   * Use [kokopu.Node#id](https://kokopu.yo35.org/docs/current/classes/Node.html#id) to get the ID of a game move.
    */
   selection: _propTypes["default"].string,
 
@@ -773,7 +775,7 @@ Movetext.propTypes = {
   /**
    * Callback invoked when the user selects a move (only if `interactionMode` is set to `'selectMove'`).
    *
-   * @param {string?} nodeId ID of the selected move (as returned by [kokopu.Node#id](https://kokopu.yo35.org/docs/Node.html#id)),
+   * @param {string?} nodeId ID of the selected move (as returned by [kokopu.Node#id](https://kokopu.yo35.org/docs/current/classes/Node.html#id)),
    *                         `'start'` for the beginning of the main variation, or `undefined` if the user unselects the previously selected move.
    * @param {string} evtOrigin Origin of the event. Can be:
    *                        - `'key-first'`: the event has been triggered by the "go-to-first-move" key (aka. the home key),
@@ -785,7 +787,7 @@ Movetext.propTypes = {
   onMoveSelected: _propTypes["default"].func
 };
 Movetext.defaultProps = {
-  game: new _kokopu["default"].Game(),
+  game: new _kokopu.Game(),
   gameIndex: 0,
   diagramOptions: {},
   pieceSymbols: 'native',
@@ -863,21 +865,28 @@ function sanitizeHtml(text, sanitizer) {
 
 
 function parseGame(game, gameIndex) {
-  if (game instanceof _kokopu["default"].Game) {
+  if (game instanceof _kokopu.Game) {
     return {
       error: false,
       game: game
     };
-  } else if (game instanceof _kokopu["default"].Database || typeof game === 'string') {
+  } else if (game instanceof _kokopu.Database || typeof game === 'string') {
+    if (!Number.isInteger(gameIndex) || gameIndex < 0) {
+      return {
+        error: true,
+        message: _i18n["default"].INVALID_GAME_INDEX_ATTRIBUTE_ERROR_MESSAGE
+      };
+    }
+
     try {
-      var result = game instanceof _kokopu["default"].Database ? game.game(gameIndex) : _kokopu["default"].pgnRead(game, gameIndex);
+      var result = game instanceof _kokopu.Database ? game.game(gameIndex) : (0, _kokopu.pgnRead)(game, gameIndex);
       return {
         error: false,
         game: result
       };
     } catch (e) {
       // istanbul ignore else
-      if (e instanceof _kokopu["default"].exception.InvalidPGN) {
+      if (e instanceof _kokopu.exception.InvalidPGN) {
         return {
           error: true,
           message: e.message,

package/dist/lib/i18n.js

@@ -44,7 +44,8 @@ var i18n = {
   },
   ANNOTATED_BY: 'Annotated by {0}',
   INVALID_PGN_ERROR_TITLE: 'Invalid PGN string.',
-  INVALID_GAME_ATTRIBUTE_ERROR_MESSAGE: 'Invalid "game" attribute.'
+  INVALID_GAME_ATTRIBUTE_ERROR_MESSAGE: 'Invalid "game" attribute.',
+  INVALID_GAME_INDEX_ATTRIBUTE_ERROR_MESSAGE: 'Invalid "game index" attribute.'
 };
 var _default = i18n;
 exports["default"] = _default;

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"
   }));
 }