kokopu-react 3.0.2 → 3.2.0

package/test/graphic_test_app/12_navigation_board_base/controlled.tsx

@@ -0,0 +1,43 @@
+/*!
+ * -------------------------------------------------------------------------- *
+ *                                                                            *
+ *    Kokopu-React - A React-based library of chess-related components.       *
+ *    <https://www.npmjs.com/package/kokopu-react>                            *
+ *    Copyright (C) 2021-2024  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 { setSandbox, testApp } from '../common/test_app';
+import { NavigationBoard } from '../../../dist/lib/index';
+
+import pgn from '../common/games.pgn';
+
+function onNodeIdChanged(nodeId: string) {
+    setSandbox(`Node ID changed: ${nodeId}`);
+}
+
+function onFlippedChanged(flipped: boolean) {
+    setSandbox(`Flip state changed: ${flipped}`);
+}
+
+testApp([ /* eslint-disable react/jsx-key */
+    <NavigationBoard game={pgn} gameIndex={1} nodeId="17w" onNodeIdChanged={onNodeIdChanged} />,
+    <NavigationBoard game={pgn} initialNodeId="3w" nodeId="end" onFlippedChanged={onFlippedChanged} />,
+    <NavigationBoard game={pgn} gameIndex={3} nodeId="whatever..." onNodeIdChanged={onNodeIdChanged} flipped={false} onFlippedChanged={onFlippedChanged} />,
+]); /* eslint-enable react/jsx-key */

package/test/graphic_test_app/12_navigation_board_base/uncontrolled.tsx

@@ -0,0 +1,56 @@
+/*!
+ * -------------------------------------------------------------------------- *
+ *                                                                            *
+ *    Kokopu-React - A React-based library of chess-related components.       *
+ *    <https://www.npmjs.com/package/kokopu-react>                            *
+ *    Copyright (C) 2021-2024  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 { Game, Position, pgnRead } from 'kokopu';
+import { setSandbox, testApp } from '../common/test_app';
+import { NavigationBoard } from '../../../dist/lib/index';
+
+import pgn from '../common/games.pgn';
+
+const game = new Game();
+game.initialPosition(new Position('regular', 'r1bqkb1r/pppp1ppp/2n2n2/4p2Q/2B1P3/8/PPPP1PPP/RNB1K1NR w KQkq - 4 4'), 4);
+game.mainVariation().play('Qxf7#');
+game.result('1-0');
+
+const gameWithNullMove = new Game();
+gameWithNullMove.mainVariation().play('e4').play('e5').play('Nf3').play('--').play('Bc4');
+
+const database = pgnRead(pgn);
+
+function onNodeIdChanged(nodeId: string) { // Must NOT be invoked as the components are uncontrolled.
+    setSandbox(`Node ID changed: ${nodeId}`);
+}
+
+function onFlippedChanged(flipped: boolean) {
+    setSandbox(`Flip state changed: ${flipped}`);
+}
+
+testApp([ /* eslint-disable react/jsx-key */
+    <NavigationBoard game={game} initialFlipped />,
+    <NavigationBoard game={pgn} initialNodeId="end" initialFlipped flipped={false} />,
+    <NavigationBoard game={pgn} gameIndex={1} initialNodeId="17w" onNodeIdChanged={onNodeIdChanged} />,
+    <NavigationBoard game={database} gameIndex={3} onNodeIdChanged={onNodeIdChanged} flipped onFlippedChanged={onFlippedChanged} />,
+    <NavigationBoard game={gameWithNullMove} initialNodeId="2b" />,
+]); /* eslint-enable react/jsx-key */

package/test/graphic_test_app/13_navigation_board_graphic/additional_buttons.tsx

@@ -0,0 +1,49 @@
+/*!
+ * -------------------------------------------------------------------------- *
+ *                                                                            *
+ *    Kokopu-React - A React-based library of chess-related components.       *
+ *    <https://www.npmjs.com/package/kokopu-react>                            *
+ *    Copyright (C) 2021-2024  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 { setSandbox, testApp } from '../common/test_app';
+import { NavigationBoard } from '../../../dist/lib/index';
+
+import pgn from '../common/games.pgn';
+
+testApp([ /* eslint-disable react/jsx-key */
+    <NavigationBoard game={pgn} additionalButtons={{ iconPath: 'M 11 11 H 21 V 21 H 11 Z' }} />,
+    <NavigationBoard game={pgn} additionalButtons={[
+        { iconPath: 'M 11 11 H 21 V 21 H 11 Z', tooltip: 'Button 0', enabled: true },
+        { iconPath: 'M 9 16 L 16 9 L 23 16 L 16 23 Z', tooltip: 'Button A', onClick: () => setSandbox('Button A clicked') },
+        'spacer',
+        { iconPath: 'M 16 22 L 10 11 H 22 Z', tooltip: 'Button B', onClick: () => setSandbox('Button B clicked') },
+        'spacer',
+        'spacer',
+        { iconPath: 'M 16 10 L 22 21 H 10 Z', tooltip: 'Button C', enabled: false, onClick: () => setSandbox('Button C clicked') },
+    ]} />,
+    <NavigationBoard game={pgn} additionalButtons={
+        /* eslint-disable @typescript-eslint/no-explicit-any */ 'not a button nor a spacer' as any /* eslint-enable @typescript-eslint/no-explicit-any */
+    } />,
+    <NavigationBoard game={pgn} additionalButtons={[
+        { iconPath: 'M 11 11 H 21 V 21 H 11 Z' },
+        /* eslint-disable @typescript-eslint/no-explicit-any */ 'not a button nor a spacer' as any /* eslint-enable @typescript-eslint/no-explicit-any */,
+    ]} />,
+]); /* eslint-enable react/jsx-key */

package/test/graphic_test_app/13_navigation_board_graphic/error.tsx

@@ -0,0 +1,34 @@
+/*!
+ * -------------------------------------------------------------------------- *
+ *                                                                            *
+ *    Kokopu-React - A React-based library of chess-related components.       *
+ *    <https://www.npmjs.com/package/kokopu-react>                            *
+ *    Copyright (C) 2021-2024  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 { NavigationBoard } from '../../../dist/lib/index';
+
+import dummyPgn from '../common/dummy.pgn';
+
+testApp([ /* eslint-disable react/jsx-key */
+    <NavigationBoard game={dummyPgn} />,
+    <NavigationBoard game={ /* eslint-disable @typescript-eslint/no-explicit-any */ 42 as any /* eslint-enable @typescript-eslint/no-explicit-any */ } />,
+], 'width-600'); /* eslint-enable react/jsx-key */

package/test/graphic_test_app/13_navigation_board_graphic/theme.tsx

@@ -0,0 +1,38 @@
+/*!
+ * -------------------------------------------------------------------------- *
+ *                                                                            *
+ *    Kokopu-React - A React-based library of chess-related components.       *
+ *    <https://www.npmjs.com/package/kokopu-react>                            *
+ *    Copyright (C) 2021-2024  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 { Game } from 'kokopu';
+import { testApp } from '../common/test_app';
+import { NavigationBoard } from '../../../dist/lib/index';
+
+const game = new Game();
+game.mainVariation().play('e4');
+
+testApp([ /* eslint-disable react/jsx-key */
+    <NavigationBoard game={game} initialNodeId="end" squareSize={20} coordinateVisible={false} />,
+    <NavigationBoard game={game} initialNodeId="end" squareSize={53} colorset="scid" pieceset="celtic" flipButtonVisible={false} />,
+    <NavigationBoard game={game} initialNodeId="end" turnVisible={false} moveArrowColor="g" />,
+    <div style={{ color: 'red' }}><NavigationBoard game={game} initialNodeId="end" squareSize={48} moveArrowVisible={false} /></div>,
+]); /* eslint-enable react/jsx-key */

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

@@ -0,0 +1,73 @@
+/*!
+ * -------------------------------------------------------------------------- *
+ *                                                                            *
+ *    Kokopu-React - A React-based library of chess-related components.       *
+ *    <https://www.npmjs.com/package/kokopu-react>                            *
+ *    Copyright (C) 2021-2024  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 { setSandbox, testApp } from '../common/test_app';
+import { NavigationBoard } from '../../../dist/lib/index';
+
+import pgn from '../common/games.pgn';
+
+const HISTORY_0: string[] = [];
+const HISTORY_1: string[] = [];
+const HISTORY_2: string[] = [];
+
+interface NavigationBoardWithNodeIdControllerProps {
+    initialNodeId: string;
+    sandboxHistory: string[];
+}
+
+function NavigationBoardWithNodeIdController({ initialNodeId, sandboxHistory }: NavigationBoardWithNodeIdControllerProps) {
+
+    const [ nodeId, setNodeId ] = React.useState(initialNodeId);
+
+    return <NavigationBoard game={pgn} playButtonVisible nodeId={nodeId} onNodeIdChanged={newNodeId => {
+        sandboxHistory.push(`Node ID changed: ${newNodeId}`);
+        setSandbox(sandboxHistory.join('\n'));
+        setNodeId(newNodeId);
+    }} />;
+}
+
+function NavigationBoardWithIsPlayingController() {
+
+    const [ isPlaying, setIsPlaying ] = React.useState(false);
+
+    return <NavigationBoard game={pgn} playButtonVisible initialNodeId="5b" isPlaying={isPlaying} onIsPlayingChanged={newIsPlaying => {
+        setSandbox(`is-playing flag changed: ${newIsPlaying}`);
+        setIsPlaying(newIsPlaying);
+    }} />;
+}
+
+testApp([ /* eslint-disable react/jsx-key */
+    <NavigationBoard game={pgn} playButtonVisible nodeId="3w" onNodeIdChanged={nodeId => {
+        HISTORY_0.push(`Node ID changed: ${nodeId}`);
+        setSandbox(HISTORY_0.join('\n'));
+    }} />,
+    <NavigationBoardWithNodeIdController initialNodeId="3w" sandboxHistory={HISTORY_1} />,
+    <NavigationBoardWithNodeIdController initialNodeId="20w" sandboxHistory={HISTORY_2} />,
+    <NavigationBoard game={pgn} playButtonVisible initialNodeId="5b" isPlaying={false} onIsPlayingChanged={isPlaying => {
+        setSandbox(`is-playing flag changed: ${isPlaying}`);
+    }} />,
+    <NavigationBoardWithIsPlayingController />,
+    <NavigationBoard game={pgn} playButtonVisible initialNodeId="20b" isPlaying={true} />,
+]); /* eslint-enable react/jsx-key */

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

@@ -0,0 +1,34 @@
+/*!
+ * -------------------------------------------------------------------------- *
+ *                                                                            *
+ *    Kokopu-React - A React-based library of chess-related components.       *
+ *    <https://www.npmjs.com/package/kokopu-react>                            *
+ *    Copyright (C) 2021-2024  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 { NavigationBoard } from '../../../dist/lib/index';
+
+import pgn from '../common/games.pgn';
+
+testApp([ /* eslint-disable react/jsx-key */
+    <NavigationBoard game={pgn} playButtonVisible />,
+    <NavigationBoard game={pgn} playButtonVisible initialNodeId="20w" />,
+]); /* eslint-enable react/jsx-key */

package/test/graphic_test_app/common/decs.d.ts

@@ -23,6 +23,6 @@
 
 
 declare module '*.pgn' {
-	const pgnText: string;
-	export default pgnText;
+    const pgnText: string;
+    export default pgnText;
 }

package/test/graphic_test_app/common/test_app.css

@@ -25,34 +25,34 @@
 .test-item,
 .test-item-container,
 #test-app {
-	display: inline-block;
+    display: inline-block;
 }
 
 body {
-	background-color: lightgray;
+    background-color: lightgray;
 }
 
 .test-item-container {
-	margin: 2px;
-	padding: 3px;
-	background-color: white;
+    margin: 2px;
+    padding: 3px;
+    background-color: white;
 }
 
 .test-item-error {
-	display: inline-block;
-	border: solid 1px #999;
-	background-color: #eee;
-	font-family: sans-serif;
-	font-size: 12px;
-	padding: 0.5em;
+    display: inline-block;
+    border: solid 1px #999;
+    background-color: #eee;
+    font-family: sans-serif;
+    font-size: 12px;
+    padding: 0.5em;
 }
 
 #sandbox {
-	padding: 3px;
-	background-color: lightgoldenrodyellow;
-	height: 100px;
+    padding: 3px;
+    background-color: lightgoldenrodyellow;
+    height: 100px;
 }
 
 .width-600 .test-item {
-	width: 600px;
+    width: 600px;
 }

package/test/graphic_test_app/common/test_app.tsx

@@ -30,54 +30,54 @@ import './test_app.css';
 
 // This global variable allows to freeze animations in an intermediate stage.
 declare global {
-	interface Window {
-		'__kokopu_debug_freeze_motion': number;
-	}
+    interface Window {
+        '__kokopu_debug_freeze_motion': number;
+    }
 }
 
 
 interface TestItemContainerProps {
-	index: number;
-	children: React.ReactNode;
+    index: number;
+    children: React.ReactNode;
 }
 
 
 interface TestItemContainerState {
-	hasError: boolean;
+    hasError: boolean;
 }
 
 
 class TestItemContainer extends React.Component<TestItemContainerProps, TestItemContainerState> {
 
-	constructor(props: TestItemContainerProps) {
-		super(props);
-		this.state = { hasError: false };
-	}
-
-	static getDerivedStateFromError() {
-		return { hasError: true };
-	}
-
-	render() {
-		return (
-			<div className="test-item-container">
-				<div className="test-item" id={'test-item-' + this.props.index}>{this.renderContent()}</div>
-			</div>
-		);
-	}
-
-	private renderContent() {
-		return this.state.hasError ? <span className="test-item-error">Exception thrown</span> : this.props.children;
-	}
+    constructor(props: TestItemContainerProps) {
+        super(props);
+        this.state = { hasError: false };
+    }
+
+    static getDerivedStateFromError() {
+        return { hasError: true };
+    }
+
+    render() {
+        return (
+            <div className="test-item-container">
+                <div className="test-item" id={'test-item-' + this.props.index}>{this.renderContent()}</div>
+            </div>
+        );
+    }
+
+    private renderContent() {
+        return this.state.hasError ? <span className="test-item-error">Exception thrown</span> : this.props.children;
+    }
 }
 
 
 function flattenMultiElements(elements: React.ReactNode[], containerClassName: string[]) {
-	const items = [];
-	for (let i = 0; i < elements.length; ++i) {
-		items.push(<TestItemContainer key={i} index={i}>{elements[i]}</TestItemContainer>);
-	}
-	return <div className={containerClassName.join(' ')}>{items}</div>;
+    const items = [];
+    for (let i = 0; i < elements.length; ++i) {
+        items.push(<TestItemContainer key={i} index={i}>{elements[i]}</TestItemContainer>);
+    }
+    return <div className={containerClassName.join(' ')}>{items}</div>;
 }
 
 
@@ -86,20 +86,20 @@ function flattenMultiElements(elements: React.ReactNode[], containerClassName: s
  */
 export function testApp(elements: React.ReactNode[], ...containerClassName: string[]) {
 
-	// Create the main anchor.
-	const anchor = document.createElement('div');
-	anchor.id = 'test-app';
-	document.body.appendChild(anchor);
+    // Create the main anchor.
+    const anchor = document.createElement('div');
+    anchor.id = 'test-app';
+    document.body.appendChild(anchor);
 
-	// Render the content.
-	const root = createRoot(anchor);
-	const content = flattenMultiElements(elements, containerClassName);
-	root.render(content);
+    // Render the content.
+    const root = createRoot(anchor);
+    const content = flattenMultiElements(elements, containerClassName);
+    root.render(content);
 
-	// Append a text area
-	const sandbox = document.createElement('pre');
-	sandbox.id = 'sandbox';
-	document.body.appendChild(sandbox);
+    // Append a text area
+    const sandbox = document.createElement('pre');
+    sandbox.id = 'sandbox';
+    document.body.appendChild(sandbox);
 }
 
 
@@ -107,9 +107,9 @@ export function testApp(elements: React.ReactNode[], ...containerClassName: stri
  * Set the content of the sandbox.
  */
 export function setSandbox(text: string) {
-	const sandbox = document.getElementById('sandbox');
-	if (sandbox === null) {
-		throw new Error('Cannot locate the sandbox...');
-	}
-	sandbox.innerText = text;
+    const sandbox = document.getElementById('sandbox');
+    if (sandbox === null) {
+        throw new Error('Cannot locate the sandbox...');
+    }
+    sandbox.innerText = text;
 }

package/tsconfig.json

@@ -1,15 +1,15 @@
 {
-	"include": [ "./src/**/*" ],
-	"compilerOptions": {
-		"sourceMap": true,
-		"declaration": true,
-		"module": "es2020",
-		"target": "es2020",
-		"jsx": "react",
-		"types": [],
-		"allowJs": false,
-		"strict": true,
-		"forceConsistentCasingInFileNames": true,
-		"moduleResolution": "node"
-	}
+    "include": [ "./src/**/*" ],
+    "compilerOptions": {
+        "sourceMap": true,
+        "declaration": true,
+        "module": "es2020",
+        "target": "es2020",
+        "jsx": "react",
+        "types": [],
+        "allowJs": false,
+        "strict": true,
+        "forceConsistentCasingInFileNames": true,
+        "moduleResolution": "node"
+    }
 }