kokopu-react 3.3.5 → 3.4.1

package/doc_src/demo/PageNavigationBoardUncontrolledVsControlled.tsx

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

@@ -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/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.1",
     "description": "A React-based library to create and display chessboard and chess-related components.",
     "keywords": [
         "chess",
@@ -43,44 +43,43 @@
         "htmlparser2": "^9.1.0"
     },
     "devDependencies": {
-        "@babel/preset-env": "^7.28.5",
+        "@babel/preset-env": "^7.29.5",
         "@babel/preset-react": "^7.28.5",
         "@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",
+        "@eslint/js": "^9.39.4",
+        "@mui/material": "^7.3.11",
+        "@stylistic/eslint-plugin": "^5.10.0",
+        "@types/react": "^19.2.14",
         "@types/react-dom": "^19.2.3",
-        "babel-loader": "^10.0.0",
-        "copy-webpack-plugin": "^13.0.1",
+        "babel-loader": "^10.1.1",
+        "copy-webpack-plugin": "^14.0.0",
         "copyfiles": "^2.4.1",
         "coverage-istanbul-loader": "^3.0.5",
-        "css-loader": "^7.1.2",
-        "eslint": "^9.39.2",
+        "css-loader": "^7.1.4",
+        "eslint": "^9.39.4",
         "eslint-plugin-react": "^7.37.5",
-        "eslint-plugin-react-hooks": "^7.0.1",
-        "globals": "^16.5.0",
-        "html-webpack-plugin": "^5.6.5",
+        "eslint-plugin-react-hooks": "^7.1.1",
+        "globals": "^17.6.0",
+        "html-webpack-plugin": "^5.6.7",
         "img-diff-js": "^0.5.4",
-        "kokopu": "^4.13.1",
+        "kokopu": "^4.13.2",
         "mocha": "^11.7.5",
         "null-loader": "^4.0.1",
-        "nyc": "^17.1.0",
-        "react": "^19.2.3",
+        "nyc": "^18.0.0",
+        "react": "^19.2.6",
         "react-docgen-typescript": "~2.2.2",
-        "react-dom": "^19.2.3",
+        "react-dom": "^19.2.6",
         "react-styleguidist": "^13.1.4",
-        "rimraf": "^6.1.2",
-        "selenium-webdriver": "^4.39.0",
-        "ssh2-sftp-client": "^12.0.1",
+        "rimraf": "^6.1.3",
+        "selenium-webdriver": "^4.43.0",
+        "ssh2-sftp-client": "^12.1.1",
         "style-loader": "^4.0.0",
-        "ts-loader": "^9.5.4",
+        "ts-loader": "^9.5.7",
         "typescript": "^5.9.3",
-        "typescript-eslint": "^8.51.0",
-        "unit.js": "^2.1.1",
-        "webpack": "^5.104.1",
-        "webpack-cli": "^6.0.1"
+        "typescript-eslint": "^8.59.2",
+        "webpack": "^5.106.2",
+        "webpack-cli": "^7.0.2"
     },
     "scripts": {
         "lint": "eslint doc_src src test",
@@ -94,7 +93,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/icons/ChessPieceIcon.tsx

@@ -55,7 +55,7 @@ export interface ChessPieceIconProps {
 export function ChessPieceIcon({ size, type, pieceset = DEFAULT_PIECESET }: ChessPieceIconProps) {
 
     // Sanitize the inputs.
-    size = sanitizeBoundedInteger(size, MIN_SQUARE_SIZE, MAX_SQUARE_SIZE, () => new IllegalArgument('ChessPieceIcon', 'size'));
+    const localSize = sanitizeBoundedInteger(size, MIN_SQUARE_SIZE, MAX_SQUARE_SIZE, () => new IllegalArgument('ChessPieceIcon', 'size'));
     const types = sanitizeChessPieceIconType(type, () => new IllegalArgument('ChessPieceIcon', 'type'));
     const piecesetData = piecesets[pieceset];
     if (!piecesetData) {
@@ -63,11 +63,11 @@ export function ChessPieceIcon({ size, type, pieceset = DEFAULT_PIECESET }: Ches
     }
 
     // Render the component.
-    const width = size * types.length;
-    const viewBox = `0 0 ${width} ${size}`;
+    const width = localSize * types.length;
+    const viewBox = `0 0 ${width} ${localSize}`;
     return (
-        <svg className="kokopu-chessPieceIcon" viewBox={viewBox} width={width} height={size}>
-            {types.map((t, i) => <image key={i} x={i * size} y={0} width={size} height={size} href={piecesetData[t]} />)}
+        <svg className="kokopu-chessPieceIcon" viewBox={viewBox} width={width} height={localSize}>
+            {types.map((t, i) => <image key={i} x={i * localSize} y={0} width={localSize} height={localSize} href={piecesetData[t]} />)}
         </svg>
     );
 }

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)}
             />
         );