kokopu-react 3.0.2 → 3.2.0

package/doc_src/demo/PageNavigationBoardBase.tsx

@@ -0,0 +1,201 @@
+/*!
+ * -------------------------------------------------------------------------- *
+ *                                                                            *
+ *    Kokopu-React - A React-based library of chess-related components.       *
+ *    <https://www.npmjs.com/package/kokopu-react>                            *
+ *    Copyright (C) 2021-2024  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *                                                                            *
+ *    Kokopu-React is free software: you can redistribute it and/or           *
+ *    modify it under the terms of the GNU Lesser General Public License      *
+ *    as published by the Free Software Foundation, either version 3 of       *
+ *    the License, or (at your option) any later version.                     *
+ *                                                                            *
+ *    Kokopu-React is distributed in the hope that it will be useful,         *
+ *    but WITHOUT ANY WARRANTY; without even the implied warranty of          *
+ *    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the            *
+ *    GNU Lesser General Public License for more details.                     *
+ *                                                                            *
+ *    You should have received a copy of the GNU Lesser General               *
+ *    Public License along with this program. If not, see                     *
+ *    <http://www.gnu.org/licenses/>.                                         *
+ *                                                                            *
+ * -------------------------------------------------------------------------- */
+
+
+import * as React from 'react';
+
+import { AnnotationColor, ArrowMarkerIcon, Chessboard, NavigationBoard } from '../../src/index';
+import { buildComponentDemoCode } from './util';
+
+import Box from '@mui/material/Box';
+import FormControl from '@mui/material/FormControl';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import Select from '@mui/material/Select';
+import Slider from '@mui/material/Slider';
+import Stack from '@mui/material/Stack';
+import Switch from '@mui/material/Switch';
+import ToggleButton from '@mui/material/ToggleButton';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import Typography from '@mui/material/Typography';
+
+import './demo.css';
+import pgn from './game-3.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;
+}
+
+
+export default class Page extends React.Component<object, PageState> {
+
+    constructor(props: object) {
+        super(props);
+        this.state = {
+            squareSize: 40,
+            coordinateVisible: true,
+            turnVisible: true,
+            colorset: 'original',
+            pieceset: 'cburnett',
+            moveArrowVisible: true,
+            moveArrowColor: 'b',
+            animated: true,
+            playButtonVisible: true,
+            flipButtonVisible: true,
+        };
+    }
+
+    render() {
+        return (
+            <Stack spacing={2} mt={2}>
+                {this.renderControls()}
+                {this.renderNavigationBoard()}
+                {this.renderCode()}
+            </Stack>
+        );
+    }
+
+    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>
+        </>);
+    }
+
+    private renderMoveArrowColorSelector() {
+        if (!this.state.moveArrowVisible) {
+            return undefined;
+        }
+        const colorset = Chessboard.colorsets()['original'];
+        return (
+            <ToggleButtonGroup value={this.state.moveArrowColor} exclusive size="small" onChange={(_, newColor) => this.handleMoveArrowColorChanged(newColor)}>
+                <ToggleButton value="b"><ArrowMarkerIcon size={COLOR_ICON_SIZE} color={colorset.cb} /></ToggleButton>
+                <ToggleButton value="g"><ArrowMarkerIcon size={COLOR_ICON_SIZE} color={colorset.cg} /></ToggleButton>
+                <ToggleButton value="r"><ArrowMarkerIcon size={COLOR_ICON_SIZE} color={colorset.cr} /></ToggleButton>
+                <ToggleButton value="y"><ArrowMarkerIcon size={COLOR_ICON_SIZE} color={colorset.cy} /></ToggleButton>
+            </ToggleButtonGroup>
+        );
+    }
+
+    private renderNavigationBoard() {
+        return (
+            <Box>
+                <NavigationBoard
+                    game={pgn}
+                    initialNodeId="end"
+                    squareSize={this.state.squareSize}
+                    coordinateVisible={this.state.coordinateVisible}
+                    turnVisible={this.state.turnVisible}
+                    colorset={this.state.colorset}
+                    pieceset={this.state.pieceset}
+                    moveArrowVisible={this.state.moveArrowVisible}
+                    moveArrowColor={this.state.moveArrowColor}
+                    animated={this.state.animated}
+                    playButtonVisible={this.state.playButtonVisible}
+                    flipButtonVisible={this.state.flipButtonVisible}
+                />
+            </Box>
+        );
+    }
+
+    private renderCode() {
+        const attributes: string[] = [];
+        attributes.push('game={pgn}');
+        attributes.push('initialNodeId="end"');
+        attributes.push(`squareSize={${this.state.squareSize}}`);
+        attributes.push(`coordinateVisible={${this.state.coordinateVisible}}`);
+        attributes.push(`turnVisible={${this.state.turnVisible}}`);
+        attributes.push(`colorset="${this.state.colorset}"`);
+        attributes.push(`pieceset="${this.state.pieceset}"`);
+        attributes.push(`moveArrowVisible={${this.state.moveArrowVisible}}`);
+        if (this.state.moveArrowVisible) {
+            attributes.push(`moveArrowColor="${this.state.moveArrowColor}"`);
+        }
+        attributes.push(`animated={${this.state.animated}}`);
+        attributes.push(`playButtonVisible={${this.state.playButtonVisible}}`);
+        attributes.push(`flipButtonVisible={${this.state.flipButtonVisible}}`);
+        const pgnDeclaration = 'const pgn = `\n' + pgn.trim() + '`;\n\n';
+        return <pre className="kokopu-demoCode">{pgnDeclaration + buildComponentDemoCode('NavigationBoard', attributes)}</pre>;
+    }
+
+    private handleMoveArrowColorChanged(newColor: AnnotationColor | null) {
+        if (newColor !== null) {
+            this.setState({ moveArrowColor: newColor });
+        }
+    }
+
+}

package/doc_src/demo/PageNavigationBoardUncontrolledVsControlled.tsx

@@ -0,0 +1,114 @@
+/*!
+ * -------------------------------------------------------------------------- *
+ *                                                                            *
+ *    Kokopu-React - A React-based library of chess-related components.       *
+ *    <https://www.npmjs.com/package/kokopu-react>                            *
+ *    Copyright (C) 2021-2024  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *                                                                            *
+ *    Kokopu-React is free software: you can redistribute it and/or           *
+ *    modify it under the terms of the GNU Lesser General Public License      *
+ *    as published by the Free Software Foundation, either version 3 of       *
+ *    the License, or (at your option) any later version.                     *
+ *                                                                            *
+ *    Kokopu-React is distributed in the hope that it will be useful,         *
+ *    but WITHOUT ANY WARRANTY; without even the implied warranty of          *
+ *    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the            *
+ *    GNU Lesser General Public License for more details.                     *
+ *                                                                            *
+ *    You should have received a copy of the GNU Lesser General               *
+ *    Public License along with this program. If not, see                     *
+ *    <http://www.gnu.org/licenses/>.                                         *
+ *                                                                            *
+ * -------------------------------------------------------------------------- */
+
+
+import * as React from 'react';
+
+import { NavigationBoard } from '../../src/index';
+import { buildComponentDemoCode } from './util';
+
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+
+import './demo.css';
+import pgn from './game-3.pgn';
+
+
+interface PageState {
+    nodeId: string;
+}
+
+
+export default class Page extends React.Component<object, PageState> {
+
+    constructor(props: object) {
+        super(props);
+        this.state = {
+            nodeId: '9b',
+        };
+    }
+
+    render() {
+        return (
+            <Stack spacing={2} mt={2}>
+                {this.renderControls()}
+                {this.renderNavigationBoards()}
+                {this.renderCode()}
+            </Stack>
+        );
+    }
+
+    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>
+        </>);
+    }
+
+    private renderNavigationBoards() {
+        return (
+            <Box display="flex" alignItems="top" justifyContent="space-around">
+                <Box>
+                    <NavigationBoard game={pgn} animated initialNodeId="9b" />
+                    <Typography mt={2} textAlign="center">Uncontrolled</Typography>
+                </Box>
+                <Box>
+                    <NavigationBoard game={pgn} animated nodeId={this.state.nodeId} onNodeIdChanged={nodeId => this.setState({ nodeId: nodeId })} />
+                    <Typography mt={2} textAlign="center">Controlled</Typography>
+                    <Typography textAlign="center">{`Current node ID: ${this.state.nodeId}`}</Typography>
+                </Box>
+            </Box>
+        );
+    }
+
+    private renderCode() {
+
+        const uncontrolledAttributes: string[] = [];
+        uncontrolledAttributes.push('game={pgn}');
+        uncontrolledAttributes.push('animated');
+        uncontrolledAttributes.push('initialNodeId="9b"');
+
+        const controlledAttributes: string[] = [];
+        controlledAttributes.push('game={pgn}');
+        controlledAttributes.push('animated');
+        controlledAttributes.push(`nodeId="${this.state.nodeId}"`);
+        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>;
+    }
+
+}

package/doc_src/demo/decs.d.ts

@@ -23,11 +23,11 @@
 
 
 declare module '*.pgn' {
-	const pgnText: string;
-	export default pgnText;
+    const pgnText: string;
+    export default pgnText;
 }
 
 declare module '*.png' {
-	const path: string;
-	export default path;
+    const path: string;
+    export default path;
 }

package/doc_src/demo/demo.css

@@ -23,25 +23,25 @@
 
 
 .kokopu-demoCode {
-	border: 1px solid rgb(232, 232, 232);
-	border-radius: 3px;
-	background-color: rgb(245, 245, 245);
-	font-size: 13px;
-	padding: 16px;
-	white-space: pre-wrap;
+    border: 1px solid rgb(232, 232, 232);
+    border-radius: 3px;
+    background-color: rgb(245, 245, 245);
+    font-size: 13px;
+    padding: 16px;
+    white-space: pre-wrap;
 }
 
 .MuiToggleButton-root.kokopu-fixTextTransform {
-	text-transform: none;
+    text-transform: none;
 }
 
 .MuiToggleButton-root.Mui-disabled.kokopu-fixOpacity .kokopu-arrowMarkerIcon {
-	opacity: 0.3;
+    opacity: 0.3;
 }
 
 .kokopu-fixedPopup {
-	position: fixed;
-	bottom: 20px;
-	right: 20px;
-	padding: 10px;
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    padding: 10px;
 }

package/doc_src/demo/game-3.pgn

@@ -0,0 +1,10 @@
+[Event "Television Exhibition"]
+[Site "London ENG"]
+[Date "2014.01.23"]
+[Round "?"]
+[White "Bill Gates"]
+[Black "Magnus Carlsen"]
+[Result "0-1"]
+
+1.e4 Nc6 2.Nf3 d5 3.Bd3 Nf6 4.exd5 Qxd5 5.Nc3 Qh5 6.O-O Bg4
+7.h3 Ne5 8.hxg4 Nfxg4 9.Nxe5 Qh2# 0-1

package/doc_src/demo/util.ts

@@ -23,5 +23,5 @@
 
 
 export function buildComponentDemoCode(componentName: string, attributes: string[]) {
-	return attributes.length === 0 ? `<${componentName} />` : `<${componentName} ${attributes.join(' ')} />`;
+    return attributes.length === 0 ? `<${componentName} />` : `<${componentName} ${attributes.join(' ')} />`;
 }

package/doc_src/examples/Movetext.md

@@ -1,5 +1,5 @@
 ```js
-let pgn = `
+const pgn = `
 [Event "Television Exhibition"]
 [Site "London ENG"]
 [Date "2014.01.23"]

package/doc_src/examples/NavigationBoard.md

@@ -0,0 +1,15 @@
+```js
+const pgn = `
+[Event "Television Exhibition"]
+[Site "London ENG"]
+[Date "2014.01.23"]
+[Round "?"]
+[White "Bill Gates"]
+[Black "Magnus Carlsen"]
+[Result "0-1"]
+
+1.e4 Nc6 2.Nf3 d5 3.Bd3 Nf6 4.exd5 Qxd5 5.Nc3 Qh5 6.O-O Bg4
+7.h3 Ne5 8.hxg4 Nfxg4 9.Nxe5 Qh2# 0-1`;
+
+<NavigationBoard game={pgn} initialNodeId="end" playButtonVisible />
+```

package/doc_src/theming/LogoRenderer.js

@@ -31,22 +31,22 @@ import './theming.css';
 /* eslint-disable react/prop-types */
 
 const styles = ({ color, fontFamily, fontSize }) => ({
-	logo: {
-		color: color.base,
-		margin: 0,
-		fontFamily: fontFamily.base,
-		fontSize: fontSize.h4,
-		fontWeight: 'normal',
-	},
+    logo: {
+        color: color.base,
+        margin: 0,
+        fontFamily: fontFamily.base,
+        fontSize: fontSize.h4,
+        fontWeight: 'normal',
+    },
 });
 
 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

@@ -23,15 +23,15 @@
  
  
 .kokopu-logo {
-	text-align: center;
+    text-align: center;
 }
 
 footer {
-	display: none !important;
+    display: none !important;
 }
 
 #changelog h2 {
-	font-size: inherit;
-	font-weight: bold;
-	margin-top: 24px;
+    font-size: inherit;
+    font-weight: bold;
+    margin-top: 24px;
 }