kokopu-react 1.4.1 → 1.5.0

package/graphic_test_app/common/test_app.js

@@ -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.4.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.1",
-		"prop-types": "^15.8.0",
+		"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.16.7",
-		"@babel/core": "^7.16.7",
-		"@babel/preset-env": "^7.16.7",
+		"@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.7.1",
-		"@emotion/styled": "^11.6.0",
-		"@mui/material": "^5.2.6",
-		"babel-loader": "^8.2.3",
+		"@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.0",
+		"copy-webpack-plugin": "^10.2.4",
 		"coveralls": "^3.1.1",
-		"css-loader": "^6.5.1",
-		"eslint": "^8.6.0",
-		"eslint-plugin-react": "^7.28.0",
+		"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.3",
+		"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.1.0",
-		"ssh2-sftp-client": "^7.2.1",
+		"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.65.0",
-		"webpack-cli": "^4.9.1"
+		"webpack": "^5.72.0",
+		"webpack-cli": "^4.9.2"
 	},
 	"scripts": {
 		"lint": "eslint doc_src graphic_test_app src test",

package/scripts/test_graphic/docker-compose.yml

@@ -2,7 +2,7 @@ version: "3.7"
 
 services:
   web-client:
-    image: selenium/standalone-firefox:4.1.1-20211217
+    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

@@ -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 = {
@@ -66,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

@@ -50,7 +50,7 @@ module.exports = {
 				use: 'null-loader',
 			},
 			{
-				test: /\.png$/i,
+				test: /\.(png|woff|woff2)$/i,
 				use: 'null-loader',
 			},
 		],

package/src/Chessboard.js

@@ -37,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;
@@ -420,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} 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} fontSize={fontSize}>{label}</text>;
+		return <text key={'file-' + label} className="kokopu-coordinate" x={x} y={y} fontSize={fontSize}>{label}</text>;
 	}
 
 	handleWindowResize() {
@@ -581,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

@@ -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;
+}