kokopu-react 3.2.0 → 3.3.1

package/src/chessboard/BoardProperties.ts

@@ -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.tsx

@@ -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,44 +93,72 @@ 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'>) => 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'>) => JSX.Element,
+}
+
+
+type AuxilliaryComponentSizeFunction = (attr: Pick<StaticBoardGraphicProps, 'squareSize' | 'coordinateVisible' | 'turnVisible'>) => { width: number, height: number };
+
+
+/**
+ * Attributes for method `Chessboard.size()`.
+ */
+export interface ChessboardSizeAttr {
+    squareSize?: ChessboardProps['squareSize'],
+    coordinateVisible?: ChessboardProps['coordinateVisible'],
+    turnVisible?: ChessboardProps['turnVisible'],
+    smallScreenLimits?: ChessboardProps['smallScreenLimits'],
+    topComponent?: AuxilliaryComponentSizeFunction,
+    bottomComponent?: AuxilliaryComponentSizeFunction,
+}
+
+
+/**
+ * Attributes for method `Chessboard.adaptSquareSize()`.
+ */
+export interface ChessboardAdaptSquareSizeAttr {
+    coordinateVisible?: ChessboardProps['coordinateVisible'],
+    turnVisible?: ChessboardProps['turnVisible'],
+    smallScreenLimits?: ChessboardProps['smallScreenLimits'],
+    topComponent?: AuxilliaryComponentSizeFunction,
+    bottomComponent?: AuxilliaryComponentSizeFunction,
 }
 
 
 interface ChessboardState {
-    windowWidth: number;
+    windowWidth: number,
 }
 
 
@@ -228,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() {
@@ -261,50 +292,54 @@ export class Chessboard extends React.Component<ChessboardProps, ChessboardState
     /**
      * Return the size of the chessboard, assuming it is built with the given attributes.
      */
-    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'));
+    static size(attr?: ChessboardSizeAttr): { width: number, height: number } {
+        const { squareSize, coordinateVisible, turnVisible, smallScreenLimits, topComponent, bottomComponent } = sanitizePartialObject(attr,
+            () => new IllegalArgument('Chessboard.size()', 'attr'));
 
         // Sanitize the arguments.
-        squareSize = 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'));
-        coordinateVisible = coordinateVisible === undefined ? true : sanitizeBoolean(coordinateVisible);
-        turnVisible = turnVisible === undefined ? true : sanitizeBoolean(turnVisible);
-        smallScreenLimits = sanitizeSmallScreenLimits(smallScreenLimits, () => new IllegalArgument('Chessboard.size()', 'smallScreenLimits'));
+        let actualCoordinateVisible = coordinateVisible === undefined ? true : sanitizeBoolean(coordinateVisible);
+        let actualTurnVisible = turnVisible === undefined ? true : sanitizeBoolean(turnVisible);
+        const actualLimits = sanitizeSmallScreenLimits(smallScreenLimits, () => new IllegalArgument('Chessboard.size()', 'smallScreenLimits'));
 
         // Enforce small-screen limits, if any.
         if (typeof window !== 'undefined') {
-            squareSize = computeSquareSizeForSmallScreens(squareSize, smallScreenLimits, window.innerWidth);
-            coordinateVisible = computeCoordinateVisibleForSmallScreens(coordinateVisible, smallScreenLimits, window.innerWidth);
-            turnVisible = computeTurnVisibleForSmallScreens(turnVisible, smallScreenLimits, window.innerWidth);
+            actualSquareSize = computeSquareSizeForSmallScreens(actualSquareSize, actualLimits, window.innerWidth);
+            actualCoordinateVisible = computeCoordinateVisibleForSmallScreens(actualCoordinateVisible, actualLimits, window.innerWidth);
+            actualTurnVisible = computeTurnVisibleForSmallScreens(actualTurnVisible, actualLimits, window.innerWidth);
         }
 
         // Compute the dimensions.
-        return chessboardSize(squareSize, coordinateVisible, turnVisible);
+        return chessBoardWithAuxilliaryComponentSize(actualSquareSize, actualCoordinateVisible, actualTurnVisible, topComponent, bottomComponent);
     }
 
     /**
      * 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, attr?: Partial<Pick<ChessboardProps, 'coordinateVisible' | 'turnVisible' | 'smallScreenLimits'>>): number {
-        let { coordinateVisible, turnVisible, smallScreenLimits } = sanitizePartialObject(attr, () => new IllegalArgument('Chessboard.adaptSquareSize()', 'attr'));
+    static adaptSquareSize(width: number, height: number, attr?: ChessboardAdaptSquareSizeAttr): number {
+        const { coordinateVisible, turnVisible, smallScreenLimits, topComponent, bottomComponent } = sanitizePartialObject(attr,
+            () => new IllegalArgument('Chessboard.adaptSquareSize()', 'attr'));
 
         // Sanitize the arguments.
         width = sanitizeInteger(width, () => new IllegalArgument('Chessboard.adaptSquareSize()', 'width'));
         height = sanitizeInteger(height, () => new IllegalArgument('Chessboard.adaptSquareSize()', 'height'));
-        coordinateVisible = coordinateVisible === undefined ? true : sanitizeBoolean(coordinateVisible);
-        turnVisible = turnVisible === undefined ? true : sanitizeBoolean(turnVisible);
-        smallScreenLimits = sanitizeSmallScreenLimits(smallScreenLimits, () => new IllegalArgument('Chessboard.adaptSquareSize()', 'smallScreenLimits'));
+        let actualCoordinateVisible = coordinateVisible === undefined ? true : sanitizeBoolean(coordinateVisible);
+        let actualTurnVisible = turnVisible === undefined ? true : sanitizeBoolean(turnVisible);
+        const actualLimits = 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, smallScreenLimits, window.innerWidth);
-            coordinateVisible = computeCoordinateVisibleForSmallScreens(coordinateVisible, smallScreenLimits, window.innerWidth);
-            turnVisible = computeTurnVisibleForSmallScreens(turnVisible, smallScreenLimits, window.innerWidth);
+            maxSquareSize = computeSquareSizeForSmallScreens(maxSquareSize, actualLimits, window.innerWidth);
+            actualCoordinateVisible = computeCoordinateVisibleForSmallScreens(actualCoordinateVisible, actualLimits, window.innerWidth);
+            actualTurnVisible = computeTurnVisibleForSmallScreens(actualTurnVisible, actualLimits, window.innerWidth);
         }
 
         function isAdapted(squareSize: number) {
-            const { width: actualWidth, height: actualHeight } = chessboardSize(squareSize, coordinateVisible!, turnVisible!);
+            const { width: actualWidth, height: actualHeight } = chessBoardWithAuxilliaryComponentSize(squareSize, actualCoordinateVisible, actualTurnVisible,
+                topComponent, bottomComponent);
             return actualWidth <= width && actualHeight <= height;
         }
 
@@ -369,6 +404,31 @@ export class Chessboard extends React.Component<ChessboardProps, ChessboardState
 }
 
 
+function chessBoardWithAuxilliaryComponentSize(squareSize: number, coordinateVisible: boolean, turnVisible: boolean,
+    topComponent: AuxilliaryComponentSizeFunction | undefined, bottomComponent: AuxilliaryComponentSizeFunction | undefined): { width: number, height: number } {
+
+    let { width, height } = chessboardSize(squareSize, coordinateVisible, turnVisible);
+    const auxilliaryComponentAttr = {
+        squareSize: squareSize,
+        coordinateVisible: coordinateVisible,
+        turnVisible: turnVisible,
+    };
+
+    if (topComponent) {
+        const { width: auxilliaryWidth, height: auxilliaryHeight } = topComponent(auxilliaryComponentAttr);
+        width = Math.max(width, auxilliaryWidth);
+        height += auxilliaryHeight;
+    }
+    if (bottomComponent) {
+        const { width: auxilliaryWidth, height: auxilliaryHeight } = bottomComponent(auxilliaryComponentAttr);
+        width = Math.max(width, auxilliaryWidth);
+        height += auxilliaryHeight;
+    }
+
+    return { width: width, height: height };
+}
+
+
 /**
  * Compute the actual square size taking into account the given small-screen limits and window width.
  */
@@ -474,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

@@ -52,44 +52,44 @@ const FILE_LABELS = 'abcdefgh';
 
 interface ChessboardImplProps {
 
-    position: Position;
-    move?: MoveDescriptor;
-
-    squareMarkers?: SquareMarkerSet;
-    textMarkers?: TextMarkerSet;
-    arrowMarkers?: ArrowMarkerSet;
-
-    flipped: boolean;
-    squareSize: number;
-    coordinateVisible: boolean;
-    turnVisible: boolean;
-    moveArrowVisible: boolean;
-    moveArrowColor: AnnotationColor;
-    animated: boolean;
-    colorset: Colorset;
-    pieceset: Pieceset;
+    position: Position,
+    move?: MoveDescriptor,
+
+    squareMarkers?: SquareMarkerSet,
+    textMarkers?: TextMarkerSet,
+    arrowMarkers?: ArrowMarkerSet,
+
+    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,

package/src/chessboard/Draggable.tsx

@@ -30,65 +30,65 @@ interface DraggableProps {
     /**
      * Initial X coordinate of the handle.
      */
-    x: number;
+    x: number,
 
     /**
      * Initial Y coordinate of the handle.
      */
-    y: number;
+    y: number,
 
     /**
      * Width of the handle.
      */
-    width: number;
+    width: number,
 
     /**
      * Height of the handle.
      */
-    height: number;
+    height: number,
 
     /**
      * `true` if the handle corresponds to a draggable arrow, `false` if it corresponds to a draggable piece.
      */
-    isArrowHandle: boolean;
+    isArrowHandle: boolean,
 
     /**
      * Callback invoked when the drag starts. `x0` and `y0` correspond to the coordinates (relative to the hande) at which the drag has been initiated.
      */
-    onDragStart?: (x0: number, y0: number) => void;
+    onDragStart?: (x0: number, y0: number) => void,
 
     /**
      * Callback invoked during the drag. `dx` and `dy` correspond to the coordinates of the drag translation vector.
      */
-    onDrag?: (dx: number, dy: number) => void;
+    onDrag?: (dx: number, dy: number) => void,
 
     /**
      * Callback invoked when the drag stops. `dx` and `dy` correspond to the coordinates of the drag translation vector.
      */
-    onDragStop?: (dx: number, dy: number) => void;
+    onDragStop?: (dx: number, dy: number) => void,
 
     /**
      * Callback invoked when the drag is canceled.
      */
-    onDragCanceled?: () => void;
+    onDragCanceled?: () => void,
 }
 
 
 interface DragData {
-    originX: number;
-    originY: number;
+    originX: number,
+    originY: number,
 }
 
 
 interface PageCoordinates {
-    pageX: number;
-    pageY: number;
+    pageX: number,
+    pageY: number,
 }
 
 
 interface ClientCoordinates {
-    clientX: number;
-    clientY: number;
+    clientX: number,
+    clientY: number,
 }
 
 

package/src/chessboard/Motion.tsx

@@ -32,17 +32,17 @@ interface MotionProps {
     /**
      * Duration of the animation. Must be > 0.
      */
-    duration: number;
+    duration: number,
 
     /**
      * Factory for the content being animated. The animation cursor is guaranteed to be valued between 0 and 1 inclusive.
      */
-    children: (cursor: number) => React.ReactNode;
+    children: (cursor: number) => React.ReactNode,
 }
 
 
 interface MotionState {
-    cursor: number;
+    cursor: number,
 }
 
 
@@ -63,7 +63,7 @@ export class Motion extends React.Component<MotionProps, MotionState> {
         this.cursorStop = 1;
 
         // WARNING: this hack exists only for testing purposes. DO NOT USE IT IN PRODUCTION.
-        const debugCursorStop = window[ /* eslint-disable @typescript-eslint/no-explicit-any */ DEBUG_KEY as any /* eslint-enable @typescript-eslint/no-explicit-any */ ];
+        const debugCursorStop = window[/* eslint-disable @typescript-eslint/no-explicit-any */ DEBUG_KEY as any /* eslint-enable */];
         if (typeof debugCursorStop === 'number' && debugCursorStop >= 0 && debugCursorStop <= 1) {
             this.cursorStop = debugCursorStop;
         }

package/src/errorbox/ErrorBox.tsx

@@ -40,27 +40,27 @@ export interface ErrorBoxProps {
     /**
      * Title of the error box.
      */
-    title: string;
+    title: string,
 
     /**
      * Additional message providing details about the error.
      */
-    message: string;
+    message: string,
 
     /**
      * Raw text whose processing results in the error.
      */
-    text?: string;
+    text?: string,
 
     /**
      * Index of the character within `text` that results in the error.
      */
-    errorIndex?: number;
+    errorIndex?: number,
 
     /**
      * Index (1-based) of the line in which is the character that results in the error.
      */
-    lineNumber?: number;
+    lineNumber?: number,
 }