kokopu-react 1.0.2 → 1.3.1

package/doc_src/demo/PageChessboardSmallScreens.js

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

@@ -31,4 +31,5 @@ testApp([ /* eslint-disable react/jsx-key */
 	<Chessboard position="something invalid" />,
 	<Chessboard position="r1bqkbnr/pppp1ppp/2n5/1B2p3/4P3/5N2/PPPP1PPP/RNBQK2R b KQkq - 3 3" />,
 	<Chessboard position={new kokopu.Position('8/8/1r6/8/5k1K/8/8/8 b - - 0 1')} />,
+	<Chessboard position={42} />,
 ]); /* eslint-enable react/jsx-key */

package/graphic_test_app/04_chessboard_annotations.js

@@ -33,7 +33,7 @@ let arrowMarkers2 = { c3a2: 'y', c4a4: 'g', c5a6: 'r', c6a8: 'y', d6c8: 'g', e6e
 let textMarkers2 = { g3: { symbol: 'H', color: 'r' }, g5: { symbol: 'M', color: 'g' } };
 
 let squareMarkers3 = { b5: 'r', e4: 'g', h5: 'y' };
-let arrowMarkers3 = { d1h5: 'g', a5f4: 'r', c7c3: 'y' };
+let arrowMarkers3 = { d1h5: 'g', a5f4: 'r', c7c3: 'y', g7g7: 'g' };
 let textMarkers3 = 'G5c6';
 
 testApp([ /* eslint-disable react/jsx-key */

package/graphic_test_app/05_chessboard_move.js

@@ -37,4 +37,5 @@ testApp([ /* eslint-disable react/jsx-key */
 	<Chessboard position="r3k2r/pppppppp/8/8/8/8/PPPPPPPP/R3K2R b KQkq - 0 1" move="O-O-O" animated={false} />,
 	<Chessboard position="rnbqkbnr/ppp1p1pp/8/3pPp2/8/8/PPPP1PPP/RNBQKBNR w KQkq f6 0 3" move="exf6" animated={false} />,
 	<Chessboard position="8/8/8/1K6/8/4k3/1p6/8 b - - 0 1" move="b1=R+" animated={false} />,
+	<Chessboard move={42} animated={false} />,
 ]); /* eslint-enable react/jsx-key */

package/graphic_test_app/07_chessboard_click_squares.js

@@ -0,0 +1,36 @@
+/******************************************************************************
+ *                                                                            *
+ *    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 React from 'react';
+import testApp, { setSandbox } from './common/test_app';
+import { Chessboard } from '../src/index';
+
+function onSquareClicked(sq) {
+	setSandbox(`square clicked: ${sq}`);
+}
+
+testApp([ /* eslint-disable react/jsx-key */
+	<Chessboard squareSize={50} interactionMode="clickSquares" onSquareClicked={onSquareClicked} />,
+	<Chessboard squareSize={50} interactionMode="clickSquares" onSquareClicked={onSquareClicked} flipped coordinateVisible={false} />,
+	<Chessboard squareSize={50} interactionMode="clickSquares" onSquareClicked={onSquareClicked} position="empty"
+		squareMarkers="Ga8" arrowMarkers="Ra6d6" textMarkers="YAb4" />,
+]); /* eslint-enable react/jsx-key */

package/graphic_test_app/08_chessboard_move_pieces.js

@@ -0,0 +1,36 @@
+/******************************************************************************
+ *                                                                            *
+ *    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 React from 'react';
+import testApp, { setSandbox } from './common/test_app';
+import { Chessboard } from '../src/index';
+
+function onPieceMoved(from, to) {
+	setSandbox(`piece moved: ${from} -> ${to}`);
+}
+
+testApp([ /* eslint-disable react/jsx-key */
+	<Chessboard squareSize={50} coordinateVisible={false} interactionMode="movePieces" onPieceMoved={onPieceMoved} />,
+	<Chessboard squareSize={50} coordinateVisible={false} interactionMode="movePieces" onPieceMoved={onPieceMoved} flipped
+		squareMarkers="Gc4" textMarkers="RAh3" arrowMarkers="Gc8a4" />,
+	<Chessboard squareSize={50} coordinateVisible={false} interactionMode="movePieces" onPieceMoved={onPieceMoved} move="e4" animated={false} />,
+]); /* eslint-enable react/jsx-key */

package/graphic_test_app/09_chessboard_edit_arrows.js

@@ -0,0 +1,36 @@
+/******************************************************************************
+ *                                                                            *
+ *    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 React from 'react';
+import testApp, { setSandbox } from './common/test_app';
+import { Chessboard } from '../src/index';
+
+function onArrowEdited(from, to) {
+	setSandbox(`arrow edited: ${from} -> ${to}`);
+}
+
+testApp([ /* eslint-disable react/jsx-key */
+	<Chessboard squareSize={50} coordinateVisible={false} interactionMode="editArrows" onArrowEdited={onArrowEdited} editedArrowColor="g" />,
+	<Chessboard squareSize={50} coordinateVisible={false} interactionMode="editArrows" onArrowEdited={onArrowEdited} editedArrowColor="r" flipped
+		squareMarkers="Gc5" arrowMarkers="Yh3f6" />,
+	<Chessboard squareSize={50} coordinateVisible={false} interactionMode="editArrows" onArrowEdited={onArrowEdited} />,
+]); /* eslint-enable react/jsx-key */

package/graphic_test_app/10_chessboard_play_moves.js

@@ -0,0 +1,39 @@
+/******************************************************************************
+ *                                                                            *
+ *    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 React from 'react';
+import testApp, { setSandbox } from './common/test_app';
+import { Chessboard } from '../src/index';
+
+function onMovePlayed(move) {
+	setSandbox(`move played: ${move}`);
+}
+
+testApp([ /* eslint-disable react/jsx-key */
+	<Chessboard squareSize={50} coordinateVisible={false} interactionMode="playMoves" onMovePlayed={onMovePlayed} />,
+	<Chessboard squareSize={50} coordinateVisible={false} interactionMode="playMoves" onMovePlayed={onMovePlayed}
+		flipped position="rnbqk2r/ppp2ppp/3p1n2/2b1p3/4P3/2NP1N2/PPP2PPP/R1BQKB1R w KQkq - 0 1" move="Bg5" animated={false} />,
+	<Chessboard squareSize={50} coordinateVisible={false} interactionMode="playMoves" onMovePlayed={onMovePlayed}
+		position="rnbq1bnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQ - 0 1" />,
+	<Chessboard squareSize={50} coordinateVisible={false} interactionMode="playMoves" onMovePlayed={onMovePlayed}
+		position="chess960:1r3k1r/pppppppp/8/8/8/8/PPPPPPPP/1R3K1R w BHbh - 0 1" />,
+]); /* eslint-enable react/jsx-key */

package/graphic_test_app/11_chessboard_play_promotions.js

@@ -0,0 +1,35 @@
+/******************************************************************************
+ *                                                                            *
+ *    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 React from 'react';
+import testApp, { setSandbox } from './common/test_app';
+import { Chessboard } from '../src/index';
+
+function onMovePlayed(move) {
+	setSandbox(`promotion move played: ${move}`);
+}
+
+testApp([ /* eslint-disable react/jsx-key */
+	<Chessboard squareSize={50} coordinateVisible={false} interactionMode="playMoves" onMovePlayed={onMovePlayed} position="8/1P6/8/8/7k/8/5K2/8 w - - 0 1" />,
+	<Chessboard squareSize={50} coordinateVisible={false} interactionMode="playMoves" onMovePlayed={onMovePlayed} position="8/8/8/8/7k/8/1p3K2/R7 b - - 0 1" />,
+	<Chessboard squareSize={50} coordinateVisible={false} interactionMode="playMoves" onMovePlayed={onMovePlayed} flipped position="antichess:8/1P6/8/8/7r/8/5K2/8 w - - 0 1" />,
+]); /* eslint-enable react/jsx-key */

package/graphic_test_app/common/test_app.js

@@ -47,4 +47,18 @@ export default function(elements) {
 	// Render the content.
 	let content = Array.isArray(elements) ? flattenMultiElements(elements) : elements;
 	ReactDOM.render(content, anchor);
+
+	// Append a text area
+	let sandbox = document.createElement('pre');
+	sandbox.id = 'sandbox';
+	document.body.appendChild(sandbox);
+}
+
+
+/**
+ * Set the content of the sandbox.
+ */
+export function setSandbox(text) {
+	let sandbox = document.getElementById('sandbox');
+	sandbox.innerText = text;
 }

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.0.2",
+	"version": "1.3.1",
 	"description": "A React-based library to create and display chessboard components.",
 	"keywords": [
 		"chess",
@@ -19,52 +19,58 @@
 		"dist/lib",
 		"doc_src",
 		"graphic_test_app",
+		"graphics",
 		"scripts/test_graphic",
 		"scripts/test_headless.webpack-config.js",
 		"src",
 		"test",
 		".babelrc",
-		".eslint.yml"
+		".eslint.yml",
+		".nycrc.yml"
 	],
 	"dependencies": {
-		"kokopu": "^1.10.1",
+		"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.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",
+		"@emotion/react": "^11.4.1",
+		"@emotion/styled": "^11.3.0",
+		"@mui/material": "^5.0.1",
 		"babel-loader": "^8.2.2",
+		"babel-plugin-istanbul": "^6.0.0",
 		"copy-webpack-plugin": "^9.0.1",
-		"css-loader": "^6.2.0",
+		"coveralls": "^3.1.1",
+		"css-loader": "^6.3.0",
 		"eslint": "^7.32.0",
-		"eslint-plugin-react": "^7.24.0",
+		"eslint-plugin-react": "^7.26.0",
 		"html-webpack-plugin": "^5.3.2",
 		"img-diff-js": "^0.5.2",
-		"mocha": "^9.0.3",
+		"mocha": "^9.1.2",
 		"null-loader": "^4.0.1",
-		"prompt": "^1.1.0",
+		"nyc": "^15.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-rc-1",
+		"ssh2-sftp-client": "^7.0.4",
+		"style-loader": "^3.3.0",
 		"unit.js": "^2.1.1",
-		"webpack": "^5.49.0",
-		"webpack-cli": "^4.7.2",
-		"webpack-dev-server": "^3.11.2"
+		"webpack": "^5.54.0",
+		"webpack-cli": "^4.8.0"
 	},
 	"scripts": {
 		"lint": "eslint doc_src graphic_test_app src test",
 		"preunit": "webpack --config scripts/test_headless.webpack-config.js && webpack --config scripts/test_graphic/webpack-config.js && node scripts/test_graphic/clean-graphic-output.js",
-		"unit": "mocha --bail --sort",
+		"unit": "nyc mocha --bail --sort",
 		"test": "npm run lint && npm run unit",
+		"publish_coverage": "nyc report --reporter=text-lcov | coveralls",
 		"start_test_env": "docker-compose -f scripts/test_graphic/docker-compose.yml up -d",
 		"stop_test_env": "docker-compose -f scripts/test_graphic/docker-compose.yml down",
 		"build": "make -f scripts/build.mk",

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-20210618
+    image: selenium/standalone-firefox:4.0.0-rc-1-prerelease-20210804
     shm_size: '2gb'
     ports:
       - 4444:4444 # Driver (http://localhost:4444)

package/scripts/test_graphic/webpack-config.js

@@ -53,7 +53,12 @@ module.exports = {
 		rules: [
 			{
 				test: /\.js$/i,
-				loader: 'babel-loader',
+				use: {
+					loader: 'babel-loader',
+					options: {
+						plugins: [ 'istanbul' ],
+					},
+				},
 			},
 			{
 				test: /\.css$/i,

package/scripts/test_headless.webpack-config.js

@@ -37,7 +37,12 @@ module.exports = {
 		rules: [
 			{
 				test: /\.js$/i,
-				loader: 'babel-loader',
+				use: {
+					loader: 'babel-loader',
+					options: {
+						plugins: [ 'istanbul' ],
+					},
+				},
 			},
 			{
 				test: /\.css$/i,