kokopu-react 3.0.2 → 3.2.0

package/src/errorbox/parsing.tsx

@@ -0,0 +1,158 @@
+/*!
+ * -------------------------------------------------------------------------- *
+ *                                                                            *
+ *    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 { exception as kokopuException, i18n as kokopuI18n, Database, Game, GameVariant, MoveDescriptor, Position, isGameVariant, pgnRead } from 'kokopu';
+
+import { IllegalArgument } from '../exception';
+import { i18n } from '../i18n';
+
+import { ErrorBox } from './ErrorBox';
+
+
+/**
+ * Try to interpret the given object as a chess position.
+ */
+export function parsePosition(position: Position | string, componentName: string):
+    { error: true, errorBox: JSX.Element } | { error: false, position: Position }
+{
+    if (position instanceof Position) {
+        return { error: false, position: position };
+    }
+    else if (position === 'start' || position === 'empty') {
+        return { error: false, position: new Position(position) };
+    }
+    else if (typeof position === 'string') {
+        try {
+            const { variant, fen } = splitGameVariantAndFEN(position);
+            const result = new Position(variant, 'empty');
+            result.fen(fen);
+            return { error: false, position: result };
+        }
+        catch (e) {
+            // istanbul ignore else
+            if (e instanceof kokopuException.InvalidFEN) {
+                return { error: true, errorBox: <ErrorBox title={i18n.INVALID_FEN_ERROR_TITLE} message={e.message} /> };
+            }
+            else {
+                throw e;
+            }
+        }
+    }
+    else {
+        throw new IllegalArgument(componentName, 'position');
+    }
+}
+
+
+/**
+ * Look for an optional 'chess-variant:' prefix in the position attribute.
+ */
+function splitGameVariantAndFEN(position: string): { variant: GameVariant, fen: string } {
+    const separatorIndex = position.indexOf(':');
+    if (separatorIndex < 0) {
+        return { variant: 'regular', fen: position };
+    }
+    const variant = position.substring(0, separatorIndex);
+    return isGameVariant(variant) ? { variant: variant, fen: position.substring(separatorIndex + 1) } : { variant: 'regular', fen: position };
+}
+
+
+/**
+ * Try to interpret the given object `move` as a move descriptor based on the given position.
+ */
+export function parseMove(position: Position, move: MoveDescriptor | string | undefined, componentName: string):
+    { error: true, errorBox: JSX.Element } | { error: false, type: 'none' | 'null-move' } | { error: false, type: 'regular', move: MoveDescriptor }
+{
+    if (move === undefined || move === null) {
+        return { error: false, type: 'none' };
+    }
+    else if (move instanceof MoveDescriptor) {
+        return { error: false, type: 'regular', move: move };
+    }
+    else if (typeof move === 'string') {
+        if (move === '--') {
+            if (position.isNullMoveLegal()) {
+                return { error: false, type: 'null-move' };
+            }
+            else {
+                return { error: true, errorBox: <ErrorBox title={i18n.INVALID_NOTATION_ERROR_TITLE} message={kokopuI18n.ILLEGAL_NULL_MOVE} /> };
+            }
+        }
+        else {
+            try {
+                return { error: false, type: 'regular', move: position.notation(move) };
+            }
+            catch (e) {
+                // istanbul ignore else
+                if (e instanceof kokopuException.InvalidNotation) {
+                    return { error: true, errorBox: <ErrorBox title={i18n.INVALID_NOTATION_ERROR_TITLE} message={e.message} /> };
+                }
+                else {
+                    throw e;
+                }
+            }
+        }
+    }
+    else {
+        throw new IllegalArgument(componentName, 'move');
+    }
+}
+
+
+/**
+ * Try to interpret the given object as a chess game.
+ */
+export function parseGame(game: Game | Database | string, gameIndex: number, componentName: string):
+    { error: true, errorBox: JSX.Element } | { 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(componentName, '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,
+                    errorBox: <ErrorBox title={i18n.INVALID_PGN_ERROR_TITLE} message={e.message} text={e.pgn} errorIndex={e.index} lineNumber={e.lineNumber} />,
+                };
+            }
+            else {
+                throw e;
+            }
+        }
+    }
+    else {
+        throw new IllegalArgument(componentName, 'game');
+    }
+}

package/src/exception.ts

@@ -33,21 +33,21 @@
  */
 export class IllegalArgument {
 
-	/** Name of the function or component that raises the exception. */
-	functionOrComponentName: string;
-
-	/** Name of the argument that causes the error. */
-	argumentName: string;
-
-	constructor(functionOrComponentName: string, argumentName: string) {
-		this.functionOrComponentName = functionOrComponentName;
-		this.argumentName = argumentName;
-	}
-
-	/**
-	 * @ignore
-	 */
-	toString(): string {
-		return `Illegal argument '${this.argumentName}' in function or component ${this.functionOrComponentName}`;
-	}
+    /** Name of the function or component that raises the exception. */
+    functionOrComponentName: string;
+
+    /** Name of the argument that causes the error. */
+    argumentName: string;
+
+    constructor(functionOrComponentName: string, argumentName: string) {
+        this.functionOrComponentName = functionOrComponentName;
+        this.argumentName = argumentName;
+    }
+
+    /**
+     * @ignore
+     */
+    toString(): string {
+        return `Illegal argument '${this.argumentName}' in function or component ${this.functionOrComponentName}`;
+    }
 }

package/src/i18n.ts

@@ -37,6 +37,14 @@ export let LINE = 'line {0}';
 export let INVALID_FEN_ERROR_TITLE = 'Invalid FEN string.';
 export let INVALID_NOTATION_ERROR_TITLE = 'Invalid move notation.';
 
+// Navigation board
+export let TOOLTIP_GO_FIRST = 'Go to the beginning of the game';
+export let TOOLTIP_GO_PREVIOUS = 'Go to the previous move';
+export let TOOLTIP_GO_NEXT = 'Go to the next move';
+export let TOOLTIP_GO_LAST = 'Go to the end of the game';
+export let TOOLTIP_PLAY_STOP = 'Play/stop the game';
+export let TOOLTIP_FLIP = 'Flip the board';
+
 // Movetext
 export let PIECE_SYMBOLS = { 'K':'K', 'Q':'Q', 'R':'R', 'B':'B', 'N':'N', 'P':'P' };
 export let ANNOTATED_BY = 'Annotated by {0}';

package/src/icons/AnnotationSymbolShape.css

@@ -23,13 +23,13 @@
 
 
 .kokopu-symbolCircle {
-	fill: transparent;
+    fill: transparent;
 }
 
 .kokopu-symbolText {
-	font-style: normal;
-	font-family: sans-serif;
-	text-anchor: middle;
-	dominant-baseline: central;
-	letter-spacing: 0px;
+    font-style: normal;
+    font-family: sans-serif;
+    text-anchor: middle;
+    dominant-baseline: central;
+    letter-spacing: 0px;
 }

package/src/icons/AnnotationSymbolShape.tsx

@@ -35,30 +35,30 @@ const CIRCLE_RADIUS_FACTOR = 0.425;
 
 interface AnnotationSymbolShapeProps {
 
-	/**
-	 * X-coordinate of the center of the symbol.
-	 */
-	x: number;
+    /**
+     * X-coordinate of the center of the symbol.
+     */
+    x: number;
 
-	/**
-	 * Y-coordinate of the center of the symbol.
-	 */
-	y: number;
+    /**
+     * Y-coordinate of the center of the symbol.
+     */
+    y: number;
 
-	/**
-	 * Size of the symbol (i.e. size of square in which the symbol is rendered).
-	 */
-	size: number;
+    /**
+     * Size of the symbol (i.e. size of square in which the symbol is rendered).
+     */
+    size: number;
 
-	/**
-	 * Symbol code.
-	 */
-	symbol: AnnotationSymbol;
+    /**
+     * Symbol code.
+     */
+    symbol: AnnotationSymbol;
 
-	/**
-	 * [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to use to colorize the shape (for example: `'green'`, `'#ff0000'`...).
-	 */
-	color: string;
+    /**
+     * [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to use to colorize the shape (for example: `'green'`, `'#ff0000'`...).
+     */
+    color: string;
 }
 
 
@@ -66,15 +66,15 @@ interface AnnotationSymbolShapeProps {
  * Symbol of a text marker.
  */
 export function AnnotationSymbolShape({ x, y, size, symbol, color }: AnnotationSymbolShapeProps) {
-	if (symbol === 'dot') {
-		return <circle cx={x} cy={y} r={size * DOT_RADIUS_FACTOR} fill={color} />;
-	}
-	else if (symbol === 'circle') {
-		const thickness = size * SHAPE_THICKNESS_FACTOR;
-		return <circle className="kokopu-symbolCircle" cx={x} cy={y} r={size * CIRCLE_RADIUS_FACTOR} stroke={color} strokeWidth={thickness} />;
-	}
-	else {
-		const text = symbol === 'plus' ? '+' : symbol === 'times' ? '\u00d7' : symbol;
-		return <text className="kokopu-symbolText" x={x} y={y} fill={color} fontSize={size}>{text}</text>;
-	}
+    if (symbol === 'dot') {
+        return <circle cx={x} cy={y} r={size * DOT_RADIUS_FACTOR} fill={color} />;
+    }
+    else if (symbol === 'circle') {
+        const thickness = size * SHAPE_THICKNESS_FACTOR;
+        return <circle className="kokopu-symbolCircle" cx={x} cy={y} r={size * CIRCLE_RADIUS_FACTOR} stroke={color} strokeWidth={thickness} />;
+    }
+    else {
+        const text = symbol === 'plus' ? '+' : symbol === 'times' ? '\u00d7' : symbol;
+        return <text className="kokopu-symbolText" x={x} y={y} fill={color} fontSize={size}>{text}</text>;
+    }
 }

package/src/icons/ArrowMarkerIcon.tsx

@@ -38,15 +38,15 @@ const ARROW_THICKNESS_FACTOR = 0.2;
 
 export interface ArrowMarkerIconProps {
 
-	/**
-	 * Width and height (in pixels) of the icon.
-	 */
-	size: number;
-
-	/**
-	 * [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to use to colorize the icon (for example: `'green'`, `'#ff0000'`...).
-	 */
-	color: string;
+    /**
+     * Width and height (in pixels) of the icon.
+     */
+    size: number;
+
+    /**
+     * [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to use to colorize the icon (for example: `'green'`, `'#ff0000'`...).
+     */
+    color: string;
 }
 
 
@@ -55,29 +55,29 @@ export interface ArrowMarkerIconProps {
  */
 export class ArrowMarkerIcon extends React.Component<ArrowMarkerIconProps> {
 
-	static defaultProps: Partial<ArrowMarkerIconProps> = {
-		color: 'currentcolor',
-	};
-
-	private arrowTipId = generateRandomId();
-
-	render() {
-
-		// Sanitize the inputs.
-		const size = sanitizeBoundedInteger(this.props.size, MIN_SQUARE_SIZE, MAX_SQUARE_SIZE, () => new IllegalArgument('ArrowMarkerIcon', 'size'));
-		const color = sanitizeString(this.props.color);
-
-		// Render the component.
-		const halfThickness = size * ARROW_THICKNESS_FACTOR / 2;
-		const viewBox = `0 0 ${size} ${size}`;
-		return (
-			<svg className="kokopu-arrowMarkerIcon" viewBox={viewBox} width={size} height={size}>
-				<defs>
-					<ArrowTip id={this.arrowTipId} color={this.props.color} />
-				</defs>
-				<line className="kokopu-arrow" x1={halfThickness} y1={size / 2} x2={size - halfThickness * 3} y2={size / 2} stroke={color}
-					strokeWidth={halfThickness * 2} markerEnd={`url(#${this.arrowTipId})`} />
-			</svg>
-		);
-	}
+    static defaultProps: Partial<ArrowMarkerIconProps> = {
+        color: 'currentcolor',
+    };
+
+    private arrowTipId = generateRandomId();
+
+    render() {
+
+        // Sanitize the inputs.
+        const size = sanitizeBoundedInteger(this.props.size, MIN_SQUARE_SIZE, MAX_SQUARE_SIZE, () => new IllegalArgument('ArrowMarkerIcon', 'size'));
+        const color = sanitizeString(this.props.color);
+
+        // Render the component.
+        const halfThickness = size * ARROW_THICKNESS_FACTOR / 2;
+        const viewBox = `0 0 ${size} ${size}`;
+        return (
+            <svg className="kokopu-arrowMarkerIcon" viewBox={viewBox} width={size} height={size}>
+                <defs>
+                    <ArrowTip id={this.arrowTipId} color={this.props.color} />
+                </defs>
+                <line className="kokopu-arrow" x1={halfThickness} y1={size / 2} x2={size - halfThickness * 3} y2={size / 2} stroke={color}
+                    strokeWidth={halfThickness * 2} markerEnd={`url(#${this.arrowTipId})`} />
+            </svg>
+        );
+    }
 }

package/src/icons/ArrowTip.tsx

@@ -27,15 +27,15 @@ import * as React from 'react';
 
 interface ArrowTipProps {
 
-	/**
-	 * ID of the element.
-	 */
-	id: string;
-
-	/**
-	 * [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to use to colorize the shape (for example: `'green'`, `'#ff0000'`...).
-	 */
-	color: string;
+    /**
+     * ID of the element.
+     */
+    id: string;
+
+    /**
+     * [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to use to colorize the shape (for example: `'green'`, `'#ff0000'`...).
+     */
+    color: string;
 }
 
 
@@ -43,9 +43,9 @@ interface ArrowTipProps {
  * Tip of the arrow markers.
  */
 export function ArrowTip({ id, color }: ArrowTipProps) {
-	return (
-		<marker id={id} markerWidth={4} markerHeight={4} refX={2.5} refY={2} orient="auto">
-			<path fill={color} d="M 4,2 L 0,4 L 1,2 L 0,0 Z" />
-		</marker>
-	);
+    return (
+        <marker id={id} markerWidth={4} markerHeight={4} refX={2.5} refY={2} orient="auto">
+            <path fill={color} d="M 4,2 L 0,4 L 1,2 L 0,0 Z" />
+        </marker>
+    );
 }

package/src/icons/ChessPieceIcon.tsx

@@ -32,25 +32,25 @@ import { piecesets, DEFAULT_PIECESET } from '../chessboard/piecesets';
 
 export interface ChessPieceIconProps {
 
-	/**
-	 * Width and height (in pixels) of each chess piece icon.
-	 */
-	size: number;
-
-	/**
-	 * Chess piece(s) to display.
-	 */
-	type: ChessPieceIconType | ChessPieceIconType[];
-
-	/**
-	 * Piece theme ID. Must be a property of `Chessboard.piecesets()`.
-	 */
-	pieceset: string;
+    /**
+     * Width and height (in pixels) of each chess piece icon.
+     */
+    size: number;
+
+    /**
+     * Chess piece(s) to display.
+     */
+    type: ChessPieceIconType | ChessPieceIconType[];
+
+    /**
+     * Piece theme ID. Must be a property of `Chessboard.piecesets()`.
+     */
+    pieceset: string;
 }
 
 
 const defaultProps: Partial<ChessPieceIconProps> = {
-	pieceset: DEFAULT_PIECESET,
+    pieceset: DEFAULT_PIECESET,
 };
 
 
@@ -59,22 +59,22 @@ const defaultProps: Partial<ChessPieceIconProps> = {
  */
 export function ChessPieceIcon({ size, type, pieceset }: ChessPieceIconProps) {
 
-	// Sanitize the inputs.
-	size = sanitizeBoundedInteger(size, MIN_SQUARE_SIZE, MAX_SQUARE_SIZE, () => new IllegalArgument('ChessPieceIcon', 'size'));
-	const types = sanitizeChessPieceIconType(type, () => new IllegalArgument('ChessPieceIcon', 'type'));
-	const piecesetData = piecesets[pieceset];
-	if (!piecesetData) {
-		throw new IllegalArgument('ChessPieceIcon', 'pieceset');
-	}
-
-	// Render the component.
-	const width = size * types.length;
-	const viewBox = `0 0 ${width} ${size}`;
-	return (
-		<svg className="kokopu-chessPieceIcon" viewBox={viewBox} width={width} height={size}>
-			{types.map((t, i) => <image key={i} x={i * size} y={0} width={size} height={size} href={piecesetData[t]} />)}
-		</svg>
-	);
+    // Sanitize the inputs.
+    size = sanitizeBoundedInteger(size, MIN_SQUARE_SIZE, MAX_SQUARE_SIZE, () => new IllegalArgument('ChessPieceIcon', 'size'));
+    const types = sanitizeChessPieceIconType(type, () => new IllegalArgument('ChessPieceIcon', 'type'));
+    const piecesetData = piecesets[pieceset];
+    if (!piecesetData) {
+        throw new IllegalArgument('ChessPieceIcon', 'pieceset');
+    }
+
+    // Render the component.
+    const width = size * types.length;
+    const viewBox = `0 0 ${width} ${size}`;
+    return (
+        <svg className="kokopu-chessPieceIcon" viewBox={viewBox} width={width} height={size}>
+            {types.map((t, i) => <image key={i} x={i * size} y={0} width={size} height={size} href={piecesetData[t]} />)}
+        </svg>
+    );
 }
 
 ChessPieceIcon.defaultProps = defaultProps;
@@ -84,18 +84,18 @@ ChessPieceIcon.defaultProps = defaultProps;
  * Sanitization method for the small-screen limits parameter.
  */
 function sanitizeChessPieceIconType(type: ChessPieceIconType | ChessPieceIconType[], exceptionBuilder: () => IllegalArgument): ChessPieceIconType[] {
-	if (Array.isArray(type)) {
-		return type.map(t => {
-			if (!isChessPieceIconType(t)) {
-				throw exceptionBuilder();
-			}
-			return t;
-		});
-	}
-	else if (isChessPieceIconType(type)) {
-		return [ type ];
-	}
-	else {
-		throw exceptionBuilder();
-	}
+    if (Array.isArray(type)) {
+        return type.map(t => {
+            if (!isChessPieceIconType(t)) {
+                throw exceptionBuilder();
+            }
+            return t;
+        });
+    }
+    else if (isChessPieceIconType(type)) {
+        return [ type ];
+    }
+    else {
+        throw exceptionBuilder();
+    }
 }

package/src/icons/SquareMarkerIcon.tsx

@@ -33,20 +33,20 @@ const SQUARE_MARGIN_FACTOR = 0.1;
 
 export interface SquareMarkerIconProps {
 
-	/**
-	 * Width and height (in pixels) of the icon.
-	 */
-	size: number;
+    /**
+     * Width and height (in pixels) of the icon.
+     */
+    size: number;
 
-	/**
-	 * [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to use to colorize the icon (for example: `'green'`, `'#ff0000'`...).
-	 */
-	color: string;
+    /**
+     * [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to use to colorize the icon (for example: `'green'`, `'#ff0000'`...).
+     */
+    color: string;
 }
 
 
 const defaultProps: Partial<SquareMarkerIconProps> = {
-	color: 'currentcolor',
+    color: 'currentcolor',
 };
 
 
@@ -55,18 +55,18 @@ const defaultProps: Partial<SquareMarkerIconProps> = {
  */
 export function SquareMarkerIcon({ size, color }: SquareMarkerIconProps) {
 
-	// Sanitize the inputs.
-	size = sanitizeBoundedInteger(size, MIN_SQUARE_SIZE, MAX_SQUARE_SIZE, () => new IllegalArgument('SquareMarkerIcon', 'size'));
-	color = sanitizeString(color);
+    // Sanitize the inputs.
+    size = sanitizeBoundedInteger(size, MIN_SQUARE_SIZE, MAX_SQUARE_SIZE, () => new IllegalArgument('SquareMarkerIcon', 'size'));
+    color = sanitizeString(color);
 
-	// Render the component.
-	const margin = Math.round(size * SQUARE_MARGIN_FACTOR);
-	const viewBox = `0 0 ${size} ${size}`;
-	return (
-		<svg className="kokopu-squareMarkerIcon" viewBox={viewBox} width={size} height={size}>
-			<rect x={margin} y={margin} width={size - margin * 2} height={size - margin * 2} fill={color} />
-		</svg>
-	);
+    // Render the component.
+    const margin = Math.round(size * SQUARE_MARGIN_FACTOR);
+    const viewBox = `0 0 ${size} ${size}`;
+    return (
+        <svg className="kokopu-squareMarkerIcon" viewBox={viewBox} width={size} height={size}>
+            <rect x={margin} y={margin} width={size - margin * 2} height={size - margin * 2} fill={color} />
+        </svg>
+    );
 }
 
 SquareMarkerIcon.defaultProps = defaultProps;