kokopu-react 3.3.0 → 3.3.1

package/src/navigationboard/NavigationToolbar.tsx

@@ -30,8 +30,8 @@ import './NavigationToolbar.css';
 
 
 interface NavigationToolbarProps {
-    squareSize: number;
-    buttons: NavigationBar;
+    squareSize: number,
+    buttons: NavigationBar,
 }
 
 
@@ -62,13 +62,15 @@ export function NavigationToolbar({ squareSize, buttons }: NavigationToolbarProp
         atLeastOneButtonEncountered = true;
 
         // Enqueue the button node.
-        buttonNodes.push(<NavigationButtonImpl
-            key={buttonNodes.length}
-            tooltip={button.tooltip} iconPath={button.iconPath} enabled={button.enabled} onClick={button.onClick}
-            size={buttonSize}
-            spaceOnLeft={i === 0 || buttons[i - 1] === 'spacer'}
-            spaceOnRight={i === buttons.length - 1 || buttons[i + 1] === 'spacer'}
-        />);
+        buttonNodes.push(
+            <NavigationButtonImpl
+                key={buttonNodes.length}
+                tooltip={button.tooltip} iconPath={button.iconPath} enabled={button.enabled} onClick={button.onClick}
+                size={buttonSize}
+                spaceOnLeft={i === 0 || buttons[i - 1] === 'spacer'}
+                spaceOnRight={i === buttons.length - 1 || buttons[i + 1] === 'spacer'}
+            />,
+        );
     }
 
     return <div className="kokopu-navigationToolbar" style={{ marginTop: computeMarginTop(squareSize) }}>{buttonNodes}</div>;
@@ -76,9 +78,9 @@ export function NavigationToolbar({ squareSize, buttons }: NavigationToolbarProp
 
 
 interface NavigationButtonImplProps extends NavigationButton {
-    size: number;
-    spaceOnLeft: boolean;
-    spaceOnRight: boolean;
+    size: number,
+    spaceOnLeft: boolean,
+    spaceOnRight: boolean,
 }
 
 
@@ -90,7 +92,9 @@ function NavigationButtonImpl({ size, spaceOnLeft, spaceOnRight, iconPath, toolt
     const rightBoundary = spaceOnRight ? 'A 16 16 0 0 0 16 0' : 'L 31 32 L 31 0 L 16 0';
     const actuallyEnabled = enabled ?? true;
     return (
-        <div className={actuallyEnabled ? 'kokopu-enabledNavigationButton' : 'kokopu-disabledNavigationButton'} title={tooltip}
+        <div
+            className={actuallyEnabled ? 'kokopu-enabledNavigationButton' : 'kokopu-disabledNavigationButton'}
+            title={tooltip}
             onClick={actuallyEnabled ? onClick : undefined}
         >
             <svg viewBox="0 0 32 32" width={size} height={size}>

package/src/types.ts

@@ -62,22 +62,22 @@ export function isChessPieceIconType(iconType: unknown): iconType is ChessPieceI
 export type Colorset = {
 
     /** Color of the black squares. */
-    b: string;
+    b: string,
 
     /** Color of the white squares. */
-    w: string;
+    w: string,
 
     /** Color of the blue markers. */
-    cb: string;
+    cb: string,
 
     /** Color of the green markers. */
-    cg: string;
+    cg: string,
 
     /** Color of the red markers. */
-    cr: string;
+    cr: string,
 
     /** Color of the yellow markers. */
-    cy: string;
+    cy: string,
 };
 
 
@@ -89,46 +89,46 @@ export type Colorset = {
 export type Pieceset = {
 
     /** Image for the black bishops. */
-    bb: string;
+    bb: string,
 
     /** Image for the black kings. */
-    bk: string;
+    bk: string,
 
     /** Image for the black knights. */
-    bn: string;
+    bn: string,
 
     /** Image for the black pawns. */
-    bp: string;
+    bp: string,
 
     /** Image for the black queens. */
-    bq: string;
+    bq: string,
 
     /** Image for the black rooks. */
-    br: string;
+    br: string,
 
     /** Image for the black turn flags. */
-    bx: string;
+    bx: string,
 
     /** Image for the white bishops. */
-    wb: string;
+    wb: string,
 
     /** Image for the white kings. */
-    wk: string;
+    wk: string,
 
     /** Image for the white knights. */
-    wn: string;
+    wn: string,
 
     /** Image for the white pawns. */
-    wp: string;
+    wp: string,
 
     /** Image for the white queens. */
-    wq: string;
+    wq: string,
 
     /** Image for the white rooks. */
-    wr: string;
+    wr: string,
 
     /** Image for the white turn flags. */
-    wx: string;
+    wx: string,
 };
 
 
@@ -136,12 +136,12 @@ export type Pieceset = {
  * Set of aliases for chess pieces symbols.
  */
 export type PieceSymbolMapping = {
-    K: string;
-    Q: string;
-    R: string;
-    B: string;
-    N: string;
-    P: string;
+    K: string,
+    Q: string,
+    R: string,
+    B: string,
+    N: string,
+    P: string,
 };
 
 

package/src/util.ts

@@ -26,8 +26,8 @@ export function generateRandomId() {
     const buffer = new Uint32Array(8);
     crypto.getRandomValues(buffer);
     let result = '';
-    for (let i = 0; i < buffer.length; ++i) {
-        result += buffer[i].toString(16);
+    for (const c of buffer) {
+        result += c.toString(16);
     }
     return result;
 }

package/test/01_types.js

@@ -35,7 +35,7 @@ describe('Is piece symbol mapping', () => {
         });
     }
 
-    itIsPieceSymbolMapping('French localization', { K: 'R', Q: 'D', R: 'T', B: 'F', N: 'C', P: 'P' } , true);
+    itIsPieceSymbolMapping('French localization', { K: 'R', Q: 'D', R: 'T', B: 'F', N: 'C', P: 'P' }, true);
     itIsPieceSymbolMapping('Additional fields', { K: 'Ki_', Q: 'Qu_', R: 'Rk_', B: 'Bi_', N: 'Kn_', P: 'Pw_', Z: 'whatever', val: 42 }, true);
     itIsPieceSymbolMapping('Missing fields', { K: 'Ki_', Q: 'Qu_', R: 'Rk_', B: 'Bi_', N: 'Kn_' }, false);
     itIsPieceSymbolMapping('Non-string valued fields', { K: 42, Q: 'Qu_', R: 'Rk_', B: 'Bi_', N: 'Kn_', P: 'Pw_' }, false);
@@ -125,46 +125,60 @@ describe('Parse square markers', () => {
 describe('Flatten text markers', () => {
 
     it('RAe4', () => { test.value(flattenTextMarkers({ e4: { symbol: 'A', color: 'r' } })).is('RAe4'); });
-    it('Gzd3,Y1h8', () => { test.value(flattenTextMarkers({
-        h8: { symbol: '1', color: 'y' },
-        d3: { symbol: 'z', color: 'g' },
-    })).is('Gzd3,Y1h8'); });
-    it('G2a1,YMc5,RLd2,Rxh7,Bwh8', () => { test.value(flattenTextMarkers({
-        c5: { symbol: 'M', color: 'y' },
-        h8: { symbol: 'w', color: 'b' },
-        a1: { symbol: '2', color: 'g' },
-        h7: { symbol: 'x', color: 'r' },
-        d2: { symbol: 'L', color: 'r' },
-    })).is('G2a1,YMc5,RLd2,Rxh7,Bwh8'); });
-    it('Multi-character symbols', () => { test.value(flattenTextMarkers({
-        a1: { symbol: 'A', color: 'y' },
-        a7: { symbol: 'plus', color: 'g' },
-        b3: { symbol: 'times', color: 'r' },
-        g5: { symbol: 'dot', color: 'y' },
-        h3: { symbol: 'circle', color: 'g' },
-    })).is('YAa1,G(plus)a7,R(times)b3,Y(dot)g5,G(circle)h3'); });
+    it('Gzd3,Y1h8', () => {
+        test.value(flattenTextMarkers({
+            h8: { symbol: '1', color: 'y' },
+            d3: { symbol: 'z', color: 'g' },
+        })).is('Gzd3,Y1h8');
+    });
+    it('G2a1,YMc5,RLd2,Rxh7,Bwh8', () => {
+        test.value(flattenTextMarkers({
+            c5: { symbol: 'M', color: 'y' },
+            h8: { symbol: 'w', color: 'b' },
+            a1: { symbol: '2', color: 'g' },
+            h7: { symbol: 'x', color: 'r' },
+            d2: { symbol: 'L', color: 'r' },
+        })).is('G2a1,YMc5,RLd2,Rxh7,Bwh8');
+    });
+    it('Multi-character symbols', () => {
+        test.value(flattenTextMarkers({
+            a1: { symbol: 'A', color: 'y' },
+            a7: { symbol: 'plus', color: 'g' },
+            b3: { symbol: 'times', color: 'r' },
+            g5: { symbol: 'dot', color: 'y' },
+            h3: { symbol: 'circle', color: 'g' },
+        })).is('YAa1,G(plus)a7,R(times)b3,Y(dot)g5,G(circle)h3');
+    });
     it('<empty>', () => { test.value(flattenTextMarkers({})).is(''); });
 
-    it('Wrong square', () => { test.value(flattenTextMarkers({
-        e1: { symbol: 'H', color: 'r' },
-        j5: { symbol: 'A', color: 'g' },
-    })).is('RHe1'); });
-    it('Wrong color', () => { test.value(flattenTextMarkers({
-        a2: { symbol: '0', color: 'g' },
-        b5: { symbol: 'A', color: 'R' },
-        h8: { symbol: 'A' },
-    })).is('G0a2'); });
-    it('Wrong symbol', () => { test.value(flattenTextMarkers({
-        a2: { symbol: '0', color: 'g' },
-        b5: { symbol: '', color: 'r' },
-        h8: { color: 'g' },
-        d8: { symbol: '-', color: 'r' },
-        c1: { symbol: 'abcd', color: 'r' },
-    })).is('G0a2'); });
-    it('Wrong multi-character symbol', () => { test.value(flattenTextMarkers({
-        a2: { symbol: '0', color: 'g' },
-        b5: { symbol: 'whatever', color: 'r' },
-    })).is('G0a2'); });
+    it('Wrong square', () => {
+        test.value(flattenTextMarkers({
+            e1: { symbol: 'H', color: 'r' },
+            j5: { symbol: 'A', color: 'g' },
+        })).is('RHe1');
+    });
+    it('Wrong color', () => {
+        test.value(flattenTextMarkers({
+            a2: { symbol: '0', color: 'g' },
+            b5: { symbol: 'A', color: 'R' },
+            h8: { symbol: 'A' },
+        })).is('G0a2');
+    });
+    it('Wrong symbol', () => {
+        test.value(flattenTextMarkers({
+            a2: { symbol: '0', color: 'g' },
+            b5: { symbol: '', color: 'r' },
+            h8: { color: 'g' },
+            d8: { symbol: '-', color: 'r' },
+            c1: { symbol: 'abcd', color: 'r' },
+        })).is('G0a2');
+    });
+    it('Wrong multi-character symbol', () => {
+        test.value(flattenTextMarkers({
+            a2: { symbol: '0', color: 'g' },
+            b5: { symbol: 'whatever', color: 'r' },
+        })).is('G0a2');
+    });
 
     it('Wrong type (not an object)', () => { test.exception(() => flattenTextMarkers('whatever')).isInstanceOf(exception.IllegalArgument); });
     it('Wrong type (null)', () => { test.exception(() => flattenTextMarkers(null)).isInstanceOf(exception.IllegalArgument); });
@@ -175,24 +189,30 @@ describe('Flatten text markers', () => {
 describe('Parse text markers', () => {
 
     it('RAe4', () => { test.value(parseTextMarkers('RAe4')).is({ e4: { symbol: 'A', color: 'r' } }); });
-    it('Gzd3,Y1h8', () => { test.value(parseTextMarkers('Gzd3,Y1h8')).is({
-        h8: { symbol: '1', color: 'y' },
-        d3: { symbol: 'z', color: 'g' },
-    }); });
-    it('G2a1,YMc5,RLd2,Rxh7,Bwh8', () => { test.value(parseTextMarkers(' G2a1, Rxh7  ,YMc5 ,RLd2,Bwh8 ')).is({
-        c5: { symbol: 'M', color: 'y' },
-        h8: { symbol: 'w', color: 'b' },
-        a1: { symbol: '2', color: 'g' },
-        h7: { symbol: 'x', color: 'r' },
-        d2: { symbol: 'L', color: 'r' },
-    }); });
-    it('Multi-character symbols', () => { test.value(parseTextMarkers('YAa1,G(plus)a7, R(times)b3  ,Y(dot)g5,G(circle)h3')).is({
-        a1: { symbol: 'A', color: 'y' },
-        a7: { symbol: 'plus', color: 'g' },
-        b3: { symbol: 'times', color: 'r' },
-        g5: { symbol: 'dot', color: 'y' },
-        h3: { symbol: 'circle', color: 'g' },
-    }); });
+    it('Gzd3,Y1h8', () => {
+        test.value(parseTextMarkers('Gzd3,Y1h8')).is({
+            h8: { symbol: '1', color: 'y' },
+            d3: { symbol: 'z', color: 'g' },
+        });
+    });
+    it('G2a1,YMc5,RLd2,Rxh7,Bwh8', () => {
+        test.value(parseTextMarkers(' G2a1, Rxh7  ,YMc5 ,RLd2,Bwh8 ')).is({
+            c5: { symbol: 'M', color: 'y' },
+            h8: { symbol: 'w', color: 'b' },
+            a1: { symbol: '2', color: 'g' },
+            h7: { symbol: 'x', color: 'r' },
+            d2: { symbol: 'L', color: 'r' },
+        });
+    });
+    it('Multi-character symbols', () => {
+        test.value(parseTextMarkers('YAa1,G(plus)a7, R(times)b3  ,Y(dot)g5,G(circle)h3')).is({
+            a1: { symbol: 'A', color: 'y' },
+            a7: { symbol: 'plus', color: 'g' },
+            b3: { symbol: 'times', color: 'r' },
+            g5: { symbol: 'dot', color: 'y' },
+            h3: { symbol: 'circle', color: 'g' },
+        });
+    });
     it('<empty>', () => { test.value(parseTextMarkers('')).is({}); });
     it('<blank>', () => { test.value(parseTextMarkers(' ')).is({}); });
 
@@ -213,8 +233,9 @@ describe('Flatten arrow markers', () => {
 
     it('Re4d6', () => { test.value(flattenArrowMarkers({ e4d6: 'r' })).is('Re4d6'); });
     it('Gd3b4,Yh8h7', () => { test.value(flattenArrowMarkers({ h8h7: 'y', d3b4: 'g' })).is('Gd3b4,Yh8h7'); });
-    it('Ga1h8,Yc5a1,Rd2d2,Rh7h8,Bh8c5', () => { test.value(flattenArrowMarkers({ c5a1: 'y', h8c5: 'b', a1h8: 'g', h7h8: 'r', d2d2: 'r' }))
-        .is('Ga1h8,Yc5a1,Rd2d2,Rh7h8,Bh8c5'); });
+    it('Ga1h8,Yc5a1,Rd2d2,Rh7h8,Bh8c5', () => {
+        test.value(flattenArrowMarkers({ c5a1: 'y', h8c5: 'b', a1h8: 'g', h7h8: 'r', d2d2: 'r' })).is('Ga1h8,Yc5a1,Rd2d2,Rh7h8,Bh8c5');
+    });
     it('<empty>', () => { test.value(flattenArrowMarkers({})).is(''); });
 
     it('Wrong vector', () => { test.value(flattenArrowMarkers({ e1c2: 'r', a1b9: 'g', c0d2: 'r', i3d4: 'r', f2k3: 'g', whatever: 'y' })).is('Re1c2'); });
@@ -230,8 +251,9 @@ describe('Parse arrow markers', () => {
 
     it('Re4d6', () => { test.value(parseArrowMarkers('Re4d6')).is({ e4d6: 'r' }); });
     it('Gd3b4,Yh8h7', () => { test.value(parseArrowMarkers('Gd3b4,Yh8h7')).is({ h8h7: 'y', d3b4: 'g' }); });
-    it('Ga1h8,Yc5a1,Rd2d2,Rh7h8,Bh8c5', () => { test.value(parseArrowMarkers(' Bh8c5,Ga1h8  , Yc5a1 ,  Rd2d2,Rh7h8  '))
-        .is({ c5a1: 'y', h8c5: 'b', a1h8: 'g', h7h8: 'r', d2d2: 'r' }); });
+    it('Ga1h8,Yc5a1,Rd2d2,Rh7h8,Bh8c5', () => {
+        test.value(parseArrowMarkers(' Bh8c5,Ga1h8  , Yc5a1 ,  Rd2d2,Rh7h8  ')).is({ c5a1: 'y', h8c5: 'b', a1h8: 'g', h7h8: 'r', d2d2: 'r' });
+    });
     it('<empty>', () => { test.value(parseArrowMarkers('')).is({}); });
     it('<blank>', () => { test.value(parseArrowMarkers(' ')).is({}); });
 

package/test/02_chessboard_util.js

@@ -211,6 +211,8 @@ describe('Adapt square-size with small-screen limits', () => {
         delete global.window;
     });
 
+    /* global window */
+
     it('Window-limited', () => {
         window.innerWidth = 640;
         testAdaptSquareSize(32, 9999, 9999, true, true, limits);

package/test/03_error_box_graphic.js

@@ -42,7 +42,7 @@ describeWithBrowser('Error box graphic', browserContext => {
     ]);
 
     itChecksScreenshots(browserContext, '03_error_box_graphic/localization', [
-        'default'
+        'default',
     ]);
 
 });

package/test/07_chessboard_interaction.js

@@ -31,8 +31,7 @@ describeWithBrowser('Chessboard interaction', browserContext => {
         itCustom(browserContext, '07_chessboard_interaction/click_squares', itemIndex, label, async element => {
             const actions = browserContext.driver.actions({ async: true });
             const area = await element.getRect();
-            for (let i = 0; i < targets.length; ++i) {
-                const target = targets[i];
+            for (const target of targets) {
                 await actions.move({ x: area.x + target.x, y: area.y + target.y }).click().perform();
                 await compareSandbox(browserContext, target.expectedText);
             }

package/test/13_navigation_board_graphic.js

@@ -50,10 +50,10 @@ describeWithBrowser('Navigation board graphic', browserContext => {
     function itCheckClickButton(itemIndex, label, buttons) {
         itCustom(browserContext, '13_navigation_board_graphic/additional_buttons', itemIndex, label, async element => {
             await setSandbox(browserContext, '');
-            for (let i = 0; i < buttons.length; ++i) {
-                const buttonElement = await element.findElement(By.xpath(`.//div[@title='${buttons[i].title}']`));
+            for (const button of buttons) {
+                const buttonElement = await element.findElement(By.xpath(`.//div[@title='${button.title}']`));
                 await buttonElement.click();
-                await compareSandbox(browserContext, buttons[i].expectedSandbox ?? '');
+                await compareSandbox(browserContext, button.expectedSandbox ?? '');
             }
         });
     }

package/test/common/graphic.js

@@ -47,8 +47,8 @@ const AUTOPLAY_DELAY = 1000;
 /**
  * Create a Mocha test-suite that runs graphic tests in Dockerized Selenium webbrowser.
  */
-exports.describeWithBrowser = function(suiteLabel, testFactory) {
-    describe(suiteLabel, function() {
+exports.describeWithBrowser = function (suiteLabel, testFactory) {
+    describe(suiteLabel, function () {
 
         // Fetching a new page in the browser may take a while, thus increase the timeout threshold.
         this.timeout(10000);
@@ -147,7 +147,7 @@ async function fetchTestCase(browserContext, testCaseName) {
 /**
  * Wait until the end of the chessboard animations.
  */
-const waitForAnimation = exports.waitForAnimation = async function() {
+const waitForAnimation = exports.waitForAnimation = async function () {
     await new Promise(resolve => setTimeout(resolve, ANIMATION_DELAY));
 };
 
@@ -155,7 +155,7 @@ const waitForAnimation = exports.waitForAnimation = async function() {
 /**
  * Wait until the given number of moves have been auto-played.
  */
-exports.waitForAutoplay = async function(nbMoves) {
+exports.waitForAutoplay = async function (nbMoves) {
     await new Promise(resolve => setTimeout(resolve, (nbMoves + 0.5) * AUTOPLAY_DELAY));
 };
 
@@ -163,7 +163,7 @@ exports.waitForAutoplay = async function(nbMoves) {
 /**
  * Take a screenshot of the element identified by the given CSS target.
  */
-const takeScreenshot = exports.takeScreenshot = async function(browserContext, imageBaseName, element) {
+const takeScreenshot = exports.takeScreenshot = async function (browserContext, imageBaseName, element) {
 
     imageBaseName = imageBaseName.replaceAll(' ', '_').toLowerCase();
     const actualFilename = `${outputDir}/${browserContext.latestTestCase}/${imageBaseName}.png`;
@@ -178,7 +178,7 @@ const takeScreenshot = exports.takeScreenshot = async function(browserContext, i
 /**
  * Compare a screenshot to its reference.
  */
-const compareScreenshot = exports.compareScreenshot = async function(browserContext, imageBaseName) {
+const compareScreenshot = exports.compareScreenshot = async function (browserContext, imageBaseName) {
 
     imageBaseName = imageBaseName.replaceAll(' ', '_').toLowerCase();
     const actualFilename = `${outputDir}/${browserContext.latestTestCase}/${imageBaseName}.png`;
@@ -198,7 +198,7 @@ const compareScreenshot = exports.compareScreenshot = async function(browserCont
 /**
  * Compare content of the sandbox to the expected text.
  */
-exports.compareSandbox = async function(browserContext, expectedText) {
+exports.compareSandbox = async function (browserContext, expectedText) {
     const actualText = await browserContext.driver.findElement(By.id('sandbox')).getText();
     test.value(actualText).is(expectedText);
 };
@@ -207,7 +207,7 @@ exports.compareSandbox = async function(browserContext, expectedText) {
 /**
  * Set the content of the sandbox to the given value.
  */
-exports.setSandbox = async function(browserContext, value) {
+exports.setSandbox = async function (browserContext, value) {
     if (/[^\w \-=]/.test(value)) {
         throw new Error('Invalid characters found in the sandox message.');
     }
@@ -218,7 +218,7 @@ exports.setSandbox = async function(browserContext, value) {
 /**
  * Set the width of the browser.
  */
-exports.setWindowWidth = async function(browserContext, width) {
+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 });
 };
@@ -227,7 +227,7 @@ exports.setWindowWidth = async function(browserContext, width) {
 /**
  * Open the page corresponding to the given test-case, and execute the given scenario.
  */
-const itCustom = exports.itCustom = function(browserContext, testCaseName, itemIndex, itemName, scenario) {
+const itCustom = exports.itCustom = function (browserContext, testCaseName, itemIndex, itemName, scenario) {
     it(`${testCaseName} - ${itemName}`, async () => {
         await fetchTestCase(browserContext, testCaseName);
         const element = await browserContext.driver.findElement(By.id('test-item-' + itemIndex));
@@ -239,7 +239,7 @@ const itCustom = exports.itCustom = function(browserContext, testCaseName, itemI
 /**
  * Open the page corresponding to the given test-case, take a screenshot for each item, and compare them to the reference.
  */
-exports.itChecksScreenshots = function(browserContext, testCaseName, itemNames) {
+exports.itChecksScreenshots = function (browserContext, testCaseName, itemNames) {
     for (let i = 0; i < itemNames.length; ++i) {
         const itemName = itemNames[i];
         itCustom(browserContext, testCaseName, i, itemName, async element => {