kokopu-react 1.2.0 → 1.4.1

package/dist/lib/index.js

@@ -3,28 +3,34 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "flattenSquareMarkers", {
+Object.defineProperty(exports, "ArrowMarkerIcon", {
   enumerable: true,
   get: function get() {
-    return _markers.flattenSquareMarkers;
+    return _ArrowMarkerIcon["default"];
   }
 });
-Object.defineProperty(exports, "parseSquareMarkers", {
+Object.defineProperty(exports, "Chessboard", {
   enumerable: true,
   get: function get() {
-    return _markers.parseSquareMarkers;
+    return _Chessboard["default"];
   }
 });
-Object.defineProperty(exports, "flattenTextMarkers", {
+Object.defineProperty(exports, "ErrorBox", {
   enumerable: true,
   get: function get() {
-    return _markers.flattenTextMarkers;
+    return _ErrorBox["default"];
   }
 });
-Object.defineProperty(exports, "parseTextMarkers", {
+Object.defineProperty(exports, "SquareMarkerIcon", {
   enumerable: true,
   get: function get() {
-    return _markers.parseTextMarkers;
+    return _SquareMarkerIcon["default"];
+  }
+});
+Object.defineProperty(exports, "TextMarkerIcon", {
+  enumerable: true,
+  get: function get() {
+    return _TextMarkerIcon["default"];
   }
 });
 Object.defineProperty(exports, "flattenArrowMarkers", {
@@ -33,41 +39,51 @@ Object.defineProperty(exports, "flattenArrowMarkers", {
     return _markers.flattenArrowMarkers;
   }
 });
-Object.defineProperty(exports, "parseArrowMarkers", {
+Object.defineProperty(exports, "flattenSquareMarkers", {
   enumerable: true,
   get: function get() {
-    return _markers.parseArrowMarkers;
+    return _markers.flattenSquareMarkers;
   }
 });
-Object.defineProperty(exports, "Chessboard", {
+Object.defineProperty(exports, "flattenTextMarkers", {
   enumerable: true,
   get: function get() {
-    return _Chessboard["default"];
+    return _markers.flattenTextMarkers;
   }
 });
-Object.defineProperty(exports, "SquareMarkerIcon", {
+Object.defineProperty(exports, "i18n", {
   enumerable: true,
   get: function get() {
-    return _SquareMarkerIcon["default"];
+    return _i18n["default"];
   }
 });
-Object.defineProperty(exports, "TextMarkerIcon", {
+Object.defineProperty(exports, "parseArrowMarkers", {
   enumerable: true,
   get: function get() {
-    return _TextMarkerIcon["default"];
+    return _markers.parseArrowMarkers;
   }
 });
-Object.defineProperty(exports, "ArrowMarkerIcon", {
+Object.defineProperty(exports, "parseSquareMarkers", {
   enumerable: true,
   get: function get() {
-    return _ArrowMarkerIcon["default"];
+    return _markers.parseSquareMarkers;
+  }
+});
+Object.defineProperty(exports, "parseTextMarkers", {
+  enumerable: true,
+  get: function get() {
+    return _markers.parseTextMarkers;
   }
 });
 
 var _markers = require("./markers");
 
+var _i18n = _interopRequireDefault(require("./i18n"));
+
 var _Chessboard = _interopRequireDefault(require("./Chessboard"));
 
+var _ErrorBox = _interopRequireDefault(require("./ErrorBox"));
+
 var _SquareMarkerIcon = _interopRequireDefault(require("./SquareMarkerIcon"));
 
 var _TextMarkerIcon = _interopRequireDefault(require("./TextMarkerIcon"));

package/dist/lib/markers.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.flattenArrowMarkers = flattenArrowMarkers;
 exports.flattenSquareMarkers = flattenSquareMarkers;
 exports.flattenTextMarkers = flattenTextMarkers;
-exports.flattenArrowMarkers = flattenArrowMarkers;
+exports.parseArrowMarkers = parseArrowMarkers;
 exports.parseSquareMarkers = parseSquareMarkers;
 exports.parseTextMarkers = parseTextMarkers;
-exports.parseArrowMarkers = parseArrowMarkers;
 
 var _util = require("./impl/util");
 
@@ -50,8 +50,8 @@ function flattenSquareMarkers(markers) {
 /**
  * Transform a set of text markers defined as a "square -> (symbol, color)" struct into a comma-separated string.
  *
- * @param {object} markers For example: `{ e4: { symbol: 'A', color: 'g' }, d5: { symbol: 'z', color: 'r' }}`
- * @returns {string} For example: `'Rzd5,GAe4'`
+ * @param {object} markers For example: `{ e4: { symbol: 'A', color: 'g' }, d5: { symbol: 'z', color: 'r' }, h3: { symbol: 'plus', color: 'y' } }`
+ * @returns {string} For example: `'Rzd5,GAe4,Y(plus)h3'`
  */
 
 
@@ -69,7 +69,7 @@ function flattenTextMarkers(markers) {
         sq = _ref8[0],
         desc = _ref8[1];
 
-    return desc.color.toUpperCase() + desc.symbol + sq;
+    return desc.color.toUpperCase() + (desc.symbol.length === 1 ? desc.symbol : '(' + desc.symbol + ')') + sq;
   }).join(',');
 }
 /**
@@ -130,17 +130,17 @@ function parseSquareMarkers(markers) {
 /**
  * Parse a set of text markers defined as a comma-separated string into a "square -> (symbol, color)" struct.
  *
- * @param {string} markers For example: `'Rzd5,GAe4'`
- * @returns {object} For example: `{ e4: { symbol: 'A', color: 'g' }, d5: { symbol: 'z', color: 'r' }}`
+ * @param {string} markers For example: `'Rzd5,GAe4,Y(plus)h3'`
+ * @returns {object} For example: `{ e4: { symbol: 'A', color: 'g' }, d5: { symbol: 'z', color: 'r' }, h3: { symbol: 'plus', color: 'y' } }`
  */
 
 
 function parseTextMarkers(markers) {
   return parseMarkers(markers, function (token) {
-    return /^([GRY])([A-Za-z0-9])([a-h][1-8])$/.test(token) ? {
-      key: RegExp.$3,
+    return /^([GRY])(?:([A-Za-z0-9])|\((plus|times|dot|circle)\))([a-h][1-8])$/.test(token) ? {
+      key: RegExp.$4,
       value: {
-        symbol: RegExp.$2,
+        symbol: RegExp.$2 || RegExp.$3,
         color: RegExp.$1.toLowerCase()
       }
     } : undefined;

package/doc_src/demo/PageChessboardBase.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,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

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

@@ -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      *
@@ -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) {