kokopu-react 3.3.0 → 3.3.1

package/test/graphic_test_app/04_icons_graphic/marker.tsx

@@ -31,19 +31,29 @@ testApp([ /* eslint-disable react/jsx-key */
     <SquareMarkerIcon size={40} />,
     <SquareMarkerIcon size={45} color="green" />,
     <div style={{ color: 'purple' }}><SquareMarkerIcon size={31} /></div>,
-    <SquareMarkerIcon size={ /* eslint-disable @typescript-eslint/no-explicit-any */ 'not-a-number' as any /* eslint-enable @typescript-eslint/no-explicit-any */ } />,
+    <SquareMarkerIcon
+        size={/* eslint-disable @typescript-eslint/no-explicit-any */ 'not-a-number' as any /* eslint-enable @typescript-eslint/no-explicit-any */}
+    />,
 
     <TextMarkerIcon size={41} symbol="A" />,
     <TextMarkerIcon size={29} symbol="b" color="#0ff" />,
     <div style={{ color: 'red' }}><TextMarkerIcon size={53} symbol="5" /></div>,
     <TextMarkerIcon size={47} symbol="dot" color="#00f" />,
     <div style={{ color: 'pink' }}><TextMarkerIcon size={48} symbol="circle" /></div>,
-    <TextMarkerIcon size={ /* eslint-disable @typescript-eslint/no-explicit-any */ 'not-a-number' as any /* eslint-enable @typescript-eslint/no-explicit-any */ } symbol="A" />,
-    <TextMarkerIcon size={40} symbol={ /* eslint-disable @typescript-eslint/no-explicit-any */ 'not-a-symbol' as any /* eslint-enable @typescript-eslint/no-explicit-any */ } />,
+    <TextMarkerIcon
+        size={/* eslint-disable @typescript-eslint/no-explicit-any */ 'not-a-number' as any /* eslint-enable @typescript-eslint/no-explicit-any */}
+        symbol="A"
+    />,
+    <TextMarkerIcon
+        size={40}
+        symbol={/* eslint-disable @typescript-eslint/no-explicit-any */ 'not-a-symbol' as any /* eslint-enable @typescript-eslint/no-explicit-any */}
+    />,
 
     <ArrowMarkerIcon size={40} />,
     <ArrowMarkerIcon size={24} color="#888" />,
     <div style={{ color: '#f70' }}><ArrowMarkerIcon size={48} /></div>,
-    <ArrowMarkerIcon size={ /* eslint-disable @typescript-eslint/no-explicit-any */ 'not-a-number' as any /* eslint-enable @typescript-eslint/no-explicit-any */ } />,
+    <ArrowMarkerIcon
+        size={/* eslint-disable @typescript-eslint/no-explicit-any */ 'not-a-number' as any /* eslint-enable @typescript-eslint/no-explicit-any */}
+    />,
 
 ]); /* eslint-enable react/jsx-key */

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

@@ -52,7 +52,11 @@ testApp([ /* eslint-disable react/jsx-key */
     <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={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

@@ -33,5 +33,5 @@ testApp([ /* eslint-disable react/jsx-key */
     <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 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/move.tsx

@@ -39,8 +39,15 @@ testApp([ /* eslint-disable react/jsx-key */
     <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={/* 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

@@ -45,7 +45,7 @@ testApp([ /* eslint-disable react/jsx-key */
     <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 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/on_redraw.tsx

@@ -37,12 +37,14 @@ function TestComponent() {
         setClicked(true);
     }
 
-    return (<>
-        <div>
-            <Chessboard position={position} move={move} animated={true} />
-        </div>
-        {clicked ? undefined : <button id="chessboard-action-button" onClick={onClick}>Click here</button>}
-    </>);
+    return (
+        <>
+            <div>
+                <Chessboard position={position} move={move} animated={true} />
+            </div>
+            {clicked ? undefined : <button id="chessboard-action-button" onClick={onClick}>Click here</button>}
+        </>
+    );
 }
 
 

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

@@ -34,6 +34,8 @@ function onSquareClicked(sq: Square) {
 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} position="empty"
+        squareMarkers="Ga8" arrowMarkers="Ra6d6" textMarkers="YAb4"
+    />,
 ]); /* eslint-enable react/jsx-key */

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

@@ -33,6 +33,8 @@ function onArrowEdited(from: Square, to: Square) {
 
 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="r" flipped
+        squareMarkers="Gc5" arrowMarkers="Yh3f6"
+    />,
 ]); /* eslint-enable react/jsx-key */

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

@@ -27,6 +27,8 @@ 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={/* 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

@@ -33,7 +33,9 @@ function onPieceMoved(from: Square, to: Square) {
 
 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} 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

@@ -32,10 +32,16 @@ function onMovePlayed(move: string) {
 
 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}
+        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

@@ -31,7 +31,16 @@ function onMovePlayed(move: string) {
 }
 
 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

@@ -39,5 +39,7 @@ const limits = [
 
 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
+        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

@@ -34,12 +34,14 @@ 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>
-    </>);
+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 */

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

@@ -37,6 +37,6 @@ testApp([ /* eslint-disable react/jsx-key */
     <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={/* 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/options.tsx

@@ -34,12 +34,22 @@ 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} 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 */ } />
+    <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,8 @@ 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/13_navigation_board_graphic/additional_buttons.tsx

@@ -30,20 +30,27 @@ import pgn from '../common/games.pgn';
 
 testApp([ /* eslint-disable react/jsx-key */
     <NavigationBoard game={pgn} additionalButtons={[ { iconPath: 'M 11 11 H 21 V 21 H 11 Z' } ]} />,
-    <NavigationBoard game={pgn} additionalButtons={[
-        { iconPath: 'M 11 11 H 21 V 21 H 11 Z', tooltip: 'Button 0', enabled: true },
-        { iconPath: 'M 9 16 L 16 9 L 23 16 L 16 23 Z', tooltip: 'Button A', onClick: () => setSandbox('Button A clicked') },
-        'spacer',
-        { iconPath: 'M 16 22 L 10 11 H 22 Z', tooltip: 'Button B', onClick: () => setSandbox('Button B clicked') },
-        'spacer',
-        'spacer',
-        { iconPath: 'M 16 10 L 22 21 H 10 Z', tooltip: 'Button C', enabled: false, onClick: () => setSandbox('Button C clicked') },
-    ]} />,
-    <NavigationBoard game={pgn} additionalButtons={
-        /* eslint-disable @typescript-eslint/no-explicit-any */ 'not a button nor a spacer' as any /* eslint-enable @typescript-eslint/no-explicit-any */
-    } />,
-    <NavigationBoard game={pgn} additionalButtons={[
-        { iconPath: 'M 11 11 H 21 V 21 H 11 Z' },
-        /* eslint-disable @typescript-eslint/no-explicit-any */ 'not a button nor a spacer' as any /* eslint-enable @typescript-eslint/no-explicit-any */,
-    ]} />,
+    <NavigationBoard
+        game={pgn}
+        additionalButtons={[
+            { iconPath: 'M 11 11 H 21 V 21 H 11 Z', tooltip: 'Button 0', enabled: true },
+            { iconPath: 'M 9 16 L 16 9 L 23 16 L 16 23 Z', tooltip: 'Button A', onClick: () => setSandbox('Button A clicked') },
+            'spacer',
+            { iconPath: 'M 16 22 L 10 11 H 22 Z', tooltip: 'Button B', onClick: () => setSandbox('Button B clicked') },
+            'spacer',
+            'spacer',
+            { iconPath: 'M 16 10 L 22 21 H 10 Z', tooltip: 'Button C', enabled: false, onClick: () => setSandbox('Button C clicked') },
+        ]}
+    />,
+    <NavigationBoard
+        game={pgn}
+        additionalButtons={/* eslint-disable @typescript-eslint/no-explicit-any */ 'not a button nor a spacer' as any /* eslint-enable @typescript-eslint/no-explicit-any */}
+    />,
+    <NavigationBoard
+        game={pgn}
+        additionalButtons={[
+            { iconPath: 'M 11 11 H 21 V 21 H 11 Z' },
+            /* eslint-disable @typescript-eslint/no-explicit-any */ 'not a button nor a spacer' as any /* eslint-enable @typescript-eslint/no-explicit-any */,
+        ]}
+    />,
 ]); /* eslint-enable react/jsx-key */

package/test/graphic_test_app/13_navigation_board_graphic/error.tsx

@@ -30,5 +30,5 @@ import dummyPgn from '../common/dummy.pgn';
 
 testApp([ /* eslint-disable react/jsx-key */
     <NavigationBoard game={dummyPgn} />,
-    <NavigationBoard game={ /* eslint-disable @typescript-eslint/no-explicit-any */ 42 as any /* eslint-enable @typescript-eslint/no-explicit-any */ } />,
+    <NavigationBoard game={/* eslint-disable @typescript-eslint/no-explicit-any */ 42 as any /* eslint-enable @typescript-eslint/no-explicit-any */} />,
 ], 'width-600'); /* eslint-enable react/jsx-key */

package/test/graphic_test_app/14_navigation_board_autoplay/controlled.tsx

@@ -33,41 +33,57 @@ const HISTORY_1: string[] = [];
 const HISTORY_2: string[] = [];
 
 interface NavigationBoardWithNodeIdControllerProps {
-    initialNodeId: string;
-    sandboxHistory: string[];
+    initialNodeId: string,
+    sandboxHistory: string[],
 }
 
 function NavigationBoardWithNodeIdController({ initialNodeId, sandboxHistory }: NavigationBoardWithNodeIdControllerProps) {
 
     const [ nodeId, setNodeId ] = React.useState(initialNodeId);
 
-    return <NavigationBoard game={pgn} playButtonVisible nodeId={nodeId} onNodeIdChanged={newNodeId => {
-        sandboxHistory.push(`Node ID changed: ${newNodeId}`);
-        setSandbox(sandboxHistory.join('\n'));
-        setNodeId(newNodeId);
-    }} />;
+    return (
+        <NavigationBoard
+            game={pgn} playButtonVisible nodeId={nodeId}
+            onNodeIdChanged={newNodeId => {
+                sandboxHistory.push(`Node ID changed: ${newNodeId}`);
+                setSandbox(sandboxHistory.join('\n'));
+                setNodeId(newNodeId);
+            }}
+        />
+    );
 }
 
 function NavigationBoardWithIsPlayingController() {
 
     const [ isPlaying, setIsPlaying ] = React.useState(false);
 
-    return <NavigationBoard game={pgn} playButtonVisible initialNodeId="5b" isPlaying={isPlaying} onIsPlayingChanged={newIsPlaying => {
-        setSandbox(`is-playing flag changed: ${newIsPlaying}`);
-        setIsPlaying(newIsPlaying);
-    }} />;
+    return (
+        <NavigationBoard
+            game={pgn} playButtonVisible initialNodeId="5b" isPlaying={isPlaying}
+            onIsPlayingChanged={newIsPlaying => {
+                setSandbox(`is-playing flag changed: ${newIsPlaying}`);
+                setIsPlaying(newIsPlaying);
+            }}
+        />
+    );
 }
 
 testApp([ /* eslint-disable react/jsx-key */
-    <NavigationBoard game={pgn} playButtonVisible nodeId="3w" onNodeIdChanged={nodeId => {
-        HISTORY_0.push(`Node ID changed: ${nodeId}`);
-        setSandbox(HISTORY_0.join('\n'));
-    }} />,
+    <NavigationBoard
+        game={pgn} playButtonVisible nodeId="3w"
+        onNodeIdChanged={nodeId => {
+            HISTORY_0.push(`Node ID changed: ${nodeId}`);
+            setSandbox(HISTORY_0.join('\n'));
+        }}
+    />,
     <NavigationBoardWithNodeIdController initialNodeId="3w" sandboxHistory={HISTORY_1} />,
     <NavigationBoardWithNodeIdController initialNodeId="20w" sandboxHistory={HISTORY_2} />,
-    <NavigationBoard game={pgn} playButtonVisible initialNodeId="5b" isPlaying={false} onIsPlayingChanged={isPlaying => {
-        setSandbox(`is-playing flag changed: ${isPlaying}`);
-    }} />,
+    <NavigationBoard
+        game={pgn} playButtonVisible initialNodeId="5b" isPlaying={false}
+        onIsPlayingChanged={isPlaying => {
+            setSandbox(`is-playing flag changed: ${isPlaying}`);
+        }}
+    />,
     <NavigationBoardWithIsPlayingController />,
     <NavigationBoard game={pgn} playButtonVisible initialNodeId="20b" isPlaying={true} />,
 ]); /* eslint-enable react/jsx-key */

package/test/graphic_test_app/common/test_app.tsx

@@ -31,19 +31,19 @@ import './test_app.css';
 // This global variable allows to freeze animations in an intermediate stage.
 declare global {
     interface Window {
-        '__kokopu_debug_freeze_motion': number;
+        __kokopu_debug_freeze_motion: number,
     }
 }
 
 
 interface TestItemContainerProps {
-    index: number;
-    children: React.ReactNode;
+    index: number,
+    children: React.ReactNode,
 }
 
 
 interface TestItemContainerState {
-    hasError: boolean;
+    hasError: boolean,
 }
 
 

package/.eslintrc.yml

@@ -1,83 +0,0 @@
-env:
-  browser: true
-  es2020: true
-
-plugins:
-  - '@typescript-eslint'
-  - react
-
-settings:
-  react:
-    version: 18.2.0
-
-extends:
-  - 'eslint:recommended'
-  - 'plugin:@typescript-eslint/recommended'
-  - 'plugin:react/recommended'
-
-parser: '@typescript-eslint/parser'
-
-parserOptions:
-  sourceType: module
-
-rules:
-
-  # Style
-  indent:             [ error, 4, { SwitchCase: 1 }]
-  linebreak-style:    [ error, unix ]
-  quotes:             [ error, single ]
-  semi:               [ error, always ]
-  camelcase:          [ error ]
-  no-trailing-spaces: [ error ]
-
-  # Additional rules (possible errors)
-  no-console: [ error ]
-
-  # Additional rules (best practices)
-  curly:                        [ error, all ]
-  eqeqeq:                       [ error, always ]
-  no-alert:                     [ error ]
-  no-confusing-arrow:           [ error ]
-  no-constructor-return:        [ error ]
-  no-duplicate-imports:         [ error ]
-  no-eval:                      [ error ]
-  no-extend-native:             [ error ]
-  no-floating-decimal:          [ error ]
-  no-implicit-coercion:         [ error ]
-  no-implied-eval:              [ error ]
-  no-invalid-this:              [ error ]
-  no-labels:                    [ error ]
-  no-lone-blocks:               [ error ]
-  no-loop-func:                 [ error ]
-  no-new:                       [ error ]
-  no-new-func:                  [ error ]
-  no-new-wrappers:              [ error ]
-  no-octal-escape:              [ error ]
-  no-return-assign:             [ error, always ]
-  no-script-url:                [ error ]
-  no-self-compare:              [ error ]
-  no-throw-literal:             [ error ]
-  no-unmodified-loop-condition: [ error ]
-  no-unused-expressions:        [ error ]
-  no-useless-computed-key:      [ error ]
-  no-useless-concat:            [ error ]
-  no-useless-rename:            [ error ]
-  no-useless-return:            [ error ]
-  no-var:                       [ error ]
-  no-warning-comments:          [ warn, { location: anywhere, terms: [ TODO ] }]
-  prefer-arrow-callback:        [ error ]
-  prefer-const:                 [ error ]
-  prefer-regex-literals:        [ error ]
-  prefer-rest-params:           [ error ]
-  rest-spread-spacing:          [ error ]
-
-  # Additional rules (typescript)
-  '@typescript-eslint/no-shadow': [ error, { builtinGlobals: true }]
-
-  # Relaxed rules
-  no-constant-condition: [ error, { checkLoops: false }]
-
-  # Relaxed rules (typescript)
-  '@typescript-eslint/no-non-null-assertion': [ off ]
-  '@typescript-eslint/no-namespace':          [ off ]
-  '@typescript-eslint/no-empty-function':     [ error, { allow: [ private-constructors, protected-constructors ] }]

package/test/.eslintrc.yml

@@ -1,8 +0,0 @@
-env:
-  node: true
-  mocha: true
-
-rules:
-  '@typescript-eslint/no-shadow':       [ error, { builtinGlobals: true, allow: [ test ] }]
-  '@typescript-eslint/no-var-requires': [ off ]
-  no-invalid-this:                      [ off ] # the rule is incompatible with the use of Mocha contexts

package/test/graphic_test_app/.eslintrc.yml

@@ -1,3 +0,0 @@
-env:
-  node: false
-  mocha: false