kokopu-react 1.4.0 → 1.5.1

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      *
@@ -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;
@@ -84,10 +83,10 @@ export default class Chessboard extends React.Component {
 		// Compute the current position.
 		let info = this.getPositionAndMoveInfo();
 		if (info.positionError) {
-			return <ErrorBox title={i18n.INVALID_FEN_ERROR_TITLE} message={info.message}></ErrorBox>;
+			return <ErrorBox title={i18n.INVALID_FEN_ERROR_TITLE} message={info.message} />;
 		}
 		else if (info.moveError) {
-			return <ErrorBox title={i18n.INVALID_NOTATION_ERROR_TITLE} message={info.message}></ErrorBox>;
+			return <ErrorBox title={i18n.INVALID_NOTATION_ERROR_TITLE} message={info.message} />;
 		}
 		let { position, move, positionBefore } = info;
 
@@ -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

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