kokopu-react 3.3.0 → 3.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "kokopu-react",
-    "version": "3.3.0",
+    "version": "3.3.2",
     "description": "A React-based library to create and display chessboard and chess-related components.",
     "keywords": [
         "chess",
@@ -37,55 +37,57 @@
     ],
     "peerDependencies": {
         "kokopu": "^4.9.1",
-        "react": "17.x.x || 18.x.x"
+        "react": "17.x.x || 18.x.x || 19.x.x"
     },
     "dependencies": {
         "htmlparser2": "^9.1.0"
     },
     "devDependencies": {
-        "@babel/preset-env": "^7.24.4",
-        "@babel/preset-react": "^7.24.1",
-        "@emotion/react": "^11.11.4",
-        "@emotion/styled": "^11.11.5",
-        "@mui/material": "^5.15.15",
-        "@types/react": "^18.2.79",
-        "@types/react-dom": "^18.2.25",
-        "@typescript-eslint/eslint-plugin": "^7.7.0",
-        "@typescript-eslint/parser": "^7.7.0",
-        "babel-loader": "^9.1.3",
+        "@babel/preset-env": "^7.26.0",
+        "@babel/preset-react": "^7.26.3",
+        "@emotion/react": "^11.14.0",
+        "@emotion/styled": "^11.14.0",
+        "@eslint/js": "^9.17.0",
+        "@mui/material": "^6.3.0",
+        "@stylistic/eslint-plugin": "^2.12.1",
+        "@types/react": "^19.0.2",
+        "@types/react-dom": "^19.0.2",
+        "babel-loader": "^9.2.1",
         "copy-webpack-plugin": "^12.0.2",
         "copyfiles": "^2.4.1",
         "coverage-istanbul-loader": "^3.0.5",
-        "css-loader": "^7.1.1",
-        "eslint": "^8.57.0",
-        "eslint-plugin-react": "~7.33.2",
-        "html-webpack-plugin": "^5.6.0",
+        "css-loader": "^7.1.2",
+        "eslint": "^9.17.0",
+        "eslint-plugin-react": "^7.37.3",
+        "globals": "^15.14.0",
+        "html-webpack-plugin": "^5.6.3",
         "img-diff-js": "^0.5.4",
-        "kokopu": "^4.10.0",
-        "mocha": "^10.4.0",
+        "kokopu": "^4.11.3",
+        "mocha": "^11.0.1",
         "null-loader": "^4.0.1",
-        "nyc": "^15.1.0",
-        "react": "^18.2.0",
+        "nyc": "^17.1.0",
+        "react": "^19.0.0",
         "react-docgen-typescript": "^2.2.2",
-        "react-dom": "^18.2.0",
-        "react-styleguidist": "^13.1.2",
-        "rimraf": "^5.0.5",
-        "selenium-webdriver": "^4.19.0",
-        "ssh2-sftp-client": "^10.0.3",
+        "react-dom": "^19.0.0",
+        "react-styleguidist": "^13.1.3",
+        "rimraf": "^6.0.1",
+        "selenium-webdriver": "^4.27.0",
+        "ssh2-sftp-client": "^11.0.0",
         "style-loader": "^4.0.0",
         "ts-loader": "^9.5.1",
-        "typescript": "^5.4.5",
+        "typescript": "^5.7.2",
+        "typescript-eslint": "^8.19.0",
         "unit.js": "^2.1.1",
-        "webpack": "^5.91.0",
-        "webpack-cli": "^5.1.4"
+        "webpack": "^5.97.1",
+        "webpack-cli": "^6.0.1"
     },
     "scripts": {
         "lint": "eslint doc_src src test",
         "preunit": "npm run build:lib && webpack --config scripts/test-headless.webpack.config.js && webpack --config scripts/test-graphic.webpack.config.js && rimraf build/graphic_output",
         "unit": "nyc mocha --enable-source-maps --bail --sort",
         "test": "npm run lint && npm run unit",
-        "test_env:start": "docker-compose -p kokopu-react-test-env -f scripts/docker-compose.yml up -d",
-        "test_env:stop": "docker-compose -p kokopu-react-test-env -f scripts/docker-compose.yml down",
+        "test_env:start": "docker compose -p kokopu-react-test-env -f scripts/docker-compose.yml up -d",
+        "test_env:stop": "docker compose -p kokopu-react-test-env -f scripts/docker-compose.yml down",
         "build": "npm run build:lib && npm run build:doc",
         "build:doc": "rimraf dist/docs && styleguidist build --config scripts/doc.styleguide.config.js && copyfiles -u 2 'doc_src/theming/*.png' dist/docs",
         "build:lib": "rimraf dist/lib && tsc --outDir dist/lib && copyfiles -u 1 'src/**/*.{css,png,woff,woff2}' dist/lib",

package/scripts/doc.styleguide.config.js

@@ -3,7 +3,7 @@
  *                                                                            *
  *    Kokopu-React - A React-based library of chess-related components.       *
  *    <https://www.npmjs.com/package/kokopu-react>                            *
- *    Copyright (C) 2021-2024  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *    Copyright (C) 2021-2025  Yoann Le Montagner <yo35 -at- melix.net>       *
  *                                                                            *
  *    Kokopu-React is free software: you can redistribute it and/or           *
  *    modify it under the terms of the GNU Lesser General Public License      *
@@ -64,6 +64,7 @@ const demoPages = [
     { id: 'NavigationBoardUncontrolledVsControlled', title: 'NavigationBoard - Uncontrolled vs. controlled' },
     { id: 'MovetextBase', title: 'Movetext - Basic features' },
     { id: 'MovetextInteraction', title: 'Movetext - Interactions' },
+    { id: 'SynchroNavigationBoardMovetext', title: 'Synchronize NavigationBoard and Movetext components' },
 ];
 
 
@@ -137,7 +138,7 @@ module.exports = {
                     type: 'asset/resource',
                 },
                 {
-                    test: /\.pgn$/i,
+                    test: /\.(pgn|txt)$/i,
                     type: 'asset/source',
                 },
             ],

package/scripts/docker-compose.yml

@@ -1,8 +1,6 @@
-version: "3.7"
-
 services:
   web-client:
-    image: selenium/standalone-firefox:4.19.1-20240402 # https://github.com/SeleniumHQ/docker-selenium to get the latest version
+    image: selenium/standalone-firefox:4.25.0-20241024 # https://github.com/SeleniumHQ/docker-selenium to get the latest version
     shm_size: '2gb'
     ports:
       - 4444:4444 # http://localhost:4444/ (driver)

package/scripts/test-graphic.webpack.config.js

@@ -3,7 +3,7 @@
  *                                                                            *
  *    Kokopu-React - A React-based library of chess-related components.       *
  *    <https://www.npmjs.com/package/kokopu-react>                            *
- *    Copyright (C) 2021-2024  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *    Copyright (C) 2021-2025  Yoann Le Montagner <yo35 -at- melix.net>       *
  *                                                                            *
  *    Kokopu-React is free software: you can redistribute it and/or           *
  *    modify it under the terms of the GNU Lesser General Public License      *

package/scripts/test-headless.webpack.config.js

@@ -3,7 +3,7 @@
  *                                                                            *
  *    Kokopu-React - A React-based library of chess-related components.       *
  *    <https://www.npmjs.com/package/kokopu-react>                            *
- *    Copyright (C) 2021-2024  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *    Copyright (C) 2021-2025  Yoann Le Montagner <yo35 -at- melix.net>       *
  *                                                                            *
  *    Kokopu-React is free software: you can redistribute it and/or           *
  *    modify it under the terms of the GNU Lesser General Public License      *

package/src/chessboard/BoardProperties.ts

@@ -3,7 +3,7 @@
  *                                                                            *
  *    Kokopu-React - A React-based library of chess-related components.       *
  *    <https://www.npmjs.com/package/kokopu-react>                            *
- *    Copyright (C) 2021-2024  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *    Copyright (C) 2021-2025  Yoann Le Montagner <yo35 -at- melix.net>       *
  *                                                                            *
  *    Kokopu-React is free software: you can redistribute it and/or           *
  *    modify it under the terms of the GNU Lesser General Public License      *
@@ -31,10 +31,10 @@ import { DEFAULT_PIECESET } from './piecesets';
  * Define a limit applicable to the parameters of a {@link Chessboard} on small-screen devices.
  */
 export interface SmallScreenLimit {
-    width: number;
-    squareSize?: number;
-    coordinateVisible?: boolean;
-    turnVisible?: boolean;
+    width: number,
+    squareSize?: number,
+    coordinateVisible?: boolean,
+    turnVisible?: boolean,
 }
 
 
@@ -46,27 +46,27 @@ export interface StaticBoardGraphicProps {
     /**
      * Size of the squares (in pixels). Must be an integer between `Chessboard.minSquareSize()` and `Chessboard.maxSquareSize()`.
      */
-    squareSize: number;
+    squareSize: number,
 
     /**
      * Whether the row and column coordinates are visible or not.
      */
-    coordinateVisible: boolean;
+    coordinateVisible: boolean,
 
     /**
      * Whether the turn flag is visible or not.
      */
-    turnVisible: boolean;
+    turnVisible: boolean,
 
     /**
      * Color theme ID. Must be a property of `Chessboard.colorsets()`.
      */
-    colorset: string;
+    colorset: string,
 
     /**
      * Piece theme ID. Must be a property of `Chessboard.piecesets()`.
      */
-    pieceset: string;
+    pieceset: string,
 
     /**
      * Limits applicable on small-screen devices. For instance, if set to
@@ -81,7 +81,7 @@ export interface StaticBoardGraphicProps {
      * will be limited to 24 and the row and column coordinates will always be hidden (whatever the value of the
      * `coordinateVisible` attribute).
      */
-    smallScreenLimits?: SmallScreenLimit[];
+    smallScreenLimits?: SmallScreenLimit[],
 }
 
 
@@ -93,17 +93,17 @@ export interface DynamicBoardGraphicProps extends StaticBoardGraphicProps {
     /**
      * Whether moves are highlighted with an arrow or not.
      */
-    moveArrowVisible: boolean;
+    moveArrowVisible: boolean,
 
     /**
      * Color of the move arrow.
      */
-    moveArrowColor: AnnotationColor;
+    moveArrowColor: AnnotationColor,
 
     /**
      * Whether moves are animated or not.
      */
-    animated: boolean;
+    animated: boolean,
 }
 
 

package/src/chessboard/Chessboard.css

@@ -3,7 +3,7 @@
  *                                                                            *
  *    Kokopu-React - A React-based library of chess-related components.       *
  *    <https://www.npmjs.com/package/kokopu-react>                            *
- *    Copyright (C) 2021-2024  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *    Copyright (C) 2021-2025  Yoann Le Montagner <yo35 -at- melix.net>       *
  *                                                                            *
  *    Kokopu-React is free software: you can redistribute it and/or           *
  *    modify it under the terms of the GNU Lesser General Public License      *

package/src/chessboard/Chessboard.tsx

@@ -3,7 +3,7 @@
  *                                                                            *
  *    Kokopu-React - A React-based library of chess-related components.       *
  *    <https://www.npmjs.com/package/kokopu-react>                            *
- *    Copyright (C) 2021-2024  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *    Copyright (C) 2021-2025  Yoann Le Montagner <yo35 -at- melix.net>       *
  *                                                                            *
  *    Kokopu-React is free software: you can redistribute it and/or           *
  *    modify it under the terms of the GNU Lesser General Public License      *
@@ -49,36 +49,36 @@ export interface ChessboardProps extends DynamicBoardGraphicProps {
      * [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: Position | string;
+    position: Position | string,
 
     /**
      * 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'`). Use `'--'` for a null-move.
      * In all cases, the move must be a legal move in position defined in attribute `position`.
      */
-    move?: MoveDescriptor | string;
+    move?: MoveDescriptor | string,
 
     /**
      * Square markers, defined as a {@link SquareMarkerSet} (e.g. `{ e4: 'g', d5: 'r' }`) or as a comma-separated CSL string (e.g. `'Rd5,Ge4'`).
      */
-    squareMarkers?: SquareMarkerSet | string;
+    squareMarkers?: SquareMarkerSet | string,
 
     /**
      * Text markers, defined as a {@link TextMarkerSet} (e.g. `{ e4: { symbol: 'A', color: 'g' }, d5: { symbol: 'z', color: 'r' }}`)
      * or as a comma-separated CTL string (e.g. `'Rzd5,GAe4'`).
      */
-    textMarkers?: TextMarkerSet | string;
+    textMarkers?: TextMarkerSet | string,
 
     /**
      * Arrow markers, defined as a {@link ArrowMarkerSet} (e.g. `{ e2e4: 'g', g8f6: 'r', g8h6: 'y' }`)
      * or as a comma-separated CAL string (e.g. `'Ge2e4,Rg8f6,Yg8h6'`).
      */
-    arrowMarkers?: ArrowMarkerSet | string;
+    arrowMarkers?: ArrowMarkerSet | string,
 
     /**
      * Whether the board is flipped (i.e. seen from Black's point of view) or not.
      */
-    flipped: boolean;
+    flipped: boolean,
 
     /**
      * Type of action allowed with the mouse on the chessboard. If undefined, then the user cannot interact with the component.
@@ -93,39 +93,39 @@ export interface ChessboardProps extends DynamicBoardGraphicProps {
     /**
      * Color of the edited arrow. Mandatory if `interactionMode === 'editArrows'`, ignored otherwise.
      */
-    editedArrowColor?: AnnotationColor;
+    editedArrowColor?: AnnotationColor,
 
     /**
      * Callback invoked when a piece is moved through drag&drop (only if `interactionMode` is set to `'movePieces'`).
      */
-    onPieceMoved?: (from: Square, to: Square) => void;
+    onPieceMoved?: (from: Square, to: Square) => void,
 
     /**
      * Callback invoked when the user clicks on a square (only if `interactionMode` is set to `'clickSquares'`).
      */
-    onSquareClicked?: (square: Square) => void;
+    onSquareClicked?: (square: Square) => void,
 
     /**
      * Callback invoked when an arrow is dragged (only if `interactionMode` is set to `'editArrows'`).
      */
-    onArrowEdited?: (from: Square, to: Square) => void;
+    onArrowEdited?: (from: Square, to: Square) => void,
 
     /**
      * Callback invoked when a move is played (only if `interactionMode` is set to `'playMoves'`).
      */
-    onMovePlayed?: (move: string) => void;
+    onMovePlayed?: (move: string) => void,
 
     /**
      * Optional component, to be rendered above the chessboard, and customized with the same square-size / coordinate-visible / turn-visible
      * parameter values as actually used for the chessboard (which may be different from what is defined in props because of small-screen limits).
      */
-    topComponent?: (attr: Pick<StaticBoardGraphicProps, 'squareSize' | 'coordinateVisible' | 'turnVisible'>) => JSX.Element;
+    topComponent?: (attr: Pick<StaticBoardGraphicProps, 'squareSize' | 'coordinateVisible' | 'turnVisible'>) => React.JSX.Element,
 
     /**
      * Optional component, to be rendered below the chessboard, and customized with the same square-size / coordinate-visible / turn-visible
      * parameter values as actually used for the chessboard (which may be different from what is defined in props because of small-screen limits).
      */
-    bottomComponent?: (attr: Pick<StaticBoardGraphicProps, 'squareSize' | 'coordinateVisible' | 'turnVisible'>) => JSX.Element;
+    bottomComponent?: (attr: Pick<StaticBoardGraphicProps, 'squareSize' | 'coordinateVisible' | 'turnVisible'>) => React.JSX.Element,
 }
 
 
@@ -136,12 +136,12 @@ type AuxilliaryComponentSizeFunction = (attr: Pick<StaticBoardGraphicProps, 'squ
  * Attributes for method `Chessboard.size()`.
  */
 export interface ChessboardSizeAttr {
-    squareSize?: ChessboardProps['squareSize'];
-    coordinateVisible?: ChessboardProps['coordinateVisible'];
-    turnVisible?: ChessboardProps['turnVisible'];
-    smallScreenLimits?: ChessboardProps['smallScreenLimits'];
-    topComponent?: AuxilliaryComponentSizeFunction;
-    bottomComponent?: AuxilliaryComponentSizeFunction;
+    squareSize?: ChessboardProps['squareSize'],
+    coordinateVisible?: ChessboardProps['coordinateVisible'],
+    turnVisible?: ChessboardProps['turnVisible'],
+    smallScreenLimits?: ChessboardProps['smallScreenLimits'],
+    topComponent?: AuxilliaryComponentSizeFunction,
+    bottomComponent?: AuxilliaryComponentSizeFunction,
 }
 
 
@@ -149,16 +149,16 @@ export interface ChessboardSizeAttr {
  * Attributes for method `Chessboard.adaptSquareSize()`.
  */
 export interface ChessboardAdaptSquareSizeAttr {
-    coordinateVisible?: ChessboardProps['coordinateVisible'];
-    turnVisible?: ChessboardProps['turnVisible'];
-    smallScreenLimits?: ChessboardProps['smallScreenLimits'];
-    topComponent?: AuxilliaryComponentSizeFunction;
-    bottomComponent?: AuxilliaryComponentSizeFunction;
+    coordinateVisible?: ChessboardProps['coordinateVisible'],
+    turnVisible?: ChessboardProps['turnVisible'],
+    smallScreenLimits?: ChessboardProps['smallScreenLimits'],
+    topComponent?: AuxilliaryComponentSizeFunction,
+    bottomComponent?: AuxilliaryComponentSizeFunction,
 }
 
 
 interface ChessboardState {
-    windowWidth: number;
+    windowWidth: number,
 }
 
 
@@ -256,18 +256,21 @@ export class Chessboard extends React.Component<ChessboardProps, ChessboardState
         // (mandatory to ensure that the move animation works properly and that the internal state of the component remains consistent).
         const key = `${position.variant()}|${position.fen()}|${move ? position.notation(move) : ''}`;
 
-        return (<>
-            {this.props.topComponent ? this.props.topComponent(auxilliaryComponentAttr) : undefined}
-            <ChessboardImpl key={key}
-                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}
-            />
-            {this.props.bottomComponent ? this.props.bottomComponent(auxilliaryComponentAttr) : undefined}
-        </>);
+        return (
+            <>
+                {this.props.topComponent ? this.props.topComponent(auxilliaryComponentAttr) : undefined}
+                <ChessboardImpl
+                    key={key}
+                    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}
+                />
+                {this.props.bottomComponent ? this.props.bottomComponent(auxilliaryComponentAttr) : undefined}
+            </>
+        );
     }
 
     private getInteractionModeAndValidateEditedArrowColor() {
@@ -294,7 +297,8 @@ export class Chessboard extends React.Component<ChessboardProps, ChessboardState
             () => new IllegalArgument('Chessboard.size()', 'attr'));
 
         // Sanitize the arguments.
-        let actualSquareSize = squareSize === undefined ? DEFAULT_SQUARE_SIZE :
+        let actualSquareSize = squareSize === undefined ?
+            DEFAULT_SQUARE_SIZE :
             sanitizeBoundedInteger(squareSize, MIN_SQUARE_SIZE, MAX_SQUARE_SIZE, () => new IllegalArgument('Chessboard.size()', 'squareSize'));
         let actualCoordinateVisible = coordinateVisible === undefined ? true : sanitizeBoolean(coordinateVisible);
         let actualTurnVisible = turnVisible === undefined ? true : sanitizeBoolean(turnVisible);
@@ -530,7 +534,7 @@ function sanitizeSmallScreenLimits(smallScreenLimits: SmallScreenLimit[] | undef
                 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)
+                turnVisible: sanitizeOptional(smallScreenLimit.turnVisible, sanitizeBoolean),
             };
         });
     }

package/src/chessboard/ChessboardImpl.tsx

@@ -3,7 +3,7 @@
  *                                                                            *
  *    Kokopu-React - A React-based library of chess-related components.       *
  *    <https://www.npmjs.com/package/kokopu-react>                            *
- *    Copyright (C) 2021-2024  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *    Copyright (C) 2021-2025  Yoann Le Montagner <yo35 -at- melix.net>       *
  *                                                                            *
  *    Kokopu-React is free software: you can redistribute it and/or           *
  *    modify it under the terms of the GNU Lesser General Public License      *
@@ -52,44 +52,44 @@ const FILE_LABELS = 'abcdefgh';
 
 interface ChessboardImplProps {
 
-    position: Position;
-    move?: MoveDescriptor;
+    position: Position,
+    move?: MoveDescriptor,
 
-    squareMarkers?: SquareMarkerSet;
-    textMarkers?: TextMarkerSet;
-    arrowMarkers?: ArrowMarkerSet;
+    squareMarkers?: SquareMarkerSet,
+    textMarkers?: TextMarkerSet,
+    arrowMarkers?: ArrowMarkerSet,
 
-    flipped: boolean;
-    squareSize: number;
-    coordinateVisible: boolean;
-    turnVisible: boolean;
-    moveArrowVisible: boolean;
-    moveArrowColor: AnnotationColor;
-    animated: boolean;
-    colorset: Colorset;
-    pieceset: Pieceset;
+    flipped: boolean,
+    squareSize: number,
+    coordinateVisible: boolean,
+    turnVisible: boolean,
+    moveArrowVisible: boolean,
+    moveArrowColor: AnnotationColor,
+    animated: boolean,
+    colorset: Colorset,
+    pieceset: Pieceset,
 
     interactionMode?: 'movePieces' | 'clickSquares' | 'editArrows' | 'playMoves',
-    editedArrowColor?: AnnotationColor; // mandatory if `interactionMode === 'editArrows'`
+    editedArrowColor?: AnnotationColor, // mandatory if `interactionMode === 'editArrows'`
 
-    onPieceMoved?: (from: Square, to: Square) => void;
-    onSquareClicked?: (square: Square) => void;
-    onArrowEdited?: (from: Square, to: Square) => void;
-    onMovePlayed?: (move: string) => void;
+    onPieceMoved?: (from: Square, to: Square) => void,
+    onSquareClicked?: (square: Square) => void,
+    onArrowEdited?: (from: Square, to: Square) => void,
+    onMovePlayed?: (move: string) => void,
 }
 
 
 interface ChessboardImplState {
-    inhibitedSquare?: Square;
-    draggedSquare?: Square;
-    hoveredSquare?: Square;
-    dragPosition?: { x: number, y: number }; // mandatory if `dragged` is defined
-    cursorOffset?: { x: number, y: number }; // mandatory if `dragged` is defined
+    inhibitedSquare?: Square,
+    draggedSquare?: Square,
+    hoveredSquare?: Square,
+    dragPosition?: { x: number, y: number }, // mandatory if `dragged` is defined
+    cursorOffset?: { x: number, y: number }, // mandatory if `dragged` is defined
     promotionDrawer?: {
         origin: Square,
         buttons: Piece[],
         builder: (promotion: Piece) => string,
-    };
+    },
 }
 
 
@@ -309,12 +309,20 @@ export class ChessboardImpl extends React.Component<ChessboardImplProps, Chessbo
         });
         return (
             <>
-                <rect className="kokopu-handle" x={0} y={0} width={this.props.squareSize * 8} height={this.props.squareSize * 8}
-                    onClick={() => this.handleDrawerCancelButtonClicked()} />
-                <rect x={x} y={y0} width={this.props.squareSize} height={this.props.squareSize * this.state.promotionDrawer.buttons.length}
-                    fill={this.props.colorset.b} />
-                <rect x={x} y={y0} width={this.props.squareSize} height={this.props.squareSize * this.state.promotionDrawer.buttons.length}
-                    className="kokopu-drawerMask" fill={this.props.colorset.w} />
+                <rect
+                    className="kokopu-handle"
+                    x={0} y={0} width={this.props.squareSize * 8} height={this.props.squareSize * 8}
+                    onClick={() => this.handleDrawerCancelButtonClicked()}
+                />
+                <rect
+                    x={x} y={y0} width={this.props.squareSize} height={this.props.squareSize * this.state.promotionDrawer.buttons.length}
+                    fill={this.props.colorset.b}
+                />
+                <rect
+                    className="kokopu-drawerMask"
+                    x={x} y={y0} width={this.props.squareSize} height={this.props.squareSize * this.state.promotionDrawer.buttons.length}
+                    fill={this.props.colorset.w}
+                />
                 {buttons}
             </>
         );
@@ -329,7 +337,9 @@ export class ChessboardImpl extends React.Component<ChessboardImplProps, Chessbo
         if (dragEnabledForMovePieces || dragEnabledForEditArrows || dragEnabledForPlayMoves) {
             return (
                 <Draggable
-                    key={'handle-' + sq} x={x} y={y} width={this.props.squareSize} height={this.props.squareSize} isArrowHandle={dragEnabledForEditArrows}
+                    key={'handle-' + sq}
+                    x={x} y={y} width={this.props.squareSize} height={this.props.squareSize}
+                    isArrowHandle={dragEnabledForEditArrows}
                     onDragStart={(x0, y0) => this.handleDragStart(sq, x0, y0)}
                     onDrag={(dx, dy) => this.handleDrag(sq, dx, dy)}
                     onDragStop={(dx, dy) => this.handleDragStop(sq, dx, dy)}
@@ -340,7 +350,8 @@ export class ChessboardImpl extends React.Component<ChessboardImplProps, Chessbo
         else if (this.props.interactionMode === 'clickSquares') {
             return (
                 <rect
-                    key={'handle-' + sq} className="kokopu-handle kokopu-clickable" x={x} y={y} width={this.props.squareSize} height={this.props.squareSize}
+                    key={'handle-' + sq} className="kokopu-handle kokopu-clickable"
+                    x={x} y={y} width={this.props.squareSize} height={this.props.squareSize}
                     onClick={() => this.handleSquareClicked(sq)}
                 />
             );
@@ -357,7 +368,9 @@ export class ChessboardImpl extends React.Component<ChessboardImplProps, Chessbo
         return Object.entries(this.props.squareMarkers).map(([ sq, color ]) => {
             const { x, y } = this.getSquareCoordinates(sq as Square);
             return (
-                <rect key={'sqm-' + sq} className="kokopu-annotation" x={x} y={y} width={this.props.squareSize} height={this.props.squareSize}
+                <rect
+                    key={'sqm-' + sq} className="kokopu-annotation"
+                    x={x} y={y} width={this.props.squareSize} height={this.props.squareSize}
                     fill={this.getColorForAnnotation(color)}
                 />
             );
@@ -401,8 +414,10 @@ export class ChessboardImpl extends React.Component<ChessboardImplProps, Chessbo
             yTo += Math.sign(yFrom - yTo) * ARROW_TIP_OFFSET_FACTOR * this.props.squareSize;
             return (
                 <line
-                    key={'arm-' + vect} className="kokopu-annotation kokopu-arrow" x1={xFrom} y1={yFrom} x2={xTo} y2={yTo} strokeWidth={strokeWidth}
-                    stroke={this.getColorForAnnotation(color)} markerEnd={`url(#${this.getArrowTipId(color)})`}
+                    key={'arm-' + vect} className="kokopu-annotation kokopu-arrow"
+                    x1={xFrom} y1={yFrom} x2={xTo} y2={yTo}
+                    strokeWidth={strokeWidth} stroke={this.getColorForAnnotation(color)}
+                    markerEnd={`url(#${this.getArrowTipId(color)})`}
                 />
             );
         });
@@ -425,8 +440,10 @@ export class ChessboardImpl extends React.Component<ChessboardImplProps, Chessbo
         const y = yTo * motionCursor + yFrom * (1 - motionCursor);
         return (
             <line
-                className="kokopu-annotation kokopu-arrow" x1={xFrom} y1={yFrom} x2={x} y2={y} strokeWidth={strokeWidth}
-                stroke={this.getColorForAnnotation(this.props.moveArrowColor)} markerEnd={`url(#${this.getArrowTipId(this.props.moveArrowColor)})`}
+                className="kokopu-annotation kokopu-arrow"
+                x1={xFrom} y1={yFrom} x2={x} y2={y}
+                strokeWidth={strokeWidth} stroke={this.getColorForAnnotation(this.props.moveArrowColor)}
+                markerEnd={`url(#${this.getArrowTipId(this.props.moveArrowColor)})`}
             />
         );
     }
@@ -478,7 +495,7 @@ export class ChessboardImpl extends React.Component<ChessboardImplProps, Chessbo
     }
 
     private handleDragStop(sq: Square, dx: number, dy: number) {
-        const { x, y } = this.getSquareCoordinates( sq);
+        const { x, y } = this.getSquareCoordinates(sq);
         const targetSq = this.getSquareAt(x + dx + this.state.cursorOffset!.x, y + dy + this.state.cursorOffset!.y);
         this.setState({
             inhibitedSquare: undefined,