kokopu-react 3.0.2 → 3.2.0

package/src/navigationboard/NavigationToolbar.css

@@ -0,0 +1,54 @@
+/*!
+ * -------------------------------------------------------------------------- *
+ *                                                                            *
+ *    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-navigationBoard {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.kokopu-navigationToolbar {
+    line-height: 0px;
+}
+
+.kokopu-enabledNavigationButton,
+.kokopu-disabledNavigationButton {
+    display: inline-block;
+}
+
+.kokopu-enabledNavigationButton {
+    cursor: pointer;
+}
+
+.kokopu-enabledNavigationButton:hover {
+    opacity: 0.6;
+}
+
+.kokopu-disabledNavigationButton {
+    opacity: 0.2;
+}
+
+.kokopu-navigationSpacer {
+    display: inline-block;
+}

package/src/navigationboard/NavigationToolbar.tsx

@@ -0,0 +1,117 @@
+/*!
+ * -------------------------------------------------------------------------- *
+ *                                                                            *
+ *    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 { NavigationButton, NavigationButtonList } from './NavigationButton';
+
+import './NavigationToolbar.css';
+
+
+interface NavigationToolbarProps {
+    squareSize: number;
+    buttons: NavigationButtonList;
+}
+
+
+/**
+ * Toolbar below the navigation board.
+ */
+export function NavigationToolbar({ squareSize, buttons }: NavigationToolbarProps) {
+
+    const buttonSize = computeButtonSize(squareSize);
+    const spacerSize = computeSpacerSize(squareSize);
+    const buttonNodes: React.ReactNode[] = [];
+
+    let atLeastOneButtonEncountered = false;
+    for (let i = 0; i < buttons.length; ++i) {
+
+        const button = buttons[i];
+
+        // Skip the spacers.
+        if (button === 'spacer') {
+            continue;
+        }
+
+        // Enqueue a spacer if necessary.
+        // Remark: consecutive spacers are collapsed into a single one for rendering, and spacers at the begin and end of the button list are not rendered.
+        if (atLeastOneButtonEncountered && buttons[i - 1] === 'spacer') {
+            buttonNodes.push(<div key={buttonNodes.length} className="kokopu-navigationSpacer" style={{ width: spacerSize }} />);
+        }
+        atLeastOneButtonEncountered = true;
+
+        // Enqueue the button node.
+        buttonNodes.push(<NavigationButtonImpl
+            key={buttonNodes.length}
+            tooltip={button.tooltip} iconPath={button.iconPath} enabled={button.enabled} onClick={button.onClick}
+            size={buttonSize}
+            spaceOnLeft={i === 0 || buttons[i - 1] === 'spacer'}
+            spaceOnRight={i === buttons.length - 1 || buttons[i + 1] === 'spacer'}
+        />);
+    }
+
+    return <div className="kokopu-navigationToolbar" style={{ marginTop: Math.round(buttonSize / 4) }}>{buttonNodes}</div>;
+}
+
+
+interface NavigationButtonImplProps extends NavigationButton {
+    size: number;
+    spaceOnLeft: boolean;
+    spaceOnRight: boolean;
+}
+
+
+/**
+ * Button for the navigation toolbar.
+ */
+function NavigationButtonImpl({ size, spaceOnLeft, spaceOnRight, iconPath, tooltip, enabled, onClick }: NavigationButtonImplProps) {
+    const leftBoundary = spaceOnLeft ? 'A 16 16 0 0 0 16 32' : 'L 1 0 L 1 32 L 16 32';
+    const rightBoundary = spaceOnRight ? 'A 16 16 0 0 0 16 0' : 'L 31 32 L 31 0 L 16 0';
+    const actuallyEnabled = enabled ?? true;
+    return (
+        <div className={actuallyEnabled ? 'kokopu-enabledNavigationButton' : 'kokopu-disabledNavigationButton'} title={tooltip}
+            onClick={actuallyEnabled ? onClick : undefined}
+        >
+            <svg viewBox="0 0 32 32" width={size} height={size}>
+                <path d={`M 16 0 ${leftBoundary} ${rightBoundary} Z ${iconPath}`} fill="currentcolor" />
+            </svg>
+        </div>
+    );
+}
+
+
+/**
+ * Return the height/width of the buttons assuming the given square size.
+ */
+function computeButtonSize(squareSize: number) {
+    return Math.round((squareSize * 2 + 116) / 7);
+}
+
+
+/**
+ * Return the width of the spacer between button groups, assuming the given square size.
+ */
+function computeSpacerSize(squareSize: number) {
+    return Math.round((squareSize * 2 + 116) / 14);
+}

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