kokopu-react 3.0.2 → 3.2.0

package/doc_src/demo/PageChessboardBase.tsx

@@ -48,125 +48,125 @@ const ARROW_MARKERS = 'Gd3b6,Rf3d6,Yh3f6';
 
 
 interface PageState {
-	position: string;
-	flipped: boolean;
-	squareSize: number;
-	coordinateVisible: boolean;
-	turnVisible: boolean;
-	annotationVisible: boolean;
-	colorset: string;
-	pieceset: string;
+    position: string;
+    flipped: boolean;
+    squareSize: number;
+    coordinateVisible: boolean;
+    turnVisible: boolean;
+    annotationVisible: boolean;
+    colorset: string;
+    pieceset: string;
 }
 
 
 export default class Page extends React.Component<object, PageState> {
 
-	constructor(props: object) {
-		super(props);
-		this.state = {
-			position: 'start',
-			flipped: false,
-			squareSize: 40,
-			coordinateVisible: true,
-			turnVisible: true,
-			annotationVisible: false,
-			colorset: 'original',
-			pieceset: 'cburnett',
-		};
-	}
-
-	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="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="Show annotations"
-					control={<Switch checked={this.state.annotationVisible} onChange={() => this.setState({ annotationVisible: !this.state.annotationVisible })} 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>
-				<ButtonGroup color="primary" size="small">
-					<Button onClick={() => this.setState({ position: 'empty' })}>Clear</Button>
-					<Button onClick={() => this.setState({ position: 'start' })}>Reset</Button>
-					<Button onClick={() => this.setState({ position: '8/8/8/8/8/4k3/q7/4K3 b - - 0 1' })}>Set FEN</Button>
-					<Button onClick={() => this.setState({ position: 'I\'m an invalid FEN string' })}>Set ill-formed FEN</Button>
-				</ButtonGroup>
-			</Stack>
-		</>);
-	}
-
-	private renderChessboard() {
-		return (
-			<Box>
-				<Chessboard
-					position={this.state.position}
-					flipped={this.state.flipped}
-					squareSize={this.state.squareSize}
-					coordinateVisible={this.state.coordinateVisible}
-					turnVisible={this.state.turnVisible}
-					squareMarkers={this.state.annotationVisible ? SQUARE_MARKERS : ''}
-					arrowMarkers={this.state.annotationVisible ? ARROW_MARKERS : ''}
-					colorset={this.state.colorset}
-					pieceset={this.state.pieceset}
-				/>
-			</Box>
-		);
-	}
-
-	private renderCode() {
-		const attributes: string[] = [];
-		if (this.state.position !== 'start') {
-			attributes.push(`position="${this.state.position}"`);
-		}
-		if (this.state.flipped) {
-			attributes.push('flipped');
-		}
-		if (this.state.annotationVisible) {
-			attributes.push(`squareMarkers="${SQUARE_MARKERS}"`);
-			attributes.push(`arrowMarkers="${ARROW_MARKERS}"`);
-		}
-		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}"`);
-		return <pre className="kokopu-demoCode">{buildComponentDemoCode('Chessboard', attributes)}</pre>;
-	}
+    constructor(props: object) {
+        super(props);
+        this.state = {
+            position: 'start',
+            flipped: false,
+            squareSize: 40,
+            coordinateVisible: true,
+            turnVisible: true,
+            annotationVisible: false,
+            colorset: 'original',
+            pieceset: 'cburnett',
+        };
+    }
+
+    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="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="Show annotations"
+                    control={<Switch checked={this.state.annotationVisible} onChange={() => this.setState({ annotationVisible: !this.state.annotationVisible })} 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>
+                <ButtonGroup color="primary" size="small">
+                    <Button onClick={() => this.setState({ position: 'empty' })}>Clear</Button>
+                    <Button onClick={() => this.setState({ position: 'start' })}>Reset</Button>
+                    <Button onClick={() => this.setState({ position: '8/8/8/8/8/4k3/q7/4K3 b - - 0 1' })}>Set FEN</Button>
+                    <Button onClick={() => this.setState({ position: 'I\'m an invalid FEN string' })}>Set ill-formed FEN</Button>
+                </ButtonGroup>
+            </Stack>
+        </>);
+    }
+
+    private renderChessboard() {
+        return (
+            <Box>
+                <Chessboard
+                    position={this.state.position}
+                    flipped={this.state.flipped}
+                    squareSize={this.state.squareSize}
+                    coordinateVisible={this.state.coordinateVisible}
+                    turnVisible={this.state.turnVisible}
+                    squareMarkers={this.state.annotationVisible ? SQUARE_MARKERS : ''}
+                    arrowMarkers={this.state.annotationVisible ? ARROW_MARKERS : ''}
+                    colorset={this.state.colorset}
+                    pieceset={this.state.pieceset}
+                />
+            </Box>
+        );
+    }
+
+    private renderCode() {
+        const attributes: string[] = [];
+        if (this.state.position !== 'start') {
+            attributes.push(`position="${this.state.position}"`);
+        }
+        if (this.state.flipped) {
+            attributes.push('flipped');
+        }
+        if (this.state.annotationVisible) {
+            attributes.push(`squareMarkers="${SQUARE_MARKERS}"`);
+            attributes.push(`arrowMarkers="${ARROW_MARKERS}"`);
+        }
+        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}"`);
+        return <pre className="kokopu-demoCode">{buildComponentDemoCode('Chessboard', attributes)}</pre>;
+    }
 
 }