kokopu-react 3.1.0 → 3.3.0

package/src/navigationboard/iconPaths.ts

@@ -0,0 +1,98 @@
+/*!
+ * -------------------------------------------------------------------------- *
+ *                                                                            *
+ *    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/>.                                         *
+ *                                                                            *
+ * -------------------------------------------------------------------------- */
+
+
+const THICKNESS = 2;
+const CHEVRON_SIZE = 7;
+const ARROW_SIZE = 5;
+const ARROW_LENGTH = 16;
+
+
+/**
+ *      * C
+ *     / \
+ *  B *   \
+ *     \   \
+ *      \   \
+ *     A *   * D
+ *      /   /
+ *     /   /
+ *  F *   /
+ *     \ /
+ *      * E
+ *
+ * (x,y) = middle of [AD]
+ */
+function chevronPath(x: number, y: number, direction: 1 | -1) {
+    const xA = x - direction * THICKNESS * Math.sqrt(2) / 2;
+    const xB = x - direction * (CHEVRON_SIZE + THICKNESS / Math.sqrt(2) / 2);
+    const xC = x - direction * (CHEVRON_SIZE - THICKNESS / Math.sqrt(2) / 2);
+    const xD = x + direction * THICKNESS * Math.sqrt(2) / 2;
+    const yB = y - direction * (CHEVRON_SIZE - THICKNESS / Math.sqrt(2) / 2);
+    const yC = y - direction * (CHEVRON_SIZE + THICKNESS / Math.sqrt(2) / 2);
+    const yE = y + direction * (CHEVRON_SIZE + THICKNESS / Math.sqrt(2) / 2);
+    const yF = y + direction * (CHEVRON_SIZE - THICKNESS / Math.sqrt(2) / 2);
+    return `M ${xA} ${y} L ${xB} ${yB} L ${xC} ${yC} L ${xD} ${y} L ${xC} ${yE} L ${xB} ${yF} Z`;
+}
+
+
+/**
+ *      D +---+ E
+ *        |   |
+ *        |   |
+ *        |   |
+ *   B *  |   |  * G
+ *    / \ |   | / \
+ * A *   \|   |/   * H
+ *    \   *   *   /
+ *     \  C   F  /
+ *      \   O   /
+ *       \  *  /
+ *        \   /
+ *         \ /
+ *          *
+ *        (x,y)
+ */
+function arrowPath(x: number, y: number, direction: 1 | -1) {
+    const xA = x - direction * (ARROW_SIZE + THICKNESS / Math.sqrt(2) / 2);
+    const xB = x - direction * (ARROW_SIZE - THICKNESS / Math.sqrt(2) / 2);
+    const xC = x - direction * THICKNESS / 2;
+    const xF = x + direction * THICKNESS / 2;
+    const xG = x + direction * (ARROW_SIZE - THICKNESS / Math.sqrt(2) / 2);
+    const xH = x + direction * (ARROW_SIZE + THICKNESS / Math.sqrt(2) / 2);
+    const y0 = y - direction * THICKNESS * Math.sqrt(2) / 2;
+    const yA = y0 - direction * (ARROW_SIZE - THICKNESS / Math.sqrt(2) / 2);
+    const yB = y0 - direction * (ARROW_SIZE + THICKNESS / Math.sqrt(2) / 2);
+    const yC = yB + (xC - xB);
+    const yD = y - direction * ARROW_LENGTH;
+    return `M ${x} ${y} L ${xA} ${yA} L ${xB} ${yB} L ${xC} ${yC} V ${yD} H ${xF} V ${yC} L ${xG} ${yB} L ${xH} ${yA} Z`;
+}
+
+
+export const GO_FIRST_ICON_PATH = chevronPath(14, 16, -1) + ' ' + chevronPath(10, 16, -1);
+export const GO_PREVIOUS_ICON_PATH = chevronPath(12, 16, -1);
+export const GO_NEXT_ICON_PATH = chevronPath(20, 16, 1);
+export const GO_LAST_ICON_PATH = chevronPath(18, 16, 1) + ' ' + chevronPath(22, 16, 1);
+export const PLAY_ICON_PATH = 'M 23 16 L 12 23 V 9 Z';
+export const STOP_ICON_PATH = 'M 11 11 H 21 V 21 H 11 Z';
+export const FLIP_ICON_PATH = arrowPath(11, 25, 1) + ' ' + arrowPath(21, 7, -1);

package/src/sanitization.ts

@@ -26,41 +26,41 @@ import { IllegalArgument } from './exception';
 
 
 export function sanitizeString(input: string): string {
-	return String(input);
+    return String(input);
 }
 
 
 export function sanitizeBoolean(input: boolean): boolean {
-	return Boolean(input);
+    return Boolean(input);
 }
 
 
 export function sanitizePartialObject<T>(input: Partial<T> | undefined, exceptionBuilder: () => IllegalArgument): Partial<T> {
-	if (input === undefined || input === null) {
-		return {};
-	}
-	else if (typeof input !== 'object') {
-		throw exceptionBuilder();
-	}
-	else {
-		return input;
-	}
+    if (input === undefined || input === null) {
+        return {};
+    }
+    else if (typeof input !== 'object') {
+        throw exceptionBuilder();
+    }
+    else {
+        return input;
+    }
 }
 
 
 export function sanitizeInteger(input: number, exceptionBuilder: () => IllegalArgument): number {
-	if (typeof input !== 'number' || !Number.isFinite(input)) {
-		throw exceptionBuilder();
-	}
-	return Math.round(input);
+    if (typeof input !== 'number' || !Number.isFinite(input)) {
+        throw exceptionBuilder();
+    }
+    return Math.round(input);
 }
 
 
 export function sanitizeBoundedInteger(input: number, min: number, max: number, exceptionBuilder: () => IllegalArgument) {
-	return Math.min(Math.max(sanitizeInteger(input, exceptionBuilder), min), max);
+    return Math.min(Math.max(sanitizeInteger(input, exceptionBuilder), min), max);
 }
 
 
 export function sanitizeOptional<T>(input: T | undefined, sanitizationFunction: (val: T) => T): T | undefined {
-	return input === undefined || input === null ? undefined : sanitizationFunction(input);
+    return input === undefined || input === null ? undefined : sanitizationFunction(input);
 }

package/src/types.ts

@@ -50,7 +50,7 @@ export type ChessPieceIconType = ColoredPiece | 'wx' | 'bx';
  * Whether the given object is a {@link ChessPieceIconType} or not.
  */
 export function isChessPieceIconType(iconType: unknown): iconType is ChessPieceIconType {
-	return isColoredPiece(iconType) || iconType === 'wx' || iconType === 'bx';
+    return isColoredPiece(iconType) || iconType === 'wx' || iconType === 'bx';
 }
 
 
@@ -61,23 +61,23 @@ export function isChessPieceIconType(iconType: unknown): iconType is ChessPieceI
  */
 export type Colorset = {
 
-	/** Color of the black squares. */
-	b: string;
+    /** Color of the black squares. */
+    b: string;
 
-	/** Color of the white squares. */
-	w: string;
+    /** Color of the white squares. */
+    w: string;
 
-	/** Color of the blue markers. */
-	cb: string;
+    /** Color of the blue markers. */
+    cb: string;
 
-	/** Color of the green markers. */
-	cg: string;
+    /** Color of the green markers. */
+    cg: string;
 
-	/** Color of the red markers. */
-	cr: string;
+    /** Color of the red markers. */
+    cr: string;
 
-	/** Color of the yellow markers. */
-	cy: string;
+    /** Color of the yellow markers. */
+    cy: string;
 };
 
 
@@ -88,47 +88,47 @@ export type Colorset = {
  */
 export type Pieceset = {
 
-	/** Image for the black bishops. */
-	bb: string;
+    /** Image for the black bishops. */
+    bb: string;
 
-	/** Image for the black kings. */
-	bk: string;
+    /** Image for the black kings. */
+    bk: string;
 
-	/** Image for the black knights. */
-	bn: string;
+    /** Image for the black knights. */
+    bn: string;
 
-	/** Image for the black pawns. */
-	bp: string;
+    /** Image for the black pawns. */
+    bp: string;
 
-	/** Image for the black queens. */
-	bq: string;
+    /** Image for the black queens. */
+    bq: string;
 
-	/** Image for the black rooks. */
-	br: string;
+    /** Image for the black rooks. */
+    br: string;
 
-	/** Image for the black turn flags. */
-	bx: string;
+    /** Image for the black turn flags. */
+    bx: string;
 
-	/** Image for the white bishops. */
-	wb: string;
+    /** Image for the white bishops. */
+    wb: string;
 
-	/** Image for the white kings. */
-	wk: string;
+    /** Image for the white kings. */
+    wk: string;
 
-	/** Image for the white knights. */
-	wn: string;
+    /** Image for the white knights. */
+    wn: string;
 
-	/** Image for the white pawns. */
-	wp: string;
+    /** Image for the white pawns. */
+    wp: string;
 
-	/** Image for the white queens. */
-	wq: string;
+    /** Image for the white queens. */
+    wq: string;
 
-	/** Image for the white rooks. */
-	wr: string;
+    /** Image for the white rooks. */
+    wr: string;
 
-	/** Image for the white turn flags. */
-	wx: string;
+    /** Image for the white turn flags. */
+    wx: string;
 };
 
 
@@ -136,12 +136,12 @@ export type Pieceset = {
  * Set of aliases for chess pieces symbols.
  */
 export type PieceSymbolMapping = {
-	K: string;
-	Q: string;
-	R: string;
-	B: string;
-	N: string;
-	P: string;
+    K: string;
+    Q: string;
+    R: string;
+    B: string;
+    N: string;
+    P: string;
 };
 
 
@@ -149,15 +149,15 @@ export type PieceSymbolMapping = {
  * Whether the given object is a {@link PieceSymbolMapping} or not.
  */
 export function isPieceSymbolMapping(mapping: unknown): mapping is PieceSymbolMapping {
-	if (typeof mapping !== 'object' || mapping === null) {
-		return false;
-	}
-	return typeof (mapping as PieceSymbolMapping).K === 'string' &&
-		typeof (mapping as PieceSymbolMapping).Q === 'string' &&
-		typeof (mapping as PieceSymbolMapping).R === 'string' &&
-		typeof (mapping as PieceSymbolMapping).B === 'string' &&
-		typeof (mapping as PieceSymbolMapping).N === 'string' &&
-		typeof (mapping as PieceSymbolMapping).P === 'string';
+    if (typeof mapping !== 'object' || mapping === null) {
+        return false;
+    }
+    return typeof (mapping as PieceSymbolMapping).K === 'string' &&
+        typeof (mapping as PieceSymbolMapping).Q === 'string' &&
+        typeof (mapping as PieceSymbolMapping).R === 'string' &&
+        typeof (mapping as PieceSymbolMapping).B === 'string' &&
+        typeof (mapping as PieceSymbolMapping).N === 'string' &&
+        typeof (mapping as PieceSymbolMapping).P === 'string';
 }
 
 
@@ -165,16 +165,16 @@ export function isPieceSymbolMapping(mapping: unknown): mapping is PieceSymbolMa
  * Symbol that can be chosen to decorate a square in a {@link Chessboard}.
  */
 export type AnnotationSymbol = 'plus' | 'times' | 'dot' | 'circle' |
-	'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I' | 'J' | 'K' | 'L' | 'M' | 'N' | 'O' | 'P' | 'Q' | 'R' | 'S' | 'T' | 'U' | 'V' | 'W' | 'X' | 'Y' | 'Z' |
-	'a' | 'b' | 'c' | 'd' | 'e' | 'f' | 'g' | 'h' | 'i' | 'j' | 'k' | 'l' | 'm' | 'n' | 'o' | 'p' | 'q' | 'r' | 's' | 't' | 'u' | 'v' | 'w' | 'x' | 'y' | 'z' |
-	'0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';
+    'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I' | 'J' | 'K' | 'L' | 'M' | 'N' | 'O' | 'P' | 'Q' | 'R' | 'S' | 'T' | 'U' | 'V' | 'W' | 'X' | 'Y' | 'Z' |
+    'a' | 'b' | 'c' | 'd' | 'e' | 'f' | 'g' | 'h' | 'i' | 'j' | 'k' | 'l' | 'm' | 'n' | 'o' | 'p' | 'q' | 'r' | 's' | 't' | 'u' | 'v' | 'w' | 'x' | 'y' | 'z' |
+    '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';
 
 
 /**
  * Whether the given object is a {@link AnnotationSymbol} or not.
  */
 export function isAnnotationSymbol(symbol: unknown): symbol is AnnotationSymbol {
-	return typeof symbol === 'string' && /^(?:[A-Za-z0-9]|plus|times|dot|circle)$/.test(symbol);
+    return typeof symbol === 'string' && /^(?:[A-Za-z0-9]|plus|times|dot|circle)$/.test(symbol);
 }
 
 
@@ -188,7 +188,7 @@ export type AnnotationColor = 'b' | 'g' | 'r' | 'y';
  * Whether the given object is a {@link AnnotationSymbol} or not.
  */
 export function isAnnotationColor(color: unknown): color is AnnotationColor {
-	return color === 'b' || color === 'g' || color === 'r' || color === 'y';
+    return color === 'b' || color === 'g' || color === 'r' || color === 'y';
 }
 
 
@@ -217,14 +217,14 @@ export type ArrowMarkerSet = Partial<Record<SquareCouple, AnnotationColor>>;
  * @returns For example: `'Gd5,Ge4'`
  */
 export function flattenSquareMarkers(markers: SquareMarkerSet): string {
-	if (typeof markers !== 'object' || markers === null) {
-		throw new IllegalArgument('flattenSquareMarkers()', 'markers');
-	}
-	return Object.entries(markers)
-		.filter(([ sq, color ]) => isSquare(sq) && isAnnotationColor(color))
-		.sort((a, b) => a[0].localeCompare(b[0]))
-		.map(([ sq, color ]) => color.toUpperCase() + sq)
-		.join(',');
+    if (typeof markers !== 'object' || markers === null) {
+        throw new IllegalArgument('flattenSquareMarkers()', 'markers');
+    }
+    return Object.entries(markers)
+        .filter(([ sq, color ]) => isSquare(sq) && isAnnotationColor(color))
+        .sort((a, b) => a[0].localeCompare(b[0]))
+        .map(([ sq, color ]) => color.toUpperCase() + sq)
+        .join(',');
 }
 
 
@@ -235,14 +235,14 @@ export function flattenSquareMarkers(markers: SquareMarkerSet): string {
  * @returns For example: `'Rzd5,GAe4,Y(plus)h3'`
  */
 export function flattenTextMarkers(markers: TextMarkerSet): string {
-	if (typeof markers !== 'object' || markers === null) {
-		throw new IllegalArgument('flattenTextMarkers()', 'markers');
-	}
-	return Object.entries(markers)
-		.filter(([ sq, desc ]) => isSquare(sq) && desc && isAnnotationColor(desc.color) && isAnnotationSymbol(desc.symbol))
-		.sort((a, b) => a[0].localeCompare(b[0]))
-		.map(([ sq, desc ]) => desc.color.toUpperCase() + (desc.symbol.length === 1 ? desc.symbol : `(${desc.symbol})`) + sq)
-		.join(',');
+    if (typeof markers !== 'object' || markers === null) {
+        throw new IllegalArgument('flattenTextMarkers()', 'markers');
+    }
+    return Object.entries(markers)
+        .filter(([ sq, desc ]) => isSquare(sq) && desc && isAnnotationColor(desc.color) && isAnnotationSymbol(desc.symbol))
+        .sort((a, b) => a[0].localeCompare(b[0]))
+        .map(([ sq, desc ]) => desc.color.toUpperCase() + (desc.symbol.length === 1 ? desc.symbol : `(${desc.symbol})`) + sq)
+        .join(',');
 }
 
 
@@ -253,14 +253,14 @@ export function flattenTextMarkers(markers: TextMarkerSet): string {
  * @returns For example: `'Ge2e4,Rg8f6,Bg8h6'`
  */
 export function flattenArrowMarkers(markers: ArrowMarkerSet): string {
-	if (typeof markers !== 'object' || markers === null) {
-		throw new IllegalArgument('flattenArrowMarkers()', 'markers');
-	}
-	return Object.entries(markers)
-		.filter(([ vect, color ]) => isSquareCouple(vect) && isAnnotationColor(color))
-		.sort((a, b) => a[0].localeCompare(b[0]))
-		.map(([ vect, color ]) => color.toUpperCase() + vect)
-		.join(',');
+    if (typeof markers !== 'object' || markers === null) {
+        throw new IllegalArgument('flattenArrowMarkers()', 'markers');
+    }
+    return Object.entries(markers)
+        .filter(([ vect, color ]) => isSquareCouple(vect) && isAnnotationColor(color))
+        .sort((a, b) => a[0].localeCompare(b[0]))
+        .map(([ vect, color ]) => color.toUpperCase() + vect)
+        .join(',');
 }
 
 
@@ -271,14 +271,14 @@ export function flattenArrowMarkers(markers: ArrowMarkerSet): string {
  * @returns For example: `{ e4: 'g', d5: 'r' }`
  */
 export function parseSquareMarkers(markers: string): SquareMarkerSet {
-	if (typeof markers !== 'string') {
-		throw new IllegalArgument('parseSquareMarkers()', 'markers');
-	}
-	return parseMarkers<Square, AnnotationColor>(markers, token => {
-		return /^([BGRY])([a-h][1-8])$/.test(token) ?
-			{ key: RegExp.$2 as Square, value: RegExp.$1.toLowerCase() as AnnotationColor } :
-			undefined;
-	});
+    if (typeof markers !== 'string') {
+        throw new IllegalArgument('parseSquareMarkers()', 'markers');
+    }
+    return parseMarkers<Square, AnnotationColor>(markers, token => {
+        return /^([BGRY])([a-h][1-8])$/.test(token) ?
+            { key: RegExp.$2 as Square, value: RegExp.$1.toLowerCase() as AnnotationColor } :
+            undefined;
+    });
 }
 
 
@@ -289,14 +289,14 @@ export function parseSquareMarkers(markers: string): SquareMarkerSet {
  * @returns For example: `{ e4: { symbol: 'A', color: 'g' }, d5: { symbol: 'z', color: 'r' }, h3: { symbol: 'plus', color: 'y' } }`
  */
 export function parseTextMarkers(markers: string): TextMarkerSet {
-	if (typeof markers !== 'string') {
-		throw new IllegalArgument('parseTextMarkers()', 'markers');
-	}
-	return parseMarkers<Square, { symbol: AnnotationSymbol, color: AnnotationColor }>(markers, token => {
-		return /^([BGRY])(?:([A-Za-z0-9])|\((plus|times|dot|circle)\))([a-h][1-8])$/.test(token) ?
-			{ key: RegExp.$4 as Square, value: { symbol: (RegExp.$2 || RegExp.$3) as AnnotationSymbol, color: RegExp.$1.toLowerCase() as AnnotationColor } } :
-			undefined;
-	});
+    if (typeof markers !== 'string') {
+        throw new IllegalArgument('parseTextMarkers()', 'markers');
+    }
+    return parseMarkers<Square, { symbol: AnnotationSymbol, color: AnnotationColor }>(markers, token => {
+        return /^([BGRY])(?:([A-Za-z0-9])|\((plus|times|dot|circle)\))([a-h][1-8])$/.test(token) ?
+            { key: RegExp.$4 as Square, value: { symbol: (RegExp.$2 || RegExp.$3) as AnnotationSymbol, color: RegExp.$1.toLowerCase() as AnnotationColor } } :
+            undefined;
+    });
 }
 
 
@@ -307,23 +307,23 @@ export function parseTextMarkers(markers: string): TextMarkerSet {
  * @returns For example: `{ e2e4: 'g', g8f6: 'r', g8h6: 'b' }`
  */
 export function parseArrowMarkers(markers: string): ArrowMarkerSet {
-	if (typeof markers !== 'string') {
-		throw new IllegalArgument('parseArrowMarkers()', 'markers');
-	}
-	return parseMarkers<SquareCouple, AnnotationColor>(markers, token => {
-		return /^([BGRY])([a-h][1-8][a-h][1-8])$/.test(token) ?
-			{ key: RegExp.$2 as SquareCouple, value: RegExp.$1.toLowerCase() as AnnotationColor } :
-			undefined;
-	});
+    if (typeof markers !== 'string') {
+        throw new IllegalArgument('parseArrowMarkers()', 'markers');
+    }
+    return parseMarkers<SquareCouple, AnnotationColor>(markers, token => {
+        return /^([BGRY])([a-h][1-8][a-h][1-8])$/.test(token) ?
+            { key: RegExp.$2 as SquareCouple, value: RegExp.$1.toLowerCase() as AnnotationColor } :
+            undefined;
+    });
 }
 
 
 function parseMarkers<K extends string, V>(markers: string, tokenParser: (token: string) => { key: K, value: V } | undefined): Partial<Record<K, V>> {
-	const result: Partial<Record<K, V>> = {};
-	markers.split(',').map(token => tokenParser(token.trim())).forEach(marker => {
-		if (marker) {
-			result[marker.key] = marker.value;
-		}
-	});
-	return result;
+    const result: Partial<Record<K, V>> = {};
+    markers.split(',').map(token => tokenParser(token.trim())).forEach(marker => {
+        if (marker) {
+            result[marker.key] = marker.value;
+        }
+    });
+    return result;
 }

package/src/util.ts

@@ -23,19 +23,19 @@
 
 
 export function generateRandomId() {
-	const buffer = new Uint32Array(8);
-	crypto.getRandomValues(buffer);
-	let result = '';
-	for (let i = 0; i < buffer.length; ++i) {
-		result += buffer[i].toString(16);
-	}
-	return result;
+    const buffer = new Uint32Array(8);
+    crypto.getRandomValues(buffer);
+    let result = '';
+    for (let i = 0; i < buffer.length; ++i) {
+        result += buffer[i].toString(16);
+    }
+    return result;
 }
 
 
 export function fillPlaceholder(message: string, ...placeholderValues: unknown[]) {
-	return message.replace(/{(\d+)}/g, (match, placeholder) => {
-		const placeholderIndex = Number(placeholder);
-		return placeholderIndex < placeholderValues.length ? String(placeholderValues[placeholderIndex]) : match;
-	});
+    return message.replace(/{(\d+)}/g, (match, placeholder) => {
+        const placeholderIndex = Number(placeholder);
+        return placeholderIndex < placeholderValues.length ? String(placeholderValues[placeholderIndex]) : match;
+    });
 }