kokopu-react 3.1.0 → 3.2.0

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/{12_navigation_board → 13_navigation_board_graphic}/error.tsx

@@ -29,6 +29,6 @@ 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 */ } />,
+    <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/{12_navigation_board → 13_navigation_board_graphic}/theme.tsx

@@ -31,8 +31,8 @@ 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>,
+    <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"
+    }
 }

package/test/12_navigation_board.js

@@ -1,168 +0,0 @@
-/*!
- * -------------------------------------------------------------------------- *
- *                                                                            *
- *    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/>.                                         *
- *                                                                            *
- * -------------------------------------------------------------------------- */
-
-
-const { describeWithBrowser, itCustom, setSandbox, compareSandbox, takeScreenshot, compareScreenshot, itChecksScreenshots } = require('./common/graphic');
-const { By, Key } = require('selenium-webdriver');
-const test = require('unit.js');
-
-
-describeWithBrowser('Navigation board - Uncontrolled behavior', browserContext => {
-
-	itChecksScreenshots(browserContext, '12_navigation_board/uncontrolled', [
-		'initial state default',
-		'initial state at end',
-		'initial state at specific ID',
-		'initial state default with game index',
-		'initial state on null-move',
-	]);
-
-	function itCheckClickButton(itemIndex, label, buttons) {
-		itCustom(browserContext, '12_navigation_board/uncontrolled', itemIndex, label, async element => {
-			await setSandbox(browserContext, '');
-			for (let i = 0; i < buttons.length; ++i) {
-				const buttonElement = await element.findElement(By.xpath(`.//div[@title='${buttons[i].title}']`));
-				await buttonElement.click();
-				await compareSandbox(browserContext, buttons[i].expectedSandbox ?? '');
-				await takeScreenshot(browserContext, `${label} ${i}`, element);
-			}
-			for (let i = 0; i < buttons.length; ++i) {
-				await compareScreenshot(browserContext, `${label} ${i}`);
-			}
-		});
-	}
-
-	itCheckClickButton(0, 'regular flipping', [
-		{ title: 'Flip the board' },
-		{ title: 'Flip the board' },
-	]);
-
-	itCheckClickButton(2, 'regular navigation', [
-		{ title: 'Go to the next move' },
-		{ title: 'Go to the previous move' },
-		{ title: 'Go to the previous move' },
-		{ title: 'Go to the beginning of the game' },
-		{ title: 'Go to the end of the game' },
-		{ title: 'Flip the board' },
-	]);
-
-	itCheckClickButton(3, 'forbidden navigation at beginning', [
-		{ title: 'Go to the previous move' },
-		{ title: 'Go to the beginning of the game' },
-		{ title: 'Flip the board', expectedSandbox: 'Flip state changed: false' },
-	]);
-
-	itCheckClickButton(1, 'forbidden navigation at end', [
-		{ title: 'Go to the next move' },
-		{ title: 'Go to the end of the game' },
-		{ title: 'Flip the board' },
-	]);
-
-	function itCheckPressKey(itemIndex, label, keys) {
-		itCustom(browserContext, '12_navigation_board/uncontrolled', itemIndex, label, async element => {
-			await setSandbox(browserContext, '');
-			const focusFieldElements = await element.findElements(By.className('kokopu-focusField'));
-
-			test.value(focusFieldElements.length).is(1);
-			const focusFieldElement = focusFieldElements[0];
-
-			for (let i = 0; i < keys.length; ++i) {
-				await focusFieldElement.sendKeys(keys[i].code);
-				await compareSandbox(browserContext, keys[i].expectedSandbox ?? '');
-				await takeScreenshot(browserContext, `${label} ${i}`, element);
-			}
-			for (let i = 0; i < keys.length; ++i) {
-				await compareScreenshot(browserContext, `${label} ${i}`);
-			}
-		});
-	}
-
-	itCheckPressKey(4, 'navigation with keys', [
-		{ code: Key.ARROW_LEFT },
-		{ code: Key.HOME },
-		{ code: Key.ARROW_RIGHT },
-		{ code: Key.ESCAPE },
-		{ code: Key.END },
-	]);
-
-});
-
-
-describeWithBrowser('Navigation board - Controlled behavior', browserContext => {
-
-	itChecksScreenshots(browserContext, '12_navigation_board/controlled', [
-		'default',
-		'overriding initial node ID',
-		'invalid node ID',
-	]);
-
-	function itCheckClickButton(itemIndex, label, buttons) {
-		itCustom(browserContext, '12_navigation_board/controlled', itemIndex, label, async element => {
-			await setSandbox(browserContext, '');
-			for (let i = 0; i < buttons.length; ++i) {
-				const buttonElement = await element.findElement(By.xpath(`.//div[@title='${buttons[i].title}']`));
-				await buttonElement.click();
-				await compareSandbox(browserContext, buttons[i].expectedSandbox ?? '');
-				await takeScreenshot(browserContext, `${label} ${i}`, element);
-			}
-			for (let i = 0; i < buttons.length; ++i) {
-				await compareScreenshot(browserContext, `${label} ${i}`);
-			}
-		});
-	}
-
-	itCheckClickButton(0, 'regular navigation', [
-		{ title: 'Go to the beginning of the game', expectedSandbox: 'Node ID changed: start' },
-		{ title: 'Go to the previous move', expectedSandbox: 'Node ID changed: 16b' },
-		{ title: 'Go to the next move', expectedSandbox: 'Node ID changed: 17b' },
-		{ title: 'Go to the end of the game', expectedSandbox: 'Node ID changed: 28b' },
-	]);
-
-	itCheckClickButton(1, 'no callback defined', [
-		{ title: 'Go to the beginning of the game' },
-		{ title: 'Flip the board' },
-	]);
-
-	itCheckClickButton(2, 'forbidden navigation', [
-		{ title: 'Go to the previous move' },
-		{ title: 'Flip the board', expectedSandbox: 'Flip state changed: true' },
-	]);
-
-});
-
-
-describeWithBrowser('Navigation board graphic', browserContext => {
-
-	itChecksScreenshots(browserContext, '12_navigation_board/error', [
-		'pgn parsing error',
-		'wrong game type',
-	]);
-
-	itChecksScreenshots(browserContext, '12_navigation_board/theme', [
-		'small',
-		'large',
-		'custom 1',
-		'custom 2',
-	]);
-
-});