kokopu-react 1.3.1 → 1.5.0

package/dist/lib/impl/util.js

@@ -3,18 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.MIN_SQUARE_SIZE = exports.MAX_SQUARE_SIZE = void 0;
 exports.generateRandomId = generateRandomId;
-exports.sanitizeInteger = sanitizeInteger;
-exports.isValidSquare = isValidSquare;
-exports.isValidVector = isValidVector;
 exports.isValidColor = isValidColor;
+exports.isValidSquare = isValidSquare;
 exports.isValidSymbol = isValidSymbol;
-exports.MAX_SQUARE_SIZE = exports.MIN_SQUARE_SIZE = void 0;
+exports.isValidVector = isValidVector;
+exports.sanitizeInteger = sanitizeInteger;
 
 /******************************************************************************
  *                                                                            *
  *    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      *
@@ -65,5 +65,5 @@ function isValidColor(color) {
 }
 
 function isValidSymbol(symbol) {
-  return /^[A-Za-z0-9]$/.test(symbol);
+  return /^(?:[A-Za-z0-9]|plus|times|dot|circle)$/.test(symbol);
 }

package/dist/lib/index.js

@@ -3,76 +3,82 @@
 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, "Movetext", {
   enumerable: true,
   get: function get() {
-    return _markers.parseTextMarkers;
+    return _Movetext["default"];
   }
 });
-Object.defineProperty(exports, "flattenArrowMarkers", {
+Object.defineProperty(exports, "SquareMarkerIcon", {
   enumerable: true,
   get: function get() {
-    return _markers.flattenArrowMarkers;
+    return _SquareMarkerIcon["default"];
   }
 });
-Object.defineProperty(exports, "parseArrowMarkers", {
+Object.defineProperty(exports, "TextMarkerIcon", {
   enumerable: true,
   get: function get() {
-    return _markers.parseArrowMarkers;
+    return _TextMarkerIcon["default"];
   }
 });
-Object.defineProperty(exports, "i18n", {
+Object.defineProperty(exports, "flattenArrowMarkers", {
   enumerable: true,
   get: function get() {
-    return _i18n["default"];
+    return _markers.flattenArrowMarkers;
   }
 });
-Object.defineProperty(exports, "Chessboard", {
+Object.defineProperty(exports, "flattenSquareMarkers", {
   enumerable: true,
   get: function get() {
-    return _Chessboard["default"];
+    return _markers.flattenSquareMarkers;
   }
 });
-Object.defineProperty(exports, "ErrorBox", {
+Object.defineProperty(exports, "flattenTextMarkers", {
   enumerable: true,
   get: function get() {
-    return _ErrorBox["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;
   }
 });
 
@@ -84,6 +90,8 @@ var _Chessboard = _interopRequireDefault(require("./Chessboard"));
 
 var _ErrorBox = _interopRequireDefault(require("./ErrorBox"));
 
+var _Movetext = _interopRequireDefault(require("./Movetext"));
+
 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      *

package/doc_src/demo/{PageChessboardEdition.js → PageChessboardInteraction.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      *
@@ -92,9 +92,7 @@ export default class Page extends React.Component {
 				</ButtonGroup>
 			</Stack>
 			<Box>
-				<Typography gutterBottom>
-					Edition mode
-				</Typography>
+				<Typography gutterBottom>Interaction mode</Typography>
 				<RadioGroup value={this.state.interactionMode} onChange={evt => this.set('interactionMode', evt.target.value)}>
 					<FormControlLabel value="" control={<Radio color="primary" />} label="None" />
 					<Stack direction="row" spacing={2} alignItems="center">
@@ -152,9 +150,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 variant="standard" value={this.state.textMarkerSymbol} onChange={evt => this.set('textMarkerSymbol', evt.target.value)}>
-				{[...'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'].map(mode => <MenuItem key={mode} value={mode}>{mode}</MenuItem>)}
+				{availableSymbols.map(mode => <MenuItem key={mode} value={mode}>{mode}</MenuItem>)}
 			</Select>
 		);
 	}

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      *

package/doc_src/demo/PageChessboardSmallScreens.js

@@ -1,7 +1,7 @@
 /******************************************************************************
  *                                                                            *
  *    This file is part of Kokopu-React, a JavaScript chess library.          *
- *    Copyright (C) 2021  Yoann Le Montagner <yo35 -at- melix.net>            *
+ *    Copyright (C) 2021-2022  Yoann Le Montagner <yo35 -at- melix.net>       *
  *                                                                            *
  *    This program is free software: you can redistribute it and/or           *
  *    modify it under the terms of the GNU Lesser General Public License      *

package/doc_src/demo/PageMovetextBase.js

@@ -0,0 +1,214 @@
+/******************************************************************************
+ *                                                                            *
+ *    This file is part of Kokopu-React, a JavaScript chess library.          *
+ *    Copyright (C) 2021-2022  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *                                                                            *
+ *    This program is free software: you can redistribute it and/or           *
+ *    modify it under the terms of the GNU Lesser General Public License      *
+ *    as published by the Free Software Foundation, either version 3 of       *
+ *    the License, or (at your option) any later version.                     *
+ *                                                                            *
+ *    This program is distributed in the hope that it will be useful,         *
+ *    but WITHOUT ANY WARRANTY; without even the implied warranty of          *
+ *    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the            *
+ *    GNU Lesser General Public License for more details.                     *
+ *                                                                            *
+ *    You should have received a copy of the GNU Lesser General               *
+ *    Public License along with this program. If not, see                     *
+ *    <http://www.gnu.org/licenses/>.                                         *
+ *                                                                            *
+ ******************************************************************************/
+
+
+import React from 'react';
+
+import { Chessboard, Movetext } from '../../src/index';
+import { buildComponentDemoCode } from './util';
+
+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 TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+
+import './demo.css';
+import game1 from './game-1.pgn';
+import game2 from './game-2.pgn';
+import invalidGame from './game-invalid.pgn';
+
+
+export default class Page extends React.Component {
+
+	constructor(props) {
+		super(props);
+		this.state = {
+			pgn: game1,
+			headerVisible: true,
+			diagramVisible: true,
+			pieceSymbols: 'figurines',
+			customSymbols: { K:'R', Q:'D', R:'T', B:'F', N:'C', P:'P' },
+			diagramOptions: {
+				flipped: false,
+				squareSize: 32,
+				coordinateVisible: true,
+				colorset: 'original',
+				pieceset: 'cburnett',
+			},
+		};
+	}
+
+	render() {
+		return (
+			<Stack spacing={2} mt={2}>
+				{this.renderControls()}
+				{this.renderMovetext()}
+				{this.renderCode()}
+			</Stack>
+		);
+	}
+
+	renderControls() {
+		let opts = this.state.diagramOptions;
+		return (<>
+			<Stack direction="row" spacing={2} alignItems="center">
+				<ButtonGroup color="primary" size="small">
+					<Button onClick={() => this.set('pgn', game1)}>Game 1</Button>
+					<Button onClick={() => this.set('pgn', game2)}>Game 2</Button>
+					<Button onClick={() => this.set('pgn', invalidGame)}>Invalid game</Button>
+				</ButtonGroup>
+				<FormControlLabel label="Show headers"
+					control={<Switch checked={this.state.headerVisible} onChange={() => this.set('headerVisible', !this.state.headerVisible)} color="primary" />}
+				/>
+				<FormControlLabel label="Show diagrams"
+					control={<Switch checked={this.state.diagramVisible} onChange={() => this.set('diagramVisible', !this.state.diagramVisible)} color="primary" />}
+				/>
+			</Stack>
+			<Stack direction="row" spacing={2} alignItems="center">
+				<FormControl variant="standard">
+					<InputLabel id="piecesymbols-label">Piece symbols</InputLabel>
+					<Select labelId="piecesymbols-label" sx={{ width: '8em' }} value={this.state.pieceSymbols} onChange={evt => this.set('pieceSymbols', evt.target.value)}>
+						<MenuItem value="native">Native</MenuItem>
+						<MenuItem value="figurines">Figurines</MenuItem>
+						<MenuItem value="custom">Custom</MenuItem>
+					</Select>
+				</FormControl>
+				{this.renderCustomSymbolSelector()}
+			</Stack>
+			<Stack direction="row" spacing={2} alignItems="center">
+				<FormControlLabel label="Flip diagram(s)"
+					control={<Switch checked={opts.flipped} onChange={() => this.setDiagramOption('flipped', !opts.flipped)} color="primary" />}
+				/>
+				<FormControlLabel label="Show coordinates in diagram(s)"
+					control={<Switch checked={opts.coordinateVisible} onChange={() => this.setDiagramOption('coordinateVisible', !opts.coordinateVisible)} color="primary" />}
+				/>
+				<FormControl variant="standard">
+					<InputLabel id="colorset-label">Colorset</InputLabel>
+					<Select labelId="colorset-label" sx={{ width: '8em' }} value={opts.colorset} onChange={evt => this.setDiagramOption('colorset', evt.target.value)}>
+						{Object.keys(Chessboard.colorsets()).sort().map(colorset => <MenuItem key={colorset} value={colorset}>{colorset}</MenuItem>)}
+					</Select>
+				</FormControl>
+				<FormControl variant="standard">
+					<InputLabel id="pieceset-label">Pieceset</InputLabel>
+					<Select labelId="pieceset-label" sx={{ width: '8em' }} value={opts.pieceset} onChange={evt => this.setDiagramOption('pieceset', evt.target.value)}>
+						{Object.keys(Chessboard.piecesets()).sort().map(pieceset => <MenuItem key={pieceset} value={pieceset}>{pieceset}</MenuItem>)}
+					</Select>
+				</FormControl>
+			</Stack>
+			<Box>
+				<Typography gutterBottom>Diagram square size</Typography>
+				<Slider
+					value={opts.squareSize} onChange={(_, newValue) => this.setDiagramOption('squareSize', newValue)}
+					min={Chessboard.minSquareSize()} max={Chessboard.maxSquareSize()} step={1} valueLabelDisplay="on" color="primary"
+				/>
+			</Box>
+		</>);
+	}
+
+	renderCustomSymbolSelector() {
+		if (this.state.pieceSymbols !== 'custom') {
+			return undefined;
+		}
+		let symbols = this.state.customSymbols;
+		return (<>
+			<TextField variant="standard" sx={{ width: '3em' }} label="King" value={symbols.K} onChange={evt => this.setCustomSymbol('K', evt.target.value)} />
+			<TextField variant="standard" sx={{ width: '3em' }} label="Queen" value={symbols.Q} onChange={evt => this.setCustomSymbol('Q', evt.target.value)} />
+			<TextField variant="standard" sx={{ width: '3em' }} label="Rook" value={symbols.R} onChange={evt => this.setCustomSymbol('R', evt.target.value)} />
+			<TextField variant="standard" sx={{ width: '3em' }} label="Bishop" value={symbols.B} onChange={evt => this.setCustomSymbol('B', evt.target.value)} />
+			<TextField variant="standard" sx={{ width: '3em' }} label="Knight" value={symbols.N} onChange={evt => this.setCustomSymbol('N', evt.target.value)} />
+			<TextField variant="standard" sx={{ width: '3em' }} label="Pawn" value={symbols.P} onChange={evt => this.setCustomSymbol('P', evt.target.value)} />
+		</>);
+	}
+
+	renderMovetext() {
+		return (
+			<Box>
+				<Movetext
+					game={this.state.pgn}
+					headerVisible={this.state.headerVisible}
+					diagramVisible={this.state.diagramVisible}
+					pieceSymbols={this.state.pieceSymbols === 'custom' ? this.state.customSymbols : this.state.pieceSymbols}
+					diagramOptions={this.state.diagramOptions}
+				/>
+			</Box>
+		);
+	}
+
+	renderCode() {
+		let attributes = [];
+		attributes.push('game={pgn}');
+		attributes.push(`headerVisible={${this.state.headerVisible}}`);
+		attributes.push(`pieceSymbols=${this.getPieceSymbolsAsText()}`);
+		attributes.push(`diagramVisible={${this.state.diagramVisible}}`);
+		attributes.push(`diagramOptions={{ ${this.getDiagramAttributesAsText()} }}`);
+		let pgnDeclaration = 'const pgn = `\n' + this.state.pgn.trim() + '`;\n\n';
+		return <pre className="kokopu-demoCode">{pgnDeclaration + buildComponentDemoCode('Movetext', attributes)}</pre>;
+	}
+
+	set(attributeName, newValue) {
+		let newState = {};
+		newState[attributeName] = newValue;
+		this.setState(newState);
+	}
+
+	setCustomSymbol(key, value) {
+		let symbols = {...this.state.customSymbols};
+		symbols[key] = value;
+		this.set('customSymbols', symbols);
+	}
+
+	getPieceSymbolsAsText() {
+		if (this.state.pieceSymbols === 'custom') {
+			let symbols = this.state.customSymbols;
+			return `{{ K:'${symbols.K}', Q:'${symbols.Q}', R:'${symbols.R}', B:'${symbols.B}', N:'${symbols.N}', P:'${symbols.P}' }}`;
+		}
+		else {
+			return `"${this.state.pieceSymbols}"`;
+		}
+	}
+
+	setDiagramOption(key, value) {
+		let diagramOptions = {...this.state.diagramOptions};
+		diagramOptions[key] = value;
+		this.set('diagramOptions', diagramOptions);
+	}
+
+	getDiagramAttributesAsText() {
+		let attributes = [];
+		if (this.state.diagramOptions.flipped) {
+			attributes.push('flipped:true');
+		}
+		attributes.push(`squareSize:${this.state.diagramOptions.squareSize}`);
+		attributes.push(`coordinateVisible:${this.state.diagramOptions.coordinateVisible}`);
+		attributes.push(`colorset:'${this.state.diagramOptions.colorset}'`);
+		attributes.push(`pieceset:'${this.state.diagramOptions.pieceset}'`);
+		return attributes.join(', ');
+	}
+}

package/doc_src/demo/PageMovetextInteraction.js

@@ -0,0 +1,155 @@
+/******************************************************************************
+ *                                                                            *
+ *    This file is part of Kokopu-React, a JavaScript chess library.          *
+ *    Copyright (C) 2021-2022  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *                                                                            *
+ *    This program is free software: you can redistribute it and/or           *
+ *    modify it under the terms of the GNU Lesser General Public License      *
+ *    as published by the Free Software Foundation, either version 3 of       *
+ *    the License, or (at your option) any later version.                     *
+ *                                                                            *
+ *    This program is distributed in the hope that it will be useful,         *
+ *    but WITHOUT ANY WARRANTY; without even the implied warranty of          *
+ *    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the            *
+ *    GNU Lesser General Public License for more details.                     *
+ *                                                                            *
+ *    You should have received a copy of the GNU Lesser General               *
+ *    Public License along with this program. If not, see                     *
+ *    <http://www.gnu.org/licenses/>.                                         *
+ *                                                                            *
+ ******************************************************************************/
+
+
+import React from 'react';
+import kokopu from 'kokopu';
+
+import { Chessboard, Movetext } from '../../src/index';
+import { buildComponentDemoCode } from './util';
+
+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 Paper from '@mui/material/Paper';
+import Radio from '@mui/material/Radio';
+import RadioGroup from '@mui/material/RadioGroup';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+
+import './demo.css';
+import game1 from './game-1.pgn';
+import game2 from './game-2.pgn';
+
+
+export default class Page extends React.Component {
+
+	constructor(props) {
+		super(props);
+		this.state = {
+			pgn: game1,
+			selection: '28b',
+			interactionMode: 'selectMove',
+			withPopup: true,
+		};
+	}
+
+	render() {
+		return (
+			<Stack spacing={2} mt={2}>
+				{this.renderControls()}
+				{this.renderMovetext()}
+				{this.renderCode()}
+				{this.renderNavigationBoard()}
+			</Stack>
+		);
+	}
+
+	renderControls() {
+		return (<>
+			<Stack direction="row" spacing={2} alignItems="center">
+				<ButtonGroup color="primary" size="small">
+					<Button onClick={() => this.set('pgn', game1, 'selection', '28b')}>Game 1</Button>
+					<Button onClick={() => this.set('pgn', game2, 'selection', '15b')}>Game 2</Button>
+				</ButtonGroup>
+			</Stack>
+			<Box>
+				<Typography gutterBottom>Interaction mode</Typography>
+				<RadioGroup value={this.state.interactionMode} onChange={evt => this.set('interactionMode', evt.target.value)}>
+					<FormControlLabel value="" control={<Radio color="primary" />} label="None" />
+					<FormControlLabel value="selectMove" control={<Radio color="primary" />} label="Select moves" />
+				</RadioGroup>
+			</Box>
+		</>);
+	}
+
+	renderMovetext() {
+		return (
+			<Box>
+				<Movetext
+					game={this.state.pgn}
+					selection={this.state.selection}
+					pieceSymbols="figurines"
+					diagramVisible={false}
+					interactionMode={this.state.interactionMode}
+					onMoveSelected={nodeId => this.handleMoveSelected(nodeId)}
+				/>
+			</Box>
+		);
+	}
+
+	renderCode() {
+		let attributes = [];
+		attributes.push('game={pgn}');
+		attributes.push('pieceSymbols="figurines"');
+		attributes.push('diagramVisible={false}');
+		attributes.push(`selection="${this.state.selection}"`);
+		switch(this.state.interactionMode) {
+			case 'selectMove':
+				attributes.push('interactionMode="selectMove"');
+				attributes.push('onMoveSelected={nodeId => handleMoveSelected(nodeId)}');
+				break;
+			default:
+				break;
+		}
+		let pgnDeclaration = 'const pgn = `\n' + this.state.pgn.trim() + '`;\n\n';
+		return <pre className="kokopu-demoCode">{pgnDeclaration + buildComponentDemoCode('Movetext', attributes)}</pre>;
+	}
+
+	renderNavigationBoard() {
+		let button = <Button size="small" onClick={() => this.handlePopupToggled()}>{this.state.withPopup ? 'Reduce' : 'Open'}</Button>;
+		let { position, csl, cal } = this.getCurrentPositionAndAnnotations();
+		let content = this.state.withPopup ? <Stack><Chessboard position={position} squareMarkers={csl} arrowMarkers={cal} />{button}</Stack> : button;
+		return <Paper className="kokopu-fixedPopup" elevation={3}>{content}</Paper>;
+	}
+
+	handleMoveSelected(nodeId) {
+		if (nodeId) {
+			this.set('selection', nodeId);
+		}
+	}
+
+	handlePopupToggled() {
+		this.set('withPopup', !this.state.withPopup);
+	}
+
+	set(attributeName, newValue, attributeName2, newValue2) {
+		let newState = {};
+		newState[attributeName] = newValue;
+		if (attributeName2) {
+			newState[attributeName2] = newValue2;
+		}
+		this.setState(newState);
+	}
+
+	getCurrentPositionAndAnnotations() {
+		let game = kokopu.pgnRead(this.state.pgn, 0);
+		if (this.state.selection === 'start') {
+			let mainVariation = game.mainVariation();
+			return { position: mainVariation.initialPosition(), csl: mainVariation.tag('csl'), cal: mainVariation.tag('cal') };
+		}
+		else {
+			let node = game.findById(this.state.selection);
+			return { position: node.position(), csl: node.tag('csl'), cal: node.tag('cal') };
+		}
+	}
+}

package/doc_src/demo/demo.css

@@ -1,7 +1,7 @@
 /******************************************************************************
  *                                                                            *
  *    This file is part of Kokopu-React, a JavaScript chess library.          *
- *    Copyright (C) 2021  Yoann Le Montagner <yo35 -at- melix.net>            *
+ *    Copyright (C) 2021-2022  Yoann Le Montagner <yo35 -at- melix.net>       *
  *                                                                            *
  *    This program is free software: you can redistribute it and/or           *
  *    modify it under the terms of the GNU Lesser General Public License      *
@@ -32,3 +32,10 @@
 .MuiToggleButton-root.kokopu-fixTextTransform {
 	text-transform: none;
 }
+
+.kokopu-fixedPopup {
+	position: fixed;
+	bottom: 20px;
+	right: 20px;
+	padding: 10px;
+}