kokopu-react 1.2.0 → 1.4.1

package/src/TextMarkerIcon.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,9 +23,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import './css/label.css';
-
 import { MIN_SQUARE_SIZE, MAX_SQUARE_SIZE, sanitizeInteger, isValidSymbol } from './impl/util';
+import TextSymbol from './impl/TextSymbol';
 
 
 /**
@@ -39,9 +38,7 @@ export default function TextMarkerIcon(props) {
 	let viewBox = `0 0 ${size} ${size}`;
 	return (
 		<svg className="kokopu-textMarkerIcon" viewBox={viewBox} width={size} height={size}>
-			<text className="kokopu-label" x={size / 2} y={size / 2} fill={props.color} style={{ 'fontSize': size }}>
-				{props.symbol}
-			</text>
+			<TextSymbol x={size / 2} y={size / 2} size={size} symbol={props.symbol} color={props.color} />
 		</svg>
 	);
 }
@@ -54,7 +51,10 @@ TextMarkerIcon.propTypes = {
 	size: PropTypes.number.isRequired,
 
 	/**
-	 * Symbol to represent on the icon. Must be either a letter (upper-case or lower-case) or a digit.
+	 * Symbol to represent on the icon. Must be one of:
+	 *  - any letter from A to Z (either upper-case or lower-case),
+	 *  - any digit from 0 to 9,
+	 *  - any symbol code among `'plus'`, `'times'`, `'dot'`, or `'circle'`.
 	 */
 	symbol: PropTypes.string.isRequired,
 

package/src/css/arrow.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      *

package/src/css/chessboard.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      *

package/src/css/error_box.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      *

package/src/css/label.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      *

package/src/css/symbol.css

@@ -0,0 +1,25 @@
+/******************************************************************************
+ *                                                                            *
+ *    This file is part of Kokopu-React, a JavaScript chess library.          *
+ *    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      *
+ *    as published by the Free Software Foundation, either version 3 of       *
+ *    the License, or (at your option) any later version.                     *
+ *                                                                            *
+ *    This program 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-symbolCircle {
+	fill: transparent;
+}

package/src/i18n.js

@@ -0,0 +1,30 @@
+/******************************************************************************
+ *                                                                            *
+ *    This file is part of Kokopu-React, a JavaScript chess library.          *
+ *    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      *
+ *    as published by the Free Software Foundation, either version 3 of       *
+ *    the License, or (at your option) any later version.                     *
+ *                                                                            *
+ *    This program 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 i18n = {
+	INVALID_FEN_ERROR_TITLE: 'Invalid FEN string.',
+	INVALID_NOTATION_ERROR_TITLE: 'Invalid move notation.',
+	INVALID_POSITION_ATTRIBUTE_ERROR_MESSAGE: 'Invalid "position" attribute.',
+	INVALID_MOVE_ATTRIBUTE_ERROR_MESSAGE: 'Invalid "move" attribute.',
+};
+
+export default i18n;

package/src/impl/ArrowTip.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,7 +29,7 @@ import React from 'react';
  */
 export default function ArrowTip(props) {
 	return (
-		<marker id={props.id} markerWidth={4} markerHeight={4} refX={2.5} refY={2} orient="auto" style={{ fill: props.color }}>
+		<marker id={props.id} markerWidth={4} markerHeight={4} refX={2.5} refY={2} orient="auto" fill={props.color}>
 			<path d="M 4,2 L 0,4 L 1,2 L 0,0 Z" />
 		</marker>
 	);
@@ -45,9 +45,5 @@ ArrowTip.propTypes = {
 	/**
 	 * Color to use to colorize the shape (for example: `'green'`, `'#ff0000'`...).
 	 */
-	color: PropTypes.string,
-};
-
-ArrowTip.defaultProps = {
-	color: 'currentcolor',
+	color: PropTypes.string.isRequired,
 };

package/src/impl/TextSymbol.js

@@ -0,0 +1,77 @@
+/******************************************************************************
+ *                                                                            *
+ *    This file is part of Kokopu-React, a JavaScript chess library.          *
+ *    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      *
+ *    as published by the Free Software Foundation, either version 3 of       *
+ *    the License, or (at your option) any later version.                     *
+ *                                                                            *
+ *    This program 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 PropTypes from 'prop-types';
+import React from 'react';
+
+import '../css/label.css';
+import '../css/symbol.css';
+
+const SHAPE_THICKNESS_FACTOR = 0.1;
+const DOT_RADIUS_FACTOR = 0.15;
+const CIRCLE_RADIUS_FACTOR = 0.425;
+
+
+/**
+ * Symbol of a text marker.
+ */
+export default function TextSymbol(props) {
+	if (props.symbol === 'dot') {
+		return <circle cx={props.x} cy={props.y} r={props.size * DOT_RADIUS_FACTOR} fill={props.color} />;
+	}
+	else if (props.symbol === 'circle') {
+		let thickness = props.size * SHAPE_THICKNESS_FACTOR;
+		return <circle className="kokopu-symbolCircle" cx={props.x} cy={props.y} r={props.size * CIRCLE_RADIUS_FACTOR} stroke={props.color} strokeWidth={thickness} />;
+	}
+	else {
+		let symbol = props.symbol === 'plus' ? '+' : props.symbol === 'times' ? '\u00d7' : props.symbol;
+		return <text className="kokopu-label" x={props.x} y={props.y} fill={props.color} fontSize={props.size}>{symbol}</text>;
+	}
+}
+
+TextSymbol.propTypes = {
+
+	/**
+	 * X-coordinate of the center of the symbol.
+	 */
+	x: PropTypes.number.isRequired,
+
+	/**
+	 * Y-coordinate of the center of the symbol.
+	 */
+	y: PropTypes.number.isRequired,
+
+	/**
+	 * Size of the symbol (i.e. size of square in which the symbol is rendered).
+	 */
+	size: PropTypes.number.isRequired,
+
+	/**
+	 * Symbol code.
+	 */
+	symbol: PropTypes.string.isRequired,
+
+	/**
+	 * Color to use to colorize the shape (for example: `'green'`, `'#ff0000'`...).
+	 */
+	color: PropTypes.string.isRequired,
+};

package/src/impl/colorsets.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/src/impl/piecesets.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/src/impl/util.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      *
@@ -56,5 +56,5 @@ export function isValidColor(color) {
 
 
 export function isValidSymbol(symbol) {
-	return /^[A-Za-z0-9]$/.test(symbol);
+	return /^(?:[A-Za-z0-9]|plus|times|dot|circle)$/.test(symbol);
 }

package/src/index.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      *
@@ -21,7 +21,9 @@
 
 
 export { flattenSquareMarkers, parseSquareMarkers, flattenTextMarkers, parseTextMarkers, flattenArrowMarkers, parseArrowMarkers } from './markers';
+export { default as i18n } from './i18n';
 export { default as Chessboard } from './Chessboard';
+export { default as ErrorBox } from './ErrorBox';
 export { default as SquareMarkerIcon } from './SquareMarkerIcon';
 export { default as TextMarkerIcon } from './TextMarkerIcon';
 export { default as ArrowMarkerIcon } from './ArrowMarkerIcon';

package/src/markers.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      *
@@ -41,14 +41,14 @@ export function flattenSquareMarkers(markers) {
 /**
  * Transform a set of text markers defined as a "square -> (symbol, color)" struct into a comma-separated string.
  *
- * @param {object} markers For example: `{ e4: { symbol: 'A', color: 'g' }, d5: { symbol: 'z', color: 'r' }}`
- * @returns {string} For example: `'Rzd5,GAe4'`
+ * @param {object} markers For example: `{ e4: { symbol: 'A', color: 'g' }, d5: { symbol: 'z', color: 'r' }, h3: { symbol: 'plus', color: 'y' } }`
+ * @returns {string} For example: `'Rzd5,GAe4,Y(plus)h3'`
  */
 export function flattenTextMarkers(markers) {
 	return Object.entries(markers)
 		.filter(([ sq, desc ]) => isValidSquare(sq) && desc && isValidColor(desc.color) && isValidSymbol(desc.symbol))
 		.sort((a, b) => a[0].localeCompare(b[0]))
-		.map(([ sq, desc ]) => desc.color.toUpperCase() + desc.symbol + sq)
+		.map(([ sq, desc ]) => desc.color.toUpperCase() + (desc.symbol.length === 1 ? desc.symbol : '(' + desc.symbol + ')') + sq)
 		.join(',');
 }
 
@@ -91,12 +91,13 @@ export function parseSquareMarkers(markers) {
 /**
  * Parse a set of text markers defined as a comma-separated string into a "square -> (symbol, color)" struct.
  *
- * @param {string} markers For example: `'Rzd5,GAe4'`
- * @returns {object} For example: `{ e4: { symbol: 'A', color: 'g' }, d5: { symbol: 'z', color: 'r' }}`
+ * @param {string} markers For example: `'Rzd5,GAe4,Y(plus)h3'`
+ * @returns {object} For example: `{ e4: { symbol: 'A', color: 'g' }, d5: { symbol: 'z', color: 'r' }, h3: { symbol: 'plus', color: 'y' } }`
  */
 export function parseTextMarkers(markers) {
 	return parseMarkers(markers, token => {
-		return /^([GRY])([A-Za-z0-9])([a-h][1-8])$/.test(token) ? { key: RegExp.$3, value: { symbol: RegExp.$2, color: RegExp.$1.toLowerCase() } } : undefined;
+		return /^([GRY])(?:([A-Za-z0-9])|\((plus|times|dot|circle)\))([a-h][1-8])$/.test(token) ?
+			{ key: RegExp.$4, value: { symbol: RegExp.$2 || RegExp.$3, color: RegExp.$1.toLowerCase() } } : undefined;
 	});
 }
 

package/test/1_markers.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      *
@@ -65,6 +65,13 @@ describe('Flatten text markers', () => {
 		h7: { symbol: 'x', color: 'r' },
 		d2: { symbol: 'L', color: 'r' },
 	})).is('G2a1,YMc5,RLd2,Rxh7,Ywh8'); });
+	it('Multi-character symbols', () => { test.value(flattenTextMarkers({
+		a1: { symbol: 'A', color: 'y' },
+		a7: { symbol: 'plus', color: 'g' },
+		b3: { symbol: 'times', color: 'r' },
+		g5: { symbol: 'dot', color: 'y' },
+		h3: { symbol: 'circle', color: 'g' },
+	})).is('YAa1,G(plus)a7,R(times)b3,Y(dot)g5,G(circle)h3'); });
 	it('<empty>', () => { test.value(flattenTextMarkers({})).is(''); });
 
 	it('Wrong square', () => { test.value(flattenTextMarkers({
@@ -83,6 +90,10 @@ describe('Flatten text markers', () => {
 		d8: { symbol: '-', color: 'r' },
 		c1: { symbol: 'abcd', color: 'r' },
 	})).is('G0a2'); });
+	it('Wrong multi-character symbol', () => { test.value(flattenTextMarkers({
+		a2: { symbol: '0', color: 'g' },
+		b5: { symbol: 'whatever', color: 'r' },
+	})).is('G0a2'); });
 });
 
 
@@ -100,6 +111,13 @@ describe('Parse text markers', () => {
 		h7: { symbol: 'x', color: 'r' },
 		d2: { symbol: 'L', color: 'r' },
 	}); });
+	it('Multi-character symbols', () => { test.value(parseTextMarkers('YAa1,G(plus)a7, R(times)b3  ,Y(dot)g5,G(circle)h3')).is({
+		a1: { symbol: 'A', color: 'y' },
+		a7: { symbol: 'plus', color: 'g' },
+		b3: { symbol: 'times', color: 'r' },
+		g5: { symbol: 'dot', color: 'y' },
+		h3: { symbol: 'circle', color: 'g' },
+	}); });
 	it('<empty>', () => { test.value(parseTextMarkers('')).is({}); });
 	it('<blank>', () => { test.value(parseTextMarkers(' ')).is({}); });
 
@@ -107,6 +125,7 @@ describe('Parse text markers', () => {
 	it('Duplicated square', () => { test.value(parseTextMarkers('Rka3,Gba3')).is({ a3: { symbol: 'b', color: 'g' } }); });
 	it('Wrong color', () => { test.value(parseTextMarkers('G3a6,BAg5')).is({ a6: { symbol: '3', color: 'g' } }); });
 	it('Wrong symbol', () => { test.value(parseTextMarkers('Rb2,RAg5,G.d3,Yabcde7')).is({ g5: { symbol: 'A', color: 'r' } }); });
+	it('Wrong multi-character symbol', () => { test.value(parseTextMarkers('RZb2,Y(whatever)e4')).is({ b2: { symbol: 'Z', color: 'r' } }); });
 	it('Wrong format', () => { test.value(parseTextMarkers('Something RHa2 invalid, Yqe4, G g3')).is({ e4: { symbol: 'q', color: 'y' } }); });
 });
 

package/test/2_chessboard_util.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/test/3_marker_icons_graphic.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      *
@@ -36,5 +36,5 @@ describe('Marker icons graphic', function() {
 	});
 
 	itChecksScreenshots(browserContext, '01_marker_icons', [ 'default square', 'colorized square', 'wrapped square', 'default text', 'colorized text', 'wrapped text',
-		'default arrow', 'colorized arrow', 'wrapped arrow' ]);
+		'default arrow', 'colorized arrow', 'wrapped arrow', 'colorized symbol', 'wrapped symbol' ]);
 });

package/test/4_chessboard_graphic.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/test/5_chessboard_interaction.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/test/6_chessboard_play_moves.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/test/common/graphic.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      *