kokopu-react 3.3.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,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'>) => 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,
 }
 
 
@@ -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

@@ -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,
 }
 
 

package/src/errorbox/parsing.tsx

@@ -36,8 +36,8 @@ import { ErrorBox } from './ErrorBox';
  * Try to interpret the given object as a chess position.
  */
 export function parsePosition(position: Position | string, componentName: string):
-    { error: true, errorBox: JSX.Element } | { error: false, position: Position }
-{
+    { error: true, errorBox: JSX.Element } | { error: false, position: Position } {
+
     if (position instanceof Position) {
         return { error: false, position: position };
     }
@@ -84,8 +84,8 @@ function splitGameVariantAndFEN(position: string): { variant: GameVariant, fen:
  * Try to interpret the given object `move` as a move descriptor based on the given position.
  */
 export function parseMove(position: Position, move: MoveDescriptor | string | undefined, componentName: string):
-    { error: true, errorBox: JSX.Element } | { error: false, type: 'none' | 'null-move' } | { error: false, type: 'regular', move: MoveDescriptor }
-{
+    { error: true, errorBox: JSX.Element } | { error: false, type: 'none' | 'null-move' } | { error: false, type: 'regular', move: MoveDescriptor } {
+
     if (move === undefined || move === null) {
         return { error: false, type: 'none' };
     }
@@ -126,8 +126,8 @@ export function parseMove(position: Position, move: MoveDescriptor | string | un
  * Try to interpret the given object as a chess game.
  */
 export function parseGame(game: Game | Database | string, gameIndex: number, componentName: string):
-    { error: true, errorBox: JSX.Element } | { error: false, game: Game }
-{
+    { error: true, errorBox: JSX.Element } | { error: false, game: Game } {
+
     if (game instanceof Game) {
         return { error: false, game: game };
     }

package/src/i18n.ts

@@ -27,7 +27,7 @@
  */
 export namespace i18n {
 
-/* eslint-disable prefer-const */
+/* eslint-disable prefer-const, @stylistic/indent */
 // WARNING: all those constants must be declared with "let" to allow them to be re-defined if necessary by consumer codes.
 
 // Error box
@@ -46,7 +46,7 @@ export let TOOLTIP_PLAY_STOP = 'Play/stop the game';
 export let TOOLTIP_FLIP = 'Flip the board';
 
 // Movetext
-export let PIECE_SYMBOLS = { 'K':'K', 'Q':'Q', 'R':'R', 'B':'B', 'N':'N', 'P':'P' };
+export let PIECE_SYMBOLS = { K: 'K', Q: 'Q', R: 'R', B: 'B', N: 'N', P: 'P' };
 export let ANNOTATED_BY = 'Annotated by {0}';
 export let INVALID_PGN_ERROR_TITLE = 'Invalid PGN string.';
 

package/src/icons/AnnotationSymbolShape.tsx

@@ -38,27 +38,27 @@ interface AnnotationSymbolShapeProps {
     /**
      * X-coordinate of the center of the symbol.
      */
-    x: number;
+    x: number,
 
     /**
      * Y-coordinate of the center of the symbol.
      */
-    y: number;
+    y: number,
 
     /**
      * Size of the symbol (i.e. size of square in which the symbol is rendered).
      */
-    size: number;
+    size: number,
 
     /**
      * Symbol code.
      */
-    symbol: AnnotationSymbol;
+    symbol: AnnotationSymbol,
 
     /**
      * [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to use to colorize the shape (for example: `'green'`, `'#ff0000'`...).
      */
-    color: string;
+    color: string,
 }