kokopu-react 1.5.4 → 1.7.0

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/index.js

@@ -57,12 +57,24 @@ Object.defineProperty(exports, "flattenTextMarkers", {
     return _markers.flattenTextMarkers;
   }
 });
+Object.defineProperty(exports, "formatMove", {
+  enumerable: true,
+  get: function get() {
+    return _formatmove.formatMove;
+  }
+});
 Object.defineProperty(exports, "i18n", {
   enumerable: true,
   get: function get() {
     return _i18n["default"];
   }
 });
+Object.defineProperty(exports, "moveFormatter", {
+  enumerable: true,
+  get: function get() {
+    return _formatmove.moveFormatter;
+  }
+});
 Object.defineProperty(exports, "parseArrowMarkers", {
   enumerable: true,
   get: function get() {
@@ -84,6 +96,8 @@ Object.defineProperty(exports, "parseTextMarkers", {
 
 var _markers = require("./markers");
 
+var _formatmove = require("./formatmove");
+
 var _i18n = _interopRequireDefault(require("./i18n"));
 
 var _Chessboard = _interopRequireDefault(require("./Chessboard"));

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} />,

package/{graphic_test_app → graphic_test_src}/08_chessboard_move_pieces.js

@@ -31,6 +31,6 @@ function onPieceMoved(from, to) {
 testApp([ /* eslint-disable react/jsx-key */
 	<Chessboard squareSize={50} coordinateVisible={false} interactionMode="movePieces" onPieceMoved={onPieceMoved} />,
 	<Chessboard squareSize={50} coordinateVisible={false} interactionMode="movePieces" onPieceMoved={onPieceMoved} flipped
-		squareMarkers="Gc4" textMarkers="RAh3" arrowMarkers="Gc8a4" />,
+		squareMarkers="Gc4" textMarkers="BAh3" arrowMarkers="Gc8a4" moveArrowColor="r" />,
 	<Chessboard squareSize={50} coordinateVisible={false} interactionMode="movePieces" onPieceMoved={onPieceMoved} move="e4" animated={false} />,
 ]); /* eslint-enable react/jsx-key */

package/{graphic_test_app → graphic_test_src}/10_chessboard_play_moves.js

@@ -31,7 +31,7 @@ function onMovePlayed(move) {
 testApp([ /* eslint-disable react/jsx-key */
 	<Chessboard squareSize={50} coordinateVisible={false} interactionMode="playMoves" onMovePlayed={onMovePlayed} />,
 	<Chessboard squareSize={50} coordinateVisible={false} interactionMode="playMoves" onMovePlayed={onMovePlayed}
-		flipped position="rnbqk2r/ppp2ppp/3p1n2/2b1p3/4P3/2NP1N2/PPP2PPP/R1BQKB1R w KQkq - 0 1" move="Bg5" animated={false} />,
+		flipped position="rnbqk2r/ppp2ppp/3p1n2/2b1p3/4P3/2NP1N2/PPP2PPP/R1BQKB1R w KQkq - 0 1" move="Bg5" animated={false} moveArrowColor="g" />,
 	<Chessboard squareSize={50} coordinateVisible={false} interactionMode="playMoves" onMovePlayed={onMovePlayed}
 		position="rnbq1bnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQ - 0 1" />,
 	<Chessboard squareSize={50} coordinateVisible={false} interactionMode="playMoves" onMovePlayed={onMovePlayed}

package/{graphic_test_app → graphic_test_src}/15_movetext_options.js

@@ -26,8 +26,6 @@ import { Movetext, i18n } from '../src/index';
 
 import pgn from './common/games.pgn';
 
-let legacyPieceSymbols = i18n.PIECE_SYMBOLS;
-
 // Localization for French
 i18n.PIECE_SYMBOLS = { K: 'R', Q: 'D', R: 'T', B: 'F', N: 'C', P: 'P' };
 
@@ -38,5 +36,3 @@ testApp([ /* eslint-disable react/jsx-key */
 		diagramOptions={{ flipped: true, coordinateVisible: false, squareSize: 32, colorset: 'scid', pieceset: 'eyes' }} />,
 	<Movetext game={pgn} gameIndex={9} diagramVisible={false} />,
 ], 'width-600'); /* eslint-enable react/jsx-key */
-
-i18n.PIECE_SYMBOLS = legacyPieceSymbols;

package/{graphic_test_app → graphic_test_src}/common/games.pgn

@@ -85,7 +85,7 @@ probably to assure himself that the combination was sound and that he had a forc
 [Date "????.??.??"]
 [Round "<strong>3</strong>.2"]
 [White "1<sup>st</sup> <em>player</em>"]
-[Black "2<sub>nd</sub> <em>player</em>"]
+[Black "2<sub>nd</sub> <i>player</i>"]
 [Result "*"]
 [WhiteElo "<ins>2800</ins>"]
 [BlackElo "<del>1010</del>"]
@@ -104,7 +104,13 @@ probably to assure himself that the combination was sound and that he had a forc
 [Black "?"]
 [Result "*"]
 
-{I'm a <strong><ins>comment</ins></strong> with some <em class="myClass">HTML content</em> in it.}
+{I'm a <strong><ins>comment</ins></strong> with some <em class="myClass">HTML content</em> in it.<br/>
+Lists are supported:
+<ul>
+<li>1<sup>st</sup> point</li>
+<li>2<sup>nd</sup> point</li>
+</ul>
+... and so are images: <img src="../smiley.png" alt="smiley" />}
 
 *
 
@@ -119,9 +125,9 @@ probably to assure himself that the combination was sound and that he had a forc
 [Result "*"]
 
 {
-Using <div class="myClass">div tags</div> is not allowed.
-... but <div class="myClass"><em>legit HTML elements</em> within forbidden HTML tags</div> are rendered.
-Using <span style="color: cyan;">style attributes</span> is not allowed.
+Using <form class="myClass">form-related tags</form> is not allowed.<br/>
+... but <button class="myClass"><em>legit HTML elements</em> within forbidden HTML tags</button> are rendered.<br/>
+Using <span style="color: cyan;">style attributes</span> is not allowed.<br/>
 Using scripts is not allowed. <script>alert('You should not see this either.');</script>
 }
 

package/{graphic_test_app → graphic_test_src}/common/test_app.js

@@ -21,7 +21,7 @@
 
 
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import './test_app.css';
 
 
@@ -45,8 +45,9 @@ export default function(elements, containerClassName) {
 	document.body.appendChild(anchor);
 
 	// Render the content.
+	let root = createRoot(anchor);
 	let content = flattenMultiElements(elements, containerClassName);
-	ReactDOM.render(content, anchor);
+	root.render(content);
 
 	// Append a text area
 	let sandbox = document.createElement('pre');

package/graphics/chess_sprites/cburnett/bb.svg

@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   width="45"
+   height="45"
+   id="svg3128">
+  <defs
+     id="defs3130" />
+  <g
+     style="display:inline"
+     id="layer1">
+    <path
+       d="M 9,36 C 12.385,35.028 19.115,36.431 22.5,34 C 25.885,36.431 32.615,35.028 36,36 C 36,36 37.646,36.542 39,38 C 38.323,38.972 37.354,38.986 36,38.5 C 32.615,37.528 25.885,38.958 22.5,37.5 C 19.115,38.958 12.385,37.528 9,38.5 C 7.6459,38.986 6.6771,38.972 6,38 C 7.3541,36.055 9,36 9,36 z "
+       style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path4582" />
+    <path
+       d="M 15,32 C 17.5,34.5 27.5,34.5 30,32 C 30.5,30.5 30,30 30,30 C 30,27.5 27.5,26 27.5,26 C 33,24.5 33.5,14.5 22.5,10.5 C 11.5,14.5 12,24.5 17.5,26 C 17.5,26 15,27.5 15,30 C 15,30 14.5,30.5 15,32 z "
+       style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path4584" />
+    <path
+       d="M 25 10 A 2.5 2.5 0 1 1  20,10 A 2.5 2.5 0 1 1  25 10 z"
+       transform="translate(0,-2)"
+       style="opacity:1;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path4586" />
+    <path
+       d="M 17.5,26 L 27.5,26"
+       style="fill:none;fill-opacity:0.75;fill-rule:evenodd;stroke:#ffffff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path4588" />
+    <path
+       d="M 15,30 L 30,30"
+       style="fill:none;fill-opacity:0.75;fill-rule:evenodd;stroke:#ffffff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path4590" />
+    <path
+       d="M 22.5,15.5 L 22.5,20.5"
+       style="fill:none;fill-opacity:0.75;fill-rule:evenodd;stroke:#ffffff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path4592" />
+    <path
+       d="M 20,18 L 25,18"
+       style="fill:none;fill-opacity:0.75;fill-rule:evenodd;stroke:#ffffff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path4594" />
+  </g>
+</svg>

package/graphics/chess_sprites/cburnett/bk.svg

@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   width="45"
+   height="45"
+   id="svg3128">
+  <defs
+     id="defs3130" />
+  <g
+     id="layer1">
+    <path
+       d="M 22.5,11.625 L 22.5,6"
+       style="fill:none;fill-opacity:0.75;fill-rule:evenodd;stroke:#000000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path6570" />
+    <path
+       d="M 22.5,25 C 22.5,25 27,17.5 25.5,14.5 C 25.5,14.5 24.5,12 22.5,12 C 20.5,12 19.5,14.5 19.5,14.5 C 18,17.5 22.5,25 22.5,25"
+       style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path5683" />
+    <path
+       d="M 11.5,37 C 17,40.5 27,40.5 32.5,37 L 32.5,30 C 32.5,30 41.5,25.5 38.5,19.5 C 34.5,13 25,16 22.5,23.5 L 22.5,27 L 22.5,23.5 C 19,16 9.5,13 6.5,19.5 C 3.5,25.5 11.5,29.5 11.5,29.5 L 11.5,37 z "
+       style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path5681" />
+    <path
+       d="M 20,8 L 25,8"
+       style="fill:none;fill-opacity:0.75;fill-rule:evenodd;stroke:#000000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path6572" />
+    <path
+       d="M 11.5,29.5 C 17,27 27,27 32.5,30"
+       style="fill:none;fill-opacity:0.75;fill-rule:evenodd;stroke:#ffffff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path6574" />
+    <path
+       d="M 11.5,37 C 17,34.5 27,34.5 32.5,37"
+       style="fill:none;fill-opacity:0.75;fill-rule:evenodd;stroke:#ffffff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path6576" />
+    <path
+       d="M 11.5,33.5 C 17,31.5 27,31.5 32.5,33.5"
+       style="fill:none;fill-opacity:0.75;fill-rule:evenodd;stroke:#ffffff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path6578" />
+    <path
+       d="M 32,29.5 C 32,29.5 40.5,25.5 38.026,19.847 C 34.147,13.997 25,18 22.5,24.5 L 22.512,26.597 L 22.5,24.5 C 20,18 9.9064,13.997 6.9975,19.847 C 4.5,25.5 11.846,28.847 11.846,28.847"
+       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#ffffff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path5638" />
+  </g>
+</svg>