kokopu-react 1.4.1 → 1.5.0

package/dist/lib/css/chessboard.css

@@ -22,6 +22,11 @@
 
 .kokopu-coordinate {
 	fill: currentcolor;
+	font-style: normal;
+	font-family: sans-serif;
+	text-anchor: middle;
+	dominant-baseline: central;
+	letter-spacing: 0px;
 }
 
 .kokopu-annotation {

package/dist/lib/css/error_box.css

@@ -36,6 +36,17 @@
 	font-style: italic;
 }
 
-.kokopu-errorMessage {
+.kokopu-errorMessage,
+.kokopu-errorExcerpt {
 	margin-top: 0.4em;
 }
+
+.kokopu-errorExcerpt {
+	white-space: pre-wrap;
+	font-family: monospace;
+	line-height: 1.5em;
+	color: #400;
+	background-color: #ffd;
+	border: solid 1px #aa0;
+	padding: 0.75em 1em 0.15em;
+}

package/dist/lib/css/{label.css → fonts.css}

@@ -20,10 +20,15 @@
  ******************************************************************************/
 
 
-.kokopu-label {
+@font-face {
+	font-family: 'Chess Alpha';
+	src:
+		url('../fonts/chessalpha.woff2') format('woff2'),
+		url('../fonts/chessalpha.woff') format('woff');
+	font-weight: normal;
 	font-style: normal;
-	font-family: sans-serif;
-	text-anchor: middle;
-	dominant-baseline: central;
-	letter-spacing: 0px;
+}
+
+.kokopu-font-alpha {
+	font-family: 'Chess Alpha', sans-serif;
 }

package/dist/lib/css/movetext.css

@@ -0,0 +1,117 @@
+/******************************************************************************
+ *                                                                            *
+ *    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/>.                                         *
+ *                                                                            *
+ ******************************************************************************/
+
+
+.kokopu-colorTag {
+	width : 1.2em;
+	height: 1.2em;
+	vertical-align: middle;
+	display: inline-block;
+	border: 1px solid black;
+	margin-right: 0.25em;
+}
+
+.kokopu-headerGroup-whitePlayer .kokopu-colorTag {
+	background-color: white;
+} 
+
+.kokopu-headerGroup-blackPlayer .kokopu-colorTag {
+	background-color: black;
+}
+
+.kokopu-headerGroup-titleRating:before,
+.kokopu-header-round:before {
+	content: "\a0("; /* \a0 == &nbsp; */
+}
+
+.kokopu-headerGroup-titleRating:after,
+.kokopu-header-round:after {
+	content: ")";
+}
+
+.kokopu-header-round,
+.kokopu-header-annotator {
+	font-style: italic;
+}
+
+* + .kokopu-move:before,
+* + .kokopu-gameResult:before,
+* + span.kokopu-comment:before {
+	content: " ";
+}
+
+span.kokopu-variation:before {
+	content: " (";
+}
+
+span.kokopu-variation:after {
+	content: ")";
+}
+
+* + .kokopu-nag:before {
+	content: "\a0"; /* \a0 == &nbsp; */
+}
+
+div.kokopu-subVariation {
+	margin-left: 1.5em;
+}
+
+.kokopu-move,
+.kokopu-gameResult {
+	font-weight: bold;
+}
+
+.kokopu-subVariation .kokopu-move {
+	font-weight: inherit;
+}
+
+.kokopu-diagram {
+	text-align: center;
+	line-height: 0px;
+}
+
+.kokopu-moveContent {
+	display: inline-block;
+	padding-left: 1px;
+	padding-right: 1px;
+}
+
+.kokopu-selectedMove .kokopu-moveContent {
+	background-color: currentcolor;
+}
+
+.kokopu-selectedMove .kokopu-moveContent > * {
+	filter: invert(1);
+}
+
+.kokopu-clickableMove .kokopu-moveContent:hover {
+	text-decoration: underline;
+	cursor: pointer;
+}
+
+.kokopu-focusFieldContainer {
+	position: fixed;
+	bottom: 0px;
+	right: 0px;
+	width: 0px;
+	height: 0px;
+	overflow: hidden;
+}

package/dist/lib/css/symbol.css

@@ -23,3 +23,11 @@
 .kokopu-symbolCircle {
 	fill: transparent;
 }
+
+.kokopu-symbolText {
+	font-style: normal;
+	font-family: sans-serif;
+	text-anchor: middle;
+	dominant-baseline: central;
+	letter-spacing: 0px;
+}

package/dist/lib/i18n.js

@@ -26,10 +26,25 @@ exports["default"] = void 0;
  *                                                                            *
  ******************************************************************************/
 var i18n = {
+  // Error box
+  LINE: 'line {0}',
+  // Chessboard
   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.'
+  INVALID_MOVE_ATTRIBUTE_ERROR_MESSAGE: 'Invalid "move" attribute.',
+  // Movetext
+  PIECE_SYMBOLS: {
+    'K': 'K',
+    'Q': 'Q',
+    'R': 'R',
+    'B': 'B',
+    'N': 'N',
+    'P': 'P'
+  },
+  ANNOTATED_BY: 'Annotated by {0}',
+  INVALID_PGN_ERROR_TITLE: 'Invalid PGN string.',
+  INVALID_GAME_ATTRIBUTE_ERROR_MESSAGE: 'Invalid "game" attribute.'
 };
 var _default = i18n;
 exports["default"] = _default;

package/dist/lib/impl/HtmlSanitizer.js

@@ -0,0 +1,171 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var htmlparser2 = _interopRequireWildcard(require("htmlparser2"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+/**
+ * HTML sanitizer: parse HTML string, keeping only the allowed HTML nodes, and the corresponding React object.
+ */
+var HtmlSanitizer = /*#__PURE__*/function () {
+  function HtmlSanitizer(_ref) {
+    var allowedTags = _ref.allowedTags,
+        allowedAttributes = _ref.allowedAttributes;
+
+    _classCallCheck(this, HtmlSanitizer);
+
+    this._allowedTags = allowedTags ? new Set(allowedTags) : new Set();
+    this._allowedAttributes = allowedAttributes ? new Map(Object.entries(allowedAttributes).map(function (_ref2) {
+      var _ref3 = _slicedToArray(_ref2, 2),
+          k = _ref3[0],
+          v = _ref3[1];
+
+      return [k, new Set(v)];
+    })) : new Map();
+    this._keyCounter = 0;
+  }
+  /**
+   * @param {string} text HTML string to be parsed.
+   * @returns {*} React object corresponding to the given HTML string. Can also be a fragment, or just a simple string if the given HTML string
+   *          does not contain any HTML tag.
+   */
+
+
+  _createClass(HtmlSanitizer, [{
+    key: "parse",
+    value: function parse(text) {
+      var _this = this;
+
+      var dom = htmlparser2.parseDocument(text); // Ensure that the returned object is a non-empty node type.
+
+      if (dom.type !== 'root') {
+        return undefined;
+      } // Process the children of the root node.
+
+
+      var result = [];
+      dom.children.forEach(function (child) {
+        var childElement = _this._processNode(child);
+
+        if (childElement) {
+          result.push(childElement);
+        }
+      }); // Return the result.
+
+      if (result.length === 0) {
+        return undefined;
+      } else if (result.length === 1) {
+        return result[0];
+      } else {
+        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
+          key: this._allocateKey()
+        }, result);
+      }
+    }
+  }, {
+    key: "_processNode",
+    value: function _processNode(node) {
+      var _this2 = this;
+
+      if (node.type === 'text') {
+        return node.data;
+      } else if (node.type === 'tag') {
+        var children = node.children.map(function (child) {
+          return _this2._processNode(child);
+        });
+
+        if (this._allowedTags.has(node.name)) {
+          var attributes = this._filterAttributes(node.name, node.attribs);
+
+          attributes['key'] = this._allocateKey();
+          return /*#__PURE__*/_react["default"].createElement(node.name, attributes, children);
+        } else {
+          return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
+            key: this._allocateKey()
+          }, children);
+        }
+      } else {
+        return undefined;
+      }
+    }
+  }, {
+    key: "_filterAttributes",
+    value: function _filterAttributes(nodeName, attributes) {
+      var result = {};
+
+      for (var _i2 = 0, _Object$entries = Object.entries(attributes); _i2 < _Object$entries.length; _i2++) {
+        var _Object$entries$_i = _slicedToArray(_Object$entries[_i2], 2),
+            attribute = _Object$entries$_i[0],
+            value = _Object$entries$_i[1];
+
+        if (this._isAttributeAllowed(nodeName, attribute)) {
+          result[attribute === 'class' ? 'className' : attribute] = value;
+        }
+      }
+
+      return result;
+    }
+  }, {
+    key: "_isAttributeAllowed",
+    value: function _isAttributeAllowed(nodeName, attribute) {
+      if (attribute === 'key' && attribute === 'ref' && attribute === 'className') {
+        // Those attributes are always forbidden.
+        return false;
+      }
+
+      var allowedAttributesForCurrent = this._allowedAttributes.get(nodeName);
+
+      if (allowedAttributesForCurrent && allowedAttributesForCurrent.has(attribute)) {
+        return true;
+      }
+
+      var allowedAttributesForAll = this._allowedAttributes.get('*');
+
+      if (allowedAttributesForAll && allowedAttributesForAll.has(attribute)) {
+        return true;
+      }
+
+      return false;
+    }
+  }, {
+    key: "_allocateKey",
+    value: function _allocateKey() {
+      return 'auto-' + this._keyCounter++;
+    }
+  }]);
+
+  return HtmlSanitizer;
+}();
+
+exports["default"] = HtmlSanitizer;

package/dist/lib/impl/TextSymbol.js

@@ -9,8 +9,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireDefault(require("react"));
 
-require("../css/label.css");
-
 require("../css/symbol.css");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -63,7 +61,7 @@ function TextSymbol(props) {
   } else {
     var symbol = props.symbol === 'plus' ? '+' : props.symbol === 'times' ? "\xD7" : props.symbol;
     return /*#__PURE__*/_react["default"].createElement("text", {
-      className: "kokopu-label",
+      className: "kokopu-symbolText",
       x: props.x,
       y: props.y,
       fill: props.color,

package/dist/lib/index.js

@@ -21,6 +21,12 @@ Object.defineProperty(exports, "ErrorBox", {
     return _ErrorBox["default"];
   }
 });
+Object.defineProperty(exports, "Movetext", {
+  enumerable: true,
+  get: function get() {
+    return _Movetext["default"];
+  }
+});
 Object.defineProperty(exports, "SquareMarkerIcon", {
   enumerable: true,
   get: function get() {
@@ -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/doc_src/demo/{PageChessboardEdition.js → PageChessboardInteraction.js}

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

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(', ');
+	}
+}