kokopu-react 1.6.0 → 1.7.2

package/.nycrc.yml

@@ -9,5 +9,5 @@ check-coverage: true
 
 exclude:
   - build/**
-  - graphic_test_app/**
+  - graphic_test_src/**
   - test/**

package/CHANGELOG.md

@@ -1,6 +1,19 @@
 ChangeLog
 =========
 
+1.7.1 (June 23, 2022)
+---------------------
+* `React` and `kokopu` declared as peer dependencies.
+* Minor fixes.
+
+1.7.0 (June 22, 2022)
+---------------------
+* Upgrade React to React 18.
+* Add support for color blue for markers.
+* Allow customization of the move arrow color in the `Chessboard` component.
+* Change the property names used to define the marker colors in the objects returned by `Chessboard.colorsets()`:
+`g`, `r`, `y` and `highlight` have become respectively `cg`, `cr`, `cy` and `cb`.
+
 1.6.0 (June 1, 2022)
 --------------------
 * Allow block-formatting HTML tags in PGN comments.

package/README.md

@@ -27,10 +27,10 @@ Example
 
 ```javascript
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { Chessboard } from 'kokopu-react';
 
-ReactDOM.render(<Chessboard />, document.body);
+createRoot(document.body).render(<Chessboard />);
 ```
 
 ![Chessboard component](test/references/02_chessboard_simple/0.png)

package/dist/lib/Chessboard.js

@@ -188,7 +188,7 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
         viewBox: viewBox,
         width: xmax - xmin,
         height: ymax - ymin
-      }, /*#__PURE__*/_react["default"].createElement("defs", null, this.renderArrowTip(colorset, 'g'), this.renderArrowTip(colorset, 'r'), this.renderArrowTip(colorset, 'y'), this.renderArrowTip(colorset, 'highlight')), squares, rankCoordinates, fileCoordinates, this.renderBoardContent(position, positionBefore, move, squareSize, colorset, pieceset));
+      }, /*#__PURE__*/_react["default"].createElement("defs", null, this.renderArrowTip(colorset, 'b'), this.renderArrowTip(colorset, 'g'), this.renderArrowTip(colorset, 'r'), this.renderArrowTip(colorset, 'y')), squares, rankCoordinates, fileCoordinates, this.renderBoardContent(position, positionBefore, move, squareSize, colorset, pieceset));
     }
   }, {
     key: "renderBoardContent",
@@ -286,13 +286,14 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
 
       var thickness = Math.max(2, Math.round(HOVER_MARKER_THICKNESS_FACTOR * squareSize));
       var size = squareSize - thickness;
+      var color = this.isEditArrowModeEnabled() ? this.props.editedArrowColor : this.props.moveArrowColor;
       return /*#__PURE__*/_react["default"].createElement("rect", {
         className: "kokopu-hoveredSquare",
         x: x + thickness / 2,
         y: y + thickness / 2,
         width: size,
         height: size,
-        stroke: colorset.highlight,
+        stroke: colorset['c' + color],
         strokeWidth: thickness
       });
     }
@@ -407,7 +408,7 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
         y1: yFrom,
         x2: xTo,
         y2: yTo,
-        stroke: colorset[this.props.editedArrowColor],
+        stroke: colorset['c' + this.props.editedArrowColor],
         strokeWidth: strokeWidth,
         markerEnd: "url(#".concat(arrowTipId, ")")
       });
@@ -543,7 +544,7 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
           y: y,
           width: squareSize,
           height: squareSize,
-          fill: colorset[color]
+          fill: colorset['c' + color]
         }));
       });
       return result;
@@ -573,7 +574,7 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
           y: y,
           size: squareSize,
           symbol: value.symbol,
-          color: colorset[value.color]
+          color: colorset['c' + value.color]
         })));
       });
       return result;
@@ -621,7 +622,7 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
           y1: yFrom,
           x2: xTo,
           y2: yTo,
-          stroke: colorset[color],
+          stroke: colorset['c' + color],
           strokeWidth: strokeWidth,
           markerEnd: "url(#".concat(arrowTipId, ")")
         }));
@@ -652,15 +653,16 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
       yTo += Math.sign(yFrom - yTo) * ARROW_TIP_OFFSET_FACTOR * squareSize;
       var x = xTo * alpha + xFrom * (1 - alpha);
       var y = yTo * alpha + yFrom * (1 - alpha);
+      var color = this.props.moveArrowColor;
       return /*#__PURE__*/_react["default"].createElement("line", {
         className: "kokopu-annotation kokopu-arrow",
         x1: xFrom,
         y1: yFrom,
         x2: x,
         y2: y,
-        stroke: colorset['highlight'],
+        stroke: colorset['c' + color],
         strokeWidth: squareSize * STROKE_THICKNESS_FACTOR,
-        markerEnd: "url(#".concat(this.getArrowTipId('highlight'), ")")
+        markerEnd: "url(#".concat(this.getArrowTipId(color), ")")
       });
     }
   }, {
@@ -668,7 +670,7 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
     value: function renderArrowTip(colorset, color) {
       return /*#__PURE__*/_react["default"].createElement(_ArrowTip["default"], {
         id: this.getArrowTipId(color),
-        color: colorset[color]
+        color: colorset['c' + color]
       });
     }
   }, {
@@ -1114,7 +1116,7 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
     /**
      * Available colorsets for theming.
      *
-     * @returns {Object.<string, {w: string, b: string, g: string, r: string, y: string, highlight: string}>}
+     * @returns {Object.<string, { w: string, b: string, cb: string, cg: string, cr: string, cy: string }>}
      * @public
      */
 
@@ -1126,8 +1128,8 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
     /**
      * Available piecesets for theming.
      *
-     * @returns {Object.<string, {bb: string, bk: string, bn: string, bp: string, bq: string, br: string, bx: string,
-     *                            wb: string, wk: string, wn: string, wp: string, wq: string, wr: string, wx: string}>}
+     * @returns {Object.<string, { bb: string, bk: string, bn: string, bp: string, bq: string, br: string, bx: string,
+     *                             wb: string, wk: string, wn: string, wp: string, wq: string, wr: string, wx: string }>}
      * @public
      */
 
@@ -1144,18 +1146,18 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
 exports["default"] = Chessboard;
 Chessboard.propTypes = {
   /**
-   * Displayed position. Can be a [kokopu.Position](https://kokopu.yo35.org/docs/Position.html) object,
+   * Displayed position. Can be a [kokopu.Position](https://kokopu.yo35.org/docs/current/Position.html) object,
    * a [FEN string](https://en.wikipedia.org/wiki/Forsyth%E2%80%93Edwards_Notation),
    * `'start'` (usual starting position), or `'empty'` (empty board).
    *
    * Optionally, the FEN string can be prefixed with `'variant:'`, `variant` corresponding to one of the
-   * [game variant](https://kokopu.yo35.org/docs/global.html#GameVariant) supported by Kokopu. For instance:
+   * [game variant](https://kokopu.yo35.org/docs/current/global.html#GameVariant) supported by Kokopu. For instance:
    * `'chess960:nrkbqrbn/pppppppp/8/8/8/8/PPPPPPPP/NRKBQRBN w KQkq - 0 1'`.
    */
   position: _propTypes["default"].oneOfType([_propTypes["default"].instanceOf(_kokopu["default"].Position), _propTypes["default"].string]),
 
   /**
-   * Displayed move (optional), defined either as a [kokopu.MoveDescriptor](https://kokopu.yo35.org/docs/MoveDescriptor.html) object
+   * Displayed move (optional), defined either as a [kokopu.MoveDescriptor](https://kokopu.yo35.org/docs/current/MoveDescriptor.html) object
    * or as a [SAN string](https://en.wikipedia.org/wiki/Algebraic_notation_(chess)) (e.g. `'Nf3'`). In both cases, it must represent
    * a legal move in position defined in attribute `position`.
    */
@@ -1168,7 +1170,7 @@ Chessboard.propTypes = {
   /**
    * Square markers, defined as a "square -> color" struct (e.g. `{ e4: 'g', d5: 'r' }`) or as a comma-separated CSL string (e.g. `'Rd5,Ge4'`).
    */
-  squareMarkers: _propTypes["default"].oneOfType([_propTypes["default"].objectOf(_propTypes["default"].oneOf(['g', 'r', 'y'])), _propTypes["default"].string]),
+  squareMarkers: _propTypes["default"].oneOfType([_propTypes["default"].objectOf(_propTypes["default"].oneOf(['b', 'g', 'r', 'y'])), _propTypes["default"].string]),
 
   /**
    * Text markers, defined as a "square -> (symbol, color)" struct (e.g. `{ e4: { symbol: 'A', color: 'g' }, d5: { symbol: 'z', color: 'r' }}`)
@@ -1176,14 +1178,14 @@ Chessboard.propTypes = {
    */
   textMarkers: _propTypes["default"].oneOfType([_propTypes["default"].objectOf(_propTypes["default"].shape({
     symbol: _propTypes["default"].string.isRequired,
-    color: _propTypes["default"].oneOf(['g', 'r', 'y']).isRequired
+    color: _propTypes["default"].oneOf(['b', 'g', 'r', 'y']).isRequired
   })), _propTypes["default"].string]),
 
   /**
    * Arrow markers, defined as a "squareFromSquareTo -> color" struct (e.g. `{ e2e4: 'g', g8f6: 'r', g8h6: 'y' }`)
    * or as a comma-separated CAL string (e.g. `'Ge2e4,Rg8f6,Yg8h6'`).
    */
-  arrowMarkers: _propTypes["default"].oneOfType([_propTypes["default"].objectOf(_propTypes["default"].oneOf(['g', 'r', 'y'])), _propTypes["default"].string]),
+  arrowMarkers: _propTypes["default"].oneOfType([_propTypes["default"].objectOf(_propTypes["default"].oneOf(['b', 'g', 'r', 'y'])), _propTypes["default"].string]),
 
   /**
    * Whether the board is flipped (i.e. seen from Black's point of view) or not.
@@ -1205,6 +1207,11 @@ Chessboard.propTypes = {
    */
   moveArrowVisible: _propTypes["default"].bool,
 
+  /**
+   * Color of the move arrow.
+   */
+  moveArrowColor: _propTypes["default"].oneOf(['b', 'g', 'r', 'y']),
+
   /**
    * Whether moves are animated or not.
    */
@@ -1252,7 +1259,7 @@ Chessboard.propTypes = {
   /**
    * Color of the edited arrow (only used if `interactionMode` is set to `'editArrows'`).
    */
-  editedArrowColor: _propTypes["default"].oneOf(['g', 'r', 'y']),
+  editedArrowColor: _propTypes["default"].oneOf(['b', 'g', 'r', 'y']),
 
   /**
    * Callback invoked when a piece is moved through drag&drop (only if `interactionMode` is set to `'movePieces'`).
@@ -1290,6 +1297,7 @@ Chessboard.defaultProps = {
   squareSize: 40,
   coordinateVisible: true,
   moveArrowVisible: true,
+  moveArrowColor: 'b',
   animated: false,
   colorset: 'original',
   pieceset: 'cburnett'

package/dist/lib/Movetext.js

@@ -706,14 +706,14 @@ var Movetext = /*#__PURE__*/function (_React$Component) {
 exports["default"] = Movetext;
 Movetext.propTypes = {
   /**
-   * Displayed position. Can be a [kokopu.Game](https://kokopu.yo35.org/docs/Game.html) object,
-   * a [kokopu.Database](https://kokopu.yo35.org/docs/Database.html) object,
+   * Displayed position. Can be a [kokopu.Game](https://kokopu.yo35.org/docs/current/Game.html) object,
+   * a [kokopu.Database](https://kokopu.yo35.org/docs/current/Database.html) object,
    * or a [PGN string](https://en.wikipedia.org/wiki/Portable_Game_Notation).
    */
   game: _propTypes["default"].oneOfType([_propTypes["default"].instanceOf(_kokopu["default"].Game), _propTypes["default"].instanceOf(_kokopu["default"].Database), _propTypes["default"].string]),
 
   /**
-   * Index of the game to display (only if attribute `game` is a [kokopu.Database](https://kokopu.yo35.org/docs/Database.html)
+   * Index of the game to display (only if attribute `game` is a [kokopu.Database](https://kokopu.yo35.org/docs/current/Database.html)
    * or a [PGN string](https://en.wikipedia.org/wiki/Portable_Game_Notation)): `0` for the first game of the database/PGN, `1` for the second one, etc.
    * If omitted, the first game of the database/PGN is displayed.
    */
@@ -759,7 +759,7 @@ Movetext.propTypes = {
 
   /**
    * ID of the selected move (or `'start'` for the beginning of the main variation).
-   * Use [kokopu.Node#id](https://kokopu.yo35.org/docs/Node.html#id) to get the ID of a game move.
+   * Use [kokopu.Node#id](https://kokopu.yo35.org/docs/current/Node.html#id) to get the ID of a game move.
    */
   selection: _propTypes["default"].string,
 
@@ -773,7 +773,7 @@ Movetext.propTypes = {
   /**
    * Callback invoked when the user selects a move (only if `interactionMode` is set to `'selectMove'`).
    *
-   * @param {string?} nodeId ID of the selected move (as returned by [kokopu.Node#id](https://kokopu.yo35.org/docs/Node.html#id)),
+   * @param {string?} nodeId ID of the selected move (as returned by [kokopu.Node#id](https://kokopu.yo35.org/docs/current/Node.html#id)),
    *                         `'start'` for the beginning of the main variation, or `undefined` if the user unselects the previously selected move.
    * @param {string} evtOrigin Origin of the event. Can be:
    *                        - `'key-first'`: the event has been triggered by the "go-to-first-move" key (aka. the home key),

package/dist/lib/impl/colorsets.js

@@ -29,42 +29,42 @@ var _default = {
   original: {
     b: '#b5876b',
     w: '#f0dec7',
-    g: '#0e0',
-    r: '#d00',
-    y: '#db0',
-    highlight: '#04f'
+    cb: '#04f',
+    cg: '#0e0',
+    cr: '#d00',
+    cy: '#db0'
   },
   gray: {
     b: '#bbbbbb',
     w: '#f8f8f8',
-    g: '#0a0',
-    r: '#d00',
-    y: '#a90',
-    highlight: '#04f'
+    cb: '#04f',
+    cg: '#0a0',
+    cr: '#d00',
+    cy: '#a90'
   },
   scid: {
     b: '#7389b6',
     w: '#f3f3f3',
-    g: '#0e0',
-    r: '#d00',
-    y: '#db0',
-    highlight: '#04f'
+    cb: '#04f',
+    cg: '#0e0',
+    cr: '#d00',
+    cy: '#db0'
   },
   wikipedia: {
     b: '#d18b47',
     w: '#ffce9e',
-    g: '#0e0',
-    r: '#d00',
-    y: '#db0',
-    highlight: '#04f'
+    cb: '#04f',
+    cg: '#0e0',
+    cr: '#d00',
+    cy: '#db0'
   },
   xboard: {
     b: '#77a26d',
     w: '#c8c365',
-    g: '#0f0',
-    r: '#d00',
-    y: '#ff0',
-    highlight: '#04f'
+    cb: '#04f',
+    cg: '#0f0',
+    cr: '#d00',
+    cy: '#ff0'
   },
 
   /*
@@ -74,50 +74,50 @@ var _default = {
   coral: {
     b: 'rgb(112,162,163)',
     w: 'rgb(177,228,185)',
-    g: '#080',
-    r: '#d00',
-    y: '#ff0',
-    highlight: '#04f'
+    cb: '#04f',
+    cg: '#080',
+    cr: '#d00',
+    cy: '#ff0'
   },
   dusk: {
     b: 'rgb(112,102,119)',
     w: 'rgb(204,183,174)',
-    g: '#3f3',
-    r: '#f20',
-    y: '#ff0',
-    highlight: '#04f'
+    cb: '#04f',
+    cg: '#3f3',
+    cr: '#f20',
+    cy: '#ff0'
   },
   emerald: {
     b: 'rgb(111,143,114)',
     w: 'rgb(173,189,143)',
-    g: '#6f6',
-    r: '#d00',
-    y: '#ff0',
-    highlight: '#04f'
+    cb: '#04f',
+    cg: '#6f6',
+    cr: '#d00',
+    cy: '#ff0'
   },
   marine: {
     b: 'rgb(111,115,210)',
     w: 'rgb(157,172,255)',
-    g: '#6f6',
-    r: '#f50',
-    y: '#ff0',
-    highlight: '#04f'
+    cb: '#04f',
+    cg: '#6f6',
+    cr: '#f50',
+    cy: '#ff0'
   },
   sandcastle: {
     b: 'rgb(184,139,74)',
     w: 'rgb(227,193,111)',
-    g: '#0c3',
-    r: '#d02',
-    y: '#ff0',
-    highlight: '#04f'
+    cb: '#04f',
+    cg: '#0c3',
+    cr: '#d02',
+    cy: '#ff0'
   },
   wheat: {
     b: 'rgb(187,190,100)',
     w: 'rgb(234,240,206)',
-    g: '#0c3',
-    r: '#d00',
-    y: '#ff3',
-    highlight: '#04f'
+    cb: '#04f',
+    cg: '#0c3',
+    cr: '#d00',
+    cy: '#ff3'
   }
 };
 exports["default"] = _default;

package/dist/lib/impl/util.js

@@ -61,7 +61,7 @@ function isValidVector(vect) {
 }
 
 function isValidColor(color) {
-  return color === 'g' || color === 'r' || color === 'y';
+  return color === 'b' || color === 'g' || color === 'r' || color === 'y';
 }
 
 function isValidSymbol(symbol) {

package/dist/lib/markers.js

@@ -75,8 +75,8 @@ function flattenTextMarkers(markers) {
 /**
  * Transform a set of arrow markers defined as a "squareFromSquareTo -> color" struct into a comma-separated string.
  *
- * @param {object} markers For example: `{ e2e4: 'g', g8f6: 'r', g8h6: 'y' }`
- * @returns {string} For example: `'Ge2e4,Rg8f6,Yg8h6'`
+ * @param {object} markers For example: `{ e2e4: 'g', g8f6: 'r', g8h6: 'b' }`
+ * @returns {string} For example: `'Ge2e4,Rg8f6,Bg8h6'`
  */
 
 
@@ -121,7 +121,7 @@ function parseMarkers(markers, tokenParser) {
 
 function parseSquareMarkers(markers) {
   return parseMarkers(markers, function (token) {
-    return /^([GRY])([a-h][1-8])$/.test(token) ? {
+    return /^([BGRY])([a-h][1-8])$/.test(token) ? {
       key: RegExp.$2,
       value: RegExp.$1.toLowerCase()
     } : undefined;
@@ -137,7 +137,7 @@ function parseSquareMarkers(markers) {
 
 function parseTextMarkers(markers) {
   return parseMarkers(markers, function (token) {
-    return /^([GRY])(?:([A-Za-z0-9])|\((plus|times|dot|circle)\))([a-h][1-8])$/.test(token) ? {
+    return /^([BGRY])(?:([A-Za-z0-9])|\((plus|times|dot|circle)\))([a-h][1-8])$/.test(token) ? {
       key: RegExp.$4,
       value: {
         symbol: RegExp.$2 || RegExp.$3,
@@ -149,14 +149,14 @@ function parseTextMarkers(markers) {
 /**
  * Parse a set of arrow markers defined as a comma-separated string into a "squareFromSquareTo -> color" struct.
  *
- * @param {string} markers For example: `'Ge2e4,Rg8f6,Yg8h6'`
- * @returns {object} For example: `{ e2e4: 'g', g8f6: 'r', g8h6: 'y' }`
+ * @param {string} markers For example: `'Ge2e4,Rg8f6,Bg8h6'`
+ * @returns {object} For example: `{ e2e4: 'g', g8f6: 'r', g8h6: 'b' }`
  */
 
 
 function parseArrowMarkers(markers) {
   return parseMarkers(markers, function (token) {
-    return /^([GRY])([a-h][1-8][a-h][1-8])$/.test(token) ? {
+    return /^([BGRY])([a-h][1-8][a-h][1-8])$/.test(token) ? {
       key: RegExp.$2,
       value: RegExp.$1.toLowerCase()
     } : undefined;

package/doc_src/demo/PageChessboardInteraction.js

@@ -165,9 +165,10 @@ export default class Page extends React.Component {
 		let colorset = Chessboard.colorsets()['original'];
 		return (
 			<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>
+				<ToggleButton className="kokopu-fixTextTransform" value="b">{this.renderColorButtonLabel(colorset.cb)}</ToggleButton>
+				<ToggleButton className="kokopu-fixTextTransform" value="g">{this.renderColorButtonLabel(colorset.cg)}</ToggleButton>
+				<ToggleButton className="kokopu-fixTextTransform" value="r">{this.renderColorButtonLabel(colorset.cr)}</ToggleButton>
+				<ToggleButton className="kokopu-fixTextTransform" value="y">{this.renderColorButtonLabel(colorset.cy)}</ToggleButton>
 			</ToggleButtonGroup>
 		);
 	}

package/doc_src/demo/PageChessboardMove.js

@@ -23,7 +23,7 @@
 import React from 'react';
 import kokopu from 'kokopu';
 
-import { Chessboard } from '../../src/index';
+import { Chessboard, ArrowMarkerIcon } from '../../src/index';
 import { buildComponentDemoCode } from './util';
 
 import Box from '@mui/material/Box';
@@ -33,9 +33,13 @@ 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 ToggleButton from '@mui/material/ToggleButton';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 
 import './demo.css';
 
+const COLOR_ICON_SIZE = 16;
+
 
 export default class Page extends React.Component {
 
@@ -49,6 +53,7 @@ export default class Page extends React.Component {
 			positionAfter: positionAfter, // non-null only if a valid move has been played
 			flipped: false,
 			moveArrowVisible: true,
+			moveArrowColor: 'b',
 			animated: true,
 			editedMove: 'Nf6',
 			playedMove: 'e4',
@@ -71,12 +76,13 @@ export default class Page extends React.Component {
 				<FormControlLabel label="Flip"
 					control={<Switch checked={this.state.flipped} onChange={() => this.set('flipped', !this.state.flipped)} color="primary" />}
 				/>
-				<FormControlLabel label="Show move arrow" disabled={!this.state.positionAfter}
-					control={<Switch checked={this.state.moveArrowVisible} onChange={() => this.set('moveArrowVisible', !this.state.moveArrowVisible)} color="primary" />}
-				/>
 				<FormControlLabel label="Animation" disabled={!this.state.positionAfter}
 					control={<Switch checked={this.state.animated} onChange={() => this.set('animated', !this.state.animated)} color="primary" />}
 				/>
+				<FormControlLabel label="Show move arrow" disabled={!this.state.positionAfter}
+					control={<Switch checked={this.state.moveArrowVisible} onChange={() => this.set('moveArrowVisible', !this.state.moveArrowVisible)} color="primary" />}
+				/>
+				{this.renderColorSelector()}
 			</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)} />
@@ -89,6 +95,21 @@ export default class Page extends React.Component {
 		</>);
 	}
 
+	renderColorSelector() {
+		if (!this.state.moveArrowVisible) {
+			return undefined;
+		}
+		let colorset = Chessboard.colorsets()['original'];
+		return (
+			<ToggleButtonGroup value={this.state.moveArrowColor} exclusive size="small" disabled={!this.state.positionAfter} onChange={(_, newColor) => this.setMoveColor(newColor)}>
+				<ToggleButton className="kokopu-fixOpacity" value="b"><ArrowMarkerIcon size={COLOR_ICON_SIZE} color={colorset.cb} /></ToggleButton>
+				<ToggleButton className="kokopu-fixOpacity" value="g"><ArrowMarkerIcon size={COLOR_ICON_SIZE} color={colorset.cg} /></ToggleButton>
+				<ToggleButton className="kokopu-fixOpacity" value="r"><ArrowMarkerIcon size={COLOR_ICON_SIZE} color={colorset.cr} /></ToggleButton>
+				<ToggleButton className="kokopu-fixOpacity" value="y"><ArrowMarkerIcon size={COLOR_ICON_SIZE} color={colorset.cy} /></ToggleButton>
+			</ToggleButtonGroup>
+		);
+	}
+
 	renderChessboard() {
 		return (
 			<Box>
@@ -97,6 +118,7 @@ export default class Page extends React.Component {
 					move={this.state.playedMove}
 					flipped={this.state.flipped}
 					moveArrowVisible={this.state.moveArrowVisible}
+					moveArrowColor={this.state.moveArrowColor}
 					animated={this.state.animated}
 				/>
 			</Box>
@@ -112,8 +134,11 @@ export default class Page extends React.Component {
 		if (this.state.flipped) {
 			attributes.push('flipped');
 		}
-		attributes.push(`moveArrowVisible={${this.state.moveArrowVisible}}`);
 		attributes.push(`animated={${this.state.animated}}`);
+		attributes.push(`moveArrowVisible={${this.state.moveArrowVisible}}`);
+		if (this.state.moveArrowVisible) {
+			attributes.push(`moveArrowColor={${this.state.moveArrowColor}}`);
+		}
 		return <pre className="kokopu-demoCode">{buildComponentDemoCode('Chessboard', attributes)}</pre>;
 	}
 
@@ -123,6 +148,12 @@ export default class Page extends React.Component {
 		this.setState(newState);
 	}
 
+	setMoveColor(newValue) {
+		if (newValue !== null) {
+			this.set('moveArrowColor', newValue);
+		}
+	}
+
 	setPosition(newPosition) {
 		let newState = {};
 		newState.position = newPosition;

package/doc_src/demo/demo.css

@@ -33,6 +33,10 @@
 	text-transform: none;
 }
 
+.MuiToggleButton-root.Mui-disabled.kokopu-fixOpacity .kokopu-arrowMarkerIcon {
+	opacity: 0.3;
+}
+
 .kokopu-fixedPopup {
 	position: fixed;
 	bottom: 20px;

package/{graphic_test_app → graphic_test_src}/04_chessboard_annotations.js

@@ -24,17 +24,17 @@ import React from 'react';
 import testApp from './common/test_app';
 import { Chessboard } from '../src/index';
 
-let squareMarkers1 = 'Ga1,Ga2,Rb1,Rb2,Yc1,Yc2';
-let arrowMarkers1 = 'Gb8c6,Re8f6,Yf8g6';
-let textMarkers1 = 'GAf1,Gaf2,RZg1,Rzg2,Y2h1,Y8h2';
+let squareMarkers1 = 'Ba1,Ba2,Gb1,Gb2,Rc1,Rc2,Yd1,Yd2';
+let arrowMarkers1 = 'Ba8b6,Gb8c6,Re8f6,Yf8g6';
+let textMarkers1 = 'B(circle)e1,B(plus)e2,GAf1,Gaf2,RZg1,Rzg2,Y2h1,Y8h2';
 
-let squareMarkers2 = { e4: 'g', g5: 'r', g1: 'y' };
-let arrowMarkers2 = { c3a2: 'y', c4a4: 'g', c5a6: 'r', c6a8: 'y', d6c8: 'g', e6e8: 'r', f6g8: 'y' };
-let textMarkers2 = { g3: { symbol: 'H', color: 'r' }, g5: { symbol: 'M', color: 'g' } };
+let squareMarkers2 = { e4: 'g', g5: 'r', g1: 'y', h4: 'b' };
+let arrowMarkers2 = { c3a2: 'b', c4a4: 'g', c5a6: 'r', c6a8: 'y', d6c8: 'b', e6e8: 'g', f6g8: 'r' };
+let textMarkers2 = { g3: { symbol: 'H', color: 'r' }, g5: { symbol: 'M', color: 'g' }, h4: { symbol: 'times', color: 'y' } };
 
-let squareMarkers3 = { b5: 'r', e4: 'g', h5: 'y' };
+let squareMarkers3 = { b5: 'r', e4: 'g', h5: 'y', e2: 'b' };
 let arrowMarkers3 = { d1h5: 'g', a5f4: 'r', c7c3: 'y', g7g7: 'g' };
-let textMarkers3 = 'G5c6,R(plus)a1,G(times)b1,R(dot)a2,Y(circle)b2';
+let textMarkers3 = 'G5c6,R(plus)a1,G(times)b1,B(dot)a2,Y(circle)b2';
 
 testApp([ /* eslint-disable react/jsx-key */
 	<Chessboard squareMarkers={squareMarkers1} arrowMarkers={arrowMarkers1} textMarkers={textMarkers1} flipped={false} coordinateVisible={true} />,

package/{graphic_test_app → graphic_test_src}/05_chessboard_move.js

@@ -33,9 +33,9 @@ testApp([ /* eslint-disable react/jsx-key */
 	<Chessboard move="Nf3" moveArrowVisible={false} animated={false} />,
 	<Chessboard move="Nf4" animated={false} />,
 	<Chessboard position="rnbqkbnr/pppp1ppp/4p3/8/3PP3/8/PPP2PPP/RNBQKBNR b KQkq - 0 2" move="Bb4+" moveArrowVisible={true} flipped={true} animated={false} />,
-	<Chessboard position={pos} move={move} animated={false} />,
-	<Chessboard position="r3k2r/pppppppp/8/8/8/8/PPPPPPPP/R3K2R b KQkq - 0 1" move="O-O-O" animated={false} />,
-	<Chessboard position="rnbqkbnr/ppp1p1pp/8/3pPp2/8/8/PPPP1PPP/RNBQKBNR w KQkq f6 0 3" move="exf6" animated={false} />,
-	<Chessboard position="8/8/8/1K6/8/4k3/1p6/8 b - - 0 1" move="b1=R+" animated={false} />,
+	<Chessboard position={pos} move={move} animated={false} moveArrowColor="g" />,
+	<Chessboard position="r3k2r/pppppppp/8/8/8/8/PPPPPPPP/R3K2R b KQkq - 0 1" move="O-O-O" animated={false} moveArrowColor="r" />,
+	<Chessboard position="rnbqkbnr/ppp1p1pp/8/3pPp2/8/8/PPPP1PPP/RNBQKBNR w KQkq f6 0 3" move="exf6" animated={false} moveArrowColor="y" />,
+	<Chessboard position="8/8/8/1K6/8/4k3/1p6/8 b - - 0 1" move="b1=R+" animated={false} moveArrowColor="b" />,
 	<Chessboard move={42} animated={false} />,
 ]); /* eslint-enable react/jsx-key */

package/{graphic_test_app → graphic_test_src}/06_chessboard_theme.js

@@ -30,8 +30,8 @@ let mv1 = 'Ba5';
 let pos2 = 'start';
 let mv2 = 'e4';
 
-let sm = 'Ga8,Ga7,Rb8,Rb7,Yc8,Yc7';
-let am = 'Gb1b3,Rc1c3,Yd1d3';
+let sm = 'Ba8,Ba7,Gb8,Gb7,Rc8,Rc7,Yd8,Yd7';
+let am = 'Ba1a3,Gb1b3,Rc1c3,Yd1d3';
 
 testApp([ /* eslint-disable react/jsx-key */
 	<Chessboard position={pos1} move={mv1} squareMarkers={sm} arrowMarkers={am} animated={false} />,