kokopu-react 3.0.1 → 3.1.0

package/src/movetext/Movetext.tsx

@@ -1,14 +1,16 @@
-/* -------------------------------------------------------------------------- *
+/*!
+ * -------------------------------------------------------------------------- *
  *                                                                            *
- *    This file is part of Kokopu-React, a JavaScript chess library.          *
- *    Copyright (C) 2021-2023  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *    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>       *
  *                                                                            *
- *    This program is free software: you can redistribute it and/or           *
+ *    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.                     *
  *                                                                            *
- *    This program is distributed in the hope that it will be useful,         *
+ *    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.                     *
@@ -22,17 +24,17 @@
 
 import * as React from 'react';
 
-import { exception as kokopuException, Database, Game, pgnRead } from 'kokopu';
+import { Database, Game } from 'kokopu';
 
 import { IllegalArgument } from '../exception';
-import { i18n } from '../i18n';
 import { sanitizeString, sanitizeBoolean, sanitizeOptional } from '../sanitization';
 import { PieceSymbolMapping } from '../types';
 
-import { ChessboardProps } from '../chessboard/Chessboard';
-import { ErrorBox } from '../errorbox/ErrorBox';
+import { StaticBoardGraphicProps } from '../chessboard/BoardProperties';
+import { parseGame } from '../errorbox/parsing';
+import { firstNodeId as firstNodeIdImpl, previousNodeId as previousNodeIdImpl, nextNodeId as nextNodeIdImpl, lastNodeId as lastNodeIdImpl } from '../navigationboard/NavigationField';
 import { moveFormatter } from './moveFormatter';
-import { MovetextImpl, firstNodeIdImpl, previousNodeIdImpl, nextNodeIdImpl, lastNodeIdImpl } from './MovetextImpl';
+import { MovetextImpl } from './MovetextImpl';
 
 import './Movetext.css';
 
@@ -46,7 +48,7 @@ export type MoveSelectEventOrigin = 'key-first' | 'key-previous' | 'key-next' |
 export interface MovetextProps {
 
 	/**
-	 * Displayed position. Can be a [kokopu.Game](https://kokopu.yo35.org/docs/current/classes/Game.html) object,
+	 * Displayed game. Can be a [kokopu.Game](https://kokopu.yo35.org/docs/current/classes/Game.html) object,
 	 * a [kokopu.Database](https://kokopu.yo35.org/docs/current/classes/Database.html) object,
 	 * or a [PGN string](https://en.wikipedia.org/wiki/Portable_Game_Notation).
 	 */
@@ -62,14 +64,8 @@ export interface MovetextProps {
 	/**
 	 * Options applicable to the diagrams in the comments. See [Chessboard](#/Components/Chessboard) for more details about each option.
 	 */
-	diagramOptions: {
-		flipped?: ChessboardProps['flipped'],
-		squareSize?: ChessboardProps['squareSize'],
-		coordinateVisible?: ChessboardProps['coordinateVisible'],
-		turnVisible?: ChessboardProps['turnVisible'],
-		colorset?: ChessboardProps['colorset'],
-		pieceset?: ChessboardProps['pieceset'],
-		smallScreenLimits?: ChessboardProps['smallScreenLimits'],
+	diagramOptions: Partial<StaticBoardGraphicProps> & {
+		flipped?: boolean,
 	};
 
 	/**
@@ -88,7 +84,7 @@ export interface MovetextProps {
 	headerVisible: boolean;
 
 	/**
-	 * ID of the selected move (or `'start'` for the beginning of the main variation).
+	 * ID of the selected move (or `'start'`/`'end'` for the beginning/end of the main variation).
 	 * Use [kokopu.Node#id](https://kokopu.yo35.org/docs/current/classes/Node.html#id) to get the ID of a game move.
 	 */
 	selection?: string;
@@ -136,14 +132,9 @@ export class Movetext extends React.Component<MovetextProps> {
 	render() {
 
 		// Validate the game and game-index attributes.
-		const info = parseGame(this.props.game, this.props.gameIndex);
+		const info = parseGame(this.props.game, this.props.gameIndex, 'Movetext');
 		if (info.error) {
-			return (
-				<ErrorBox
-					title={i18n.INVALID_PGN_ERROR_TITLE} message={info.pgnException.message} text={info.pgnException.pgn}
-					errorIndex={info.pgnException.index} lineNumber={info.pgnException.lineNumber}
-				/>
-			);
+			return info.errorBox;
 		}
 
 		// Validate the appearance attributes.
@@ -185,96 +176,42 @@ export class Movetext extends React.Component<MovetextProps> {
 	 */
 	focus() {
 		const movetextImpl = this.implRef.current;
+		// istanbul ignore else
 		if (movetextImpl) {
 			movetextImpl.focus();
 		}
 	}
 
 	/**
-	 * Return the ID of the main variation in the given chess game.
-	 * If the given selection corresponds already at the main variation, `undefined` is returned.
-	 *
-	 * This corresponds to the operation performed when the user presses key "home" on a `Movetext` component.
-	 *
-	 * @param game - Considered chess game.
-	 * @param selection - ID of the selected move (or `'start'` for the beginning of the main variation).
-	 * @public
+	 * @deprecated
 	 */
+	// istanbul ignore next
 	static firstNodeId(game: Game, selection: string): string | undefined {
 		return firstNodeIdImpl(game, selection);
 	}
 
 	/**
-	 * Return the ID of the node immediately preceding the given selection in the given chess game.
-	 * If no such node exists, `undefined` is returned.
-	 *
-	 * This corresponds to the operation performed when the user presses key "arrow left" on a `Movetext` component.
-	 *
-	 * @param game - Considered chess game.
-	 * @param selection - ID of the selected move (or `'start'` for the beginning of the main variation).
-	 * @public
+	 * @deprecated
 	 */
+	// istanbul ignore next
 	static previousNodeId(game: Game, selection: string): string | undefined {
 		return previousNodeIdImpl(game, selection);
 	}
 
 	/**
-	 * Return the ID of the node immediately following the given selection in the given chess game.
-	 * If no such node exists, `undefined` is returned.
-	 *
-	 * This corresponds to the operation performed when the user presses key "arrow right" on a `Movetext` component.
-	 *
-	 * @param game - Considered chess game.
-	 * @param selection - ID of the selected move (or `'start'` for the beginning of the main variation).
-	 * @public
+	 * @deprecated
 	 */
+	// istanbul ignore next
 	static nextNodeId(game: Game, selection: string): string | undefined {
 		return nextNodeIdImpl(game, selection);
 	}
 
 	/**
-	 * Return the ID of the node at then end of the variation in which lies the given selection in the given chess game.
-	 * If the selection is already at the end its variation, `undefined` is returned.
-	 *
-	 * This corresponds to the operation performed when the user presses key "end" on a `Movetext` component.
-	 *
-	 * @param game - Considered chess game.
-	 * @param selection - ID of the selected move (or `'start'` for the beginning of the main variation).
-	 * @public
+	 * @deprecated
 	 */
+	// istanbul ignore next
 	static lastNodeId(game: Game, selection: string): string | undefined {
 		return lastNodeIdImpl(game, selection);
 	}
 
 }
-
-
-/**
- * Try to interpret the given object as a chess game.
- */
-function parseGame(game: Game | Database | string, gameIndex: number): { error: true, pgnException: kokopuException.InvalidPGN } | { error: false, game: Game } {
-	if (game instanceof Game) {
-		return { error: false, game: game };
-	}
-	else if (game instanceof Database || typeof game === 'string') {
-		if (!Number.isInteger(gameIndex) || gameIndex < 0) {
-			throw new IllegalArgument('Movetext', 'gameIndex');
-		}
-		try {
-			const result = game instanceof Database ? game.game(gameIndex) : pgnRead(game, gameIndex);
-			return { error: false, game: result };
-		}
-		catch (e) {
-			// istanbul ignore else
-			if (e instanceof kokopuException.InvalidPGN) {
-				return { error: true, pgnException: e };
-			}
-			else {
-				throw e;
-			}
-		}
-	}
-	else {
-		throw new IllegalArgument('Movetext', 'game');
-	}
-}

package/src/movetext/MovetextImpl.tsx

@@ -1,14 +1,16 @@
-/* -------------------------------------------------------------------------- *
+/*!
+ * -------------------------------------------------------------------------- *
  *                                                                            *
- *    This file is part of Kokopu-React, a JavaScript chess library.          *
- *    Copyright (C) 2021-2023  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *    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>       *
  *                                                                            *
- *    This program is free software: you can redistribute it and/or           *
+ *    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.                     *
  *                                                                            *
- *    This program is distributed in the hope that it will be useful,         *
+ *    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.                     *
@@ -27,7 +29,9 @@ import { Game, Color, GameResult, Node as GameNode, Variation, nagSymbol } from
 import { i18n } from '../i18n';
 import { fillPlaceholder } from '../util';
 
-import { Chessboard, ChessboardProps } from '../chessboard/Chessboard';
+import { StaticBoardGraphicProps } from '../chessboard/BoardProperties';
+import { Chessboard } from '../chessboard/Chessboard';
+import { NavigationField, firstNodeId, previousNodeId, nextNodeId, lastNodeId } from '../navigationboard/NavigationField';
 import { htmlFilter } from './htmlFilter';
 
 import './Movetext.css';
@@ -37,14 +41,8 @@ interface MovetextImplProps {
 
 	game: Game;
 
-	diagramOptions: {
-		flipped?: ChessboardProps['flipped'],
-		squareSize?: ChessboardProps['squareSize'],
-		coordinateVisible?: ChessboardProps['coordinateVisible'],
-		turnVisible?: ChessboardProps['turnVisible'],
-		colorset?: ChessboardProps['colorset'],
-		pieceset?: ChessboardProps['pieceset'],
-		smallScreenLimits?: ChessboardProps['smallScreenLimits'],
+	diagramOptions: Partial<StaticBoardGraphicProps> & {
+		flipped?: boolean,
 	};
 	moveFormatter: (notation: string) => React.ReactNode;
 	diagramVisible: boolean;
@@ -64,14 +62,14 @@ interface MovetextImplProps {
  */
 export class MovetextImpl extends React.Component<MovetextImplProps> {
 
-	private focusFieldRef: React.RefObject<HTMLAnchorElement> = React.createRef();
+	private navigationFieldRef: React.RefObject<NavigationField> = React.createRef();
 
 	render() {
 		return (
 			<div className="kokopu-movetext">
 				{this.renderHeaders()}
 				{this.renderBody()}
-				{this.renderFocusField()}
+				{this.renderNavigationField()}
 			</div>
 		);
 	}
@@ -153,15 +151,17 @@ export class MovetextImpl extends React.Component<MovetextImplProps> {
 		return <div className="kokopu-header-annotator" key="annotator">{filter(fillPlaceholder(i18n.ANNOTATED_BY, annotator))}</div>;
 	}
 
-	private renderFocusField() {
+	private renderNavigationField() {
 		if (this.props.interactionMode !== 'selectMove') {
 			return undefined;
 		}
-		return (
-			<div className="kokopu-focusFieldContainer">
-				<a className="kokopu-focusField" href="#" ref={this.focusFieldRef} onKeyDown={evt => this.handleKeyDownInFocusField(evt)}></a>
-			</div>
-		);
+		return <NavigationField ref={this.navigationFieldRef}
+			onFirstPressed={() => this.handleNavigationPressed(firstNodeId, 'key-first')}
+			onPreviousPressed={() => this.handleNavigationPressed(previousNodeId, 'key-previous')}
+			onNextPressed={() => this.handleNavigationPressed(nextNodeId, 'key-next')}
+			onLastPressed={() => this.handleNavigationPressed(lastNodeId, 'key-last')}
+			onExitPressed={() => this.handleExitPressed()}
+		/>;
 	}
 
 	private renderBody() {
@@ -313,15 +313,16 @@ export class MovetextImpl extends React.Component<MovetextImplProps> {
 			for (let textSegment of comment.split('[#]')) {
 				if (!isFirstTextSegment) {
 					const position = node instanceof Variation ? node.initialPosition() : node.position();
-					const diagram = <Chessboard position={position}
+					const diagram = <Chessboard
+						position={position}
 						squareMarkers={node.tag('csl')} arrowMarkers={node.tag('cal')} textMarkers={node.tag('ctl')}
 						flipped={this.props.diagramOptions.flipped}
 						squareSize={this.props.diagramOptions.squareSize}
 						coordinateVisible={this.props.diagramOptions.coordinateVisible}
 						turnVisible={this.props.diagramOptions.turnVisible}
-						smallScreenLimits={this.props.diagramOptions.smallScreenLimits}
 						colorset={this.props.diagramOptions.colorset}
 						pieceset={this.props.diagramOptions.pieceset}
+						smallScreenLimits={this.props.diagramOptions.smallScreenLimits}
 					/>;
 					segmentElements.push(<div className="kokopu-diagram" key={'diagram-' + (diagramIndex++)}>{diagram}</div>);
 				}
@@ -355,30 +356,15 @@ export class MovetextImpl extends React.Component<MovetextImplProps> {
 		return comment ? comment : undefined;
 	}
 
-	private handleKeyDownInFocusField(evt: React.KeyboardEvent<HTMLAnchorElement>) {
-		if (evt.key !== 'Home' && evt.key !== 'ArrowLeft' && evt.key !== 'ArrowRight' && evt.key !== 'End' && evt.key !== 'Escape') {
-			return;
-		}
-		evt.preventDefault();
-		if (!this.props.selection) {
-			return;
+	private handleNavigationPressed(transition: (game: Game, nodeId: string) => string | undefined, evtOrigin: 'key-first' | 'key-previous' | 'key-next' | 'key-last') {
+		if (this.props.selection) {
+			this.fireMoveSelected(transition(this.props.game, this.props.selection), evtOrigin);
 		}
-		if (evt.key === 'Home') {
-			this.fireMoveSelected(firstNodeIdImpl(this.props.game, this.props.selection), 'key-first');
-		}
-		else if (evt.key === 'ArrowLeft') {
-			this.fireMoveSelected(previousNodeIdImpl(this.props.game, this.props.selection), 'key-previous');
-		}
-		else if (evt.key === 'ArrowRight') {
-			this.fireMoveSelected(nextNodeIdImpl(this.props.game, this.props.selection), 'key-next');
-		}
-		else if (evt.key === 'End') {
-			this.fireMoveSelected(lastNodeIdImpl(this.props.game, this.props.selection), 'key-last');
-		}
-		else { // evt.key === 'Escape'
-			if (this.props.game.findById(this.props.selection)) {
-				this.fireMoveSelected(undefined, 'key-exit');
-			}
+	}
+
+	private handleExitPressed() {
+		if (this.props.selection && this.props.game.findById(this.props.selection)) {
+			this.fireMoveSelected(undefined, 'key-exit');
 		}
 	}
 
@@ -399,7 +385,8 @@ export class MovetextImpl extends React.Component<MovetextImplProps> {
 	 * Set the focus to the current component.
 	 */
 	focus(): void {
-		const target = this.focusFieldRef.current;
+		const target = this.navigationFieldRef.current;
+		// istanbul ignore else
 		if (target) {
 			target.focus();
 		}
@@ -408,78 +395,6 @@ export class MovetextImpl extends React.Component<MovetextImplProps> {
 }
 
 
-/**
- * See {@link Movetext.firstNodeId}.
- */
-export function firstNodeIdImpl(game: Game, selection: string): string | undefined {
-	if (!game.findById(selection)) {
-		return undefined;
-	}
-	return selection === 'start' ? undefined : 'start';
-}
-
-
-/**
- * See {@link Movetext.previousNodeId}.
- */
-export function previousNodeIdImpl(game: Game, selection: string): string | undefined {
-	let currentNode = game.findById(selection);
-	if (!currentNode) {
-		return undefined;
-	}
-	if (currentNode instanceof Variation) {
-		currentNode = currentNode.parentNode();
-		if (!currentNode) {
-			return undefined; // This case corresponds to the first variation being selected initially.
-		}
-	}
-	while (currentNode) {
-		const previousNode = currentNode.previous();
-		if (previousNode) {
-			return previousNode.id();
-		}
-		currentNode = currentNode.parentVariation().parentNode();
-	}
-	return 'start';
-}
-
-
-/**
- * See {@link Movetext.nextNodeId}.
- */
-export function nextNodeIdImpl(game: Game, selection: string): string | undefined {
-	const currentNode = game.findById(selection);
-	if (!currentNode) {
-		return undefined;
-	}
-	const nextNode = currentNode instanceof Variation ? currentNode.first() : currentNode.next();
-	return nextNode ? nextNode.id() : undefined;
-}
-
-
-/**
- * See {@link Movetext.lastNodeId}.
- */
-export function lastNodeIdImpl(game: Game, selection: string): string | undefined {
-	let currentNode = game.findById(selection);
-	if (!currentNode) {
-		return undefined;
-	}
-	currentNode = currentNode instanceof Variation ? currentNode.first() : currentNode.next();
-	if (!currentNode) { // Ensure that the input node is not already the last one.
-		return undefined;
-	}
-	let currentNodeNotNull = currentNode;
-	while (true) {
-		const nextNode = currentNodeNotNull.next();
-		if (!nextNode) {
-			return currentNodeNotNull.id();
-		}
-		currentNodeNotNull = nextNode;
-	}
-}
-
-
 /**
  * Example: `'hello world'` is turned into `'Hello world'`.
  */

package/src/movetext/fonts.css

@@ -1,14 +1,16 @@
-/* -------------------------------------------------------------------------- *
+/*!
+ * -------------------------------------------------------------------------- *
  *                                                                            *
- *    This file is part of Kokopu-React, a JavaScript chess library.          *
- *    Copyright (C) 2021-2023  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *    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>       *
  *                                                                            *
- *    This program is free software: you can redistribute it and/or           *
+ *    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.                     *
  *                                                                            *
- *    This program is distributed in the hope that it will be useful,         *
+ *    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.                     *

package/src/movetext/htmlFilter.tsx

@@ -1,14 +1,16 @@
-/* -------------------------------------------------------------------------- *
+/*!
+ * -------------------------------------------------------------------------- *
  *                                                                            *
- *    This file is part of Kokopu-React, a JavaScript chess library.          *
- *    Copyright (C) 2021-2023  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *    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>       *
  *                                                                            *
- *    This program is free software: you can redistribute it and/or           *
+ *    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.                     *
  *                                                                            *
- *    This program is distributed in the hope that it will be useful,         *
+ *    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.                     *

package/src/movetext/moveFormatter.tsx

@@ -1,14 +1,16 @@
-/* -------------------------------------------------------------------------- *
+/*!
+ * -------------------------------------------------------------------------- *
  *                                                                            *
- *    This file is part of Kokopu-React, a JavaScript chess library.          *
- *    Copyright (C) 2021-2023  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *    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>       *
  *                                                                            *
- *    This program is free software: you can redistribute it and/or           *
+ *    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.                     *
  *                                                                            *
- *    This program is distributed in the hope that it will be useful,         *
+ *    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.                     *