kokopu-react 1.11.0 → 2.0.0

package/doc_src/demo/{PageChessboardMove.js → PageChessboardMove.tsx}

@@ -1,4 +1,4 @@
-/******************************************************************************
+/* -------------------------------------------------------------------------- *
  *                                                                            *
  *    This file is part of Kokopu-React, a JavaScript chess library.          *
  *    Copyright (C) 2021-2023  Yoann Le Montagner <yo35 -at- melix.net>       *
@@ -17,13 +17,13 @@
  *    Public License along with this program. If not, see                     *
  *    <http://www.gnu.org/licenses/>.                                         *
  *                                                                            *
- ******************************************************************************/
+ * -------------------------------------------------------------------------- */
 
 
-import React from 'react';
+import * as React from 'react';
 import { exception, Position } from 'kokopu';
 
-import { Chessboard, ArrowMarkerIcon } from '../../src/index';
+import { Chessboard, ArrowMarkerIcon, AnnotationColor } from '../../src/index';
 import { buildComponentDemoCode } from './util';
 
 import Box from '@mui/material/Box';
@@ -41,16 +41,28 @@ import './demo.css';
 const COLOR_ICON_SIZE = 16;
 
 
-export default class Page extends React.Component {
+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;
+}
+
+
+export default class Page extends React.Component<object, PageState> {
 
-	constructor(props) {
+	constructor(props: object) {
 		super(props);
-		let position = new Position();
-		let positionAfter = new Position(position);
+		const position = new Position();
+		const positionAfter = new Position(position);
 		positionAfter.play('e4');
 		this.state = {
 			position: position,
-			positionAfter: positionAfter, // non-null only if a valid move has been played
+			positionAfter: positionAfter,
 			flipped: false,
 			moveArrowVisible: true,
 			moveArrowColor: 'b',
@@ -70,38 +82,38 @@ export default class Page extends React.Component {
 		);
 	}
 
-	renderControls() {
+	private renderControls() {
 		return (<>
 			<Stack direction="row" spacing={2} alignItems="center">
 				<FormControlLabel label="Flip"
-					control={<Switch checked={this.state.flipped} onChange={() => this.set('flipped', !this.state.flipped)} color="primary" />}
+					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.set('animated', !this.state.animated)} color="primary" />}
+					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.set('moveArrowVisible', !this.state.moveArrowVisible)} color="primary" />}
+					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.set('editedMove', evt.target.value)} />
+				<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.setPosition(new Position('empty'))}>Clear</Button>
-					<Button onClick={() => this.setPosition(new Position())}>Reset</Button>
+					<Button onClick={() => this.handlePositionChanged(new Position('empty'))}>Clear</Button>
+					<Button onClick={() => this.handlePositionChanged(new Position())}>Reset</Button>
 				</ButtonGroup>
 			</Stack>
 		</>);
 	}
 
-	renderColorSelector() {
+	private renderColorSelector() {
 		if (!this.state.moveArrowVisible) {
 			return undefined;
 		}
-		let colorset = Chessboard.colorsets()['original'];
+		const colorset = Chessboard.colorsets()['original'];
 		return (
-			<ToggleButtonGroup value={this.state.moveArrowColor} exclusive size="small" disabled={!this.state.positionAfter} onChange={(_, newColor) => this.setMoveColor(newColor)}>
+			<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>
@@ -110,12 +122,12 @@ export default class Page extends React.Component {
 		);
 	}
 
-	renderChessboard() {
+	private renderChessboard() {
 		return (
 			<Box>
 				<Chessboard
 					position={this.state.position}
-					move={this.state.playedMove}
+					move={this.state.playedMove === '' ? undefined : this.state.playedMove}
 					flipped={this.state.flipped}
 					moveArrowVisible={this.state.moveArrowVisible}
 					moveArrowColor={this.state.moveArrowColor}
@@ -125,8 +137,8 @@ export default class Page extends React.Component {
 		);
 	}
 
-	renderCode() {
-		let attributes = [];
+	private renderCode() {
+		const attributes: string[] = [];
 		attributes.push(`position="${this.state.position.fen()}"`);
 		if (this.state.playedMove !== '') {
 			attributes.push(`move="${this.state.playedMove}"`);
@@ -142,54 +154,54 @@ export default class Page extends React.Component {
 		return <pre className="kokopu-demoCode">{buildComponentDemoCode('Chessboard', attributes)}</pre>;
 	}
 
-	set(attributeName, newValue) {
-		let newState = {};
-		newState[attributeName] = newValue;
-		this.setState(newState);
-	}
-
-	setMoveColor(newValue) {
-		if (newValue !== null) {
-			this.set('moveArrowColor', newValue);
+	private handleMoveColorChanged(newColor: AnnotationColor | null) {
+		if (newColor !== null) {
+			this.setState({ moveArrowColor: newColor });
 		}
 	}
 
-	setPosition(newPosition) {
-		let newState = {};
-		newState.position = newPosition;
-		newState.playedMove = '';
-		newState.positionAfter = null;
-		this.setState(newState);
+	private handlePositionChanged(newPosition: Position) {
+		this.setState({
+			position: newPosition,
+			playedMove: '',
+			positionAfter: null,
+		});
 	}
 
-	handlePlayClicked() {
-		let newState = {};
-		let currentPosition = new Position(this.state.positionAfter ? this.state.positionAfter : this.state.position);
-		let move = this.state.editedMove.trim();
+	private handlePlayClicked() {
+		const currentPosition = new Position(this.state.positionAfter ? this.state.positionAfter : this.state.position);
+		const move = this.state.editedMove.trim();
 		if (move === '') {
-			newState.position = currentPosition;
-			newState.playedMove = '';
-			newState.positionAfter = null;
+			this.setState({
+				position: currentPosition,
+				playedMove: '',
+				positionAfter: null,
+			});
 		}
 		else {
 			try {
-				let moveDescriptor = currentPosition.notation(move);
-				newState.position = currentPosition;
-				newState.playedMove = currentPosition.notation(moveDescriptor);
-				newState.positionAfter = new Position(currentPosition);
-				newState.positionAfter.play(moveDescriptor);
+				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) {
-					newState.position = currentPosition;
-					newState.playedMove = move;
-					newState.positionAfter = null;
+					this.setState({
+						position: currentPosition,
+						playedMove: '',
+						positionAfter: null,
+					});
 				}
 				else {
 					throw e;
 				}
 			}
 		}
-		this.setState(newState);
 	}
+
 }

package/doc_src/demo/{PageChessboardSmallScreens.js → PageChessboardSmallScreens.tsx}

@@ -1,4 +1,4 @@
-/******************************************************************************
+/* -------------------------------------------------------------------------- *
  *                                                                            *
  *    This file is part of Kokopu-React, a JavaScript chess library.          *
  *    Copyright (C) 2021-2023  Yoann Le Montagner <yo35 -at- melix.net>       *
@@ -17,12 +17,12 @@
  *    Public License along with this program. If not, see                     *
  *    <http://www.gnu.org/licenses/>.                                         *
  *                                                                            *
- ******************************************************************************/
+ * -------------------------------------------------------------------------- */
 
 
-import React from 'react';
+import * as React from 'react';
 
-import { Chessboard } from '../../src/index';
+import { Chessboard, SmallScreenLimit } from '../../src/index';
 import { buildComponentDemoCode } from './util';
 
 import Box from '@mui/material/Box';
@@ -32,9 +32,18 @@ import Typography from '@mui/material/Typography';
 import './demo.css';
 
 
-export default class Page extends React.Component {
+interface PageState {
+	squareSize: number;
+	windowWidth: number;
+	limits: SmallScreenLimit[];
+}
+
+
+export default class Page extends React.Component<object, PageState> {
 
-	constructor(props) {
+	private windowResizeListener = () => this.handleWindowResize();
+
+	constructor(props: object) {
 		super(props);
 		this.state = {
 			squareSize: 56,
@@ -51,7 +60,6 @@ export default class Page extends React.Component {
 				{ width: 860, squareSize: 44 },
 			],
 		};
-		this.windowResizeListener = () => this.handleWindowResize();
 	}
 
 	componentDidMount() {
@@ -72,7 +80,7 @@ export default class Page extends React.Component {
 		);
 	}
 
-	renderControls() {
+	private renderControls() {
 		return (
 			<Box>
 				<Typography>Resize the browser to see the chessboard adapt its size...</Typography>
@@ -81,7 +89,7 @@ export default class Page extends React.Component {
 		);
 	}
 
-	renderChessboard() {
+	private renderChessboard() {
 		return (
 			<Box>
 				<Chessboard squareSize={this.state.squareSize} smallScreenLimits={this.state.limits} />
@@ -89,17 +97,17 @@ export default class Page extends React.Component {
 		);
 	}
 
-	renderCode() {
+	private renderCode() {
 
-		let limits = this.state.limits.map(limit => {
-			let limitAttributes = [`width: ${limit.width}`, `squareSize: ${limit.squareSize}`];
+		const limits = this.state.limits.map(limit => {
+			const limitAttributes = [`width: ${limit.width}`, `squareSize: ${limit.squareSize}`];
 			if ('coordinateVisible' in limit) {
 				limitAttributes.push(`coordinateVisible: ${limit.coordinateVisible}`);
 			}
 			return `    { ${limitAttributes.join(', ')} },\n`;
 		});
 
-		let attributes = [];
+		const attributes: string[] = [];
 		attributes.push(`squareSize={${this.state.squareSize}}`);
 		attributes.push('smallScreenLimits={limits}');
 		return (
@@ -114,7 +122,8 @@ export default class Page extends React.Component {
 		);
 	}
 
-	handleWindowResize() {
+	private handleWindowResize() {
 		this.setState({ windowWidth: window.innerWidth });
 	}
+
 }

package/doc_src/demo/{PageMovetextBase.js → PageMovetextBase.tsx}

@@ -1,4 +1,4 @@
-/******************************************************************************
+/* -------------------------------------------------------------------------- *
  *                                                                            *
  *    This file is part of Kokopu-React, a JavaScript chess library.          *
  *    Copyright (C) 2021-2023  Yoann Le Montagner <yo35 -at- melix.net>       *
@@ -17,12 +17,12 @@
  *    Public License along with this program. If not, see                     *
  *    <http://www.gnu.org/licenses/>.                                         *
  *                                                                            *
- ******************************************************************************/
+ * -------------------------------------------------------------------------- */
 
 
-import React from 'react';
+import * as React from 'react';
 
-import { Chessboard, Movetext } from '../../src/index';
+import { Chessboard, Movetext, PieceSymbolMapping } from '../../src/index';
 import { buildComponentDemoCode } from './util';
 
 import Box from '@mui/material/Box';
@@ -45,9 +45,25 @@ import game2 from './game-2.pgn';
 import invalidGame from './game-invalid.pgn';
 
 
-export default class Page extends React.Component {
+interface PageState {
+	pgn: string;
+	headerVisible: boolean;
+	diagramVisible: boolean;
+	pieceSymbols: 'native' | 'figurines' | 'custom';
+	customSymbols: PieceSymbolMapping;
+	diagramOptions: {
+		flipped: boolean;
+		squareSize: number;
+		coordinateVisible: boolean;
+		colorset: string;
+		pieceset: string;
+	};
+}
+
 
-	constructor(props) {
+export default class Page extends React.Component<object, PageState> {
+
+	constructor(props: object) {
 		super(props);
 		this.state = {
 			pgn: game1,
@@ -75,26 +91,28 @@ export default class Page extends React.Component {
 		);
 	}
 
-	renderControls() {
-		let opts = this.state.diagramOptions;
+	private renderControls() {
+		const opts = this.state.diagramOptions;
 		return (<>
 			<Stack direction="row" spacing={2} alignItems="center">
 				<ButtonGroup color="primary" size="small">
-					<Button onClick={() => this.set('pgn', game1)}>Game 1</Button>
-					<Button onClick={() => this.set('pgn', game2)}>Game 2</Button>
-					<Button onClick={() => this.set('pgn', invalidGame)}>Invalid game</Button>
+					<Button onClick={() => this.setState({ pgn: game1 })}>Game 1</Button>
+					<Button onClick={() => this.setState({ pgn: game2 })}>Game 2</Button>
+					<Button onClick={() => this.setState({ pgn: invalidGame })}>Invalid game</Button>
 				</ButtonGroup>
 				<FormControlLabel label="Show headers"
-					control={<Switch checked={this.state.headerVisible} onChange={() => this.set('headerVisible', !this.state.headerVisible)} color="primary" />}
+					control={<Switch checked={this.state.headerVisible} onChange={() => this.setState({ headerVisible: !this.state.headerVisible })} color="primary" />}
 				/>
 				<FormControlLabel label="Show diagrams"
-					control={<Switch checked={this.state.diagramVisible} onChange={() => this.set('diagramVisible', !this.state.diagramVisible)} color="primary" />}
+					control={<Switch checked={this.state.diagramVisible} onChange={() => this.setState({ diagramVisible: !this.state.diagramVisible })} color="primary" />}
 				/>
 			</Stack>
 			<Stack direction="row" spacing={2} alignItems="center">
 				<FormControl variant="standard">
 					<InputLabel id="piecesymbols-label">Piece symbols</InputLabel>
-					<Select labelId="piecesymbols-label" sx={{ width: '8em' }} value={this.state.pieceSymbols} onChange={evt => this.set('pieceSymbols', evt.target.value)}>
+					<Select labelId="piecesymbols-label" sx={{ width: '8em' }} value={this.state.pieceSymbols}
+						onChange={evt => this.setState({ pieceSymbols: evt.target.value as PageState['pieceSymbols'] })}
+					>
 						<MenuItem value="native">Native</MenuItem>
 						<MenuItem value="figurines">Figurines</MenuItem>
 						<MenuItem value="custom">Custom</MenuItem>
@@ -104,20 +122,20 @@ export default class Page extends React.Component {
 			</Stack>
 			<Stack direction="row" spacing={2} alignItems="center">
 				<FormControlLabel label="Flip diagram(s)"
-					control={<Switch checked={opts.flipped} onChange={() => this.setDiagramOption('flipped', !opts.flipped)} color="primary" />}
+					control={<Switch checked={opts.flipped} onChange={() => this.setDiagramOption({ flipped: !opts.flipped })} color="primary" />}
 				/>
 				<FormControlLabel label="Show coordinates in diagram(s)"
-					control={<Switch checked={opts.coordinateVisible} onChange={() => this.setDiagramOption('coordinateVisible', !opts.coordinateVisible)} color="primary" />}
+					control={<Switch checked={opts.coordinateVisible} onChange={() => this.setDiagramOption({ coordinateVisible: !opts.coordinateVisible })} color="primary" />}
 				/>
 				<FormControl variant="standard">
 					<InputLabel id="colorset-label">Colorset</InputLabel>
-					<Select labelId="colorset-label" sx={{ width: '8em' }} value={opts.colorset} onChange={evt => this.setDiagramOption('colorset', evt.target.value)}>
+					<Select labelId="colorset-label" sx={{ width: '8em' }} value={opts.colorset} onChange={evt => this.setDiagramOption({ 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={opts.pieceset} onChange={evt => this.setDiagramOption('pieceset', evt.target.value)}>
+					<Select labelId="pieceset-label" sx={{ width: '8em' }} value={opts.pieceset} onChange={evt => this.setDiagramOption({ pieceset: evt.target.value })}>
 						{Object.keys(Chessboard.piecesets()).sort().map(pieceset => <MenuItem key={pieceset} value={pieceset}>{pieceset}</MenuItem>)}
 					</Select>
 				</FormControl>
@@ -125,29 +143,29 @@ export default class Page extends React.Component {
 			<Box>
 				<Typography gutterBottom>Diagram square size</Typography>
 				<Slider
-					value={opts.squareSize} onChange={(_, newValue) => this.setDiagramOption('squareSize', newValue)}
+					value={opts.squareSize} onChange={(_, newValue) => this.setDiagramOption({ squareSize: newValue as number })}
 					min={Chessboard.minSquareSize()} max={Chessboard.maxSquareSize()} step={1} valueLabelDisplay="on" color="primary"
 				/>
 			</Box>
 		</>);
 	}
 
-	renderCustomSymbolSelector() {
+	private renderCustomSymbolSelector() {
 		if (this.state.pieceSymbols !== 'custom') {
 			return undefined;
 		}
-		let symbols = this.state.customSymbols;
+		const symbols = this.state.customSymbols;
 		return (<>
-			<TextField variant="standard" sx={{ width: '3em' }} label="King" value={symbols.K} onChange={evt => this.setCustomSymbol('K', evt.target.value)} />
-			<TextField variant="standard" sx={{ width: '3em' }} label="Queen" value={symbols.Q} onChange={evt => this.setCustomSymbol('Q', evt.target.value)} />
-			<TextField variant="standard" sx={{ width: '3em' }} label="Rook" value={symbols.R} onChange={evt => this.setCustomSymbol('R', evt.target.value)} />
-			<TextField variant="standard" sx={{ width: '3em' }} label="Bishop" value={symbols.B} onChange={evt => this.setCustomSymbol('B', evt.target.value)} />
-			<TextField variant="standard" sx={{ width: '3em' }} label="Knight" value={symbols.N} onChange={evt => this.setCustomSymbol('N', evt.target.value)} />
-			<TextField variant="standard" sx={{ width: '3em' }} label="Pawn" value={symbols.P} onChange={evt => this.setCustomSymbol('P', evt.target.value)} />
+			<TextField variant="standard" sx={{ width: '3em' }} label="King" value={symbols.K} onChange={evt => this.handleCustomSymbolChanged('K', evt.target.value)} />
+			<TextField variant="standard" sx={{ width: '3em' }} label="Queen" value={symbols.Q} onChange={evt => this.handleCustomSymbolChanged('Q', evt.target.value)} />
+			<TextField variant="standard" sx={{ width: '3em' }} label="Rook" value={symbols.R} onChange={evt => this.handleCustomSymbolChanged('R', evt.target.value)} />
+			<TextField variant="standard" sx={{ width: '3em' }} label="Bishop" value={symbols.B} onChange={evt => this.handleCustomSymbolChanged('B', evt.target.value)} />
+			<TextField variant="standard" sx={{ width: '3em' }} label="Knight" value={symbols.N} onChange={evt => this.handleCustomSymbolChanged('N', evt.target.value)} />
+			<TextField variant="standard" sx={{ width: '3em' }} label="Pawn" value={symbols.P} onChange={evt => this.handleCustomSymbolChanged('P', evt.target.value)} />
 		</>);
 	}
 
-	renderMovetext() {
+	private renderMovetext() {
 		return (
 			<Box>
 				<Movetext
@@ -161,32 +179,32 @@ export default class Page extends React.Component {
 		);
 	}
 
-	renderCode() {
-		let attributes = [];
+	private renderCode() {
+		const attributes: string[] = [];
 		attributes.push('game={pgn}');
 		attributes.push(`headerVisible={${this.state.headerVisible}}`);
 		attributes.push(`pieceSymbols=${this.getPieceSymbolsAsText()}`);
 		attributes.push(`diagramVisible={${this.state.diagramVisible}}`);
 		attributes.push(`diagramOptions={{ ${this.getDiagramAttributesAsText()} }}`);
-		let pgnDeclaration = 'const pgn = `\n' + this.state.pgn.trim() + '`;\n\n';
+		const pgnDeclaration = 'const pgn = `\n' + this.state.pgn.trim() + '`;\n\n';
 		return <pre className="kokopu-demoCode">{pgnDeclaration + buildComponentDemoCode('Movetext', attributes)}</pre>;
 	}
 
-	set(attributeName, newValue) {
-		let newState = {};
-		newState[attributeName] = newValue;
-		this.setState(newState);
+	private handleCustomSymbolChanged(key: keyof PieceSymbolMapping, value: string) {
+		const symbols = { ...this.state.customSymbols };
+		symbols[key] = value;
+		this.setState({ customSymbols: symbols });
 	}
 
-	setCustomSymbol(key, value) {
-		let symbols = {...this.state.customSymbols};
-		symbols[key] = value;
-		this.set('customSymbols', symbols);
+	private setDiagramOption(opts: Partial<PageState['diagramOptions']>) {
+		const diagramOptions = { ...this.state.diagramOptions };
+		Object.assign(diagramOptions, opts);
+		this.setState({ diagramOptions: diagramOptions });
 	}
 
-	getPieceSymbolsAsText() {
+	private getPieceSymbolsAsText() {
 		if (this.state.pieceSymbols === 'custom') {
-			let symbols = this.state.customSymbols;
+			const symbols = this.state.customSymbols;
 			return `{{ K:'${symbols.K}', Q:'${symbols.Q}', R:'${symbols.R}', B:'${symbols.B}', N:'${symbols.N}', P:'${symbols.P}' }}`;
 		}
 		else {
@@ -194,14 +212,8 @@ export default class Page extends React.Component {
 		}
 	}
 
-	setDiagramOption(key, value) {
-		let diagramOptions = {...this.state.diagramOptions};
-		diagramOptions[key] = value;
-		this.set('diagramOptions', diagramOptions);
-	}
-
-	getDiagramAttributesAsText() {
-		let attributes = [];
+	private getDiagramAttributesAsText() {
+		const attributes: string[] = [];
 		if (this.state.diagramOptions.flipped) {
 			attributes.push('flipped:true');
 		}
@@ -211,4 +223,5 @@ export default class Page extends React.Component {
 		attributes.push(`pieceset:'${this.state.diagramOptions.pieceset}'`);
 		return attributes.join(', ');
 	}
+
 }