kokopu-react 3.0.2 → 3.1.0

package/src/movetext/Movetext.tsx

@@ -24,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';
 
@@ -48,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).
 	 */
@@ -64,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,
 	};
 
 	/**
@@ -90,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;
@@ -138,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.
@@ -187,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

@@ -29,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';
@@ -39,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;
@@ -66,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>
 		);
 	}
@@ -155,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() {
@@ -315,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>);
 				}
@@ -357,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');
 		}
 	}
 
@@ -401,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();
 		}
@@ -410,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/navigationboard/NavigationBoard.tsx

@@ -0,0 +1,231 @@
+/*!
+ * -------------------------------------------------------------------------- *
+ *                                                                            *
+ *    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 { Database, Game, Node as GameNode, Variation } from 'kokopu';
+
+import { sanitizeBoolean, sanitizeOptional, sanitizeString } from '../sanitization';
+
+import { DynamicBoardGraphicProps, defaultDynamicBoardProps } from '../chessboard/BoardProperties';
+import { Chessboard } from '../chessboard/Chessboard';
+import { parseGame } from '../errorbox/parsing';
+import { NavigationField, firstNodeId, previousNodeId, nextNodeId, lastNodeId } from '../navigationboard/NavigationField';
+import { NavigationToolbar } from './NavigationToolbar';
+
+
+export interface NavigationBoardProps extends DynamicBoardGraphicProps {
+
+	/**
+	 * 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).
+	 */
+	game: Game | Database | string;
+
+	/**
+	 * Index of the game to display (only if attribute `game` is a [kokopu.Database](https://kokopu.yo35.org/docs/current/classes/Database.html)
+	 * or a [PGN string](https://en.wikipedia.org/wiki/Portable_Game_Notation)): `0` for the first game of the database/PGN, `1` for the second one, etc.
+	 * If omitted, the first game of the database/PGN is displayed.
+	 */
+	gameIndex: number;
+
+	/**
+	 * ID of the move initially selected (or `'start'`/`'end'` for the beginning/end of the main variation) when the component is uncontrolled.
+	 * Use [kokopu.Node#id](https://kokopu.yo35.org/docs/current/classes/Node.html#id) to get the ID of a game move.
+	 * Ignored if the `nodeId` attribute is provided.
+	 */
+	initialNodeId: string;
+
+	/**
+	 * 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.
+	 * If provided (i.e. if the component is controlled), the attribute `onNodeIdChanged` must be provided as well.
+	 */
+	nodeId?: string;
+
+	/**
+	 * Callback invoked in controlled-component mode, when the user changes the selected move.
+	 *
+	 * @param nodeId - ID of the selected move (as returned by [kokopu.Node#id](https://kokopu.yo35.org/docs/current/classes/Node.html#id)),
+	 *                 or `'start'` for the beginning of the main variation.
+	 */
+	onNodeIdChanged?: (nodeId: string) => void;
+
+	/**
+	 * Whether the board is initially flipped (i.e. seen from Black's point of view) or not, when the flip state is uncontrolled.
+	 * Ignored if the `flipped` attribute is provided.
+	 */
+	initialFlipped: boolean;
+
+	/**
+	 * Whether the board is flipped (i.e. seen from Black's point of view) or not.
+	 * If provided (i.e. if the flip state is controlled), the attribute `onFlippedChanged` must be provided as well.
+	 */
+	flipped?: boolean;
+
+	/**
+	 * Callback invoked in controlled-flip-state mode, when the user flips the board.
+	 *
+	 * @param flipped - New flip state.
+	 */
+	onFlippedChanged?: (flipped: boolean) => void;
+
+	/**
+	 * Whether the flip button is visible or not in the toolbar.
+	 */
+	flipButtonVisible: boolean;
+}
+
+
+interface NavigationBoardState {
+	nodeIdAsUncontrolled: string;
+	flippedAsUncontrolled: boolean;
+}
+
+
+/**
+ * Component displaying the positions occurring in a chess game, with navigation buttons to browse these positions.
+ */
+export class NavigationBoard extends React.Component<NavigationBoardProps, NavigationBoardState> {
+
+	static defaultProps = {
+		...defaultDynamicBoardProps(),
+		game: new Game(),
+		gameIndex: 0,
+		initialNodeId: 'start',
+		initialFlipped: false,
+		flipButtonVisible: true,
+	};
+
+	private navigationFieldRef: React.RefObject<NavigationField> = React.createRef();
+
+	constructor(props: NavigationBoardProps) {
+		super(props);
+		this.state = {
+			nodeIdAsUncontrolled: sanitizeString(props.initialNodeId),
+			flippedAsUncontrolled: sanitizeBoolean(props.initialFlipped),
+		};
+	}
+
+	render() {
+
+		// Validate the game and game-index attributes.
+		const info = parseGame(this.props.game, this.props.gameIndex, 'NavigationBoard');
+		if (info.error) {
+			return info.errorBox;
+		}
+
+		// Fetch the current node/variation.
+		const currentNodeId = sanitizeOptional(this.props.nodeId, sanitizeString) ?? this.state.nodeIdAsUncontrolled;
+		const currentNode = info.game.findById(currentNodeId) ?? info.game.mainVariation();
+
+		// Flip state.
+		const flipped = sanitizeOptional(this.props.flipped, sanitizeBoolean) ?? this.state.flippedAsUncontrolled;
+
+		return (
+			<div className="kokopu-navigationBoard">
+				{this.renderBoard(info.game, currentNode, flipped)}
+				{this.renderNavigationField(info.game, currentNode.id())}
+			</div>
+		);
+	}
+
+	private renderBoard(game: Game, node: GameNode | Variation, flipped: boolean) {
+		const position = node instanceof GameNode ? node.positionBefore() : node.initialPosition();
+		const move = node instanceof GameNode ? node.notation() : undefined;
+		return <Chessboard
+			position={position} move={move} flipped={flipped}
+			squareMarkers={node.tag('csl')} arrowMarkers={node.tag('cal')} textMarkers={node.tag('ctl')}
+			squareSize={this.props.squareSize}
+			coordinateVisible={this.props.coordinateVisible}
+			turnVisible={this.props.turnVisible}
+			colorset={this.props.colorset}
+			pieceset={this.props.pieceset}
+			smallScreenLimits={this.props.smallScreenLimits}
+			moveArrowVisible={this.props.moveArrowVisible}
+			moveArrowColor={this.props.moveArrowColor}
+			animated={this.props.animated}
+			bottomComponent={({ squareSize }) => this.renderToolbar(game, node.id(), squareSize)}
+		/>;
+	}
+
+	private renderNavigationField(game: Game, currentNodeId: string) {
+		return <NavigationField ref={this.navigationFieldRef}
+			onFirstPressed={() => this.handleNavigationButtonClicked(firstNodeId(game, currentNodeId))}
+			onPreviousPressed={() => this.handleNavigationButtonClicked(previousNodeId(game, currentNodeId))}
+			onNextPressed={() => this.handleNavigationButtonClicked(nextNodeId(game, currentNodeId))}
+			onLastPressed={() => this.handleNavigationButtonClicked(lastNodeId(game, currentNodeId))}
+		/>;
+	}
+
+	private renderToolbar(game: Game, currentNodeId: string, squareSize: number) {
+		const flipButtonVisible = sanitizeBoolean(this.props.flipButtonVisible);
+		return <NavigationToolbar flipButtonVisible={flipButtonVisible} squareSize={squareSize}
+			onFirstClicked={() => this.handleNavigationButtonClicked(firstNodeId(game, currentNodeId))}
+			onPreviousClicked={() => this.handleNavigationButtonClicked(previousNodeId(game, currentNodeId))}
+			onNextClicked={() => this.handleNavigationButtonClicked(nextNodeId(game, currentNodeId))}
+			onLastClicked={() => this.handleNavigationButtonClicked(lastNodeId(game, currentNodeId))}
+			onFlipClicked={() => this.handleFlipButtonClicked()}
+		/>;
+	}
+
+	private handleNavigationButtonClicked(targetNodeId: string | undefined) {
+		this.focus();
+		if (targetNodeId === undefined) {
+			return;
+		}
+
+		if (this.props.nodeId === undefined) { // uncontrolled-component behavior
+			this.setState({ nodeIdAsUncontrolled: targetNodeId });
+		}
+		else if (this.props.onNodeIdChanged) { // controlled-component behavior
+			this.props.onNodeIdChanged(targetNodeId);
+		}
+	}
+
+	private handleFlipButtonClicked() {
+		this.focus();
+		if (this.props.flipped === undefined) { // uncontrolled flip state
+			this.setState({ flippedAsUncontrolled: !this.state.flippedAsUncontrolled });
+		}
+		else if (this.props.onFlippedChanged) { // controlled flip state
+			this.props.onFlippedChanged(!this.props.flipped);
+		}
+	}
+
+	/**
+	 * Set the focus to the current component.
+	 *
+	 * @public
+	 */
+	focus(): void {
+		const target = this.navigationFieldRef.current;
+		// istanbul ignore else
+		if (target) {
+			target.focus();
+		}
+	}
+
+}

package/src/navigationboard/NavigationField.css

@@ -0,0 +1,36 @@
+/*!
+ * -------------------------------------------------------------------------- *
+ *                                                                            *
+ *    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/>.                                         *
+ *                                                                            *
+ * -------------------------------------------------------------------------- */
+
+
+.kokopu-focusFieldContainer {
+	position: fixed;
+	bottom: 0px;
+	right: 0px;
+	width: 0px;
+	height: 0px;
+	overflow: hidden;
+}
+
+.kokopu-focusField {
+	position: absolute; /* see #1 */
+}