kokopu-react 3.3.0 → 3.3.2

package/doc_src/demo/PageMovetextInteraction.tsx

@@ -3,7 +3,7 @@
  *                                                                            *
  *    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>       *
+ *    Copyright (C) 2021-2025  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      *
@@ -25,7 +25,7 @@
 import * as React from 'react';
 import { pgnRead, Node as GameNode } from 'kokopu';
 
-import { Chessboard, Movetext, MovetextProps, MoveSelectEventOrigin } from '../../src/index';
+import { Chessboard, Movetext, MovetextProps } from '../../src/index';
 import { buildComponentDemoCode } from './util';
 
 import Box from '@mui/material/Box';
@@ -44,11 +44,10 @@ import game2 from './game-2.pgn';
 
 
 interface PageState {
-    pgn: string;
-    selection: string;
-    interactionMode: 'none' | 'selectMove';
-    withPopup: boolean;
-    withMove: boolean;
+    pgn: string,
+    selection: string,
+    interactionMode: 'none' | 'selectMove',
+    withPopup: boolean,
 }
 
 
@@ -61,7 +60,6 @@ export default class Page extends React.Component<object, PageState> {
             selection: '28b',
             interactionMode: 'selectMove',
             withPopup: true,
-            withMove: false,
         };
     }
 
@@ -77,21 +75,23 @@ export default class Page extends React.Component<object, PageState> {
     }
 
     private renderControls() {
-        return (<>
-            <Stack direction="row" spacing={2} alignItems="center">
-                <ButtonGroup color="primary" size="small">
-                    <Button onClick={() => this.setState({ pgn: game1, selection: '28b' })}>Game 1</Button>
-                    <Button onClick={() => this.setState({ pgn: game2, selection: '15b' })}>Game 2</Button>
-                </ButtonGroup>
-            </Stack>
-            <Box>
-                <Typography gutterBottom>Interaction mode</Typography>
-                <RadioGroup value={this.state.interactionMode} onChange={evt => this.setState({ interactionMode: evt.target.value as PageState['interactionMode'] })}>
-                    <FormControlLabel value="none" control={<Radio color="primary" />} label="None" />
-                    <FormControlLabel value="selectMove" control={<Radio color="primary" />} label="Select moves" />
-                </RadioGroup>
-            </Box>
-        </>);
+        return (
+            <>
+                <Stack direction="row" spacing={2} alignItems="center">
+                    <ButtonGroup color="primary" size="small">
+                        <Button onClick={() => this.setState({ pgn: game1, selection: '28b' })}>Game 1</Button>
+                        <Button onClick={() => this.setState({ pgn: game2, selection: '15b' })}>Game 2</Button>
+                    </ButtonGroup>
+                </Stack>
+                <Box>
+                    <Typography gutterBottom>Interaction mode</Typography>
+                    <RadioGroup value={this.state.interactionMode} onChange={evt => this.setState({ interactionMode: evt.target.value as PageState['interactionMode'] })}>
+                        <FormControlLabel value="none" control={<Radio color="primary" />} label="None" />
+                        <FormControlLabel value="selectMove" control={<Radio color="primary" />} label="Select moves" />
+                    </RadioGroup>
+                </Box>
+            </>
+        );
     }
 
     private renderMovetext() {
@@ -103,7 +103,7 @@ export default class Page extends React.Component<object, PageState> {
                     pieceSymbols="figurines"
                     diagramVisible={false}
                     interactionMode={this.getMovetextInterationMode()}
-                    onMoveSelected={(nodeId, evtOrigin) => this.handleMoveSelected(nodeId, evtOrigin)}
+                    onMoveSelected={nodeId => this.handleMoveSelected(nodeId)}
                 />
             </Box>
         );
@@ -136,9 +136,9 @@ export default class Page extends React.Component<object, PageState> {
         return <Paper className="kokopu-fixedPopup" elevation={3}>{content}</Paper>;
     }
 
-    private handleMoveSelected(nodeId: string | undefined, evtOrigin: MoveSelectEventOrigin) {
+    private handleMoveSelected(nodeId: string | undefined) {
         if (nodeId) {
-            this.setState({ selection: nodeId, withMove: evtOrigin === 'key-next' });
+            this.setState({ selection: nodeId });
         }
     }
 
@@ -165,8 +165,8 @@ export default class Page extends React.Component<object, PageState> {
         else {
             const node = game.findById(this.state.selection) as GameNode;
             return {
-                position: this.state.withMove ? node.positionBefore() : node.position(),
-                move:  this.state.withMove ? node.notation() : undefined,
+                position: node.positionBefore(),
+                move: node.notation(),
                 csl: node.tag('csl'),
                 cal: node.tag('cal'),
             };

package/doc_src/demo/PageNavigationBoardBase.tsx

@@ -3,7 +3,7 @@
  *                                                                            *
  *    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>       *
+ *    Copyright (C) 2021-2025  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      *
@@ -41,23 +41,23 @@ import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import Typography from '@mui/material/Typography';
 
 import './demo.css';
-import pgn from './game-3.pgn';
+import pgn from './game-short.pgn';
 
 
 const COLOR_ICON_SIZE = 16;
 
 
 interface PageState {
-    squareSize: number;
-    coordinateVisible: boolean;
-    turnVisible: boolean;
-    colorset: string;
-    pieceset: string;
-    moveArrowVisible: boolean;
-    moveArrowColor: AnnotationColor;
-    animated: boolean;
-    playButtonVisible: boolean;
-    flipButtonVisible: boolean;
+    squareSize: number,
+    coordinateVisible: boolean,
+    turnVisible: boolean,
+    colorset: string,
+    pieceset: string,
+    moveArrowVisible: boolean,
+    moveArrowColor: AnnotationColor,
+    animated: boolean,
+    playButtonVisible: boolean,
+    flipButtonVisible: boolean,
 }
 
 
@@ -90,50 +90,58 @@ export default class Page extends React.Component<object, PageState> {
     }
 
     private renderControls() {
-        return (<>
-            <Stack direction="row" spacing={2} alignItems="center">
-                <FormControlLabel label="Show play/stop button"
-                    control={<Switch checked={this.state.playButtonVisible} onChange={() => this.setState({ playButtonVisible: !this.state.playButtonVisible })} color="primary" />}
-                />
-                <FormControlLabel label="Show flip button"
-                    control={<Switch checked={this.state.flipButtonVisible} onChange={() => this.setState({ flipButtonVisible: !this.state.flipButtonVisible })} color="primary" />}
-                />
-                <FormControlLabel label="Show coordinates"
-                    control={<Switch checked={this.state.coordinateVisible} onChange={() => this.setState({ coordinateVisible: !this.state.coordinateVisible })} color="primary" />}
-                />
-                <FormControlLabel label="Show turn"
-                    control={<Switch checked={this.state.turnVisible} onChange={() => this.setState({ turnVisible: !this.state.turnVisible })} color="primary" />}
-                />
-                <FormControlLabel label="Animated"
-                    control={<Switch checked={this.state.animated} onChange={() => this.setState({ animated: !this.state.animated })} color="primary" />}
-                />
-            </Stack>
-            <Box>
-                <Typography gutterBottom>Square size</Typography>
-                <Slider
-                    value={this.state.squareSize} onChange={(_, newValue) => this.setState({ squareSize: newValue as number })}
-                    min={Chessboard.minSquareSize()} max={Chessboard.maxSquareSize()} step={1} valueLabelDisplay="on" color="primary"
-                />
-            </Box>
-            <Stack direction="row" spacing={2} alignItems="center">
-                <FormControl variant="standard">
-                    <InputLabel id="colorset-label">Colorset</InputLabel>
-                    <Select labelId="colorset-label" sx={{ width: '8em' }} value={this.state.colorset} onChange={evt => this.setState({ colorset: evt.target.value })}>
-                        {Object.keys(Chessboard.colorsets()).sort().map(colorset => <MenuItem key={colorset} value={colorset}>{colorset}</MenuItem>)}
-                    </Select>
-                </FormControl>
-                <FormControl variant="standard">
-                    <InputLabel id="pieceset-label">Pieceset</InputLabel>
-                    <Select labelId="pieceset-label" sx={{ width: '8em' }} value={this.state.pieceset} onChange={evt => this.setState({ pieceset: evt.target.value })}>
-                        {Object.keys(Chessboard.piecesets()).sort().map(pieceset => <MenuItem key={pieceset} value={pieceset}>{pieceset}</MenuItem>)}
-                    </Select>
-                </FormControl>
-                <FormControlLabel label="Show move arrow"
-                    control={<Switch checked={this.state.moveArrowVisible} onChange={() => this.setState({ moveArrowVisible: !this.state.moveArrowVisible })} color="primary" />}
-                />
-                {this.renderMoveArrowColorSelector()}
-            </Stack>
-        </>);
+        return (
+            <>
+                <Stack direction="row" spacing={2} alignItems="center">
+                    <FormControlLabel
+                        label="Show play/stop button"
+                        control={<Switch checked={this.state.playButtonVisible} onChange={() => this.setState({ playButtonVisible: !this.state.playButtonVisible })} color="primary" />}
+                    />
+                    <FormControlLabel
+                        label="Show flip button"
+                        control={<Switch checked={this.state.flipButtonVisible} onChange={() => this.setState({ flipButtonVisible: !this.state.flipButtonVisible })} color="primary" />}
+                    />
+                    <FormControlLabel
+                        label="Show coordinates"
+                        control={<Switch checked={this.state.coordinateVisible} onChange={() => this.setState({ coordinateVisible: !this.state.coordinateVisible })} color="primary" />}
+                    />
+                    <FormControlLabel
+                        label="Show turn"
+                        control={<Switch checked={this.state.turnVisible} onChange={() => this.setState({ turnVisible: !this.state.turnVisible })} color="primary" />}
+                    />
+                    <FormControlLabel
+                        label="Animated"
+                        control={<Switch checked={this.state.animated} onChange={() => this.setState({ animated: !this.state.animated })} color="primary" />}
+                    />
+                </Stack>
+                <Box>
+                    <Typography gutterBottom>Square size</Typography>
+                    <Slider
+                        value={this.state.squareSize} onChange={(_, newValue) => this.setState({ squareSize: newValue as number })}
+                        min={Chessboard.minSquareSize()} max={Chessboard.maxSquareSize()} step={1} valueLabelDisplay="on" color="primary"
+                    />
+                </Box>
+                <Stack direction="row" spacing={2} alignItems="center">
+                    <FormControl variant="standard">
+                        <InputLabel id="colorset-label">Colorset</InputLabel>
+                        <Select labelId="colorset-label" sx={{ width: '8em' }} value={this.state.colorset} onChange={evt => this.setState({ colorset: evt.target.value })}>
+                            {Object.keys(Chessboard.colorsets()).sort().map(colorset => <MenuItem key={colorset} value={colorset}>{colorset}</MenuItem>)}
+                        </Select>
+                    </FormControl>
+                    <FormControl variant="standard">
+                        <InputLabel id="pieceset-label">Pieceset</InputLabel>
+                        <Select labelId="pieceset-label" sx={{ width: '8em' }} value={this.state.pieceset} onChange={evt => this.setState({ pieceset: evt.target.value })}>
+                            {Object.keys(Chessboard.piecesets()).sort().map(pieceset => <MenuItem key={pieceset} value={pieceset}>{pieceset}</MenuItem>)}
+                        </Select>
+                    </FormControl>
+                    <FormControlLabel
+                        label="Show move arrow"
+                        control={<Switch checked={this.state.moveArrowVisible} onChange={() => this.setState({ moveArrowVisible: !this.state.moveArrowVisible })} color="primary" />}
+                    />
+                    {this.renderMoveArrowColorSelector()}
+                </Stack>
+            </>
+        );
     }
 
     private renderMoveArrowColorSelector() {

package/doc_src/demo/PageNavigationBoardUncontrolledVsControlled.tsx

@@ -3,7 +3,7 @@
  *                                                                            *
  *    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>       *
+ *    Copyright (C) 2021-2025  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      *
@@ -32,11 +32,11 @@ import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 
 import './demo.css';
-import pgn from './game-3.pgn';
+import pgn from './game-short.pgn';
 
 
 interface PageState {
-    nodeId: string;
+    nodeId: string,
 }
 
 
@@ -60,21 +60,23 @@ export default class Page extends React.Component<object, PageState> {
     }
 
     private renderControls() {
-        return (<>
-            <Typography>
-                In uncontrolled mode, the current node ID (aka. the current move) of the <code>NavigationBoard</code> component is managed internally.
-                No additional code is needed to make the navigation buttons work.
-            </Typography>
-            <Typography>
-                In controlled mode, the current node ID is defined by the <code>nodeId</code> attribute, and a callback must be set
-                on the <code>onNodeIdChanged</code> attribute to respond to clicks on the navigation buttons.
-                This mode requires more code, as a state variable holding the current node ID must be explicitely managed out of the component,
-                but it allows to define more complex behaviors (e.g. synchronizing the node ID on the <code>NavigationBoard</code> with another component).
-            </Typography>
-            <Typography>
-                Whether the component is in uncontrolled mode or controlled mode depends on the presence of the <code>nodeId</code> attribute.
-            </Typography>
-        </>);
+        return (
+            <>
+                <Typography>
+                    In uncontrolled mode, the current node ID (aka. the current move) of the <code>NavigationBoard</code> component is managed internally.
+                    No additional code is needed to make the navigation buttons work.
+                </Typography>
+                <Typography>
+                    In controlled mode, the current node ID is defined by the <code>nodeId</code> attribute, and a callback must be set
+                    on the <code>onNodeIdChanged</code> attribute to respond to clicks on the navigation buttons.
+                    This mode requires more code, as a state variable holding the current node ID must be explicitely managed out of the component,
+                    but it allows to define more complex behaviors (e.g. synchronizing the node ID on the <code>NavigationBoard</code> with another component).
+                </Typography>
+                <Typography>
+                    Whether the component is in uncontrolled mode or controlled mode depends on the presence of the <code>nodeId</code> attribute.
+                </Typography>
+            </>
+        );
     }
 
     private renderNavigationBoards() {
@@ -107,8 +109,12 @@ export default class Page extends React.Component<object, PageState> {
         controlledAttributes.push('onNodeIdChanged={nodeId => handleNodeIdChanged(nodeId)}');
 
         const pgnDeclaration = 'const pgn = `\n' + pgn.trim() + '`;\n\n';
-        return <pre className="kokopu-demoCode">{pgnDeclaration + '// Uncontrolled\n' + buildComponentDemoCode('NavigationBoard', uncontrolledAttributes)
-            + '\n\n// Controlled\n' + buildComponentDemoCode('NavigationBoard', controlledAttributes)}</pre>;
+        return (
+            <pre className="kokopu-demoCode">
+                {pgnDeclaration + '// Uncontrolled\n' + buildComponentDemoCode('NavigationBoard', uncontrolledAttributes)
+                + '\n\n// Controlled\n' + buildComponentDemoCode('NavigationBoard', controlledAttributes)}
+            </pre>
+        );
     }
 
 }

package/doc_src/demo/PageSynchroNavigationBoardMovetext.tsx

@@ -0,0 +1,115 @@
+/*!
+ * -------------------------------------------------------------------------- *
+ *                                                                            *
+ *    Kokopu-React - A React-based library of chess-related components.       *
+ *    <https://www.npmjs.com/package/kokopu-react>                            *
+ *    Copyright (C) 2021-2025  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 { pgnRead, Game } from 'kokopu';
+
+import { Movetext, NavigationBoard } from '../../src/index';
+
+import Button from '@mui/material/Button';
+import ButtonGroup from '@mui/material/ButtonGroup';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+
+import './demo.css';
+import game1 from './game-1.pgn';
+import game2 from './game-2.pgn';
+import NavigationBoardWithMoveTextSourceCode from './NavigationBoardWithMoveText.txt';
+
+
+interface PageState {
+    componentKey: string,
+    pgn: string,
+}
+
+
+function NavigationBoardWithMoveText({ game }: { game: Game }) {
+    const [ nodeId, setNodeId ] = React.useState('start');
+    return (
+        <Stack direction="row" spacing={2}>
+            <NavigationBoard animated game={game} nodeId={nodeId} onNodeIdChanged={setNodeId} />
+            <Movetext
+                game={game} diagramOptions={{ squareSize: 28 }} interactionMode="selectMove" selection={nodeId}
+                onMoveSelected={n => {
+                    if (n !== undefined) {
+                        setNodeId(n);
+                    }
+                }}
+            />
+        </Stack>
+    );
+}
+
+
+export default class Page extends React.Component<object, PageState> {
+
+    constructor(props: object) {
+        super(props);
+        this.state = {
+            componentKey: 'game1',
+            pgn: game1,
+        };
+    }
+
+    render() {
+        return (
+            <Stack spacing={2} mt={2}>
+                {this.renderControls()}
+                {this.renderNavigationBoardWithMovetext()}
+                {this.renderCode()}
+            </Stack>
+        );
+    }
+
+    private renderControls() {
+        return (
+            <Stack direction="row" spacing={2} alignItems="center">
+                <ButtonGroup color="primary" size="small">
+                    <Button onClick={() => this.setState({ componentKey: 'game1', pgn: game1 })}>Game 1</Button>
+                    <Button onClick={() => this.setState({ componentKey: 'game2', pgn: game2 })}>Game 2</Button>
+                </ButtonGroup>
+            </Stack>
+        );
+    }
+
+    private renderNavigationBoardWithMovetext() {
+        const game = pgnRead(this.state.pgn, 0);
+        return <NavigationBoardWithMoveText key={this.state.componentKey} game={game} />;
+    }
+
+    private renderCode() {
+        return (
+            <>
+                <Typography>
+                    This example shows how to synchronize a <code>NavigationBoard</code> component with a <code>Movetext</code> component.
+                    Both components are layout next to each other here, but real-world applications may use more complex layouts,
+                    e.g. render them in distant places.
+                    The key point to synchronize the components is to have them controlled by the same <code>nodeId</code> state variable.
+                </Typography>
+                <pre className="kokopu-demoCode">{NavigationBoardWithMoveTextSourceCode}</pre>
+            </>
+        );
+    }
+
+}

package/doc_src/demo/decs.d.ts

@@ -3,7 +3,7 @@
  *                                                                            *
  *    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>       *
+ *    Copyright (C) 2021-2025  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      *
@@ -27,6 +27,11 @@ declare module '*.pgn' {
     export default pgnText;
 }
 
+declare module '*.txt' {
+    const text: string;
+    export default text;
+}
+
 declare module '*.png' {
     const path: string;
     export default path;

package/doc_src/demo/demo.css

@@ -3,7 +3,7 @@
  *                                                                            *
  *    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>       *
+ *    Copyright (C) 2021-2025  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      *

package/doc_src/demo/util.ts

@@ -3,7 +3,7 @@
  *                                                                            *
  *    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>       *
+ *    Copyright (C) 2021-2025  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      *

package/doc_src/theming/LogoRenderer.js

@@ -3,7 +3,7 @@
  *                                                                            *
  *    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>       *
+ *    Copyright (C) 2021-2025  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      *
@@ -27,9 +27,6 @@ import Styled from 'react-styleguidist/lib/client/rsg-components/Styled';
 
 import './theming.css';
 
-
-/* eslint-disable react/prop-types */
-
 const styles = ({ color, fontFamily, fontSize }) => ({
     logo: {
         color: color.base,
@@ -41,12 +38,14 @@ const styles = ({ color, fontFamily, fontSize }) => ({
 });
 
 function LogoRenderer({ classes, children }) {
-    return (<>
-        <div className="kokopu-logo">
-            <img src="kokopu-react-logo.png" />
-        </div>
-        <h1 className={classes.logo}>{children}</h1>
-    </>);
+    return (
+        <>
+            <div className="kokopu-logo">
+                <img src="kokopu-react-logo.png" />
+            </div>
+            <h1 className={classes.logo}>{children}</h1>
+        </>
+    );
 }
 
 export default Styled(styles)(LogoRenderer);

package/doc_src/theming/theming.css

@@ -3,7 +3,7 @@
  *                                                                            *
  *    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>       *
+ *    Copyright (C) 2021-2025  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      *