kokopu-react 1.1.0 → 1.4.0

package/graphics/logo-small.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <rect x="0" y="0" width="24" height="24" fill="#282c34" />
+    <g transform="matrix(0.04515812,0,0,0.04515812,-7.0115685,-1.3871247)">
+        <path fill="#61DAFB" d="M666.3,296.5c0-32.5-40.7-63.3-103.1-82.4c14.4-63.6,8-114.2-20.2-130.4c-6.5-3.8-14.1-5.6-22.4-5.6v22.3   c4.6,0,8.3,0.9,11.4,2.6c13.6,7.8,19.5,37.5,14.9,75.7c-1.1,9.4-2.9,19.3-5.1,29.4c-19.6-4.8-41-8.5-63.5-10.9   c-13.5-18.5-27.5-35.3-41.6-50c32.6-30.3,63.2-46.9,84-46.9l0-22.3c0,0,0,0,0,0c-27.5,0-63.5,19.6-99.9,53.6   c-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7,0,51.4,16.5,84,46.6c-14,14.7-28,31.4-41.3,49.9c-22.6,2.4-44,6.1-63.6,11   c-2.3-10-4-19.7-5.2-29c-4.7-38.2,1.1-67.9,14.6-75.8c3-1.8,6.9-2.6,11.5-2.6l0-22.3c0,0,0,0,0,0c-8.4,0-16,1.8-22.6,5.6   c-28.1,16.2-34.4,66.7-19.9,130.1c-62.2,19.2-102.7,49.9-102.7,82.3c0,32.5,40.7,63.3,103.1,82.4c-14.4,63.6-8,114.2,20.2,130.4   c6.5,3.8,14.1,5.6,22.5,5.6c27.5,0,63.5-19.6,99.9-53.6c36.4,33.8,72.4,53.2,99.9,53.2c8.4,0,16-1.8,22.6-5.6   c28.1-16.2,34.4-66.7,19.9-130.1C625.8,359.7,666.3,328.9,666.3,296.5z M536.1,229.8c-3.7,12.9-8.3,26.2-13.5,39.5   c-4.1-8-8.4-16-13.1-24c-4.6-8-9.5-15.8-14.4-23.4C509.3,224,523,226.6,536.1,229.8z M490.3,336.3c-7.8,13.5-15.8,26.3-24.1,38.2   c-14.9,1.3-30,2-45.2,2c-15.1,0-30.2-0.7-45-1.9c-8.3-11.9-16.4-24.6-24.2-38c-7.6-13.1-14.5-26.4-20.8-39.8   c6.2-13.4,13.2-26.8,20.7-39.9c7.8-13.5,15.8-26.3,24.1-38.2c14.9-1.3,30-2,45.2-2c15.1,0,30.2,0.7,45,1.9   c8.3,11.9,16.4,24.6,24.2,38c7.6,13.1,14.5,26.4,20.8,39.8C504.7,309.8,497.8,323.2,490.3,336.3z M522.6,323.3   c5.4,13.4,10,26.8,13.8,39.8c-13.1,3.2-26.9,5.9-41.2,8c4.9-7.7,9.8-15.6,14.4-23.7C514.2,339.4,518.5,331.3,522.6,323.3z    M421.2,430c-9.3-9.6-18.6-20.3-27.8-32c9,0.4,18.2,0.7,27.5,0.7c9.4,0,18.7-0.2,27.8-0.7C439.7,409.7,430.4,420.4,421.2,430z    M346.8,371.1c-14.2-2.1-27.9-4.7-41-7.9c3.7-12.9,8.3-26.2,13.5-39.5c4.1,8,8.4,16,13.1,24C337.1,355.7,341.9,363.5,346.8,371.1z    M420.7,163c9.3,9.6,18.6,20.3,27.8,32c-9-0.4-18.2-0.7-27.5-0.7c-9.4,0-18.7,0.2-27.8,0.7C402.2,183.3,411.5,172.6,420.7,163z    M346.7,221.9c-4.9,7.7-9.8,15.6-14.4,23.7c-4.6,8-8.9,16-13,24c-5.4-13.4-10-26.8-13.8-39.8C318.6,226.7,332.4,224,346.7,221.9z    M256.2,347.1c-35.4-15.1-58.3-34.9-58.3-50.6c0-15.7,22.9-35.6,58.3-50.6c8.6-3.7,18-7,27.7-10.1c5.7,19.6,13.2,40,22.5,60.9   c-9.2,20.8-16.6,41.1-22.2,60.6C274.3,354.2,264.9,350.8,256.2,347.1z M310,490c-13.6-7.8-19.5-37.5-14.9-75.7   c1.1-9.4,2.9-19.3,5.1-29.4c19.6,4.8,41,8.5,63.5,10.9c13.5,18.5,27.5,35.3,41.6,50c-32.6,30.3-63.2,46.9-84,46.9   C316.8,492.6,313,491.7,310,490z M547.2,413.8c4.7,38.2-1.1,67.9-14.6,75.8c-3,1.8-6.9,2.6-11.5,2.6c-20.7,0-51.4-16.5-84-46.6   c14-14.7,28-31.4,41.3-49.9c22.6-2.4,44-6.1,63.6-11C544.3,394.8,546.1,404.5,547.2,413.8z M585.7,347.1c-8.6,3.7-18,7-27.7,10.1   c-5.7-19.6-13.2-40-22.5-60.9c9.2-20.8,16.6-41.1,22.2-60.6c9.9,3.1,19.3,6.5,28.1,10.2c35.4,15.1,58.3,34.9,58.3,50.6   C644,312.2,621.1,332.1,585.7,347.1z"/>
+        <polygon fill="#61DAFB" points="320.8,78.4 320.8,78.4 320.8,78.4  "/>
+        <circle fill="#61DAFB" cx="420.9" cy="296.5" r="45.7"/>
+        <polygon fill="#61DAFB" points="520.5,78.1 520.5,78.1 520.5,78.1  "/>
+    </g>
+    <rect x="12" y="12" width="5" height="5" fill="#fff" />
+    <rect x="17" y="12" width="5" height="5" fill="#000" />
+    <rect x="12" y="17" width="5" height="5" fill="#000" />
+    <rect x="17" y="17" width="5" height="5" fill="#fff" />
+</svg>

package/graphics/logo.svg

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
+    <rect x="4" y="4" width="56" height="56" fill="#282c34" rx="2" ry="2" />
+    <g transform="matrix(0.10805931,0,0,0.10805931,-13.49297,-0.03418245)">
+        <path fill="#61DAFB" d="M666.3,296.5c0-32.5-40.7-63.3-103.1-82.4c14.4-63.6,8-114.2-20.2-130.4c-6.5-3.8-14.1-5.6-22.4-5.6v22.3   c4.6,0,8.3,0.9,11.4,2.6c13.6,7.8,19.5,37.5,14.9,75.7c-1.1,9.4-2.9,19.3-5.1,29.4c-19.6-4.8-41-8.5-63.5-10.9   c-13.5-18.5-27.5-35.3-41.6-50c32.6-30.3,63.2-46.9,84-46.9l0-22.3c0,0,0,0,0,0c-27.5,0-63.5,19.6-99.9,53.6   c-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7,0,51.4,16.5,84,46.6c-14,14.7-28,31.4-41.3,49.9c-22.6,2.4-44,6.1-63.6,11   c-2.3-10-4-19.7-5.2-29c-4.7-38.2,1.1-67.9,14.6-75.8c3-1.8,6.9-2.6,11.5-2.6l0-22.3c0,0,0,0,0,0c-8.4,0-16,1.8-22.6,5.6   c-28.1,16.2-34.4,66.7-19.9,130.1c-62.2,19.2-102.7,49.9-102.7,82.3c0,32.5,40.7,63.3,103.1,82.4c-14.4,63.6-8,114.2,20.2,130.4   c6.5,3.8,14.1,5.6,22.5,5.6c27.5,0,63.5-19.6,99.9-53.6c36.4,33.8,72.4,53.2,99.9,53.2c8.4,0,16-1.8,22.6-5.6   c28.1-16.2,34.4-66.7,19.9-130.1C625.8,359.7,666.3,328.9,666.3,296.5z M536.1,229.8c-3.7,12.9-8.3,26.2-13.5,39.5   c-4.1-8-8.4-16-13.1-24c-4.6-8-9.5-15.8-14.4-23.4C509.3,224,523,226.6,536.1,229.8z M490.3,336.3c-7.8,13.5-15.8,26.3-24.1,38.2   c-14.9,1.3-30,2-45.2,2c-15.1,0-30.2-0.7-45-1.9c-8.3-11.9-16.4-24.6-24.2-38c-7.6-13.1-14.5-26.4-20.8-39.8   c6.2-13.4,13.2-26.8,20.7-39.9c7.8-13.5,15.8-26.3,24.1-38.2c14.9-1.3,30-2,45.2-2c15.1,0,30.2,0.7,45,1.9   c8.3,11.9,16.4,24.6,24.2,38c7.6,13.1,14.5,26.4,20.8,39.8C504.7,309.8,497.8,323.2,490.3,336.3z M522.6,323.3   c5.4,13.4,10,26.8,13.8,39.8c-13.1,3.2-26.9,5.9-41.2,8c4.9-7.7,9.8-15.6,14.4-23.7C514.2,339.4,518.5,331.3,522.6,323.3z    M421.2,430c-9.3-9.6-18.6-20.3-27.8-32c9,0.4,18.2,0.7,27.5,0.7c9.4,0,18.7-0.2,27.8-0.7C439.7,409.7,430.4,420.4,421.2,430z    M346.8,371.1c-14.2-2.1-27.9-4.7-41-7.9c3.7-12.9,8.3-26.2,13.5-39.5c4.1,8,8.4,16,13.1,24C337.1,355.7,341.9,363.5,346.8,371.1z    M420.7,163c9.3,9.6,18.6,20.3,27.8,32c-9-0.4-18.2-0.7-27.5-0.7c-9.4,0-18.7,0.2-27.8,0.7C402.2,183.3,411.5,172.6,420.7,163z    M346.7,221.9c-4.9,7.7-9.8,15.6-14.4,23.7c-4.6,8-8.9,16-13,24c-5.4-13.4-10-26.8-13.8-39.8C318.6,226.7,332.4,224,346.7,221.9z    M256.2,347.1c-35.4-15.1-58.3-34.9-58.3-50.6c0-15.7,22.9-35.6,58.3-50.6c8.6-3.7,18-7,27.7-10.1c5.7,19.6,13.2,40,22.5,60.9   c-9.2,20.8-16.6,41.1-22.2,60.6C274.3,354.2,264.9,350.8,256.2,347.1z M310,490c-13.6-7.8-19.5-37.5-14.9-75.7   c1.1-9.4,2.9-19.3,5.1-29.4c19.6,4.8,41,8.5,63.5,10.9c13.5,18.5,27.5,35.3,41.6,50c-32.6,30.3-63.2,46.9-84,46.9   C316.8,492.6,313,491.7,310,490z M547.2,413.8c4.7,38.2-1.1,67.9-14.6,75.8c-3,1.8-6.9,2.6-11.5,2.6c-20.7,0-51.4-16.5-84-46.6   c14-14.7,28-31.4,41.3-49.9c22.6-2.4,44-6.1,63.6-11C544.3,394.8,546.1,404.5,547.2,413.8z M585.7,347.1c-8.6,3.7-18,7-27.7,10.1   c-5.7-19.6-13.2-40-22.5-60.9c9.2-20.8,16.6-41.1,22.2-60.6c9.9,3.1,19.3,6.5,28.1,10.2c35.4,15.1,58.3,34.9,58.3,50.6   C644,312.2,621.1,332.1,585.7,347.1z"/>
+        <polygon fill="#61DAFB" points="320.8,78.4 320.8,78.4 320.8,78.4  "/>
+        <circle fill="#61DAFB" cx="420.9" cy="296.5" r="45.7"/>
+        <polygon fill="#61DAFB" points="520.5,78.1 520.5,78.1 520.5,78.1  "/>
+    </g>
+    <rect x="32" y="32" width="6" height="6" fill="#fff" />
+    <rect x="38" y="32" width="6" height="6" fill="#000" />
+    <rect x="44" y="32" width="6" height="6" fill="#fff" />
+    <rect x="50" y="32" width="6" height="6" fill="#000" />
+    <rect x="32" y="38" width="6" height="6" fill="#000" />
+    <rect x="38" y="38" width="6" height="6" fill="#fff" />
+    <rect x="44" y="38" width="6" height="6" fill="#000" />
+    <rect x="50" y="38" width="6" height="6" fill="#fff" />
+    <rect x="32" y="44" width="6" height="6" fill="#fff" />
+    <rect x="38" y="44" width="6" height="6" fill="#000" />
+    <rect x="44" y="44" width="6" height="6" fill="#fff" />
+    <rect x="50" y="44" width="6" height="6" fill="#000" />
+    <rect x="32" y="50" width="6" height="6" fill="#000" />
+    <rect x="38" y="50" width="6" height="6" fill="#fff" />
+    <rect x="44" y="50" width="6" height="6" fill="#000" />
+    <rect x="50" y="50" width="6" height="6" fill="#fff" />
+</svg>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "kokopu-react",
-	"version": "1.1.0",
+	"version": "1.4.0",
 	"description": "A React-based library to create and display chessboard components.",
 	"keywords": [
 		"chess",
@@ -19,6 +19,7 @@
 		"dist/lib",
 		"doc_src",
 		"graphic_test_app",
+		"graphics",
 		"scripts/test_graphic",
 		"scripts/test_headless.webpack-config.js",
 		"src",
@@ -28,40 +29,41 @@
 		".nycrc.yml"
 	],
 	"dependencies": {
-		"kokopu": "^1.10.2",
+		"kokopu": "^2.2.0",
 		"prop-types": "^15.7.2",
 		"react": "^17.0.2",
-		"react-draggable": "^4.4.3",
+		"react-draggable": "^4.4.4",
 		"react-motion": "^0.5.2"
 	},
 	"devDependencies": {
-		"@babel/cli": "^7.14.8",
-		"@babel/core": "^7.15.0",
-		"@babel/preset-env": "^7.15.0",
+		"@babel/cli": "^7.15.7",
+		"@babel/core": "^7.15.8",
+		"@babel/preset-env": "^7.15.8",
 		"@babel/preset-react": "^7.14.5",
-		"@material-ui/core": "^4.12.3",
-		"@material-ui/lab": "^4.0.0-alpha.60",
-		"babel-loader": "^8.2.2",
-		"babel-plugin-istanbul": "^6.0.0",
+		"@emotion/react": "^11.5.0",
+		"@emotion/styled": "^11.3.0",
+		"@mui/material": "^5.0.4",
+		"babel-loader": "^8.2.3",
+		"babel-plugin-istanbul": "^6.1.1",
 		"copy-webpack-plugin": "^9.0.1",
 		"coveralls": "^3.1.1",
-		"css-loader": "^6.2.0",
-		"eslint": "^7.32.0",
-		"eslint-plugin-react": "^7.24.0",
-		"html-webpack-plugin": "^5.3.2",
+		"css-loader": "^6.4.0",
+		"eslint": "^8.0.1",
+		"eslint-plugin-react": "^7.26.1",
+		"html-webpack-plugin": "^5.4.0",
 		"img-diff-js": "^0.5.2",
-		"mocha": "^9.0.3",
+		"mocha": "^9.1.3",
 		"null-loader": "^4.0.1",
 		"nyc": "^15.1.0",
-		"prompt": "^1.1.0",
+		"prompt": "^1.2.0",
 		"react-dom": "^17.0.2",
 		"react-styleguidist": "^11.1.7",
-		"selenium-webdriver": "^4.0.0-beta.4",
-		"ssh2-sftp-client": "^7.0.1",
-		"style-loader": "^3.2.1",
+		"selenium-webdriver": "^4.0.0",
+		"ssh2-sftp-client": "^7.1.0",
+		"style-loader": "^3.3.0",
 		"unit.js": "^2.1.1",
-		"webpack": "^5.50.0",
-		"webpack-cli": "^4.7.2"
+		"webpack": "^5.59.0",
+		"webpack-cli": "^4.9.1"
 	},
 	"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.0.0-rc-1-prerelease-20210804
+    image: selenium/standalone-firefox:4.0.0-20211013
     shm_size: '2gb'
     ports:
       - 4444:4444 # Driver (http://localhost:4444)

package/scripts/test_graphic/webpack-config.js

@@ -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: {

package/scripts/test_headless.webpack-config.js

@@ -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: [

package/src/ArrowMarkerIcon.js

@@ -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

@@ -29,7 +29,9 @@ import kokopu from 'kokopu';
 import colorsets from './impl/colorsets';
 import piecesets from './impl/piecesets';
 import ArrowTip from './impl/ArrowTip';
-import ErrorBox from './impl/ErrorBox';
+import TextSymbol from './impl/TextSymbol';
+import ErrorBox from './ErrorBox';
+import i18n from './i18n';
 import { parseSquareMarkers, parseTextMarkers, parseArrowMarkers } from './markers';
 import { MIN_SQUARE_SIZE, MAX_SQUARE_SIZE, sanitizeInteger, generateRandomId, isValidSquare, isValidVector, isValidColor, isValidSymbol } from './impl/util';
 
@@ -82,10 +84,10 @@ export default class Chessboard extends React.Component {
 		// Compute the current position.
 		let info = this.getPositionAndMoveInfo();
 		if (info.positionError) {
-			return <ErrorBox title="Error while analysing a FEN string." message={info.message}></ErrorBox>;
+			return <ErrorBox title={i18n.INVALID_FEN_ERROR_TITLE} message={info.message}></ErrorBox>;
 		}
 		else if (info.moveError) {
-			return <ErrorBox title="Invalid move notation." message={info.message}></ErrorBox>;
+			return <ErrorBox title={i18n.INVALID_NOTATION_ERROR_TITLE} message={info.message}></ErrorBox>;
 		}
 		let { position, move, positionBefore } = info;
 
@@ -271,7 +273,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})`}
 			/>
 		);
 	}
@@ -346,9 +348,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;
@@ -375,7 +377,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})`}
 				/>
 			);
 		});
@@ -399,7 +401,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')})`}
 			/>
 		);
 	}
@@ -418,14 +420,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 kokopu-label" 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 kokopu-label" x={x} y={y} fontSize={fontSize}>{label}</text>;
 	}
 
 	handleWindowResize() {
@@ -498,8 +500,6 @@ export default class Chessboard extends React.Component {
 					});
 					break;
 
-					// TODO fix chess960 castling
-
 				// Other cases are not supposed to happen.
 				// istanbul ignore next
 				default:
@@ -940,7 +940,7 @@ function parsePosition(position) {
 		}
 	}
 	else {
-		return { error: true, message: 'Invalid "position" attribute.' };
+		return { error: true, message: i18n.INVALID_POSITION_ATTRIBUTE_ERROR_MESSAGE };
 	}
 }
 
@@ -967,7 +967,7 @@ function parseMove(position, move) {
 		}
 	}
 	else {
-		return { error: true, message: 'Invalid "move" attribute.' };
+		return { error: true, message: i18n.INVALID_MOVE_ATTRIBUTE_ERROR_MESSAGE };
 	}
 }
 

package/src/{impl/ErrorBox.js → ErrorBox.js}

@@ -23,7 +23,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import '../css/error_box.css';
+import './css/error_box.css';
 
 
 /**

package/src/TextMarkerIcon.js

@@ -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/symbol.css

@@ -0,0 +1,25 @@
+/******************************************************************************
+ *                                                                            *
+ *    This file is part of Kokopu-React, a JavaScript chess library.          *
+ *    Copyright (C) 2021  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  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

@@ -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  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/util.js

@@ -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

@@ -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

@@ -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

@@ -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/3_marker_icons_graphic.js

@@ -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/6_chessboard_play_moves.js

@@ -50,6 +50,9 @@ describe('Chessboard play moves', function() {
 	itCheckPlayMove(0, 'regular move 1', 225, 335, 220, 225, 'regular_move_1', 'move played: e4');
 	itCheckPlayMove(1, 'regular move 2', 275, 225, 135, 85, 'regular_move_2', 'move played: Bxf2+');
 	itCheckPlayMove(1, 'castling move', 175, 375, 75, 375, 'castling_move', 'move played: O-O');
+	itCheckPlayMove(3, 'chess960 castling move 1', 275, 375, 75, 375, 'chess960_castling_move_1', 'move played: O-O-O');
+	itCheckPlayMove(3, 'chess960 castling move 2', 275, 375, 375, 375, 'chess960_castling_move_2', 'move played: O-O');
+	itCheckPlayMove(3, 'chess960 ambiguous king move', 275, 375, 320, 375, 'chess960_ambiguous_king_move', 'move played: Kg1');
 
 	function itCheckNonPlayMove(itemIndex, label, xFrom, yFrom, xTo, yTo, imageBaseName) {
 		itCustom(browserContext, '10_chessboard_play_moves', itemIndex, label, async function(element) {
@@ -69,6 +72,7 @@ describe('Chessboard play moves', function() {
 	itCheckNonPlayMove(0, 'illegal move', 75, 375, 125, 225, 'illegal_move');
 	itCheckNonPlayMove(0, 'from == to', 75, 375, 85, 365, 'null_vector');
 	itCheckNonPlayMove(0, 'out of board', 325, 375, 450, 285, 'out_of_board');
+	itCheckNonPlayMove(3, 'chess960 non-KxR castling', 275, 375, 130, 375, 'chess960_non_kxr_castling');
 
 	function itCheckPlayPromotion(itemIndex, label, xFrom, yFrom, xTo, yTo, xPromo, yPromo, imageBaseName, expectedText) {
 		itCustom(browserContext, '11_chessboard_play_promotions', itemIndex, label, async function(element) {