kokopu-react 3.0.2 → 3.2.0

package/test/graphic_test_app/05_chessboard_graphic/annotations.tsx

@@ -48,11 +48,11 @@ const arrowMarkers3 = { d1h5: G, a5f4: R, c7c3: Y, g7g7: G };
 const 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} />,
-	<Chessboard squareMarkers={squareMarkers1} arrowMarkers={arrowMarkers1} textMarkers={textMarkers1} flipped={true} coordinateVisible={true} />,
-	<Chessboard squareMarkers={squareMarkers2} arrowMarkers={arrowMarkers2} textMarkers={textMarkers2} flipped={false} coordinateVisible={false} />,
-	<Chessboard squareMarkers={squareMarkers2} arrowMarkers={arrowMarkers2} textMarkers={textMarkers2} flipped={true} coordinateVisible={false} />,
-	<Chessboard squareMarkers={squareMarkers3} arrowMarkers={arrowMarkers3} textMarkers={textMarkers3} flipped={false} coordinateVisible={false} position="empty" />,
-	<Chessboard squareMarkers={squareMarkers3} arrowMarkers={arrowMarkers3} textMarkers={textMarkers3} flipped={true} coordinateVisible={true}
-		position="8/8/1r6/8/5k1K/8/8/8 b - - 0 1" />,
+    <Chessboard squareMarkers={squareMarkers1} arrowMarkers={arrowMarkers1} textMarkers={textMarkers1} flipped={false} coordinateVisible={true} />,
+    <Chessboard squareMarkers={squareMarkers1} arrowMarkers={arrowMarkers1} textMarkers={textMarkers1} flipped={true} coordinateVisible={true} />,
+    <Chessboard squareMarkers={squareMarkers2} arrowMarkers={arrowMarkers2} textMarkers={textMarkers2} flipped={false} coordinateVisible={false} />,
+    <Chessboard squareMarkers={squareMarkers2} arrowMarkers={arrowMarkers2} textMarkers={textMarkers2} flipped={true} coordinateVisible={false} />,
+    <Chessboard squareMarkers={squareMarkers3} arrowMarkers={arrowMarkers3} textMarkers={textMarkers3} flipped={false} coordinateVisible={false} position="empty" />,
+    <Chessboard squareMarkers={squareMarkers3} arrowMarkers={arrowMarkers3} textMarkers={textMarkers3} flipped={true} coordinateVisible={true}
+        position="8/8/1r6/8/5k1K/8/8/8 b - - 0 1" />,
 ]); /* eslint-enable react/jsx-key */

package/test/graphic_test_app/05_chessboard_graphic/base.tsx

@@ -28,10 +28,10 @@ import { testApp } from '../common/test_app';
 import { Chessboard } from '../../../dist/lib/index';
 
 testApp([ /* eslint-disable react/jsx-key */
-	<Chessboard />,
-	<Chessboard position="empty" turnVisible={true} />,
-	<Chessboard position="something invalid" />,
-	<Chessboard position="r1bqkbnr/pppp1ppp/2n5/1B2p3/4P3/5N2/PPPP1PPP/RNBQK2R b KQkq - 3 3" turnVisible={false} />,
-	<Chessboard position={new Position('8/8/1r6/8/5k1K/8/8/8 b - - 0 1')} />,
-	<Chessboard position={ /* eslint-disable @typescript-eslint/no-explicit-any */ 42 as any /* eslint-enable @typescript-eslint/no-explicit-any */ } />,
+    <Chessboard />,
+    <Chessboard position="empty" turnVisible={true} />,
+    <Chessboard position="something invalid" />,
+    <Chessboard position="r1bqkbnr/pppp1ppp/2n5/1B2p3/4P3/5N2/PPPP1PPP/RNBQK2R b KQkq - 3 3" turnVisible={false} />,
+    <Chessboard position={new Position('8/8/1r6/8/5k1K/8/8/8 b - - 0 1')} />,
+    <Chessboard position={ /* eslint-disable @typescript-eslint/no-explicit-any */ 42 as any /* eslint-enable @typescript-eslint/no-explicit-any */ } />,
 ]); /* eslint-enable react/jsx-key */

package/test/graphic_test_app/05_chessboard_graphic/chess_variants.tsx

@@ -27,11 +27,11 @@ import { testApp } from '../common/test_app';
 import { Chessboard } from '../../../dist/lib/index';
 
 testApp([ /* eslint-disable react/jsx-key */
-	<Chessboard position="chess960:nqbrnkrb/pppppppp/8/8/8/8/PPPPPPPP/NQBRNKRB w KQkq - 0 1" />,
-	<Chessboard position="chess960:nqbrnkrb/pppppppp/8/8/8/8/PPPPPPPP/NQBRNKRB w KQkq - 0 1" move="O-O" />,
-	<Chessboard position="chess960" />,
-	<Chessboard position="horde" />,
-	<Chessboard position="start" />,
-	<Chessboard position="whatever" />,
-	<Chessboard position="whatever:rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1" />,
+    <Chessboard position="chess960:nqbrnkrb/pppppppp/8/8/8/8/PPPPPPPP/NQBRNKRB w KQkq - 0 1" />,
+    <Chessboard position="chess960:nqbrnkrb/pppppppp/8/8/8/8/PPPPPPPP/NQBRNKRB w KQkq - 0 1" move="O-O" />,
+    <Chessboard position="chess960" />,
+    <Chessboard position="horde" />,
+    <Chessboard position="start" />,
+    <Chessboard position="whatever" />,
+    <Chessboard position="whatever:rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1" />,
 ]); /* eslint-enable react/jsx-key */

package/test/graphic_test_app/05_chessboard_graphic/flipped.tsx

@@ -28,9 +28,9 @@ import { testApp } from '../common/test_app';
 import { Chessboard } from '../../../dist/lib/index';
 
 testApp([ /* eslint-disable react/jsx-key */
-	<Chessboard flipped={true} turnVisible={false} />,
-	<Chessboard flipped={true} position="empty" />,
-	<Chessboard flipped={true} position="something invalid" />,
-	<Chessboard flipped={true} position="r1bqkbnr/pppp1ppp/2n5/1B2p3/4P3/5N2/PPPP1PPP/RNBQK2R b KQkq - 3 3" />,
-	<Chessboard flipped={true} position={new Position('8/8/1r6/8/5k1K/8/8/8 b - - 0 1')} turnVisible={true} />,
+    <Chessboard flipped={true} turnVisible={false} />,
+    <Chessboard flipped={true} position="empty" />,
+    <Chessboard flipped={true} position="something invalid" />,
+    <Chessboard flipped={true} position="r1bqkbnr/pppp1ppp/2n5/1B2p3/4P3/5N2/PPPP1PPP/RNBQK2R b KQkq - 3 3" />,
+    <Chessboard flipped={true} position={new Position('8/8/1r6/8/5k1K/8/8/8 b - - 0 1')} turnVisible={true} />,
 ]); /* eslint-enable react/jsx-key */

package/test/graphic_test_app/05_chessboard_graphic/move.tsx

@@ -31,14 +31,16 @@ const pos = new Position('r1bqkbnr/1ppp1ppp/p1n5/1B2p3/4P3/5N2/PPPP1PPP/RNBQK2R
 const move = pos.notation('Bxc6');
 
 testApp([ /* eslint-disable react/jsx-key */
-	<Chessboard move="e4" animated={false} />,
-	<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={true} />,
-	<Chessboard position={pos} move={move} animated={true} 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={ /* eslint-disable @typescript-eslint/no-explicit-any */ 42 as any /* eslint-enable @typescript-eslint/no-explicit-any */ } animated={false} />,
-	<Chessboard move="e4" animated={false} moveArrowColor={ /* eslint-disable @typescript-eslint/no-explicit-any */ 'z' as any /* eslint-enable @typescript-eslint/no-explicit-any */ } />,
+    <Chessboard move="e4" animated={false} />,
+    <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={true} />,
+    <Chessboard position={pos} move={move} animated={true} 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={ /* eslint-disable @typescript-eslint/no-explicit-any */ 42 as any /* eslint-enable @typescript-eslint/no-explicit-any */ } animated={false} />,
+    <Chessboard move="e4" animated={false} moveArrowColor={ /* eslint-disable @typescript-eslint/no-explicit-any */ 'z' as any /* eslint-enable @typescript-eslint/no-explicit-any */ } />,
+    <Chessboard move="--" animated={false} />,
+    <Chessboard position="rnbqkbnr/ppp1pppp/8/1B1p4/4P3/8/PPPP1PPP/RNBQK1NR b KQkq - 1 2" move="--" animated={false} />,
 ]); /* eslint-enable react/jsx-key */

package/test/graphic_test_app/05_chessboard_graphic/theme.tsx

@@ -36,16 +36,16 @@ const sm = 'Ba8,Ba7,Gb8,Gb7,Rc8,Rc7,Yd8,Yd7';
 const am = 'Ba1a3,Gb1b3,Rc1c3,Yd1d3';
 
 testApp([ /* eslint-disable react/jsx-key */
-	<Chessboard position={pos1} move={mv1} squareMarkers={sm} arrowMarkers={am} animated={false} />,
-	<Chessboard position={pos2} move={mv2} squareMarkers={sm} arrowMarkers={am} squareSize={60} animated={false} />,
-	<Chessboard position={pos1} move={mv1} squareMarkers={sm} arrowMarkers={am} squareSize={29} coordinateVisible={false} flipped={true} animated={false} />,
-	<Chessboard position={pos1} move={mv1} squareMarkers={sm} arrowMarkers={am} squareSize={47} coordinateVisible={true} flipped={true} colorset="scid" animated={false} />,
-	<Chessboard position={pos2} move={mv2} squareMarkers={sm} arrowMarkers={am} coordinateVisible={false} colorset="marine" pieceset="eyes" animated={false} />,
-	<Chessboard position={pos1} move={mv1} squareMarkers={sm} arrowMarkers={am} coordinateVisible={false} pieceset="fantasy" animated={false} />,
-	<Chessboard position={pos1} move={mv1} squareMarkers={sm} arrowMarkers={am} colorset="emerald" pieceset="skulls" animated={false} />,
-	<Chessboard position={pos2} move={mv2} squareMarkers={sm} arrowMarkers={am} squareSize={91} flipped={true} colorset="gray" pieceset="spatial" animated={false} />,
-	<Chessboard position={pos1} move={mv1} squareMarkers={sm} arrowMarkers={am} squareSize={17} colorset="dusk" animated={false} />,
-	<Chessboard squareSize={ /* eslint-disable @typescript-eslint/no-explicit-any */ '24' as any /* eslint-enable @typescript-eslint/no-explicit-any */ } />,
-	<Chessboard colorset="not-a-colorset" />,
-	<Chessboard pieceset="not-a-pieceset" />,
+    <Chessboard position={pos1} move={mv1} squareMarkers={sm} arrowMarkers={am} animated={false} />,
+    <Chessboard position={pos2} move={mv2} squareMarkers={sm} arrowMarkers={am} squareSize={60} animated={false} />,
+    <Chessboard position={pos1} move={mv1} squareMarkers={sm} arrowMarkers={am} squareSize={29} coordinateVisible={false} flipped={true} animated={false} />,
+    <Chessboard position={pos1} move={mv1} squareMarkers={sm} arrowMarkers={am} squareSize={47} coordinateVisible={true} flipped={true} colorset="scid" animated={false} />,
+    <Chessboard position={pos2} move={mv2} squareMarkers={sm} arrowMarkers={am} coordinateVisible={false} colorset="marine" pieceset="eyes" animated={false} />,
+    <Chessboard position={pos1} move={mv1} squareMarkers={sm} arrowMarkers={am} coordinateVisible={false} pieceset="fantasy" animated={false} />,
+    <Chessboard position={pos1} move={mv1} squareMarkers={sm} arrowMarkers={am} colorset="emerald" pieceset="skulls" animated={false} />,
+    <Chessboard position={pos2} move={mv2} squareMarkers={sm} arrowMarkers={am} squareSize={91} flipped={true} colorset="gray" pieceset="spatial" animated={false} />,
+    <Chessboard position={pos1} move={mv1} squareMarkers={sm} arrowMarkers={am} squareSize={17} colorset="dusk" animated={false} />,
+    <Chessboard squareSize={ /* eslint-disable @typescript-eslint/no-explicit-any */ '24' as any /* eslint-enable @typescript-eslint/no-explicit-any */ } />,
+    <Chessboard colorset="not-a-colorset" />,
+    <Chessboard pieceset="not-a-pieceset" />,
 ]); /* eslint-enable react/jsx-key */

package/test/graphic_test_app/06_chessboard_animation/base_1.tsx

@@ -29,10 +29,10 @@ import { Chessboard } from '../../../dist/lib/index';
 window['__kokopu_debug_freeze_motion'] = 0.09;
 
 testApp([ /* eslint-disable react/jsx-key */
-	<Chessboard move="e4" animated={true} />,
-	<Chessboard move="Nf3" animated={true} moveArrowVisible={false} />,
-	<Chessboard position="r1bqkbnr/pppppppp/n7/8/4P3/8/PPPP1PPP/RNBQKBNR w KQkq - 1 2" move="Bxa6" animated={true} flipped turnVisible={false} />,
-	<Chessboard position="r3k2r/pppppppp/8/8/8/8/PPPPPPPP/R3K2R b KQkq - 0 1" move="O-O-O" animated={true} />,
-	<Chessboard position="rnbqkbnr/ppp1p1pp/8/3pPp2/8/8/PPPP1PPP/RNBQKBNR w KQkq f6 0 3" move="exf6" animated={true} />,
-	<Chessboard position="8/8/8/1K6/8/4k3/1p6/8 b - - 0 1" move="b1=R+" animated={true} turnVisible={false} />,
+    <Chessboard move="e4" animated={true} />,
+    <Chessboard move="Nf3" animated={true} moveArrowVisible={false} />,
+    <Chessboard position="r1bqkbnr/pppppppp/n7/8/4P3/8/PPPP1PPP/RNBQKBNR w KQkq - 1 2" move="Bxa6" animated={true} flipped turnVisible={false} />,
+    <Chessboard position="r3k2r/pppppppp/8/8/8/8/PPPPPPPP/R3K2R b KQkq - 0 1" move="O-O-O" animated={true} />,
+    <Chessboard position="rnbqkbnr/ppp1p1pp/8/3pPp2/8/8/PPPP1PPP/RNBQKBNR w KQkq f6 0 3" move="exf6" animated={true} />,
+    <Chessboard position="8/8/8/1K6/8/4k3/1p6/8 b - - 0 1" move="b1=R+" animated={true} turnVisible={false} />,
 ]); /* eslint-enable react/jsx-key */

package/test/graphic_test_app/06_chessboard_animation/base_2.tsx

@@ -29,10 +29,10 @@ import { Chessboard } from '../../../dist/lib/index';
 window['__kokopu_debug_freeze_motion'] = 0.7;
 
 testApp([ /* eslint-disable react/jsx-key */
-	<Chessboard move="e4" animated={true} />,
-	<Chessboard move="Nf3" animated={true} moveArrowVisible={false} />,
-	<Chessboard position="r1bqkbnr/pppppppp/n7/8/4P3/8/PPPP1PPP/RNBQKBNR w KQkq - 1 2" move="Bxa6" animated={true} flipped turnVisible={false} />,
-	<Chessboard position="r3k2r/pppppppp/8/8/8/8/PPPPPPPP/R3K2R b KQkq - 0 1" move="O-O-O" animated={true} />,
-	<Chessboard position="rnbqkbnr/ppp1p1pp/8/3pPp2/8/8/PPPP1PPP/RNBQKBNR w KQkq f6 0 3" move="exf6" animated={true} />,
-	<Chessboard position="8/8/8/1K6/8/4k3/1p6/8 b - - 0 1" move="b1=R+" animated={true} turnVisible={false} />,
+    <Chessboard move="e4" animated={true} />,
+    <Chessboard move="Nf3" animated={true} moveArrowVisible={false} />,
+    <Chessboard position="r1bqkbnr/pppppppp/n7/8/4P3/8/PPPP1PPP/RNBQKBNR w KQkq - 1 2" move="Bxa6" animated={true} flipped turnVisible={false} />,
+    <Chessboard position="r3k2r/pppppppp/8/8/8/8/PPPPPPPP/R3K2R b KQkq - 0 1" move="O-O-O" animated={true} />,
+    <Chessboard position="rnbqkbnr/ppp1p1pp/8/3pPp2/8/8/PPPP1PPP/RNBQKBNR w KQkq f6 0 3" move="exf6" animated={true} />,
+    <Chessboard position="8/8/8/1K6/8/4k3/1p6/8 b - - 0 1" move="b1=R+" animated={true} turnVisible={false} />,
 ]); /* eslint-enable react/jsx-key */

package/test/graphic_test_app/06_chessboard_animation/base_3.tsx

@@ -29,10 +29,10 @@ import { Chessboard } from '../../../dist/lib/index';
 window['__kokopu_debug_freeze_motion'] = 0.91;
 
 testApp([ /* eslint-disable react/jsx-key */
-	<Chessboard move="e4" animated={true} />,
-	<Chessboard move="Nf3" animated={true} moveArrowVisible={false} />,
-	<Chessboard position="r1bqkbnr/pppppppp/n7/8/4P3/8/PPPP1PPP/RNBQKBNR w KQkq - 1 2" move="Bxa6" animated={true} flipped turnVisible={false} />,
-	<Chessboard position="r3k2r/pppppppp/8/8/8/8/PPPPPPPP/R3K2R b KQkq - 0 1" move="O-O-O" animated={true} />,
-	<Chessboard position="rnbqkbnr/ppp1p1pp/8/3pPp2/8/8/PPPP1PPP/RNBQKBNR w KQkq f6 0 3" move="exf6" animated={true} />,
-	<Chessboard position="8/8/8/1K6/8/4k3/1p6/8 b - - 0 1" move="b1=R+" animated={true} turnVisible={false} />,
+    <Chessboard move="e4" animated={true} />,
+    <Chessboard move="Nf3" animated={true} moveArrowVisible={false} />,
+    <Chessboard position="r1bqkbnr/pppppppp/n7/8/4P3/8/PPPP1PPP/RNBQKBNR w KQkq - 1 2" move="Bxa6" animated={true} flipped turnVisible={false} />,
+    <Chessboard position="r3k2r/pppppppp/8/8/8/8/PPPPPPPP/R3K2R b KQkq - 0 1" move="O-O-O" animated={true} />,
+    <Chessboard position="rnbqkbnr/ppp1p1pp/8/3pPp2/8/8/PPPP1PPP/RNBQKBNR w KQkq f6 0 3" move="exf6" animated={true} />,
+    <Chessboard position="8/8/8/1K6/8/4k3/1p6/8 b - - 0 1" move="b1=R+" animated={true} turnVisible={false} />,
 ]); /* eslint-enable react/jsx-key */

package/test/graphic_test_app/06_chessboard_animation/on_redraw.tsx

@@ -28,24 +28,24 @@ import { Chessboard } from '../../../dist/lib/index';
 
 function TestComponent() {
 
-	const [ clicked, setClicked ] = React.useState(false);
-	const position = clicked ? 'rnbqkbnr/pppppppp/8/8/4P3/8/PPPP1PPP/RNBQKBNR b KQkq - 0 1' : 'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1';
-	const move = clicked ? 'Nf6' : 'e4';
-
-	function onClick() {
-		window['__kokopu_debug_freeze_motion'] = 0.6;
-		setClicked(true);
-	}
-
-	return (<>
-		<div>
-			<Chessboard position={position} move={move} animated={true} />
-		</div>
-		{clicked ? undefined : <button id="chessboard-action-button" onClick={onClick}>Click here</button>}
-	</>);
+    const [ clicked, setClicked ] = React.useState(false);
+    const position = clicked ? 'rnbqkbnr/pppppppp/8/8/4P3/8/PPPP1PPP/RNBQKBNR b KQkq - 0 1' : 'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1';
+    const move = clicked ? 'Nf6' : 'e4';
+
+    function onClick() {
+        window['__kokopu_debug_freeze_motion'] = 0.6;
+        setClicked(true);
+    }
+
+    return (<>
+        <div>
+            <Chessboard position={position} move={move} animated={true} />
+        </div>
+        {clicked ? undefined : <button id="chessboard-action-button" onClick={onClick}>Click here</button>}
+    </>);
 }
 
 
 testApp([ /* eslint-disable react/jsx-key */
-	<TestComponent />,
+    <TestComponent />,
 ]); /* eslint-enable react/jsx-key */

package/test/graphic_test_app/07_chessboard_interaction/click_squares.tsx

@@ -28,12 +28,12 @@ import { testApp, setSandbox } from '../common/test_app';
 import { Chessboard } from '../../../dist/lib/index';
 
 function onSquareClicked(sq: Square) {
-	setSandbox(`square clicked: ${sq}`);
+    setSandbox(`square clicked: ${sq}`);
 }
 
 testApp([ /* eslint-disable react/jsx-key */
-	<Chessboard squareSize={50} interactionMode="clickSquares" onSquareClicked={onSquareClicked} />,
-	<Chessboard squareSize={50} interactionMode="clickSquares" onSquareClicked={onSquareClicked} flipped coordinateVisible={false} />,
-	<Chessboard squareSize={50} interactionMode="clickSquares" onSquareClicked={onSquareClicked} position="empty"
-		squareMarkers="Ga8" arrowMarkers="Ra6d6" textMarkers="YAb4" />,
+    <Chessboard squareSize={50} interactionMode="clickSquares" onSquareClicked={onSquareClicked} />,
+    <Chessboard squareSize={50} interactionMode="clickSquares" onSquareClicked={onSquareClicked} flipped coordinateVisible={false} />,
+    <Chessboard squareSize={50} interactionMode="clickSquares" onSquareClicked={onSquareClicked} position="empty"
+        squareMarkers="Ga8" arrowMarkers="Ra6d6" textMarkers="YAb4" />,
 ]); /* eslint-enable react/jsx-key */

package/test/graphic_test_app/07_chessboard_interaction/edit_arrows.tsx

@@ -28,11 +28,11 @@ import { testApp, setSandbox } from '../common/test_app';
 import { Chessboard } from '../../../dist/lib/index';
 
 function onArrowEdited(from: Square, to: Square) {
-	setSandbox(`arrow edited: ${from} -> ${to}`);
+    setSandbox(`arrow edited: ${from} -> ${to}`);
 }
 
 testApp([ /* eslint-disable react/jsx-key */
-	<Chessboard squareSize={50} coordinateVisible={false} interactionMode="editArrows" onArrowEdited={onArrowEdited} editedArrowColor="g" />,
-	<Chessboard squareSize={50} coordinateVisible={false} interactionMode="editArrows" onArrowEdited={onArrowEdited} editedArrowColor="r" flipped
-		squareMarkers="Gc5" arrowMarkers="Yh3f6" />,
+    <Chessboard squareSize={50} coordinateVisible={false} interactionMode="editArrows" onArrowEdited={onArrowEdited} editedArrowColor="g" />,
+    <Chessboard squareSize={50} coordinateVisible={false} interactionMode="editArrows" onArrowEdited={onArrowEdited} editedArrowColor="r" flipped
+        squareMarkers="Gc5" arrowMarkers="Yh3f6" />,
 ]); /* eslint-enable react/jsx-key */

package/test/graphic_test_app/07_chessboard_interaction/error.tsx

@@ -27,6 +27,6 @@ import { testApp } from '../common/test_app';
 import { Chessboard } from '../../../dist/lib/index';
 
 testApp([ /* eslint-disable react/jsx-key */
-	<Chessboard interactionMode={ /* eslint-disable @typescript-eslint/no-explicit-any */ 'whatever' as any /* eslint-enable @typescript-eslint/no-explicit-any */ } />,
-	<Chessboard interactionMode="editArrows" />,
+    <Chessboard interactionMode={ /* eslint-disable @typescript-eslint/no-explicit-any */ 'whatever' as any /* eslint-enable @typescript-eslint/no-explicit-any */ } />,
+    <Chessboard interactionMode="editArrows" />,
 ]); /* eslint-enable react/jsx-key */

package/test/graphic_test_app/07_chessboard_interaction/move_pieces.tsx

@@ -28,12 +28,12 @@ import { testApp, setSandbox } from '../common/test_app';
 import { Chessboard } from '../../../dist/lib/index';
 
 function onPieceMoved(from: Square, to: Square) {
-	setSandbox(`piece moved: ${from} -> ${to}`);
+    setSandbox(`piece moved: ${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="BAh3" arrowMarkers="Gc8a4" moveArrowColor="r" />,
-	<Chessboard squareSize={50} coordinateVisible={false} interactionMode="movePieces" onPieceMoved={onPieceMoved} move="e4" animated={false} />,
+    <Chessboard squareSize={50} coordinateVisible={false} interactionMode="movePieces" onPieceMoved={onPieceMoved} />,
+    <Chessboard squareSize={50} coordinateVisible={false} interactionMode="movePieces" onPieceMoved={onPieceMoved} flipped
+        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/test/graphic_test_app/08_chessboard_play_moves/base.tsx

@@ -27,15 +27,15 @@ import { testApp, setSandbox } from '../common/test_app';
 import { Chessboard } from '../../../dist/lib/index';
 
 function onMovePlayed(move: string) {
-	setSandbox(`move played: ${move}`);
+    setSandbox(`move played: ${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} 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}
-		position="chess960:1r3k1r/pppppppp/8/8/8/8/PPPPPPPP/1R3K1R w BHbh - 0 1" />,
+    <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} 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}
+        position="chess960:1r3k1r/pppppppp/8/8/8/8/PPPPPPPP/1R3K1R w BHbh - 0 1" />,
 ]); /* eslint-enable react/jsx-key */

package/test/graphic_test_app/08_chessboard_play_moves/promotions.tsx

@@ -27,11 +27,11 @@ import { testApp, setSandbox } from '../common/test_app';
 import { Chessboard } from '../../../dist/lib/index';
 
 function onMovePlayed(move: string) {
-	setSandbox(`promotion move played: ${move}`);
+    setSandbox(`promotion move played: ${move}`);
 }
 
 testApp([ /* eslint-disable react/jsx-key */
-	<Chessboard squareSize={50} coordinateVisible={false} interactionMode="playMoves" onMovePlayed={onMovePlayed} position="8/1P6/8/8/7k/8/5K2/8 w - - 0 1" />,
-	<Chessboard squareSize={50} coordinateVisible={false} interactionMode="playMoves" onMovePlayed={onMovePlayed} position="8/8/8/8/7k/8/1p3K2/R7 b - - 0 1" />,
-	<Chessboard squareSize={50} coordinateVisible={false} interactionMode="playMoves" onMovePlayed={onMovePlayed} flipped position="antichess:8/1P6/8/8/7r/8/5K2/8 w - - 0 1" />,
+    <Chessboard squareSize={50} coordinateVisible={false} interactionMode="playMoves" onMovePlayed={onMovePlayed} position="8/1P6/8/8/7k/8/5K2/8 w - - 0 1" />,
+    <Chessboard squareSize={50} coordinateVisible={false} interactionMode="playMoves" onMovePlayed={onMovePlayed} position="8/8/8/8/7k/8/1p3K2/R7 b - - 0 1" />,
+    <Chessboard squareSize={50} coordinateVisible={false} interactionMode="playMoves" onMovePlayed={onMovePlayed} flipped position="antichess:8/1P6/8/8/7r/8/5K2/8 w - - 0 1" />,
 ]); /* eslint-enable react/jsx-key */

package/test/graphic_test_app/09_chessboard_small_screens/base.tsx

@@ -28,16 +28,16 @@ import { Chessboard } from '../../../dist/lib/index';
 
 // WARNING: avoid window width < 600 (the selenium-controlled window has some issues in this case).
 const limits = [
-	{ width: 690, squareSize: 16 },
-	{ width: 700, turnVisible: false },
-	{ width: 710, squareSize: 24, coordinateVisible: false },
-	{ width: 720, squareSize: 44 },
-	{ width: 730, squareSize: 48, coordinateVisible: true },
-	{ width: 740, squareSize: 24, coordinateVisible: false },
-	{ width: 750, squareSize: 32 },
+    { width: 690, squareSize: 16 },
+    { width: 700, turnVisible: false },
+    { width: 710, squareSize: 24, coordinateVisible: false },
+    { width: 720, squareSize: 44 },
+    { width: 730, squareSize: 48, coordinateVisible: true },
+    { width: 740, squareSize: 24, coordinateVisible: false },
+    { width: 750, squareSize: 32 },
 ];
 
 testApp([ /* eslint-disable react/jsx-key */
-	<Chessboard squareSize={50} smallScreenLimits={limits} />,
-	<Chessboard smallScreenLimits={ /* eslint-disable @typescript-eslint/no-explicit-any */ 42 as any /* eslint-enable @typescript-eslint/no-explicit-any */ } />,
+    <Chessboard squareSize={50} smallScreenLimits={limits} />,
+    <Chessboard smallScreenLimits={ /* eslint-disable @typescript-eslint/no-explicit-any */ 42 as any /* eslint-enable @typescript-eslint/no-explicit-any */ } />,
 ]); /* eslint-enable react/jsx-key */

package/test/graphic_test_app/09_chessboard_small_screens/top_bottom_components.tsx

@@ -0,0 +1,48 @@
+/*!
+ * -------------------------------------------------------------------------- *
+ *                                                                            *
+ *    Kokopu-React - A React-based library of chess-related components.       *
+ *    <https://www.npmjs.com/package/kokopu-react>                            *
+ *    Copyright (C) 2021-2024  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *                                                                            *
+ *    Kokopu-React is free software: you can redistribute it and/or           *
+ *    modify it under the terms of the GNU Lesser General Public License      *
+ *    as published by the Free Software Foundation, either version 3 of       *
+ *    the License, or (at your option) any later version.                     *
+ *                                                                            *
+ *    Kokopu-React is distributed in the hope that it will be useful,         *
+ *    but WITHOUT ANY WARRANTY; without even the implied warranty of          *
+ *    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the            *
+ *    GNU Lesser General Public License for more details.                     *
+ *                                                                            *
+ *    You should have received a copy of the GNU Lesser General               *
+ *    Public License along with this program. If not, see                     *
+ *    <http://www.gnu.org/licenses/>.                                         *
+ *                                                                            *
+ * -------------------------------------------------------------------------- */
+
+
+import * as React from 'react';
+import { testApp } from '../common/test_app';
+import { Chessboard, ChessboardProps } from '../../../dist/lib/index';
+
+const limits1 = [
+    { width: 750, squareSize: 24, coordinateVisible: false },
+];
+
+const limits2 = [
+    { width: 750, squareSize: 27, turnVisible: false },
+];
+
+function AuxilliaryComponent({ squareSize, coordinateVisible, turnVisible}: Pick<ChessboardProps, 'squareSize' | 'coordinateVisible' | 'turnVisible'>) {
+    return (<>
+        <div>{`Square size: ${squareSize}`}</div>
+        <div>{`Coordinates: ${coordinateVisible}`}</div>
+        <div>{`Turn: ${turnVisible}`}</div>
+    </>);
+}
+
+testApp([ /* eslint-disable react/jsx-key */
+    <Chessboard squareSize={30} smallScreenLimits={limits1} topComponent={AuxilliaryComponent} />,
+    <Chessboard squareSize={30} smallScreenLimits={limits2} bottomComponent={AuxilliaryComponent} />,
+]); /* eslint-enable react/jsx-key */

package/test/graphic_test_app/10_movetext_graphic/base.tsx

@@ -36,8 +36,8 @@ game.result('1-0');
 const database = pgnRead(pgn);
 
 testApp([ /* eslint-disable react/jsx-key */
-	<Movetext game={game} />,
-	<Movetext game={database} />,
-	<Movetext game={pgn} gameIndex={1} />,
-	<Movetext game={database} gameIndex={3} />,
+    <Movetext game={game} />,
+    <Movetext game={database} />,
+    <Movetext game={pgn} gameIndex={1} />,
+    <Movetext game={database} gameIndex={3} />,
 ], 'width-600'); /* eslint-enable react/jsx-key */

package/test/graphic_test_app/10_movetext_graphic/error.tsx

@@ -33,10 +33,10 @@ import dummyPgn from '../common/dummy.pgn';
 const database = pgnRead(pgn);
 
 testApp([ /* eslint-disable react/jsx-key */
-	<Movetext game={pgn} gameIndex={99} />,
-	<Movetext game={database} gameIndex={99} />,
-	<Movetext game={dummyPgn} />,
-	<Movetext game={pgnRead(dummyPgn)} gameIndex={1} />,
-	<Movetext game={ /* eslint-disable @typescript-eslint/no-explicit-any */ 42 as any /* eslint-enable @typescript-eslint/no-explicit-any */ } />,
-	<Movetext game={pgn} gameIndex={-1} />,
+    <Movetext game={pgn} gameIndex={99} />,
+    <Movetext game={database} gameIndex={99} />,
+    <Movetext game={dummyPgn} />,
+    <Movetext game={pgnRead(dummyPgn)} gameIndex={1} />,
+    <Movetext game={ /* eslint-disable @typescript-eslint/no-explicit-any */ 42 as any /* eslint-enable @typescript-eslint/no-explicit-any */ } />,
+    <Movetext game={pgn} gameIndex={-1} />,
 ], 'width-600'); /* eslint-enable react/jsx-key */

package/test/graphic_test_app/10_movetext_graphic/format_move.tsx

@@ -0,0 +1,31 @@
+/*!
+ * -------------------------------------------------------------------------- *
+ *                                                                            *
+ *    Kokopu-React - A React-based library of chess-related components.       *
+ *    <https://www.npmjs.com/package/kokopu-react>                            *
+ *    Copyright (C) 2021-2024  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *                                                                            *
+ *    Kokopu-React is free software: you can redistribute it and/or           *
+ *    modify it under the terms of the GNU Lesser General Public License      *
+ *    as published by the Free Software Foundation, either version 3 of       *
+ *    the License, or (at your option) any later version.                     *
+ *                                                                            *
+ *    Kokopu-React is distributed in the hope that it will be useful,         *
+ *    but WITHOUT ANY WARRANTY; without even the implied warranty of          *
+ *    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the            *
+ *    GNU Lesser General Public License for more details.                     *
+ *                                                                            *
+ *    You should have received a copy of the GNU Lesser General               *
+ *    Public License along with this program. If not, see                     *
+ *    <http://www.gnu.org/licenses/>.                                         *
+ *                                                                            *
+ * -------------------------------------------------------------------------- */
+
+
+import * as React from 'react';
+import { testApp } from '../common/test_app';
+import { formatMove } from '../../../dist/lib/index';
+
+testApp([ /* eslint-disable react/jsx-key */
+    <div>{formatMove('figurines', 'Figurines: KQRBNP')}</div>,
+], 'width-600'); /* eslint-enable react/jsx-key */

package/test/graphic_test_app/10_movetext_graphic/html.tsx

@@ -29,14 +29,14 @@ import { Movetext } from '../../../dist/lib/index';
 import pgn from '../common/games.pgn';
 
 testApp([ /* eslint-disable react/jsx-key */
-	<Movetext game={pgn} gameIndex={4} />,
-	<Movetext game={pgn} gameIndex={5} />,
-	<Movetext game={pgn} gameIndex={6} />,
+    <Movetext game={pgn} gameIndex={4} />,
+    <Movetext game={pgn} gameIndex={5} />,
+    <Movetext game={pgn} gameIndex={6} />,
 ], 'width-600'); /* eslint-enable react/jsx-key */
 
 const customCSS = document.createElement('style');
 customCSS.innerText = `
-	.myClass { font-weight: bold; color: green; }
-	#myId { font-weight: bold; color: red; }
+    .myClass { font-weight: bold; color: green; }
+    #myId { font-weight: bold; color: red; }
 `;
 document.head.appendChild(customCSS);

package/test/graphic_test_app/10_movetext_graphic/options.tsx

@@ -32,13 +32,14 @@ import pgn from '../common/games.pgn';
 i18n.PIECE_SYMBOLS = { K: 'R', Q: 'D', R: 'T', B: 'F', N: 'C', P: 'P' };
 
 testApp([ /* eslint-disable react/jsx-key */
-	<Movetext game={pgn} pieceSymbols="localized" />,
-	<Movetext game={pgn} gameIndex={2} pieceSymbols={{ K: 'Ki_', Q: 'Qu_', R: 'Rk_', B: 'Bi_', N: 'Kn_', P: 'Pw_' }} />,
-	<Movetext game={pgn} gameIndex={3} pieceSymbols="figurines" headerVisible={false}
-		diagramOptions={{ flipped: true, coordinateVisible: false, squareSize: 32, colorset: 'scid', pieceset: 'eyes' }} />,
-	<Movetext game={pgn} gameIndex={3} diagramOptions={{ turnVisible: false, squareSize: 32 }} />,
-	<Movetext game={pgn} gameIndex={9} diagramVisible={false} />,
-	<Movetext game={pgn} gameIndex={3} diagramOptions={ /* eslint-disable @typescript-eslint/no-explicit-any */ null as any /* eslint-enable @typescript-eslint/no-explicit-any */ } />,
-	<Movetext game={pgn} gameIndex={3}
-		diagramOptions={ /* eslint-disable @typescript-eslint/no-explicit-any */ { squareSize: '32' }  as any /* eslint-enable @typescript-eslint/no-explicit-any */ } />,
+    <Movetext game={pgn} pieceSymbols="localized" />,
+    <Movetext game={pgn} gameIndex={2} pieceSymbols={{ K: 'Ki_', Q: 'Qu_', R: 'Rk_', B: 'Bi_', N: 'Kn_', P: 'Pw_' }} />,
+    <Movetext game={pgn} gameIndex={3} pieceSymbols="figurines" headerVisible={false}
+        diagramOptions={{ flipped: true, coordinateVisible: false, squareSize: 32, colorset: 'scid', pieceset: 'eyes' }} />,
+    <Movetext game={pgn} gameIndex={3} diagramOptions={{ turnVisible: false, squareSize: 32 }} />,
+    <Movetext game={pgn} gameIndex={9} diagramVisible={false} />,
+    <Movetext game={pgn} gameIndex={3} diagramOptions={ /* eslint-disable @typescript-eslint/no-explicit-any */ null as any /* eslint-enable @typescript-eslint/no-explicit-any */ } />,
+    <Movetext game={pgn} gameIndex={3}
+        diagramOptions={ /* eslint-disable @typescript-eslint/no-explicit-any */ { squareSize: '32' }  as any /* eslint-enable @typescript-eslint/no-explicit-any */ } />,
+    <Movetext game={pgn} pieceSymbols={ /* eslint-disable @typescript-eslint/no-explicit-any */ 'invalid' as any /* eslint-enable @typescript-eslint/no-explicit-any */ } />
 ], 'width-600'); /* eslint-enable react/jsx-key */

package/test/graphic_test_app/11_movetext_interaction/error.tsx

@@ -29,5 +29,5 @@ import { Movetext } from '../../../dist/lib/index';
 import pgn from '../common/games.pgn';
 
 testApp([ /* eslint-disable react/jsx-key */
-	<Movetext game={pgn} gameIndex={7} interactionMode={ /* eslint-disable @typescript-eslint/no-explicit-any */ 'whatever' as any /* eslint-enable @typescript-eslint/no-explicit-any */ } />,
+    <Movetext game={pgn} gameIndex={7} interactionMode={ /* eslint-disable @typescript-eslint/no-explicit-any */ 'whatever' as any /* eslint-enable @typescript-eslint/no-explicit-any */ } />,
 ], 'width-600'); /* eslint-enable react/jsx-key */

package/test/graphic_test_app/11_movetext_interaction/select_moves.tsx

@@ -29,17 +29,18 @@ import { Movetext } from '../../../dist/lib/index';
 import pgn from '../common/games.pgn';
 
 function onMoveSelected(nodeId: string | undefined, evtOrigin: string) {
-	setSandbox(`move selected: ${nodeId}\norigin: ${evtOrigin}`);
+    setSandbox(`move selected: ${nodeId}\norigin: ${evtOrigin}`);
 }
 
 testApp([ /* eslint-disable react/jsx-key */
-	<Movetext game={pgn} gameIndex={7} headerVisible={false} onMoveSelected={onMoveSelected} selection="4w" />,
-	<Movetext game={pgn} gameIndex={7} headerVisible={false} onMoveSelected={onMoveSelected} interactionMode="selectMove" />,
-	<Movetext game={pgn} gameIndex={8} headerVisible={false} onMoveSelected={onMoveSelected} interactionMode="selectMove" selection="1b-v0-3w-v0-3w" />,
-	<Movetext game={pgn} gameIndex={8} headerVisible={false} onMoveSelected={onMoveSelected} interactionMode="selectMove" selection="1b-v0-2b" />,
-	<Movetext game={pgn} gameIndex={7} headerVisible={false} onMoveSelected={onMoveSelected} interactionMode="selectMove" selection="start" />,
-	<Movetext game={pgn} gameIndex={7} headerVisible={false} onMoveSelected={onMoveSelected} interactionMode="selectMove" selection="1w" />,
-	<Movetext game={pgn} gameIndex={7} headerVisible={false} onMoveSelected={onMoveSelected} interactionMode="selectMove" selection="6b" />,
-	<Movetext game={pgn} gameIndex={7} headerVisible={false} onMoveSelected={onMoveSelected} interactionMode="selectMove" selection="invalid-id" />,
-	<Movetext game={pgn} gameIndex={8} headerVisible={false} onMoveSelected={onMoveSelected} interactionMode="selectMove" selection="1b-v0-start" />,
+    <Movetext game={pgn} gameIndex={7} headerVisible={false} onMoveSelected={onMoveSelected} selection="4w" />,
+    <Movetext game={pgn} gameIndex={7} headerVisible={false} onMoveSelected={onMoveSelected} interactionMode="selectMove" />,
+    <Movetext game={pgn} gameIndex={7} headerVisible={false} interactionMode="selectMove" />,
+    <Movetext game={pgn} gameIndex={8} headerVisible={false} onMoveSelected={onMoveSelected} interactionMode="selectMove" selection="1b-v0-3w-v0-3w" />,
+    <Movetext game={pgn} gameIndex={8} headerVisible={false} onMoveSelected={onMoveSelected} interactionMode="selectMove" selection="1b-v0-2b" />,
+    <Movetext game={pgn} gameIndex={7} headerVisible={false} onMoveSelected={onMoveSelected} interactionMode="selectMove" selection="start" />,
+    <Movetext game={pgn} gameIndex={7} headerVisible={false} onMoveSelected={onMoveSelected} interactionMode="selectMove" selection="1w" />,
+    <Movetext game={pgn} gameIndex={7} headerVisible={false} onMoveSelected={onMoveSelected} interactionMode="selectMove" selection="6b" />,
+    <Movetext game={pgn} gameIndex={7} headerVisible={false} onMoveSelected={onMoveSelected} interactionMode="selectMove" selection="invalid-id" />,
+    <Movetext game={pgn} gameIndex={8} headerVisible={false} onMoveSelected={onMoveSelected} interactionMode="selectMove" selection="1b-v0-start" />,
 ], 'width-600'); /* eslint-enable react/jsx-key */