kokopu-react 3.0.2 → 3.2.0

package/scripts/test-graphic.webpack.config.js

@@ -29,72 +29,72 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 // List all the files corresponding to /test/graphic_test_app/{number}_*/*.tsx, each of them corresponding to a entry.
 const items = fs.readdirSync('./test/graphic_test_app', { withFileTypes: true })
-	.filter(file => file.isDirectory() && /^\d+_/.test(file.name))
-	.flatMap(file => fs.readdirSync(`./test/graphic_test_app/${file.name}`)
-		.filter(subFile => path.extname(subFile) === '.tsx')
-		.map(subFile => `${file.name}/${path.basename(subFile, '.tsx')}`)
-	);
+    .filter(file => file.isDirectory() && /^\d+_/.test(file.name))
+    .flatMap(file => fs.readdirSync(`./test/graphic_test_app/${file.name}`)
+        .filter(subFile => path.extname(subFile) === '.tsx')
+        .map(subFile => `${file.name}/${path.basename(subFile, '.tsx')}`)
+    );
 const entries = {};
 items.forEach(item => {
-	entries[item] = `./test/graphic_test_app/${item}`;
+    entries[item] = `./test/graphic_test_app/${item}`;
 });
 
 // Define the outputs.
 const plugins = items.map(item => new HtmlWebpackPlugin({
-	title: 'Test ' + item,
-	chunks: [ item ],
-	filename: item + '/index.html',
+    title: 'Test ' + item,
+    chunks: [ item ],
+    filename: item + '/index.html',
 }));
 plugins.push(new CopyWebpackPlugin({
-	patterns: [
-		{ from: './test/graphic_test_app/common/heartbeat.txt', to: 'heartbeat.txt' },
-		{ from: './test/graphic_test_app/common/smiley.png', to: 'smiley.png' },
-	],
+    patterns: [
+        { from: './test/graphic_test_app/common/heartbeat.txt', to: 'heartbeat.txt' },
+        { from: './test/graphic_test_app/common/smiley.png', to: 'smiley.png' },
+    ],
 }));
 
 module.exports = {
-	mode: 'development',
-	devtool: 'inline-source-map',
-	entry: entries,
-	output: {
-		path: path.resolve(__dirname, '../build/test_graphic'),
-		hashFunction: "xxhash64", // FIXME The default hash function used by Webpack has been removed from OpenSSL.
-		clean: true,
-	},
-	plugins: plugins,
-	module: {
-		rules: [
-			{
-				test: /\.js$/i,
-				use: 'coverage-istanbul-loader',
-			},
-			{
-				test: /\.tsx?$/i,
-				use: [
-					'coverage-istanbul-loader',
-					{
-						loader: 'ts-loader',
-						options: {
-							configFile: path.resolve(__dirname, 'test-graphic.tsconfig.json'),
-						},
-					},
-				],
-			},
-			{
-				test: /\.css$/i,
-				use: [ 'style-loader', 'css-loader' ],
-			},
-			{
-				test: /\.(png|woff|woff2)$/i,
-				type: 'asset/resource',
-			},
-			{
-				test: /\.pgn$/i,
-				type: 'asset/source',
-			},
-		],
-	},
-	resolve: {
-		extensions: [ '.js', '.ts', '.tsx' ],
-	},
+    mode: 'development',
+    devtool: 'inline-source-map',
+    entry: entries,
+    output: {
+        path: path.resolve(__dirname, '../build/test_graphic'),
+        hashFunction: "xxhash64", // FIXME The default hash function used by Webpack has been removed from OpenSSL.
+        clean: true,
+    },
+    plugins: plugins,
+    module: {
+        rules: [
+            {
+                test: /\.js$/i,
+                use: 'coverage-istanbul-loader',
+            },
+            {
+                test: /\.tsx?$/i,
+                use: [
+                    'coverage-istanbul-loader',
+                    {
+                        loader: 'ts-loader',
+                        options: {
+                            configFile: path.resolve(__dirname, 'test-graphic.tsconfig.json'),
+                        },
+                    },
+                ],
+            },
+            {
+                test: /\.css$/i,
+                use: [ 'style-loader', 'css-loader' ],
+            },
+            {
+                test: /\.(png|woff|woff2)$/i,
+                type: 'asset/resource',
+            },
+            {
+                test: /\.pgn$/i,
+                type: 'asset/source',
+            },
+        ],
+    },
+    resolve: {
+        extensions: [ '.js', '.ts', '.tsx' ],
+    },
 };

package/scripts/test-headless.webpack.config.js

@@ -25,33 +25,33 @@
 const path = require('path');
 
 module.exports = {
-	mode: 'development',
-	devtool: 'inline-source-map',
-	entry: {
-		index: './dist/lib/index',
-	},
-	output: {
-		path: path.resolve(__dirname, '../build/test_headless'),
-		library: {
-			type: 'commonjs2',
-		},
-		hashFunction: "xxhash64", // FIXME The default hash function used by Webpack has been removed from OpenSSL.
-		clean: true,
-	},
-	module: {
-		rules: [
-			{
-				test: /\.js$/i,
-				use: 'coverage-istanbul-loader',
-			},
-			{
-				test: /\.css$/i,
-				use: 'null-loader',
-			},
-			{
-				test: /\.(png|woff|woff2)$/i,
-				use: 'null-loader',
-			},
-		],
-	},
+    mode: 'development',
+    devtool: 'inline-source-map',
+    entry: {
+        index: './dist/lib/index',
+    },
+    output: {
+        path: path.resolve(__dirname, '../build/test_headless'),
+        library: {
+            type: 'commonjs2',
+        },
+        hashFunction: "xxhash64", // FIXME The default hash function used by Webpack has been removed from OpenSSL.
+        clean: true,
+    },
+    module: {
+        rules: [
+            {
+                test: /\.js$/i,
+                use: 'coverage-istanbul-loader',
+            },
+            {
+                test: /\.css$/i,
+                use: 'null-loader',
+            },
+            {
+                test: /\.(png|woff|woff2)$/i,
+                use: 'null-loader',
+            },
+        ],
+    },
 };

package/src/chessboard/BoardProperties.ts

@@ -0,0 +1,131 @@
+/*!
+ * -------------------------------------------------------------------------- *
+ *                                                                            *
+ *    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 { AnnotationColor } from '../types';
+import { DEFAULT_COLORSET } from './colorsets';
+import { DEFAULT_PIECESET } from './piecesets';
+
+
+/**
+ * Define a limit applicable to the parameters of a {@link Chessboard} on small-screen devices.
+ */
+export interface SmallScreenLimit {
+    width: number;
+    squareSize?: number;
+    coordinateVisible?: boolean;
+    turnVisible?: boolean;
+}
+
+
+/**
+ * Properties in relation to the appearance of a `Chessboard` component (excluding properties related to move display).
+ */
+export interface StaticBoardGraphicProps {
+
+    /**
+     * Size of the squares (in pixels). Must be an integer between `Chessboard.minSquareSize()` and `Chessboard.maxSquareSize()`.
+     */
+    squareSize: number;
+
+    /**
+     * Whether the row and column coordinates are visible or not.
+     */
+    coordinateVisible: boolean;
+
+    /**
+     * Whether the turn flag is visible or not.
+     */
+    turnVisible: boolean;
+
+    /**
+     * Color theme ID. Must be a property of `Chessboard.colorsets()`.
+     */
+    colorset: string;
+
+    /**
+     * Piece theme ID. Must be a property of `Chessboard.piecesets()`.
+     */
+    pieceset: string;
+
+    /**
+     * Limits applicable on small-screen devices. For instance, if set to
+     * ```
+     * [
+     *   { width: 768, squareSize: 40 },
+     *   { width: 375, squareSize: 24, coordinateVisible: false }
+     * ]
+     * ```
+     * then on screens with resolution ≤768 pixels, the square size will be limited to 40 (whatever the value
+     * of the `squareSize` attribute); in addition, on screens with resolution ≤375 pixels, the square size
+     * will be limited to 24 and the row and column coordinates will always be hidden (whatever the value of the
+     * `coordinateVisible` attribute).
+     */
+    smallScreenLimits?: SmallScreenLimit[];
+}
+
+
+/**
+ * Properties in relation to the appearance of a `Chessboard` component (including properties related to move display).
+ */
+export interface DynamicBoardGraphicProps extends StaticBoardGraphicProps {
+
+    /**
+     * Whether moves are highlighted with an arrow or not.
+     */
+    moveArrowVisible: boolean;
+
+    /**
+     * Color of the move arrow.
+     */
+    moveArrowColor: AnnotationColor;
+
+    /**
+     * Whether moves are animated or not.
+     */
+    animated: boolean;
+}
+
+
+export const DEFAULT_SQUARE_SIZE = 40;
+
+
+export function defaultStaticBoardProps(): StaticBoardGraphicProps {
+    return {
+        squareSize: DEFAULT_SQUARE_SIZE,
+        coordinateVisible: true,
+        turnVisible: true,
+        colorset: DEFAULT_COLORSET,
+        pieceset: DEFAULT_PIECESET,
+    };
+}
+
+
+export function defaultDynamicBoardProps(): DynamicBoardGraphicProps {
+    return {
+        ...defaultStaticBoardProps(),
+        moveArrowVisible: true,
+        moveArrowColor: 'b',
+        animated: false,
+    };
+}

package/src/chessboard/Chessboard.css

@@ -23,39 +23,39 @@
 
 
 .kokopu-coordinate {
-	fill: currentcolor;
-	font-style: normal;
-	font-family: sans-serif;
-	text-anchor: middle;
-	dominant-baseline: central;
-	letter-spacing: 0px;
+    fill: currentcolor;
+    font-style: normal;
+    font-family: sans-serif;
+    text-anchor: middle;
+    dominant-baseline: central;
+    letter-spacing: 0px;
 }
 
 .kokopu-annotation {
-	opacity: 0.8;
+    opacity: 0.8;
 }
 
 .kokopu-hoveredSquare,
 .kokopu-handle {
-	fill: transparent;
+    fill: transparent;
 }
 
 .kokopu-clickable {
-	cursor: pointer;
+    cursor: pointer;
 }
 
 .kokopu-pieceDraggable {
-	cursor: grab;
+    cursor: grab;
 }
 
 .kokopu-pieceDraggable.kokopu-dragging {
-	cursor: grabbing;
+    cursor: grabbing;
 }
 
 .kokopu-arrowDraggable {
-	cursor: crosshair;
+    cursor: crosshair;
 }
 
 .kokopu-drawerMask {
-	opacity: 0.5;
+    opacity: 0.5;
 }