kokopu-react 1.0.2 → 1.3.1

package/dist/lib/{impl/ErrorBox.js → ErrorBox.js}

@@ -9,7 +9,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireDefault(require("react"));
 
-require("../css/error_box.css");
+require("./css/error_box.css");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -38,14 +38,13 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
  * Display an error message.
  */
 function ErrorBox(props) {
-  var message = 'message' in props ? /*#__PURE__*/_react["default"].createElement("div", {
-    className: "kokopu-errorMessage"
-  }, props.message) : undefined;
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "kokopu-errorBox"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "kokopu-errorTitle"
-  }, props.title), message);
+  }, props.title), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "kokopu-errorMessage"
+  }, props.message));
 }
 
 ErrorBox.propTypes = {
@@ -55,7 +54,7 @@ ErrorBox.propTypes = {
   title: _propTypes["default"].string.isRequired,
 
   /**
-   * Optional message providing additional details about the error.
+   * Additional message providing details about the error.
    */
-  message: _propTypes["default"].string
+  message: _propTypes["default"].string.isRequired
 };

package/dist/lib/css/chessboard.css

@@ -48,3 +48,7 @@
 .kokopu-arrowDraggable {
 	cursor: crosshair;
 }
+
+.kokopu-drawerMask {
+	opacity: 0.5;
+}

package/dist/lib/i18n.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+/******************************************************************************
+ *                                                                            *
+ *    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/>.                                         *
+ *                                                                            *
+ ******************************************************************************/
+var i18n = {
+  INVALID_FEN_ERROR_TITLE: 'Invalid FEN string.',
+  INVALID_NOTATION_ERROR_TITLE: 'Invalid move notation.',
+  INVALID_POSITION_ATTRIBUTE_ERROR_MESSAGE: 'Invalid "position" attribute.',
+  INVALID_MOVE_ATTRIBUTE_ERROR_MESSAGE: 'Invalid "move" attribute.'
+};
+var _default = i18n;
+exports["default"] = _default;

package/dist/lib/index.js

@@ -39,12 +39,24 @@ Object.defineProperty(exports, "parseArrowMarkers", {
     return _markers.parseArrowMarkers;
   }
 });
+Object.defineProperty(exports, "i18n", {
+  enumerable: true,
+  get: function get() {
+    return _i18n["default"];
+  }
+});
 Object.defineProperty(exports, "Chessboard", {
   enumerable: true,
   get: function get() {
     return _Chessboard["default"];
   }
 });
+Object.defineProperty(exports, "ErrorBox", {
+  enumerable: true,
+  get: function get() {
+    return _ErrorBox["default"];
+  }
+});
 Object.defineProperty(exports, "SquareMarkerIcon", {
   enumerable: true,
   get: function get() {
@@ -66,8 +78,12 @@ Object.defineProperty(exports, "ArrowMarkerIcon", {
 
 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/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,54 +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" />
-					<Box display="flex" flexDirection="row">
+					<FormControlLabel value="playMoves" control={<Radio color="primary" />} label="Move pieces (obeying chess rules)" />
+					<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>
 		</>);
@@ -127,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,7 +153,7 @@ export default class Page extends React.Component {
 			return undefined;
 		}
 		return (
-			<Select value={this.state.textMarkerSymbol} onChange={evt => this.set('textMarkerSymbol', evt.target.value)}>
+			<Select variant="standard" value={this.state.textMarkerSymbol} onChange={evt => this.set('textMarkerSymbol', evt.target.value)}>
 				{[...'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'].map(mode => <MenuItem key={mode} value={mode}>{mode}</MenuItem>)}
 			</Select>
 		);
@@ -169,13 +165,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>
 		);
 	}
 
@@ -194,7 +188,7 @@ export default class Page extends React.Component {
 
 	renderChessboard() {
 		return (
-			<Box my={2}>
+			<Box>
 				<Chessboard
 					position={this.state.position}
 					flipped={this.state.flipped}
@@ -204,6 +198,7 @@ export default class Page extends React.Component {
 					interactionMode={this.getChessboardInterationMode()}
 					editedArrowColor={this.state.arrowMarkerColor}
 					onPieceMoved={(from, to) => this.handlePieceMoved(from, to)}
+					onMovePlayed={move => this.handleMovePlayed(move)}
 					onArrowEdited={(from, to) => this.handleArrowEdited(from, to)}
 					onSquareClicked={sq => this.handleSquareClicked(sq)}
 				/>
@@ -248,16 +243,14 @@ export default class Page extends React.Component {
 				attributes.push('interactionMode="movePieces"');
 				attributes.push('onPieceMoved={(from, to) => handlePieceMoved(from, to)}');
 				break;
+			case 'playMoves':
+				attributes.push('interactionMode="playMoves"');
+				attributes.push('onMovePlayed={move => handleMovePlayed(move)}');
+				break;
 			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) {
@@ -285,6 +278,12 @@ export default class Page extends React.Component {
 		this.set('position', newPosition);
 	}
 
+	handleMovePlayed(move) {
+		let newPosition = new kokopu.Position(this.state.position);
+		newPosition.play(move);
+		this.set('position', newPosition);
+	}
+
 	handleArrowEdited(from, to) {
 		let newArrowMarkers = {...this.state.arrowMarkers};
 		let key = from + to;
@@ -334,7 +333,8 @@ export default class Page extends React.Component {
 			case 'editArrowMarkers':
 				return 'editArrows';
 			case 'movePieces':
-				return 'movePieces';
+			case 'playMoves':
+				return this.state.interactionMode;
 			default:
 				return undefined;
 		}

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