kokopu-react 1.0.1 → 1.3.0

package/.nycrc.yml

@@ -0,0 +1,13 @@
+temp-dir: ./build/.nyc_output
+report-dir: ./build/coverage
+
+reporter:
+  - text
+  - html
+
+check-coverage: true
+
+exclude:
+  - build/**
+  - graphic_test_app/**
+  - test/**

package/CHANGELOG.md

@@ -1,6 +1,24 @@
 ChangeLog
 =========
 
+1.3.0 (September 26, 2021)
+--------------------------
+* Expose component `ErrorBox`.
+* Minor fixes in documentation.
+
+1.2.0 (September 13, 2021)
+--------------------------
+* Fix ambiguous castling move issue at Chess960.
+
+1.1.0 (August 15, 2021)
+-----------------------
+* Provide interaction mode `playMoves`.
+* Add code coverage.
+
+1.0.2 (August 10, 2021)
+-----------------------
+* No need for ReactDOM in dependencies (dev-dependencies only).
+
 1.0.1 (July 30, 2021)
 ---------------------
 * Wrong config in `package.json`.

package/README.md

@@ -1,6 +1,8 @@
 Kokopu-React
 ============
 
+<img align="right" width="96" height="96" src="graphics/logo.svg" />
+
 Kokopu-React is a [React](https://reactjs.org/)-based library to create and display chessboard components.
 Kokopu-React is built on top of [Kokopu](https://www.npmjs.com/package/kokopu), a headless library that
 implements all the chess logic (game rules, parsing of [FEN](https://en.wikipedia.org/wiki/Forsyth%E2%80%93Edwards_Notation)
@@ -9,6 +11,7 @@ and [PGN](https://en.wikipedia.org/wiki/Portable_Game_Notation) formats...).
 https://www.npmjs.com/package/kokopu-react
 
 [![Build Status](https://travis-ci.com/yo35/kokopu-react.svg?branch=master)](https://travis-ci.com/yo35/kokopu-react)
+[![Coverage Status](https://coveralls.io/repos/github/yo35/kokopu-react/badge.svg?branch=master)](https://coveralls.io/github/yo35/kokopu-react?branch=master)
 
 
 

package/dist/lib/ArrowMarkerIcon.js

@@ -31,7 +31,7 @@ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || func
 
 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; } return _assertThisInitialized(self); }
+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; }
 

package/dist/lib/Chessboard.js

@@ -21,7 +21,9 @@ var _piecesets2 = _interopRequireDefault(require("./impl/piecesets"));
 
 var _ArrowTip = _interopRequireDefault(require("./impl/ArrowTip"));
 
-var _ErrorBox = _interopRequireDefault(require("./impl/ErrorBox"));
+var _ErrorBox = _interopRequireDefault(require("./ErrorBox"));
+
+var _i18n = _interopRequireDefault(require("./i18n"));
 
 var _markers = require("./markers");
 
@@ -61,7 +63,7 @@ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || func
 
 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; } return _assertThisInitialized(self); }
+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; }
 
@@ -98,8 +100,10 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call(this, props);
     _this.state = {
+      inhibitedSquare: '-',
       draggedSquare: '-',
       hoveredSquare: '-',
+      promotionDrawer: false,
       windowWidth: window.innerWidth
     };
     _this.arrowTipIdSuffix = (0, _util.generateRandomId)();
@@ -127,35 +131,23 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
       var _this2 = this;
 
       // Compute the current position.
-      var parseInfo = parsePosition(this.props.position);
+      var info = this.getPositionAndMoveInfo();
 
-      if (parseInfo.error) {
+      if (info.positionError) {
+        return /*#__PURE__*/_react["default"].createElement(_ErrorBox["default"], {
+          title: _i18n["default"].INVALID_FEN_ERROR_TITLE,
+          message: info.message
+        });
+      } else if (info.moveError) {
         return /*#__PURE__*/_react["default"].createElement(_ErrorBox["default"], {
-          title: "Error while analysing a FEN string.",
-          message: parseInfo.message
+          title: _i18n["default"].INVALID_NOTATION_ERROR_TITLE,
+          message: info.message
         });
       }
 
-      var position = parseInfo.position;
-      var move = null;
-      var positionBefore = null;
-
-      if (this.props.move) {
-        parseInfo = parseMove(position, this.props.move);
-
-        if (parseInfo.error) {
-          return /*#__PURE__*/_react["default"].createElement(_ErrorBox["default"], {
-            title: "Invalid move notation.",
-            message: parseInfo.message
-          });
-        }
-
-        move = parseInfo.move;
-        positionBefore = position;
-        position = new _kokopu["default"].Position(position);
-        position.play(move);
-      } // Compute the attributes.
-
+      var position = info.position,
+          move = info.move,
+          positionBefore = info.positionBefore; // Compute the attributes.
 
       var squareSize = this.getSquareSize();
       var coordinateVisible = this.isCoordinateVisible();
@@ -263,7 +255,7 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
         }
       });
 
-      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.renderDraggedPiece(position, squareSize, pieceset), this.renderDraggedArrow(squareSize, colorset), this.renderTurnFlag(position.turn(), squareSize, pieceset));
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, this.renderSquareMarkers(sqm, squareSize, colorset), this.renderHoveredSquare(squareSize, colorset), pieces, this.renderTextMarkers(txtm, squareSize, colorset), this.renderArrowMarkers(arm, squareSize, colorset), this.renderMoveArrow(move, 1, squareSize, colorset), handles, this.renderPromotionDrawer(position, squareSize, colorset, pieceset), this.renderDraggedPiece(position, squareSize, pieceset), this.renderDraggedArrow(squareSize, colorset), this.renderTurnFlag(position.turn(), squareSize, pieceset));
     }
   }, {
     key: "renderSquare",
@@ -309,7 +301,7 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
     value: function renderPiece(position, squareSize, pieceset, sq) {
       var cp = position.square(sq);
 
-      if (cp === '-' || this.isPieceDragModeEnabled() && this.state.draggedSquare === sq) {
+      if (cp === '-' || this.state.inhibitedSquare === sq) {
         return undefined;
       }
 
@@ -371,7 +363,7 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderDraggedPiece",
     value: function renderDraggedPiece(position, squareSize, pieceset) {
-      if (!this.isPieceDragModeEnabled() || this.state.draggedSquare === '-') {
+      if (!(this.isMovePieceModeEnabled() || this.isPlayMoveModeEnabled()) || this.state.draggedSquare === '-') {
         return undefined;
       }
 
@@ -379,11 +371,13 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
           x = _this$getSquareCoordi7.x,
           y = _this$getSquareCoordi7.y;
 
+      x = Math.min(Math.max(x + this.state.dragPosition.x, 0), 7 * squareSize);
+      y = Math.min(Math.max(y + this.state.dragPosition.y, 0), 7 * squareSize);
       var cp = position.square(this.state.draggedSquare);
       return /*#__PURE__*/_react["default"].createElement("image", {
         className: "kokopu-pieceDraggable kokopu-dragging",
-        x: x + this.state.dragPosition.x,
-        y: y + this.state.dragPosition.y,
+        x: x,
+        y: y,
         width: squareSize,
         height: squareSize,
         href: pieceset[cp]
@@ -392,7 +386,7 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderDraggedArrow",
     value: function renderDraggedArrow(squareSize, colorset) {
-      if (!this.isArrowDragModeEnabled() || this.state.draggedSquare === '-') {
+      if (!this.isEditArrowModeEnabled() || this.state.draggedSquare === '-') {
         return undefined;
       }
 
@@ -421,38 +415,90 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
       });
     }
   }, {
-    key: "renderSquareHandle",
-    value: function renderSquareHandle(position, squareSize, sq) {
+    key: "renderPromotionDrawer",
+    value: function renderPromotionDrawer(position, squareSize, colorset, pieceset) {
       var _this6 = this;
 
-      var _this$getSquareCoordi9 = this.getSquareCoordinates(squareSize, sq),
+      if (!this.state.promotionDrawer) {
+        return undefined;
+      }
+
+      var _this$getSquareCoordi9 = this.getSquareCoordinates(squareSize, this.state.promotionDrawer.origin),
           x = _this$getSquareCoordi9.x,
           y = _this$getSquareCoordi9.y;
 
-      if (this.isPieceDragModeEnabled() && position.square(sq) !== '-' || this.isArrowDragModeEnabled()) {
+      var inverted = position.turn() === (this.props.flipped ? 'w' : 'b'); // false==top-to-bottom true==bottom-to-top
+
+      var y0 = inverted ? y - squareSize * (this.state.promotionDrawer.buttons.length - 1) : y;
+      var buttons = this.state.promotionDrawer.buttons.map(function (p, i) {
+        var cp = position.turn() + p;
+        return /*#__PURE__*/_react["default"].createElement("image", {
+          key: 'drawer-piece-' + p,
+          className: "kokopu-clickable",
+          x: x,
+          y: y + i * (inverted ? -squareSize : squareSize),
+          width: squareSize,
+          height: squareSize,
+          href: pieceset[cp],
+          onClick: function onClick() {
+            return _this6.handleDrawerButtonClicked(p);
+          }
+        });
+      });
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("rect", {
+        className: "kokopu-handle",
+        x: 0,
+        y: 0,
+        width: squareSize * 8,
+        height: squareSize * 8,
+        onClick: function onClick() {
+          return _this6.handleDrawerCancelButtonClicked();
+        }
+      }), /*#__PURE__*/_react["default"].createElement("rect", {
+        x: x,
+        y: y0,
+        width: squareSize,
+        height: squareSize * this.state.promotionDrawer.buttons.length,
+        fill: colorset.b
+      }), /*#__PURE__*/_react["default"].createElement("rect", {
+        x: x,
+        y: y0,
+        width: squareSize,
+        height: squareSize * this.state.promotionDrawer.buttons.length,
+        className: "kokopu-drawerMask",
+        fill: colorset.w
+      }), buttons);
+    }
+  }, {
+    key: "renderSquareHandle",
+    value: function renderSquareHandle(position, squareSize, sq) {
+      var _this7 = this;
+
+      var _this$getSquareCoordi10 = this.getSquareCoordinates(squareSize, sq),
+          x = _this$getSquareCoordi10.x,
+          y = _this$getSquareCoordi10.y;
+
+      var dragEnabledForMovePieces = this.isMovePieceModeEnabled() && position.square(sq) !== '-';
+      var dragEnabledForEditArrows = this.isEditArrowModeEnabled();
+      var dragEnabledForPlayMoves = this.isPlayMoveModeEnabled() && position.isLegal() && position.square(sq).startsWith(position.turn()) && !this.state.promotionDrawer;
+
+      if (dragEnabledForMovePieces || dragEnabledForEditArrows || dragEnabledForPlayMoves) {
         var dragPosition = this.state.draggedSquare === sq ? this.state.dragPosition : {
           x: 0,
           y: 0
         };
-        var bounds = this.isPieceDragModeEnabled() ? {
-          left: -x,
-          top: -y,
-          right: 7 * squareSize - x,
-          bottom: 7 * squareSize - y
-        } : undefined;
-        var classNames = ['kokopu-handle', this.isPieceDragModeEnabled() ? 'kokopu-pieceDraggable' : 'kokopu-arrowDraggable'];
+        var classNames = ['kokopu-handle', this.isEditArrowModeEnabled() ? 'kokopu-arrowDraggable' : 'kokopu-pieceDraggable'];
         return /*#__PURE__*/_react["default"].createElement(_reactDraggable["default"], {
           key: 'handle-' + sq,
           position: dragPosition,
-          bounds: bounds,
           onStart: function onStart(evt) {
-            return _this6.handleDragStart(sq, evt);
+            return _this7.handleDragStart(sq, evt);
           },
           onDrag: function onDrag(_, dragData) {
-            return _this6.handleDrag(sq, dragData);
+            return _this7.handleDrag(sq, dragData);
           },
           onStop: function onStop(_, dragData) {
-            return _this6.handleDragStop(sq, dragData);
+            return _this7.handleDragStop(sq, dragData);
           }
         }, /*#__PURE__*/_react["default"].createElement("rect", {
           className: classNames.join(' '),
@@ -470,7 +516,7 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
           width: squareSize,
           height: squareSize,
           onClick: function onClick() {
-            return _this6.handleSquareClicked(sq);
+            return _this7.handleSquareClicked(sq);
           }
         });
       } else {
@@ -480,7 +526,7 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderSquareMarkers",
     value: function renderSquareMarkers(sqm, squareSize, colorset) {
-      var _this7 = this;
+      var _this8 = this;
 
       var result = [];
       Object.entries(sqm).forEach(function (_ref) {
@@ -488,9 +534,9 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
             sq = _ref2[0],
             color = _ref2[1];
 
-        var _this7$getSquareCoord = _this7.getSquareCoordinates(squareSize, sq),
-            x = _this7$getSquareCoord.x,
-            y = _this7$getSquareCoord.y;
+        var _this8$getSquareCoord = _this8.getSquareCoordinates(squareSize, sq),
+            x = _this8$getSquareCoord.x,
+            y = _this8$getSquareCoord.y;
 
         result.push( /*#__PURE__*/_react["default"].createElement("rect", {
           key: 'sqm-' + sq,
@@ -507,7 +553,7 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderTextMarkers",
     value: function renderTextMarkers(txtm, squareSize, colorset) {
-      var _this8 = this;
+      var _this9 = this;
 
       var result = [];
       Object.entries(txtm).forEach(function (_ref3) {
@@ -515,9 +561,9 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
             sq = _ref4[0],
             value = _ref4[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;
 
         x += squareSize / 2;
         y += squareSize / 2;
@@ -537,7 +583,7 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderArrowMarkers",
     value: function renderArrowMarkers(arm, squareSize, colorset) {
-      var _this9 = this;
+      var _this10 = this;
 
       var result = [];
       var strokeWidth = squareSize * STROKE_THICKNESS_FACTOR;
@@ -553,13 +599,13 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
           return;
         }
 
-        var _this9$getSquareCoord = _this9.getSquareCoordinates(squareSize, from),
-            xFrom = _this9$getSquareCoord.x,
-            yFrom = _this9$getSquareCoord.y;
+        var _this10$getSquareCoor = _this10.getSquareCoordinates(squareSize, from),
+            xFrom = _this10$getSquareCoor.x,
+            yFrom = _this10$getSquareCoor.y;
 
-        var _this9$getSquareCoord2 = _this9.getSquareCoordinates(squareSize, to),
-            xTo = _this9$getSquareCoord2.x,
-            yTo = _this9$getSquareCoord2.y;
+        var _this10$getSquareCoor2 = _this10.getSquareCoordinates(squareSize, to),
+            xTo = _this10$getSquareCoor2.x,
+            yTo = _this10$getSquareCoor2.y;
 
         xFrom += squareSize / 2;
         yFrom += squareSize / 2;
@@ -568,7 +614,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 = _this9.getArrowTipId(color);
+        var arrowTipId = _this10.getArrowTipId(color);
 
         result.push( /*#__PURE__*/_react["default"].createElement("line", {
           key: 'arm-' + vect,
@@ -593,16 +639,16 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
         return undefined;
       }
 
-      var _this$getSquareCoordi10 = this.getSquareCoordinates(squareSize, move.from()),
-          xFrom = _this$getSquareCoordi10.x,
-          yFrom = _this$getSquareCoordi10.y;
+      var _this$getSquareCoordi11 = this.getSquareCoordinates(squareSize, move.from()),
+          xFrom = _this$getSquareCoordi11.x,
+          yFrom = _this$getSquareCoordi11.y;
 
       xFrom += squareSize / 2;
       yFrom += squareSize / 2;
 
-      var _this$getSquareCoordi11 = this.getSquareCoordinates(squareSize, move.to()),
-          xTo = _this$getSquareCoordi11.x,
-          yTo = _this$getSquareCoordi11.y;
+      var _this$getSquareCoordi12 = this.getSquareCoordinates(squareSize, move.to()),
+          xTo = _this$getSquareCoordi12.x,
+          yTo = _this$getSquareCoordi12.y;
 
       xTo += squareSize / 2;
       yTo += squareSize / 2;
@@ -689,6 +735,7 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
     value: function handleDragStart(sq, evt) {
       var squareBoundary = evt.target.getBoundingClientRect();
       this.setState({
+        inhibitedSquare: this.isMovePieceModeEnabled() || this.isPlayMoveModeEnabled() ? sq : '-',
         draggedSquare: sq,
         hoveredSquare: sq,
         cursorOffset: {
@@ -706,15 +753,13 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
     value: function handleDrag(sq, dragData) {
       var squareSize = this.getSquareSize();
 
-      var _this$getSquareCoordi12 = this.getSquareCoordinates(squareSize, sq),
-          x = _this$getSquareCoordi12.x,
-          y = _this$getSquareCoordi12.y;
+      var _this$getSquareCoordi13 = this.getSquareCoordinates(squareSize, sq),
+          x = _this$getSquareCoordi13.x,
+          y = _this$getSquareCoordi13.y;
 
       var targetSq = this.getSquareAt(squareSize, x + dragData.x + this.state.cursorOffset.x, y + dragData.y + this.state.cursorOffset.y);
       this.setState({
-        draggedSquare: sq,
         hoveredSquare: targetSq,
-        cursorOffset: this.state.cursorOffset,
         dragPosition: {
           x: dragData.x,
           y: dragData.y
@@ -726,24 +771,84 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
     value: function handleDragStop(sq, dragData) {
       var squareSize = this.getSquareSize();
 
-      var _this$getSquareCoordi13 = this.getSquareCoordinates(squareSize, sq),
-          x = _this$getSquareCoordi13.x,
-          y = _this$getSquareCoordi13.y;
+      var _this$getSquareCoordi14 = this.getSquareCoordinates(squareSize, sq),
+          x = _this$getSquareCoordi14.x,
+          y = _this$getSquareCoordi14.y;
 
       var targetSq = this.getSquareAt(squareSize, x + dragData.x + this.state.cursorOffset.x, y + dragData.y + this.state.cursorOffset.y);
       this.setState({
+        inhibitedSquare: '-',
         draggedSquare: '-',
         hoveredSquare: '-'
       });
 
-      if (sq === targetSq) {
+      if (sq === targetSq || targetSq === '-') {
         return;
       }
 
-      if (this.isPieceDragModeEnabled() && this.props.onPieceMoved) {
+      if (this.isMovePieceModeEnabled() && this.props.onPieceMoved) {
         this.props.onPieceMoved(sq, targetSq);
-      } else if (this.isArrowDragModeEnabled() && this.props.onArrowEdited) {
+      } else if (this.isEditArrowModeEnabled() && this.props.onArrowEdited) {
         this.props.onArrowEdited(sq, targetSq);
+      } else if (this.isPlayMoveModeEnabled()) {
+        var _this$getPositionAndM = this.getPositionAndMoveInfo(),
+            position = _this$getPositionAndM.position;
+
+        var info = position.isMoveLegal(sq, targetSq);
+
+        if (!info) {
+          return;
+        }
+
+        switch (info.status) {
+          // Regular move.
+          case 'regular':
+            if (this.props.onMovePlayed) {
+              this.props.onMovePlayed(position.notation(info()));
+            }
+
+            break;
+          // Promotion move.
+
+          case 'promotion':
+            this.setState({
+              inhibitedSquare: sq,
+              promotionDrawer: {
+                origin: targetSq,
+                buttons: position.variant() === 'antichess' ? ['q', 'r', 'b', 'n', 'k'] : ['q', 'r', 'b', 'n'],
+                builder: function builder(piece) {
+                  return position.notation(info(piece));
+                }
+              }
+            });
+            break;
+          // Other cases are not supposed to happen.
+          // istanbul ignore next
+
+          default:
+            break;
+        }
+      }
+    }
+  }, {
+    key: "handleDrawerCancelButtonClicked",
+    value: function handleDrawerCancelButtonClicked() {
+      this.setState({
+        inhibitedSquare: '-',
+        promotionDrawer: false
+      });
+    }
+  }, {
+    key: "handleDrawerButtonClicked",
+    value: function handleDrawerButtonClicked(piece) {
+      var builder = this.state.promotionDrawer.builder;
+      this.setState({
+        inhibitedSquare: '-',
+        promotionDrawer: false
+      });
+
+      if (this.props.onMovePlayed) {
+        this.props.onMovePlayed(builder(piece));
       }
     }
   }, {
@@ -758,17 +863,26 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
      */
 
   }, {
-    key: "isPieceDragModeEnabled",
-    value: function isPieceDragModeEnabled() {
+    key: "isMovePieceModeEnabled",
+    value: function isMovePieceModeEnabled() {
       return this.props.interactionMode === 'movePieces';
     }
+    /**
+     * Whether the "play move" mode is enabled or not.
+     */
+
+  }, {
+    key: "isPlayMoveModeEnabled",
+    value: function isPlayMoveModeEnabled() {
+      return this.props.interactionMode === 'playMoves';
+    }
     /**
      * Whether the "edit arrow" mode is enabled or not.
      */
 
   }, {
-    key: "isArrowDragModeEnabled",
-    value: function isArrowDragModeEnabled() {
+    key: "isEditArrowModeEnabled",
+    value: function isEditArrowModeEnabled() {
       return this.props.interactionMode === 'editArrows' && (0, _util.isValidColor)(this.props.editedArrowColor);
     }
     /**
@@ -810,6 +924,56 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
         y: y
       };
     }
+    /**
+     * Return information regarding the current displayed position and move, or parsing error message if something went wrong.
+     */
+
+  }, {
+    key: "getPositionAndMoveInfo",
+    value: function getPositionAndMoveInfo() {
+      // Parse the position.
+      var positionInfo = parsePosition(this.props.position);
+
+      if (positionInfo.error) {
+        return {
+          positionError: true,
+          moveError: true,
+          message: positionInfo.message
+        };
+      } // Nothing else to do if no move is defined.
+
+
+      if (!this.props.move) {
+        return {
+          positionError: false,
+          moveError: false,
+          position: positionInfo.position
+        };
+      } // Parse the move.
+
+
+      var moveInfo = parseMove(positionInfo.position, this.props.move);
+
+      if (moveInfo.error) {
+        return {
+          positionError: false,
+          moveError: true,
+          message: moveInfo.message,
+          positionBefore: positionInfo.position
+        };
+      } // Compute the position after the move and return the result.
+
+
+      var positionAfter = new _kokopu["default"].Position(positionInfo.position);
+      positionAfter.play(moveInfo.move);
+      return {
+        positionError: false,
+        moveError: false,
+        positionBefore: positionInfo.position,
+        move: moveInfo.move,
+        position: positionAfter
+      };
+    }
     /**
      * Return the square at the given location.
      */
@@ -1047,8 +1211,13 @@ Chessboard.propTypes = {
 
   /**
    * Type of action allowed with the mouse on the chessboard. If undefined, then the user cannot interact with the component.
+   *
+   * - `'movePieces'` allows the user to drag & drop the chess pieces from one square to another (regardless of the chess rules),
+   * - `'clickSquares'` allows the user to click on squares,
+   * - `'editArrows'` allows the user to draw arrow markers from one square to another (warning: attribute `editedArrowColor` must be set),
+   * - `'playMoves'` allows the user to play legal chess moves (thus no interaction is possible if the displayed position is not legal).
    */
-  interactionMode: _propTypes["default"].oneOf(['movePieces', 'clickSquares', 'editArrows']),
+  interactionMode: _propTypes["default"].oneOf(['movePieces', 'clickSquares', 'editArrows', 'playMoves']),
 
   /**
    * Color of the edited arrow (only used if `interactionMode` is set to `'editArrows'`).
@@ -1076,7 +1245,14 @@ Chessboard.propTypes = {
    * @param {string} from Origin square (e.g. `'g1'`).
    * @param {string} to Target square (e.g. `'f3'`).
    */
-  onArrowEdited: _propTypes["default"].func
+  onArrowEdited: _propTypes["default"].func,
+
+  /**
+   * Callback invoked when a move is played (only if `interactionMode` is set to `'playMoves'`).
+   *
+   * @param {string} move SAN notation representing the played move (e.g. `Nxe5`).
+   */
+  onMovePlayed: _propTypes["default"].func
 };
 Chessboard.defaultProps = {
   position: 'start',
@@ -1130,6 +1306,7 @@ function parsePosition(position) {
         position: new _kokopu["default"].Position(position)
       };
     } catch (e) {
+      // istanbul ignore else
       if (e instanceof _kokopu["default"].exception.InvalidFEN) {
         return {
           error: true,
@@ -1142,7 +1319,7 @@ function parsePosition(position) {
   } else {
     return {
       error: true,
-      message: 'Invalid "position" attribute.'
+      message: _i18n["default"].INVALID_POSITION_ATTRIBUTE_ERROR_MESSAGE
     };
   }
 }
@@ -1164,6 +1341,7 @@ function parseMove(position, move) {
         move: position.notation(move)
       };
     } catch (e) {
+      // istanbul ignore else
       if (e instanceof _kokopu["default"].exception.InvalidNotation) {
         return {
           error: true,
@@ -1176,7 +1354,7 @@ function parseMove(position, move) {
   } else {
     return {
       error: true,
-      message: 'Invalid "move" attribute.'
+      message: _i18n["default"].INVALID_MOVE_ATTRIBUTE_ERROR_MESSAGE
     };
   }
 }