kokopu-react 2.1.0 → 3.0.1

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/doc_src/webpack_configuration.md

@@ -0,0 +1,27 @@
+Kokopu-React is not a "pure" JavaScript/TypeScript library, in that it is shipped with other type of files:
+- `*.css` files (stylesheets),
+- `*.png` files (images),
+- `*.woff` and `*.woff2` files (fonts).
+
+If you are using a bundler such as [Webpack](https://webpack.js.org/) to package an application that depends on Kokopu-React,
+it must be configured so that these files are handled properly. An example of Webpack loading rules suitable for Kokopu-React is provided below:
+
+```plain
+module.exports = {
+    // ...
+    module: {
+        rules: [
+            {
+                test: /\.css$/i,
+                use: [ 'style-loader', 'css-loader' ],
+                // ... or any other configuration that loads the matching files as global CSS.
+            },
+            {
+                test: /\.(png|woff|woff2)$/i,
+                type: 'asset/resource',
+                // ... or any other configuration that loads the matching files as resources.
+            },
+        ],
+    },
+};
+```

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "kokopu-react",
-	"version": "2.1.0",
+	"version": "3.0.1",
 	"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.22.2",
-		"@babel/preset-react": "^7.22.0",
-		"@emotion/react": "^11.11.0",
+		"@babel/preset-env": "^7.22.9",
+		"@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",
-		"babel-loader": "^9.1.2",
+		"@mui/material": "^5.14.0",
+		"@types/react": "^18.2.15",
+		"@types/react-dom": "^18.2.7",
+		"@typescript-eslint/eslint-plugin": "^6.0.0",
+		"@typescript-eslint/parser": "^6.0.0",
+		"babel-loader": "^9.1.3",
 		"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.44.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",
+		"ts-loader": "^9.4.4",
+		"typescript": "^5.1.6",
 		"unit.js": "^2.1.1",
-		"webpack": "^5.84.1",
-		"webpack-cli": "^5.1.1"
+		"webpack": "^5.88.1",
+		"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
@@ -59,13 +60,11 @@ const demoPages = [
 
 // Generate the Markdown file corresponding to each demo page.
 demoPages.forEach(demoPage => {
-	const filename = `${tmpDir}/${demoPage.id}.md`;
-	fs.writeFileSync(path.resolve(__dirname, filename),
+	fs.writeFileSync(path.resolve(__dirname, `${tmpDir}/${demoPage.id}.md`),
 		'```js\n' +
 		`<Page${demoPage.id} />\n` +
 		'```\n'
 	);
-	demoPage.filename = filename;
 });
 
 // Generate the changelog page.
@@ -151,7 +150,7 @@ module.exports = {
 			name: componentSectionTitle,
 			content: componentsTocFilename,
 			components: components.map(componentName => `${srcDir}/${componentName}.tsx`),
-			sectionDepth: 1
+			sectionDepth: 1,
 		},
 		{
 			name: demoSectionTitle,
@@ -160,11 +159,15 @@ module.exports = {
 			sections: demoPages.map(demoPage => {
 				return {
 					name: demoPage.title,
-					content: demoPage.filename,
-					exampleMode: 'hide'
+					content: `${tmpDir}/${demoPage.id}.md`,
+					exampleMode: 'hide',
 				};
 			}),
 		},
+		{
+			name: 'Webpack configuration',
+			content: `${docSrcDir}/webpack_configuration.md`,
+		},
 		{
 			name: 'Kokopu core library documentation',
 			href: 'https://kokopu.yo35.org/',
@@ -177,6 +180,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.
  */