kokopu-react 3.3.0 → 3.3.2

package/doc_src/demo/PageChessboardInteraction.tsx

@@ -3,7 +3,7 @@
  *                                                                            *
  *    Kokopu-React - A React-based library of chess-related components.       *
  *    <https://www.npmjs.com/package/kokopu-react>                            *
- *    Copyright (C) 2021-2024  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *    Copyright (C) 2021-2025  Yoann Le Montagner <yo35 -at- melix.net>       *
  *                                                                            *
  *    Kokopu-React is free software: you can redistribute it and/or           *
  *    modify it under the terms of the GNU Lesser General Public License      *
@@ -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

@@ -3,7 +3,7 @@
  *                                                                            *
  *    Kokopu-React - A React-based library of chess-related components.       *
  *    <https://www.npmjs.com/package/kokopu-react>                            *
- *    Copyright (C) 2021-2024  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *    Copyright (C) 2021-2025  Yoann Le Montagner <yo35 -at- melix.net>       *
  *                                                                            *
  *    Kokopu-React is free software: you can redistribute it and/or           *
  *    modify it under the terms of the GNU Lesser General Public License      *
@@ -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

@@ -3,7 +3,7 @@
  *                                                                            *
  *    Kokopu-React - A React-based library of chess-related components.       *
  *    <https://www.npmjs.com/package/kokopu-react>                            *
- *    Copyright (C) 2021-2024  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *    Copyright (C) 2021-2025  Yoann Le Montagner <yo35 -at- melix.net>       *
  *                                                                            *
  *    Kokopu-React is free software: you can redistribute it and/or           *
  *    modify it under the terms of the GNU Lesser General Public License      *
@@ -35,9 +35,9 @@ import './demo.css';
 
 
 interface PageState {
-    squareSize: number;
-    windowWidth: number;
-    limits: SmallScreenLimit[];
+    squareSize: number,
+    windowWidth: number,
+    limits: SmallScreenLimit[],
 }
 
 

package/doc_src/demo/PageMovetextBase.tsx

@@ -3,7 +3,7 @@
  *                                                                            *
  *    Kokopu-React - A React-based library of chess-related components.       *
  *    <https://www.npmjs.com/package/kokopu-react>                            *
- *    Copyright (C) 2021-2024  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *    Copyright (C) 2021-2025  Yoann Le Montagner <yo35 -at- melix.net>       *
  *                                                                            *
  *    Kokopu-React is free software: you can redistribute it and/or           *
  *    modify it under the terms of the GNU Lesser General Public License      *
@@ -48,19 +48,19 @@ import invalidGame from './game-invalid.pgn';
 
 
 interface PageState {
-    pgn: string;
-    headerVisible: boolean;
-    diagramVisible: boolean;
-    pieceSymbols: 'native' | 'figurines' | 'custom';
-    customSymbols: PieceSymbolMapping;
+    pgn: string,
+    headerVisible: boolean,
+    diagramVisible: boolean,
+    pieceSymbols: 'native' | 'figurines' | 'custom',
+    customSymbols: PieceSymbolMapping,
     diagramOptions: {
-        flipped: boolean;
-        squareSize: number;
-        coordinateVisible: boolean;
-        turnVisible: boolean;
-        colorset: string;
-        pieceset: string;
-    };
+        flipped: boolean,
+        squareSize: number,
+        coordinateVisible: boolean,
+        turnVisible: boolean,
+        colorset: string,
+        pieceset: string,
+    },
 }
 
 
@@ -73,7 +73,7 @@ export default class Page extends React.Component<object, PageState> {
             headerVisible: true,
             diagramVisible: true,
             pieceSymbols: 'figurines',
-            customSymbols: { K:'R', Q:'D', R:'T', B:'F', N:'C', P:'P' },
+            customSymbols: { K: 'R', Q: 'D', R: 'T', B: 'F', N: 'C', P: 'P' },
             diagramOptions: {
                 flipped: false,
                 squareSize: 32,
@@ -97,66 +97,74 @@ export default class Page extends React.Component<object, PageState> {
 
     private renderControls() {
         const opts = this.state.diagramOptions;
-        return (<>
-            <Stack direction="row" spacing={2} alignItems="center">
-                <ButtonGroup color="primary" size="small">
-                    <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.setState({ headerVisible: !this.state.headerVisible })} color="primary" />}
-                />
-                <FormControlLabel label="Show diagrams"
-                    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.setState({ pieceSymbols: evt.target.value as PageState['pieceSymbols'] })}
-                    >
-                        <MenuItem value="native">Native</MenuItem>
-                        <MenuItem value="figurines">Figurines</MenuItem>
-                        <MenuItem value="custom">Custom</MenuItem>
-                    </Select>
-                </FormControl>
-                {this.renderCustomSymbolSelector()}
-            </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" />}
-                />
-                <FormControlLabel label="Show coordinates in diagram(s)"
-                    control={<Switch checked={opts.coordinateVisible} onChange={() => this.setDiagramOption({ coordinateVisible: !opts.coordinateVisible })} color="primary" />}
-                />
-                <FormControlLabel label="Show turn in diagram(s)"
-                    control={<Switch checked={opts.turnVisible} onChange={() => this.setDiagramOption({ turnVisible: !opts.turnVisible })} color="primary" />}
-                />
-            </Stack>
-            <Stack direction="row" spacing={2} alignItems="center">
-                <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 })}>
-                        {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 })}>
-                        {Object.keys(Chessboard.piecesets()).sort().map(pieceset => <MenuItem key={pieceset} value={pieceset}>{pieceset}</MenuItem>)}
-                    </Select>
-                </FormControl>
-            </Stack>
-            <Box>
-                <Typography gutterBottom>Diagram square size</Typography>
-                <Slider
-                    value={opts.squareSize} onChange={(_, newValue) => this.setDiagramOption({ squareSize: newValue as number })}
-                    min={Chessboard.minSquareSize()} max={Chessboard.maxSquareSize()} step={1} valueLabelDisplay="on" color="primary"
-                />
-            </Box>
-        </>);
+        return (
+            <>
+                <Stack direction="row" spacing={2} alignItems="center">
+                    <ButtonGroup color="primary" size="small">
+                        <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.setState({ headerVisible: !this.state.headerVisible })} color="primary" />}
+                    />
+                    <FormControlLabel
+                        label="Show diagrams"
+                        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.setState({ pieceSymbols: evt.target.value as PageState['pieceSymbols'] })}
+                        >
+                            <MenuItem value="native">Native</MenuItem>
+                            <MenuItem value="figurines">Figurines</MenuItem>
+                            <MenuItem value="custom">Custom</MenuItem>
+                        </Select>
+                    </FormControl>
+                    {this.renderCustomSymbolSelector()}
+                </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" />}
+                    />
+                    <FormControlLabel
+                        label="Show coordinates in diagram(s)"
+                        control={<Switch checked={opts.coordinateVisible} onChange={() => this.setDiagramOption({ coordinateVisible: !opts.coordinateVisible })} color="primary" />}
+                    />
+                    <FormControlLabel
+                        label="Show turn in diagram(s)"
+                        control={<Switch checked={opts.turnVisible} onChange={() => this.setDiagramOption({ turnVisible: !opts.turnVisible })} color="primary" />}
+                    />
+                </Stack>
+                <Stack direction="row" spacing={2} alignItems="center">
+                    <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 })}>
+                            {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 })}>
+                            {Object.keys(Chessboard.piecesets()).sort().map(pieceset => <MenuItem key={pieceset} value={pieceset}>{pieceset}</MenuItem>)}
+                        </Select>
+                    </FormControl>
+                </Stack>
+                <Box>
+                    <Typography gutterBottom>Diagram square size</Typography>
+                    <Slider
+                        value={opts.squareSize} onChange={(_, newValue) => this.setDiagramOption({ squareSize: newValue as number })}
+                        min={Chessboard.minSquareSize()} max={Chessboard.maxSquareSize()} step={1} valueLabelDisplay="on" color="primary"
+                    />
+                </Box>
+            </>
+        );
     }
 
     private renderCustomSymbolSelector() {
@@ -164,14 +172,16 @@ export default class Page extends React.Component<object, PageState> {
             return undefined;
         }
         const symbols = this.state.customSymbols;
-        return (<>
-            <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)} />
-        </>);
+        return (
+            <>
+                <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)} />
+            </>
+        );
     }
 
     private renderMovetext() {