kokopu-react 3.3.4 → 3.4.0

package/doc_src/demo/PageChessboardMove.tsx

@@ -3,7 +3,7 @@
  *                                                                            *
  *    Kokopu-React - A React-based library of chess-related components.       *
  *    <https://www.npmjs.com/package/kokopu-react>                            *
- *    Copyright (C) 2021-2025  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *    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      *
@@ -50,6 +50,7 @@ interface PageState {
     moveArrowVisible: boolean,
     moveArrowColor: AnnotationColor,
     animated: boolean,
+    sound: boolean,
     editedMove: string,
     playedMove: string,
 }
@@ -69,6 +70,7 @@ export default class Page extends React.Component<object, PageState> {
             moveArrowVisible: true,
             moveArrowColor: 'b',
             animated: true,
+            sound: true,
             editedMove: 'Nf6',
             playedMove: 'e4',
         };
@@ -96,6 +98,10 @@ export default class Page extends React.Component<object, PageState> {
                         label="Animation" disabled={!this.state.positionAfter}
                         control={<Switch checked={this.state.animated} onChange={() => this.setState({ animated: !this.state.animated })} color="primary" />}
                     />
+                    <FormControlLabel
+                        label="Sound" disabled={!this.state.positionAfter}
+                        control={<Switch checked={this.state.sound} onChange={() => this.setState({ sound: !this.state.sound })} color="primary" />}
+                    />
                     <FormControlLabel
                         label="Show move arrow" disabled={!this.state.positionAfter}
                         control={<Switch checked={this.state.moveArrowVisible} onChange={() => this.setState({ moveArrowVisible: !this.state.moveArrowVisible })} color="primary" />}
@@ -139,6 +145,7 @@ export default class Page extends React.Component<object, PageState> {
                     moveArrowVisible={this.state.moveArrowVisible}
                     moveArrowColor={this.state.moveArrowColor}
                     animated={this.state.animated}
+                    sound={this.state.sound}
                 />
             </Box>
         );
@@ -154,6 +161,7 @@ export default class Page extends React.Component<object, PageState> {
             attributes.push('flipped');
         }
         attributes.push(`animated={${this.state.animated}}`);
+        attributes.push(`sound={${this.state.sound}}`);
         attributes.push(`moveArrowVisible={${this.state.moveArrowVisible}}`);
         if (this.state.moveArrowVisible) {
             attributes.push(`moveArrowColor={${this.state.moveArrowColor}}`);

package/doc_src/demo/PageChessboardSmallScreens.tsx

@@ -3,7 +3,7 @@
  *                                                                            *
  *    Kokopu-React - A React-based library of chess-related components.       *
  *    <https://www.npmjs.com/package/kokopu-react>                            *
- *    Copyright (C) 2021-2025  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *    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      *

package/doc_src/demo/PageMovetextBase.tsx

@@ -3,7 +3,7 @@
  *                                                                            *
  *    Kokopu-React - A React-based library of chess-related components.       *
  *    <https://www.npmjs.com/package/kokopu-react>                            *
- *    Copyright (C) 2021-2025  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *    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      *

package/doc_src/demo/PageMovetextInteraction.tsx

@@ -3,7 +3,7 @@
  *                                                                            *
  *    Kokopu-React - A React-based library of chess-related components.       *
  *    <https://www.npmjs.com/package/kokopu-react>                            *
- *    Copyright (C) 2021-2025  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *    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      *
@@ -131,7 +131,7 @@ export default class Page extends React.Component<object, PageState> {
         const button = <Button size="small" onClick={() => this.setState({ withPopup: !this.state.withPopup })}>{this.state.withPopup ? 'Reduce' : 'Open'}</Button>;
         const { position, move, csl, cal } = this.getCurrentPositionAndAnnotations();
         const content = this.state.withPopup ?
-            <Stack><Chessboard position={position} move={move} squareMarkers={csl} arrowMarkers={cal} animated={true} />{button}</Stack> :
+            <Stack><Chessboard position={position} move={move} squareMarkers={csl} arrowMarkers={cal} animated sound />{button}</Stack> :
             button;
         return <Paper className="kokopu-fixedPopup" elevation={3}>{content}</Paper>;
     }

package/doc_src/demo/PageNavigationBoardBase.tsx

@@ -3,7 +3,7 @@
  *                                                                            *
  *    Kokopu-React - A React-based library of chess-related components.       *
  *    <https://www.npmjs.com/package/kokopu-react>                            *
- *    Copyright (C) 2021-2025  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *    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      *
@@ -56,6 +56,7 @@ interface PageState {
     moveArrowVisible: boolean,
     moveArrowColor: AnnotationColor,
     animated: boolean,
+    sound: boolean,
     playButtonVisible: boolean,
     flipButtonVisible: boolean,
 }
@@ -74,6 +75,7 @@ export default class Page extends React.Component<object, PageState> {
             moveArrowVisible: true,
             moveArrowColor: 'b',
             animated: true,
+            sound: true,
             playButtonVisible: true,
             flipButtonVisible: true,
         };
@@ -109,10 +111,16 @@ export default class Page extends React.Component<object, PageState> {
                         label="Show turn"
                         control={<Switch checked={this.state.turnVisible} onChange={() => this.setState({ turnVisible: !this.state.turnVisible })} color="primary" />}
                     />
+                </Stack>
+                <Stack direction="row" spacing={2} alignItems="center">
                     <FormControlLabel
-                        label="Animated"
+                        label="Animation"
                         control={<Switch checked={this.state.animated} onChange={() => this.setState({ animated: !this.state.animated })} color="primary" />}
                     />
+                    <FormControlLabel
+                        label="Sound"
+                        control={<Switch checked={this.state.sound} onChange={() => this.setState({ sound: !this.state.sound })} color="primary" />}
+                    />
                 </Stack>
                 <Box>
                     <Typography gutterBottom>Square size</Typography>
@@ -173,6 +181,7 @@ export default class Page extends React.Component<object, PageState> {
                     moveArrowVisible={this.state.moveArrowVisible}
                     moveArrowColor={this.state.moveArrowColor}
                     animated={this.state.animated}
+                    sound={this.state.sound}
                     playButtonVisible={this.state.playButtonVisible}
                     flipButtonVisible={this.state.flipButtonVisible}
                 />
@@ -194,6 +203,7 @@ export default class Page extends React.Component<object, PageState> {
             attributes.push(`moveArrowColor="${this.state.moveArrowColor}"`);
         }
         attributes.push(`animated={${this.state.animated}}`);
+        attributes.push(`sound={${this.state.sound}}`);
         attributes.push(`playButtonVisible={${this.state.playButtonVisible}}`);
         attributes.push(`flipButtonVisible={${this.state.flipButtonVisible}}`);
         const pgnDeclaration = 'const pgn = `\n' + pgn.trim() + '`;\n\n';

package/doc_src/demo/PageNavigationBoardUncontrolledVsControlled.tsx

@@ -3,7 +3,7 @@
  *                                                                            *
  *    Kokopu-React - A React-based library of chess-related components.       *
  *    <https://www.npmjs.com/package/kokopu-react>                            *
- *    Copyright (C) 2021-2025  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *    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      *
@@ -83,11 +83,11 @@ export default class Page extends React.Component<object, PageState> {
         return (
             <Box display="flex" alignItems="top" justifyContent="space-around">
                 <Box>
-                    <NavigationBoard game={pgn} animated initialNodeId="9b" />
+                    <NavigationBoard game={pgn} animated sound initialNodeId="9b" />
                     <Typography mt={2} textAlign="center">Uncontrolled</Typography>
                 </Box>
                 <Box>
-                    <NavigationBoard game={pgn} animated nodeId={this.state.nodeId} onNodeIdChanged={nodeId => this.setState({ nodeId: nodeId })} />
+                    <NavigationBoard game={pgn} animated sound nodeId={this.state.nodeId} onNodeIdChanged={nodeId => this.setState({ nodeId: nodeId })} />
                     <Typography mt={2} textAlign="center">Controlled</Typography>
                     <Typography textAlign="center">{`Current node ID: ${this.state.nodeId}`}</Typography>
                 </Box>
@@ -100,11 +100,13 @@ export default class Page extends React.Component<object, PageState> {
         const uncontrolledAttributes: string[] = [];
         uncontrolledAttributes.push('game={pgn}');
         uncontrolledAttributes.push('animated');
+        uncontrolledAttributes.push('sound');
         uncontrolledAttributes.push('initialNodeId="9b"');
 
         const controlledAttributes: string[] = [];
         controlledAttributes.push('game={pgn}');
         controlledAttributes.push('animated');
+        controlledAttributes.push('sound');
         controlledAttributes.push(`nodeId="${this.state.nodeId}"`);
         controlledAttributes.push('onNodeIdChanged={nodeId => handleNodeIdChanged(nodeId)}');
 

package/doc_src/demo/PageSynchroNavigationBoardMovetext.tsx

@@ -3,7 +3,7 @@
  *                                                                            *
  *    Kokopu-React - A React-based library of chess-related components.       *
  *    <https://www.npmjs.com/package/kokopu-react>                            *
- *    Copyright (C) 2021-2025  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *    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      *
@@ -48,7 +48,7 @@ function NavigationBoardWithMoveText({ game }: { game: Game }) {
     const [ nodeId, setNodeId ] = React.useState('start');
     return (
         <Stack direction="row" spacing={2}>
-            <NavigationBoard animated game={game} nodeId={nodeId} onNodeIdChanged={setNodeId} />
+            <NavigationBoard animated sound game={game} nodeId={nodeId} onNodeIdChanged={setNodeId} />
             <Movetext
                 game={game} diagramOptions={{ squareSize: 28 }} interactionMode="selectMove" selection={nodeId}
                 onMoveSelected={n => {

package/doc_src/demo/decs.d.ts

@@ -3,7 +3,7 @@
  *                                                                            *
  *    Kokopu-React - A React-based library of chess-related components.       *
  *    <https://www.npmjs.com/package/kokopu-react>                            *
- *    Copyright (C) 2021-2025  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *    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      *

package/doc_src/demo/demo.css

@@ -3,7 +3,7 @@
  *                                                                            *
  *    Kokopu-React - A React-based library of chess-related components.       *
  *    <https://www.npmjs.com/package/kokopu-react>                            *
- *    Copyright (C) 2021-2025  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *    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      *

package/doc_src/demo/util.ts

@@ -3,7 +3,7 @@
  *                                                                            *
  *    Kokopu-React - A React-based library of chess-related components.       *
  *    <https://www.npmjs.com/package/kokopu-react>                            *
- *    Copyright (C) 2021-2025  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *    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      *

package/doc_src/theming/LogoRenderer.js

@@ -3,7 +3,7 @@
  *                                                                            *
  *    Kokopu-React - A React-based library of chess-related components.       *
  *    <https://www.npmjs.com/package/kokopu-react>                            *
- *    Copyright (C) 2021-2025  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *    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      *

package/doc_src/theming/theming.css

@@ -3,7 +3,7 @@
  *                                                                            *
  *    Kokopu-React - A React-based library of chess-related components.       *
  *    <https://www.npmjs.com/package/kokopu-react>                            *
- *    Copyright (C) 2021-2025  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *    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      *

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.4",
+    "version": "3.4.0",
     "description": "A React-based library to create and display chessboard and chess-related components.",
     "keywords": [
         "chess",
@@ -43,42 +43,43 @@
         "htmlparser2": "^9.1.0"
     },
     "devDependencies": {
-        "@babel/preset-env": "^7.28.3",
-        "@babel/preset-react": "^7.27.1",
+        "@babel/preset-env": "^7.28.5",
+        "@babel/preset-react": "^7.28.5",
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.1",
-        "@eslint/js": "^9.38.0",
-        "@mui/material": "^7.3.4",
-        "@stylistic/eslint-plugin": "^5.5.0",
-        "@types/react": "^19.2.2",
-        "@types/react-dom": "^19.2.2",
+        "@eslint/js": "^9.39.2",
+        "@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",
         "copyfiles": "^2.4.1",
         "coverage-istanbul-loader": "^3.0.5",
         "css-loader": "^7.1.2",
-        "eslint": "^9.38.0",
+        "eslint": "^9.39.2",
         "eslint-plugin-react": "^7.37.5",
-        "globals": "^16.4.0",
-        "html-webpack-plugin": "^5.6.4",
+        "eslint-plugin-react-hooks": "^7.0.1",
+        "globals": "^17.0.0",
+        "html-webpack-plugin": "^5.6.5",
         "img-diff-js": "^0.5.4",
-        "kokopu": "^4.12.2",
-        "mocha": "^11.7.4",
+        "kokopu": "^4.13.1",
+        "mocha": "^11.7.5",
         "null-loader": "^4.0.1",
         "nyc": "^17.1.0",
-        "react": "^19.2.0",
+        "react": "^19.2.3",
         "react-docgen-typescript": "~2.2.2",
-        "react-dom": "^19.2.0",
+        "react-dom": "^19.2.3",
         "react-styleguidist": "^13.1.4",
-        "rimraf": "^6.0.1",
-        "selenium-webdriver": "^4.37.0",
+        "rimraf": "^6.1.2",
+        "selenium-webdriver": "^4.39.0",
         "ssh2-sftp-client": "^12.0.1",
         "style-loader": "^4.0.0",
         "ts-loader": "^9.5.4",
         "typescript": "^5.9.3",
-        "typescript-eslint": "^8.46.1",
+        "typescript-eslint": "^8.52.0",
         "unit.js": "^2.1.1",
-        "webpack": "^5.102.1",
+        "webpack": "^5.104.1",
         "webpack-cli": "^6.0.1"
     },
     "scripts": {
@@ -93,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

@@ -3,7 +3,7 @@
  *                                                                            *
  *    Kokopu-React - A React-based library of chess-related components.       *
  *    <https://www.npmjs.com/package/kokopu-react>                            *
- *    Copyright (C) 2021-2025  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *    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      *
@@ -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

@@ -3,7 +3,7 @@
  *                                                                            *
  *    Kokopu-React - A React-based library of chess-related components.       *
  *    <https://www.npmjs.com/package/kokopu-react>                            *
- *    Copyright (C) 2021-2025  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *    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      *
@@ -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

@@ -3,7 +3,7 @@
  *                                                                            *
  *    Kokopu-React - A React-based library of chess-related components.       *
  *    <https://www.npmjs.com/package/kokopu-react>                            *
- *    Copyright (C) 2021-2025  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *    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      *
@@ -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

@@ -3,7 +3,7 @@
  *                                                                            *
  *    Kokopu-React - A React-based library of chess-related components.       *
  *    <https://www.npmjs.com/package/kokopu-react>                            *
- *    Copyright (C) 2021-2025  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *    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      *
@@ -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.css

@@ -3,7 +3,7 @@
  *                                                                            *
  *    Kokopu-React - A React-based library of chess-related components.       *
  *    <https://www.npmjs.com/package/kokopu-react>                            *
- *    Copyright (C) 2021-2025  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *    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      *

package/src/chessboard/Chessboard.tsx

@@ -3,7 +3,7 @@
  *                                                                            *
  *    Kokopu-React - A React-based library of chess-related components.       *
  *    <https://www.npmjs.com/package/kokopu-react>                            *
- *    Copyright (C) 2021-2025  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *    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      *
@@ -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

@@ -3,7 +3,7 @@
  *                                                                            *
  *    Kokopu-React - A React-based library of chess-related components.       *
  *    <https://www.npmjs.com/package/kokopu-react>                            *
- *    Copyright (C) 2021-2025  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *    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      *
@@ -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/Draggable.tsx

@@ -3,7 +3,7 @@
  *                                                                            *
  *    Kokopu-React - A React-based library of chess-related components.       *
  *    <https://www.npmjs.com/package/kokopu-react>                            *
- *    Copyright (C) 2021-2025  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *    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      *

package/src/chessboard/Motion.tsx

@@ -3,7 +3,7 @@
  *                                                                            *
  *    Kokopu-React - A React-based library of chess-related components.       *
  *    <https://www.npmjs.com/package/kokopu-react>                            *
- *    Copyright (C) 2021-2025  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *    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      *

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/chessboard/colorsets.ts

@@ -3,7 +3,7 @@
  *                                                                            *
  *    Kokopu-React - A React-based library of chess-related components.       *
  *    <https://www.npmjs.com/package/kokopu-react>                            *
- *    Copyright (C) 2021-2025  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *    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      *

package/src/chessboard/piecesets.ts

@@ -3,7 +3,7 @@
  *                                                                            *
  *    Kokopu-React - A React-based library of chess-related components.       *
  *    <https://www.npmjs.com/package/kokopu-react>                            *
- *    Copyright (C) 2021-2025  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *    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      *