kokopu-react 1.1.0 → 1.4.0

package/doc_src/demo/PageChessboardBase.js

@@ -25,15 +25,18 @@ import React from 'react';
 import { Chessboard } from '../../src/index';
 import { buildComponentDemoCode } from './util';
 
-import Box from '@material-ui/core/Box';
-import Button from '@material-ui/core/Button';
-import ButtonGroup from '@material-ui/core/ButtonGroup';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import MenuItem from '@material-ui/core/MenuItem';
-import Select from '@material-ui/core/Select';
-import Slider from '@material-ui/core/Slider';
-import Switch from '@material-ui/core/Switch';
-import Typography from '@material-ui/core/Typography';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import ButtonGroup from '@mui/material/ButtonGroup';
+import FormControl from '@mui/material/FormControl';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import Select from '@mui/material/Select';
+import Slider from '@mui/material/Slider';
+import Stack from '@mui/material/Stack';
+import Switch from '@mui/material/Switch';
+import Typography from '@mui/material/Typography';
 
 import './demo.css';
 
@@ -59,17 +62,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}>
+			<Stack direction="row" spacing={2} alignItems="center">
 				<FormControlLabel label="Flip"
 					control={<Switch checked={this.state.flipped} onChange={() => this.set('flipped', !this.state.flipped)} color="primary" />}
 				/>
@@ -79,42 +82,40 @@ export default class Page extends React.Component {
 				<FormControlLabel label="Show annotations"
 					control={<Switch checked={this.state.annotationVisible} onChange={() => this.set('annotationVisible', !this.state.annotationVisible)} color="primary" />}
 				/>
-			</Box>
-			<Box my={2}>
+			</Stack>
+			<Box>
 				<Typography gutterBottom>Square size</Typography>
 				<Slider
 					value={this.state.squareSize} onChange={(_, newValue) => this.set('squareSize', newValue)}
 					min={Chessboard.minSquareSize()} max={Chessboard.maxSquareSize()} step={1} valueLabelDisplay="on" color="primary"
 				/>
 			</Box>
-			<Box my={2} display="flex" flexDirection="row" alignItems="center">
-				<Box mr={2}>
-					<Typography>Colorset</Typography>
-					<Select value={this.state.colorset} onChange={evt => this.set('colorset', evt.target.value)}>
+			<Stack direction="row" spacing={2} alignItems="center">
+				<FormControl variant="standard">
+					<InputLabel id="colorset-label">Colorset</InputLabel>
+					<Select labelId="colorset-label" sx={{ width: '8em' }} value={this.state.colorset} onChange={evt => this.set('colorset', evt.target.value)}>
 						{Object.keys(Chessboard.colorsets()).sort().map(colorset => <MenuItem key={colorset} value={colorset}>{colorset}</MenuItem>)}
 					</Select>
-				</Box>
-				<Box mx={2}>
-					<Typography>Pieceset</Typography>
-					<Select value={this.state.pieceset} onChange={evt => this.set('pieceset', evt.target.value)}>
+				</FormControl>
+				<FormControl variant="standard">
+					<InputLabel id="pieceset-label">Pieceset</InputLabel>
+					<Select labelId="pieceset-label" sx={{ width: '8em' }} value={this.state.pieceset} onChange={evt => this.set('pieceset', evt.target.value)}>
 						{Object.keys(Chessboard.piecesets()).sort().map(pieceset => <MenuItem key={pieceset} value={pieceset}>{pieceset}</MenuItem>)}
 					</Select>
-				</Box>
-				<Box ml={2}>
-					<ButtonGroup color="primary" size="small">
-						<Button onClick={() => this.set('position', 'empty')}>Clear</Button>
-						<Button onClick={() => this.set('position', 'start')}>Reset</Button>
-						<Button onClick={() => this.set('position', '8/8/8/8/8/4k3/q7/4K3 b - - 0 1')}>Set FEN</Button>
-						<Button onClick={() => this.set('position', 'I\'m an invalid FEN string')}>Set ill-formed FEN</Button>
-					</ButtonGroup>
-				</Box>
-			</Box>
+				</FormControl>
+				<ButtonGroup color="primary" size="small">
+					<Button onClick={() => this.set('position', 'empty')}>Clear</Button>
+					<Button onClick={() => this.set('position', 'start')}>Reset</Button>
+					<Button onClick={() => this.set('position', '8/8/8/8/8/4k3/q7/4K3 b - - 0 1')}>Set FEN</Button>
+					<Button onClick={() => this.set('position', 'I\'m an invalid FEN string')}>Set ill-formed FEN</Button>
+				</ButtonGroup>
+			</Stack>
 		</>);
 	}
 
 	renderChessboard() {
 		return (
-			<Box my={2}>
+			<Box>
 				<Chessboard
 					position={this.state.position}
 					flipped={this.state.flipped}
@@ -145,13 +146,7 @@ export default class Page extends React.Component {
 		attributes.push(`coordinateVisible={${this.state.coordinateVisible}}`);
 		attributes.push(`colorset="${this.state.colorset}"`);
 		attributes.push(`pieceset="${this.state.pieceset}"`);
-		return (
-			<Box my={2}>
-				<pre className="kokopu-demoCode">
-					{buildComponentDemoCode('Chessboard', attributes)}
-				</pre>
-			</Box>
-		);
+		return <pre className="kokopu-demoCode">{buildComponentDemoCode('Chessboard', attributes)}</pre>;
 	}
 
 	set(attributeName, newValue) {

package/doc_src/demo/PageChessboardEdition.js

@@ -26,18 +26,19 @@ import kokopu from 'kokopu';
 import { Chessboard, SquareMarkerIcon, TextMarkerIcon, ArrowMarkerIcon, flattenSquareMarkers, flattenTextMarkers, flattenArrowMarkers } from '../../src/index';
 import { buildComponentDemoCode } from './util';
 
-import Box from '@material-ui/core/Box';
-import Button from '@material-ui/core/Button';
-import ButtonGroup from '@material-ui/core/ButtonGroup';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import MenuItem from '@material-ui/core/MenuItem';
-import Radio from '@material-ui/core/Radio';
-import RadioGroup from '@material-ui/core/RadioGroup';
-import Select from '@material-ui/core/Select';
-import Switch from '@material-ui/core/Switch';
-import ToggleButton from '@material-ui/lab/ToggleButton';
-import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
-import Typography from '@material-ui/core/Typography';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import ButtonGroup from '@mui/material/ButtonGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import MenuItem from '@mui/material/MenuItem';
+import Radio from '@mui/material/Radio';
+import RadioGroup from '@mui/material/RadioGroup';
+import Select from '@mui/material/Select';
+import Stack from '@mui/material/Stack';
+import Switch from '@mui/material/Switch';
+import ToggleButton from '@mui/material/ToggleButton';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import Typography from '@mui/material/Typography';
 
 import './demo.css';
 
@@ -68,55 +69,53 @@ 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} display="flex" flexDirection="row" alignItems="center">
+			<Stack direction="row" spacing={2} alignItems="center">
 				<FormControlLabel label="Flip"
 					control={<Switch checked={this.state.flipped} onChange={() => this.set('flipped', !this.state.flipped)} color="primary" />}
 				/>
 				<Button color="primary" size="small" variant="contained" onClick={() => this.handleTurnClicked(kokopu.oppositeColor(this.state.position.turn()))}>
 					Change turn
 				</Button>
-				<Box mx={2}>
-					<ButtonGroup color="primary" size="small">
-						<Button onClick={() => this.set('position', new kokopu.Position('empty'))}>Clear</Button>
-						<Button onClick={() => this.set('position', new kokopu.Position())}>Reset</Button>
-					</ButtonGroup>
-				</Box>
-			</Box>
-			<Box my={2}>
+				<ButtonGroup color="primary" size="small">
+					<Button onClick={() => this.set('position', new kokopu.Position('empty'))}>Clear</Button>
+					<Button onClick={() => this.set('position', new kokopu.Position())}>Reset</Button>
+				</ButtonGroup>
+			</Stack>
+			<Box>
 				<Typography gutterBottom>
 					Edition mode
 				</Typography>
 				<RadioGroup value={this.state.interactionMode} onChange={evt => this.set('interactionMode', evt.target.value)}>
 					<FormControlLabel value="" control={<Radio color="primary" />} label="None" />
-					<Box display="flex" flexDirection="row">
+					<Stack direction="row" spacing={2} alignItems="center">
 						<FormControlLabel value="addRemovePieces" control={<Radio color="primary" />} label="Add/remove pieces" />
 						{this.renderPieceSelector()}
-					</Box>
+					</Stack>
 					<FormControlLabel value="movePieces" control={<Radio color="primary" />} label="Move pieces" />
 					<FormControlLabel value="playMoves" control={<Radio color="primary" />} label="Move pieces (obeying chess rules)" />
-					<Box display="flex" flexDirection="row">
+					<Stack direction="row" spacing={2} alignItems="center">
 						<FormControlLabel value="editSquareMarkers" control={<Radio color="primary" />} label="Edit square annotations" />
 						{this.renderMarkerColorSelector('squareMarkerColor', 'editSquareMarkers')}
-					</Box>
-					<Box display="flex" flexDirection="row">
+					</Stack>
+					<Stack direction="row" spacing={2} alignItems="center">
 						<FormControlLabel value="editTextMarkers" control={<Radio color="primary" />} label="Edit text annotations" />
 						{this.renderMarkerColorSelector('textMarkerColor', 'editTextMarkers')}
 						{this.renderTextMarkerSymbolSelector()}
-					</Box>
-					<Box display="flex" flexDirection="row">
+					</Stack>
+					<Stack direction="row" spacing={2} alignItems="center">
 						<FormControlLabel value="editArrowMarkers" control={<Radio color="primary" />} label="Edit arrow annotations" />
 						{this.renderMarkerColorSelector('arrowMarkerColor', 'editArrowMarkers')}
-					</Box>
+					</Stack>
 				</RadioGroup>
 			</Box>
 		</>);
@@ -128,28 +127,24 @@ export default class Page extends React.Component {
 		}
 		let pieceset = Chessboard.piecesets()['cburnett'];
 		return (
-			<Box mx={2}>
-				<Box my={0.5}>
-					<ToggleButtonGroup value={this.state.pieceEditMode} exclusive size="small" onChange={(_, newMode) => this.setIfNonNull('pieceEditMode', newMode)}>
-						<ToggleButton value="wk"><img src={pieceset.wk} width={PIECE_ICON_SIZE} height={PIECE_ICON_SIZE} /></ToggleButton>
-						<ToggleButton value="wq"><img src={pieceset.wq} width={PIECE_ICON_SIZE} height={PIECE_ICON_SIZE} /></ToggleButton>
-						<ToggleButton value="wr"><img src={pieceset.wr} width={PIECE_ICON_SIZE} height={PIECE_ICON_SIZE} /></ToggleButton>
-						<ToggleButton value="wb"><img src={pieceset.wb} width={PIECE_ICON_SIZE} height={PIECE_ICON_SIZE} /></ToggleButton>
-						<ToggleButton value="wn"><img src={pieceset.wn} width={PIECE_ICON_SIZE} height={PIECE_ICON_SIZE} /></ToggleButton>
-						<ToggleButton value="wp"><img src={pieceset.wp} width={PIECE_ICON_SIZE} height={PIECE_ICON_SIZE} /></ToggleButton>
-					</ToggleButtonGroup>
-				</Box>
-				<Box my={0.5}>
-					<ToggleButtonGroup value={this.state.pieceEditMode} exclusive size="small" onChange={(_, newMode) => this.setIfNonNull('pieceEditMode', newMode)}>
-						<ToggleButton value="bk"><img src={pieceset.bk} width={PIECE_ICON_SIZE} height={PIECE_ICON_SIZE} /></ToggleButton>
-						<ToggleButton value="bq"><img src={pieceset.bq} width={PIECE_ICON_SIZE} height={PIECE_ICON_SIZE} /></ToggleButton>
-						<ToggleButton value="br"><img src={pieceset.br} width={PIECE_ICON_SIZE} height={PIECE_ICON_SIZE} /></ToggleButton>
-						<ToggleButton value="bb"><img src={pieceset.bb} width={PIECE_ICON_SIZE} height={PIECE_ICON_SIZE} /></ToggleButton>
-						<ToggleButton value="bn"><img src={pieceset.bn} width={PIECE_ICON_SIZE} height={PIECE_ICON_SIZE} /></ToggleButton>
-						<ToggleButton value="bp"><img src={pieceset.bp} width={PIECE_ICON_SIZE} height={PIECE_ICON_SIZE} /></ToggleButton>
-					</ToggleButtonGroup>
-				</Box>
-			</Box>
+			<Stack spacing={0.5}>
+				<ToggleButtonGroup value={this.state.pieceEditMode} exclusive size="small" onChange={(_, newMode) => this.setIfNonNull('pieceEditMode', newMode)}>
+					<ToggleButton value="wk"><img src={pieceset.wk} width={PIECE_ICON_SIZE} height={PIECE_ICON_SIZE} /></ToggleButton>
+					<ToggleButton value="wq"><img src={pieceset.wq} width={PIECE_ICON_SIZE} height={PIECE_ICON_SIZE} /></ToggleButton>
+					<ToggleButton value="wr"><img src={pieceset.wr} width={PIECE_ICON_SIZE} height={PIECE_ICON_SIZE} /></ToggleButton>
+					<ToggleButton value="wb"><img src={pieceset.wb} width={PIECE_ICON_SIZE} height={PIECE_ICON_SIZE} /></ToggleButton>
+					<ToggleButton value="wn"><img src={pieceset.wn} width={PIECE_ICON_SIZE} height={PIECE_ICON_SIZE} /></ToggleButton>
+					<ToggleButton value="wp"><img src={pieceset.wp} width={PIECE_ICON_SIZE} height={PIECE_ICON_SIZE} /></ToggleButton>
+				</ToggleButtonGroup>
+				<ToggleButtonGroup value={this.state.pieceEditMode} exclusive size="small" onChange={(_, newMode) => this.setIfNonNull('pieceEditMode', newMode)}>
+					<ToggleButton value="bk"><img src={pieceset.bk} width={PIECE_ICON_SIZE} height={PIECE_ICON_SIZE} /></ToggleButton>
+					<ToggleButton value="bq"><img src={pieceset.bq} width={PIECE_ICON_SIZE} height={PIECE_ICON_SIZE} /></ToggleButton>
+					<ToggleButton value="br"><img src={pieceset.br} width={PIECE_ICON_SIZE} height={PIECE_ICON_SIZE} /></ToggleButton>
+					<ToggleButton value="bb"><img src={pieceset.bb} width={PIECE_ICON_SIZE} height={PIECE_ICON_SIZE} /></ToggleButton>
+					<ToggleButton value="bn"><img src={pieceset.bn} width={PIECE_ICON_SIZE} height={PIECE_ICON_SIZE} /></ToggleButton>
+					<ToggleButton value="bp"><img src={pieceset.bp} width={PIECE_ICON_SIZE} height={PIECE_ICON_SIZE} /></ToggleButton>
+				</ToggleButtonGroup>
+			</Stack>
 		);
 	}
 
@@ -157,9 +152,10 @@ export default class Page extends React.Component {
 		if (this.state.interactionMode !== 'editTextMarkers') {
 			return undefined;
 		}
+		let availableSymbols = [ 'plus', 'times', 'dot', 'circle' ].concat([...'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789']);
 		return (
-			<Select value={this.state.textMarkerSymbol} onChange={evt => this.set('textMarkerSymbol', evt.target.value)}>
-				{[...'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'].map(mode => <MenuItem key={mode} value={mode}>{mode}</MenuItem>)}
+			<Select variant="standard" value={this.state.textMarkerSymbol} onChange={evt => this.set('textMarkerSymbol', evt.target.value)}>
+				{availableSymbols.map(mode => <MenuItem key={mode} value={mode}>{mode}</MenuItem>)}
 			</Select>
 		);
 	}
@@ -170,13 +166,11 @@ export default class Page extends React.Component {
 		}
 		let colorset = Chessboard.colorsets()['original'];
 		return (
-			<Box mx={2} my={0.5}>
-				<ToggleButtonGroup value={this.state[attributeName]} exclusive size="small" onChange={(_, newColor) => this.setIfNonNull(attributeName, newColor)}>
-					<ToggleButton className="kokopu-fixTextTransform" value="g">{this.renderColorButtonLabel(colorset.g)}</ToggleButton>
-					<ToggleButton className="kokopu-fixTextTransform" value="r">{this.renderColorButtonLabel(colorset.r)}</ToggleButton>
-					<ToggleButton className="kokopu-fixTextTransform" value="y">{this.renderColorButtonLabel(colorset.y)}</ToggleButton>
-				</ToggleButtonGroup>
-			</Box>
+			<ToggleButtonGroup value={this.state[attributeName]} exclusive size="small" onChange={(_, newColor) => this.setIfNonNull(attributeName, newColor)}>
+				<ToggleButton className="kokopu-fixTextTransform" value="g">{this.renderColorButtonLabel(colorset.g)}</ToggleButton>
+				<ToggleButton className="kokopu-fixTextTransform" value="r">{this.renderColorButtonLabel(colorset.r)}</ToggleButton>
+				<ToggleButton className="kokopu-fixTextTransform" value="y">{this.renderColorButtonLabel(colorset.y)}</ToggleButton>
+			</ToggleButtonGroup>
 		);
 	}
 
@@ -195,7 +189,7 @@ export default class Page extends React.Component {
 
 	renderChessboard() {
 		return (
-			<Box my={2}>
+			<Box>
 				<Chessboard
 					position={this.state.position}
 					flipped={this.state.flipped}
@@ -257,13 +251,7 @@ export default class Page extends React.Component {
 			default:
 				break;
 		}
-		return (
-			<Box my={2}>
-				<pre className="kokopu-demoCode">
-					{buildComponentDemoCode('Chessboard', attributes)}
-				</pre>
-			</Box>
-		);
+		return <pre className="kokopu-demoCode">{buildComponentDemoCode('Chessboard', attributes)}</pre>;
 	}
 
 	set(attributeName, newValue) {

package/doc_src/demo/PageChessboardMove.js

@@ -26,12 +26,13 @@ import kokopu from 'kokopu';
 import { Chessboard } from '../../src/index';
 import { buildComponentDemoCode } from './util';
 
-import Box from '@material-ui/core/Box';
-import Button from '@material-ui/core/Button';
-import ButtonGroup from '@material-ui/core/ButtonGroup';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import Switch from '@material-ui/core/Switch';
-import TextField from '@material-ui/core/TextField';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import ButtonGroup from '@mui/material/ButtonGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Stack from '@mui/material/Stack';
+import Switch from '@mui/material/Switch';
+import TextField from '@mui/material/TextField';
 
 import './demo.css';
 
@@ -56,17 +57,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}>
+			<Stack direction="row" spacing={2} alignItems="center">
 				<FormControlLabel label="Flip"
 					control={<Switch checked={this.state.flipped} onChange={() => this.set('flipped', !this.state.flipped)} color="primary" />}
 				/>
@@ -76,23 +77,21 @@ export default class Page extends React.Component {
 				<FormControlLabel label="Animation" disabled={!this.state.positionAfter}
 					control={<Switch checked={this.state.animated} onChange={() => this.set('animated', !this.state.animated)} color="primary" />}
 				/>
-			</Box>
-			<Box my={2} display="flex" flexDirection="row" alignItems="center">
-				<TextField label="Move" value={this.state.editedMove} onChange={evt => this.set('editedMove', evt.target.value)} />
+			</Stack>
+			<Stack direction="row" spacing={2} alignItems="center">
+				<TextField label="Move" variant="standard" value={this.state.editedMove} onChange={evt => this.set('editedMove', evt.target.value)} />
 				<Button color="primary" size="small" variant="contained" onClick={() => this.handlePlayClicked()}>Play</Button>
-				<Box mx={2}>
-					<ButtonGroup color="primary" size="small">
-						<Button onClick={() => this.setPosition(new kokopu.Position('empty'))}>Clear</Button>
-						<Button onClick={() => this.setPosition(new kokopu.Position())}>Reset</Button>
-					</ButtonGroup>
-				</Box>
-			</Box>
+				<ButtonGroup color="primary" size="small">
+					<Button onClick={() => this.setPosition(new kokopu.Position('empty'))}>Clear</Button>
+					<Button onClick={() => this.setPosition(new kokopu.Position())}>Reset</Button>
+				</ButtonGroup>
+			</Stack>
 		</>);
 	}
 
 	renderChessboard() {
 		return (
-			<Box my={2}>
+			<Box>
 				<Chessboard
 					position={this.state.position}
 					move={this.state.playedMove}
@@ -115,13 +114,7 @@ export default class Page extends React.Component {
 		}
 		attributes.push(`moveArrowVisible={${this.state.moveArrowVisible}}`);
 		attributes.push(`animated={${this.state.animated}}`);
-		return (
-			<Box my={2}>
-				<pre className="kokopu-demoCode">
-					{buildComponentDemoCode('Chessboard', attributes)}
-				</pre>
-			</Box>
-		);
+		return <pre className="kokopu-demoCode">{buildComponentDemoCode('Chessboard', attributes)}</pre>;
 	}
 
 	set(attributeName, newValue) {

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/01_marker_icons.js

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

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

@@ -34,4 +34,6 @@ testApp([ /* eslint-disable react/jsx-key */
 		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 */