kokopu-react 1.6.0 → 1.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "kokopu-react",
-	"version": "1.6.0",
+	"version": "1.7.2",
 	"description": "A React-based library to create and display chessboard and chess-related components.",
 	"keywords": [
 		"chess",
@@ -18,61 +18,67 @@
 	"files": [
 		"dist/lib",
 		"doc_src",
-		"graphic_test_app",
+		"graphic_test_src",
 		"graphics",
-		"scripts/test_graphic",
-		"scripts/test_headless.webpack-config.js",
+		"scripts/clean-graphic-output.js",
+		"scripts/docker-compose.yml",
+		"scripts/test-graphic.webpack.config.js",
+		"scripts/test-headless.webpack.config.js",
 		"src",
 		"test",
 		".babelrc",
 		".eslint.yml",
 		".nycrc.yml"
 	],
+	"peerDependencies": {
+		"kokopu": "^2.6.0",
+		"react": "17.x.x || 18.x.x"
+	},
 	"dependencies": {
 		"htmlparser2": "^8.0.1",
-		"kokopu": "^2.8.0",
 		"prop-types": "^15.8.1",
-		"react": "^17.0.2",
 		"react-draggable": "^4.4.5",
 		"react-motion": "^0.5.2"
 	},
 	"devDependencies": {
-		"@babel/cli": "^7.17.10",
-		"@babel/core": "^7.18.2",
-		"@babel/preset-env": "^7.18.2",
-		"@babel/preset-react": "^7.17.12",
-		"@emotion/react": "^11.9.0",
-		"@emotion/styled": "^11.8.1",
-		"@mui/material": "^5.8.2",
+		"@babel/cli": "^7.18.10",
+		"@babel/core": "^7.18.10",
+		"@babel/preset-env": "^7.18.10",
+		"@babel/preset-react": "^7.18.6",
+		"@emotion/react": "^11.10.0",
+		"@emotion/styled": "^11.10.0",
+		"@mui/material": "^5.9.3",
 		"babel-loader": "^8.2.5",
 		"babel-plugin-istanbul": "^6.1.1",
 		"copy-webpack-plugin": "^11.0.0",
 		"coveralls": "^3.1.1",
 		"css-loader": "^6.7.1",
-		"eslint": "^8.16.0",
-		"eslint-plugin-react": "^7.30.0",
+		"eslint": "^8.21.0",
+		"eslint-plugin-react": "^7.30.1",
 		"html-webpack-plugin": "^5.5.0",
 		"img-diff-js": "^0.5.2",
+		"kokopu": "^2.9.2",
 		"mocha": "^10.0.0",
 		"null-loader": "^4.0.1",
 		"nyc": "^15.1.0",
-		"react-dom": "^17.0.2",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
 		"react-styleguidist": "^11.2.0",
-		"selenium-webdriver": "^4.1.2",
-		"ssh2-sftp-client": "^8.1.0",
+		"selenium-webdriver": "^4.3.1",
+		"ssh2-sftp-client": "^9.0.2",
 		"style-loader": "^3.3.1",
 		"unit.js": "^2.1.1",
-		"webpack": "^5.72.1",
-		"webpack-cli": "^4.9.2"
+		"webpack": "^5.74.0",
+		"webpack-cli": "^4.10.0"
 	},
 	"scripts": {
-		"lint": "eslint doc_src graphic_test_app src test",
-		"preunit": "webpack --config scripts/test_headless.webpack-config.js && webpack --config scripts/test_graphic/webpack-config.js && node scripts/test_graphic/clean-graphic-output.js",
+		"lint": "eslint doc_src graphic_test_src src test",
+		"preunit": "webpack --config scripts/test-headless.webpack.config.js && webpack --config scripts/test-graphic.webpack.config.js && node scripts/clean-graphic-output.js",
 		"unit": "nyc mocha --bail --sort",
 		"test": "npm run lint && npm run unit",
 		"publish_coverage": "nyc report --reporter=text-lcov | coveralls",
-		"start_test_env": "docker-compose -f scripts/test_graphic/docker-compose.yml up -d",
-		"stop_test_env": "docker-compose -f scripts/test_graphic/docker-compose.yml down",
+		"test_env:start": "docker-compose -p kokopu-react-test-env -f scripts/docker-compose.yml up -d",
+		"test_env:stop": "docker-compose -p kokopu-react-test-env -f scripts/docker-compose.yml down",
 		"build": "make -f scripts/build.mk",
 		"clean": "make -f scripts/build.mk clean",
 		"start": "styleguidist server --open --config scripts/styleguide.config.js",

package/scripts/{test_graphic/clean-graphic-output.js → clean-graphic-output.js}

@@ -22,7 +22,7 @@
 
 const fs = require('fs');
 
-const rootDir = __dirname + '/../..';
+const rootDir = __dirname + '/..';
 const outputDir = rootDir + '/build/graphic_output';
 
 // Erase the directory in which the screenshots are generated.

package/scripts/docker-compose.yml

@@ -0,0 +1,14 @@
+version: "3.7"
+
+services:
+  web-client:
+    image: selenium/standalone-firefox:4.3.0-20220726
+    shm_size: '2gb'
+    ports:
+      - 4444:4444 # http://localhost:4444 (driver)
+      - 7900:7900 # http://localhost:7900 (VNC, pass: secret)
+    volumes:
+      - type: bind
+        source: ..
+        target: /app
+        read_only: true

package/scripts/{test_graphic/webpack-config.js → test-graphic.webpack.config.js}

@@ -25,11 +25,11 @@ const path = require('path');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
-// List all the JS files in /test/graphic, each of them corresponding to a entry.
-var items = fs.readdirSync('./graphic_test_app').filter(filename => path.extname(filename) === '.js').map(filename => path.basename(filename, '.js')).sort();
+// List all the JS files in /graphic_test_src, each of them corresponding to a entry.
+var items = fs.readdirSync('./graphic_test_src').filter(filename => path.extname(filename) === '.js').map(filename => path.basename(filename, '.js')).sort();
 var entries = {};
 items.forEach(item => {
-	entries[item] = `./graphic_test_app/${item}.js`;
+	entries[item] = `./graphic_test_src/${item}`;
 });
 
 // Define the outputs.
@@ -40,16 +40,17 @@ var plugins = items.map(item => new HtmlWebpackPlugin({
 }));
 plugins.push(new CopyWebpackPlugin({
 	patterns: [
-		{ from: './graphic_test_app/common/heartbeat.txt', to: 'heartbeat.txt' },
-		{ from: './graphic_test_app/common/smiley.png', to: 'smiley.png' },
+		{ from: './graphic_test_src/common/heartbeat.txt', to: 'heartbeat.txt' },
+		{ from: './graphic_test_src/common/smiley.png', to: 'smiley.png' },
 	],
 }));
 
 module.exports = {
 	mode: 'development',
+	devtool: 'inline-source-map',
 	entry: entries,
 	output: {
-		path: path.resolve(__dirname, '../../build/test_graphic'),
+		path: path.resolve(__dirname, '../build/test_graphic'),
 		hashFunction: "xxhash64", // FIXME The default hash function used by Webpack has been removed from OpenSSL.
 	},
 	plugins: plugins,

package/scripts/{test_headless.webpack-config.js → test-headless.webpack.config.js}

@@ -24,8 +24,9 @@ const path = require('path');
 
 module.exports = {
 	mode: 'development',
+	devtool: 'inline-source-map',
 	entry: {
-		index: './src/index.js',
+		index: './src/index',
 	},
 	output: {
 		path: path.resolve(__dirname, '../build/test_headless'),

package/src/Chessboard.js

@@ -123,10 +123,10 @@ export default class Chessboard extends React.Component {
 		return (
 			<svg className="kokopu-chessboard" viewBox={viewBox} width={xmax - xmin} height={ymax - ymin}>
 				<defs>
+					{this.renderArrowTip(colorset, 'b')}
 					{this.renderArrowTip(colorset, 'g')}
 					{this.renderArrowTip(colorset, 'r')}
 					{this.renderArrowTip(colorset, 'y')}
-					{this.renderArrowTip(colorset, 'highlight')}
 				</defs>
 				{squares}
 				{rankCoordinates}
@@ -213,7 +213,8 @@ export default class Chessboard extends React.Component {
 		let { x, y } = this.getSquareCoordinates(squareSize, this.state.hoveredSquare);
 		let thickness = Math.max(2, Math.round(HOVER_MARKER_THICKNESS_FACTOR * squareSize));
 		let size = squareSize - thickness;
-		return <rect className="kokopu-hoveredSquare" x={x + thickness/2} y={y + thickness/2} width={size} height={size} stroke={colorset.highlight} strokeWidth={thickness} />;
+		let color = this.isEditArrowModeEnabled() ? this.props.editedArrowColor : this.props.moveArrowColor;
+		return <rect className="kokopu-hoveredSquare" x={x + thickness/2} y={y + thickness/2} width={size} height={size} stroke={colorset['c' + color]} strokeWidth={thickness} />;
 	}
 
 	renderPiece(position, squareSize,  pieceset, sq) {
@@ -272,7 +273,7 @@ export default class Chessboard extends React.Component {
 		return (
 			<line
 				className="kokopu-annotation kokopu-arrow kokopu-arrowDraggable kokopu-dragging" x1={xFrom} y1={yFrom} x2={xTo} y2={yTo}
-				stroke={colorset[this.props.editedArrowColor]} strokeWidth={strokeWidth} markerEnd={`url(#${arrowTipId})`}
+				stroke={colorset['c' + this.props.editedArrowColor]} strokeWidth={strokeWidth} markerEnd={`url(#${arrowTipId})`}
 			/>
 		);
 	}
@@ -335,7 +336,7 @@ export default class Chessboard extends React.Component {
 		let result = [];
 		Object.entries(sqm).forEach(([ sq, color ]) => {
 			let { x, y } = this.getSquareCoordinates(squareSize, sq);
-			result.push(<rect key={'sqm-' + sq} className="kokopu-annotation" x={x} y={y} width={squareSize} height={squareSize} fill={colorset[color]} />);
+			result.push(<rect key={'sqm-' + sq} className="kokopu-annotation" x={x} y={y} width={squareSize} height={squareSize} fill={colorset['c' + color]} />);
 		});
 		return result;
 	}
@@ -348,7 +349,7 @@ export default class Chessboard extends React.Component {
 			y += squareSize / 2;
 			result.push(
 				<g key={'txtm-' + sq} className="kokopu-annotation">
-					<TextSymbol x={x} y={y} size={squareSize} symbol={value.symbol} color={colorset[value.color]} />
+					<TextSymbol x={x} y={y} size={squareSize} symbol={value.symbol} color={colorset['c' + value.color]} />
 				</g>
 			);
 		});
@@ -376,7 +377,7 @@ export default class Chessboard extends React.Component {
 			result.push(
 				<line
 					key={'arm-' + vect} className="kokopu-annotation kokopu-arrow" x1={xFrom} y1={yFrom} x2={xTo} y2={yTo}
-					stroke={colorset[color]} strokeWidth={strokeWidth} markerEnd={`url(#${arrowTipId})`}
+					stroke={colorset['c' + color]} strokeWidth={strokeWidth} markerEnd={`url(#${arrowTipId})`}
 				/>
 			);
 		});
@@ -397,16 +398,17 @@ export default class Chessboard extends React.Component {
 		yTo += Math.sign(yFrom - yTo) * ARROW_TIP_OFFSET_FACTOR * squareSize;
 		let x = xTo * alpha + xFrom * (1 - alpha);
 		let y = yTo * alpha + yFrom * (1 - alpha);
+		let color = this.props.moveArrowColor;
 		return (
 			<line
-				className="kokopu-annotation kokopu-arrow" x1={xFrom} y1={yFrom} x2={x} y2={y} stroke={colorset['highlight']}
-				strokeWidth={squareSize * STROKE_THICKNESS_FACTOR} markerEnd={`url(#${this.getArrowTipId('highlight')})`}
+				className="kokopu-annotation kokopu-arrow" x1={xFrom} y1={yFrom} x2={x} y2={y} stroke={colorset['c' + color]}
+				strokeWidth={squareSize * STROKE_THICKNESS_FACTOR} markerEnd={`url(#${this.getArrowTipId(color)})`}
 			/>
 		);
 	}
 
 	renderArrowTip(colorset, color) {
-		return <ArrowTip id={this.getArrowTipId(color)} color={colorset[color]} />;
+		return <ArrowTip id={this.getArrowTipId(color)} color={colorset['c' + color]} />;
 	}
 
 	renderTurnFlag(turn, squareSize, pieceset) {
@@ -735,7 +737,7 @@ export default class Chessboard extends 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
 	 */
 	static colorsets() {
@@ -745,8 +747,8 @@ export default class Chessboard extends 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
 	 */
 	static piecesets() {
@@ -758,12 +760,12 @@ export default class Chessboard extends React.Component {
 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.oneOfType([
@@ -772,7 +774,7 @@ Chessboard.propTypes = {
 	]),
 
 	/**
-	 * 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`.
 	 */
@@ -789,7 +791,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.oneOfType([
-		PropTypes.objectOf(PropTypes.oneOf([ 'g', 'r', 'y' ])),
+		PropTypes.objectOf(PropTypes.oneOf([ 'b', 'g', 'r', 'y' ])),
 		PropTypes.string
 	]),
 
@@ -800,7 +802,7 @@ Chessboard.propTypes = {
 	textMarkers: PropTypes.oneOfType([
 		PropTypes.objectOf(PropTypes.shape({
 			symbol: PropTypes.string.isRequired,
-			color: PropTypes.oneOf([ 'g', 'r', 'y' ]).isRequired
+			color: PropTypes.oneOf([ 'b', 'g', 'r', 'y' ]).isRequired
 		})),
 		PropTypes.string
 	]),
@@ -810,7 +812,7 @@ Chessboard.propTypes = {
 	 * or as a comma-separated CAL string (e.g. `'Ge2e4,Rg8f6,Yg8h6'`).
 	 */
 	arrowMarkers: PropTypes.oneOfType([
-		PropTypes.objectOf(PropTypes.oneOf([ 'g', 'r', 'y' ])),
+		PropTypes.objectOf(PropTypes.oneOf([ 'b', 'g', 'r', 'y' ])),
 		PropTypes.string
 	]),
 
@@ -834,6 +836,11 @@ Chessboard.propTypes = {
 	 */
 	moveArrowVisible: PropTypes.bool,
 
+	/**
+	 * Color of the move arrow.
+	 */
+	moveArrowColor: PropTypes.oneOf([ 'b', 'g', 'r', 'y' ]),
+
 	/**
 	 * Whether moves are animated or not.
 	 */
@@ -881,7 +888,7 @@ Chessboard.propTypes = {
 	/**
 	 * Color of the edited arrow (only used if `interactionMode` is set to `'editArrows'`).
 	 */
-	editedArrowColor: PropTypes.oneOf([ 'g', 'r', 'y' ]),
+	editedArrowColor: PropTypes.oneOf([ 'b', 'g', 'r', 'y' ]),
 
 	/**
 	 * Callback invoked when a piece is moved through drag&drop (only if `interactionMode` is set to `'movePieces'`).
@@ -921,6 +928,7 @@ Chessboard.defaultProps = {
 	squareSize: 40,
 	coordinateVisible: true,
 	moveArrowVisible: true,
+	moveArrowColor: 'b',
 	animated: false,
 	colorset: 'original',
 	pieceset: 'cburnett',

package/src/Movetext.js

@@ -482,8 +482,8 @@ export default class Movetext extends React.Component {
 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.oneOfType([
@@ -493,7 +493,7 @@ Movetext.propTypes = {
 	]),
 
 	/**
-	 * 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.
 	 */
@@ -542,7 +542,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.string,
 
@@ -556,7 +556,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/src/impl/colorsets.js

@@ -25,42 +25,42 @@ export 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',
 	},
 
 	/*
@@ -70,50 +70,50 @@ export 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',
 	},
 
 };

package/src/impl/util.js

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

package/src/markers.js

@@ -56,8 +56,8 @@ export 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'`
  */
 export function flattenArrowMarkers(markers) {
 	return Object.entries(markers)
@@ -83,7 +83,7 @@ function parseMarkers(markers, tokenParser) {
  */
 export function parseSquareMarkers(markers) {
 	return parseMarkers(markers, token => {
-		return /^([GRY])([a-h][1-8])$/.test(token) ? { key: RegExp.$2, value: RegExp.$1.toLowerCase() } : undefined;
+		return /^([BGRY])([a-h][1-8])$/.test(token) ? { key: RegExp.$2, value: RegExp.$1.toLowerCase() } : undefined;
 	});
 }
 
@@ -96,7 +96,7 @@ export function parseSquareMarkers(markers) {
  */
 export function parseTextMarkers(markers) {
 	return parseMarkers(markers, 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, color: RegExp.$1.toLowerCase() } } : undefined;
 	});
 }
@@ -105,11 +105,11 @@ export 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' }`
  */
 export function parseArrowMarkers(markers) {
 	return parseMarkers(markers, token => {
-		return /^([GRY])([a-h][1-8][a-h][1-8])$/.test(token) ? { key: RegExp.$2, value: RegExp.$1.toLowerCase() } : undefined;
+		return /^([BGRY])([a-h][1-8][a-h][1-8])$/.test(token) ? { key: RegExp.$2, value: RegExp.$1.toLowerCase() } : undefined;
 	});
 }