kokopu-react 1.0.2 → 1.3.1

package/src/Chessboard.js

@@ -29,7 +29,8 @@ import kokopu from 'kokopu';
 import colorsets from './impl/colorsets';
 import piecesets from './impl/piecesets';
 import ArrowTip from './impl/ArrowTip';
-import ErrorBox from './impl/ErrorBox';
+import ErrorBox from './ErrorBox';
+import i18n from './i18n';
 import { parseSquareMarkers, parseTextMarkers, parseArrowMarkers } from './markers';
 import { MIN_SQUARE_SIZE, MAX_SQUARE_SIZE, sanitizeInteger, generateRandomId, isValidSquare, isValidVector, isValidColor, isValidSymbol } from './impl/util';
 
@@ -59,8 +60,10 @@ export default class Chessboard extends React.Component {
 	constructor(props) {
 		super(props);
 		this.state = {
+			inhibitedSquare: '-',
 			draggedSquare: '-',
 			hoveredSquare: '-',
+			promotionDrawer: false,
 			windowWidth: window.innerWidth,
 		};
 		this.arrowTipIdSuffix = generateRandomId();
@@ -78,23 +81,14 @@ export default class Chessboard extends React.Component {
 	render() {
 
 		// Compute the current position.
-		let parseInfo = parsePosition(this.props.position);
-		if (parseInfo.error) {
-			return <ErrorBox title="Error while analysing a FEN string." message={parseInfo.message}></ErrorBox>;
-		}
-		let position = parseInfo.position;
-		let move = null;
-		let positionBefore = null;
-		if (this.props.move) {
-			parseInfo = parseMove(position, this.props.move);
-			if (parseInfo.error) {
-				return <ErrorBox title="Invalid move notation." message={parseInfo.message}></ErrorBox>;
-			}
-			move = parseInfo.move;
-			positionBefore = position;
-			position = new kokopu.Position(position);
-			position.play(move);
+		let info = this.getPositionAndMoveInfo();
+		if (info.positionError) {
+			return <ErrorBox title={i18n.INVALID_FEN_ERROR_TITLE} message={info.message}></ErrorBox>;
+		}
+		else if (info.moveError) {
+			return <ErrorBox title={i18n.INVALID_NOTATION_ERROR_TITLE} message={info.message}></ErrorBox>;
 		}
+		let { position, move, positionBefore } = info;
 
 		// Compute the attributes.
 		let squareSize = this.getSquareSize();
@@ -199,6 +193,7 @@ export default class Chessboard extends React.Component {
 				{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)}
@@ -223,7 +218,7 @@ export default class Chessboard extends React.Component {
 
 	renderPiece(position, squareSize,  pieceset, sq) {
 		let cp = position.square(sq);
-		if (cp === '-' || (this.isPieceDragModeEnabled() && this.state.draggedSquare === sq)) {
+		if (cp === '-' || this.state.inhibitedSquare === sq) {
 			return undefined;
 		}
 		let { x, y } = this.getSquareCoordinates(squareSize, sq);
@@ -253,21 +248,18 @@ export default class Chessboard extends React.Component {
 	}
 
 	renderDraggedPiece(position, squareSize, pieceset) {
-		if (!this.isPieceDragModeEnabled() || this.state.draggedSquare === '-') {
+		if (!(this.isMovePieceModeEnabled() || this.isPlayMoveModeEnabled()) || this.state.draggedSquare === '-') {
 			return undefined;
 		}
 		let { x, y } = this.getSquareCoordinates(squareSize, this.state.draggedSquare);
+		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);
 		let cp = position.square(this.state.draggedSquare);
-		return (
-			<image
-				className="kokopu-pieceDraggable kokopu-dragging"
-				x={x + this.state.dragPosition.x} y={y + this.state.dragPosition.y} width={squareSize} height={squareSize} href={pieceset[cp]}
-			/>
-		);
+		return <image className="kokopu-pieceDraggable kokopu-dragging" x={x} y={y} width={squareSize} height={squareSize} href={pieceset[cp]} />;
 	}
 
 	renderDraggedArrow(squareSize, colorset) {
-		if (!this.isArrowDragModeEnabled() || this.state.draggedSquare === '-') {
+		if (!this.isEditArrowModeEnabled() || this.state.draggedSquare === '-') {
 			return undefined;
 		}
 		let strokeWidth = squareSize * STROKE_THICKNESS_FACTOR;
@@ -285,15 +277,39 @@ export default class Chessboard extends React.Component {
 		);
 	}
 
+	renderPromotionDrawer(position, squareSize, colorset, pieceset) {
+		if (!this.state.promotionDrawer) {
+			return undefined;
+		}
+		let { x, y } = this.getSquareCoordinates(squareSize, this.state.promotionDrawer.origin);
+		let inverted = position.turn() === (this.props.flipped ? 'w' : 'b'); // false==top-to-bottom true==bottom-to-top
+		let y0 = inverted ? y - squareSize * (this.state.promotionDrawer.buttons.length - 1) : y;
+		let buttons = this.state.promotionDrawer.buttons.map((p, i) => {
+			let cp = position.turn() + p;
+			return <image key={'drawer-piece-' + p} className="kokopu-clickable" x={x} y={y + i * (inverted ? -squareSize : squareSize)}
+				width={squareSize} height={squareSize} href={pieceset[cp]} onClick={() => this.handleDrawerButtonClicked(p)} />;
+		});
+		return (
+			<>
+				<rect className="kokopu-handle" x={0} y={0} width={squareSize * 8} height={squareSize * 8} onClick={() => this.handleDrawerCancelButtonClicked()} />
+				<rect x={x} y={y0} width={squareSize} height={squareSize * this.state.promotionDrawer.buttons.length} fill={colorset.b} />
+				<rect x={x} y={y0} width={squareSize} height={squareSize * this.state.promotionDrawer.buttons.length} className="kokopu-drawerMask" fill={colorset.w} />
+				{buttons}
+			</>
+		);
+	}
+
 	renderSquareHandle(position, squareSize, sq) {
 		let { x, y } = this.getSquareCoordinates(squareSize, sq);
-		if ((this.isPieceDragModeEnabled() && position.square(sq) !== '-') || this.isArrowDragModeEnabled()) {
+		let dragEnabledForMovePieces = this.isMovePieceModeEnabled() && position.square(sq) !== '-';
+		let dragEnabledForEditArrows = this.isEditArrowModeEnabled();
+		let dragEnabledForPlayMoves = this.isPlayMoveModeEnabled() && position.isLegal() && position.square(sq).startsWith(position.turn()) && !this.state.promotionDrawer;
+		if (dragEnabledForMovePieces || dragEnabledForEditArrows || dragEnabledForPlayMoves) {
 			let dragPosition = this.state.draggedSquare === sq ? this.state.dragPosition : { x: 0, y: 0 };
-			let bounds = this.isPieceDragModeEnabled() ? { left: -x, top: -y, right: 7 * squareSize - x, bottom: 7 * squareSize - y } : undefined;
-			let classNames = [ 'kokopu-handle', this.isPieceDragModeEnabled() ? 'kokopu-pieceDraggable' : 'kokopu-arrowDraggable' ];
+			let classNames = [ 'kokopu-handle', this.isEditArrowModeEnabled() ? 'kokopu-arrowDraggable' : 'kokopu-pieceDraggable' ];
 			return (
 				<Draggable
-					key={'handle-' + sq} position={dragPosition} bounds={bounds}
+					key={'handle-' + sq} position={dragPosition}
 					onStart={evt => this.handleDragStart(sq, evt)}
 					onDrag={(_, dragData) => this.handleDrag(sq, dragData)}
 					onStop={(_, dragData) => this.handleDragStop(sq, dragData)}
@@ -420,6 +436,7 @@ export default class Chessboard extends React.Component {
 	handleDragStart(sq, evt) {
 		let squareBoundary = evt.target.getBoundingClientRect();
 		this.setState({
+			inhibitedSquare: this.isMovePieceModeEnabled() || this.isPlayMoveModeEnabled() ? sq : '-',
 			draggedSquare: sq,
 			hoveredSquare: sq,
 			cursorOffset: { x: evt.clientX - squareBoundary.left, y: evt.clientY - squareBoundary.top },
@@ -432,9 +449,7 @@ export default class Chessboard extends React.Component {
 		let { x, y } = this.getSquareCoordinates(squareSize, sq);
 		let 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 },
 		});
 	}
@@ -444,18 +459,70 @@ export default class Chessboard extends React.Component {
 		let { x, y } = this.getSquareCoordinates(squareSize, sq);
 		let 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()) {
+			let { position } = this.getPositionAndMoveInfo();
+			let 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: piece => position.notation(info(piece)),
+						},
+					});
+					break;
+
+				// Other cases are not supposed to happen.
+				// istanbul ignore next
+				default:
+					break;
+			}
+		}
+	}
+
+	handleDrawerCancelButtonClicked() {
+		this.setState({
+			inhibitedSquare: '-',
+			promotionDrawer: false,
+		});
+	}
+
+	handleDrawerButtonClicked(piece) {
+		let builder = this.state.promotionDrawer.builder;
+		this.setState({
+			inhibitedSquare: '-',
+			promotionDrawer: false,
+		});
+		if (this.props.onMovePlayed) {
+			this.props.onMovePlayed(builder(piece));
+		}
 	}
 
 	handleSquareClicked(sq) {
@@ -467,14 +534,21 @@ export default class Chessboard extends React.Component {
 	/**
 	 * Whether the "move piece" mode is enabled or not.
 	 */
-	isPieceDragModeEnabled() {
+	isMovePieceModeEnabled() {
 		return this.props.interactionMode === 'movePieces';
 	}
 
+	/**
+	 * Whether the "play move" mode is enabled or not.
+	 */
+	isPlayMoveModeEnabled() {
+		return this.props.interactionMode === 'playMoves';
+	}
+
 	/**
 	 * Whether the "edit arrow" mode is enabled or not.
 	 */
-	isArrowDragModeEnabled() {
+	isEditArrowModeEnabled() {
 		return this.props.interactionMode === 'editArrows' && isValidColor(this.props.editedArrowColor);
 	}
 
@@ -505,6 +579,34 @@ export default class Chessboard extends React.Component {
 		return { x: x, y: y };
 	}
 
+	/**
+	 * Return information regarding the current displayed position and move, or parsing error message if something went wrong.
+	 */
+	getPositionAndMoveInfo() {
+
+		// Parse the position.
+		let 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.
+		let 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.
+		let positionAfter = new kokopu.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.
 	 */
@@ -736,8 +838,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.oneOf([ 'movePieces', 'clickSquares', 'editArrows' ]),
+	interactionMode: PropTypes.oneOf([ 'movePieces', 'clickSquares', 'editArrows', 'playMoves' ]),
 
 	/**
 	 * Color of the edited arrow (only used if `interactionMode` is set to `'editArrows'`).
@@ -766,6 +873,13 @@ Chessboard.propTypes = {
 	 * @param {string} to Target square (e.g. `'f3'`).
 	 */
 	onArrowEdited: PropTypes.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.func,
 };
 
 
@@ -815,6 +929,7 @@ function parsePosition(position) {
 			return { error: false, position: new kokopu.Position(position) };
 		}
 		catch (e) {
+			// istanbul ignore else
 			if (e instanceof kokopu.exception.InvalidFEN) {
 				return { error: true, message: e.message };
 			}
@@ -824,7 +939,7 @@ function parsePosition(position) {
 		}
 	}
 	else {
-		return { error: true, message: 'Invalid "position" attribute.' };
+		return { error: true, message: i18n.INVALID_POSITION_ATTRIBUTE_ERROR_MESSAGE };
 	}
 }
 
@@ -841,6 +956,7 @@ function parseMove(position, move) {
 			return { error: false, move: position.notation(move) };
 		}
 		catch (e) {
+			// istanbul ignore else
 			if (e instanceof kokopu.exception.InvalidNotation) {
 				return { error: true, message: e.message };
 			}
@@ -850,7 +966,7 @@ function parseMove(position, move) {
 		}
 	}
 	else {
-		return { error: true, message: 'Invalid "move" attribute.' };
+		return { error: true, message: i18n.INVALID_MOVE_ATTRIBUTE_ERROR_MESSAGE };
 	}
 }
 

package/src/{impl/ErrorBox.js → ErrorBox.js}

@@ -23,18 +23,17 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import '../css/error_box.css';
+import './css/error_box.css';
 
 
 /**
  * Display an error message.
  */
 export default function ErrorBox(props) {
-	let message = 'message' in props ? <div className="kokopu-errorMessage">{props.message}</div> : undefined;
 	return (
 		<div className="kokopu-errorBox">
 			<div className="kokopu-errorTitle">{props.title}</div>
-			{message}
+			<div className="kokopu-errorMessage">{props.message}</div>
 		</div>
 	);
 }
@@ -47,7 +46,7 @@ ErrorBox.propTypes = {
 	title: PropTypes.string.isRequired,
 
 	/**
-	 * Optional message providing additional details about the error.
+	 * Additional message providing details about the error.
 	 */
-	message: PropTypes.string,
+	message: PropTypes.string.isRequired,
 };

package/src/css/chessboard.css

@@ -48,3 +48,7 @@
 .kokopu-arrowDraggable {
 	cursor: crosshair;
 }
+
+.kokopu-drawerMask {
+	opacity: 0.5;
+}

package/src/i18n.js

@@ -0,0 +1,30 @@
+/******************************************************************************
+ *                                                                            *
+ *    This file is part of Kokopu-React, a JavaScript chess library.          *
+ *    Copyright (C) 2021  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/>.                                         *
+ *                                                                            *
+ ******************************************************************************/
+
+
+const i18n = {
+	INVALID_FEN_ERROR_TITLE: 'Invalid FEN string.',
+	INVALID_NOTATION_ERROR_TITLE: 'Invalid move notation.',
+	INVALID_POSITION_ATTRIBUTE_ERROR_MESSAGE: 'Invalid "position" attribute.',
+	INVALID_MOVE_ATTRIBUTE_ERROR_MESSAGE: 'Invalid "move" attribute.',
+};
+
+export default i18n;

package/src/index.js

@@ -21,7 +21,9 @@
 
 
 export { flattenSquareMarkers, parseSquareMarkers, flattenTextMarkers, parseTextMarkers, flattenArrowMarkers, parseArrowMarkers } from './markers';
+export { default as i18n } from './i18n';
 export { default as Chessboard } from './Chessboard';
+export { default as ErrorBox } from './ErrorBox';
 export { default as SquareMarkerIcon } from './SquareMarkerIcon';
 export { default as TextMarkerIcon } from './TextMarkerIcon';
 export { default as ArrowMarkerIcon } from './ArrowMarkerIcon';

package/test/4_chessboard_graphic.js

@@ -35,12 +35,12 @@ describe('Chessboard graphic', function() {
 		await closeBrowser(browserContext);
 	});
 
-	itChecksScreenshots(browserContext, '02_chessboard_simple', [ 'default', 'empty', 'invalid', 'from FEN', 'from Kokopu object' ]);
+	itChecksScreenshots(browserContext, '02_chessboard_simple', [ 'default', 'empty', 'invalid', 'from FEN', 'from Kokopu object', 'wrong type' ]);
 	itChecksScreenshots(browserContext, '03_chessboard_flipped', [ 'default', 'empty', 'invalid', 'from FEN', 'from Kokopu object' ]);
 	itChecksScreenshots(browserContext, '04_chessboard_annotations', [ 'with coordinates', 'with coordinates & flip', 'without coordinates', 'without coordinates & flip',
 		'overlap', 'overlap & flip' ]);
 	itChecksScreenshots(browserContext, '05_chessboard_move', [ 'default', 'no move arrow', 'invalid', 'with forced move arrow & flip', 'capture', 'castling move',
-		'en-passant', 'promotion' ]);
+		'en-passant', 'promotion', 'wrong type' ]);
 	itChecksScreenshots(browserContext, '06_chessboard_theme', [ 'default', 'large', 'small', 'custom 1', 'custom 2', 'custom 3',
 		'custom 4', 'custom 5', 'custom 6' ]);
 });

package/test/5_chessboard_interaction.js

@@ -0,0 +1,135 @@
+/******************************************************************************
+ *                                                                            *
+ *    This file is part of Kokopu-React, a JavaScript chess library.          *
+ *    Copyright (C) 2021  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/>.                                         *
+ *                                                                            *
+ ******************************************************************************/
+
+
+const { openBrowser, closeBrowser, itCustom, setSandbox, compareSandbox, takeScreenshot, compareScreenshot } = require('./common/graphic');
+
+
+describe('Chessboard interaction', function() {
+
+	const browserContext = {};
+
+	before(async function() {
+		await openBrowser(this, browserContext);
+	});
+
+	after(async function() {
+		await closeBrowser(browserContext);
+	});
+
+	function itCheckClickSquare(itemIndex, label, targets) {
+		itCustom(browserContext, '07_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) {
+				let target = targets[i];
+				await actions.move({ x: area.x + target.x, y: area.y + target.y }).click().perform();
+				await compareSandbox(browserContext, target.expectedText);
+			}
+		});
+	}
+
+	itCheckClickSquare(0, 'default', [
+		{ x: 225, y: 75, expectedText: 'square clicked: e7' },
+		{ x: 25, y: 375, expectedText: 'square clicked: a1' },
+		{ x: 325, y: 175, expectedText: 'square clicked: g5' },
+	]);
+	itCheckClickSquare(1, 'with flip', [
+		{ x: 325, y: 175, expectedText: 'square clicked: b4' },
+	]);
+	itCheckClickSquare(2, 'over annotations', [
+		{ x: 25, y: 25, expectedText: 'square clicked: a8' },
+		{ x: 75, y: 125, expectedText: 'square clicked: b6' },
+		{ x: 175, y: 125, expectedText: 'square clicked: d6' },
+		{ x: 75, y: 225, expectedText: 'square clicked: b4' },
+	]);
+
+	function itCheckMovePiece(itemIndex, label, xFrom, yFrom, xTo, yTo, imageBaseName, expectedText) {
+		itCustom(browserContext, '08_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();
+			await takeScreenshot(browserContext, imageBaseName, element);
+			await actions.release().perform();
+			await compareScreenshot(browserContext, imageBaseName);
+			await compareSandbox(browserContext, expectedText);
+		});
+	}
+
+	itCheckMovePiece(0, 'over empty', 275, 385, 225, 175, 'over_empty', 'piece moved: f1 -> e5');
+	itCheckMovePiece(0, 'over non-empty 1', 280, 365, 75, 75, 'over_non_empty_1', 'piece moved: f1 -> b7');
+	itCheckMovePiece(0, 'over non-empty 2', 130, 75, 225, 375, 'over_non_empty_2', 'piece moved: c7 -> e1');
+	itCheckMovePiece(1, 'over square marker', 10, 325, 275, 175, 'over_square_marker', 'piece moved: h7 -> c4');
+	itCheckMovePiece(1, 'over text marker', 225, 25, 10, 135, 'over_text_marker', 'piece moved: d1 -> h3');
+	itCheckMovePiece(1, 'over arrow marker', 325, 25, 315, 260, 'over_arrow_marker', 'piece moved: b1 -> b6');
+	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) {
+			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();
+			await actions.move({ x: area.x + xFrom, y: area.y + yFrom }).press().move({ x: area.x + xTo, y: area.y + yTo }).perform();
+			await takeScreenshot(browserContext, imageBaseName, element);
+			await actions.release().perform();
+			await compareScreenshot(browserContext, imageBaseName);
+			await compareSandbox(browserContext, imageBaseName);
+		});
+	}
+
+	itCheckNonMovePiece(0, 'move empty square', 175, 225, 275, 75, 'empty_square');
+	itCheckNonMovePiece(0, 'from == to', 75, 375, 80, 360, 'null_vector');
+	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) {
+			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();
+			await takeScreenshot(browserContext, imageBaseName, element);
+			await actions.release().perform();
+			await compareScreenshot(browserContext, imageBaseName);
+			await compareSandbox(browserContext, expectedText);
+		});
+	}
+
+	itCheckEditArrow(0, 'base 1', 325, 275, 110, 140, 'base_1', 'arrow edited: g3 -> c6');
+	itCheckEditArrow(0, 'base 2', 260, 10, 175, 375, 'base_2', 'arrow edited: f8 -> d1');
+	itCheckEditArrow(1, 'over square marker', 275, 125, 275, 230, 'over_square_marker', 'arrow edited: c3 -> c5');
+	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) {
+			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();
+			await actions.move({ x: area.x + xFrom, y: area.y + yFrom }).press().move({ x: area.x + xTo, y: area.y + yTo }).perform();
+			await takeScreenshot(browserContext, imageBaseName, element);
+			await actions.release().perform();
+			await compareScreenshot(browserContext, imageBaseName);
+			await compareSandbox(browserContext, imageBaseName);
+		});
+	}
+
+	itCheckNonEditArrow(2, 'edit color not set', 125, 175, 325, 225, 'edit_color_not_set');
+	itCheckNonEditArrow(0, 'from == to', 275, 225, 290, 210, 'null_vector');
+	itCheckNonEditArrow(0, 'out of board', 175, 225, 500, 280, 'out_of_board');
+});