kokopu-react 1.2.0 → 1.4.1

package/doc_src/demo/PageChessboardSmallScreens.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,8 +25,9 @@ import React from 'react';
 import { Chessboard } from '../../src/index';
 import { buildComponentDemoCode } from './util';
 
-import Box from '@material-ui/core/Box';
-import Typography from '@material-ui/core/Typography';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
 
 import './demo.css';
 
@@ -63,17 +64,17 @@ export default class Page extends React.Component {
 
 	render() {
 		return (
-			<div>
+			<Stack spacing={2} mt={2}>
 				{this.renderControls()}
 				{this.renderChessboard()}
 				{this.renderCode()}
-			</div>
+			</Stack>
 		);
 	}
 
 	renderControls() {
 		return (
-			<Box my={2}>
+			<Box>
 				<Typography>Resize the browser to see the chessboard adapt its size...</Typography>
 				<Typography>{`Current browser width: ${this.state.windowWidth} px`}</Typography>
 			</Box>
@@ -82,7 +83,7 @@ export default class Page extends React.Component {
 
 	renderChessboard() {
 		return (
-			<Box my={2}>
+			<Box>
 				<Chessboard squareSize={this.state.squareSize} smallScreenLimits={this.state.limits} />
 			</Box>
 		);
@@ -102,16 +103,14 @@ export default class Page extends React.Component {
 		attributes.push(`squareSize={${this.state.squareSize}}`);
 		attributes.push('smallScreenLimits={limits}');
 		return (
-			<Box my={2}>
-				<pre className="kokopu-demoCode">
-					{
-						'let limits = [\n' +
-						limits.join('') +
-						'];\n' +
-						buildComponentDemoCode('Chessboard', attributes)
-					}
-				</pre>
-			</Box>
+			<pre className="kokopu-demoCode">
+				{
+					'let limits = [\n' +
+					limits.join('') +
+					'];\n' +
+					buildComponentDemoCode('Chessboard', attributes)
+				}
+			</pre>
 		);
 	}
 

package/doc_src/demo/demo.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/doc_src/demo/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/doc_src/examples/ErrorBox.md

@@ -0,0 +1,3 @@
+```js
+<ErrorBox title="Something went wrong" message="This message describes what went wrong." />
+```

package/doc_src/theming/LogoRenderer.js

@@ -0,0 +1,50 @@
+/******************************************************************************
+ *                                                                            *
+ *    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 React from 'react';
+import Styled from 'react-styleguidist/lib/client/rsg-components/Styled';
+
+import logo from './kokopu-react-logo.png';
+
+import './theming.css';
+
+
+const styles = ({ color, fontFamily, fontSize }) => ({
+	logo: {
+		color: color.base,
+		margin: 0,
+		fontFamily: fontFamily.base,
+		fontSize: fontSize.h4,
+		fontWeight: 'normal',
+	},
+});
+
+function LogoRenderer({ classes, children }) {
+	return (<>
+		<div className="kokopu-logo">
+			<img src={logo} />
+		</div>
+		<h1 className={classes.logo}>{children}</h1>
+	</>);
+}
+
+export default Styled(styles)(LogoRenderer);

package/doc_src/theming/theming.css

@@ -0,0 +1,29 @@
+/******************************************************************************
+ *                                                                            *
+ *    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-logo {
+	text-align: center;
+}
+
+footer {
+	display: none !important;
+}

package/graphic_test_app/01_marker_icons.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      *
@@ -27,11 +27,13 @@ import { SquareMarkerIcon, TextMarkerIcon, ArrowMarkerIcon } from '../src/index'
 testApp([ /* eslint-disable react/jsx-key */
 	<SquareMarkerIcon size={40} />,
 	<SquareMarkerIcon size={45} color="green" />,
-	<div style={{ color: 'purple' }} ><SquareMarkerIcon size={31} /></div>,
+	<div style={{ color: 'purple' }}><SquareMarkerIcon size={31} /></div>,
 	<TextMarkerIcon size={41} symbol="A" />,
 	<TextMarkerIcon size={29} symbol="b" color="#0ff" />,
-	<div style={{ color: 'red' }} ><TextMarkerIcon size={53} symbol="5" /></div>,
+	<div style={{ color: 'red' }}><TextMarkerIcon size={53} symbol="5" /></div>,
 	<ArrowMarkerIcon size={40} />,
 	<ArrowMarkerIcon size={24} color="#888" />,
-	<div style={{ color: '#f70' }} ><ArrowMarkerIcon size={48} /></div>,
+	<div style={{ color: '#f70' }}><ArrowMarkerIcon size={48} /></div>,
+	<TextMarkerIcon size={47} symbol="dot" color="#00f" />,
+	<div style={{ color: 'pink' }}><TextMarkerIcon size={48} symbol="circle" /></div>,
 ]); /* eslint-enable react/jsx-key */

package/graphic_test_app/02_chessboard_simple.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/graphic_test_app/03_chessboard_flipped.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/graphic_test_app/04_chessboard_annotations.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      *
@@ -34,7 +34,7 @@ let textMarkers2 = { g3: { symbol: 'H', color: 'r' }, g5: { symbol: 'M', color:
 
 let squareMarkers3 = { b5: 'r', e4: 'g', h5: 'y' };
 let arrowMarkers3 = { d1h5: 'g', a5f4: 'r', c7c3: 'y', g7g7: 'g' };
-let textMarkers3 = 'G5c6';
+let textMarkers3 = 'G5c6,R(plus)a1,G(times)b1,R(dot)a2,Y(circle)b2';
 
 testApp([ /* eslint-disable react/jsx-key */
 	<Chessboard squareMarkers={squareMarkers1} arrowMarkers={arrowMarkers1} textMarkers={textMarkers1} flipped={false} coordinateVisible={true} />,

package/graphic_test_app/05_chessboard_move.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/graphic_test_app/06_chessboard_theme.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/graphic_test_app/07_chessboard_click_squares.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/graphic_test_app/08_chessboard_move_pieces.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/graphic_test_app/09_chessboard_edit_arrows.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/graphic_test_app/10_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/graphic_test_app/11_chessboard_play_promotions.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/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      *

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      *

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "kokopu-react",
-	"version": "1.2.0",
+	"version": "1.4.1",
 	"description": "A React-based library to create and display chessboard components.",
 	"keywords": [
 		"chess",
@@ -29,40 +29,41 @@
 		".nycrc.yml"
 	],
 	"dependencies": {
-		"kokopu": "^2.0.0",
-		"prop-types": "^15.7.2",
+		"kokopu": "^2.2.1",
+		"prop-types": "^15.8.0",
 		"react": "^17.0.2",
 		"react-draggable": "^4.4.4",
 		"react-motion": "^0.5.2"
 	},
 	"devDependencies": {
-		"@babel/cli": "^7.15.4",
-		"@babel/core": "^7.15.5",
-		"@babel/preset-env": "^7.15.6",
-		"@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",
-		"copy-webpack-plugin": "^9.0.1",
+		"@babel/cli": "^7.16.7",
+		"@babel/core": "^7.16.7",
+		"@babel/preset-env": "^7.16.7",
+		"@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",
+		"babel-plugin-istanbul": "^6.1.1",
+		"copy-webpack-plugin": "^10.2.0",
 		"coveralls": "^3.1.1",
-		"css-loader": "^6.2.0",
-		"eslint": "^7.32.0",
-		"eslint-plugin-react": "^7.25.1",
-		"html-webpack-plugin": "^5.3.2",
+		"css-loader": "^6.5.1",
+		"eslint": "^8.6.0",
+		"eslint-plugin-react": "^7.28.0",
+		"html-webpack-plugin": "^5.5.0",
 		"img-diff-js": "^0.5.2",
-		"mocha": "^9.1.1",
+		"mocha": "^9.1.3",
 		"null-loader": "^4.0.1",
 		"nyc": "^15.1.0",
 		"prompt": "^1.2.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.2.1",
+		"selenium-webdriver": "^4.1.0",
+		"ssh2-sftp-client": "^7.2.1",
+		"style-loader": "^3.3.1",
 		"unit.js": "^2.1.1",
-		"webpack": "^5.52.1",
-		"webpack-cli": "^4.8.0"
+		"webpack": "^5.65.0",
+		"webpack-cli": "^4.9.1"
 	},
 	"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-20211217
     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      *
@@ -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

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

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,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() {
@@ -938,7 +940,7 @@ function parsePosition(position) {
 		}
 	}
 	else {
-		return { error: true, message: 'Invalid "position" attribute.' };
+		return { error: true, message: i18n.INVALID_POSITION_ATTRIBUTE_ERROR_MESSAGE };
 	}
 }
 
@@ -965,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}

@@ -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,7 +23,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import '../css/error_box.css';
+import './css/error_box.css';
 
 
 /**

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