8773896268

Committed 21 Apr 2024 01:15PM UTC coverage: 95.659% (+0.01%) from 95.647%

Build # 8773896268

Build Type

push

github

Committed by

yo35

Commit Message

Make disabled button less visible

Run Details

706 of 747 branches covered (94.51%)

Branch coverage included in aggregate %.

12 of 12 new or added lines in 1 file covered. (100.0%)

1 existing line in 1 file now uncovered.

1057 of 1096 relevant lines covered (96.44%)

1310.88 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

97.87

/src/navigationboard/NavigationBoard.tsx

/*!
 * -------------------------------------------------------------------------- *
 *                                                                            *
 *    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 { IllegalArgument } from '../exception';
import { i18n } from '../i18n';
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 { GO_FIRST_ICON_PATH, GO_PREVIOUS_ICON_PATH, GO_NEXT_ICON_PATH, GO_LAST_ICON_PATH, FLIP_ICON_PATH } from './iconPaths';
import { NavigationButton, NavigationButtonList, isNavigationButton } from './NavigationButton';
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;

    /**
     * Additional buttons to be added to the toolbar.
     */
    additionalButtons: NavigationButton | NavigationButtonList;
}


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,
        additionalButtons: [],
    };

    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, squareSize)}
        />;
    }

    private renderNavigationField(game: Game, currentNodeId: string) {
        return <NavigationField ref={this.navigationFieldRef}
            onFirstPressed={() => this.handleNavClicked(firstNodeId(game, currentNodeId))}
            onPreviousPressed={() => this.handleNavClicked(previousNodeId(game, currentNodeId))}
            onNextPressed={() => this.handleNavClicked(nextNodeId(game, currentNodeId))}
            onLastPressed={() => this.handleNavClicked(lastNodeId(game, currentNodeId))}
        />;
    }

    private renderToolbar(game: Game, node: GameNode | Variation, squareSize: number) {
        const buttons: NavigationButtonList = [];

        // Core navigation buttons
        const currentNodeId = node.id();
        const hasPrevious = currentNodeId !== 'start';
        const hasNext = (node instanceof Variation ? node.first() : node.next()) !== undefined;
        buttons.push({ iconPath: GO_FIRST_ICON_PATH, tooltip: i18n.TOOLTIP_GO_FIRST, enabled: hasPrevious, onClick: () => this.handleNavClicked(firstNodeId(game, currentNodeId)) });
        buttons.push({ iconPath: GO_PREVIOUS_ICON_PATH, tooltip: i18n.TOOLTIP_GO_PREVIOUS, enabled: hasPrevious, onClick: () => this.handleNavClicked(previousNodeId(game, currentNodeId)) });
        buttons.push({ iconPath: GO_NEXT_ICON_PATH, tooltip: i18n.TOOLTIP_GO_NEXT, enabled: hasNext, onClick: () => this.handleNavClicked(nextNodeId(game, currentNodeId)) });
        buttons.push({ iconPath: GO_LAST_ICON_PATH, tooltip: i18n.TOOLTIP_GO_LAST, enabled: hasNext, onClick: () => this.handleNavClicked(lastNodeId(game, currentNodeId)) });
        buttons.push('spacer');
        if (this.props.flipButtonVisible) {
            buttons.push({ iconPath: FLIP_ICON_PATH, tooltip: i18n.TOOLTIP_FLIP, onClick: () => this.handleFlipButtonClicked() });
        }
        buttons.push('spacer');

        // Additional buttons.
        const additionalButtons = sanitizeNavigationButtonList(this.props.additionalButtons, () => new IllegalArgument('NavigationBoard', 'additionalButtons'));
        for (const button of additionalButtons) {
            buttons.push(button);
        }

        return <NavigationToolbar squareSize={squareSize} buttons={buttons} />;
    }

    private handleNavClicked(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();
        }
    }

}


/**
 * Sanitization method for the additional button parameter.
 */
function sanitizeNavigationButtonList(type: NavigationButton | NavigationButtonList, exceptionBuilder: () => IllegalArgument): NavigationButtonList {
    if (Array.isArray(type)) {
        return type.map(t => {
            if (t !== 'spacer' && !isNavigationButton(t)) {
                throw exceptionBuilder();
            }
            return t;
        });
    }
    else if (isNavigationButton(type)) {
        return [ type ];
    }
    else {
        throw exceptionBuilder();
    }
}

1	/*!
2	* -------------------------------------------------------------------------- *
3	* *
4	* Kokopu-React - A React-based library of chess-related components. *
5	* <https://www.npmjs.com/package/kokopu-react> *
6	* Copyright (C) 2021-2024 Yoann Le Montagner <yo35 -at- melix.net> *
7	* *
8	* Kokopu-React is free software: you can redistribute it and/or *
9	* modify it under the terms of the GNU Lesser General Public License *
10	* as published by the Free Software Foundation, either version 3 of *
11	* the License, or (at your option) any later version. *
12	* *
13	* Kokopu-React is distributed in the hope that it will be useful, *
14	* but WITHOUT ANY WARRANTY; without even the implied warranty of *
15	* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the *
16	* GNU Lesser General Public License for more details. *
17	* *
18	* You should have received a copy of the GNU Lesser General *
19	* Public License along with this program. If not, see *
20	* <http://www.gnu.org/licenses/>. *
21	* *
22	* -------------------------------------------------------------------------- */
23
24
25	import * as React from 'react';
26
27	import { Database, Game, Node as GameNode, Variation } from 'kokopu';
28
29	import { IllegalArgument } from '../exception';
30	import { i18n } from '../i18n';
31	import { sanitizeBoolean, sanitizeOptional, sanitizeString } from '../sanitization';
32
33	import { DynamicBoardGraphicProps, defaultDynamicBoardProps } from '../chessboard/BoardProperties';
34	import { Chessboard } from '../chessboard/Chessboard';
35	import { parseGame } from '../errorbox/parsing';
36	import { NavigationField, firstNodeId, previousNodeId, nextNodeId, lastNodeId } from '../navigationboard/NavigationField';
37	import { GO_FIRST_ICON_PATH, GO_PREVIOUS_ICON_PATH, GO_NEXT_ICON_PATH, GO_LAST_ICON_PATH, FLIP_ICON_PATH } from './iconPaths';
38	import { NavigationButton, NavigationButtonList, isNavigationButton } from './NavigationButton';
39	import { NavigationToolbar } from './NavigationToolbar';
40
41
42	export interface NavigationBoardProps extends DynamicBoardGraphicProps {
43
44	/**
45	* Displayed game. Can be a [kokopu.Game](https://kokopu.yo35.org/docs/current/classes/Game.html) object,
46	* a [kokopu.Database](https://kokopu.yo35.org/docs/current/classes/Database.html) object,
47	* or a [PGN string](https://en.wikipedia.org/wiki/Portable_Game_Notation).
48	*/
49	game: Game \| Database \| string;
50
51	/**
52	* Index of the game to display (only if attribute `game` is a [kokopu.Database](https://kokopu.yo35.org/docs/current/classes/Database.html)
53	* 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.
54	* If omitted, the first game of the database/PGN is displayed.
55	*/
56	gameIndex: number;
57
58	/**
59	* ID of the move initially selected (or `'start'`/`'end'` for the beginning/end of the main variation) when the component is uncontrolled.
60	* Use [kokopu.Node#id](https://kokopu.yo35.org/docs/current/classes/Node.html#id) to get the ID of a game move.
61	* Ignored if the `nodeId` attribute is provided.
62	*/
63	initialNodeId: string;
64
65	/**
66	* ID of the selected move (or `'start'`/`'end'` for the beginning/end of the main variation).
67	* Use [kokopu.Node#id](https://kokopu.yo35.org/docs/current/classes/Node.html#id) to get the ID of a game move.
68	* If provided (i.e. if the component is controlled), the attribute `onNodeIdChanged` must be provided as well.
69	*/
70	nodeId?: string;
71
72	/**
73	* Callback invoked in controlled-component mode, when the user changes the selected move.
74	*
75	* @param nodeId - ID of the selected move (as returned by [kokopu.Node#id](https://kokopu.yo35.org/docs/current/classes/Node.html#id)),
76	* or `'start'` for the beginning of the main variation.
77	*/
78	onNodeIdChanged?: (nodeId: string) => void;
79
80	/**
81	* Whether the board is initially flipped (i.e. seen from Black's point of view) or not, when the flip state is uncontrolled.
82	* Ignored if the `flipped` attribute is provided.
83	*/
84	initialFlipped: boolean;
85
86	/**
87	* Whether the board is flipped (i.e. seen from Black's point of view) or not.
88	* If provided (i.e. if the flip state is controlled), the attribute `onFlippedChanged` must be provided as well.
89	*/
90	flipped?: boolean;
91
92	/**
93	* Callback invoked in controlled-flip-state mode, when the user flips the board.
94	*
95	* @param flipped - New flip state.
96	*/
97	onFlippedChanged?: (flipped: boolean) => void;
98
99	/**
100	* Whether the flip button is visible or not in the toolbar.
101	*/
102	flipButtonVisible: boolean;
103
104	/**
105	* Additional buttons to be added to the toolbar.
106	*/
107	additionalButtons: NavigationButton \| NavigationButtonList;
108	}
109
110
111	interface NavigationBoardState {
112	nodeIdAsUncontrolled: string;
113	flippedAsUncontrolled: boolean;
114	}
115
116
117	/**
118	* Component displaying the positions occurring in a chess game, with navigation buttons to browse these positions.
119	*/
120	export class NavigationBoard extends React.Component<NavigationBoardProps, NavigationBoardState> {
121
122	static defaultProps = {	35✔
123	...defaultDynamicBoardProps(),
124	game: new Game(),
125	gameIndex: 0,
126	initialNodeId: 'start',
127	initialFlipped: false,
128	flipButtonVisible: true,
129	additionalButtons: [],
130	};
131
132	private navigationFieldRef: React.RefObject<NavigationField> = React.createRef();	24✔
133
134	constructor(props: NavigationBoardProps) {
135	super(props);	26✔
136	this.state = {	24✔
137	nodeIdAsUncontrolled: sanitizeString(props.initialNodeId),
138	flippedAsUncontrolled: sanitizeBoolean(props.initialFlipped),
139	};
140	}
141
142	render() {
143
144	// Validate the game and game-index attributes.
145	const info = parseGame(this.props.game, this.props.gameIndex, 'NavigationBoard');	37✔
146	if (info.error) {	33✔
147	return info.errorBox;	2✔
148	}
149
150	// Fetch the current node/variation.
151	const currentNodeId = sanitizeOptional(this.props.nodeId, sanitizeString) ?? this.state.nodeIdAsUncontrolled;	31✔
152	const currentNode = info.game.findById(currentNodeId) ?? info.game.mainVariation();	31✔
153
154	// Flip state.
155	const flipped = sanitizeOptional(this.props.flipped, sanitizeBoolean) ?? this.state.flippedAsUncontrolled;	31✔
156
157	return (	31✔
158	<div className="kokopu-navigationBoard">
159	{this.renderBoard(info.game, currentNode, flipped)}
160	{this.renderNavigationField(info.game, currentNode.id())}
161	</div>
162	);
163	}
164
165	private renderBoard(game: Game, node: GameNode \| Variation, flipped: boolean) {
166	const position = node instanceof GameNode ? node.positionBefore() : node.initialPosition();	31✔
167	const move = node instanceof GameNode ? node.notation() : undefined;	31✔
168	return <Chessboard	31✔
169	position={position} move={move} flipped={flipped}
170	squareMarkers={node.tag('csl')} arrowMarkers={node.tag('cal')} textMarkers={node.tag('ctl')}
171	squareSize={this.props.squareSize}
172	coordinateVisible={this.props.coordinateVisible}
173	turnVisible={this.props.turnVisible}
174	colorset={this.props.colorset}
175	pieceset={this.props.pieceset}
176	smallScreenLimits={this.props.smallScreenLimits}
177	moveArrowVisible={this.props.moveArrowVisible}
178	moveArrowColor={this.props.moveArrowColor}
179	animated={this.props.animated}
180	bottomComponent={({ squareSize }) => this.renderToolbar(game, node, squareSize)}	33✔
181	/>;
182	}
183
184	private renderNavigationField(game: Game, currentNodeId: string) {
185	return <NavigationField ref={this.navigationFieldRef}	31✔
186	onFirstPressed={() => this.handleNavClicked(firstNodeId(game, currentNodeId))}	1✔
187	onPreviousPressed={() => this.handleNavClicked(previousNodeId(game, currentNodeId))}	1✔
188	onNextPressed={() => this.handleNavClicked(nextNodeId(game, currentNodeId))}	1✔
189	onLastPressed={() => this.handleNavClicked(lastNodeId(game, currentNodeId))}	1✔
190	/>;
191	}
192
193	private renderToolbar(game: Game, node: GameNode \| Variation, squareSize: number) {
194	const buttons: NavigationButtonList = [];	33✔
195
196	// Core navigation buttons
197	const currentNodeId = node.id();	33✔
198	const hasPrevious = currentNodeId !== 'start';	33✔
199	const hasNext = (node instanceof Variation ? node.first() : node.next()) !== undefined;	33✔
200	buttons.push({ iconPath: GO_FIRST_ICON_PATH, tooltip: i18n.TOOLTIP_GO_FIRST, enabled: hasPrevious, onClick: () => this.handleNavClicked(firstNodeId(game, currentNodeId)) });	33✔
201	buttons.push({ iconPath: GO_PREVIOUS_ICON_PATH, tooltip: i18n.TOOLTIP_GO_PREVIOUS, enabled: hasPrevious, onClick: () => this.handleNavClicked(previousNodeId(game, currentNodeId)) });	33✔
202	buttons.push({ iconPath: GO_NEXT_ICON_PATH, tooltip: i18n.TOOLTIP_GO_NEXT, enabled: hasNext, onClick: () => this.handleNavClicked(nextNodeId(game, currentNodeId)) });	33✔
203	buttons.push({ iconPath: GO_LAST_ICON_PATH, tooltip: i18n.TOOLTIP_GO_LAST, enabled: hasNext, onClick: () => this.handleNavClicked(lastNodeId(game, currentNodeId)) });	33✔
204	buttons.push('spacer');	33✔
205	if (this.props.flipButtonVisible) {	33✔
206	buttons.push({ iconPath: FLIP_ICON_PATH, tooltip: i18n.TOOLTIP_FLIP, onClick: () => this.handleFlipButtonClicked() });	32✔
207	}
208	buttons.push('spacer');	33✔
209
210	// Additional buttons.
211	const additionalButtons = sanitizeNavigationButtonList(this.props.additionalButtons, () => new IllegalArgument('NavigationBoard', 'additionalButtons'));	33✔
212	for (const button of additionalButtons) {	29✔
213	buttons.push(button);	10✔
214	}
215
216	return <NavigationToolbar squareSize={squareSize} buttons={buttons} />;	29✔
217	}
218
219	private handleNavClicked(targetNodeId: string \| undefined) {
220	this.focus();	19✔
221	if (targetNodeId === undefined) {	19✔
222	return;	5✔
223	}
224
225	if (this.props.nodeId === undefined) { // uncontrolled-component behavior	14✔
226	this.setState({ nodeIdAsUncontrolled: targetNodeId });	9✔
227	}
228	else if (this.props.onNodeIdChanged) { // controlled-component behavior	5✔
229	this.props.onNodeIdChanged(targetNodeId);	4✔
230	}
231	}
232
233	private handleFlipButtonClicked() {
234	this.focus();	7✔
235	if (this.props.flipped === undefined) { // uncontrolled flip state	7✔
236	this.setState({ flippedAsUncontrolled: !this.state.flippedAsUncontrolled });	4✔
237	}
238	else if (this.props.onFlippedChanged) { // controlled flip state	3✔
239	this.props.onFlippedChanged(!this.props.flipped);	2✔
240	}
241	}
242
243	/**
244	* Set the focus to the current component.
245	*
246	* @public
247	*/
248	focus(): void {
249	const target = this.navigationFieldRef.current;	26✔
250	// istanbul ignore else
251	if (target) {	26✔
252	target.focus();	26✔
253	}
254	}
255
256	}
257
258
259	/**
260	* Sanitization method for the additional button parameter.
261	*/
262	function sanitizeNavigationButtonList(type: NavigationButton \| NavigationButtonList, exceptionBuilder: () => IllegalArgument): NavigationButtonList {
263	if (Array.isArray(type)) {	33✔
264	return type.map(t => {	27✔
265	if (t !== 'spacer' && !isNavigationButton(t)) {	8!
UNCOV 266	throw exceptionBuilder();	×
267	}
268	return t;	8✔
269	});
270	}
271	else if (isNavigationButton(type)) {	6✔
272	return [ type ];	2✔
273	}
274	else {
275	throw exceptionBuilder();	4✔
276	}
277	}

yo35 / kokopu-react / 8773896268

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous