kokopu-react 3.2.0 → 3.3.1

package/src/navigationboard/NavigationBoard.tsx

@@ -28,15 +28,15 @@ import { Database, Game, Node as GameNode, Variation } from 'kokopu';
 
 import { IllegalArgument } from '../exception';
 import { i18n } from '../i18n';
-import { sanitizeBoolean, sanitizeOptional, sanitizeString } from '../sanitization';
+import { sanitizeBoolean, sanitizeOptional, sanitizeString, sanitizePartialObject } from '../sanitization';
 
 import { DynamicBoardGraphicProps, defaultDynamicBoardProps } from '../chessboard/BoardProperties';
 import { Chessboard } from '../chessboard/Chessboard';
 import { parseGame } from '../errorbox/parsing';
 import { NavigationField, firstNodeId, previousNodeId, nextNodeId, lastNodeId } from '../navigationboard/NavigationField';
 import { GO_FIRST_ICON_PATH, GO_PREVIOUS_ICON_PATH, GO_NEXT_ICON_PATH, GO_LAST_ICON_PATH, PLAY_ICON_PATH, STOP_ICON_PATH, FLIP_ICON_PATH } from './iconPaths';
-import { NavigationButton, NavigationButtonList, isNavigationButton } from './NavigationButton';
-import { NavigationToolbar } from './NavigationToolbar';
+import { NavigationBar, NavigationBarScheme, isNavigationBar, isNavigationBarScheme } from './NavigationButton';
+import { NavigationToolbar, navigationToolbarSize } from './NavigationToolbar';
 
 
 const INTER_MOVE_DURATION = 1000;
@@ -49,28 +49,28 @@ export interface NavigationBoardProps extends DynamicBoardGraphicProps {
      * a [kokopu.Database](https://kokopu.yo35.org/docs/current/classes/Database.html) object,
      * or a [PGN string](https://en.wikipedia.org/wiki/Portable_Game_Notation).
      */
-    game: Game | Database | string;
+    game: Game | Database | string,
 
     /**
      * Index of the game to display (only if attribute `game` is a [kokopu.Database](https://kokopu.yo35.org/docs/current/classes/Database.html)
      * or a [PGN string](https://en.wikipedia.org/wiki/Portable_Game_Notation)): `0` for the first game of the database/PGN, `1` for the second one, etc.
      * If omitted, the first game of the database/PGN is displayed.
      */
-    gameIndex: number;
+    gameIndex: number,
 
     /**
      * ID of the move initially selected (or `'start'`/`'end'` for the beginning/end of the main variation) when the component is uncontrolled.
      * Use [kokopu.Node#id](https://kokopu.yo35.org/docs/current/classes/Node.html#id) to get the ID of a game move.
      * Ignored if the `nodeId` attribute is provided.
      */
-    initialNodeId: string;
+    initialNodeId: string,
 
     /**
      * ID of the selected move (or `'start'`/`'end'` for the beginning/end of the main variation).
      * Use [kokopu.Node#id](https://kokopu.yo35.org/docs/current/classes/Node.html#id) to get the ID of a game move.
      * If provided (i.e. if the component is controlled), the attribute `onNodeIdChanged` must be provided as well.
      */
-    nodeId?: string;
+    nodeId?: string,
 
     /**
      * Callback invoked in controlled-component mode, when the user changes the selected move.
@@ -78,67 +78,94 @@ export interface NavigationBoardProps extends DynamicBoardGraphicProps {
      * @param nodeId - ID of the selected move (as returned by [kokopu.Node#id](https://kokopu.yo35.org/docs/current/classes/Node.html#id)),
      *                 or `'start'` for the beginning of the main variation.
      */
-    onNodeIdChanged?: (nodeId: string) => void;
+    onNodeIdChanged?: (nodeId: string) => void,
 
     /**
      * Whether auto-play is initially enabled or not.
      * Ignored if the `isPlaying` attribute is provided.
      */
-    initialIsPlaying: boolean;
+    initialIsPlaying: boolean,
 
     /**
      * Whether auto-play is enabled or not.
      * If provided (i.e. if the is-playing state is controlled), the attribute `onIsPlayingChanged` must be provided as well.
      */
-    isPlaying?: boolean;
+    isPlaying?: boolean,
 
     /**
      * Callback invoked in controlled-is-playing-state mode, when the user clicks on the play/stop button.
      *
      * @param isPlaying - New is-playing state.
      */
-    onIsPlayingChanged?: (isPlaying: boolean) => void;
+    onIsPlayingChanged?: (isPlaying: boolean) => void,
 
     /**
      * Whether the board is initially flipped (i.e. seen from Black's point of view) or not, when the flip state is uncontrolled.
      * Ignored if the `flipped` attribute is provided.
      */
-    initialFlipped: boolean;
+    initialFlipped: boolean,
 
     /**
      * Whether the board is flipped (i.e. seen from Black's point of view) or not.
      * If provided (i.e. if the flip state is controlled), the attribute `onFlippedChanged` must be provided as well.
      */
-    flipped?: boolean;
+    flipped?: boolean,
 
     /**
      * Callback invoked in controlled-flip-state mode, when the user flips the board.
      *
      * @param flipped - New flip state.
      */
-    onFlippedChanged?: (flipped: boolean) => void;
+    onFlippedChanged?: (flipped: boolean) => void,
 
     /**
      * Whether the play/stop button is visible or not in the toolbar.
      */
-    playButtonVisible: boolean;
+    playButtonVisible: boolean,
 
     /**
      * Whether the flip button is visible or not in the toolbar.
      */
-    flipButtonVisible: boolean;
+    flipButtonVisible: boolean,
 
     /**
      * Additional buttons to be added to the toolbar.
      */
-    additionalButtons: NavigationButton | NavigationButtonList;
+    additionalButtons: NavigationBar,
+}
+
+
+/**
+ * Attributes for method `NavigationBoard.size()`.
+ */
+interface NavigationBoardSizeAttr {
+    squareSize?: NavigationBoardProps['squareSize'],
+    coordinateVisible?: NavigationBoardProps['coordinateVisible'],
+    turnVisible?: NavigationBoardProps['turnVisible'],
+    smallScreenLimits?: NavigationBoardProps['smallScreenLimits'],
+    playButtonVisible?: NavigationBoardProps['playButtonVisible'],
+    flipButtonVisible?: NavigationBoardProps['flipButtonVisible'],
+    additionalButtons?: NavigationBarScheme,
+}
+
+
+/**
+ * Attributes for method `NavigationBoard.adaptSquareSize()`.
+ */
+interface NavigationBoardAdaptSquareSizeAttr {
+    coordinateVisible?: NavigationBoardProps['coordinateVisible'],
+    turnVisible?: NavigationBoardProps['turnVisible'],
+    smallScreenLimits?: NavigationBoardProps['smallScreenLimits'],
+    playButtonVisible?: NavigationBoardProps['playButtonVisible'],
+    flipButtonVisible?: NavigationBoardProps['flipButtonVisible'],
+    additionalButtons?: NavigationBarScheme,
 }
 
 
 interface NavigationBoardState {
-    nodeIdAsUncontrolled: string;
-    isPlayingAsUncontrolled: boolean;
-    flippedAsUncontrolled: boolean;
+    nodeIdAsUncontrolled: string,
+    isPlayingAsUncontrolled: boolean,
+    flippedAsUncontrolled: boolean,
 }
 
 
@@ -203,33 +230,40 @@ export class NavigationBoard extends React.Component<NavigationBoardProps, Navig
     private renderBoard(game: Game, node: GameNode | Variation, isPlaying: boolean, flipped: boolean) {
         const position = node instanceof GameNode ? node.positionBefore() : node.initialPosition();
         const move = node instanceof GameNode ? node.notation() : undefined;
-        return <Chessboard
-            position={position} move={move} flipped={flipped}
-            squareMarkers={node.tag('csl')} arrowMarkers={node.tag('cal')} textMarkers={node.tag('ctl')}
-            squareSize={this.props.squareSize}
-            coordinateVisible={this.props.coordinateVisible}
-            turnVisible={this.props.turnVisible}
-            colorset={this.props.colorset}
-            pieceset={this.props.pieceset}
-            smallScreenLimits={this.props.smallScreenLimits}
-            moveArrowVisible={this.props.moveArrowVisible}
-            moveArrowColor={this.props.moveArrowColor}
-            animated={this.props.animated}
-            bottomComponent={({ squareSize }) => this.renderToolbar(game, node, squareSize, isPlaying)}
-        />;
+        return (
+            <Chessboard
+                position={position} move={move} flipped={flipped}
+                squareMarkers={node.tag('csl')} arrowMarkers={node.tag('cal')} textMarkers={node.tag('ctl')}
+                squareSize={this.props.squareSize}
+                coordinateVisible={this.props.coordinateVisible}
+                turnVisible={this.props.turnVisible}
+                colorset={this.props.colorset}
+                pieceset={this.props.pieceset}
+                smallScreenLimits={this.props.smallScreenLimits}
+                moveArrowVisible={this.props.moveArrowVisible}
+                moveArrowColor={this.props.moveArrowColor}
+                animated={this.props.animated}
+                bottomComponent={({ squareSize }) => this.renderToolbar(game, node, squareSize, isPlaying)}
+            />
+        );
     }
 
     private renderNavigationField(game: Game, currentNodeId: string) {
-        return <NavigationField ref={this.navigationFieldRef}
-            onFirstPressed={() => this.handleNavClicked(firstNodeId(game, currentNodeId))}
-            onPreviousPressed={() => this.handleNavClicked(previousNodeId(game, currentNodeId))}
-            onNextPressed={() => this.handleNavClicked(nextNodeId(game, currentNodeId))}
-            onLastPressed={() => this.handleNavClicked(lastNodeId(game, currentNodeId))}
-        />;
+        return (
+            <NavigationField
+                ref={this.navigationFieldRef}
+                onFirstPressed={() => this.handleNavClicked(firstNodeId(game, currentNodeId))}
+                onPreviousPressed={() => this.handleNavClicked(previousNodeId(game, currentNodeId))}
+                onNextPressed={() => this.handleNavClicked(nextNodeId(game, currentNodeId))}
+                onLastPressed={() => this.handleNavClicked(lastNodeId(game, currentNodeId))}
+            />
+        );
     }
 
     private renderToolbar(game: Game, node: GameNode | Variation, squareSize: number, isPlaying: boolean) {
-        const buttons: NavigationButtonList = [];
+
+        // WARNING: the logic here must be the same as the one in `computeBarScheme()`.
+        const buttons: NavigationBar = [];
 
         // Core navigation buttons
         const currentNodeId = node.id();
@@ -260,8 +294,10 @@ export class NavigationBoard extends React.Component<NavigationBoardProps, Navig
         }
 
         // Additional buttons.
-        const additionalButtons = sanitizeNavigationButtonList(this.props.additionalButtons, () => new IllegalArgument('NavigationBoard', 'additionalButtons'));
-        for (const button of additionalButtons) {
+        if (!isNavigationBar(this.props.additionalButtons)) {
+            throw new IllegalArgument('NavigationBoard', 'additionalButtons');
+        }
+        for (const button of this.props.additionalButtons) {
             buttons.push(button);
         }
 
@@ -326,25 +362,81 @@ export class NavigationBoard extends React.Component<NavigationBoardProps, Navig
         }
     }
 
-}
+    /**
+     * Return the size of the {@link NavigationBoard}, assuming it is built with the given attributes.
+     */
+    static size(attr?: NavigationBoardSizeAttr): { width: number, height: number } {
+        const { squareSize, coordinateVisible, turnVisible, smallScreenLimits, playButtonVisible, flipButtonVisible, additionalButtons } =
+            sanitizePartialObject(attr, () => new IllegalArgument('NavigationBoard.size()', 'attr'));
+
+        // Sanitization
+        const actualPlayButtonVisible = sanitizeOptional(playButtonVisible, sanitizeBoolean);
+        const actualFlipButtonVisible = sanitizeOptional(flipButtonVisible, sanitizeBoolean);
+        if (additionalButtons !== undefined && !isNavigationBarScheme(additionalButtons)) {
+            throw new IllegalArgument('NavigationBoard.size()', 'additionalButtons');
+        }
+
+        const buttons = computeBarScheme(actualPlayButtonVisible, actualFlipButtonVisible, additionalButtons);
+        return Chessboard.size({
+            squareSize: squareSize,
+            coordinateVisible: coordinateVisible,
+            turnVisible: turnVisible,
+            smallScreenLimits: smallScreenLimits,
+            bottomComponent: ({ squareSize: sz }) => navigationToolbarSize(sz, buttons),
+        });
+    }
 
+    /**
+     * Return the maximum square size that would allow the {@link NavigationBoard} to fit in a rectangle of size `width x height`.
+     */
+    static adaptSquareSize(width: number, height: number, attr?: NavigationBoardAdaptSquareSizeAttr): number {
 
-/**
- * Sanitization method for the additional button parameter.
- */
-function sanitizeNavigationButtonList(type: NavigationButton | NavigationButtonList, exceptionBuilder: () => IllegalArgument): NavigationButtonList {
-    if (Array.isArray(type)) {
-        return type.map(t => {
-            if (t !== 'spacer' && !isNavigationButton(t)) {
-                throw exceptionBuilder();
-            }
-            return t;
+        const { coordinateVisible, turnVisible, smallScreenLimits, playButtonVisible, flipButtonVisible, additionalButtons } =
+            sanitizePartialObject(attr, () => new IllegalArgument('NavigationBoard.adaptSquareSize()', 'attr'));
+
+        // Sanitization
+        const actualPlayButtonVisible = sanitizeOptional(playButtonVisible, sanitizeBoolean);
+        const actualFlipButtonVisible = sanitizeOptional(flipButtonVisible, sanitizeBoolean);
+        if (additionalButtons !== undefined && !isNavigationBarScheme(additionalButtons)) {
+            throw new IllegalArgument('NavigationBoard.adaptSquareSize()', 'additionalButtons');
+        }
+
+        const buttons = computeBarScheme(actualPlayButtonVisible, actualFlipButtonVisible, additionalButtons);
+        return Chessboard.adaptSquareSize(width, height, {
+            coordinateVisible: coordinateVisible,
+            turnVisible: turnVisible,
+            smallScreenLimits: smallScreenLimits,
+            bottomComponent: ({ squareSize: sz }) => navigationToolbarSize(sz, buttons),
         });
     }
-    else if (isNavigationButton(type)) {
-        return [ type ];
+
+}
+
+
+function computeBarScheme(playButtonVisible: boolean | undefined, flipButtonVisible: boolean | undefined,
+    additionalButtons: NavigationBarScheme | undefined): NavigationBarScheme {
+
+    // WARNING: the logic here must be the same as the one in `renderToolbar()`.
+    const buttons: NavigationBarScheme = [];
+
+    buttons.push('button'); // go-first
+    buttons.push('button'); // go-previous
+    if (playButtonVisible ?? NavigationBoard.defaultProps.playButtonVisible) {
+        buttons.push('button');
+    }
+    buttons.push('button'); // go-next
+    buttons.push('button'); // go-last
+    buttons.push('spacer');
+    if (flipButtonVisible ?? NavigationBoard.defaultProps.flipButtonVisible) {
+        buttons.push('button');
     }
-    else {
-        throw exceptionBuilder();
+    buttons.push('spacer');
+
+    if (additionalButtons !== undefined) {
+        for (const button of additionalButtons) {
+            buttons.push(button);
+        }
     }
+
+    return buttons;
 }

package/src/navigationboard/NavigationButton.ts

@@ -33,29 +33,35 @@ export type NavigationButton = {
      *
      * The path is rendered within 32 x 32 viewbox (defined as `viewbox="0 0 32 32"`). It must be be a closed path, and must fit within the viewbox incircle.
      */
-    iconPath: string;
+    iconPath: string,
 
     /**
      * Human-readable tooltip.
      */
-    tooltip?: string;
+    tooltip?: string,
 
     /**
      * Whether or not the button is enabled (true by default).
      */
-    enabled?: boolean;
+    enabled?: boolean,
 
     /**
      * Callback invoked when the user clicks on the button.
      */
-    onClick?: () => void;
+    onClick?: () => void,
 };
 
 
 /**
  * List of additional buttons to be added to the toolbar of {@link NavigationBoard}, together with optional spacers in-between.
  */
-export type NavigationButtonList = (NavigationButton | 'spacer')[];
+export type NavigationBar = (NavigationButton | 'spacer')[];
+
+
+/**
+ * Scheme of additional button list to be added to the toolbar of {@link NavigationBoard}, together with optional spacers in-between.
+ */
+export type NavigationBarScheme = ('button' | 'spacer')[];
 
 
 /**
@@ -70,3 +76,39 @@ export function isNavigationButton(button: unknown): button is NavigationButton
         ((button as NavigationButton).enabled === undefined || typeof (button as NavigationButton).enabled === 'boolean') &&
         ((button as NavigationButton).onClick === undefined || typeof (button as NavigationButton).onClick === 'function');
 }
+
+
+/**
+ * Whether the given object is a {@link NavigationBar} or not.
+ */
+export function isNavigationBar(buttons: unknown): buttons is NavigationBar {
+    if (Array.isArray(buttons)) {
+        for (const button of buttons) {
+            if (!(isNavigationButton(button) || button === 'spacer')) {
+                return false;
+            }
+        }
+        return true;
+    }
+    else {
+        return false;
+    }
+}
+
+
+/**
+ * Whether the given object is a {@link NavigationBarScheme} or not.
+ */
+export function isNavigationBarScheme(buttons: unknown): buttons is NavigationBarScheme {
+    if (Array.isArray(buttons)) {
+        for (const button of buttons) {
+            if (!(button === 'button' || button === 'spacer')) {
+                return false;
+            }
+        }
+        return true;
+    }
+    else {
+        return false;
+    }
+}

package/src/navigationboard/NavigationField.tsx

@@ -30,11 +30,11 @@ import './NavigationField.css';
 
 
 interface NavigationFieldProps {
-    onFirstPressed?: () => void;
-    onPreviousPressed?: () => void;
-    onNextPressed?: () => void;
-    onLastPressed?: () => void;
-    onExitPressed?: () => void;
+    onFirstPressed?: () => void,
+    onPreviousPressed?: () => void,
+    onNextPressed?: () => void,
+    onLastPressed?: () => void,
+    onExitPressed?: () => void,
 }
 
 
@@ -54,7 +54,7 @@ export class NavigationField extends React.Component<NavigationFieldProps> {
     }
 
     private handleKeyDown(evt: React.KeyboardEvent<HTMLAnchorElement>) {
-        /* eslint-disable no-unused-expressions */
+        /* eslint-disable @typescript-eslint/no-unused-expressions */
         doHandleKeyDown(evt, 'Home', this.props.onFirstPressed) ||
         doHandleKeyDown(evt, 'ArrowLeft', this.props.onPreviousPressed) ||
         doHandleKeyDown(evt, 'ArrowRight', this.props.onNextPressed) ||

package/src/navigationboard/NavigationToolbar.tsx

@@ -24,14 +24,14 @@
 
 import * as React from 'react';
 
-import { NavigationButton, NavigationButtonList } from './NavigationButton';
+import { NavigationButton, NavigationBar, NavigationBarScheme } from './NavigationButton';
 
 import './NavigationToolbar.css';
 
 
 interface NavigationToolbarProps {
-    squareSize: number;
-    buttons: NavigationButtonList;
+    squareSize: number,
+    buttons: NavigationBar,
 }
 
 
@@ -62,23 +62,25 @@ export function NavigationToolbar({ squareSize, buttons }: NavigationToolbarProp
         atLeastOneButtonEncountered = true;
 
         // Enqueue the button node.
-        buttonNodes.push(<NavigationButtonImpl
-            key={buttonNodes.length}
-            tooltip={button.tooltip} iconPath={button.iconPath} enabled={button.enabled} onClick={button.onClick}
-            size={buttonSize}
-            spaceOnLeft={i === 0 || buttons[i - 1] === 'spacer'}
-            spaceOnRight={i === buttons.length - 1 || buttons[i + 1] === 'spacer'}
-        />);
+        buttonNodes.push(
+            <NavigationButtonImpl
+                key={buttonNodes.length}
+                tooltip={button.tooltip} iconPath={button.iconPath} enabled={button.enabled} onClick={button.onClick}
+                size={buttonSize}
+                spaceOnLeft={i === 0 || buttons[i - 1] === 'spacer'}
+                spaceOnRight={i === buttons.length - 1 || buttons[i + 1] === 'spacer'}
+            />,
+        );
     }
 
-    return <div className="kokopu-navigationToolbar" style={{ marginTop: Math.round(buttonSize / 4) }}>{buttonNodes}</div>;
+    return <div className="kokopu-navigationToolbar" style={{ marginTop: computeMarginTop(squareSize) }}>{buttonNodes}</div>;
 }
 
 
 interface NavigationButtonImplProps extends NavigationButton {
-    size: number;
-    spaceOnLeft: boolean;
-    spaceOnRight: boolean;
+    size: number,
+    spaceOnLeft: boolean,
+    spaceOnRight: boolean,
 }
 
 
@@ -90,7 +92,9 @@ function NavigationButtonImpl({ size, spaceOnLeft, spaceOnRight, iconPath, toolt
     const rightBoundary = spaceOnRight ? 'A 16 16 0 0 0 16 0' : 'L 31 32 L 31 0 L 16 0';
     const actuallyEnabled = enabled ?? true;
     return (
-        <div className={actuallyEnabled ? 'kokopu-enabledNavigationButton' : 'kokopu-disabledNavigationButton'} title={tooltip}
+        <div
+            className={actuallyEnabled ? 'kokopu-enabledNavigationButton' : 'kokopu-disabledNavigationButton'}
+            title={tooltip}
             onClick={actuallyEnabled ? onClick : undefined}
         >
             <svg viewBox="0 0 32 32" width={size} height={size}>
@@ -101,6 +105,41 @@ function NavigationButtonImpl({ size, spaceOnLeft, spaceOnRight, iconPath, toolt
 }
 
 
+/**
+ * Size of the navigation toolbar (taking into account the margin between the toolbar and the chessboard), assuming the given square size.
+ */
+export function navigationToolbarSize(squareSize: number, buttons: NavigationBarScheme): { width: number, height: number } {
+
+    const buttonSize = computeButtonSize(squareSize);
+    const spacerSize = computeSpacerSize(squareSize);
+    let width = 0;
+
+    let atLeastOneButtonEncountered = false;
+    for (let i = 0; i < buttons.length; ++i) {
+
+        // Skip the spacers.
+        if (buttons[i] === 'spacer') {
+            continue;
+        }
+
+        // Enqueue a spacer if necessary.
+        // Remark: consecutive spacers are collapsed into a single one for rendering, and spacers at the begin and end of the button list are not rendered.
+        if (atLeastOneButtonEncountered && buttons[i - 1] === 'spacer') {
+            width += spacerSize;
+        }
+        atLeastOneButtonEncountered = true;
+
+        // Enqueue the button node.
+        width += buttonSize;
+    }
+
+    return {
+        width: width,
+        height: buttonSize + computeMarginTop(squareSize),
+    };
+}
+
+
 /**
  * Return the height/width of the buttons assuming the given square size.
  */
@@ -115,3 +154,11 @@ function computeButtonSize(squareSize: number) {
 function computeSpacerSize(squareSize: number) {
     return Math.round((squareSize * 2 + 116) / 14);
 }
+
+
+/**
+ * Return the height of the margin between the toolbar and the chessboard.
+ */
+function computeMarginTop(squareSize: number) {
+    return Math.round((squareSize * 2 + 116) / 28);
+}

package/src/types.ts

@@ -62,22 +62,22 @@ export function isChessPieceIconType(iconType: unknown): iconType is ChessPieceI
 export type Colorset = {
 
     /** Color of the black squares. */
-    b: string;
+    b: string,
 
     /** Color of the white squares. */
-    w: string;
+    w: string,
 
     /** Color of the blue markers. */
-    cb: string;
+    cb: string,
 
     /** Color of the green markers. */
-    cg: string;
+    cg: string,
 
     /** Color of the red markers. */
-    cr: string;
+    cr: string,
 
     /** Color of the yellow markers. */
-    cy: string;
+    cy: string,
 };
 
 
@@ -89,46 +89,46 @@ export type Colorset = {
 export type Pieceset = {
 
     /** Image for the black bishops. */
-    bb: string;
+    bb: string,
 
     /** Image for the black kings. */
-    bk: string;
+    bk: string,
 
     /** Image for the black knights. */
-    bn: string;
+    bn: string,
 
     /** Image for the black pawns. */
-    bp: string;
+    bp: string,
 
     /** Image for the black queens. */
-    bq: string;
+    bq: string,
 
     /** Image for the black rooks. */
-    br: string;
+    br: string,
 
     /** Image for the black turn flags. */
-    bx: string;
+    bx: string,
 
     /** Image for the white bishops. */
-    wb: string;
+    wb: string,
 
     /** Image for the white kings. */
-    wk: string;
+    wk: string,
 
     /** Image for the white knights. */
-    wn: string;
+    wn: string,
 
     /** Image for the white pawns. */
-    wp: string;
+    wp: string,
 
     /** Image for the white queens. */
-    wq: string;
+    wq: string,
 
     /** Image for the white rooks. */
-    wr: string;
+    wr: string,
 
     /** Image for the white turn flags. */
-    wx: string;
+    wx: string,
 };
 
 
@@ -136,12 +136,12 @@ export type Pieceset = {
  * Set of aliases for chess pieces symbols.
  */
 export type PieceSymbolMapping = {
-    K: string;
-    Q: string;
-    R: string;
-    B: string;
-    N: string;
-    P: string;
+    K: string,
+    Q: string,
+    R: string,
+    B: string,
+    N: string,
+    P: string,
 };