kokopu-react 1.3.1 → 1.5.0

package/graphic_test_app/common/test_app.css

@@ -1,7 +1,7 @@
 /******************************************************************************
  *                                                                            *
  *    This file is part of Kokopu-React, a JavaScript chess library.          *
- *    Copyright (C) 2021  Yoann Le Montagner <yo35 -at- melix.net>            *
+ *    Copyright (C) 2021-2022  Yoann Le Montagner <yo35 -at- melix.net>       *
  *                                                                            *
  *    This program is free software: you can redistribute it and/or           *
  *    modify it under the terms of the GNU Lesser General Public License      *
@@ -21,11 +21,27 @@
 
 
 .test-item,
+.test-item-container,
 #test-app {
 	display: inline-block;
-	line-height: 0px;
 }
 
-.test-item {
-	margin: 3px;
+body {
+	background-color: lightgray;
+}
+
+.test-item-container {
+	margin: 2px;
+	padding: 3px;
+	background-color: white;
+}
+
+#sandbox {
+	padding: 3px;
+	background-color: lightgoldenrodyellow;
+	height: 100px;
+}
+
+.width-600 .test-item {
+	width: 600px;
 }

package/graphic_test_app/common/test_app.js

@@ -1,7 +1,7 @@
 /******************************************************************************
  *                                                                            *
  *    This file is part of Kokopu-React, a JavaScript chess library.          *
- *    Copyright (C) 2021  Yoann Le Montagner <yo35 -at- melix.net>            *
+ *    Copyright (C) 2021-2022  Yoann Le Montagner <yo35 -at- melix.net>       *
  *                                                                            *
  *    This program is free software: you can redistribute it and/or           *
  *    modify it under the terms of the GNU Lesser General Public License      *
@@ -25,19 +25,19 @@ import ReactDOM from 'react-dom';
 import './test_app.css';
 
 
-function flattenMultiElements(elements) {
+function flattenMultiElements(elements, containerClassName) {
 	let items = [];
 	for (let i = 0; i < elements.length; ++i) {
-		items.push(<div key={'test-item-' + i} className="test-item" id={'test-item-' + i}>{elements[i]}</div>);
+		items.push(<div key={i} className="test-item-container"><div className="test-item" id={'test-item-' + i}>{elements[i]}</div></div>);
 	}
-	return <div>{items}</div>;
+	return <div className={Array.isArray(containerClassName) ? containerClassName.join(' ') : containerClassName}>{items}</div>;
 }
 
 
 /**
  * Create an DIV element at the root of the current document, and render the given elements in it.
  */
-export default function(elements) {
+export default function(elements, containerClassName) {
 
 	// Create the main anchor.
 	let anchor = document.createElement('div');
@@ -45,7 +45,7 @@ export default function(elements) {
 	document.body.appendChild(anchor);
 
 	// Render the content.
-	let content = Array.isArray(elements) ? flattenMultiElements(elements) : elements;
+	let content = flattenMultiElements(elements, containerClassName);
 	ReactDOM.render(content, anchor);
 
 	// Append a text area

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "kokopu-react",
-	"version": "1.3.1",
+	"version": "1.5.0",
 	"description": "A React-based library to create and display chessboard components.",
 	"keywords": [
 		"chess",
@@ -29,41 +29,42 @@
 		".nycrc.yml"
 	],
 	"dependencies": {
-		"kokopu": "^2.2.0",
-		"prop-types": "^15.7.2",
+		"htmlparser2": "^7.2.0",
+		"kokopu": "^2.7.0",
+		"prop-types": "^15.8.1",
 		"react": "^17.0.2",
 		"react-draggable": "^4.4.4",
 		"react-motion": "^0.5.2"
 	},
 	"devDependencies": {
-		"@babel/cli": "^7.15.7",
-		"@babel/core": "^7.15.5",
-		"@babel/preset-env": "^7.15.6",
-		"@babel/preset-react": "^7.14.5",
-		"@emotion/react": "^11.4.1",
-		"@emotion/styled": "^11.3.0",
-		"@mui/material": "^5.0.1",
-		"babel-loader": "^8.2.2",
-		"babel-plugin-istanbul": "^6.0.0",
-		"copy-webpack-plugin": "^9.0.1",
+		"@babel/cli": "^7.17.6",
+		"@babel/core": "^7.17.9",
+		"@babel/preset-env": "^7.16.11",
+		"@babel/preset-react": "^7.16.7",
+		"@emotion/react": "^11.9.0",
+		"@emotion/styled": "^11.8.1",
+		"@mui/material": "^5.6.2",
+		"babel-loader": "^8.2.5",
+		"babel-plugin-istanbul": "^6.1.1",
+		"copy-webpack-plugin": "^10.2.4",
 		"coveralls": "^3.1.1",
-		"css-loader": "^6.3.0",
-		"eslint": "^7.32.0",
-		"eslint-plugin-react": "^7.26.0",
-		"html-webpack-plugin": "^5.3.2",
+		"css-loader": "^6.7.1",
+		"eslint": "^8.13.0",
+		"eslint-plugin-react": "^7.29.4",
+		"html-webpack-plugin": "^5.5.0",
 		"img-diff-js": "^0.5.2",
-		"mocha": "^9.1.2",
+		"mocha": "^9.2.2",
 		"null-loader": "^4.0.1",
 		"nyc": "^15.1.0",
-		"prompt": "^1.2.0",
+		"prompt": "^1.3.0",
 		"react-dom": "^17.0.2",
-		"react-styleguidist": "^11.1.7",
-		"selenium-webdriver": "^4.0.0-rc-1",
-		"ssh2-sftp-client": "^7.0.4",
-		"style-loader": "^3.3.0",
+		"react-styleguidist": "^11.2.0",
+		"selenium-webdriver": "^4.1.1",
+		"ssh2-sftp-client": "^8.0.0",
+		"style-loader": "^3.3.1",
 		"unit.js": "^2.1.1",
-		"webpack": "^5.54.0",
-		"webpack-cli": "^4.8.0"
+		"webpack": "^5.72.0",
+		"webpack-cli": "^4.9.2"
 	},
 	"scripts": {
 		"lint": "eslint doc_src graphic_test_app src test",

package/scripts/test_graphic/clean-graphic-output.js

@@ -1,7 +1,7 @@
 /******************************************************************************
  *                                                                            *
  *    This file is part of Kokopu-React, a JavaScript chess library.          *
- *    Copyright (C) 2021  Yoann Le Montagner <yo35 -at- melix.net>            *
+ *    Copyright (C) 2021-2022  Yoann Le Montagner <yo35 -at- melix.net>       *
  *                                                                            *
  *    This program is free software: you can redistribute it and/or           *
  *    modify it under the terms of the GNU Lesser General Public License      *

package/scripts/test_graphic/docker-compose.yml

@@ -2,7 +2,7 @@ version: "3.7"
 
 services:
   web-client:
-    image: selenium/standalone-firefox:4.0.0-rc-1-prerelease-20210804
+    image: selenium/standalone-firefox:4.1.1-20220121
     shm_size: '2gb'
     ports:
       - 4444:4444 # Driver (http://localhost:4444)

package/scripts/test_graphic/webpack-config.js

@@ -1,7 +1,7 @@
 /******************************************************************************
  *                                                                            *
  *    This file is part of Kokopu-React, a JavaScript chess library.          *
- *    Copyright (C) 2021  Yoann Le Montagner <yo35 -at- melix.net>            *
+ *    Copyright (C) 2021-2022  Yoann Le Montagner <yo35 -at- melix.net>       *
  *                                                                            *
  *    This program is free software: you can redistribute it and/or           *
  *    modify it under the terms of the GNU Lesser General Public License      *
@@ -39,7 +39,7 @@ var plugins = items.map(item => new HtmlWebpackPlugin({
 	filename: item + '/index.html',
 }));
 plugins.push(new CopyWebpackPlugin({
-	patterns: [ { from: './graphic_test_app/common/healthcheck.txt', to: 'healthcheck.txt' } ],
+	patterns: [ { from: './graphic_test_app/common/heartbeat.txt', to: 'heartbeat.txt' } ],
 }));
 
 module.exports = {
@@ -47,6 +47,7 @@ module.exports = {
 	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.
 	},
 	plugins: plugins,
 	module: {
@@ -65,9 +66,13 @@ module.exports = {
 				use: ['style-loader', 'css-loader'],
 			},
 			{
-				test: /\.(png|txt)$/i,
+				test: /\.(png|woff|woff2|txt)$/i,
 				type: 'asset/resource',
 			},
+			{
+				test: /\.pgn$/i,
+				type: 'asset/source',
+			},
 		],
 	}
 };

package/scripts/test_headless.webpack-config.js

@@ -1,7 +1,7 @@
 /******************************************************************************
  *                                                                            *
  *    This file is part of Kokopu-React, a JavaScript chess library.          *
- *    Copyright (C) 2021  Yoann Le Montagner <yo35 -at- melix.net>            *
+ *    Copyright (C) 2021-2022  Yoann Le Montagner <yo35 -at- melix.net>       *
  *                                                                            *
  *    This program is free software: you can redistribute it and/or           *
  *    modify it under the terms of the GNU Lesser General Public License      *
@@ -32,6 +32,7 @@ module.exports = {
 		library: {
 			type: 'commonjs2',
 		},
+		hashFunction: "xxhash64", // FIXME The default hash function used by Webpack has been removed from OpenSSL.
 	},
 	module: {
 		rules: [
@@ -49,7 +50,7 @@ module.exports = {
 				use: 'null-loader',
 			},
 			{
-				test: /\.png$/i,
+				test: /\.(png|woff|woff2)$/i,
 				use: 'null-loader',
 			},
 		],

package/src/ArrowMarkerIcon.js

@@ -1,7 +1,7 @@
 /******************************************************************************
  *                                                                            *
  *    This file is part of Kokopu-React, a JavaScript chess library.          *
- *    Copyright (C) 2021  Yoann Le Montagner <yo35 -at- melix.net>            *
+ *    Copyright (C) 2021-2022  Yoann Le Montagner <yo35 -at- melix.net>       *
  *                                                                            *
  *    This program is free software: you can redistribute it and/or           *
  *    modify it under the terms of the GNU Lesser General Public License      *
@@ -54,7 +54,7 @@ export default class ArrowMarkerIcon extends React.Component {
 					<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={this.props.color}
-					style={{ 'strokeWidth': halfThickness * 2, 'markerEnd': `url(#${this.arrowTipId})` }} />
+					strokeWidth={halfThickness * 2} markerEnd={`url(#${this.arrowTipId})`} />
 			</svg>
 		);
 	}

package/src/Chessboard.js

@@ -1,7 +1,7 @@
 /******************************************************************************
  *                                                                            *
  *    This file is part of Kokopu-React, a JavaScript chess library.          *
- *    Copyright (C) 2021  Yoann Le Montagner <yo35 -at- melix.net>            *
+ *    Copyright (C) 2021-2022  Yoann Le Montagner <yo35 -at- melix.net>       *
  *                                                                            *
  *    This program is free software: you can redistribute it and/or           *
  *    modify it under the terms of the GNU Lesser General Public License      *
@@ -29,6 +29,7 @@ import kokopu from 'kokopu';
 import colorsets from './impl/colorsets';
 import piecesets from './impl/piecesets';
 import ArrowTip from './impl/ArrowTip';
+import TextSymbol from './impl/TextSymbol';
 import ErrorBox from './ErrorBox';
 import i18n from './i18n';
 import { parseSquareMarkers, parseTextMarkers, parseArrowMarkers } from './markers';
@@ -36,7 +37,6 @@ import { MIN_SQUARE_SIZE, MAX_SQUARE_SIZE, sanitizeInteger, generateRandomId, is
 
 import './css/chessboard.css';
 import './css/arrow.css';
-import './css/label.css';
 
 const TURN_FLAG_SPACING_FACTOR = 0.1;
 const RANK_COORDINATE_WIDTH_FACTOR = 1;
@@ -272,7 +272,7 @@ export default class Chessboard extends React.Component {
 		return (
 			<line
 				className="kokopu-annotation kokopu-arrow kokopu-arrowDraggable kokopu-dragging" x1={xFrom} y1={yFrom} x2={xTo} y2={yTo}
-				stroke={colorset[this.props.editedArrowColor]} style={{ 'strokeWidth': strokeWidth, 'markerEnd': `url(#${arrowTipId})` }}
+				stroke={colorset[this.props.editedArrowColor]} strokeWidth={strokeWidth} markerEnd={`url(#${arrowTipId})`}
 			/>
 		);
 	}
@@ -347,9 +347,9 @@ export default class Chessboard extends React.Component {
 			x += squareSize / 2;
 			y += squareSize / 2;
 			result.push(
-				<text key={'txtm-' + sq} className="kokopu-annotation kokopu-label" x={x} y={y} fill={colorset[value.color]} style={{ 'fontSize': squareSize }}>
-					{value.symbol}
-				</text>
+				<g key={'txtm-' + sq} className="kokopu-annotation">
+					<TextSymbol x={x} y={y} size={squareSize} symbol={value.symbol} color={colorset[value.color]} />
+				</g>
 			);
 		});
 		return result;
@@ -376,7 +376,7 @@ export default class Chessboard extends React.Component {
 			result.push(
 				<line
 					key={'arm-' + vect} className="kokopu-annotation kokopu-arrow" x1={xFrom} y1={yFrom} x2={xTo} y2={yTo}
-					stroke={colorset[color]} style={{ 'strokeWidth': strokeWidth, 'markerEnd': `url(#${arrowTipId})` }}
+					stroke={colorset[color]} strokeWidth={strokeWidth} markerEnd={`url(#${arrowTipId})`}
 				/>
 			);
 		});
@@ -400,7 +400,7 @@ export default class Chessboard extends React.Component {
 		return (
 			<line
 				className="kokopu-annotation kokopu-arrow" x1={xFrom} y1={yFrom} x2={x} y2={y} stroke={colorset['highlight']}
-				style={{ 'strokeWidth': squareSize * STROKE_THICKNESS_FACTOR, 'markerEnd': `url(#${this.getArrowTipId('highlight')})` }}
+				strokeWidth={squareSize * STROKE_THICKNESS_FACTOR} markerEnd={`url(#${this.getArrowTipId('highlight')})`}
 			/>
 		);
 	}
@@ -419,14 +419,14 @@ export default class Chessboard extends React.Component {
 		let x = Math.round(-RANK_COORDINATE_WIDTH_FACTOR * fontSize) / 2;
 		let y = (this.props.flipped ? rank + 0.5 : 7.5 - rank) * squareSize;
 		let label = RANK_LABELS[rank];
-		return <text key={'rank-' + label} className="kokopu-coordinate kokopu-label" x={x} y={y} style={{ 'fontSize': fontSize }}>{label}</text>;
+		return <text key={'rank-' + label} className="kokopu-coordinate" x={x} y={y} fontSize={fontSize}>{label}</text>;
 	}
 
 	renderFileCoordinate(squareSize, fontSize, file) {
 		let x = (this.props.flipped ? 7.5 - file : 0.5 + file) * squareSize;
 		let y = 8 * squareSize + Math.round(FILE_COORDINATE_HEIGHT_FACTOR * fontSize) / 2;
 		let label = FILE_LABELS[file];
-		return <text key={'file-' + label} className="kokopu-coordinate kokopu-label" x={x} y={y} style={{ 'fontSize': fontSize }}>{label}</text>;
+		return <text key={'file-' + label} className="kokopu-coordinate" x={x} y={y} fontSize={fontSize}>{label}</text>;
 	}
 
 	handleWindowResize() {
@@ -580,7 +580,7 @@ export default class Chessboard extends React.Component {
 	}
 
 	/**
-	 * Return information regarding the current displayed position and move, or parsing error message if something went wrong.
+	 * Return information regarding the currently displayed position and move, or parsing error message if something went wrong.
 	 */
 	getPositionAndMoveInfo() {
 

package/src/ErrorBox.js

@@ -1,7 +1,7 @@
 /******************************************************************************
  *                                                                            *
  *    This file is part of Kokopu-React, a JavaScript chess library.          *
- *    Copyright (C) 2021  Yoann Le Montagner <yo35 -at- melix.net>            *
+ *    Copyright (C) 2021-2022  Yoann Le Montagner <yo35 -at- melix.net>       *
  *                                                                            *
  *    This program is free software: you can redistribute it and/or           *
  *    modify it under the terms of the GNU Lesser General Public License      *
@@ -23,21 +23,31 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
+import i18n from './i18n';
+
 import './css/error_box.css';
 
+const BACKWARD_CHARACTERS = 5;
+const FORWARD_CHARACTERS = 36;
+
+
 
 /**
  * Display an error message.
  */
 export default function ErrorBox(props) {
+	let excerpt = typeof props.text === 'string' && props.errorIndex >= 0 && props.errorIndex < props.text.length ?
+		<div className="kokopu-errorExcerpt">{ellipsisAt(props.text, props.errorIndex, BACKWARD_CHARACTERS, FORWARD_CHARACTERS, props.lineNumber)}</div> : undefined;
 	return (
 		<div className="kokopu-errorBox">
 			<div className="kokopu-errorTitle">{props.title}</div>
 			<div className="kokopu-errorMessage">{props.message}</div>
+			{excerpt}
 		</div>
 	);
 }
 
+
 ErrorBox.propTypes = {
 
 	/**
@@ -49,4 +59,73 @@ ErrorBox.propTypes = {
 	 * Additional message providing details about the error.
 	 */
 	message: PropTypes.string.isRequired,
+
+	/**
+	 * Raw text whose processing results in the error.
+	 */
+	text: PropTypes.string,
+
+	/**
+	 * Index of the character within `text` that results in the error.
+	 */
+	errorIndex: PropTypes.number,
+
+	/**
+	 * Index (1-based) of the line in which is the character that results in the error.
+	 */
+	lineNumber: PropTypes.number,
 };
+
+
+/**
+ * Ellipsis function.
+ *
+ * Example: if `text` is `0123456789`, then `ellipsis(text, 5, 1, 3)` returns
+ * the following string:
+ *
+ * ```
+ * ...45678...
+ *     ^
+ * ```
+ *
+ * @param {string} text Text from a substring must be extracted.
+ * @param {number} pos Index of the character in `text` around which the substring must be extracted.
+ * @param {number} backwardCharacters Number of characters to keep before `pos`.
+ * @param {number} forwardCharacters Number of characters to keep after `pos`.
+ * @returns {string}
+ */
+function ellipsisAt(text, pos, backwardCharacters, forwardCharacters, lineNumber) {
+
+	// p1 => begin of the extracted sub-string
+	let p1 = pos;
+	let e1 = '... ';
+	while (p1 > pos - backwardCharacters) {
+		--p1;
+		if (p1 < 0 || text.charAt(p1) === '\n' || text.charAt(p1) === '\r') {
+			++p1;
+			e1 = '';
+			break;
+		}
+	}
+
+	// p2 => one character after the end of the extracted sub-string
+	let p2 = pos;
+	let e2 = ' ...';
+	while (p2 < pos + forwardCharacters) {
+		++p2;
+		if (p2 >= text.length || text.charAt(p2) === '\n' || text.charAt(p2) === '\r') {
+			--p2;
+			e2 = '';
+			break;
+		}
+	}
+
+	// Extract the sub-string around the requested position.
+	let excerpt = e1 + text.substring(p1, p2 + 1) + e2;
+	excerpt = excerpt.replace(/\n|\r|\t/g, ' ');
+	let secondLine = Array(1 + e1.length + pos - p1).join(' ') + '^';
+	if (lineNumber) {
+		secondLine += ' (' + i18n.LINE.replace(/\{0\}/g, lineNumber) + ')';
+	}
+	return excerpt + '\n' + secondLine;
+}