kokopu-react 1.6.0 → 1.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "kokopu-react",
-	"version": "1.6.0",
+	"version": "1.7.0",
 	"description": "A React-based library to create and display chessboard and chess-related components.",
 	"keywords": [
 		"chess",
@@ -18,10 +18,12 @@
 	"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",
@@ -30,49 +32,49 @@
 	],
 	"dependencies": {
 		"htmlparser2": "^8.0.1",
-		"kokopu": "^2.8.0",
+		"kokopu": "^2.9.0",
 		"prop-types": "^15.8.1",
-		"react": "^17.0.2",
+		"react": "^18.2.0",
 		"react-draggable": "^4.4.5",
 		"react-motion": "^0.5.2"
 	},
 	"devDependencies": {
 		"@babel/cli": "^7.17.10",
-		"@babel/core": "^7.18.2",
+		"@babel/core": "^7.18.5",
 		"@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",
+		"@emotion/react": "^11.9.3",
+		"@emotion/styled": "^11.9.3",
+		"@mui/material": "^5.8.5",
 		"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": "^8.18.0",
 		"eslint-plugin-react": "^7.30.0",
 		"html-webpack-plugin": "^5.5.0",
 		"img-diff-js": "^0.5.2",
 		"mocha": "^10.0.0",
 		"null-loader": "^4.0.1",
 		"nyc": "^15.1.0",
-		"react-dom": "^17.0.2",
+		"react-dom": "^18.2.0",
 		"react-styleguidist": "^11.2.0",
 		"selenium-webdriver": "^4.1.2",
-		"ssh2-sftp-client": "^8.1.0",
+		"ssh2-sftp-client": "^9.0.1",
 		"style-loader": "^3.3.1",
 		"unit.js": "^2.1.1",
-		"webpack": "^5.72.1",
-		"webpack-cli": "^4.9.2"
+		"webpack": "^5.73.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/{test_graphic/docker-compose.yml → docker-compose.yml}

@@ -5,10 +5,10 @@ services:
     image: selenium/standalone-firefox:4.1.4-20220427
     shm_size: '2gb'
     ports:
-      - 4444:4444 # Driver (http://localhost:4444)
-      - 7900:7900 # VNC (http://localhost:7900, pass: secret)
+      - 4444:4444 # http://localhost:4444 (driver)
+      - 7900:7900 # http://localhost:7900 (VNC, pass: secret)
     volumes:
       - type: bind
-        source: ../..
+        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.props.interactionMode === 'editArrows' ? 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() {
@@ -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/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;
 	});
 }

package/test/1_markers.js

@@ -28,7 +28,7 @@ describe('Flatten square markers', () => {
 
 	it('Re4', () => { test.value(flattenSquareMarkers({ e4: 'r' })).is('Re4'); });
 	it('Gd3,Yh8', () => { test.value(flattenSquareMarkers({ h8: 'y', d3: 'g' })).is('Gd3,Yh8'); });
-	it('Ga1,Yc5,Rd2,Rh7,Yh8', () => { test.value(flattenSquareMarkers({ c5: 'y', h8: 'y', a1: 'g', h7: 'r', d2: 'r' })).is('Ga1,Yc5,Rd2,Rh7,Yh8'); });
+	it('Ga1,Yc5,Rd2,Bh7,Yh8', () => { test.value(flattenSquareMarkers({ c5: 'y', h8: 'y', a1: 'g', h7: 'b', d2: 'r' })).is('Ga1,Yc5,Rd2,Bh7,Yh8'); });
 	it('<empty>', () => { test.value(flattenSquareMarkers({})).is(''); });
 
 	it('Wrong square', () => { test.value(flattenSquareMarkers({ e1: 'r', k9: 'g', whatever: 'y' })).is('Re1'); });
@@ -40,13 +40,13 @@ describe('Parse square markers', () => {
 
 	it('Re4', () => { test.value(parseSquareMarkers('Re4')).is({ e4: 'r' }); });
 	it('Gd3,Yh8', () => { test.value(parseSquareMarkers('Gd3,Yh8')).is({ h8: 'y', d3: 'g' }); });
-	it('Ga1,Yc5,Rd2,Rh7,Yh8', () => { test.value(parseSquareMarkers(' Ga1,  Yh8,Yc5 ,Rd2, Rh7 ')).is({ c5: 'y', h8: 'y', a1: 'g', h7: 'r', d2: 'r' }); });
+	it('Ga1,Yc5,Rd2,Bh7,Yh8', () => { test.value(parseSquareMarkers(' Ga1,  Yh8,Yc5 ,Rd2, Bh7 ')).is({ c5: 'y', h8: 'y', a1: 'g', h7: 'b', d2: 'r' }); });
 	it('<empty>', () => { test.value(parseSquareMarkers('')).is({}); });
 	it('<blank>', () => { test.value(parseSquareMarkers(' ')).is({}); });
 
 	it('Wrong square', () => { test.value(parseSquareMarkers('Rg9,Ye1')).is({ e1: 'y' }); });
 	it('Duplicated square', () => { test.value(parseSquareMarkers('Ra3,Ya3')).is({ a3: 'y' }); });
-	it('Wrong color', () => { test.value(parseSquareMarkers('Ga6,Bg5')).is({ a6: 'g' }); });
+	it('Wrong color', () => { test.value(parseSquareMarkers('Ga6,Cg5')).is({ a6: 'g' }); });
 	it('Wrong format', () => { test.value(parseSquareMarkers('Something Ra2 invalid, Ye4, G g3')).is({ e4: 'y' }); });
 });
 
@@ -58,13 +58,13 @@ describe('Flatten text markers', () => {
 		h8: { symbol: '1', color: 'y' },
 		d3: { symbol: 'z', color: 'g' },
 	})).is('Gzd3,Y1h8'); });
-	it('G2a1,YMc5,RLd2,Rxh7,Ywh8', () => { test.value(flattenTextMarkers({
+	it('G2a1,YMc5,RLd2,Rxh7,Bwh8', () => { test.value(flattenTextMarkers({
 		c5: { symbol: 'M', color: 'y' },
-		h8: { symbol: 'w', color: 'y' },
+		h8: { symbol: 'w', color: 'b' },
 		a1: { symbol: '2', color: 'g' },
 		h7: { symbol: 'x', color: 'r' },
 		d2: { symbol: 'L', color: 'r' },
-	})).is('G2a1,YMc5,RLd2,Rxh7,Ywh8'); });
+	})).is('G2a1,YMc5,RLd2,Rxh7,Bwh8'); });
 	it('Multi-character symbols', () => { test.value(flattenTextMarkers({
 		a1: { symbol: 'A', color: 'y' },
 		a7: { symbol: 'plus', color: 'g' },
@@ -104,9 +104,9 @@ describe('Parse text markers', () => {
 		h8: { symbol: '1', color: 'y' },
 		d3: { symbol: 'z', color: 'g' },
 	}); });
-	it('G2a1,YMc5,RLd2,Rxh7,Ywh8', () => { test.value(parseTextMarkers(' G2a1, Rxh7  ,YMc5 ,RLd2,Ywh8 ')).is({
+	it('G2a1,YMc5,RLd2,Rxh7,Bwh8', () => { test.value(parseTextMarkers(' G2a1, Rxh7  ,YMc5 ,RLd2,Bwh8 ')).is({
 		c5: { symbol: 'M', color: 'y' },
-		h8: { symbol: 'w', color: 'y' },
+		h8: { symbol: 'w', color: 'b' },
 		a1: { symbol: '2', color: 'g' },
 		h7: { symbol: 'x', color: 'r' },
 		d2: { symbol: 'L', color: 'r' },
@@ -123,7 +123,7 @@ describe('Parse text markers', () => {
 
 	it('Wrong square', () => { test.value(parseTextMarkers('RHg9,Yxe1')).is({ e1: { symbol: 'x', color: 'y' } }); });
 	it('Duplicated square', () => { test.value(parseTextMarkers('Rka3,Gba3')).is({ a3: { symbol: 'b', color: 'g' } }); });
-	it('Wrong color', () => { test.value(parseTextMarkers('G3a6,BAg5')).is({ a6: { symbol: '3', color: 'g' } }); });
+	it('Wrong color', () => { test.value(parseTextMarkers('G3a6,CAg5')).is({ a6: { symbol: '3', color: 'g' } }); });
 	it('Wrong symbol', () => { test.value(parseTextMarkers('Rb2,RAg5,G.d3,Yabcde7')).is({ g5: { symbol: 'A', color: 'r' } }); });
 	it('Wrong multi-character symbol', () => { test.value(parseTextMarkers('RZb2,Y(whatever)e4')).is({ b2: { symbol: 'Z', color: 'r' } }); });
 	it('Wrong format', () => { test.value(parseTextMarkers('Something RHa2 invalid, Yqe4, G g3')).is({ e4: { symbol: 'q', color: 'y' } }); });
@@ -134,8 +134,8 @@ describe('Flatten arrow markers', () => {
 
 	it('Re4d6', () => { test.value(flattenArrowMarkers({ e4d6: 'r' })).is('Re4d6'); });
 	it('Gd3b4,Yh8h7', () => { test.value(flattenArrowMarkers({ h8h7: 'y', d3b4: 'g' })).is('Gd3b4,Yh8h7'); });
-	it('Ga1h8,Yc5a1,Rd2d2,Rh7h8,Yh8c5', () => { test.value(flattenArrowMarkers({ c5a1: 'y', h8c5: 'y', a1h8: 'g', h7h8: 'r', d2d2: 'r' }))
-		.is('Ga1h8,Yc5a1,Rd2d2,Rh7h8,Yh8c5'); });
+	it('Ga1h8,Yc5a1,Rd2d2,Rh7h8,Bh8c5', () => { test.value(flattenArrowMarkers({ c5a1: 'y', h8c5: 'b', a1h8: 'g', h7h8: 'r', d2d2: 'r' }))
+		.is('Ga1h8,Yc5a1,Rd2d2,Rh7h8,Bh8c5'); });
 	it('<empty>', () => { test.value(flattenArrowMarkers({})).is(''); });
 
 	it('Wrong vector', () => { test.value(flattenArrowMarkers({ e1c2: 'r', a1b9: 'g', c0d2: 'r', i3d4: 'r', f2k3: 'g', whatever: 'y' })).is('Re1c2'); });
@@ -147,13 +147,13 @@ describe('Parse arrow markers', () => {
 
 	it('Re4d6', () => { test.value(parseArrowMarkers('Re4d6')).is({ e4d6: 'r' }); });
 	it('Gd3b4,Yh8h7', () => { test.value(parseArrowMarkers('Gd3b4,Yh8h7')).is({ h8h7: 'y', d3b4: 'g' }); });
-	it('Ga1h8,Yc5a1,Rd2d2,Rh7h8,Yh8c5', () => { test.value(parseArrowMarkers(' Yh8c5,Ga1h8  , Yc5a1 ,  Rd2d2,Rh7h8  '))
-		.is({ c5a1: 'y', h8c5: 'y', a1h8: 'g', h7h8: 'r', d2d2: 'r' }); });
+	it('Ga1h8,Yc5a1,Rd2d2,Rh7h8,Bh8c5', () => { test.value(parseArrowMarkers(' Bh8c5,Ga1h8  , Yc5a1 ,  Rd2d2,Rh7h8  '))
+		.is({ c5a1: 'y', h8c5: 'b', a1h8: 'g', h7h8: 'r', d2d2: 'r' }); });
 	it('<empty>', () => { test.value(parseArrowMarkers('')).is({}); });
 	it('<blank>', () => { test.value(parseArrowMarkers(' ')).is({}); });
 
 	it('Wrong vector', () => { test.value(parseArrowMarkers('Re1c2,Ga1b9,Rc0d2,Ri3d4,Gf2k3')).is({ e1c2: 'r' }); });
 	it('Duplicated vector', () => { test.value(parseArrowMarkers('Ya3b4,Ra3b4')).is({ a3b4: 'r' }); });
-	it('Wrong color', () => { test.value(parseArrowMarkers('Ga6c5,Bg5e2')).is({ a6c5: 'g' }); });
+	it('Wrong color', () => { test.value(parseArrowMarkers('Ga6c5,Cg5e2')).is({ a6c5: 'g' }); });
 	it('Wrong format', () => { test.value(parseArrowMarkers('Something Rb1a2 invalid, Ye4c7, G g3b1')).is({ e4c7: 'y' }); });
 });

package/test/common/graphic.js

@@ -34,8 +34,8 @@ const coverageDir = rootDir + '/build/.nyc_output';
 const UNREACHABLE_TEST_CLIENT_MESSAGE =
 	'Cannot reach the dockerized selenium webbrowser used for graphic tests (probably because the test environment is not running).\n' +
 	'\n' +
-	'Use command `npm run start_test_env` to start the test environment.\n' +
-	'Do not forget to run `npm run stop_test_env` when finished.\n';
+	'Use command `npm run test_env:start` to start the test environment.\n' +
+	'Do not forget to run `npm run test_env:stop` when finished.\n';
 
 
 /**