kokopu-react 3.1.0 → 3.2.0

package/src/errorbox/parsing.tsx

@@ -36,34 +36,34 @@ 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 }
+    { 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');
-	}
+    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');
+    }
 }
 
 
@@ -71,12 +71,12 @@ export function parsePosition(position: Position | string, componentName: string
  * 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 };
+    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 };
 }
 
 
@@ -84,41 +84,41 @@ function splitGameVariantAndFEN(position: string): { variant: GameVariant, fen:
  * 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 }
+    { 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');
-	}
+    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');
+    }
 }
 
 
@@ -126,33 +126,33 @@ export function parseMove(position: Position, move: MoveDescriptor | string | un
  * 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 }
+    { 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');
-	}
+    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

@@ -42,6 +42,7 @@ 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

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