kokopu-react 2.0.1 → 3.0.0

package/doc_src/migrate_to_3.md

@@ -0,0 +1,51 @@
+Kokopu-React version 3.0.0 introduces some breaking changes with regard to the previous versions.
+Those changes may require some fixes or adjustments in your codebase when upgrading Kokopu-React
+from 2.x to 3.0.0 (or any subsequent version).
+
+To upgrade from an older version, follow the [migration guide to 2.x](#/Migrate%20to%202.x) beforehand.
+
+
+
+Methods `Chessboard.size(..)`
+-----------------------------
+
+As of 3.0.0, the method arguments `squareSize`, `coordinateVisible` and `smallScreenLimits`
+must be passed as named arguments, as in the following example:
+
+```plain
+const squareSize = 42;
+const coordinateVisible = true;
+const smallScreenLimits = [ /* whatever */ ];
+
+const { width, height } = Chessboard.size({
+  squareSize: squareSize,
+  coordinateVisible: coordinateVisible,
+  smallScreenLimits: smallScreenLimits,
+});
+
+// Used to be, before 3.0.0:
+// const { width, height } = Chessboard.size(squareSize, coordinateVisible, smallScreenLimits);
+```
+
+
+
+Methods `Chessboard.adaptSquareSize(..)`
+----------------------------------------
+
+As of 3.0.0, the method arguments `coordinateVisible` and `smallScreenLimits`
+must be passed as named arguments, as in the following example:
+
+```plain
+const width = 600;
+const height = 400;
+const coordinateVisible = true;
+const smallScreenLimits = [ /* whatever */ ];
+
+const squareSize = Chessboard.adaptSquareSize(width, height, {
+  coordinateVisible: coordinateVisible,
+  smallScreenLimits: smallScreenLimits,
+});
+
+// Used to be, before 3.0.0:
+// const squareSize = Chessboard.adaptSquareSize(width, height, coordinateVisible, smallScreenLimits);
+```

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "kokopu-react",
-	"version": "2.0.1",
+	"version": "3.0.0",
 	"description": "A React-based library to create and display chessboard and chess-related components.",
 	"keywords": [
 		"chess",
@@ -42,23 +42,23 @@
 		"htmlparser2": "^9.0.0"
 	},
 	"devDependencies": {
-		"@babel/preset-env": "^7.21.5",
-		"@babel/preset-react": "^7.18.6",
-		"@emotion/react": "^11.11.0",
+		"@babel/preset-env": "^7.22.5",
+		"@babel/preset-react": "^7.22.5",
+		"@emotion/react": "^11.11.1",
 		"@emotion/styled": "^11.11.0",
-		"@mui/material": "^5.13.2",
-		"@types/react": "^18.2.7",
-		"@types/react-dom": "^18.2.4",
-		"@typescript-eslint/eslint-plugin": "^5.59.7",
-		"@typescript-eslint/parser": "^5.59.7",
+		"@mui/material": "^5.13.5",
+		"@types/react": "^18.2.12",
+		"@types/react-dom": "^18.2.5",
+		"@typescript-eslint/eslint-plugin": "^5.59.11",
+		"@typescript-eslint/parser": "^5.59.11",
 		"babel-loader": "^9.1.2",
 		"copy-webpack-plugin": "^11.0.0",
 		"copyfiles": "^2.4.1",
 		"coverage-istanbul-loader": "^3.0.5",
-		"css-loader": "^6.7.4",
-		"eslint": "^8.41.0",
+		"css-loader": "^6.8.1",
+		"eslint": "^8.43.0",
 		"eslint-plugin-react": "^7.32.2",
-		"html-webpack-plugin": "^5.5.1",
+		"html-webpack-plugin": "^5.5.3",
 		"img-diff-js": "^0.5.2",
 		"kokopu": "^4.7.0",
 		"mocha": "^10.2.0",
@@ -69,14 +69,14 @@
 		"react-dom": "^18.2.0",
 		"react-styleguidist": "^13.1.1",
 		"rimraf": "^5.0.1",
-		"selenium-webdriver": "^4.9.2",
+		"selenium-webdriver": "^4.10.0",
 		"ssh2-sftp-client": "^9.1.0",
 		"style-loader": "^3.3.3",
 		"ts-loader": "^9.4.3",
-		"typescript": "^5.0.4",
+		"typescript": "~5.0.4",
 		"unit.js": "^2.1.1",
-		"webpack": "^5.84.0",
-		"webpack-cli": "^5.1.1"
+		"webpack": "^5.87.0",
+		"webpack-cli": "^5.1.4"
 	},
 	"scripts": {
 		"lint": "eslint doc_src src test",

package/scripts/doc.styleguide.config.js

@@ -37,7 +37,8 @@ fs.mkdirSync(path.resolve(__dirname, tmpDir), { recursive: true });
 // -------------------------------
 
 const componentSectionTitle = 'Components';
-const components = [ 'errorbox/ErrorBox', 'icons/SquareMarkerIcon', 'icons/TextMarkerIcon', 'icons/ArrowMarkerIcon', 'chessboard/Chessboard', 'movetext/Movetext' ];
+const components = [ 'errorbox/ErrorBox', 'icons/SquareMarkerIcon', 'icons/TextMarkerIcon', 'icons/ArrowMarkerIcon', 'icons/ChessPieceIcon',
+	'chessboard/Chessboard', 'movetext/Movetext' ];
 
 
 // Demo section configuration
@@ -177,6 +178,10 @@ module.exports = {
 			name: 'Migrate to 2.x',
 			content: `${docSrcDir}/migrate_to_2.md`,
 		},
+		{
+			name: 'Migrate to 3.x',
+			content: `${docSrcDir}/migrate_to_3.md`,
+		},
 	],
 	styleguideComponents: {
 		LogoRenderer: path.resolve(__dirname, `${docSrcDir}/theming/LogoRenderer`),

package/scripts/docker-compose.yml

@@ -2,7 +2,7 @@ version: "3.7"
 
 services:
   web-client:
-    image: selenium/standalone-firefox:4.9.1-20230508 # https://github.com/SeleniumHQ/docker-selenium to get the latest version
+    image: selenium/standalone-firefox:4.10.0-20230607 # https://github.com/SeleniumHQ/docker-selenium to get the latest version
     shm_size: '2gb'
     ports:
       - 4444:4444 # http://localhost:4444 (driver)

package/src/chessboard/Chessboard.tsx

@@ -26,12 +26,12 @@ import { exception as kokopuException, MoveDescriptor, Position, Square, GameVar
 
 import { IllegalArgument } from '../exception';
 import { i18n } from '../i18n';
-import { sanitizeString, sanitizeBoolean, sanitizeInteger, sanitizeBoundedInteger, sanitizeOptional } from '../sanitization';
+import { sanitizeString, sanitizeBoolean, sanitizePartialObject, sanitizeInteger, sanitizeBoundedInteger, sanitizeOptional } from '../sanitization';
 import { MIN_SQUARE_SIZE, MAX_SQUARE_SIZE, Colorset, Pieceset, AnnotationColor, AnnotationSymbol, SquareMarkerSet, TextMarkerSet, ArrowMarkerSet,
 	isAnnotationColor, isAnnotationSymbol, parseSquareMarkers, parseTextMarkers, parseArrowMarkers } from '../types';
 
-import { colorsets } from './colorsets';
-import { piecesets } from './piecesets';
+import { colorsets, DEFAULT_COLORSET } from './colorsets';
+import { piecesets, DEFAULT_PIECESET } from './piecesets';
 import { ChessboardImpl, chessboardSize } from './ChessboardImpl';
 import { ErrorBox } from '../errorbox/ErrorBox';
 
@@ -43,6 +43,7 @@ export interface SmallScreenLimit {
 	width: number;
 	squareSize?: number;
 	coordinateVisible?: boolean;
+	turnVisible?: boolean;
 }
 
 
@@ -98,6 +99,11 @@ export interface ChessboardProps {
 	 */
 	coordinateVisible: boolean;
 
+	/**
+	 * Whether the turn flag is visible or not.
+	 */
+	turnVisible: boolean;
+
 	/**
 	 * Whether moves are highlighted with an arrow or not.
 	 */
@@ -180,6 +186,9 @@ interface ChessboardState {
 }
 
 
+const DEFAULT_SQUARE_SIZE = 40;
+
+
 /**
  * SVG image representing a chessboard diagram. Optionally, the user may interact with the board (move pieces, click on squares...).
  * Annotations such as square markers or arrows can also be added to the board.
@@ -189,13 +198,14 @@ export class Chessboard extends React.Component<ChessboardProps, ChessboardState
 	static defaultProps: Partial<ChessboardProps> = {
 		position: 'start',
 		flipped: false,
-		squareSize: 40,
+		squareSize: DEFAULT_SQUARE_SIZE,
 		coordinateVisible: true,
+		turnVisible: true,
 		moveArrowVisible: true,
 		moveArrowColor: 'b',
 		animated: false,
-		colorset: 'original',
-		pieceset: 'cburnett',
+		colorset: DEFAULT_COLORSET,
+		pieceset: DEFAULT_PIECESET,
 	};
 
 	private windowResizeListener = () => this.handleWindowResize();
@@ -242,6 +252,7 @@ export class Chessboard extends React.Component<ChessboardProps, ChessboardState
 		const flipped = sanitizeBoolean(this.props.flipped);
 		const squareSize = sanitizeBoundedInteger(this.props.squareSize, MIN_SQUARE_SIZE, MAX_SQUARE_SIZE, () => new IllegalArgument('Chessboard', 'squareSize'));
 		const coordinateVisible = sanitizeBoolean(this.props.coordinateVisible);
+		const turnVisible = sanitizeBoolean(this.props.turnVisible);
 		const moveArrowVisible = sanitizeBoolean(this.props.moveArrowVisible);
 		if (!isAnnotationColor(this.props.moveArrowColor)) {
 			throw new IllegalArgument('Chessboard', 'moveArrowColor');
@@ -260,6 +271,7 @@ export class Chessboard extends React.Component<ChessboardProps, ChessboardState
 		const smallScreenLimits = sanitizeSmallScreenLimits(this.props.smallScreenLimits, () => new IllegalArgument('Chessboard', 'smallScreenLimits'));
 		const actualSquareSize = computeSquareSizeForSmallScreens(squareSize, smallScreenLimits, this.state.windowWidth);
 		const actualCoordinateVisible = computeCoordinateVisibleForSmallScreens(coordinateVisible, smallScreenLimits, this.state.windowWidth);
+		const actualTurnVisible = computeTurnVisibleForSmallScreens(turnVisible, smallScreenLimits, this.state.windowWidth);
 
 		// Validate the interaction attributes and the callbacks.
 		const interactionMode = this.getInteractionModeAndValidateEditedArrowColor();
@@ -271,9 +283,10 @@ export class Chessboard extends React.Component<ChessboardProps, ChessboardState
 
 		return (
 			<ChessboardImpl key={key}
-				position={position} move={move} squareMarkers={sqm} textMarkers={txtm} arrowMarkers={arm}
-				flipped={flipped} squareSize={actualSquareSize} coordinateVisible={actualCoordinateVisible} moveArrowVisible={moveArrowVisible}
-				moveArrowColor={this.props.moveArrowColor} animated={animated} colorset={colorset} pieceset={pieceset}
+				position={position} move={move} squareMarkers={sqm} textMarkers={txtm} arrowMarkers={arm} flipped={flipped}
+				squareSize={actualSquareSize} coordinateVisible={actualCoordinateVisible} turnVisible={actualTurnVisible}
+				moveArrowVisible={moveArrowVisible} moveArrowColor={this.props.moveArrowColor} animated={animated}
+				colorset={colorset} pieceset={pieceset}
 				interactionMode={interactionMode} editedArrowColor={this.props.editedArrowColor}
 				onPieceMoved={onPieceMoved} onSquareClicked={onSquareClicked} onArrowEdited={onArrowEdited} onMovePlayed={onMovePlayed}
 			/>
@@ -299,43 +312,50 @@ export class Chessboard extends React.Component<ChessboardProps, ChessboardState
 	/**
 	 * Return the size of the chessboard, assuming it is built with the given attributes.
 	 */
-	static size(squareSize: number, coordinateVisible: boolean, smallScreenLimits?: SmallScreenLimit[]): { width: number, height: number } {
+	static size(attr?: Partial<Pick<ChessboardProps, 'squareSize' | 'coordinateVisible' | 'turnVisible' | 'smallScreenLimits'>>): { width: number, height: number } {
+		let { squareSize, coordinateVisible, turnVisible, smallScreenLimits } = sanitizePartialObject(attr, () => new IllegalArgument('Chessboard.size()', 'attr'));
 
 		// Sanitize the arguments.
-		squareSize = sanitizeBoundedInteger(squareSize, MIN_SQUARE_SIZE, MAX_SQUARE_SIZE, () => new IllegalArgument('Chessboard.size()', 'squareSize'));
-		coordinateVisible = sanitizeBoolean(coordinateVisible);
-		const limits = sanitizeSmallScreenLimits(smallScreenLimits, () => new IllegalArgument('Chessboard.size()', 'smallScreenLimits'));
+		squareSize = squareSize === undefined ? DEFAULT_SQUARE_SIZE :
+			sanitizeBoundedInteger(squareSize, MIN_SQUARE_SIZE, MAX_SQUARE_SIZE, () => new IllegalArgument('Chessboard.size()', 'squareSize'));
+		coordinateVisible = coordinateVisible === undefined ? true : sanitizeBoolean(coordinateVisible);
+		turnVisible = turnVisible === undefined ? true : sanitizeBoolean(turnVisible);
+		smallScreenLimits = sanitizeSmallScreenLimits(smallScreenLimits, () => new IllegalArgument('Chessboard.size()', 'smallScreenLimits'));
 
 		// Enforce small-screen limits, if any.
 		if (typeof window !== 'undefined') {
-			squareSize = computeSquareSizeForSmallScreens(squareSize, limits, window.innerWidth);
-			coordinateVisible = computeCoordinateVisibleForSmallScreens(coordinateVisible, limits, window.innerWidth);
+			squareSize = computeSquareSizeForSmallScreens(squareSize, smallScreenLimits, window.innerWidth);
+			coordinateVisible = computeCoordinateVisibleForSmallScreens(coordinateVisible, smallScreenLimits, window.innerWidth);
+			turnVisible = computeTurnVisibleForSmallScreens(turnVisible, smallScreenLimits, window.innerWidth);
 		}
 
 		// Compute the dimensions.
-		return chessboardSize(squareSize, coordinateVisible);
+		return chessboardSize(squareSize, coordinateVisible, turnVisible);
 	}
 
 	/**
 	 * Return the maximum square size that would allow the chessboard to fit in a rectangle of size `width x height`.
 	 */
-	static adaptSquareSize(width: number, height: number, coordinateVisible: boolean, smallScreenLimits?: SmallScreenLimit[]): number {
+	static adaptSquareSize(width: number, height: number, attr?: Partial<Pick<ChessboardProps, 'coordinateVisible' | 'turnVisible' | 'smallScreenLimits'>>): number {
+		let { coordinateVisible, turnVisible, smallScreenLimits } = sanitizePartialObject(attr, () => new IllegalArgument('Chessboard.size()', 'attr'));
 
 		// Sanitize the arguments.
 		width = sanitizeInteger(width, () => new IllegalArgument('Chessboard.adaptSquareSize()', 'width'));
 		height = sanitizeInteger(height, () => new IllegalArgument('Chessboard.adaptSquareSize()', 'height'));
-		coordinateVisible = sanitizeBoolean(coordinateVisible);
-		const limits = sanitizeSmallScreenLimits(smallScreenLimits, () => new IllegalArgument('Chessboard.adaptSquareSize()', 'smallScreenLimits'));
+		coordinateVisible = coordinateVisible === undefined ? true : sanitizeBoolean(coordinateVisible);
+		turnVisible = turnVisible === undefined ? true : sanitizeBoolean(turnVisible);
+		smallScreenLimits = sanitizeSmallScreenLimits(smallScreenLimits, () => new IllegalArgument('Chessboard.adaptSquareSize()', 'smallScreenLimits'));
 
 		// Enforce small-screen limits, if any.
 		let maxSquareSize = MAX_SQUARE_SIZE;
 		if (typeof window !== 'undefined') {
-			maxSquareSize = computeSquareSizeForSmallScreens(maxSquareSize, limits, window.innerWidth);
-			coordinateVisible = computeCoordinateVisibleForSmallScreens(coordinateVisible, limits, window.innerWidth);
+			maxSquareSize = computeSquareSizeForSmallScreens(maxSquareSize, smallScreenLimits, window.innerWidth);
+			coordinateVisible = computeCoordinateVisibleForSmallScreens(coordinateVisible, smallScreenLimits, window.innerWidth);
+			turnVisible = computeTurnVisibleForSmallScreens(turnVisible, smallScreenLimits, window.innerWidth);
 		}
 
 		function isAdapted(squareSize: number) {
-			const { width: actualWidth, height: actualHeight } = chessboardSize(squareSize, coordinateVisible);
+			const { width: actualWidth, height: actualHeight } = chessboardSize(squareSize, coordinateVisible!, turnVisible!);
 			return actualWidth <= width && actualHeight <= height;
 		}
 
@@ -410,7 +430,7 @@ function computeSquareSizeForSmallScreens(squareSize: number, smallScreenLimits:
 
 
 /**
- * Compute the actual square size taking into account the given small-screen limits and window width.
+ * Compute the actual coordinate visibility attribute taking into account the given small-screen limits and window width.
  */
 function computeCoordinateVisibleForSmallScreens(coordinateVisible: boolean, smallScreenLimits: SmallScreenLimit[], windowWidth: number) {
 	const maximumCoordinateVisible = computeSmallScreenLimits(smallScreenLimits, windowWidth, limit => limit.coordinateVisible);
@@ -418,6 +438,15 @@ function computeCoordinateVisibleForSmallScreens(coordinateVisible: boolean, sma
 }
 
 
+/**
+ * Compute the actual turn flag visibility attribute taking into account the given small-screen limits and window width.
+ */
+function computeTurnVisibleForSmallScreens(turnVisible: boolean, smallScreenLimits: SmallScreenLimit[], windowWidth: number) {
+	const maximumTurnVisible = computeSmallScreenLimits(smallScreenLimits, windowWidth, limit => limit.turnVisible);
+	return maximumTurnVisible === undefined ? turnVisible : turnVisible && maximumTurnVisible;
+}
+
+
 /**
  * Compute the limit applicable to the given window width.
  */
@@ -565,10 +594,14 @@ function sanitizeSmallScreenLimits(smallScreenLimits: SmallScreenLimit[] | undef
 	}
 	else {
 		return smallScreenLimits.map(smallScreenLimit => {
+			if (typeof smallScreenLimit !== 'object' || smallScreenLimit === null) {
+				throw exceptionBuilder();
+			}
 			return {
 				width: sanitizeInteger(smallScreenLimit.width, exceptionBuilder),
 				squareSize: sanitizeOptional(smallScreenLimit.squareSize, val => sanitizeBoundedInteger(val, MIN_SQUARE_SIZE, MAX_SQUARE_SIZE, exceptionBuilder)),
 				coordinateVisible: sanitizeOptional(smallScreenLimit.coordinateVisible, sanitizeBoolean),
+				turnVisible: sanitizeOptional(smallScreenLimit.turnVisible, sanitizeBoolean)
 			};
 		});
 	}

package/src/chessboard/ChessboardImpl.tsx

@@ -60,6 +60,7 @@ interface ChessboardImplProps {
 	flipped: boolean;
 	squareSize: number;
 	coordinateVisible: boolean;
+	turnVisible: boolean;
 	moveArrowVisible: boolean;
 	moveArrowColor: AnnotationColor;
 	animated: boolean;
@@ -127,7 +128,7 @@ export class ChessboardImpl extends React.Component<ChessboardImplProps, Chessbo
 		// Render the whole canvas.
 		const xmin = Math.round(-RANK_COORDINATE_WIDTH_FACTOR * fontSize);
 		const ymin = 0;
-		const xmax = 9 * this.props.squareSize + Math.round(TURN_FLAG_SPACING_FACTOR * this.props.squareSize);
+		const xmax = this.props.turnVisible ? 9 * this.props.squareSize + Math.round(TURN_FLAG_SPACING_FACTOR * this.props.squareSize) : 8 * this.props.squareSize;
 		const ymax = 8 * this.props.squareSize + Math.round(FILE_COORDINATE_HEIGHT_FACTOR * fontSize);
 		const viewBox = `${xmin} ${ymin} ${xmax - xmin} ${ymax - ymin}`;
 		return (
@@ -433,6 +434,9 @@ export class ChessboardImpl extends React.Component<ChessboardImplProps, Chessbo
 	}
 
 	private renderTurnFlag(turn: Color) {
+		if (!this.props.turnVisible) {
+			return undefined;
+		}
 		const x = 8 * this.props.squareSize + Math.round(TURN_FLAG_SPACING_FACTOR * this.props.squareSize);
 		const y = turn === (this.props.flipped ? 'b' : 'w') ? 7 * this.props.squareSize : 0;
 		return <image key={'turn-' + turn} x={x} y={y} width={this.props.squareSize} height={this.props.squareSize} href={this.getURLForTurnFlag(turn)} />;
@@ -612,9 +616,12 @@ export class ChessboardImpl extends React.Component<ChessboardImplProps, Chessbo
 /**
  * Return the size of the chessboard, assuming it is built with the given attributes.
  */
-export function chessboardSize(squareSize: number, coordinateVisible: boolean) {
-	let width = 9 * squareSize + Math.round(TURN_FLAG_SPACING_FACTOR * squareSize);
+export function chessboardSize(squareSize: number, coordinateVisible: boolean, turnVisible: boolean) {
+	let width = 8 * squareSize;
 	let height = 8 * squareSize;
+	if (turnVisible) {
+		width += squareSize + Math.round(TURN_FLAG_SPACING_FACTOR * squareSize);
+	}
 	if (coordinateVisible) {
 		const fontSize = computeCoordinateFontSize(squareSize);
 		width += Math.round(RANK_COORDINATE_WIDTH_FACTOR * fontSize);

package/src/chessboard/Draggable.tsx

@@ -72,17 +72,6 @@ interface DraggableProps {
 }
 
 
-interface InnerListeners {
-	mouseDown: (evt: MouseEvent) => void;
-	mouseMove: (evt: MouseEvent) => void;
-	mouseUp: (evt: MouseEvent) => void;
-	touchStart: (evt: TouchEvent) => void;
-	touchMove: (evt: TouchEvent) => void;
-	touchEnd: (evt: TouchEvent) => void;
-	touchCancel: (evt: TouchEvent) => void;
-}
-
-
 interface DragData {
 	originX: number;
 	originY: number;
@@ -107,42 +96,34 @@ interface ClientCoordinates {
 export class Draggable extends React.Component<DraggableProps> {
 
 	private innerRef: React.RefObject<SVGRectElement> = React.createRef();
-	private innerListeners?: InnerListeners;
 	private dragData?: DragData;
 
+	private mouseDownListener = (evt: MouseEvent) => this.handleMouseDown(evt);
+	private mouseMoveListener = (evt: MouseEvent) => this.handleMouseMove(evt);
+	private mouseUpListener = (evt: MouseEvent) => this.handleMouseUp(evt);
+	private touchStartListener = (evt: TouchEvent) => this.handleTouchStart(evt);
+	private touchMoveListener = (evt: TouchEvent) => this.handleTouchMove(evt);
+	private touchEndListener = (evt: TouchEvent) => this.handleTouchEnd(evt);
+	private touchCancelListener = (evt: TouchEvent) => this.handleTouchCancel(evt);
+
 	componentDidMount() {
-		if (!this.innerListeners) {
-			this.innerListeners = {
-				mouseDown: evt => this.handleMouseDown(evt),
-				mouseMove: evt => this.handleMouseMove(evt),
-				mouseUp: evt => this.handleMouseUp(evt),
-				touchStart: evt => this.handleTouchStart(evt),
-				touchMove: evt => this.handleTouchMove(evt),
-				touchEnd: evt => this.handleTouchEnd(evt),
-				touchCancel: evt => this.handleTouchCancel(evt),
-			};
-			this.innerRef.current!.addEventListener('mousedown', this.innerListeners.mouseDown);
-			window.addEventListener('mousemove', this.innerListeners.mouseMove);
-			window.addEventListener('mouseup', this.innerListeners.mouseUp);
-			this.innerRef.current!.addEventListener('touchstart', this.innerListeners.touchStart, { passive: false });
-			window.addEventListener('touchmove', this.innerListeners.touchMove, { passive: false });
-			window.addEventListener('touchend', this.innerListeners.touchEnd);
-			window.addEventListener('touchcancel', this.innerListeners.touchCancel);
-		}
-		this.dragData = undefined;
+		this.innerRef.current!.addEventListener('mousedown', this.mouseDownListener);
+		window.addEventListener('mousemove', this.mouseMoveListener);
+		window.addEventListener('mouseup', this.mouseUpListener);
+		this.innerRef.current!.addEventListener('touchstart', this.touchStartListener, { passive: false });
+		window.addEventListener('touchmove', this.touchMoveListener, { passive: false });
+		window.addEventListener('touchend', this.touchEndListener);
+		window.addEventListener('touchcancel', this.touchCancelListener);
 	}
 
 	componentWillUnmount() {
-		if (this.innerListeners) {
-			this.innerRef.current!.removeEventListener('mousedown', this.innerListeners.mouseDown);
-			window.removeEventListener('mousemove', this.innerListeners.mouseMove);
-			window.removeEventListener('mouseup', this.innerListeners.mouseUp);
-			this.innerRef.current!.removeEventListener('touchstart', this.innerListeners.touchStart);
-			window.removeEventListener('touchmove', this.innerListeners.touchMove);
-			window.removeEventListener('touchend', this.innerListeners.touchEnd);
-			window.removeEventListener('touchcancel', this.innerListeners.touchCancel);
-			this.innerListeners = undefined;
-		}
+		this.innerRef.current!.removeEventListener('mousedown', this.mouseDownListener);
+		window.removeEventListener('mousemove', this.mouseMoveListener);
+		window.removeEventListener('mouseup', this.mouseUpListener);
+		this.innerRef.current!.removeEventListener('touchstart', this.touchStartListener);
+		window.removeEventListener('touchmove', this.touchMoveListener);
+		window.removeEventListener('touchend', this.touchEndListener);
+		window.removeEventListener('touchcancel', this.touchCancelListener);
 	}
 
 	render() {

package/src/chessboard/colorsets.ts

@@ -23,6 +23,12 @@
 import { Colorset } from '../types';
 
 
+/**
+ * Default colorset.
+ */
+export const DEFAULT_COLORSET = 'original';
+
+
 /**
  * Available colorsets.
  */

package/src/chessboard/piecesets.ts

@@ -121,6 +121,12 @@ import skulls_bx from './sprites/skulls-bx.png';
 import skulls_wx from './sprites/skulls-wx.png';
 
 
+/**
+ * Default pieceset.
+ */
+export const DEFAULT_PIECESET = 'cburnett';
+
+
 /**
  * Available piecesets.
  */

package/src/icons/ChessPieceIcon.tsx

@@ -0,0 +1,99 @@
+/* -------------------------------------------------------------------------- *
+ *                                                                            *
+ *    This file is part of Kokopu-React, a JavaScript chess library.          *
+ *    Copyright (C) 2021-2023  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 * as React from 'react';
+
+import { IllegalArgument } from '../exception';
+import { sanitizeBoundedInteger } from '../sanitization';
+import { MIN_SQUARE_SIZE, MAX_SQUARE_SIZE, ChessPieceIconType, isChessPieceIconType } from '../types';
+import { piecesets, DEFAULT_PIECESET } from '../chessboard/piecesets';
+
+
+export interface ChessPieceIconProps {
+
+	/**
+	 * Width and height (in pixels) of each chess piece icon.
+	 */
+	size: number;
+
+	/**
+	 * Chess piece(s) to display.
+	 */
+	type: ChessPieceIconType | ChessPieceIconType[];
+
+	/**
+	 * Piece theme ID. Must be a property of `Chessboard.piecesets()`.
+	 */
+	pieceset: string;
+}
+
+
+const defaultProps: Partial<ChessPieceIconProps> = {
+	pieceset: DEFAULT_PIECESET,
+};
+
+
+/**
+ * SVG icon representing a colored chess piece, or a list of colored chess pieces.
+ */
+export function ChessPieceIcon({ size, type, pieceset }: ChessPieceIconProps) {
+
+	// Sanitize the inputs.
+	size = sanitizeBoundedInteger(size, MIN_SQUARE_SIZE, MAX_SQUARE_SIZE, () => new IllegalArgument('ChessPieceIcon', 'size'));
+	const types = sanitizeChessPieceIconType(type, () => new IllegalArgument('ChessPieceIcon', 'type'));
+	const piecesetData = piecesets[pieceset];
+	if (!piecesetData) {
+		throw new IllegalArgument('ChessPieceIcon', 'pieceset');
+	}
+
+	// Render the component.
+	const width = size * types.length;
+	const viewBox = `0 0 ${width} ${size}`;
+	return (
+		<svg className="kokopu-chessPieceIcon" viewBox={viewBox} width={width} height={size}>
+			{types.map((t, i) => <image key={i} x={i * size} y={0} width={size} height={size} href={piecesetData[t]} />)}
+		</svg>
+	);
+}
+
+ChessPieceIcon.defaultProps = defaultProps;
+
+
+/**
+ * Sanitization method for the small-screen limits parameter.
+ */
+function sanitizeChessPieceIconType(type: ChessPieceIconType | ChessPieceIconType[], exceptionBuilder: () => IllegalArgument): ChessPieceIconType[] {
+	if (Array.isArray(type)) {
+		return type.map(t => {
+			if (!isChessPieceIconType(t)) {
+				throw exceptionBuilder();
+			}
+			return t;
+		});
+	}
+	else if (isChessPieceIconType(type)) {
+		return [ type ];
+	}
+	else {
+		throw exceptionBuilder();
+	}
+}

package/src/index.ts

@@ -23,14 +23,16 @@
 export { i18n } from './i18n';
 export * as exception from './exception';
 
-export { Colorset, Pieceset, PieceSymbolMapping, AnnotationColor, AnnotationSymbol, SquareMarkerSet, TextMarkerSet, ArrowMarkerSet, isPieceSymbolMapping,
-	isAnnotationColor, isAnnotationSymbol, flattenSquareMarkers, flattenTextMarkers, flattenArrowMarkers, parseSquareMarkers, parseTextMarkers, parseArrowMarkers } from './types';
+export { ChessPieceIconType, Colorset, Pieceset, PieceSymbolMapping, AnnotationColor, AnnotationSymbol, SquareMarkerSet, TextMarkerSet, ArrowMarkerSet,
+	isChessPieceIconType, isPieceSymbolMapping, isAnnotationColor, isAnnotationSymbol, flattenSquareMarkers, flattenTextMarkers, flattenArrowMarkers,
+	parseSquareMarkers, parseTextMarkers, parseArrowMarkers } from './types';
 
 export { ErrorBox, ErrorBoxProps } from './errorbox/ErrorBox';
 
 export { SquareMarkerIcon, SquareMarkerIconProps } from './icons/SquareMarkerIcon';
 export { TextMarkerIcon, TextMarkerIconProps } from './icons/TextMarkerIcon';
 export { ArrowMarkerIcon, ArrowMarkerIconProps } from './icons/ArrowMarkerIcon';
+export { ChessPieceIcon, ChessPieceIconProps } from './icons/ChessPieceIcon';
 
 export { Chessboard, ChessboardProps, SmallScreenLimit } from './chessboard/Chessboard';
 

package/src/movetext/Movetext.tsx

@@ -40,7 +40,7 @@ import './Movetext.css';
 /**
  * Origin of a "move-selected" event in {@link Movetext}. See {@link MovetextProps.onMoveSelected} for more details.
  */
-export type MoveSelectEventOrigin = 'key-first' | 'key-previous' | 'key-next' | 'key-last' | 'click';
+export type MoveSelectEventOrigin = 'key-first' | 'key-previous' | 'key-next' | 'key-last' | 'key-exit' | 'click';
 
 
 export interface MovetextProps {
@@ -66,6 +66,7 @@ export interface MovetextProps {
 		flipped?: ChessboardProps['flipped'],
 		squareSize?: ChessboardProps['squareSize'],
 		coordinateVisible?: ChessboardProps['coordinateVisible'],
+		turnVisible?: ChessboardProps['turnVisible'],
 		colorset?: ChessboardProps['colorset'],
 		pieceset?: ChessboardProps['pieceset'],
 		smallScreenLimits?: ChessboardProps['smallScreenLimits'],
@@ -109,6 +110,7 @@ export interface MovetextProps {
 	 *                    - `'key-previous'`: the event has been triggered by the "go-to-previous-move" key (aka. the arrow left key),
 	 *                    - `'key-next'`: the event has been triggered by the "go-to-next-move" key (aka. the arrow right key),
 	 *                    - `'key-last'`: the event has been triggered by the "go-to-last-move" key (aka. the end key),
+	 *                    - `'key-exit'`: the event has been triggered by the "unselect-move" key (aka. the escape key),
 	 *                    - `'click'`: the event has been triggered by a mouse click on a move.
 	 */
 	onMoveSelected?: (nodeId: string | undefined, evtOrigin: MoveSelectEventOrigin) => void;