kokopu-react 1.4.0 → 1.5.1

package/dist/lib/Movetext.js

@@ -0,0 +1,851 @@
+"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"));
+
+var _kokopu = _interopRequireDefault(require("kokopu"));
+
+var _HtmlSanitizer = _interopRequireDefault(require("./impl/HtmlSanitizer"));
+
+var _Chessboard = _interopRequireDefault(require("./Chessboard"));
+
+var _ErrorBox = _interopRequireDefault(require("./ErrorBox"));
+
+var _i18n = _interopRequireDefault(require("./i18n"));
+
+require("./css/fonts.css");
+
+require("./css/movetext.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": 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 _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 _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+
+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 _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 || 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 : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+/**
+ * Display a chess game, i.e. the headers (name of the players, event, etc.), the moves, and all the related annotations if any (comments, variations, NAGs...).
+ */
+var Movetext = /*#__PURE__*/function (_React$Component) {
+  _inherits(Movetext, _React$Component);
+
+  var _super = _createSuper(Movetext);
+
+  function Movetext(props) {
+    var _this;
+
+    _classCallCheck(this, Movetext);
+
+    _this = _super.call(this, props);
+    _this.focusFieldRef = /*#__PURE__*/_react["default"].createRef();
+    return _this;
+  }
+
+  _createClass(Movetext, [{
+    key: "render",
+    value: function render() {
+      var info = parseGame(this.props.game, this.props.gameIndex);
+
+      if (info.error) {
+        return /*#__PURE__*/_react["default"].createElement(_ErrorBox["default"], {
+          title: _i18n["default"].INVALID_PGN_ERROR_TITLE,
+          message: info.message,
+          text: info.text,
+          errorIndex: info.errorIndex,
+          lineNumber: info.lineNumber
+        });
+      }
+
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: "kokopu-movetext"
+      }, this.renderHeaders(info.game), this.renderBody(info.game), this.renderFocusField());
+    }
+  }, {
+    key: "renderHeaders",
+    value: function renderHeaders(game) {
+      if (!this.props.headerVisible) {
+        return undefined;
+      }
+
+      var headers = [];
+      headers.push(this.renderPlayerHeaders(game, 'w'));
+      headers.push(this.renderPlayerHeaders(game, 'b'));
+      headers.push(this.renderEventRoundHeaders(game));
+      headers.push(this.renderDateSiteHeaders(game));
+      headers.push(this.renderAnnotatorHeader(game));
+      return headers.some(function (element) {
+        return element !== undefined;
+      }) ? /*#__PURE__*/_react["default"].createElement("div", {
+        className: "kokopu-headers"
+      }, headers) : undefined;
+    }
+    /**
+     * Header containing the player-related information (name, rating, title) corresponding to the given color.
+     */
+
+  }, {
+    key: "renderPlayerHeaders",
+    value: function renderPlayerHeaders(game, color) {
+      var playerName = game.playerName(color);
+
+      if (playerName === undefined) {
+        return undefined;
+      }
+
+      var title = game.playerTitle(color);
+      var rating = game.playerElo(color);
+      var classNames = ['kokopu-headerGroup-player', color === 'w' ? 'kokopu-headerGroup-whitePlayer' : 'kokopu-headerGroup-blackPlayer'];
+
+      var colorTag = /*#__PURE__*/_react["default"].createElement("span", {
+        className: "kokopu-colorTag"
+      });
+
+      var playerNameElement = /*#__PURE__*/_react["default"].createElement("span", {
+        className: "kokopu-header-playerName"
+      }, sanitizeHtml(playerName));
+
+      var titleElement = title === undefined ? undefined : /*#__PURE__*/_react["default"].createElement("span", {
+        className: "kokopu-header-playerTitle"
+      }, sanitizeHtml(title));
+      var ratingElement = rating === undefined ? undefined : /*#__PURE__*/_react["default"].createElement("span", {
+        className: "kokopu-header-playerRating"
+      }, sanitizeHtml(rating));
+      var separator = title === undefined || rating === undefined ? undefined : "\xA0"; // \u00a0 == &nbsp;
+
+      var titleRatingGroup = title === undefined && rating === undefined ? undefined : /*#__PURE__*/_react["default"].createElement("span", {
+        className: "kokopu-headerGroup-titleRating"
+      }, titleElement, separator, ratingElement);
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: classNames.join(' '),
+        key: 'player-' + color
+      }, colorTag, playerNameElement, titleRatingGroup);
+    }
+    /**
+     * Header containing the event-related information: event + round.
+     */
+
+  }, {
+    key: "renderEventRoundHeaders",
+    value: function renderEventRoundHeaders(game) {
+      var evt = game.event();
+
+      if (evt === undefined) {
+        return undefined;
+      }
+
+      var round = game.round();
+      var roundElement = round === undefined ? undefined : /*#__PURE__*/_react["default"].createElement("span", {
+        className: "kokopu-header-round"
+      }, sanitizeHtml(round));
+
+      var evtElement = /*#__PURE__*/_react["default"].createElement("span", {
+        className: "kokopu-header-event"
+      }, sanitizeHtml(evt));
+
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: "kokopu-headerGroup-eventRound",
+        key: "event-round"
+      }, evtElement, roundElement);
+    }
+    /**
+     * Header containing the date/place information.
+     */
+
+  }, {
+    key: "renderDateSiteHeaders",
+    value: function renderDateSiteHeaders(game) {
+      var date = game.date();
+      var site = game.site();
+
+      if (date === undefined && site === undefined) {
+        return undefined;
+      }
+
+      var dateElement = date === undefined ? undefined : /*#__PURE__*/_react["default"].createElement("span", {
+        className: "kokopu-header-date"
+      }, capitalizeFirstWord(game.dateAsString()));
+      var siteElement = site === undefined ? undefined : /*#__PURE__*/_react["default"].createElement("span", {
+        className: "kokopu-header-site"
+      }, sanitizeHtml(site));
+      var separator = date === undefined || site === undefined ? undefined : "\xA0\u2013\xA0"; // \u00a0 == &nbsp;   \u2013 == &ndash;
+
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: "kokopu-headerGroup-dateSite",
+        key: "date-site"
+      }, dateElement, separator, siteElement);
+    }
+    /**
+     * Header containing the annotator information.
+     */
+
+  }, {
+    key: "renderAnnotatorHeader",
+    value: function renderAnnotatorHeader(game) {
+      var annotator = game.annotator();
+
+      if (annotator === undefined) {
+        return undefined;
+      }
+
+      annotator = _i18n["default"].ANNOTATED_BY.replace(/\{0\}/g, annotator);
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: "kokopu-header-annotator",
+        key: "annotator"
+      }, sanitizeHtml(annotator));
+    }
+  }, {
+    key: "renderFocusField",
+    value: function renderFocusField() {
+      var _this2 = this;
+
+      if (this.props.interactionMode !== 'selectMove') {
+        return undefined;
+      }
+
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: "kokopu-focusFieldContainer"
+      }, /*#__PURE__*/_react["default"].createElement("a", {
+        className: "kokopu-focusField",
+        href: "#",
+        ref: this.focusFieldRef,
+        onKeyDown: function onKeyDown(evt) {
+          return _this2.handleKeyDownInFocusField(evt);
+        }
+      }));
+    }
+  }, {
+    key: "renderBody",
+    value: function renderBody(game) {
+      return this.renderVariation(this.getNotationTextBuilder(), game.mainVariation(), 'main-variation', true, game.result());
+    }
+    /**
+     * Render the given variation and its sub-variations, recursively.
+     */
+
+  }, {
+    key: "renderVariation",
+    value: function renderVariation(notationTextBuilder, variation, variationKey, isMainVariation, gameResult) {
+      var moveGroups = []; // ... and also long comments and long sub-variations
+
+      var currentMoveGroupElements = []; // Close the current move group, if any.
+
+      function closeMoveGroup() {
+        if (!variation.isLongVariation() || currentMoveGroupElements.length === 0) {
+          return;
+        }
+
+        moveGroups.push( /*#__PURE__*/_react["default"].createElement("div", {
+          className: "kokopu-moveGroup",
+          key: 'group-' + moveGroups.length
+        }, currentMoveGroupElements));
+        currentMoveGroupElements = [];
+      } // Write the initial comment, if any.
+
+
+      var variationComment = this.extractComment(variation);
+
+      if (variationComment !== undefined) {
+        if (variation.isLongComment()) {
+          moveGroups.push(this.renderComment(variation, variationComment, true));
+        } else {
+          currentMoveGroupElements.push(this.renderComment(variation, variationComment, true));
+        }
+      } // Visit all the PGN nodes (one node per move) within the variation.
+
+
+      var forcePrintMoveNumber = true;
+      var node = variation.first();
+
+      while (node !== undefined) {
+        // Write the move, including directly related information (i.e. move number + NAGs).
+        currentMoveGroupElements.push(this.renderMove(notationTextBuilder, node, forcePrintMoveNumber)); // Write the comment (if any).
+
+        var nodeComment = this.extractComment(node);
+
+        if (nodeComment !== undefined) {
+          if (node.isLongComment()) {
+            closeMoveGroup();
+            moveGroups.push(this.renderComment(node, nodeComment, false));
+          } else {
+            currentMoveGroupElements.push(this.renderComment(node, nodeComment, false));
+          }
+        } // Write the sub-variations.
+
+
+        var hasNonEmptySubVariations = false;
+
+        var _iterator = _createForOfIteratorHelper(node.variations().entries()),
+            _step;
+
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var _step$value = _slicedToArray(_step.value, 2),
+                index = _step$value[0],
+                subVariation = _step$value[1];
+
+            var subVariationElement = this.renderVariation(notationTextBuilder, subVariation, node.fullMoveNumber() + node.moveColor() + '-variation-' + index, false);
+
+            if (subVariationElement) {
+              if (subVariation.isLongVariation()) {
+                closeMoveGroup();
+                moveGroups.push(subVariationElement);
+              } else {
+                currentMoveGroupElements.push(subVariationElement);
+              }
+
+              hasNonEmptySubVariations = true;
+            }
+          } // Back to the current variation, go to the next move.
+
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+
+        forcePrintMoveNumber = nodeComment !== undefined || hasNonEmptySubVariations;
+        node = node.next();
+      } // Append the game result at the end of the main variation.
+
+
+      if (isMainVariation && gameResult !== '*') {
+        currentMoveGroupElements.push( /*#__PURE__*/_react["default"].createElement("span", {
+          className: "kokopu-gameResult",
+          key: "gameResult"
+        }, formatResult(gameResult)));
+      } // Close the last move group, and return the result.
+
+
+      closeMoveGroup();
+      var elements = variation.isLongVariation() ? moveGroups : currentMoveGroupElements;
+
+      if (elements.length === 0) {
+        return undefined;
+      }
+
+      if (isMainVariation) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          className: "kokopu-variation kokopu-mainVariation",
+          key: variationKey
+        }, elements);
+      } else if (variation.isLongVariation()) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          className: "kokopu-variation kokopu-subVariation",
+          key: variationKey
+        }, elements);
+      } else {
+        return /*#__PURE__*/_react["default"].createElement("span", {
+          className: "kokopu-variation kokopu-subVariation",
+          key: variationKey
+        }, elements);
+      }
+    }
+    /**
+     * Render the given move, move number, and NAG (if any).
+     */
+
+  }, {
+    key: "renderMove",
+    value: function renderMove(notationTextBuilder, node, forcePrintMoveNumber) {
+      var _this3 = this;
+
+      // Move number
+      var moveNumber = undefined;
+
+      if (forcePrintMoveNumber || node.moveColor() === 'w') {
+        var moveNumberText = node.fullMoveNumber() + (node.moveColor() === 'w' ? '.' : "\u2026");
+        moveNumber = /*#__PURE__*/_react["default"].createElement("span", {
+          className: "kokopu-moveNumber"
+        }, moveNumberText);
+      } // SAN notation.
+
+
+      var notationText = notationTextBuilder(node.notation()); // NAGs
+
+      var nagElements = node.nags().map(function (nag) {
+        return /*#__PURE__*/_react["default"].createElement("span", {
+          className: "kokopu-nag",
+          key: nag
+        }, _kokopu["default"].nagSymbol(nag));
+      }); // Class
+
+      var nodeId = node.id();
+      var moveClassNames = ['kokopu-move'];
+      var onClick = undefined;
+
+      if (this.props.selection && this.props.selection === nodeId) {
+        moveClassNames.push('kokopu-selectedMove');
+      }
+
+      if (this.props.interactionMode === 'selectMove') {
+        moveClassNames.push('kokopu-clickableMove');
+
+        onClick = function onClick() {
+          return _this3.handleNodeClicked(nodeId);
+        };
+      }
+
+      return /*#__PURE__*/_react["default"].createElement("span", {
+        className: moveClassNames.join(' '),
+        key: node.fullMoveNumber() + node.moveColor()
+      }, /*#__PURE__*/_react["default"].createElement("span", {
+        className: "kokopu-moveContent",
+        onClick: onClick
+      }, moveNumber, /*#__PURE__*/_react["default"].createElement("span", {
+        className: "kokopu-moveNotation"
+      }, notationText), nagElements.length === 0 ? undefined : nagElements));
+    }
+    /**
+     * Render the given text comment with its diagrams, if any.
+     */
+
+  }, {
+    key: "renderComment",
+    value: function renderComment(node, comment, isVariation) {
+      var content;
+
+      if (this.props.diagramVisible && comment.includes('[#]')) {
+        content = [];
+        var sanitizer = createSanitizer();
+        var isFirstPart = true;
+
+        var _iterator2 = _createForOfIteratorHelper(comment.split('[#]').entries()),
+            _step2;
+
+        try {
+          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+            var _step2$value = _slicedToArray(_step2.value, 2),
+                index = _step2$value[0],
+                part = _step2$value[1];
+
+            if (!isFirstPart) {
+              var position = isVariation ? node.initialPosition() : node.position();
+
+              var diagram = /*#__PURE__*/_react["default"].createElement(_Chessboard["default"], {
+                position: position,
+                squareMarkers: node.tag('csl'),
+                arrowMarkers: node.tag('cal'),
+                textMarkers: node.tag('ctl'),
+                flipped: this.props.diagramOptions.flipped,
+                squareSize: this.props.diagramOptions.squareSize,
+                coordinateVisible: this.props.diagramOptions.coordinateVisible,
+                smallScreenLimits: this.props.diagramOptions.smallScreenLimits,
+                colorset: this.props.diagramOptions.colorset,
+                pieceset: this.props.diagramOptions.pieceset
+              });
+
+              content.push( /*#__PURE__*/_react["default"].createElement("div", {
+                className: "kokopu-diagram",
+                key: 'diagram-' + index
+              }, diagram));
+            }
+
+            isFirstPart = false;
+            part = part.trim();
+
+            if (part.length !== 0) {
+              content.push(sanitizeHtml(part, sanitizer));
+            }
+          }
+        } catch (err) {
+          _iterator2.e(err);
+        } finally {
+          _iterator2.f();
+        }
+      } else {
+        content = sanitizeHtml(comment);
+      }
+
+      var key = isVariation ? 'initial-comment' : node.fullMoveNumber() + node.moveColor() + '-comment';
+      return node.isLongComment() ? /*#__PURE__*/_react["default"].createElement("div", {
+        className: "kokopu-comment",
+        key: key
+      }, content) : /*#__PURE__*/_react["default"].createElement("span", {
+        className: "kokopu-comment",
+        key: key
+      }, content);
+    }
+  }, {
+    key: "extractComment",
+    value: function extractComment(node) {
+      var comment = node.comment();
+
+      if (comment) {
+        // Remove the diagrams if necessary.
+        if (!this.props.diagramVisible) {
+          comment = comment.replace(/\[#\]/g, ' ');
+        } // Trim and sanitize the space characters.
+
+
+        comment = comment.replace(/\s+/g, ' ').trim();
+      }
+
+      return comment ? comment : undefined;
+    }
+  }, {
+    key: "handleKeyDownInFocusField",
+    value: function handleKeyDownInFocusField(evt) {
+      if (!this.props.selection) {
+        return;
+      }
+
+      var game = parseGame(this.props.game, this.props.gameIndex).game;
+      var nodeId = false;
+      var evtOrigin = '';
+
+      if (this.props.selection === 'start') {
+        if (evt.key === 'ArrowRight') {
+          nodeId = getNextNodeId(game.mainVariation(), true);
+          evtOrigin = 'key-next';
+        } else if (evt.key === 'End') {
+          nodeId = getLastNodeId(game.mainVariation(), true);
+          evtOrigin = 'key-last';
+        }
+      } else {
+        var currentNode = game.findById(this.props.selection);
+
+        if (!currentNode) {
+          return;
+        }
+
+        if (evt.key === 'Home') {
+          nodeId = 'start';
+          evtOrigin = 'key-first';
+        } else if (evt.key === 'ArrowLeft') {
+          nodeId = getPreviousNodeId(currentNode);
+          evtOrigin = 'key-previous';
+        } else if (evt.key === 'ArrowRight') {
+          nodeId = getNextNodeId(currentNode, false);
+          evtOrigin = 'key-next';
+        } else if (evt.key === 'End') {
+          nodeId = getLastNodeId(currentNode, false);
+          evtOrigin = 'key-last';
+        }
+      }
+
+      if (nodeId && this.props.onMoveSelected) {
+        this.props.onMoveSelected(nodeId, evtOrigin);
+      }
+    }
+  }, {
+    key: "handleNodeClicked",
+    value: function handleNodeClicked(nodeId) {
+      this.focusFieldRef.current.focus();
+
+      if (this.props.onMoveSelected) {
+        this.props.onMoveSelected(nodeId === this.props.selection ? undefined : nodeId, 'click');
+      }
+    }
+    /**
+     * Return the square at the given location.
+     */
+
+  }, {
+    key: "getNotationTextBuilder",
+    value: function getNotationTextBuilder() {
+      var pieceSymbols = this.props.pieceSymbols;
+
+      if (pieceSymbols === 'localized') {
+        var mapping = _i18n["default"].PIECE_SYMBOLS;
+        return function (notation) {
+          return notation.replace(/[KQRBNP]/g, function (match) {
+            return mapping[match];
+          });
+        };
+      } else if (pieceSymbols === 'figurines') {
+        return function (notation) {
+          return figurineNotation(notation, 'alpha');
+        };
+      } else if (pieceSymbols !== 'native' && pieceSymbols && ['K', 'Q', 'R', 'B', 'N', 'P'].every(function (p) {
+        return typeof pieceSymbols[p] === 'string';
+      })) {
+        return function (notation) {
+          return notation.replace(/[KQRBNP]/g, function (match) {
+            return pieceSymbols[match];
+          });
+        };
+      } else {
+        return function (notation) {
+          return notation;
+        };
+      }
+    }
+  }]);
+
+  return Movetext;
+}(_react["default"].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,
+   * 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]),
+
+  /**
+   * Index of the game to display (only if attribute `game` is a [kokopu.Database](https://kokopu.yo35.org/docs/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.
+   */
+  gameIndex: _propTypes["default"].number,
+
+  /**
+   * Options applicable to the diagrams in the comments. See [Chessboard](#/Components/Chessboard) for more details about each option.
+   */
+  diagramOptions: _propTypes["default"].shape({
+    flipped: _Chessboard["default"].propTypes.flipped,
+    squareSize: _Chessboard["default"].propTypes.squareSize,
+    coordinateVisible: _Chessboard["default"].propTypes.coordinateVisible,
+    smallScreenLimits: _Chessboard["default"].propTypes.smallScreenLimits,
+    colorset: _Chessboard["default"].propTypes.colorset,
+    pieceset: _Chessboard["default"].propTypes.pieceset
+  }),
+
+  /**
+   * Symbols to use for the chess pieces. Can be:
+   * - `'native'`: use the first letter of the piece names (in English),
+   * - `'localized'`: use the symbols defined by `i18n.PIECE_SYMBOLS`,
+   * - `'figurines'`: use the figurines,
+   * - or an object defining 6 string-valued properties named `K`, `Q`, `R`, `B`, `N` and `P`.
+   */
+  pieceSymbols: _propTypes["default"].oneOfType([_propTypes["default"].oneOf(['native', 'localized', 'figurines']), _propTypes["default"].shape({
+    K: _propTypes["default"].string.isRequired,
+    Q: _propTypes["default"].string.isRequired,
+    R: _propTypes["default"].string.isRequired,
+    B: _propTypes["default"].string.isRequired,
+    N: _propTypes["default"].string.isRequired,
+    P: _propTypes["default"].string.isRequired
+  })]),
+
+  /**
+   * Whether the diagrams within the comments (if any) are displayed or not.
+   */
+  diagramVisible: _propTypes["default"].bool,
+
+  /**
+   * Whether the game headers (if any) are displayed or not.
+   */
+  headerVisible: _propTypes["default"].bool,
+
+  /**
+   * 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.
+   */
+  selection: _propTypes["default"].string,
+
+  /**
+   * Type of action allowed with the mouse/keys on the component. If undefined, then the user cannot interact with the component.
+   *
+   * - `'selectMove'` allows the user to select a move.
+   */
+  interactionMode: _propTypes["default"].oneOf(['selectMove']),
+
+  /**
+   * 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)),
+   *                         `'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),
+   *                        - `'key-previous'`: the event has been triggered by the "go-to-previous-move" key (aka. the arrow left key),
+   *                        - `'key-next'`: the event has been triggered by the "go-to-next-move" key (aka. the arrow right key),
+   *                        - `'key-last'`: the event has been triggered by the "go-to-last-move" key (aka. the end key),
+   *                        - `'click'`: the event has been triggered by a mouse click on a move.
+   */
+  onMoveSelected: _propTypes["default"].func
+};
+Movetext.defaultProps = {
+  game: new _kokopu["default"].Game(),
+  gameIndex: 0,
+  diagramOptions: {},
+  pieceSymbols: 'native',
+  diagramVisible: true,
+  headerVisible: true
+};
+/**
+ * Example: `'hello world'` is turned into `'Hello world'`.
+ */
+
+function capitalizeFirstWord(text) {
+  return text.length === 0 ? '' : text.charAt(0).toUpperCase() + text.slice(1);
+}
+
+function formatResult(result) {
+  switch (result) {
+    case '1/2-1/2':
+      return "\xBD\u2013\xBD";
+
+    case '1-0':
+      return "1\u20130";
+
+    case '0-1':
+      return "0\u20131";
+  }
+}
+
+function createSanitizer() {
+  return new _HtmlSanitizer["default"]({
+    allowedTags: ['a', 'span', 'b', 'strong', 'i', 'em', 'mark', 'small', 'del', 'ins', 'sub', 'sup'],
+    allowedAttributes: {
+      '*': ['class', 'id', 'title'],
+      'a': ['href', 'target']
+    }
+  });
+}
+
+function sanitizeHtml(text, sanitizer) {
+  if (!sanitizer) {
+    sanitizer = createSanitizer();
+  }
+
+  var result = sanitizer.parse(text);
+  return result !== null && result !== void 0 ? result : text;
+}
+/**
+ * Decompose the given string into piece symbol characters and sections of non piece symbol characters, and transform the piece symbols into
+ * React objects represented with the given chess font.
+ */
+
+
+function figurineNotation(text, fontName) {
+  var result = [];
+  var beginOfText = 0;
+  var pieceSymbolIndex = 0;
+
+  for (var pos = 0; pos < text.length; ++pos) {
+    var currentChar = text.charAt(pos);
+
+    if (currentChar === 'K' || currentChar === 'Q' || currentChar === 'R' || currentChar === 'B' || currentChar === 'N' || currentChar === 'P') {
+      if (pos > beginOfText) {
+        result.push(text.substring(beginOfText, pos));
+      }
+
+      beginOfText = pos + 1;
+      var key = 'symbol-' + pieceSymbolIndex++;
+      result.push( /*#__PURE__*/_react["default"].createElement("span", {
+        className: 'kokopu-font-' + fontName,
+        key: key
+      }, currentChar));
+    }
+  }
+
+  if (beginOfText < text.length) {
+    result.push(text.substring(beginOfText));
+  }
+
+  return result;
+}
+
+function getPreviousNodeId(currentNode) {
+  var previousNode = currentNode.previous();
+
+  if (previousNode) {
+    return previousNode.id();
+  } else {
+    var parentNode = currentNode.parentVariation().parentNode();
+    return parentNode ? getPreviousNodeId(parentNode) : 'start';
+  }
+}
+
+function getNextNodeId(currentNode, isVariation) {
+  var nextNode = isVariation ? currentNode.first() : currentNode.next();
+  return nextNode ? nextNode.id() : false;
+}
+
+function getLastNodeId(currentNode, isVariation) {
+  currentNode = isVariation ? currentNode.first() : currentNode.next();
+
+  if (!currentNode) {
+    // Ensure that the input node is not already the last one.
+    return false;
+  }
+
+  while (true) {
+    var nextNode = currentNode.next();
+
+    if (!nextNode) {
+      return currentNode.id();
+    }
+
+    currentNode = nextNode;
+  }
+}
+/**
+ * Try to interpret the given object as a chess game.
+ */
+
+
+function parseGame(game, gameIndex) {
+  if (game instanceof _kokopu["default"].Game) {
+    return {
+      error: false,
+      game: game
+    };
+  } else if (game instanceof _kokopu["default"].Database || typeof game === 'string') {
+    try {
+      var result = game instanceof _kokopu["default"].Database ? game.game(gameIndex) : _kokopu["default"].pgnRead(game, gameIndex);
+      return {
+        error: false,
+        game: result
+      };
+    } catch (e) {
+      // istanbul ignore else
+      if (e instanceof _kokopu["default"].exception.InvalidPGN) {
+        return {
+          error: true,
+          message: e.message,
+          text: e.pgn,
+          errorIndex: e.index,
+          lineNumber: e.lineNumber
+        };
+      } else {
+        throw e;
+      }
+    }
+  } else {
+    return {
+      error: true,
+      message: _i18n["default"].INVALID_GAME_ATTRIBUTE_ERROR_MESSAGE
+    };
+  }
+}