kokopu-react 2.1.0 → 3.0.0

package/test/02_chessboard_util.js

@@ -24,52 +24,106 @@ const { exception, Chessboard } = require('../build/test_headless/index');
 const test = require('unit.js');
 
 
-function testAdaptSquareSize(expectedSquareSize, width, height, coordinateVisible, smallScreenLimits) {
-	test.value(Chessboard.adaptSquareSize(width, height, coordinateVisible, smallScreenLimits)).is(expectedSquareSize);
+function itInvalidArgument(label, action) {
+	it(label, () => { test.exception(action).isInstanceOf(exception.IllegalArgument); });
+}
+
+
+describe('Chessboard.size()', () => {
+
+	function itChessboardSize(label, expectedWidth, expectedHeight, attr) {
+		it(label, () => {
+			test.value(Chessboard.size(attr)).is({ width: expectedWidth, height: expectedHeight });
+		});
+	}
+
+	itChessboardSize('Default', 374, 333);
+	itChessboardSize('Square size 50', 467, 416, { squareSize: 50 });
+	itChessboardSize('Default without coordinates', 364, 320, { coordinateVisible: false });
+	itChessboardSize('Default without turn', 330, 333, { turnVisible: false });
+	itChessboardSize('Default board only', 320, 320, { coordinateVisible: false, turnVisible: false });
+
+	itInvalidArgument('Attribute not an object', () => Chessboard.size('not-an-object'));
+	itInvalidArgument('Square size not an integer', () => Chessboard.size({ squareSize: 'not-an-integer' }));
+	itInvalidArgument('Small-screen limits not an array', () => Chessboard.size({ smallScreenLimits: 'not-an-array' }));
+	itInvalidArgument('Small-screen limit undefined', () => Chessboard.size({ smallScreenLimits: [ undefined ] }));
+	itInvalidArgument('Small-screen limit null', () => Chessboard.size({ smallScreenLimits: [ null ] }));
+	itInvalidArgument('Small-screen limit not-an-object', () => Chessboard.size({ smallScreenLimits: [ 'not-an-object' ] }));
+});
 
-	const actualSize = Chessboard.size(expectedSquareSize, coordinateVisible, smallScreenLimits);
+
+function testAdaptSquareSize(expectedSquareSize, width, height, coordinateVisible, turnVisible, smallScreenLimits) {
+
+	test.value(Chessboard.adaptSquareSize(width, height, {
+		coordinateVisible: coordinateVisible,
+		turnVisible: turnVisible,
+		smallScreenLimits: smallScreenLimits,
+	})).is(expectedSquareSize);
+
+	const actualSize = Chessboard.size({
+		squareSize: expectedSquareSize,
+		coordinateVisible: coordinateVisible,
+		turnVisible: turnVisible,
+		smallScreenLimits: smallScreenLimits,
+	});
 	test.value(actualSize.width <= width && actualSize.height <= height).isTrue();
 }
 
-function testAdaptSquareSizeWithIncrement(expectedSquareSize, width, height, coordinateVisible, smallScreenLimits) {
-	testAdaptSquareSize(expectedSquareSize, width, height, coordinateVisible, smallScreenLimits);
 
-	const actualSizeIncremented = Chessboard.size(expectedSquareSize + 1, coordinateVisible, smallScreenLimits);
+function testAdaptSquareSizeWithIncrement(expectedSquareSize, width, height, coordinateVisible, turnVisible, smallScreenLimits) {
+	testAdaptSquareSize(expectedSquareSize, width, height, coordinateVisible, turnVisible, smallScreenLimits);
+
+	const actualSizeIncremented = Chessboard.size({
+		squareSize: expectedSquareSize + 1,
+		coordinateVisible: coordinateVisible,
+		turnVisible: turnVisible,
+		smallScreenLimits: smallScreenLimits,
+	});
 	test.value(actualSizeIncremented.width > width || actualSizeIncremented.height > height).isTrue();
 }
 
-describe('Adapt square-size', () => {
-
-	it('Very small', () => { test.value(Chessboard.adaptSquareSize(10, 10, false)).is(Chessboard.minSquareSize()); });
-	it('Very large', () => { test.value(Chessboard.adaptSquareSize(9999, 9999, true)).is(Chessboard.maxSquareSize()); });
 
-	it('Size 185x300 with coordinates', () => testAdaptSquareSizeWithIncrement(19, 185, 300, true));
-	it('Size 185x300 without coordinates', () => testAdaptSquareSizeWithIncrement(20, 185, 300, false));
-	it('Size 300x200 with coordinates', () => testAdaptSquareSizeWithIncrement(23, 300, 200, true));
-	it('Size 300x200 without coordinates', () => testAdaptSquareSizeWithIncrement(25, 300, 200, false));
-	it('Size 375x500 with coordinates', () => testAdaptSquareSizeWithIncrement(40, 375, 500, true));
-	it('Size 375x500 without coordinates', () => testAdaptSquareSizeWithIncrement(41, 375, 500, false));
-	it('Size 600x450 with coordinates', () => testAdaptSquareSizeWithIncrement(54, 600, 450, true));
-	it('Size 600x450 without coordinates', () => testAdaptSquareSizeWithIncrement(56, 600, 450, false));
-
-	function itInvalidArgument(label, action) {
-		it(label, () => { test.exception(action).isInstanceOf(exception.IllegalArgument); });
-	}
+describe('Adapt square-size', () => {
 
-	itInvalidArgument('Width <null>', () => Chessboard.adaptSquareSize(null, 400, true));
-	itInvalidArgument('Width not-a-number', () => Chessboard.adaptSquareSize('500', 400, false));
-	itInvalidArgument('Height <undefined>', () => Chessboard.adaptSquareSize(500, undefined, false));
-	itInvalidArgument('Height object', () => Chessboard.adaptSquareSize(500, {}, true));
+	it('Very small', () => { test.value(Chessboard.adaptSquareSize(10, 10, { coordinateVisible: false, turnVisible: false })).is(Chessboard.minSquareSize()); });
+	it('Very large', () => { test.value(Chessboard.adaptSquareSize(9999, 9999)).is(Chessboard.maxSquareSize()); });
+
+	it('Size 185x300 with coordinates & turn', () => testAdaptSquareSizeWithIncrement(19, 185, 300, true, true));
+	it('Size 185x300 without coordinates', () => testAdaptSquareSizeWithIncrement(20, 185, 300, false, true));
+	it('Size 185x300 without turn', () => testAdaptSquareSizeWithIncrement(22, 185, 300, true, false));
+	it('Size 185x300 board only', () => testAdaptSquareSizeWithIncrement(23, 185, 300, false, false));
+
+	it('Size 300x200 with coordinates & turn', () => testAdaptSquareSizeWithIncrement(23, 300, 200, true, true));
+	it('Size 300x200 without coordinates', () => testAdaptSquareSizeWithIncrement(25, 300, 200, false, true));
+	it('Size 300x200 without turn', () => testAdaptSquareSizeWithIncrement(23, 300, 200, true, false));
+	it('Size 300x200 board only', () => testAdaptSquareSizeWithIncrement(25, 300, 200, false, false));
+
+	it('Size 375x500 with coordinates & turn', () => testAdaptSquareSizeWithIncrement(40, 375, 500, true, true));
+	it('Size 375x500 without coordinates', () => testAdaptSquareSizeWithIncrement(41, 375, 500, false, true));
+	it('Size 375x500 without turn', () => testAdaptSquareSizeWithIncrement(45, 375, 500, true, false));
+	it('Size 375x500 board only', () => testAdaptSquareSizeWithIncrement(46, 375, 500, false, false));
+
+	it('Size 600x450 with coordinates & turn', () => testAdaptSquareSizeWithIncrement(54, 600, 450, true, true));
+	it('Size 600x450 without coordinates', () => testAdaptSquareSizeWithIncrement(56, 600, 450, false, true));
+	it('Size 600x450 without turn', () => testAdaptSquareSizeWithIncrement(54, 600, 450, true, false));
+	it('Size 600x450 board only', () => testAdaptSquareSizeWithIncrement(56, 600, 450, false, false));
+
+	itInvalidArgument('Width <null>', () => Chessboard.adaptSquareSize(null, 400));
+	itInvalidArgument('Width not-a-number', () => Chessboard.adaptSquareSize('500', 400));
+	itInvalidArgument('Height <undefined>', () => Chessboard.adaptSquareSize(500, undefined));
+	itInvalidArgument('Height object', () => Chessboard.adaptSquareSize(500, {}));
+	itInvalidArgument('Attribute not-an-object', () => Chessboard.adaptSquareSize(500, 400, 'not-an-object'));
+	itInvalidArgument('Small-screen limits not-an-array', () => Chessboard.adaptSquareSize(500, 400, { smallScreenLimits: 'not-an-array' }));
 });
 
+
 describe('Adapt square-size with small-screen limits', () => {
 
 	const limits = [
-		{ width: 470, squareSize: 12, coordinateVisible: false },
-		{ width: 540, squareSize: 16, coordinateVisible: false },
-		{ width: 620, squareSize: 24, coordinateVisible: false },
+		{ width: 540, squareSize: 24, turnVisible: false },
+		{ width: 620, squareSize: 28, coordinateVisible: false },
 		{ width: 730, squareSize: 32 },
-		{ width: 860, squareSize: 44 },
+		{ width: 860, squareSize: 48 },
 	];
 
 	before(() => {
@@ -81,18 +135,32 @@ describe('Adapt square-size with small-screen limits', () => {
 
 	it('Window-limited', () => {
 		window.innerWidth = 640;
-		testAdaptSquareSize(32, 9999, 9999, true, limits);
+		testAdaptSquareSize(32, 9999, 9999, true, true, limits);
 	});
-	it('Available-space-limited 1', () => {
+
+	it('Available-space-limited with coordinates & turn', () => {
 		window.innerWidth = 800;
-		testAdaptSquareSize(40, 375, 500, true, limits);
+		testAdaptSquareSize(40, 375, 500, true, true, limits);
 	});
-	it('Available-space-limited 2', () => {
+	it('Available-space-limited without coordinates', () => {
 		window.innerWidth = 800;
-		testAdaptSquareSize(41, 375, 500, false, limits);
+		testAdaptSquareSize(41, 375, 500, false, true, limits);
 	});
+	it('Available-space-limited without turn', () => {
+		window.innerWidth = 800;
+		testAdaptSquareSize(45, 375, 500, true, false, limits);
+	});
+	it('Available-space-limited board only', () => {
+		window.innerWidth = 800;
+		testAdaptSquareSize(46, 375, 500, false, false, limits);
+	});
+
 	it('Force hidden coordinates', () => {
 		window.innerWidth = 600;
-		testAdaptSquareSize(20, 185, 300, true, limits);
+		testAdaptSquareSize(20, 185, 300, true, true, limits);
+	});
+	it('Force hidden coordinates & turn', () => {
+		window.innerWidth = 500;
+		testAdaptSquareSize(23, 185, 300, true, true, limits);
 	});
 });

package/test/{04_marker_icons_graphic.js → 04_icons_graphic.js}

@@ -23,9 +23,9 @@
 const { describeWithBrowser, itChecksScreenshots } = require('./common/graphic');
 
 
-describeWithBrowser('Marker icons graphic', browserContext => {
+describeWithBrowser('Icons graphic', browserContext => {
 
-	itChecksScreenshots(browserContext, '04_marker_icons_graphic/base', [
+	itChecksScreenshots(browserContext, '04_icons_graphic/marker', [
 
 		'default square',
 		'colorized square',
@@ -46,4 +46,16 @@ describeWithBrowser('Marker icons graphic', browserContext => {
 		'invalid arrow size',
 	]);
 
+	itChecksScreenshots(browserContext, '04_icons_graphic/chess_piece', [
+
+		'single piece',
+		'multiple pieces',
+		'customized pieceset',
+
+		'invalid size',
+		'invalid single piece',
+		'invalid multiple pieces',
+		'invalid pieceset',
+	]);
+
 });

package/test/09_chessboard_small_screens.js

@@ -0,0 +1,50 @@
+/* -------------------------------------------------------------------------- *
+ *                                                                            *
+ *    This file is part of Kokopu-React, a JavaScript chess library.          *
+ *    Copyright (C) 2021-2023  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *                                                                            *
+ *    This program 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.                     *
+ *                                                                            *
+ *    This program 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/>.                                         *
+ *                                                                            *
+ * -------------------------------------------------------------------------- */
+
+
+const { describeWithBrowser, itCustom, itChecksScreenshots, takeScreenshot, compareScreenshot, setWindowWidth } = require('./common/graphic');
+
+
+describeWithBrowser('Chessboard on small-screens', browserContext => {
+
+	itChecksScreenshots(browserContext, '09_chessboard_small_screens/base', [
+		'default',
+		'invalid limits',
+	]);
+
+	function itCheckScreenshotWithWidth(width) {
+		const label = `width ${width}`;
+		itCustom(browserContext, '09_chessboard_small_screens/base', 0, label, async element => {
+			await setWindowWidth(browserContext, width);
+			await takeScreenshot(browserContext, label, element);
+			await compareScreenshot(browserContext, label);
+		});
+	}
+
+	itCheckScreenshotWithWidth(750);
+	itCheckScreenshotWithWidth(740);
+	itCheckScreenshotWithWidth(730);
+	itCheckScreenshotWithWidth(720);
+	itCheckScreenshotWithWidth(710);
+	itCheckScreenshotWithWidth(700);
+	itCheckScreenshotWithWidth(690);
+
+});

package/test/{09_movetext_graphic.js → 10_movetext_graphic.js}

@@ -25,14 +25,14 @@ const { describeWithBrowser, itChecksScreenshots } = require('./common/graphic')
 
 describeWithBrowser('Movetext graphic', browserContext => {
 
-	itChecksScreenshots(browserContext, '09_movetext_graphic/base', [
+	itChecksScreenshots(browserContext, '10_movetext_graphic/base', [
 		'game 1',
 		'game 2',
 		'game 3',
 		'game 4',
 	]);
 
-	itChecksScreenshots(browserContext, '09_movetext_graphic/error', [
+	itChecksScreenshots(browserContext, '10_movetext_graphic/error', [
 		'wrong game index 1',
 		'wrong game index 2',
 		'pgn parsing error 1',
@@ -41,16 +41,17 @@ describeWithBrowser('Movetext graphic', browserContext => {
 		'wrong game index type',
 	]);
 
-	itChecksScreenshots(browserContext, '09_movetext_graphic/html', [
+	itChecksScreenshots(browserContext, '10_movetext_graphic/html', [
 		'html in headers',
 		'html in comments',
 		'filtered tags and attributes',
 	]);
 
-	itChecksScreenshots(browserContext, '09_movetext_graphic/options', [
+	itChecksScreenshots(browserContext, '10_movetext_graphic/options', [
 		'localized piece symbols',
 		'custom piece symbols',
 		'figurine piece symbols and diagram options',
+		'other diagram options',
 		'hidden diagrams',
 		'wrong diagram options 1',
 		'wrong diagram options 2',

package/test/{10_movetext_interaction.js → 11_movetext_interaction.js}

@@ -28,7 +28,7 @@ const test = require('unit.js');
 describeWithBrowser('Movetext interaction', browserContext => {
 
 	function itCheckClickMove(itemIndex, label, targets) {
-		itCustom(browserContext, '10_movetext_interaction/select_moves', itemIndex, label, async element => {
+		itCustom(browserContext, '11_movetext_interaction/select_moves', itemIndex, label, async element => {
 			const actions = browserContext.driver.actions({ async: true });
 			await setSandbox(browserContext, '');
 			for (let i = 0; i < targets.length; ++i) {
@@ -63,7 +63,7 @@ describeWithBrowser('Movetext interaction', browserContext => {
 	]);
 
 	function itCheckKeyboardActions(itemIndex, label, expectedOnGoFirst, expectedOnGoPrevious, expectedOnGoNext, expectedOnGoLast, expectedOnExit) {
-		itCustom(browserContext, '10_movetext_interaction/select_moves', itemIndex, label, async element => {
+		itCustom(browserContext, '11_movetext_interaction/select_moves', itemIndex, label, async element => {
 			const focusFieldElements = await element.findElements(By.className('kokopu-focusField'));
 
 			// Handle components for which no interaction is defined.
@@ -120,7 +120,7 @@ describeWithBrowser('Movetext interaction', browserContext => {
 	itCheckKeyboardActions(8, 'key on sub-variation selected', tpl('start', 'key-first'), tpl('1w', 'key-previous'), tpl('1b-v0-1b', 'key-next'),
 		tpl('1b-v0-3w', 'key-last'), TPL_EXIT);
 
-	itChecksScreenshots(browserContext, '10_movetext_interaction/error', [
+	itChecksScreenshots(browserContext, '11_movetext_interaction/error', [
 		'wrong interaction mode',
 	]);
 

package/test/common/graphic.js

@@ -204,6 +204,15 @@ exports.setSandbox = async function(browserContext, value) {
 };
 
 
+/**
+ * Set the width of the browser.
+ */
+exports.setWindowWidth = async function(browserContext, width) {
+	const { height } = await await browserContext.driver.manage().window().getRect();
+	await browserContext.driver.manage().window().setRect({ width: width, height: height });
+};
+
+
 /**
  * Open the page corresponding to the given test-case, and execute the given scenario.
  */

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

@@ -0,0 +1,38 @@
+/* -------------------------------------------------------------------------- *
+ *                                                                            *
+ *    This file is part of Kokopu-React, a JavaScript chess library.          *
+ *    Copyright (C) 2021-2023  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *                                                                            *
+ *    This program 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.                     *
+ *                                                                            *
+ *    This program 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 { ChessPieceIcon } from '../../../dist/lib/index';
+
+testApp([ /* eslint-disable react/jsx-key */
+
+	<ChessPieceIcon size={44} type="wq" />,
+	<ChessPieceIcon size={24} type={[ 'bb', 'wx', 'wx', 'wn', 'bx', 'bk', 'bk' ]} />,
+	<ChessPieceIcon size={36} type={[ 'wr', 'wb', 'bq' ]} pieceset="eyes" />,
+
+	<ChessPieceIcon size={ /* eslint-disable @typescript-eslint/no-explicit-any */ 'not-a-number' as any /* eslint-enable @typescript-eslint/no-explicit-any */ } type="wq" />,
+	<ChessPieceIcon size={40} type={ /* eslint-disable @typescript-eslint/no-explicit-any */ 'invalid' as any /* eslint-enable @typescript-eslint/no-explicit-any */ } />,
+	<ChessPieceIcon size={40} type={[ 'bb', /* eslint-disable @typescript-eslint/no-explicit-any */ 'zp' as any /* eslint-enable @typescript-eslint/no-explicit-any */ ]} />,
+	<ChessPieceIcon size={40} type="wq" pieceset="not-a-pieceset" />,
+
+]); /* eslint-enable react/jsx-key */

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

@@ -27,9 +27,9 @@ import { Chessboard } from '../../../dist/lib/index';
 
 testApp([ /* eslint-disable react/jsx-key */
 	<Chessboard />,
-	<Chessboard position="empty" />,
+	<Chessboard position="empty" turnVisible={true} />,
 	<Chessboard position="something invalid" />,
-	<Chessboard position="r1bqkbnr/pppp1ppp/2n5/1B2p3/4P3/5N2/PPPP1PPP/RNBQK2R b KQkq - 3 3" />,
+	<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/flipped.tsx

@@ -26,9 +26,9 @@ import { testApp } from '../common/test_app';
 import { Chessboard } from '../../../dist/lib/index';
 
 testApp([ /* eslint-disable react/jsx-key */
-	<Chessboard flipped={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')} />,
+	<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/06_chessboard_animation/base_1.tsx

@@ -29,8 +29,8 @@ 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 />,
+	<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} />,
+	<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,8 +29,8 @@ 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 />,
+	<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} />,
+	<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,8 +29,8 @@ 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 />,
+	<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} />,
+	<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/09_chessboard_small_screens/base.tsx

@@ -0,0 +1,41 @@
+/* -------------------------------------------------------------------------- *
+ *                                                                            *
+ *    This file is part of Kokopu-React, a JavaScript chess library.          *
+ *    Copyright (C) 2021-2023  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *                                                                            *
+ *    This program 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.                     *
+ *                                                                            *
+ *    This program 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 } 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 },
+];
+
+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 */ } />,
+]); /* eslint-enable react/jsx-key */

package/test/graphic_test_app/{09_movetext_graphic → 10_movetext_graphic}/options.tsx

@@ -34,6 +34,7 @@ testApp([ /* eslint-disable react/jsx-key */
 	<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}