kokopu-react 3.1.0 → 3.3.0

package/doc_src/demo/PageNavigationBoardBase.tsx

@@ -48,147 +48,154 @@ const COLOR_ICON_SIZE = 16;
 
 
 interface PageState {
-	squareSize: number;
-	coordinateVisible: boolean;
-	turnVisible: boolean;
-	colorset: string;
-	pieceset: string;
-	moveArrowVisible: boolean;
-	moveArrowColor: AnnotationColor;
-	animated: boolean;
-	flipButtonVisible: boolean;
+    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,
-			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 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}
-					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(`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 });
-		}
-	}
+    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

@@ -36,79 +36,79 @@ import pgn from './game-3.pgn';
 
 
 interface PageState {
-	nodeId: string;
+    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>;
-	}
+    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/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/NavigationBoard.md

@@ -11,5 +11,5 @@ const pgn = `
 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" />
+<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;
 }