kokopu-react 3.0.2 → 3.1.0

package/doc_src/demo/PageNavigationBoardUncontrolledVsControlled.tsx

@@ -0,0 +1,114 @@
+/*!
+ * -------------------------------------------------------------------------- *
+ *                                                                            *
+ *    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 { NavigationBoard } from '../../src/index';
+import { buildComponentDemoCode } from './util';
+
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+
+import './demo.css';
+import pgn from './game-3.pgn';
+
+
+interface PageState {
+	nodeId: string;
+}
+
+
+export default class Page extends React.Component<object, PageState> {
+
+	constructor(props: object) {
+		super(props);
+		this.state = {
+			nodeId: '9b',
+		};
+	}
+
+	render() {
+		return (
+			<Stack spacing={2} mt={2}>
+				{this.renderControls()}
+				{this.renderNavigationBoards()}
+				{this.renderCode()}
+			</Stack>
+		);
+	}
+
+	private renderControls() {
+		return (<>
+			<Typography>
+				In uncontrolled mode, the current node ID (aka. the current move) of the <code>NavigationBoard</code> component is managed internally.
+				No additional code is needed to make the navigation buttons work.
+			</Typography>
+			<Typography>
+				In controlled mode, the current node ID is defined by the <code>nodeId</code> attribute, and a callback must be set
+				on the <code>onNodeIdChanged</code> attribute to respond to clicks on the navigation buttons.
+				This mode requires more code, as a state variable holding the current node ID must be explicitely managed out of the component,
+				but it allows to define more complex behaviors (e.g. synchronizing the node ID on the <code>NavigationBoard</code> with another component).
+			</Typography>
+			<Typography>
+				Whether the component is in uncontrolled mode or controlled mode depends on the presence of the <code>nodeId</code> attribute.
+			</Typography>
+		</>);
+	}
+
+	private renderNavigationBoards() {
+		return (
+			<Box display="flex" alignItems="top" justifyContent="space-around">
+				<Box>
+					<NavigationBoard game={pgn} animated 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 })} />
+					<Typography mt={2} textAlign="center">Controlled</Typography>
+					<Typography textAlign="center">{`Current node ID: ${this.state.nodeId}`}</Typography>
+				</Box>
+			</Box>
+		);
+	}
+
+	private renderCode() {
+
+		const uncontrolledAttributes: string[] = [];
+		uncontrolledAttributes.push('game={pgn}');
+		uncontrolledAttributes.push('animated');
+		uncontrolledAttributes.push('initialNodeId="9b"');
+
+		const controlledAttributes: string[] = [];
+		controlledAttributes.push('game={pgn}');
+		controlledAttributes.push('animated');
+		controlledAttributes.push(`nodeId="${this.state.nodeId}"`);
+		controlledAttributes.push('onNodeIdChanged={nodeId => handleNodeIdChanged(nodeId)}');
+
+		const pgnDeclaration = 'const pgn = `\n' + pgn.trim() + '`;\n\n';
+		return <pre className="kokopu-demoCode">{pgnDeclaration + '// Uncontrolled\n' + buildComponentDemoCode('NavigationBoard', uncontrolledAttributes)
+			+ '\n\n// Controlled\n' + buildComponentDemoCode('NavigationBoard', controlledAttributes)}</pre>;
+	}
+
+}

package/doc_src/demo/game-3.pgn

@@ -0,0 +1,10 @@
+[Event "Television Exhibition"]
+[Site "London ENG"]
+[Date "2014.01.23"]
+[Round "?"]
+[White "Bill Gates"]
+[Black "Magnus Carlsen"]
+[Result "0-1"]
+
+1.e4 Nc6 2.Nf3 d5 3.Bd3 Nf6 4.exd5 Qxd5 5.Nc3 Qh5 6.O-O Bg4
+7.h3 Ne5 8.hxg4 Nfxg4 9.Nxe5 Qh2# 0-1

package/doc_src/examples/Movetext.md

@@ -1,5 +1,5 @@
 ```js
-let pgn = `
+const pgn = `
 [Event "Television Exhibition"]
 [Site "London ENG"]
 [Date "2014.01.23"]

package/doc_src/examples/NavigationBoard.md

@@ -0,0 +1,15 @@
+```js
+const pgn = `
+[Event "Television Exhibition"]
+[Site "London ENG"]
+[Date "2014.01.23"]
+[Round "?"]
+[White "Bill Gates"]
+[Black "Magnus Carlsen"]
+[Result "0-1"]
+
+1.e4 Nc6 2.Nf3 d5 3.Bd3 Nf6 4.exd5 Qxd5 5.Nc3 Qh5 6.O-O Bg4
+7.h3 Ne5 8.hxg4 Nfxg4 9.Nxe5 Qh2# 0-1`;
+
+<NavigationBoard game={pgn} initialNodeId="end" />
+```

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "kokopu-react",
-	"version": "3.0.2",
+	"version": "3.1.0",
 	"description": "A React-based library to create and display chessboard and chess-related components.",
 	"keywords": [
 		"chess",
@@ -36,33 +36,33 @@
 		"tsconfig.json"
 	],
 	"peerDependencies": {
-		"kokopu": "^4.3.0",
+		"kokopu": "^4.9.1",
 		"react": "17.x.x || 18.x.x"
 	},
 	"dependencies": {
 		"htmlparser2": "^9.1.0"
 	},
 	"devDependencies": {
-		"@babel/preset-env": "^7.23.8",
+		"@babel/preset-env": "^7.24.0",
 		"@babel/preset-react": "^7.23.3",
-		"@emotion/react": "^11.11.3",
+		"@emotion/react": "^11.11.4",
 		"@emotion/styled": "^11.11.0",
-		"@mui/material": "^5.15.5",
-		"@types/react": "^18.2.48",
-		"@types/react-dom": "^18.2.18",
-		"@typescript-eslint/eslint-plugin": "^6.19.0",
-		"@typescript-eslint/parser": "^6.19.0",
+		"@mui/material": "^5.15.11",
+		"@types/react": "^18.2.61",
+		"@types/react-dom": "^18.2.19",
+		"@typescript-eslint/eslint-plugin": "^7.1.0",
+		"@typescript-eslint/parser": "^7.1.0",
 		"babel-loader": "^9.1.3",
 		"copy-webpack-plugin": "^12.0.2",
 		"copyfiles": "^2.4.1",
 		"coverage-istanbul-loader": "^3.0.5",
-		"css-loader": "^6.9.1",
-		"eslint": "^8.56.0",
+		"css-loader": "^6.10.0",
+		"eslint": "^8.57.0",
 		"eslint-plugin-react": "^7.33.2",
 		"html-webpack-plugin": "^5.6.0",
 		"img-diff-js": "^0.5.2",
-		"kokopu": "^4.8.1",
-		"mocha": "^10.2.0",
+		"kokopu": "^4.9.1",
+		"mocha": "^10.3.0",
 		"null-loader": "^4.0.1",
 		"nyc": "^15.1.0",
 		"react": "^18.2.0",
@@ -70,13 +70,13 @@
 		"react-dom": "^18.2.0",
 		"react-styleguidist": "^13.1.2",
 		"rimraf": "^5.0.5",
-		"selenium-webdriver": "^4.16.0",
-		"ssh2-sftp-client": "^10.0.0",
+		"selenium-webdriver": "^4.18.1",
+		"ssh2-sftp-client": "^10.0.3",
 		"style-loader": "^3.3.4",
 		"ts-loader": "^9.5.1",
 		"typescript": "^5.3.3",
 		"unit.js": "^2.1.1",
-		"webpack": "^5.89.0",
+		"webpack": "^5.90.3",
 		"webpack-cli": "^5.1.4"
 	},
 	"scripts": {

package/scripts/doc.styleguide.config.js

@@ -39,8 +39,16 @@ fs.mkdirSync(path.resolve(__dirname, tmpDir), { recursive: true });
 // -------------------------------
 
 const componentSectionTitle = 'Components';
-const components = [ 'errorbox/ErrorBox', 'icons/SquareMarkerIcon', 'icons/TextMarkerIcon', 'icons/ArrowMarkerIcon', 'icons/ChessPieceIcon',
-	'chessboard/Chessboard', 'movetext/Movetext' ];
+const components = [
+	'errorbox/ErrorBox',
+	'icons/SquareMarkerIcon',
+	'icons/TextMarkerIcon',
+	'icons/ArrowMarkerIcon',
+	'icons/ChessPieceIcon',
+	'chessboard/Chessboard',
+	'navigationboard/NavigationBoard',
+	'movetext/Movetext',
+];
 
 
 // Demo section configuration
@@ -52,6 +60,8 @@ const demoPages = [
 	{ id: 'ChessboardInteraction', title: 'Chessboard - Interactions' },
 	{ id: 'ChessboardMove', title: 'Chessboard - Display moves' },
 	{ id: 'ChessboardSmallScreens', title: 'Chessboard - Small screens' },
+	{ id: 'NavigationBoardBase', title: 'NavigationBoard - Basic features' },
+	{ id: 'NavigationBoardUncontrolledVsControlled', title: 'NavigationBoard - Uncontrolled vs. controlled' },
 	{ id: 'MovetextBase', title: 'Movetext - Basic features' },
 	{ id: 'MovetextInteraction', title: 'Movetext - Interactions' },
 ];

package/scripts/docker-compose.yml

@@ -2,7 +2,7 @@ version: "3.7"
 
 services:
   web-client:
-    image: selenium/standalone-firefox:4.16.1-20231219 # https://github.com/SeleniumHQ/docker-selenium to get the latest version
+    image: selenium/standalone-firefox:4.18.1-20240224 # https://github.com/SeleniumHQ/docker-selenium to get the latest version
     shm_size: '2gb'
     ports:
       - 4444:4444 # http://localhost:4444/ (driver)

package/src/chessboard/BoardProperties.ts

@@ -0,0 +1,131 @@
+/*!
+ * -------------------------------------------------------------------------- *
+ *                                                                            *
+ *    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 { AnnotationColor } from '../types';
+import { DEFAULT_COLORSET } from './colorsets';
+import { DEFAULT_PIECESET } from './piecesets';
+
+
+/**
+ * Define a limit applicable to the parameters of a {@link Chessboard} on small-screen devices.
+ */
+export interface SmallScreenLimit {
+	width: number;
+	squareSize?: number;
+	coordinateVisible?: boolean;
+	turnVisible?: boolean;
+}
+
+
+/**
+ * Properties in relation to the appearance of a `Chessboard` component (excluding properties related to move display).
+ */
+export interface StaticBoardGraphicProps {
+
+	/**
+	 * Size of the squares (in pixels). Must be an integer between `Chessboard.minSquareSize()` and `Chessboard.maxSquareSize()`.
+	 */
+	squareSize: number;
+
+	/**
+	 * Whether the row and column coordinates are visible or not.
+	 */
+	coordinateVisible: boolean;
+
+	/**
+	 * Whether the turn flag is visible or not.
+	 */
+	turnVisible: boolean;
+
+	/**
+	 * Color theme ID. Must be a property of `Chessboard.colorsets()`.
+	 */
+	colorset: string;
+
+	/**
+	 * Piece theme ID. Must be a property of `Chessboard.piecesets()`.
+	 */
+	pieceset: string;
+
+	/**
+	 * Limits applicable on small-screen devices. For instance, if set to
+	 * ```
+	 * [
+	 *   { width: 768, squareSize: 40 },
+	 *   { width: 375, squareSize: 24, coordinateVisible: false }
+	 * ]
+	 * ```
+	 * then on screens with resolution ≤768 pixels, the square size will be limited to 40 (whatever the value
+	 * of the `squareSize` attribute); in addition, on screens with resolution ≤375 pixels, the square size
+	 * will be limited to 24 and the row and column coordinates will always be hidden (whatever the value of the
+	 * `coordinateVisible` attribute).
+	 */
+	smallScreenLimits?: SmallScreenLimit[];
+}
+
+
+/**
+ * Properties in relation to the appearance of a `Chessboard` component (including properties related to move display).
+ */
+export interface DynamicBoardGraphicProps extends StaticBoardGraphicProps {
+
+	/**
+	 * Whether moves are highlighted with an arrow or not.
+	 */
+	moveArrowVisible: boolean;
+
+	/**
+	 * Color of the move arrow.
+	 */
+	moveArrowColor: AnnotationColor;
+
+	/**
+	 * Whether moves are animated or not.
+	 */
+	animated: boolean;
+}
+
+
+export const DEFAULT_SQUARE_SIZE = 40;
+
+
+export function defaultStaticBoardProps(): StaticBoardGraphicProps {
+	return {
+		squareSize: DEFAULT_SQUARE_SIZE,
+		coordinateVisible: true,
+		turnVisible: true,
+		colorset: DEFAULT_COLORSET,
+		pieceset: DEFAULT_PIECESET,
+	};
+}
+
+
+export function defaultDynamicBoardProps(): DynamicBoardGraphicProps {
+	return {
+		...defaultStaticBoardProps(),
+		moveArrowVisible: true,
+		moveArrowColor: 'b',
+		animated: false,
+	};
+}