kokopu-react 1.7.1 → 1.9.0

package/src/Chessboard.js

@@ -23,12 +23,12 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import Draggable from 'react-draggable';
-import { Motion, spring } from 'react-motion';
-import kokopu from 'kokopu';
+import { exception, MoveDescriptor, Position, coordinatesToSquare, forEachSquare, oppositeColor, squareColor, squareToCoordinates } from 'kokopu';
 
 import colorsets from './impl/colorsets';
 import piecesets from './impl/piecesets';
 import ArrowTip from './impl/ArrowTip';
+import Motion from './impl/Motion';
 import TextSymbol from './impl/TextSymbol';
 import ErrorBox from './ErrorBox';
 import i18n from './i18n';
@@ -45,7 +45,7 @@ const HOVER_MARKER_THICKNESS_FACTOR = 0.1;
 const STROKE_THICKNESS_FACTOR = 0.15;
 const ARROW_TIP_OFFSET_FACTOR = 0.3;
 
-const ANIMATION_SPEED = { stiffness: 700, damping: 40 };
+const MOTION_DURATION = 150;
 
 const RANK_LABELS = '12345678';
 const FILE_LABELS = 'abcdefgh';
@@ -67,15 +67,18 @@ export default class Chessboard extends React.Component {
 			windowWidth: window.innerWidth,
 		};
 		this.arrowTipIdSuffix = generateRandomId();
-		this.windowResizeListener = () => this.handleWindowResize();
 	}
 
 	componentDidMount() {
+		this.windowResizeListener = () => this.handleWindowResize();
 		window.addEventListener('resize', this.windowResizeListener);
 	}
 
 	componentWillUnmount() {
-		window.removeEventListener('resize', this.windowResizeListener);
+		if (this.windowResizeListener) {
+			window.removeEventListener('resize', this.windowResizeListener);
+			this.windowResizeListener = null;
+		}
 	}
 
 	render() {
@@ -102,7 +105,7 @@ export default class Chessboard extends React.Component {
 
 		// Render the squares.
 		let squares = [];
-		kokopu.forEachSquare(sq => squares.push(this.renderSquare(squareSize, colorset, sq)));
+		forEachSquare(sq => squares.push(this.renderSquare(squareSize, colorset, sq)));
 
 		// Render coordinates.
 		let rankCoordinates = [];
@@ -138,10 +141,11 @@ export default class Chessboard extends React.Component {
 
 	renderBoardContent(position, positionBefore, move, squareSize, colorset, pieceset) {
 		if (move && this.props.animated) {
+			let key = positionBefore.variant() + '|' + positionBefore.fen() + '|' + move.toString();
 			return (
-				<Motion key={move.toString()} defaultStyle={{ alpha: 0 }} style={{ alpha: spring(1, ANIMATION_SPEED) }}>
-					{currentStyle => (currentStyle.alpha >= 1 ? this.renderBoardContentStill(position, move, squareSize, colorset, pieceset)
-						: this.renderBoardContentAnimated(positionBefore, move, currentStyle.alpha, squareSize, colorset, pieceset))}
+				<Motion key={key} duration={MOTION_DURATION}>
+					{motionCursor => (motionCursor === 1 ? this.renderBoardContentStill(position, move, squareSize, colorset, pieceset)
+						: this.renderBoardContentAnimated(positionBefore, move, motionCursor, squareSize, colorset, pieceset))}
 				</Motion>
 			);
 		}
@@ -153,14 +157,14 @@ export default class Chessboard extends React.Component {
 	/**
 	 * Render the board content during the animation.
 	 */
-	renderBoardContentAnimated(positionBefore, move, alpha, squareSize, colorset, pieceset) {
+	renderBoardContentAnimated(positionBefore, move, motionCursor, squareSize, colorset, pieceset) {
 		let pieces = [];
-		kokopu.forEachSquare(sq => pieces.push(this.renderPieceAnimated(positionBefore, move, alpha, squareSize, pieceset, sq)));
+		forEachSquare(sq => pieces.push(this.renderPieceAnimated(positionBefore, move, motionCursor, squareSize, pieceset, sq)));
 		return (
 			<>
 				{pieces}
-				{this.renderMoveArrow(move, alpha, squareSize, colorset)}
-				{this.renderTurnFlag(kokopu.oppositeColor(positionBefore.turn()), squareSize, pieceset)}
+				{this.renderMoveArrow(move, motionCursor, squareSize, colorset)}
+				{this.renderTurnFlag(oppositeColor(positionBefore.turn()), squareSize, pieceset)}
 			</>
 		);
 	}
@@ -178,7 +182,7 @@ export default class Chessboard extends React.Component {
 		// Render the square-related objects.
 		let pieces = [];
 		let handles = [];
-		kokopu.forEachSquare(sq => {
+		forEachSquare(sq => {
 			pieces.push(this.renderPiece(position, squareSize, pieceset, sq));
 			if (this.props.interactionMode) {
 				handles.push(this.renderSquareHandle(position,  squareSize, sq));
@@ -203,7 +207,7 @@ export default class Chessboard extends React.Component {
 
 	renderSquare(squareSize, colorset, sq) {
 		let { x, y } = this.getSquareCoordinates(squareSize, sq);
-		return <rect key={sq} x={x} y={y} width={squareSize} height={squareSize} fill={colorset[kokopu.squareColor(sq)]} />;
+		return <rect key={sq} x={x} y={y} width={squareSize} height={squareSize} fill={colorset[squareColor(sq)]} />;
 	}
 
 	renderHoveredSquare(squareSize, colorset) {
@@ -226,7 +230,7 @@ export default class Chessboard extends React.Component {
 		return <image key={'piece-' + sq} x={x} y={y} width={squareSize} height={squareSize} href={pieceset[cp]} />;
 	}
 
-	renderPieceAnimated(positionBefore, move, alpha, squareSize,  pieceset, sq) {
+	renderPieceAnimated(positionBefore, move, motionCursor, squareSize,  pieceset, sq) {
 		let cp = positionBefore.square(sq);
 		if (cp === '-' || move.to() === sq || (move.isEnPassant() && move.enPassantSquare() === sq)) {
 			return undefined;
@@ -234,16 +238,16 @@ export default class Chessboard extends React.Component {
 		let { x, y } = this.getSquareCoordinates(squareSize, sq);
 		if (sq === move.from()) {
 			let { x: xTo, y: yTo } = this.getSquareCoordinates(squareSize, move.to());
-			x = xTo * alpha + x * (1 - alpha);
-			y = yTo * alpha + y * (1 - alpha);
-			if (move.isPromotion() && alpha > 0.8) {
+			x = xTo * motionCursor + x * (1 - motionCursor);
+			y = yTo * motionCursor + y * (1 - motionCursor);
+			if (move.isPromotion() && motionCursor > 0.8) {
 				cp = move.coloredPromotion();
 			}
 		}
 		else if (move.isCastling() && sq === move.rookFrom()) {
 			let { x: xTo, y: yTo } = this.getSquareCoordinates(squareSize, move.rookTo());
-			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 <image key={'piece-' + sq} x={x} y={y} width={squareSize} height={squareSize} href={pieceset[cp]} />;
 	}
@@ -384,8 +388,8 @@ export default class Chessboard extends React.Component {
 		return result;
 	}
 
-	renderMoveArrow(move, alpha, squareSize, colorset) {
-		if (!move || alpha < 0.1 || !this.props.moveArrowVisible || move.from() === move.to()) {
+	renderMoveArrow(move, motionCursor, squareSize, colorset) {
+		if (!move || motionCursor < 0.1 || !this.props.moveArrowVisible || move.from() === move.to()) {
 			return undefined;
 		}
 		let { x: xFrom, y: yFrom } = this.getSquareCoordinates(squareSize, move.from());
@@ -396,8 +400,8 @@ export default class Chessboard extends 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;
-		let x = xTo * alpha + xFrom * (1 - alpha);
-		let y = yTo * alpha + yFrom * (1 - alpha);
+		let x = xTo * motionCursor + xFrom * (1 - motionCursor);
+		let y = yTo * motionCursor + yFrom * (1 - motionCursor);
 		let color = this.props.moveArrowColor;
 		return (
 			<line
@@ -575,7 +579,7 @@ export default class Chessboard extends React.Component {
 	 * Return the (x,y) coordinates of the given square in the SVG canvas.
 	 */
 	getSquareCoordinates(squareSize, sq) {
-		let { file, rank } = kokopu.squareToCoordinates(sq);
+		let { file, rank } = squareToCoordinates(sq);
 		let x = this.props.flipped ? (7 - file) * squareSize : file * squareSize;
 		let y = this.props.flipped ? rank * squareSize : (7 - rank) * squareSize;
 		return { x: x, y: y };
@@ -604,7 +608,7 @@ export default class Chessboard extends React.Component {
 		}
 
 		// Compute the position after the move and return the result.
-		let positionAfter = new kokopu.Position(positionInfo.position);
+		let positionAfter = new Position(positionInfo.position);
 		positionAfter.play(moveInfo.move);
 		return { positionError: false, moveError: false, positionBefore: positionInfo.position, move: moveInfo.move, position: positionAfter };
 	}
@@ -615,7 +619,7 @@ export default class Chessboard extends React.Component {
 	getSquareAt(squareSize, x, y) {
 		let file = this.props.flipped ? 7 - Math.floor(x / squareSize) : Math.floor(x / squareSize);
 		let rank = this.props.flipped ? Math.floor(y / squareSize) : 7 - Math.floor(y / squareSize);
-		return file >= 0 && file < 8 && rank >= 0 && rank < 8 ? kokopu.coordinatesToSquare(file, rank) : '-';
+		return file >= 0 && file < 8 && rank >= 0 && rank < 8 ? coordinatesToSquare(file, rank) : '-';
 	}
 
 	/**
@@ -760,30 +764,26 @@ export default class Chessboard extends React.Component {
 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.oneOfType([
-		PropTypes.instanceOf(kokopu.Position),
+		PropTypes.instanceOf(Position),
 		PropTypes.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.oneOfType([
-		function(props, propName, componentName) {
-			if (!kokopu.isMoveDescriptor(props[propName])) {
-				return new Error(`Invalid prop ${propName} supplied to ${componentName}. Validation failed.`);
-			}
-		},
+		PropTypes.instanceOf(MoveDescriptor),
 		PropTypes.string
 	]),
 
@@ -961,16 +961,16 @@ function computeCoordinateFontSize(squareSize) {
  * Try to interpret the given object as a chess position.
  */
 function parsePosition(position) {
-	if (position instanceof kokopu.Position) {
+	if (position instanceof Position) {
 		return { error: false, position: position };
 	}
 	else if (typeof position === 'string') {
 		try {
-			return { error: false, position: new kokopu.Position(position) };
+			return { error: false, position: new Position(position) };
 		}
 		catch (e) {
 			// istanbul ignore else
-			if (e instanceof kokopu.exception.InvalidFEN) {
+			if (e instanceof exception.InvalidFEN) {
 				return { error: true, message: e.message };
 			}
 			else {
@@ -988,7 +988,7 @@ function parsePosition(position) {
  * Try to interpret the given object `move` as a move descriptor based on the given position.
  */
 function parseMove(position, move) {
-	if (kokopu.isMoveDescriptor(move)) {
+	if (move instanceof MoveDescriptor) {
 		return { error: false, move: move };
 	}
 	else if (typeof move === 'string') {
@@ -997,7 +997,7 @@ function parseMove(position, move) {
 		}
 		catch (e) {
 			// istanbul ignore else
-			if (e instanceof kokopu.exception.InvalidNotation) {
+			if (e instanceof exception.InvalidNotation) {
 				return { error: true, message: e.message };
 			}
 			else {

package/src/ErrorBox.js

@@ -24,6 +24,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import i18n from './i18n';
+import { fillPlaceholder } from './impl/util';
 
 import './css/error_box.css';
 
@@ -125,7 +126,7 @@ function ellipsisAt(text, pos, backwardCharacters, forwardCharacters, lineNumber
 	excerpt = excerpt.replace(/\n|\r|\t/g, ' ');
 	let secondLine = Array(1 + e1.length + pos - p1).join(' ') + '^';
 	if (lineNumber) {
-		secondLine += ' (' + i18n.LINE.replace(/\{0\}/g, lineNumber) + ')';
+		secondLine += ` (${fillPlaceholder(i18n.LINE, lineNumber)})`;
 	}
 	return excerpt + '\n' + secondLine;
 }

package/src/Movetext.js

@@ -22,9 +22,10 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import kokopu from 'kokopu';
+import { exception, Database, Game, nagSymbol, pgnRead } from 'kokopu';
 
 import HtmlSanitizer from './impl/HtmlSanitizer';
+import { fillPlaceholder } from './impl/util';
 import Chessboard from './Chessboard';
 import ErrorBox from './ErrorBox';
 import { moveFormatter } from './formatmove';
@@ -85,7 +86,7 @@ export default class Movetext extends React.Component {
 		let colorTag = <span className="kokopu-colorTag"></span>;
 		let playerNameElement = <span className="kokopu-header-playerName">{sanitizeHtml(playerName)}</span>;
 		let titleElement = title === undefined ? undefined : <span className="kokopu-header-playerTitle">{sanitizeHtml(title)}</span>;
-		let ratingElement = rating === undefined ? undefined : <span className="kokopu-header-playerRating">{sanitizeHtml(rating)}</span>;
+		let ratingElement = rating === undefined ? undefined : <span className="kokopu-header-playerRating">{rating}</span>;
 		let separator = title === undefined || rating === undefined ? undefined : '\u00a0'; // \u00a0 == &nbsp;
 		let titleRatingGroup = title === undefined && rating === undefined ? undefined : <span className="kokopu-headerGroup-titleRating">{titleElement}{separator}{ratingElement}</span>;
 		return <div className={classNames.join(' ')} key={'player-' + color}>{colorTag}{playerNameElement}{titleRatingGroup}</div>;
@@ -128,7 +129,7 @@ export default class Movetext extends React.Component {
 		if (annotator === undefined) {
 			return undefined;
 		}
-		annotator = i18n.ANNOTATED_BY.replace(/\{0\}/g, annotator);
+		annotator = fillPlaceholder(i18n.ANNOTATED_BY, annotator);
 		return <div className="kokopu-header-annotator" key="annotator">{sanitizeHtml(annotator)}</div>;
 	}
 
@@ -255,7 +256,7 @@ export default class Movetext extends React.Component {
 		let notationText = notationTextBuilder(node.notation());
 
 		// NAGs
-		let nagElements = node.nags().map(nag => <span className="kokopu-nag" key={nag}>{kokopu.nagSymbol(nag)}</span>);
+		let nagElements = node.nags().map(nag => <span className="kokopu-nag" key={nag}>{nagSymbol(nag)}</span>);
 
 		// Class
 		let nodeId = node.id();
@@ -482,18 +483,18 @@ export default class Movetext extends React.Component {
 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.oneOfType([
-		PropTypes.instanceOf(kokopu.Game),
-		PropTypes.instanceOf(kokopu.Database),
+		PropTypes.instanceOf(Game),
+		PropTypes.instanceOf(Database),
 		PropTypes.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.
 	 */
@@ -542,7 +543,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.string,
 
@@ -556,7 +557,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),
@@ -570,7 +571,7 @@ Movetext.propTypes = {
 
 
 Movetext.defaultProps = {
-	game: new kokopu.Game(),
+	game: new Game(),
 	gameIndex: 0,
 	diagramOptions: {},
 	pieceSymbols: 'native',
@@ -643,17 +644,20 @@ function sanitizeHtml(text, sanitizer) {
  * Try to interpret the given object as a chess game.
  */
 function parseGame(game, gameIndex) {
-	if (game instanceof kokopu.Game) {
+	if (game instanceof Game) {
 		return { error: false, game: game };
 	}
-	else if (game instanceof kokopu.Database || typeof game === 'string') {
+	else if (game instanceof Database || typeof game === 'string') {
+		if (!Number.isInteger(gameIndex) || gameIndex < 0) {
+			return { error: true, message: i18n.INVALID_GAME_INDEX_ATTRIBUTE_ERROR_MESSAGE };
+		}
 		try {
-			let result = game instanceof kokopu.Database ? game.game(gameIndex) : kokopu.pgnRead(game, gameIndex);
+			const result = game instanceof Database ? game.game(gameIndex) : pgnRead(game, gameIndex);
 			return { error: false, game: result };
 		}
 		catch (e) {
 			// istanbul ignore else
-			if (e instanceof kokopu.exception.InvalidPGN) {
+			if (e instanceof exception.InvalidPGN) {
 				return { error: true, message: e.message, text: e.pgn, errorIndex: e.index, lineNumber: e.lineNumber };
 			}
 			else {

package/src/i18n.js

@@ -36,6 +36,7 @@ const i18n = {
 	ANNOTATED_BY: 'Annotated by {0}',
 	INVALID_PGN_ERROR_TITLE: 'Invalid PGN string.',
 	INVALID_GAME_ATTRIBUTE_ERROR_MESSAGE: 'Invalid "game" attribute.',
+	INVALID_GAME_INDEX_ATTRIBUTE_ERROR_MESSAGE: 'Invalid "game index" attribute.',
 };
 
 export default i18n;

package/src/impl/ArrowTip.js

@@ -29,8 +29,8 @@ import React from 'react';
  */
 export default function ArrowTip(props) {
 	return (
-		<marker id={props.id} markerWidth={4} markerHeight={4} refX={2.5} refY={2} orient="auto" fill={props.color}>
-			<path d="M 4,2 L 0,4 L 1,2 L 0,0 Z" />
+		<marker id={props.id} markerWidth={4} markerHeight={4} refX={2.5} refY={2} orient="auto">
+			<path fill={props.color} d="M 4,2 L 0,4 L 1,2 L 0,0 Z" />
 		</marker>
 	);
 }

package/src/impl/Motion.js

@@ -0,0 +1,99 @@
+/******************************************************************************
+ *                                                                            *
+ *    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 PropTypes from 'prop-types';
+import React from 'react';
+
+const DEBUG_KEY = '__kokopu_debug_freeze_motion';
+
+
+/**
+ * Wrap some animated content.
+ */
+export default class Motion extends React.Component {
+
+	constructor(props) {
+		super(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];
+		}
+	}
+
+	componentDidMount() {
+		this.animationFrameId = window.requestAnimationFrame(ts => this.handleAnimationStep(ts));
+	}
+
+	componentWillUnmount() {
+		if (this.animationFrameId !== null) {
+			window.cancelAnimationFrame(this.animationFrameId);
+			this.animationFrameId = null;
+		}
+	}
+
+	handleAnimationStep(timestamp) {
+		if (this.initialTimestamp === undefined) {
+			this.initialTimestamp = timestamp;
+		}
+
+		// Compute the animation cursor and update the state.
+		let 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(ts => this.handleAnimationStep(ts));
+		}
+	}
+
+	render() {
+		return this.props.children(this.state.cursor);
+	}
+}
+
+Motion.propTypes = {
+
+	/**
+	 * Duration of the animation. Must be > 0.
+	 */
+	duration: PropTypes.number.isRequired,
+
+	/**
+	 * Factory for the content being animated. The animation cursor is guaranteed to be valued between 0 and 1 inclusive.
+	 */
+	children: PropTypes.func.isRequired,
+};

package/src/impl/util.js

@@ -35,6 +35,14 @@ export function generateRandomId() {
 }
 
 
+export function fillPlaceholder(message, ...placeholderValues) {
+	return message.replace(/{(\d+)}/g, (match, placeholder) => {
+		const placeholderIndex = Number(placeholder);
+		return placeholderIndex < placeholderValues.length ? placeholderValues[placeholderIndex] : match;
+	});
+}
+
+
 export function sanitizeInteger(input, min, max) {
 	return Math.min(Math.max(Math.round(input), min), max);
 }

package/test/4_chessboard_graphic.js

@@ -41,6 +41,9 @@ describe('Chessboard graphic', function() {
 		'overlap', 'overlap & flip' ]);
 	itChecksScreenshots(browserContext, '05_chessboard_move', [ 'default', 'no move arrow', 'invalid', 'with forced move arrow & flip', 'capture', 'castling move',
 		'en-passant', 'promotion', 'wrong type' ]);
-	itChecksScreenshots(browserContext, '06_chessboard_theme', [ 'default', 'large', 'small', 'custom 1', 'custom 2', 'custom 3',
+	itChecksScreenshots(browserContext, '06a_chessboard_animated_move', [ 'move 1', 'move 2', 'capture', 'castling move', 'en-pssant', 'promotion' ]);
+	itChecksScreenshots(browserContext, '06b_chessboard_animated_move', [ 'move 1', 'move 2', 'capture', 'castling move', 'en-pssant', 'promotion' ]);
+	itChecksScreenshots(browserContext, '06c_chessboard_animated_move', [ 'move 1', 'move 2', 'capture', 'castling move', 'en-pssant', 'promotion' ]);
+	itChecksScreenshots(browserContext, '07_chessboard_theme', [ 'default', 'large', 'small', 'custom 1', 'custom 2', 'custom 3',
 		'custom 4', 'custom 5', 'custom 6' ]);
 });

package/test/5_chessboard_interaction.js

@@ -36,7 +36,7 @@ describe('Chessboard interaction', function() {
 	});
 
 	function itCheckClickSquare(itemIndex, label, targets) {
-		itCustom(browserContext, '07_chessboard_click_squares', itemIndex, label, async function(element) {
+		itCustom(browserContext, '08_chessboard_click_squares', itemIndex, label, async function(element) {
 			let actions = browserContext.driver.actions({ async: true });
 			let area = await element.getRect();
 			for (let i = 0; i < targets.length; ++i) {
@@ -63,7 +63,7 @@ describe('Chessboard interaction', function() {
 	]);
 
 	function itCheckMovePiece(itemIndex, label, xFrom, yFrom, xTo, yTo, imageBaseName, expectedText) {
-		itCustom(browserContext, '08_chessboard_move_pieces', itemIndex, label, async function(element) {
+		itCustom(browserContext, '09_chessboard_move_pieces', itemIndex, label, async function(element) {
 			let actions = browserContext.driver.actions({ async: true });
 			let area = await element.getRect();
 			await actions.move({ x: area.x + xFrom, y: area.y + yFrom }).press().move({ x: area.x + xTo, y: area.y + yTo }).perform();
@@ -83,7 +83,7 @@ describe('Chessboard interaction', function() {
 	itCheckMovePiece(2, 'after move', 225, 225, 75, 260, 'after_move', 'piece moved: e4 -> b3');
 
 	function itCheckNonMovePiece(itemIndex, label, xFrom, yFrom, xTo, yTo, imageBaseName) {
-		itCustom(browserContext, '08_chessboard_move_pieces', itemIndex, label, async function(element) {
+		itCustom(browserContext, '09_chessboard_move_pieces', itemIndex, label, async function(element) {
 			await setSandbox(browserContext, imageBaseName); // can be any value as long as it is unique among other test-cases
 			let actions = browserContext.driver.actions({ async: true });
 			let area = await element.getRect();
@@ -100,7 +100,7 @@ describe('Chessboard interaction', function() {
 	itCheckNonMovePiece(0, 'out of board', 175, 25, 500, 210, 'out_of_board');
 
 	function itCheckEditArrow(itemIndex, label, xFrom, yFrom, xTo, yTo, imageBaseName, expectedText) {
-		itCustom(browserContext, '09_chessboard_edit_arrows', itemIndex, label, async function(element) {
+		itCustom(browserContext, '10_chessboard_edit_arrows', itemIndex, label, async function(element) {
 			let actions = browserContext.driver.actions({ async: true });
 			let area = await element.getRect();
 			await actions.move({ x: area.x + xFrom, y: area.y + yFrom }).press().move({ x: area.x + xTo, y: area.y + yTo }).perform();
@@ -117,7 +117,7 @@ describe('Chessboard interaction', function() {
 	itCheckEditArrow(1, 'over arrow marker', 40, 110, 125, 290, 'over_arrow_marker', 'arrow edited: h3 -> f6');
 
 	function itCheckNonEditArrow(itemIndex, label, xFrom, yFrom, xTo, yTo, imageBaseName) {
-		itCustom(browserContext, '09_chessboard_edit_arrows', itemIndex, label, async function(element) {
+		itCustom(browserContext, '10_chessboard_edit_arrows', itemIndex, label, async function(element) {
 			await setSandbox(browserContext, imageBaseName); // can be any value as long as it is unique among other test-cases
 			let actions = browserContext.driver.actions({ async: true });
 			let area = await element.getRect();

package/test/6_chessboard_play_moves.js

@@ -36,7 +36,7 @@ describe('Chessboard play moves', function() {
 	});
 
 	function itCheckPlayMove(itemIndex, label, xFrom, yFrom, xTo, yTo, imageBaseName, expectedText) {
-		itCustom(browserContext, '10_chessboard_play_moves', itemIndex, label, async function(element) {
+		itCustom(browserContext, '11_chessboard_play_moves', itemIndex, label, async function(element) {
 			let actions = browserContext.driver.actions({ async: true });
 			let area = await element.getRect();
 			await actions.move({ x: area.x + xFrom, y: area.y + yFrom }).press().move({ x: area.x + xTo, y: area.y + yTo }).perform();
@@ -55,7 +55,7 @@ describe('Chessboard play moves', function() {
 	itCheckPlayMove(3, 'chess960 ambiguous king move', 275, 375, 320, 375, 'chess960_ambiguous_king_move', 'move played: Kg1');
 
 	function itCheckNonPlayMove(itemIndex, label, xFrom, yFrom, xTo, yTo, imageBaseName) {
-		itCustom(browserContext, '10_chessboard_play_moves', itemIndex, label, async function(element) {
+		itCustom(browserContext, '11_chessboard_play_moves', itemIndex, label, async function(element) {
 			await setSandbox(browserContext, imageBaseName); // can be any value as long as it is unique among other test-cases
 			let actions = browserContext.driver.actions({ async: true });
 			let area = await element.getRect();
@@ -75,7 +75,7 @@ describe('Chessboard play moves', function() {
 	itCheckNonPlayMove(3, 'chess960 non-KxR castling', 275, 375, 130, 375, 'chess960_non_kxr_castling');
 
 	function itCheckPlayPromotion(itemIndex, label, xFrom, yFrom, xTo, yTo, xPromo, yPromo, imageBaseName, expectedText) {
-		itCustom(browserContext, '11_chessboard_play_promotions', itemIndex, label, async function(element) {
+		itCustom(browserContext, '12_chessboard_play_promotions', itemIndex, label, async function(element) {
 			let actions = browserContext.driver.actions({ async: true });
 			let area = await element.getRect();
 			await actions.move({ x: area.x + xFrom, y: area.y + yFrom }).press().move({ x: area.x + xTo, y: area.y + yTo }).release().perform();
@@ -91,7 +91,7 @@ describe('Chessboard play moves', function() {
 	itCheckPlayPromotion(2, 'antichess promotion', 325, 325, 325, 375, 325, 175, 'antichess_promotion', 'promotion move played: b8=K');
 
 	function itCheckNonPlayPromotion(itemIndex, label, xFrom, yFrom, xTo, yTo, xPromo, yPromo, imageBaseName) {
-		itCustom(browserContext, '11_chessboard_play_promotions', itemIndex, label, async function(element) {
+		itCustom(browserContext, '12_chessboard_play_promotions', itemIndex, label, async function(element) {
 			await setSandbox(browserContext, imageBaseName); // can be any value as long as it is unique among other test-cases
 			let actions = browserContext.driver.actions({ async: true });
 			let area = await element.getRect();

package/test/7_movetext_graphic.js

@@ -35,9 +35,9 @@ describe('Movetext graphic', function() {
 		await closeBrowser(browserContext);
 	});
 
-	itChecksScreenshots(browserContext, '12_movetext_simple', [ 'game-0', 'game-1', 'game-2', 'game-3' ]);
-	itChecksScreenshots(browserContext, '13_movetext_error', [ 'wrong-game-index', 'pgn-parsing-error-1', 'pgn-parsing-error-2', 'wrong type' ]);
-	itChecksScreenshots(browserContext, '14_movetext_html', [ 'html-in-headers', 'html-in-comments', 'filtered-tags-and-attributes' ]);
-	itChecksScreenshots(browserContext, '15_movetext_options', [ 'localized-piece-symbols', 'custom-piece-symbols', 'figurine-piece-symbols-and-diagram-options',
+	itChecksScreenshots(browserContext, '13_movetext_simple', [ 'game-0', 'game-1', 'game-2', 'game-3' ]);
+	itChecksScreenshots(browserContext, '14_movetext_error', [ 'wrong-game-index-1', 'wrong-game-index-2', 'pgn-parsing-error-1', 'pgn-parsing-error-2', 'wrong type' ]);
+	itChecksScreenshots(browserContext, '15_movetext_html', [ 'html-in-headers', 'html-in-comments', 'filtered-tags-and-attributes' ]);
+	itChecksScreenshots(browserContext, '16_movetext_options', [ 'localized-piece-symbols', 'custom-piece-symbols', 'figurine-piece-symbols-and-diagram-options',
 		'hidden-diagrams' ]);
 });

package/test/8_movetext_interaction.js

@@ -37,7 +37,7 @@ describe('Movetext interaction', function() {
 	});
 
 	function itCheckClickMove(itemIndex, label, targets) {
-		itCustom(browserContext, '16_movetext_interaction', itemIndex, label, async function(element) {
+		itCustom(browserContext, '17_movetext_interaction', itemIndex, label, async function(element) {
 			let actions = browserContext.driver.actions({ async: true });
 			await setSandbox(browserContext, '');
 			for (let i = 0; i < targets.length; ++i) {
@@ -72,7 +72,7 @@ describe('Movetext interaction', function() {
 	]);
 
 	function itCheckKeyboardActions(itemIndex, label, expectedOnGoFirst, expectedOnGoPrevious, expectedOnGoNext, expectedOnGoLast) {
-		itCustom(browserContext, '16_movetext_interaction', itemIndex, label, async function(element) {
+		itCustom(browserContext, '17_movetext_interaction', itemIndex, label, async function(element) {
 			let focusFieldElement = await element.findElement(By.className('kokopu-focusField'));
 
 			await setSandbox(browserContext, '');