kokopu-react 3.2.0 → 3.3.1

package/doc_src/demo/PageChessboardBase.tsx

@@ -48,14 +48,14 @@ 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,
 }
 
 
@@ -86,49 +86,55 @@ export default class Page extends React.Component<object, PageState> {
     }
 
     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>
-        </>);
+        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() {

package/doc_src/demo/PageChessboardInteraction.tsx

@@ -52,17 +52,17 @@ const DEFAULT_FEN = 'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1';
 
 
 interface PageState {
-    position: Position;
-    flipped: boolean;
-    interactionMode: 'none' | 'addRemovePieces' | 'movePieces' | 'playMoves' | 'editSquareMarkers' | 'editTextMarkers' | 'editArrowMarkers';
-    pieceEditMode: ColoredPiece;
-    squareMarkerColor: AnnotationColor;
-    textMarkerColor: AnnotationColor;
-    textMarkerSymbol: AnnotationSymbol;
-    arrowMarkerColor: AnnotationColor;
-    squareMarkers: SquareMarkerSet;
-    textMarkers: TextMarkerSet;
-    arrowMarkers: ArrowMarkerSet;
+    position: Position,
+    flipped: boolean,
+    interactionMode: 'none' | 'addRemovePieces' | 'movePieces' | 'playMoves' | 'editSquareMarkers' | 'editTextMarkers' | 'editArrowMarkers',
+    pieceEditMode: ColoredPiece,
+    squareMarkerColor: AnnotationColor,
+    textMarkerColor: AnnotationColor,
+    textMarkerSymbol: AnnotationSymbol,
+    arrowMarkerColor: AnnotationColor,
+    squareMarkers: SquareMarkerSet,
+    textMarkers: TextMarkerSet,
+    arrowMarkers: ArrowMarkerSet,
 }
 
 
@@ -96,53 +96,68 @@ export default class Page extends React.Component<object, PageState> {
     }
 
     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" />}
-                />
-                <Button color="primary" size="small" variant="contained" onClick={() => this.handleTurnClicked(oppositeColor(this.state.position.turn()))}>
-                    Change turn
-                </Button>
-                <ButtonGroup color="primary" size="small">
-                    <Button onClick={() => this.setState({ position: new Position('empty') })}>Clear</Button>
-                    <Button onClick={() => this.setState({ position: new Position() })}>Reset</Button>
-                </ButtonGroup>
-            </Stack>
-            <Box>
-                <Typography gutterBottom>Interaction mode</Typography>
-                <RadioGroup value={this.state.interactionMode} onChange={evt => this.setState({ interactionMode: evt.target.value as PageState['interactionMode'] })}>
-                    <FormControlLabel value="none" control={<Radio color="primary" />} label="None" />
-                    <FormControlLabel value="addRemovePieces" control={<Radio color="primary" />} label={
-                        <Stack direction="row" spacing={2} alignItems="center">
-                            <span>Add/remove pieces</span>
-                            {this.renderPieceSelector()}
-                        </Stack>
-                    } />
-                    <FormControlLabel value="movePieces" control={<Radio color="primary" />} label="Move pieces" />
-                    <FormControlLabel value="playMoves" control={<Radio color="primary" />} label="Move pieces (obeying chess rules)" />
-                    <FormControlLabel value="editSquareMarkers" control={<Radio color="primary" />} label={
-                        <Stack direction="row" spacing={2} alignItems="center">
-                            <span>Edit square annotations</span>
-                            {this.renderMarkerColorSelector('editSquareMarkers', this.state.squareMarkerColor, newColor => this.handleSquareMarkerColorChanged(newColor))}
-                        </Stack>
-                    } />
-                    <FormControlLabel value="editTextMarkers" control={<Radio color="primary" />} label={
-                        <Stack direction="row" spacing={2} alignItems="center">
-                            <span>Edit text annotations</span>
-                            {this.renderMarkerColorSelector('editTextMarkers', this.state.textMarkerColor, newColor => this.handleTextMarkerColorChanged(newColor))}
-                            {this.renderTextMarkerSymbolSelector()}
-                        </Stack>
-                    } />
-                    <FormControlLabel value="editArrowMarkers" control={<Radio color="primary" />} label={
-                        <Stack direction="row" spacing={2} alignItems="center">
-                            <span>Edit arrow annotations</span>
-                            {this.renderMarkerColorSelector('editArrowMarkers', this.state.arrowMarkerColor, newColor => this.handleArrowMarkerColorChanged(newColor))}
-                        </Stack>
-                    } />
-                </RadioGroup>
-            </Box>
-        </>);
+        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" />}
+                    />
+                    <Button color="primary" size="small" variant="contained" onClick={() => this.handleTurnClicked(oppositeColor(this.state.position.turn()))}>
+                        Change turn
+                    </Button>
+                    <ButtonGroup color="primary" size="small">
+                        <Button onClick={() => this.setState({ position: new Position('empty') })}>Clear</Button>
+                        <Button onClick={() => this.setState({ position: new Position() })}>Reset</Button>
+                    </ButtonGroup>
+                </Stack>
+                <Box>
+                    <Typography gutterBottom>Interaction mode</Typography>
+                    <RadioGroup value={this.state.interactionMode} onChange={evt => this.setState({ interactionMode: evt.target.value as PageState['interactionMode'] })}>
+                        <FormControlLabel value="none" control={<Radio color="primary" />} label="None" />
+                        <FormControlLabel
+                            value="addRemovePieces" control={<Radio color="primary" />}
+                            label={(
+                                <Stack direction="row" spacing={2} alignItems="center">
+                                    <span>Add/remove pieces</span>
+                                    {this.renderPieceSelector()}
+                                </Stack>
+                            )}
+                        />
+                        <FormControlLabel value="movePieces" control={<Radio color="primary" />} label="Move pieces" />
+                        <FormControlLabel value="playMoves" control={<Radio color="primary" />} label="Move pieces (obeying chess rules)" />
+                        <FormControlLabel
+                            value="editSquareMarkers" control={<Radio color="primary" />}
+                            label={(
+                                <Stack direction="row" spacing={2} alignItems="center">
+                                    <span>Edit square annotations</span>
+                                    {this.renderMarkerColorSelector('editSquareMarkers', this.state.squareMarkerColor, newColor => this.handleSquareMarkerColorChanged(newColor))}
+                                </Stack>
+                            )}
+                        />
+                        <FormControlLabel
+                            value="editTextMarkers" control={<Radio color="primary" />}
+                            label={(
+                                <Stack direction="row" spacing={2} alignItems="center">
+                                    <span>Edit text annotations</span>
+                                    {this.renderMarkerColorSelector('editTextMarkers', this.state.textMarkerColor, newColor => this.handleTextMarkerColorChanged(newColor))}
+                                    {this.renderTextMarkerSymbolSelector()}
+                                </Stack>
+                            )}
+                        />
+                        <FormControlLabel
+                            value="editArrowMarkers" control={<Radio color="primary" />}
+                            label={(
+                                <Stack direction="row" spacing={2} alignItems="center">
+                                    <span>Edit arrow annotations</span>
+                                    {this.renderMarkerColorSelector('editArrowMarkers', this.state.arrowMarkerColor, newColor => this.handleArrowMarkerColorChanged(newColor))}
+                                </Stack>
+                            )}
+                        />
+                    </RadioGroup>
+                </Box>
+            </>
+        );
     }
 
     private renderPieceSelector() {
@@ -176,7 +191,7 @@ export default class Page extends React.Component<object, PageState> {
         if (this.state.interactionMode !== 'editTextMarkers') {
             return undefined;
         }
-        const availableSymbols = [ 'plus', 'times', 'dot', 'circle' ].concat([...'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789']);
+        const availableSymbols = [ 'plus', 'times', 'dot', 'circle' ].concat([ ...'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789' ]);
         return (
             <Select variant="standard" value={this.state.textMarkerSymbol} onChange={evt => this.setState({ textMarkerSymbol: evt.target.value as AnnotationSymbol })}>
                 {availableSymbols.map(mode => <MenuItem key={mode} value={mode}>{mode}</MenuItem>)}
@@ -326,7 +341,7 @@ export default class Page extends React.Component<object, PageState> {
         const newArrowMarkers = { ...this.state.arrowMarkers };
         const key = from + to as SquareCouple;
         if (newArrowMarkers[key] === this.state.arrowMarkerColor) {
-            delete newArrowMarkers[key];
+            delete newArrowMarkers[key]; // eslint-disable-line @typescript-eslint/no-dynamic-delete
         }
         else {
             newArrowMarkers[key] = this.state.arrowMarkerColor;
@@ -338,7 +353,7 @@ export default class Page extends React.Component<object, PageState> {
         if (this.state.interactionMode === 'editSquareMarkers') {
             const newSquareMarkers = { ...this.state.squareMarkers };
             if (newSquareMarkers[sq] === this.state.squareMarkerColor) {
-                delete newSquareMarkers[sq];
+                delete newSquareMarkers[sq]; // eslint-disable-line @typescript-eslint/no-dynamic-delete
             }
             else {
                 newSquareMarkers[sq] = this.state.squareMarkerColor;
@@ -348,12 +363,12 @@ export default class Page extends React.Component<object, PageState> {
         else if (this.state.interactionMode === 'editTextMarkers') {
             const newTextMarkers = { ...this.state.textMarkers };
             if (newTextMarkers[sq] && newTextMarkers[sq]!.color === this.state.textMarkerColor && newTextMarkers[sq]!.symbol === this.state.textMarkerSymbol) {
-                delete newTextMarkers[sq];
+                delete newTextMarkers[sq]; // eslint-disable-line @typescript-eslint/no-dynamic-delete
             }
             else {
                 newTextMarkers[sq] = { color: this.state.textMarkerColor, symbol: this.state.textMarkerSymbol };
             }
-            this.setState({ textMarkers:  newTextMarkers });
+            this.setState({ textMarkers: newTextMarkers });
         }
         else if (this.state.interactionMode === 'addRemovePieces') {
             const newPosition = new Position(this.state.position);

package/doc_src/demo/PageChessboardMove.tsx

@@ -44,14 +44,14 @@ 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,
 }
 
 
@@ -85,28 +85,33 @@ export default class Page extends React.Component<object, PageState> {
     }
 
     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>
-        </>);
+        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() {

package/doc_src/demo/PageChessboardSmallScreens.tsx

@@ -35,9 +35,9 @@ import './demo.css';
 
 
 interface PageState {
-    squareSize: number;
-    windowWidth: number;
-    limits: SmallScreenLimit[];
+    squareSize: number,
+    windowWidth: number,
+    limits: SmallScreenLimit[],
 }