kokopu-react 1.7.1 → 1.9.0

package/dist/lib/impl/Motion.js

@@ -0,0 +1,133 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+var DEBUG_KEY = '__kokopu_debug_freeze_motion';
+/**
+ * Wrap some animated content.
+ */
+
+var Motion = /*#__PURE__*/function (_React$Component) {
+  _inherits(Motion, _React$Component);
+
+  var _super = _createSuper(Motion);
+
+  function Motion(props) {
+    var _this;
+
+    _classCallCheck(this, Motion);
+
+    _this = _super.call(this, props);
+    _this.state = {
+      cursor: 0
+    };
+    _this.animationFrameId = null;
+    _this.cursorStop = 1; // WARNING: this hack exists only for testing purposes. DO NOT USE IT IN PRODUCTION.
+
+    if (typeof window[DEBUG_KEY] === 'number' && window[DEBUG_KEY] >= 0 && window[DEBUG_KEY] <= 1) {
+      _this.cursorStop = window[DEBUG_KEY];
+    }
+
+    return _this;
+  }
+
+  _createClass(Motion, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+
+      this.animationFrameId = window.requestAnimationFrame(function (ts) {
+        return _this2.handleAnimationStep(ts);
+      });
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (this.animationFrameId !== null) {
+        window.cancelAnimationFrame(this.animationFrameId);
+        this.animationFrameId = null;
+      }
+    }
+  }, {
+    key: "handleAnimationStep",
+    value: function handleAnimationStep(timestamp) {
+      var _this3 = this;
+
+      if (this.initialTimestamp === undefined) {
+        this.initialTimestamp = timestamp;
+      } // Compute the animation cursor and update the state.
+
+
+      var cursor = (timestamp - this.initialTimestamp) / this.props.duration;
+
+      if (cursor < 0) {
+        cursor = 0;
+      } else if (cursor > this.cursorStop) {
+        cursor = this.cursorStop;
+      }
+
+      this.setState({
+        cursor: cursor
+      }); // Schedule the next animation frame if necessary.
+
+      if (cursor === this.cursorStop) {
+        this.animationFrameId = null;
+      } else {
+        this.animationFrameId = window.requestAnimationFrame(function (ts) {
+          return _this3.handleAnimationStep(ts);
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return this.props.children(this.state.cursor);
+    }
+  }]);
+
+  return Motion;
+}(_react["default"].Component);
+
+exports["default"] = Motion;
+Motion.propTypes = {
+  /**
+   * Duration of the animation. Must be > 0.
+   */
+  duration: _propTypes["default"].number.isRequired,
+
+  /**
+   * Factory for the content being animated. The animation cursor is guaranteed to be valued between 0 and 1 inclusive.
+   */
+  children: _propTypes["default"].func.isRequired
+};

package/dist/lib/impl/util.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MIN_SQUARE_SIZE = exports.MAX_SQUARE_SIZE = void 0;
+exports.fillPlaceholder = fillPlaceholder;
 exports.generateRandomId = generateRandomId;
 exports.isValidColor = isValidColor;
 exports.isValidSquare = isValidSquare;
@@ -48,6 +49,17 @@ function generateRandomId() {
   return result;
 }
 
+function fillPlaceholder(message) {
+  for (var _len = arguments.length, placeholderValues = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    placeholderValues[_key - 1] = arguments[_key];
+  }
+
+  return message.replace(/{(\d+)}/g, function (match, placeholder) {
+    var placeholderIndex = Number(placeholder);
+    return placeholderIndex < placeholderValues.length ? placeholderValues[placeholderIndex] : match;
+  });
+}
+
 function sanitizeInteger(input, min, max) {
   return Math.min(Math.max(Math.round(input), min), max);
 }

package/doc_src/demo/PageChessboardInteraction.js

@@ -21,7 +21,7 @@
 
 
 import React from 'react';
-import kokopu from 'kokopu';
+import { Position, oppositeColor } from 'kokopu';
 
 import { Chessboard, SquareMarkerIcon, TextMarkerIcon, ArrowMarkerIcon, flattenSquareMarkers, flattenTextMarkers, flattenArrowMarkers } from '../../src/index';
 import { buildComponentDemoCode } from './util';
@@ -53,7 +53,7 @@ export default class Page extends React.Component {
 	constructor(props) {
 		super(props);
 		this.state = {
-			position: new kokopu.Position(),
+			position: new Position(),
 			flipped: false,
 			interactionMode: 'movePieces',
 			pieceEditMode: 'wp',
@@ -83,12 +83,12 @@ export default class Page extends React.Component {
 				<FormControlLabel label="Flip"
 					control={<Switch checked={this.state.flipped} onChange={() => this.set('flipped', !this.state.flipped)} color="primary" />}
 				/>
-				<Button color="primary" size="small" variant="contained" onClick={() => this.handleTurnClicked(kokopu.oppositeColor(this.state.position.turn()))}>
+				<Button color="primary" size="small" variant="contained" onClick={() => this.handleTurnClicked(oppositeColor(this.state.position.turn()))}>
 					Change turn
 				</Button>
 				<ButtonGroup color="primary" size="small">
-					<Button onClick={() => this.set('position', new kokopu.Position('empty'))}>Clear</Button>
-					<Button onClick={() => this.set('position', new kokopu.Position())}>Reset</Button>
+					<Button onClick={() => this.set('position', new Position('empty'))}>Clear</Button>
+					<Button onClick={() => this.set('position', new Position())}>Reset</Button>
 				</ButtonGroup>
 			</Stack>
 			<Box>
@@ -266,20 +266,20 @@ export default class Page extends React.Component {
 	}
 
 	handleTurnClicked(newTurn) {
-		let newPosition = new kokopu.Position(this.state.position);
+		let newPosition = new Position(this.state.position);
 		newPosition.turn(newTurn);
 		this.set('position', newPosition);
 	}
 
 	handlePieceMoved(from, to) {
-		let newPosition = new kokopu.Position(this.state.position);
+		let newPosition = new Position(this.state.position);
 		newPosition.square(to, newPosition.square(from));
 		newPosition.square(from, '-');
 		this.set('position', newPosition);
 	}
 
 	handleMovePlayed(move) {
-		let newPosition = new kokopu.Position(this.state.position);
+		let newPosition = new Position(this.state.position);
 		newPosition.play(move);
 		this.set('position', newPosition);
 	}
@@ -318,7 +318,7 @@ export default class Page extends React.Component {
 			this.set('textMarkers', newTextMarkers);
 		}
 		else if (this.state.interactionMode === 'addRemovePieces') {
-			let newPosition = new kokopu.Position(this.state.position);
+			let newPosition = new Position(this.state.position);
 			newPosition.square(sq, newPosition.square(sq) === this.state.pieceEditMode ? '-' : this.state.pieceEditMode);
 			this.set('position', newPosition);
 		}

package/doc_src/demo/PageChessboardMove.js

@@ -21,7 +21,7 @@
 
 
 import React from 'react';
-import kokopu from 'kokopu';
+import { exception, Position } from 'kokopu';
 
 import { Chessboard, ArrowMarkerIcon } from '../../src/index';
 import { buildComponentDemoCode } from './util';
@@ -45,8 +45,8 @@ export default class Page extends React.Component {
 
 	constructor(props) {
 		super(props);
-		let position = new kokopu.Position();
-		let positionAfter = new kokopu.Position(position);
+		let position = new Position();
+		let positionAfter = new Position(position);
 		positionAfter.play('e4');
 		this.state = {
 			position: position,
@@ -88,8 +88,8 @@ export default class Page extends React.Component {
 				<TextField label="Move" variant="standard" value={this.state.editedMove} onChange={evt => this.set('editedMove', evt.target.value)} />
 				<Button color="primary" size="small" variant="contained" onClick={() => this.handlePlayClicked()}>Play</Button>
 				<ButtonGroup color="primary" size="small">
-					<Button onClick={() => this.setPosition(new kokopu.Position('empty'))}>Clear</Button>
-					<Button onClick={() => this.setPosition(new kokopu.Position())}>Reset</Button>
+					<Button onClick={() => this.setPosition(new Position('empty'))}>Clear</Button>
+					<Button onClick={() => this.setPosition(new Position())}>Reset</Button>
 				</ButtonGroup>
 			</Stack>
 		</>);
@@ -164,7 +164,7 @@ export default class Page extends React.Component {
 
 	handlePlayClicked() {
 		let newState = {};
-		let currentPosition = new kokopu.Position(this.state.positionAfter ? this.state.positionAfter : this.state.position);
+		let currentPosition = new Position(this.state.positionAfter ? this.state.positionAfter : this.state.position);
 		let move = this.state.editedMove.trim();
 		if (move === '') {
 			newState.position = currentPosition;
@@ -176,11 +176,11 @@ export default class Page extends React.Component {
 				let moveDescriptor = currentPosition.notation(move);
 				newState.position = currentPosition;
 				newState.playedMove = currentPosition.notation(moveDescriptor);
-				newState.positionAfter = new kokopu.Position(currentPosition);
+				newState.positionAfter = new Position(currentPosition);
 				newState.positionAfter.play(moveDescriptor);
 			}
 			catch (e) {
-				if (e instanceof kokopu.exception.InvalidNotation) {
+				if (e instanceof exception.InvalidNotation) {
 					newState.position = currentPosition;
 					newState.playedMove = move;
 					newState.positionAfter = null;

package/doc_src/demo/PageMovetextInteraction.js

@@ -21,7 +21,7 @@
 
 
 import React from 'react';
-import kokopu from 'kokopu';
+import { pgnRead } from 'kokopu';
 
 import { Chessboard, Movetext } from '../../src/index';
 import { buildComponentDemoCode } from './util';
@@ -143,7 +143,7 @@ export default class Page extends React.Component {
 	}
 
 	getCurrentPositionAndAnnotations() {
-		let game = kokopu.pgnRead(this.state.pgn, 0);
+		let game = pgnRead(this.state.pgn, 0);
 		if (this.state.selection === 'start') {
 			let mainVariation = game.mainVariation();
 			return { position: mainVariation.initialPosition(), csl: mainVariation.tag('csl'), cal: mainVariation.tag('cal') };

package/graphic_test_src/02_chessboard_simple.js

@@ -21,7 +21,7 @@
 
 
 import React from 'react';
-import kokopu from 'kokopu';
+import { Position } from 'kokopu';
 import testApp from './common/test_app';
 import { Chessboard } from '../src/index';
 
@@ -30,6 +30,6 @@ testApp([ /* eslint-disable react/jsx-key */
 	<Chessboard position="empty" />,
 	<Chessboard position="something invalid" />,
 	<Chessboard position="r1bqkbnr/pppp1ppp/2n5/1B2p3/4P3/5N2/PPPP1PPP/RNBQK2R b KQkq - 3 3" />,
-	<Chessboard position={new kokopu.Position('8/8/1r6/8/5k1K/8/8/8 b - - 0 1')} />,
+	<Chessboard position={new Position('8/8/1r6/8/5k1K/8/8/8 b - - 0 1')} />,
 	<Chessboard position={42} />,
 ]); /* eslint-enable react/jsx-key */

package/graphic_test_src/03_chessboard_flipped.js

@@ -21,7 +21,7 @@
 
 
 import React from 'react';
-import kokopu from 'kokopu';
+import { Position } from 'kokopu';
 import testApp from './common/test_app';
 import { Chessboard } from '../src/index';
 
@@ -30,5 +30,5 @@ testApp([ /* eslint-disable react/jsx-key */
 	<Chessboard flipped={true} position="empty" />,
 	<Chessboard flipped={true} position="something invalid" />,
 	<Chessboard flipped={true} position="r1bqkbnr/pppp1ppp/2n5/1B2p3/4P3/5N2/PPPP1PPP/RNBQK2R b KQkq - 3 3" />,
-	<Chessboard flipped={true} position={new kokopu.Position('8/8/1r6/8/5k1K/8/8/8 b - - 0 1')} />,
+	<Chessboard flipped={true} position={new Position('8/8/1r6/8/5k1K/8/8/8 b - - 0 1')} />,
 ]); /* eslint-enable react/jsx-key */

package/graphic_test_src/05_chessboard_move.js

@@ -21,19 +21,19 @@
 
 
 import React from 'react';
-import kokopu from 'kokopu';
+import { Position } from 'kokopu';
 import testApp from './common/test_app';
 import { Chessboard } from '../src/index';
 
-let pos = new kokopu.Position('r1bqkbnr/1ppp1ppp/p1n5/1B2p3/4P3/5N2/PPPP1PPP/RNBQK2R w KQkq - 0 4');
+let pos = new Position('r1bqkbnr/1ppp1ppp/p1n5/1B2p3/4P3/5N2/PPPP1PPP/RNBQK2R w KQkq - 0 4');
 let move = pos.notation('Bxc6');
 
 testApp([ /* eslint-disable react/jsx-key */
 	<Chessboard move="e4" animated={false} />,
 	<Chessboard move="Nf3" moveArrowVisible={false} animated={false} />,
 	<Chessboard move="Nf4" animated={false} />,
-	<Chessboard position="rnbqkbnr/pppp1ppp/4p3/8/3PP3/8/PPP2PPP/RNBQKBNR b KQkq - 0 2" move="Bb4+" moveArrowVisible={true} flipped={true} animated={false} />,
-	<Chessboard position={pos} move={move} animated={false} moveArrowColor="g" />,
+	<Chessboard position="rnbqkbnr/pppp1ppp/4p3/8/3PP3/8/PPP2PPP/RNBQKBNR b KQkq - 0 2" move="Bb4+" moveArrowVisible={true} flipped={true} animated={true} />,
+	<Chessboard position={pos} move={move} animated={true} moveArrowColor="g" />,
 	<Chessboard position="r3k2r/pppppppp/8/8/8/8/PPPPPPPP/R3K2R b KQkq - 0 1" move="O-O-O" animated={false} moveArrowColor="r" />,
 	<Chessboard position="rnbqkbnr/ppp1p1pp/8/3pPp2/8/8/PPPP1PPP/RNBQKBNR w KQkq f6 0 3" move="exf6" animated={false} moveArrowColor="y" />,
 	<Chessboard position="8/8/8/1K6/8/4k3/1p6/8 b - - 0 1" move="b1=R+" animated={false} moveArrowColor="b" />,

package/graphic_test_src/06a_chessboard_animated_move.js

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

package/graphic_test_src/06b_chessboard_animated_move.js

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

package/graphic_test_src/06c_chessboard_animated_move.js

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

package/graphic_test_src/{12_movetext_simple.js → 13_movetext_simple.js}

@@ -21,17 +21,17 @@
 
 
 import React from 'react';
-import kokopu from 'kokopu';
+import { Game, pgnRead } from 'kokopu';
 import testApp from './common/test_app';
 import { Movetext } from '../src/index';
 
 import pgn from './common/games.pgn';
 
-let game = new kokopu.Game();
+let game = new Game();
 game.mainVariation().play('e4').play('e5').play('Bc4').play('Nc6').play('Qh5').play('Nf6').play('Qxf7#');
 game.result('1-0');
 
-let database = kokopu.pgnRead(pgn);
+let database = pgnRead(pgn);
 
 testApp([ /* eslint-disable react/jsx-key */
 	<Movetext game={game} />,

package/graphic_test_src/{13_movetext_error.js → 14_movetext_error.js}

@@ -21,18 +21,19 @@
 
 
 import React from 'react';
-import kokopu from 'kokopu';
+import { pgnRead } from 'kokopu';
 import testApp from './common/test_app';
 import { Movetext } from '../src/index';
 
 import pgn from './common/games.pgn';
 import dummyPgn from './common/dummy.pgn';
 
-let database = kokopu.pgnRead(pgn);
+let database = pgnRead(pgn);
 
 testApp([ /* eslint-disable react/jsx-key */
+	<Movetext game={pgn} gameIndex={99} />,
 	<Movetext game={database} gameIndex={99} />,
 	<Movetext game={dummyPgn} />,
-	<Movetext game={kokopu.pgnRead(dummyPgn)} gameIndex={1} />,
+	<Movetext game={pgnRead(dummyPgn)} gameIndex={1} />,
 	<Movetext game={42} />,
 ], 'width-600'); /* eslint-enable react/jsx-key */

package/graphic_test_src/common/games.pgn

@@ -87,8 +87,8 @@ probably to assure himself that the combination was sound and that he had a forc
 [White "1<sup>st</sup> <em>player</em>"]
 [Black "2<sub>nd</sub> <i>player</i>"]
 [Result "*"]
-[WhiteElo "<ins>2800</ins>"]
-[BlackElo "<del>1010</del>"]
+[WhiteElo "2800"]
+[BlackElo "1010"]
 [WhiteTitle "<span class=\"myClass\">GM</span>"]
 [BlackTitle "<span id=\"myId\">no-GM</span>"]
 
@@ -104,7 +104,7 @@ probably to assure himself that the combination was sound and that he had a forc
 [Black "?"]
 [Result "*"]
 
-{I'm a <strong><ins>comment</ins></strong> with some <em class="myClass">HTML content</em> in it.<br/>
+{I'm a <strong><ins>comment</ins></strong> with <del>some</del> <em class="myClass">HTML content</em> in it.<br/>
 Lists are supported:
 <ul>
 <li>1<sup>st</sup> point</li>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "kokopu-react",
-	"version": "1.7.1",
+	"version": "1.9.0",
 	"description": "A React-based library to create and display chessboard and chess-related components.",
 	"keywords": [
 		"chess",
@@ -19,7 +19,6 @@
 		"dist/lib",
 		"doc_src",
 		"graphic_test_src",
-		"graphics",
 		"scripts/clean-graphic-output.js",
 		"scripts/docker-compose.yml",
 		"scripts/test-graphic.webpack.config.js",
@@ -31,44 +30,43 @@
 		".nycrc.yml"
 	],
 	"peerDependencies": {
-		"kokopu": "^2.6.0",
+		"kokopu": "^3.0.0",
 		"react": "17.x.x || 18.x.x"
 	},
 	"dependencies": {
 		"htmlparser2": "^8.0.1",
 		"prop-types": "^15.8.1",
-		"react-draggable": "^4.4.5",
-		"react-motion": "^0.5.2"
+		"react-draggable": "^4.4.5"
 	},
 	"devDependencies": {
-		"@babel/cli": "^7.17.10",
-		"@babel/core": "^7.18.5",
-		"@babel/preset-env": "^7.18.2",
-		"@babel/preset-react": "^7.17.12",
-		"@emotion/react": "^11.9.3",
-		"@emotion/styled": "^11.9.3",
-		"@mui/material": "^5.8.5",
+		"@babel/cli": "^7.18.10",
+		"@babel/core": "^7.19.0",
+		"@babel/preset-env": "^7.19.0",
+		"@babel/preset-react": "^7.18.6",
+		"@emotion/react": "^11.10.0",
+		"@emotion/styled": "^11.10.0",
+		"@mui/material": "^5.10.2",
 		"babel-loader": "^8.2.5",
 		"babel-plugin-istanbul": "^6.1.1",
 		"copy-webpack-plugin": "^11.0.0",
 		"coveralls": "^3.1.1",
 		"css-loader": "^6.7.1",
-		"eslint": "^8.18.0",
-		"eslint-plugin-react": "^7.30.0",
+		"eslint": "^8.22.0",
+		"eslint-plugin-react": "^7.31.7",
 		"html-webpack-plugin": "^5.5.0",
 		"img-diff-js": "^0.5.2",
-		"kokopu": "^2.9.0",
+		"kokopu": "^3.0.0",
 		"mocha": "^10.0.0",
 		"null-loader": "^4.0.1",
 		"nyc": "^15.1.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"react-styleguidist": "^11.2.0",
-		"selenium-webdriver": "^4.2.0",
-		"ssh2-sftp-client": "^9.0.1",
+		"react-styleguidist": "^12.0.0",
+		"selenium-webdriver": "^4.3.1",
+		"ssh2-sftp-client": "^9.0.3",
 		"style-loader": "^3.3.1",
 		"unit.js": "^2.1.1",
-		"webpack": "^5.73.0",
+		"webpack": "^5.74.0",
 		"webpack-cli": "^4.10.0"
 	},
 	"scripts": {

package/scripts/docker-compose.yml

@@ -2,7 +2,7 @@ version: "3.7"
 
 services:
   web-client:
-    image: selenium/standalone-firefox:4.2.2-20220622
+    image: selenium/standalone-firefox:4.3.0-20220726
     shm_size: '2gb'
     ports:
       - 4444:4444 # http://localhost:4444 (driver)