kokopu-react 3.3.5 → 3.4.0

package/doc_src/webpack_configuration.md

@@ -1,5 +1,6 @@
 Kokopu-React is not a "pure" JavaScript/TypeScript library, in that it is shipped with other type of files:
 - `*.css` files (stylesheets),
+- `*.ogg` files (sounds),
 - `*.png` files (images),
 - `*.woff` and `*.woff2` files (fonts).
 
@@ -17,7 +18,7 @@ module.exports = {
                 // ... or any other configuration that loads the matching files as global CSS.
             },
             {
-                test: /\.(png|woff|woff2)$/i,
+                test: /\.(ogg|png|woff|woff2)$/i,
                 type: 'asset/resource',
                 // ... or any other configuration that loads the matching files as resources.
             },

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "kokopu-react",
-    "version": "3.3.5",
+    "version": "3.4.0",
     "description": "A React-based library to create and display chessboard and chess-related components.",
     "keywords": [
         "chess",
@@ -48,9 +48,9 @@
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.1",
         "@eslint/js": "^9.39.2",
-        "@mui/material": "^7.3.6",
-        "@stylistic/eslint-plugin": "^5.6.1",
-        "@types/react": "^19.2.7",
+        "@mui/material": "^7.3.7",
+        "@stylistic/eslint-plugin": "^5.7.0",
+        "@types/react": "^19.2.8",
         "@types/react-dom": "^19.2.3",
         "babel-loader": "^10.0.0",
         "copy-webpack-plugin": "^13.0.1",
@@ -60,7 +60,7 @@
         "eslint": "^9.39.2",
         "eslint-plugin-react": "^7.37.5",
         "eslint-plugin-react-hooks": "^7.0.1",
-        "globals": "^16.5.0",
+        "globals": "^17.0.0",
         "html-webpack-plugin": "^5.6.5",
         "img-diff-js": "^0.5.4",
         "kokopu": "^4.13.1",
@@ -77,7 +77,7 @@
         "style-loader": "^4.0.0",
         "ts-loader": "^9.5.4",
         "typescript": "^5.9.3",
-        "typescript-eslint": "^8.51.0",
+        "typescript-eslint": "^8.52.0",
         "unit.js": "^2.1.1",
         "webpack": "^5.104.1",
         "webpack-cli": "^6.0.1"
@@ -94,7 +94,7 @@
         "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",
+        "build:lib": "rimraf dist/lib && tsc --outDir dist/lib && copyfiles -u 1 'src/**/*.{css,ogg,png,woff,woff2}' dist/lib",
         "start": "styleguidist server --open --config scripts/doc.styleguide.config.js",
         "clean": "rimraf build dist"
     }

package/scripts/doc.styleguide.config.js

@@ -134,7 +134,7 @@ module.exports = {
                     use: [ 'style-loader', 'css-loader' ],
                 },
                 {
-                    test: /\.(png|woff|woff2)$/i,
+                    test: /\.(ogg|png|woff|woff2)$/i,
                     type: 'asset/resource',
                 },
                 {

package/scripts/doc.tsconfig.json

@@ -1,6 +1,6 @@
 {
     "extends": "../tsconfig.json",
-    "include": [ "../doc_src/demo/**/*" ],
+    "include": [ "../doc_src/demo/**/*", "../src/**/*" ],
     "compilerOptions": {
         "declaration": false
     }

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

@@ -85,7 +85,7 @@ module.exports = {
                 use: [ 'style-loader', 'css-loader' ],
             },
             {
-                test: /\.(png|woff|woff2)$/i,
+                test: /\.(ogg|png|woff|woff2)$/i,
                 type: 'asset/resource',
             },
             {

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

@@ -49,7 +49,7 @@ module.exports = {
                 use: 'null-loader',
             },
             {
-                test: /\.(png|woff|woff2)$/i,
+                test: /\.(ogg|png|woff|woff2)$/i,
                 use: 'null-loader',
             },
         ],

package/src/chessboard/BoardProperties.ts

@@ -104,6 +104,11 @@ export interface DynamicBoardGraphicProps extends StaticBoardGraphicProps {
      * Whether moves are animated or not.
      */
     animated: boolean,
+
+    /**
+     * Whether sound effects are enabled or not.
+     */
+    sound: boolean,
 }
 
 
@@ -127,5 +132,6 @@ export function defaultDynamicBoardProps(): DynamicBoardGraphicProps {
         moveArrowVisible: true,
         moveArrowColor: 'b',
         animated: false,
+        sound: false,
     };
 }

package/src/chessboard/Chessboard.tsx

@@ -228,6 +228,7 @@ export class Chessboard extends React.Component<ChessboardProps, ChessboardState
             throw new IllegalArgument('Chessboard', 'moveArrowColor');
         }
         const animated = sanitizeBoolean(this.props.animated);
+        const sound = sanitizeBoolean(this.props.sound);
         const colorset = colorsets[this.props.colorset];
         if (!colorset) {
             throw new IllegalArgument('Chessboard', 'colorset');
@@ -263,7 +264,7 @@ export class Chessboard extends React.Component<ChessboardProps, ChessboardState
                     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}
+                    moveArrowVisible={moveArrowVisible} moveArrowColor={this.props.moveArrowColor} animated={animated} sound={sound}
                     colorset={colorset} pieceset={pieceset}
                     interactionMode={interactionMode} editedArrowColor={this.props.editedArrowColor}
                     onPieceMoved={onPieceMoved} onSquareClicked={onSquareClicked} onArrowEdited={onArrowEdited} onMovePlayed={onMovePlayed}

package/src/chessboard/ChessboardImpl.tsx

@@ -33,6 +33,7 @@ import { AnnotationSymbolShape } from '../icons/AnnotationSymbolShape';
 import { ArrowTip } from '../icons/ArrowTip';
 import { Draggable } from './Draggable';
 import { Motion } from './Motion';
+import { Sound } from './Sound';
 
 import '../icons/arrow.css';
 import './Chessboard.css';
@@ -66,6 +67,7 @@ interface ChessboardImplProps {
     moveArrowVisible: boolean,
     moveArrowColor: AnnotationColor,
     animated: boolean,
+    sound: boolean,
     colorset: Colorset,
     pieceset: Pieceset,
 
@@ -145,6 +147,7 @@ export class ChessboardImpl extends React.Component<ChessboardImplProps, Chessbo
                 {rankCoordinates}
                 {fileCoordinates}
                 {this.renderBoardContent()}
+                {this.props.move && this.props.sound ? <Sound /> : undefined}
             </svg>
         );
     }

package/src/chessboard/Sound.tsx

@@ -0,0 +1,71 @@
+/*!
+ * -------------------------------------------------------------------------- *
+ *                                                                            *
+ *    Kokopu-React - A React-based library of chess-related components.       *
+ *    <https://www.npmjs.com/package/kokopu-react>                            *
+ *    Copyright (C) 2021-2026  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      *
+ *    as published by the Free Software Foundation, either version 3 of       *
+ *    the License, or (at your option) any later version.                     *
+ *                                                                            *
+ *    Kokopu-React is distributed in the hope that it will be useful,         *
+ *    but WITHOUT ANY WARRANTY; without even the implied warranty of          *
+ *    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the            *
+ *    GNU Lesser General Public License for more details.                     *
+ *                                                                            *
+ *    You should have received a copy of the GNU Lesser General               *
+ *    Public License along with this program. If not, see                     *
+ *    <http://www.gnu.org/licenses/>.                                         *
+ *                                                                            *
+ * -------------------------------------------------------------------------- */
+
+
+import * as React from 'react';
+
+import moveSound from './sounds/move.ogg';
+
+
+/**
+ * Play a sound.
+ */
+export function Sound() {
+
+    React.useEffect(() => {
+        const audio = new Audio(moveSound);
+        safePlay(audio);
+        return () => audio.pause();
+    }, []);
+
+    return undefined;
+}
+
+
+declare global {
+
+    // WARNING: this global variable exists only for testing purposes. DO NOT USE IT IN PRODUCTION.
+    var __kokopu_debug_sound: string; // eslint-disable-line camelcase
+}
+
+
+async function safePlay(audio: HTMLAudioElement) {
+    try {
+
+        const debugSound = window.__kokopu_debug_sound === '';
+        // istanbul ignore else
+        if (debugSound) {
+            window['__kokopu_debug_sound'] = 'sound-in-progress';
+        }
+
+        await audio.play();
+
+        // istanbul ignore else
+        if (debugSound) {
+            window['__kokopu_debug_sound'] = 'sound-done';
+        }
+    }
+    catch (e) { // eslint-disable-line @typescript-eslint/no-unused-vars
+        // Ignore the errors (can typically happen if the audio is interrupted while fetching the sound file).
+    }
+}

package/src/decs.d.ts

@@ -22,6 +22,11 @@
  * -------------------------------------------------------------------------- */
 
 
+declare module '*.ogg' {
+    const path: string;
+    export default path;
+}
+
 declare module '*.png' {
     const path: string;
     export default path;

package/src/navigationboard/NavigationBoard.tsx

@@ -242,7 +242,7 @@ export class NavigationBoard extends React.Component<NavigationBoardProps, Navig
                 smallScreenLimits={this.props.smallScreenLimits}
                 moveArrowVisible={this.props.moveArrowVisible}
                 moveArrowColor={this.props.moveArrowColor}
-                animated={this.props.animated}
+                animated={this.props.animated} sound={this.props.sound}
                 bottomComponent={({ squareSize }) => this.renderToolbar(game, node, squareSize, isPlaying)}
             />
         );

package/test/06_chessboard_animation.js

@@ -22,7 +22,8 @@
  * -------------------------------------------------------------------------- */
 
 
-const { describeWithBrowser, itChecksScreenshots, itCustom, takeScreenshot, compareScreenshot, waitForAnimation } = require('./common/graphic');
+const { describeWithBrowser, itChecksScreenshots, itCustom, takeScreenshot, compareScreenshot, waitForAnimation,
+    compareGlobalVar } = require('./common/graphic');
 const { By } = require('selenium-webdriver');
 
 
@@ -55,17 +56,34 @@ describeWithBrowser('Chessboard animation', browserContext => {
         'promotion',
     ]);
 
+    async function runSoundTestScenario(element, withMove) {
+
+        // Run the scenario.
+        const actions = browserContext.driver.actions({ async: true });
+        const button = await element.findElement(By.id(`chessboard-actionButton-${withMove ? 'withMove' : 'noMove'}`));
+        await actions.move({ origin: button }).click().perform();
+        await waitForAnimation();
+        await takeScreenshot(browserContext, withMove ? 'with move' : 'without move', element);
+
+        // Validate the scenario.
+        await compareGlobalVar(browserContext, '__kokopu_debug_sound', withMove ? 'sound-done' : '');
+        await compareScreenshot(browserContext, withMove ? 'with move' : 'without move');
+    }
+    itCustom(browserContext, '06_chessboard_animation/sound', 0, 'without move', async element => await runSoundTestScenario(element, false));
+    itCustom(browserContext, '06_chessboard_animation/sound', 1, 'with move', async element => await runSoundTestScenario(element, true));
+
     itCustom(browserContext, '06_chessboard_animation/on_redraw', 0, 'default', async element => {
 
         // Run the scenario.
         await takeScreenshot(browserContext, 'initial state', element);
         const actions = browserContext.driver.actions({ async: true });
-        const button = await element.findElement(By.id('chessboard-action-button'));
+        const button = await element.findElement(By.id('chessboard-actionButton'));
         await actions.move({ origin: button }).click().perform();
         await waitForAnimation();
         await takeScreenshot(browserContext, 'final state', element);
 
-        // Check the screenshots.
+        // Validate the scenario.
+        await compareGlobalVar(browserContext, '__kokopu_debug_sound', 'sound-done');
         await compareScreenshot(browserContext, 'initial state');
         await compareScreenshot(browserContext, 'final state');
     });

package/test/common/graphic.js

@@ -224,6 +224,15 @@ exports.setSandbox = async function (browserContext, value) {
 };
 
 
+/**
+ * Compare the value of the given global variable to the expected value.
+ */
+exports.compareGlobalVar = async function (browserContext, variableName, expectedValue) {
+    const actualValue = await browserContext.driver.executeScript(`return window["${variableName}"];`);
+    test.value(actualValue).is(expectedValue);
+};
+
+
 /**
  * Set the width of the browser.
  */

package/test/graphic_test_app/05_chessboard_graphic/annotations.tsx

@@ -48,15 +48,15 @@ const arrowMarkers3 = { d1h5: G, a5f4: R, c7c3: Y, g7g7: G };
 const textMarkers3 = 'G5c6,R(plus)a1,G(times)b1,B(dot)a2,Y(circle)b2';
 
 testApp([ /* eslint-disable react/jsx-key */
-    <Chessboard squareMarkers={squareMarkers1} arrowMarkers={arrowMarkers1} textMarkers={textMarkers1} flipped={false} coordinateVisible={true} />,
-    <Chessboard squareMarkers={squareMarkers1} arrowMarkers={arrowMarkers1} textMarkers={textMarkers1} flipped={true} coordinateVisible={true} />,
+    <Chessboard squareMarkers={squareMarkers1} arrowMarkers={arrowMarkers1} textMarkers={textMarkers1} flipped={false} coordinateVisible />,
+    <Chessboard squareMarkers={squareMarkers1} arrowMarkers={arrowMarkers1} textMarkers={textMarkers1} flipped coordinateVisible />,
     <Chessboard squareMarkers={squareMarkers2} arrowMarkers={arrowMarkers2} textMarkers={textMarkers2} flipped={false} coordinateVisible={false} />,
-    <Chessboard squareMarkers={squareMarkers2} arrowMarkers={arrowMarkers2} textMarkers={textMarkers2} flipped={true} coordinateVisible={false} />,
+    <Chessboard squareMarkers={squareMarkers2} arrowMarkers={arrowMarkers2} textMarkers={textMarkers2} flipped coordinateVisible={false} />,
     <Chessboard
         squareMarkers={squareMarkers3} arrowMarkers={arrowMarkers3} textMarkers={textMarkers3} flipped={false} coordinateVisible={false} position="empty"
     />,
     <Chessboard
-        squareMarkers={squareMarkers3} arrowMarkers={arrowMarkers3} textMarkers={textMarkers3} flipped={true} coordinateVisible={true}
+        squareMarkers={squareMarkers3} arrowMarkers={arrowMarkers3} textMarkers={textMarkers3} flipped coordinateVisible
         position="8/8/1r6/8/5k1K/8/8/8 b - - 0 1"
     />,
 ]); /* eslint-enable react/jsx-key */

package/test/graphic_test_app/05_chessboard_graphic/base.tsx

@@ -29,7 +29,7 @@ import { Chessboard } from '../../../dist/lib/index';
 
 testApp([ /* eslint-disable react/jsx-key */
     <Chessboard />,
-    <Chessboard position="empty" turnVisible={true} />,
+    <Chessboard position="empty" turnVisible />,
     <Chessboard position="something invalid" />,
     <Chessboard position="r1bqkbnr/pppp1ppp/2n5/1B2p3/4P3/5N2/PPPP1PPP/RNBQK2R b KQkq - 3 3" turnVisible={false} />,
     <Chessboard position={new Position('8/8/1r6/8/5k1K/8/8/8 b - - 0 1')} />,

package/test/graphic_test_app/05_chessboard_graphic/flipped.tsx

@@ -28,9 +28,9 @@ import { testApp } from '../common/test_app';
 import { Chessboard } from '../../../dist/lib/index';
 
 testApp([ /* eslint-disable react/jsx-key */
-    <Chessboard flipped={true} turnVisible={false} />,
-    <Chessboard flipped={true} position="empty" />,
-    <Chessboard flipped={true} position="something invalid" />,
-    <Chessboard flipped={true} position="r1bqkbnr/pppp1ppp/2n5/1B2p3/4P3/5N2/PPPP1PPP/RNBQK2R b KQkq - 3 3" />,
-    <Chessboard flipped={true} position={new Position('8/8/1r6/8/5k1K/8/8/8 b - - 0 1')} turnVisible={true} />,
+    <Chessboard flipped turnVisible={false} />,
+    <Chessboard flipped position="empty" />,
+    <Chessboard flipped position="something invalid" />,
+    <Chessboard flipped position="r1bqkbnr/pppp1ppp/2n5/1B2p3/4P3/5N2/PPPP1PPP/RNBQK2R b KQkq - 3 3" />,
+    <Chessboard flipped position={new Position('8/8/1r6/8/5k1K/8/8/8 b - - 0 1')} turnVisible />,
 ]); /* eslint-enable react/jsx-key */

package/test/graphic_test_app/05_chessboard_graphic/move.tsx

@@ -34,8 +34,8 @@ testApp([ /* eslint-disable react/jsx-key */
     <Chessboard move="e4" animated={false} />,
     <Chessboard move="Nf3" moveArrowVisible={false} animated={false} />,
     <Chessboard move="Nf4" animated={false} />,
-    <Chessboard position="rnbqkbnr/pppp1ppp/4p3/8/3PP3/8/PPP2PPP/RNBQKBNR b KQkq - 0 2" move="Bb4+" moveArrowVisible={true} flipped={true} animated={true} />,
-    <Chessboard position={pos} move={move} animated={true} moveArrowColor="g" />,
+    <Chessboard position="rnbqkbnr/pppp1ppp/4p3/8/3PP3/8/PPP2PPP/RNBQKBNR b KQkq - 0 2" move="Bb4+" moveArrowVisible flipped animated />,
+    <Chessboard position={pos} move={move} animated moveArrowColor="g" />,
     <Chessboard position="r3k2r/pppppppp/8/8/8/8/PPPPPPPP/R3K2R b KQkq - 0 1" move="O-O-O" animated={false} moveArrowColor="r" />,
     <Chessboard position="rnbqkbnr/ppp1p1pp/8/3pPp2/8/8/PPPP1PPP/RNBQKBNR w KQkq f6 0 3" move="exf6" animated={false} moveArrowColor="y" />,
     <Chessboard position="8/8/8/1K6/8/4k3/1p6/8 b - - 0 1" move="b1=R+" animated={false} moveArrowColor="b" />,

package/test/graphic_test_app/05_chessboard_graphic/theme.tsx

@@ -38,12 +38,12 @@ const am = 'Ba1a3,Gb1b3,Rc1c3,Yd1d3';
 testApp([ /* eslint-disable react/jsx-key */
     <Chessboard position={pos1} move={mv1} squareMarkers={sm} arrowMarkers={am} animated={false} />,
     <Chessboard position={pos2} move={mv2} squareMarkers={sm} arrowMarkers={am} squareSize={60} animated={false} />,
-    <Chessboard position={pos1} move={mv1} squareMarkers={sm} arrowMarkers={am} squareSize={29} coordinateVisible={false} flipped={true} animated={false} />,
-    <Chessboard position={pos1} move={mv1} squareMarkers={sm} arrowMarkers={am} squareSize={47} coordinateVisible={true} flipped={true} colorset="scid" animated={false} />,
+    <Chessboard position={pos1} move={mv1} squareMarkers={sm} arrowMarkers={am} squareSize={29} coordinateVisible={false} flipped animated={false} />,
+    <Chessboard position={pos1} move={mv1} squareMarkers={sm} arrowMarkers={am} squareSize={47} coordinateVisible flipped colorset="scid" animated={false} />,
     <Chessboard position={pos2} move={mv2} squareMarkers={sm} arrowMarkers={am} coordinateVisible={false} colorset="marine" pieceset="eyes" animated={false} />,
     <Chessboard position={pos1} move={mv1} squareMarkers={sm} arrowMarkers={am} coordinateVisible={false} pieceset="fantasy" animated={false} />,
     <Chessboard position={pos1} move={mv1} squareMarkers={sm} arrowMarkers={am} colorset="emerald" pieceset="skulls" animated={false} />,
-    <Chessboard position={pos2} move={mv2} squareMarkers={sm} arrowMarkers={am} squareSize={91} flipped={true} colorset="gray" pieceset="spatial" animated={false} />,
+    <Chessboard position={pos2} move={mv2} squareMarkers={sm} arrowMarkers={am} squareSize={91} flipped colorset="gray" pieceset="spatial" animated={false} />,
     <Chessboard position={pos1} move={mv1} squareMarkers={sm} arrowMarkers={am} squareSize={17} colorset="dusk" animated={false} />,
     <Chessboard squareSize={/* eslint-disable @typescript-eslint/no-explicit-any */ '24' as any /* eslint-enable @typescript-eslint/no-explicit-any */} />,
     <Chessboard colorset="not-a-colorset" />,

package/test/graphic_test_app/06_chessboard_animation/base_1.tsx

@@ -29,10 +29,10 @@ import { Chessboard } from '../../../dist/lib/index';
 window['__kokopu_debug_freeze_motion'] = 0.09;
 
 testApp([ /* eslint-disable react/jsx-key */
-    <Chessboard move="e4" animated={true} />,
-    <Chessboard move="Nf3" animated={true} moveArrowVisible={false} />,
-    <Chessboard position="r1bqkbnr/pppppppp/n7/8/4P3/8/PPPP1PPP/RNBQKBNR w KQkq - 1 2" move="Bxa6" animated={true} flipped turnVisible={false} />,
-    <Chessboard position="r3k2r/pppppppp/8/8/8/8/PPPPPPPP/R3K2R b KQkq - 0 1" move="O-O-O" animated={true} />,
-    <Chessboard position="rnbqkbnr/ppp1p1pp/8/3pPp2/8/8/PPPP1PPP/RNBQKBNR w KQkq f6 0 3" move="exf6" animated={true} />,
-    <Chessboard position="8/8/8/1K6/8/4k3/1p6/8 b - - 0 1" move="b1=R+" animated={true} turnVisible={false} />,
+    <Chessboard move="e4" animated />,
+    <Chessboard move="Nf3" animated moveArrowVisible={false} />,
+    <Chessboard position="r1bqkbnr/pppppppp/n7/8/4P3/8/PPPP1PPP/RNBQKBNR w KQkq - 1 2" move="Bxa6" animated flipped turnVisible={false} />,
+    <Chessboard position="r3k2r/pppppppp/8/8/8/8/PPPPPPPP/R3K2R b KQkq - 0 1" move="O-O-O" animated />,
+    <Chessboard position="rnbqkbnr/ppp1p1pp/8/3pPp2/8/8/PPPP1PPP/RNBQKBNR w KQkq f6 0 3" move="exf6" animated />,
+    <Chessboard position="8/8/8/1K6/8/4k3/1p6/8 b - - 0 1" move="b1=R+" animated turnVisible={false} />,
 ]); /* eslint-enable react/jsx-key */

package/test/graphic_test_app/06_chessboard_animation/base_2.tsx

@@ -29,10 +29,10 @@ import { Chessboard } from '../../../dist/lib/index';
 window['__kokopu_debug_freeze_motion'] = 0.7;
 
 testApp([ /* eslint-disable react/jsx-key */
-    <Chessboard move="e4" animated={true} />,
-    <Chessboard move="Nf3" animated={true} moveArrowVisible={false} />,
-    <Chessboard position="r1bqkbnr/pppppppp/n7/8/4P3/8/PPPP1PPP/RNBQKBNR w KQkq - 1 2" move="Bxa6" animated={true} flipped turnVisible={false} />,
-    <Chessboard position="r3k2r/pppppppp/8/8/8/8/PPPPPPPP/R3K2R b KQkq - 0 1" move="O-O-O" animated={true} />,
-    <Chessboard position="rnbqkbnr/ppp1p1pp/8/3pPp2/8/8/PPPP1PPP/RNBQKBNR w KQkq f6 0 3" move="exf6" animated={true} />,
-    <Chessboard position="8/8/8/1K6/8/4k3/1p6/8 b - - 0 1" move="b1=R+" animated={true} turnVisible={false} />,
+    <Chessboard move="e4" animated />,
+    <Chessboard move="Nf3" animated moveArrowVisible={false} />,
+    <Chessboard position="r1bqkbnr/pppppppp/n7/8/4P3/8/PPPP1PPP/RNBQKBNR w KQkq - 1 2" move="Bxa6" animated flipped turnVisible={false} />,
+    <Chessboard position="r3k2r/pppppppp/8/8/8/8/PPPPPPPP/R3K2R b KQkq - 0 1" move="O-O-O" animated />,
+    <Chessboard position="rnbqkbnr/ppp1p1pp/8/3pPp2/8/8/PPPP1PPP/RNBQKBNR w KQkq f6 0 3" move="exf6" animated />,
+    <Chessboard position="8/8/8/1K6/8/4k3/1p6/8 b - - 0 1" move="b1=R+" animated turnVisible={false} />,
 ]); /* eslint-enable react/jsx-key */

package/test/graphic_test_app/06_chessboard_animation/base_3.tsx

@@ -29,10 +29,10 @@ import { Chessboard } from '../../../dist/lib/index';
 window['__kokopu_debug_freeze_motion'] = 0.91;
 
 testApp([ /* eslint-disable react/jsx-key */
-    <Chessboard move="e4" animated={true} />,
-    <Chessboard move="Nf3" animated={true} moveArrowVisible={false} />,
-    <Chessboard position="r1bqkbnr/pppppppp/n7/8/4P3/8/PPPP1PPP/RNBQKBNR w KQkq - 1 2" move="Bxa6" animated={true} flipped turnVisible={false} />,
-    <Chessboard position="r3k2r/pppppppp/8/8/8/8/PPPPPPPP/R3K2R b KQkq - 0 1" move="O-O-O" animated={true} />,
-    <Chessboard position="rnbqkbnr/ppp1p1pp/8/3pPp2/8/8/PPPP1PPP/RNBQKBNR w KQkq f6 0 3" move="exf6" animated={true} />,
-    <Chessboard position="8/8/8/1K6/8/4k3/1p6/8 b - - 0 1" move="b1=R+" animated={true} turnVisible={false} />,
+    <Chessboard move="e4" animated />,
+    <Chessboard move="Nf3" animated moveArrowVisible={false} />,
+    <Chessboard position="r1bqkbnr/pppppppp/n7/8/4P3/8/PPPP1PPP/RNBQKBNR w KQkq - 1 2" move="Bxa6" animated flipped turnVisible={false} />,
+    <Chessboard position="r3k2r/pppppppp/8/8/8/8/PPPPPPPP/R3K2R b KQkq - 0 1" move="O-O-O" animated />,
+    <Chessboard position="rnbqkbnr/ppp1p1pp/8/3pPp2/8/8/PPPP1PPP/RNBQKBNR w KQkq f6 0 3" move="exf6" animated />,
+    <Chessboard position="8/8/8/1K6/8/4k3/1p6/8 b - - 0 1" move="b1=R+" animated turnVisible={false} />,
 ]); /* eslint-enable react/jsx-key */

package/test/graphic_test_app/06_chessboard_animation/on_redraw.tsx

@@ -34,15 +34,16 @@ function TestComponent() {
 
     function onClick() {
         window['__kokopu_debug_freeze_motion'] = 0.6;
+        window['__kokopu_debug_sound'] = '';
         setClicked(true);
     }
 
     return (
         <>
             <div>
-                <Chessboard position={position} move={move} animated={true} />
+                <Chessboard position={position} move={move} animated sound />
             </div>
-            {clicked ? undefined : <button id="chessboard-action-button" onClick={onClick}>Click here</button>}
+            {clicked ? undefined : <button id="chessboard-actionButton" onClick={onClick}>Click here</button>}
         </>
     );
 }

package/test/graphic_test_app/06_chessboard_animation/sound.tsx

@@ -0,0 +1,52 @@
+/*!
+ * -------------------------------------------------------------------------- *
+ *                                                                            *
+ *    Kokopu-React - A React-based library of chess-related components.       *
+ *    <https://www.npmjs.com/package/kokopu-react>                            *
+ *    Copyright (C) 2021-2026  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      *
+ *    as published by the Free Software Foundation, either version 3 of       *
+ *    the License, or (at your option) any later version.                     *
+ *                                                                            *
+ *    Kokopu-React is distributed in the hope that it will be useful,         *
+ *    but WITHOUT ANY WARRANTY; without even the implied warranty of          *
+ *    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the            *
+ *    GNU Lesser General Public License for more details.                     *
+ *                                                                            *
+ *    You should have received a copy of the GNU Lesser General               *
+ *    Public License along with this program. If not, see                     *
+ *    <http://www.gnu.org/licenses/>.                                         *
+ *                                                                            *
+ * -------------------------------------------------------------------------- */
+
+
+import * as React from 'react';
+import { testApp } from '../common/test_app';
+import { Chessboard } from '../../../dist/lib/index';
+
+
+/**
+ * REMARK: do NOT display the chessboards by default, because:
+ * - we want to know which one plays the sound,
+ * - there could be some issues with the auto-play policies of browsers.
+ */
+function TestComponent({ move }: { move?: string }) {
+
+    const [ clicked, setClicked ] = React.useState(false);
+
+    function onClick() {
+        window['__kokopu_debug_sound'] = '';
+        setClicked(true);
+    }
+
+    const id = `chessboard-actionButton-${move === undefined ? 'noMove' : 'withMove'}`;
+    return clicked ? <Chessboard move={move} sound /> : <button id={id} onClick={onClick}>Click here</button>;
+}
+
+
+testApp([ /* eslint-disable react/jsx-key */
+    <TestComponent />,
+    <TestComponent move="e4" />,
+]); /* eslint-enable react/jsx-key */

package/test/graphic_test_app/14_navigation_board_autoplay/controlled.tsx

@@ -85,5 +85,5 @@ testApp([ /* eslint-disable react/jsx-key */
         }}
     />,
     <NavigationBoardWithIsPlayingController />,
-    <NavigationBoard game={pgn} playButtonVisible initialNodeId="20b" isPlaying={true} />,
+    <NavigationBoard game={pgn} playButtonVisible initialNodeId="20b" isPlaying />,
 ]); /* eslint-enable react/jsx-key */

package/test/graphic_test_app/common/test_app.tsx

@@ -28,12 +28,13 @@ import { createRoot } from 'react-dom/client';
 import './test_app.css';
 
 
-// This global variable allows to freeze animations in an intermediate stage.
+// These global variables are used for testing purposes.
+/* eslint-disable camelcase */
 declare global {
-    interface Window {
-        __kokopu_debug_freeze_motion: number,
-    }
+    var __kokopu_debug_freeze_motion: number;
+    var __kokopu_debug_sound: string;
 }
+/* eslint-enable */
 
 
 interface TestItemContainerProps {