kokopu-react 3.1.0 → 3.3.0

package/doc_src/demo/PageChessboardMove.tsx

@@ -44,183 +44,183 @@ const COLOR_ICON_SIZE = 16;
 
 
 interface PageState {
-	position: Position;
-	positionAfter: Position | null; // non-null only if a valid move has been played
-	flipped: boolean;
-	moveArrowVisible: boolean;
-	moveArrowColor: AnnotationColor;
-	animated: boolean;
-	editedMove: string;
-	playedMove: string;
+    position: Position;
+    positionAfter: Position | null; // non-null only if a valid move has been played
+    flipped: boolean;
+    moveArrowVisible: boolean;
+    moveArrowColor: AnnotationColor;
+    animated: boolean;
+    editedMove: string;
+    playedMove: string;
 }
 
 
 export default class Page extends React.Component<object, PageState> {
 
-	constructor(props: object) {
-		super(props);
-		const position = new Position();
-		const positionAfter = new Position(position);
-		positionAfter.play('e4');
-		this.state = {
-			position: position,
-			positionAfter: positionAfter,
-			flipped: false,
-			moveArrowVisible: true,
-			moveArrowColor: 'b',
-			animated: true,
-			editedMove: 'Nf6',
-			playedMove: 'e4',
-		};
-	}
-
-	render() {
-		return (
-			<Stack spacing={2} mt={2}>
-				{this.renderControls()}
-				{this.renderChessboard()}
-				{this.renderCode()}
-			</Stack>
-		);
-	}
-
-	private renderControls() {
-		return (<>
-			<Stack direction="row" spacing={2} alignItems="center">
-				<FormControlLabel label="Flip"
-					control={<Switch checked={this.state.flipped} onChange={() => this.setState({ flipped: !this.state.flipped })} color="primary" />}
-				/>
-				<FormControlLabel label="Animation" disabled={!this.state.positionAfter}
-					control={<Switch checked={this.state.animated} onChange={() => this.setState({ animated: !this.state.animated })} color="primary" />}
-				/>
-				<FormControlLabel label="Show move arrow" disabled={!this.state.positionAfter}
-					control={<Switch checked={this.state.moveArrowVisible} onChange={() => this.setState({ moveArrowVisible: !this.state.moveArrowVisible })} color="primary" />}
-				/>
-				{this.renderColorSelector()}
-			</Stack>
-			<Stack direction="row" spacing={2} alignItems="center">
-				<TextField label="Move" variant="standard" value={this.state.editedMove} onChange={evt => this.setState({ editedMove: evt.target.value })} />
-				<Button color="primary" size="small" variant="contained" onClick={() => this.handlePlayClicked()}>Play</Button>
-				<ButtonGroup color="primary" size="small">
-					<Button onClick={() => this.handlePositionChanged(new Position('empty'))}>Clear</Button>
-					<Button onClick={() => this.handlePositionChanged(new Position())}>Reset</Button>
-				</ButtonGroup>
-			</Stack>
-		</>);
-	}
-
-	private renderColorSelector() {
-		if (!this.state.moveArrowVisible) {
-			return undefined;
-		}
-		const colorset = Chessboard.colorsets()['original'];
-		return (
-			<ToggleButtonGroup value={this.state.moveArrowColor} exclusive size="small" disabled={!this.state.positionAfter} onChange={(_, newColor) => this.handleMoveColorChanged(newColor)}>
-				<ToggleButton className="kokopu-fixOpacity" value="b"><ArrowMarkerIcon size={COLOR_ICON_SIZE} color={colorset.cb} /></ToggleButton>
-				<ToggleButton className="kokopu-fixOpacity" value="g"><ArrowMarkerIcon size={COLOR_ICON_SIZE} color={colorset.cg} /></ToggleButton>
-				<ToggleButton className="kokopu-fixOpacity" value="r"><ArrowMarkerIcon size={COLOR_ICON_SIZE} color={colorset.cr} /></ToggleButton>
-				<ToggleButton className="kokopu-fixOpacity" value="y"><ArrowMarkerIcon size={COLOR_ICON_SIZE} color={colorset.cy} /></ToggleButton>
-			</ToggleButtonGroup>
-		);
-	}
-
-	private renderChessboard() {
-		return (
-			<Box>
-				<Chessboard
-					position={this.state.position}
-					move={this.state.playedMove === '' ? undefined : this.state.playedMove}
-					flipped={this.state.flipped}
-					moveArrowVisible={this.state.moveArrowVisible}
-					moveArrowColor={this.state.moveArrowColor}
-					animated={this.state.animated}
-				/>
-			</Box>
-		);
-	}
-
-	private renderCode() {
-		const attributes: string[] = [];
-		attributes.push(`position="${this.state.position.fen()}"`);
-		if (this.state.playedMove !== '') {
-			attributes.push(`move="${this.state.playedMove}"`);
-		}
-		if (this.state.flipped) {
-			attributes.push('flipped');
-		}
-		attributes.push(`animated={${this.state.animated}}`);
-		attributes.push(`moveArrowVisible={${this.state.moveArrowVisible}}`);
-		if (this.state.moveArrowVisible) {
-			attributes.push(`moveArrowColor={${this.state.moveArrowColor}}`);
-		}
-		return <pre className="kokopu-demoCode">{buildComponentDemoCode('Chessboard', attributes)}</pre>;
-	}
-
-	private handleMoveColorChanged(newColor: AnnotationColor | null) {
-		if (newColor !== null) {
-			this.setState({ moveArrowColor: newColor });
-		}
-	}
-
-	private handlePositionChanged(newPosition: Position) {
-		this.setState({
-			position: newPosition,
-			playedMove: '',
-			positionAfter: null,
-		});
-	}
-
-	private handlePlayClicked() {
-		const currentPosition = new Position(this.state.positionAfter ? this.state.positionAfter : this.state.position);
-		const move = this.state.editedMove.trim();
-		if (move === '') {
-			this.setState({
-				position: currentPosition,
-				playedMove: '',
-				positionAfter: null,
-			});
-		}
-		else if (move === '--') {
-			const positionAfter = new Position(currentPosition);
-			if (positionAfter.playNullMove()) {
-				this.setState({
-					position: currentPosition,
-					playedMove: '--',
-					positionAfter: positionAfter,
-				});
-			}
-			else {
-				this.setState({
-					position: currentPosition,
-					playedMove: '',
-					positionAfter: null,
-				});
-			}
-		}
-		else {
-			try {
-				const moveDescriptor = currentPosition.notation(move);
-				const positionAfter = new Position(currentPosition);
-				positionAfter.play(moveDescriptor);
-				this.setState({
-					position: currentPosition,
-					playedMove: currentPosition.notation(moveDescriptor),
-					positionAfter: positionAfter,
-				});
-			}
-			catch (e) {
-				if (e instanceof exception.InvalidNotation) {
-					this.setState({
-						position: currentPosition,
-						playedMove: '',
-						positionAfter: null,
-					});
-				}
-				else {
-					throw e;
-				}
-			}
-		}
-	}
+    constructor(props: object) {
+        super(props);
+        const position = new Position();
+        const positionAfter = new Position(position);
+        positionAfter.play('e4');
+        this.state = {
+            position: position,
+            positionAfter: positionAfter,
+            flipped: false,
+            moveArrowVisible: true,
+            moveArrowColor: 'b',
+            animated: true,
+            editedMove: 'Nf6',
+            playedMove: 'e4',
+        };
+    }
+
+    render() {
+        return (
+            <Stack spacing={2} mt={2}>
+                {this.renderControls()}
+                {this.renderChessboard()}
+                {this.renderCode()}
+            </Stack>
+        );
+    }
+
+    private renderControls() {
+        return (<>
+            <Stack direction="row" spacing={2} alignItems="center">
+                <FormControlLabel label="Flip"
+                    control={<Switch checked={this.state.flipped} onChange={() => this.setState({ flipped: !this.state.flipped })} color="primary" />}
+                />
+                <FormControlLabel label="Animation" disabled={!this.state.positionAfter}
+                    control={<Switch checked={this.state.animated} onChange={() => this.setState({ animated: !this.state.animated })} color="primary" />}
+                />
+                <FormControlLabel label="Show move arrow" disabled={!this.state.positionAfter}
+                    control={<Switch checked={this.state.moveArrowVisible} onChange={() => this.setState({ moveArrowVisible: !this.state.moveArrowVisible })} color="primary" />}
+                />
+                {this.renderColorSelector()}
+            </Stack>
+            <Stack direction="row" spacing={2} alignItems="center">
+                <TextField label="Move" variant="standard" value={this.state.editedMove} onChange={evt => this.setState({ editedMove: evt.target.value })} />
+                <Button color="primary" size="small" variant="contained" onClick={() => this.handlePlayClicked()}>Play</Button>
+                <ButtonGroup color="primary" size="small">
+                    <Button onClick={() => this.handlePositionChanged(new Position('empty'))}>Clear</Button>
+                    <Button onClick={() => this.handlePositionChanged(new Position())}>Reset</Button>
+                </ButtonGroup>
+            </Stack>
+        </>);
+    }
+
+    private renderColorSelector() {
+        if (!this.state.moveArrowVisible) {
+            return undefined;
+        }
+        const colorset = Chessboard.colorsets()['original'];
+        return (
+            <ToggleButtonGroup value={this.state.moveArrowColor} exclusive size="small" disabled={!this.state.positionAfter} onChange={(_, newColor) => this.handleMoveColorChanged(newColor)}>
+                <ToggleButton className="kokopu-fixOpacity" value="b"><ArrowMarkerIcon size={COLOR_ICON_SIZE} color={colorset.cb} /></ToggleButton>
+                <ToggleButton className="kokopu-fixOpacity" value="g"><ArrowMarkerIcon size={COLOR_ICON_SIZE} color={colorset.cg} /></ToggleButton>
+                <ToggleButton className="kokopu-fixOpacity" value="r"><ArrowMarkerIcon size={COLOR_ICON_SIZE} color={colorset.cr} /></ToggleButton>
+                <ToggleButton className="kokopu-fixOpacity" value="y"><ArrowMarkerIcon size={COLOR_ICON_SIZE} color={colorset.cy} /></ToggleButton>
+            </ToggleButtonGroup>
+        );
+    }
+
+    private renderChessboard() {
+        return (
+            <Box>
+                <Chessboard
+                    position={this.state.position}
+                    move={this.state.playedMove === '' ? undefined : this.state.playedMove}
+                    flipped={this.state.flipped}
+                    moveArrowVisible={this.state.moveArrowVisible}
+                    moveArrowColor={this.state.moveArrowColor}
+                    animated={this.state.animated}
+                />
+            </Box>
+        );
+    }
+
+    private renderCode() {
+        const attributes: string[] = [];
+        attributes.push(`position="${this.state.position.fen()}"`);
+        if (this.state.playedMove !== '') {
+            attributes.push(`move="${this.state.playedMove}"`);
+        }
+        if (this.state.flipped) {
+            attributes.push('flipped');
+        }
+        attributes.push(`animated={${this.state.animated}}`);
+        attributes.push(`moveArrowVisible={${this.state.moveArrowVisible}}`);
+        if (this.state.moveArrowVisible) {
+            attributes.push(`moveArrowColor={${this.state.moveArrowColor}}`);
+        }
+        return <pre className="kokopu-demoCode">{buildComponentDemoCode('Chessboard', attributes)}</pre>;
+    }
+
+    private handleMoveColorChanged(newColor: AnnotationColor | null) {
+        if (newColor !== null) {
+            this.setState({ moveArrowColor: newColor });
+        }
+    }
+
+    private handlePositionChanged(newPosition: Position) {
+        this.setState({
+            position: newPosition,
+            playedMove: '',
+            positionAfter: null,
+        });
+    }
+
+    private handlePlayClicked() {
+        const currentPosition = new Position(this.state.positionAfter ? this.state.positionAfter : this.state.position);
+        const move = this.state.editedMove.trim();
+        if (move === '') {
+            this.setState({
+                position: currentPosition,
+                playedMove: '',
+                positionAfter: null,
+            });
+        }
+        else if (move === '--') {
+            const positionAfter = new Position(currentPosition);
+            if (positionAfter.playNullMove()) {
+                this.setState({
+                    position: currentPosition,
+                    playedMove: '--',
+                    positionAfter: positionAfter,
+                });
+            }
+            else {
+                this.setState({
+                    position: currentPosition,
+                    playedMove: '',
+                    positionAfter: null,
+                });
+            }
+        }
+        else {
+            try {
+                const moveDescriptor = currentPosition.notation(move);
+                const positionAfter = new Position(currentPosition);
+                positionAfter.play(moveDescriptor);
+                this.setState({
+                    position: currentPosition,
+                    playedMove: currentPosition.notation(moveDescriptor),
+                    positionAfter: positionAfter,
+                });
+            }
+            catch (e) {
+                if (e instanceof exception.InvalidNotation) {
+                    this.setState({
+                        position: currentPosition,
+                        playedMove: '',
+                        positionAfter: null,
+                    });
+                }
+                else {
+                    throw e;
+                }
+            }
+        }
+    }
 
 }

package/doc_src/demo/PageChessboardSmallScreens.tsx

@@ -35,104 +35,104 @@ import './demo.css';
 
 
 interface PageState {
-	squareSize: number;
-	windowWidth: number;
-	limits: SmallScreenLimit[];
+    squareSize: number;
+    windowWidth: number;
+    limits: SmallScreenLimit[];
 }
 
 
 export default class Page extends React.Component<object, PageState> {
 
-	private windowResizeListener = () => this.handleWindowResize();
-
-	constructor(props: object) {
-		super(props);
-		this.state = {
-			squareSize: 56,
-			windowWidth: window.innerWidth,
-			limits: [
-				{ width: 160, squareSize: 12 },
-				{ width: 224, squareSize: 16 },
-				{ width: 250, turnVisible: false },
-				{ width: 340, squareSize: 24, coordinateVisible: false },
-				{ width: 450, squareSize: 32 },
-				{ width: 560, squareSize: 44 },
-				{ width: 600, squareSize: 52, coordinateVisible: true },
-				{ width: 640, squareSize: 24, coordinateVisible: false },
-				{ width: 750, squareSize: 32 },
-				{ width: 860, squareSize: 44 },
-			],
-		};
-	}
-
-	componentDidMount() {
-		window.addEventListener('resize', this.windowResizeListener);
-	}
-
-	componentWillUnmount() {
-		window.removeEventListener('resize', this.windowResizeListener);
-	}
-
-	render() {
-		return (
-			<Stack spacing={2} mt={2}>
-				{this.renderControls()}
-				{this.renderChessboard()}
-				{this.renderCode()}
-			</Stack>
-		);
-	}
-
-	private renderControls() {
-		return (
-			<Box>
-				<Typography>Resize the browser to see the chessboard adapt its size...</Typography>
-				<Typography>{`Current browser width: ${this.state.windowWidth} px`}</Typography>
-			</Box>
-		);
-	}
-
-	private renderChessboard() {
-		return (
-			<Box>
-				<Chessboard squareSize={this.state.squareSize} smallScreenLimits={this.state.limits} />
-			</Box>
-		);
-	}
-
-	private renderCode() {
-
-		const limits = this.state.limits.map(limit => {
-			const limitAttributes = [ `width: ${limit.width}` ];
-			if ('squareSize' in limit) {
-				limitAttributes.push(`squareSize: ${limit.squareSize}`);
-			}
-			if ('coordinateVisible' in limit) {
-				limitAttributes.push(`coordinateVisible: ${limit.coordinateVisible}`);
-			}
-			if ('turnVisible' in limit) {
-				limitAttributes.push(`turnVisible: ${limit.turnVisible}`);
-			}
-			return `    { ${limitAttributes.join(', ')} },\n`;
-		});
-
-		const attributes: string[] = [];
-		attributes.push(`squareSize={${this.state.squareSize}}`);
-		attributes.push('smallScreenLimits={limits}');
-		return (
-			<pre className="kokopu-demoCode">
-				{
-					'const limits = [\n' +
-					limits.join('') +
-					'];\n' +
-					buildComponentDemoCode('Chessboard', attributes)
-				}
-			</pre>
-		);
-	}
-
-	private handleWindowResize() {
-		this.setState({ windowWidth: window.innerWidth });
-	}
+    private windowResizeListener = () => this.handleWindowResize();
+
+    constructor(props: object) {
+        super(props);
+        this.state = {
+            squareSize: 56,
+            windowWidth: window.innerWidth,
+            limits: [
+                { width: 160, squareSize: 12 },
+                { width: 224, squareSize: 16 },
+                { width: 250, turnVisible: false },
+                { width: 340, squareSize: 24, coordinateVisible: false },
+                { width: 450, squareSize: 32 },
+                { width: 560, squareSize: 44 },
+                { width: 600, squareSize: 52, coordinateVisible: true },
+                { width: 640, squareSize: 24, coordinateVisible: false },
+                { width: 750, squareSize: 32 },
+                { width: 860, squareSize: 44 },
+            ],
+        };
+    }
+
+    componentDidMount() {
+        window.addEventListener('resize', this.windowResizeListener);
+    }
+
+    componentWillUnmount() {
+        window.removeEventListener('resize', this.windowResizeListener);
+    }
+
+    render() {
+        return (
+            <Stack spacing={2} mt={2}>
+                {this.renderControls()}
+                {this.renderChessboard()}
+                {this.renderCode()}
+            </Stack>
+        );
+    }
+
+    private renderControls() {
+        return (
+            <Box>
+                <Typography>Resize the browser to see the chessboard adapt its size...</Typography>
+                <Typography>{`Current browser width: ${this.state.windowWidth} px`}</Typography>
+            </Box>
+        );
+    }
+
+    private renderChessboard() {
+        return (
+            <Box>
+                <Chessboard squareSize={this.state.squareSize} smallScreenLimits={this.state.limits} />
+            </Box>
+        );
+    }
+
+    private renderCode() {
+
+        const limits = this.state.limits.map(limit => {
+            const limitAttributes = [ `width: ${limit.width}` ];
+            if ('squareSize' in limit) {
+                limitAttributes.push(`squareSize: ${limit.squareSize}`);
+            }
+            if ('coordinateVisible' in limit) {
+                limitAttributes.push(`coordinateVisible: ${limit.coordinateVisible}`);
+            }
+            if ('turnVisible' in limit) {
+                limitAttributes.push(`turnVisible: ${limit.turnVisible}`);
+            }
+            return `    { ${limitAttributes.join(', ')} },\n`;
+        });
+
+        const attributes: string[] = [];
+        attributes.push(`squareSize={${this.state.squareSize}}`);
+        attributes.push('smallScreenLimits={limits}');
+        return (
+            <pre className="kokopu-demoCode">
+                {
+                    'const limits = [\n' +
+                    limits.join('') +
+                    '];\n' +
+                    buildComponentDemoCode('Chessboard', attributes)
+                }
+            </pre>
+        );
+    }
+
+    private handleWindowResize() {
+        this.setState({ windowWidth: window.innerWidth });
+    }
 
 }