kokopu-react 1.11.1 → 2.0.1

package/.eslintrc.yml

@@ -0,0 +1,83 @@
+env:
+  browser: true
+  es2020: true
+
+plugins:
+  - '@typescript-eslint'
+  - react
+
+settings:
+  react:
+    version: 18.2.0
+
+extends:
+  - 'eslint:recommended'
+  - 'plugin:@typescript-eslint/recommended'
+  - 'plugin:react/recommended'
+
+parser: '@typescript-eslint/parser'
+
+parserOptions:
+  sourceType: module
+
+rules:
+
+  # Style
+  indent:             [ error, tab, { SwitchCase: 1 }]
+  linebreak-style:    [ error, unix ]
+  quotes:             [ error, single ]
+  semi:               [ error, always ]
+  camelcase:          [ error ]
+  no-trailing-spaces: [ error ]
+
+  # Additional rules (possible errors)
+  no-console: [ error ]
+
+  # Additional rules (best practices)
+  curly:                        [ error, all ]
+  eqeqeq:                       [ error, always ]
+  no-alert:                     [ error ]
+  no-confusing-arrow:           [ error ]
+  no-constructor-return:        [ error ]
+  no-duplicate-imports:         [ error ]
+  no-eval:                      [ error ]
+  no-extend-native:             [ error ]
+  no-floating-decimal:          [ error ]
+  no-implicit-coercion:         [ error ]
+  no-implied-eval:              [ error ]
+  no-invalid-this:              [ error ]
+  no-labels:                    [ error ]
+  no-lone-blocks:               [ error ]
+  no-loop-func:                 [ error ]
+  no-new:                       [ error ]
+  no-new-func:                  [ error ]
+  no-new-wrappers:              [ error ]
+  no-octal-escape:              [ error ]
+  no-return-assign:             [ error, always ]
+  no-script-url:                [ error ]
+  no-self-compare:              [ error ]
+  no-throw-literal:             [ error ]
+  no-unmodified-loop-condition: [ error ]
+  no-unused-expressions:        [ error ]
+  no-useless-computed-key:      [ error ]
+  no-useless-concat:            [ error ]
+  no-useless-rename:            [ error ]
+  no-useless-return:            [ error ]
+  no-var:                       [ error ]
+  no-warning-comments:          [ warn, { location: anywhere, terms: [ TODO ] }]
+  prefer-arrow-callback:        [ error ]
+  prefer-const:                 [ error ]
+  prefer-regex-literals:        [ error ]
+  prefer-rest-params:           [ error ]
+  rest-spread-spacing:          [ error ]
+
+  # Additional rules (typescript)
+  '@typescript-eslint/no-shadow': [ error, { builtinGlobals: true }]
+
+  # Relaxed rules
+  no-constant-condition: [ error, { checkLoops: false }]
+
+  # Relaxed rules (typescript)
+  '@typescript-eslint/no-non-null-assertion': [ off ]
+  '@typescript-eslint/no-namespace':          [ off ]
+  '@typescript-eslint/no-empty-function':     [ error, { allow: [ private-constructors, protected-constructors ] }]

package/.nycrc.yml

@@ -10,5 +10,4 @@ check-coverage: true
 
 exclude:
   - build/**
-  - graphic_test_src/**
   - test/**

package/CHANGELOG.md

@@ -0,0 +1,178 @@
+ChangeLog
+=========
+
+2.0.1 (May 25, 2023)
+--------------------
+* Minor fixes.
+
+2.0.0 (February 21, 2023)
+-------------------------
+* Migration to TypeScript.
+* Breaking changes affecting `propTypes` properties and square size parameters:
+look at the [migration guide](https://kokopu-react.yo35.org/docs/current/#/Migrate%20to%202.x) for more details.
+
+1.11.1 (February 1, 2023)
+-------------------------
+* Fix drag-drop vs scroll conflict on mobile devices.
+
+1.11.0 (February 1, 2023)
+-------------------------
+* Remove dependency on react-draggable.
+* Add support for drag-drop on mobile devices.
+
+1.10.1 (January 31, 2023)
+-------------------------
+* Continuous integration with GitHub Actions instead of Travis-CI.
+
+1.10.0 (January 4, 2023)
+------------------------
+* Upgrade Kokopu to Kokopu 4.0.
+
+1.9.2 (December 17, 2022)
+-------------------------
+* Fix use of findDOMNode (deprecated React feature) by react-draggable (see [#2](https://github.com/yo35/kokopu-react/issues/2)).
+
+1.9.1 (November 17, 2022)
+-------------------------
+* Fix scroll issue on iOS (see [#1](https://github.com/yo35/kokopu-react/issues/1)).
+
+1.9.0 (September 6, 2022)
+-------------------------
+* Remove dependency on react-motion (unmaintained package).
+
+1.8.0 (August 26, 2022)
+-----------------------
+* Upgrade Kokopu to Kokopu 3.0.
+
+1.7.2 (August 3, 2022)
+----------------------
+* Fix URLs in documentation.
+
+1.7.1 (June 23, 2022)
+---------------------
+* `React` and `kokopu` declared as peer dependencies.
+* Minor fixes.
+
+1.7.0 (June 22, 2022)
+---------------------
+* Upgrade React to React 18.
+* Add support for color blue for markers.
+* Allow customization of the move arrow color in the `Chessboard` component.
+* Change the property names used to define the marker colors in the objects returned by `Chessboard.colorsets()`:
+`g`, `r`, `y` and `highlight` have become respectively `cg`, `cr`, `cy` and `cb`.
+
+1.6.0 (June 1, 2022)
+--------------------
+* Allow block-formatting HTML tags in PGN comments.
+* Provide `formatMove` and `moveFormatter`.
+
+1.5.5 (May 18, 2022)
+--------------------
+* Upgrade dependencies.
+* Remove dependency with security issue.
+
+1.5.4 (May 1, 2022)
+-------------------
+* Provide method `Chessboard#size(..)` to retrieve the width/height of a `Chessboard` component instance.
+
+1.5.3 (April 30, 2022)
+----------------------
+* Add method `Movetext#focus()`.
+* Expose static methods `Movetext#firstNodeId(..)`, `Movetext#previousNodeId(..)`, `Movetext#nextNodeId(..)`
+and `Movetext#lastNodeId(..)`.
+
+1.5.2 (April 29, 2022)
+----------------------
+* Prevent default actions when handling key events in component `Movetext`.
+
+1.5.1 (April 29, 2022)
+----------------------
+* Add argument `evtOrigin` in `onMoveSelected(..)` callback in component `Movetext`.
+
+1.5.0 (April 27, 2022)
+----------------------
+* Add component `Movetext` to display chess games.
+
+1.4.1 (January 1, 2022)
+-----------------------
+* Upgrade dependencies.
+
+1.4.0 (October 21, 2021)
+------------------------
+* Add support for plus/times/dot/circle in text markers.
+
+1.3.1 (September 27, 2021)
+--------------------------
+* Fix missing export for `ErrorBox`.
+
+1.3.0 (September 26, 2021)
+--------------------------
+* Expose component `ErrorBox`.
+* Minor fixes in documentation.
+
+1.2.0 (September 13, 2021)
+--------------------------
+* Fix ambiguous castling move issue at Chess960.
+
+1.1.0 (August 15, 2021)
+-----------------------
+* Provide interaction mode `playMoves`.
+* Add code coverage.
+
+1.0.2 (August 10, 2021)
+-----------------------
+* No need for ReactDOM in dependencies (dev-dependencies only).
+
+1.0.1 (July 30, 2021)
+---------------------
+* Wrong config in `package.json`.
+
+1.0.0 (July 30, 2021)
+---------------------
+* Implement graphic tests (using Selenium).
+* Provide documentation.
+* Fewer exported symbols: `adaptSquareSize(..)`, `colorsets` and `piecesets` are now defined as static members of `Chessboard`.
+
+0.99.11 (June 6, 2021)
+----------------------
+* Proper handling of small-screen limits in `adaptSquareSize(..)`.
+
+0.99.10 (May 30, 2021)
+----------------------
+* Support limits for square-size and coordinate-visible on small-screen devices.
+
+0.99.9 (May 24, 2021)
+---------------------
+* Utility functions to parse/flatten marker sets.
+* SVG icons for markers.
+
+0.99.8 (May 19, 2021)
+---------------------
+* Simplify arrow marker parameter definition.
+
+0.99.6 (May 7, 2021)
+--------------------
+* Revert change brought by version 0.99.5.
+
+0.99.5 (May 7, 2021)
+--------------------
+* Limit chessboard with to 90% of available space.
+
+0.99.4 (May 5, 2021)
+--------------------
+* Provide function `adaptSquareSize(..)`.
+* Minor fixes.
+
+0.99.3 (May 3, 2021)
+--------------------
+* Change attribute 'isFlipped' into 'flipped'.
+* Minor fixes.
+
+0.99.2 (April 25, 2021)
+-----------------------
+* Improve chessboard attribute validation.
+* Upgrade to Kokopu 1.8.0.
+
+0.99.0 (April 3, 2021)
+----------------------
+* First public draft.

package/CREDITS.md

@@ -0,0 +1,18 @@
+Credits
+=======
+
+Pieceset *CBurnett* has been created by [Colin M.L. Burnett](https://en.wikipedia.org/wiki/User:Cburnett),
+who shares it under the [CC-BY-SA] license on [Wikimedia Commons](https://commons.wikimedia.org/wiki/Category:SVG_chess_pieces);
+user [Antonsusi](https://commons.wikimedia.org/wiki/User:Antonsusi) has also contributed to this work.
+
+Piecesets *Celtic*, *Eyes*, *Fantasy*, *Skulls* and *Spatial* have been created by
+[Maurizio Monge](http://poisson.phc.dm.unipi.it/~monge/), who makes them freely available for chess programs.
+
+Colorsets *Coral*, *Dusk*, *Emerald*, *Marine*, *Sandcastle* and *Wheat* have been proposed
+in this [blog post](http://omgchess.blogspot.fr/2015/09/chess-board-color-schemes.html)
+by [Gorgonian](http://omgchess.blogspot.fr/).
+
+Chess font *Alpha* is a true type Font by [Eric Bentzen](http://www.enpassant.dk/chess/fonteng.htm), who makes it available
+freely for personal non commercial use.
+
+The author would like to thank all these people for their highly valuable work.

package/README.md

@@ -33,6 +33,6 @@ import { Chessboard } from 'kokopu-react';
 createRoot(document.body).render(<Chessboard />);
 ```
 
-![Chessboard component](test/references/02_chessboard_simple/0.png)
+![Chessboard component](test/graphic_references/05_chessboard_graphic/base/default.png)
 
 More examples available in [documentation & live-demo](https://kokopu-react.yo35.org/).

package/{src/css/chessboard.css → dist/lib/chessboard/Chessboard.css}

@@ -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,7 +17,7 @@
  *    Public License along with this program. If not, see                     *
  *    <http://www.gnu.org/licenses/>.                                         *
  *                                                                            *
- ******************************************************************************/
+ * -------------------------------------------------------------------------- */
 
 
 .kokopu-coordinate {

package/dist/lib/chessboard/Chessboard.d.ts

@@ -0,0 +1,171 @@
+import * as React from 'react';
+import { MoveDescriptor, Position, Square } from 'kokopu';
+import { Colorset, Pieceset, AnnotationColor, SquareMarkerSet, TextMarkerSet, ArrowMarkerSet } from '../types';
+/**
+ * Define a limit applicable to the parameters of a {@link Chessboard} on small-screen devices.
+ */
+export interface SmallScreenLimit {
+    width: number;
+    squareSize?: number;
+    coordinateVisible?: boolean;
+}
+export interface ChessboardProps {
+    /**
+     * Displayed position. Can be a [kokopu.Position](https://kokopu.yo35.org/docs/current/classes/Position.html) object,
+     * a [FEN string](https://en.wikipedia.org/wiki/Forsyth%E2%80%93Edwards_Notation),
+     * `'start'` (usual starting position), or `'empty'` (empty board).
+     *
+     * Optionally, the FEN string can be prefixed with `'variant:'`, `variant` corresponding to one of the
+     * [game variant](https://kokopu.yo35.org/docs/current/types/GameVariant.html) supported by Kokopu. For instance:
+     * `'chess960:nrkbqrbn/pppppppp/8/8/8/8/PPPPPPPP/NRKBQRBN w KQkq - 0 1'`.
+     */
+    position: Position | string;
+    /**
+     * Displayed move (optional), defined either as a [kokopu.MoveDescriptor](https://kokopu.yo35.org/docs/current/classes/MoveDescriptor.html) object
+     * or as a [SAN string](https://en.wikipedia.org/wiki/Algebraic_notation_(chess)) (e.g. `'Nf3'`). In both cases, it must represent
+     * a legal move in position defined in attribute `position`.
+     */
+    move?: MoveDescriptor | string;
+    /**
+     * Square markers, defined as a {@link SquareMarkerSet} (e.g. `{ e4: 'g', d5: 'r' }`) or as a comma-separated CSL string (e.g. `'Rd5,Ge4'`).
+     */
+    squareMarkers?: SquareMarkerSet | string;
+    /**
+     * Text markers, defined as a {@link TextMarkerSet} (e.g. `{ e4: { symbol: 'A', color: 'g' }, d5: { symbol: 'z', color: 'r' }}`)
+     * or as a comma-separated CTL string (e.g. `'Rzd5,GAe4'`).
+     */
+    textMarkers?: TextMarkerSet | string;
+    /**
+     * Arrow markers, defined as a {@link ArrowMarkerSet} (e.g. `{ e2e4: 'g', g8f6: 'r', g8h6: 'y' }`)
+     * or as a comma-separated CAL string (e.g. `'Ge2e4,Rg8f6,Yg8h6'`).
+     */
+    arrowMarkers?: ArrowMarkerSet | string;
+    /**
+     * Whether the board is flipped (i.e. seen from Black's point of view) or not.
+     */
+    flipped: boolean;
+    /**
+     * Size of the squares (in pixels). Must be an integer between `Chessboard.minSquareSize()` and `Chessboard.maxSquareSize()`.
+     */
+    squareSize: number;
+    /**
+     * Whether the row and column coordinates are visible or not.
+     */
+    coordinateVisible: boolean;
+    /**
+     * Whether moves are highlighted with an arrow or not.
+     */
+    moveArrowVisible: boolean;
+    /**
+     * Color of the move arrow.
+     */
+    moveArrowColor: AnnotationColor;
+    /**
+     * Whether moves are animated or not.
+     */
+    animated: boolean;
+    /**
+     * Color theme ID. Must be a property of `Chessboard.colorsets()`.
+     */
+    colorset: string;
+    /**
+     * Piece theme ID. Must be a property of `Chessboard.piecesets()`.
+     */
+    pieceset: string;
+    /**
+     * Limits applicable on small-screen devices. For instance, if set to
+     * ```
+     * [
+     *   { width: 768, squareSize: 40 },
+     *   { width: 375, squareSize: 24, coordinateVisible: false }
+     * ]
+     * ```
+     * then on screens with resolution ≤768 pixels, the square size will be limited to 40 (whatever the value
+     * of the `squareSize` attribute); in addition, on screens with resolution ≤375 pixels, the square size
+     * will be limited to 24 and the row and column coordinates will always be hidden (whatever the value of the
+     * `coordinateVisible` attribute).
+     */
+    smallScreenLimits?: SmallScreenLimit[];
+    /**
+     * Type of action allowed with the mouse on the chessboard. If undefined, then the user cannot interact with the component.
+     *
+     * - `'movePieces'` allows the user to drag & drop the chess pieces from one square to another (regardless of the chess rules),
+     * - `'clickSquares'` allows the user to click on squares,
+     * - `'editArrows'` allows the user to draw arrow markers from one square to another (warning: attribute `editedArrowColor` must be set),
+     * - `'playMoves'` allows the user to play legal chess moves (thus no interaction is possible if the displayed position is not legal).
+     */
+    interactionMode?: 'movePieces' | 'clickSquares' | 'editArrows' | 'playMoves';
+    /**
+     * Color of the edited arrow. Mandatory if `interactionMode === 'editArrows'`, ignored otherwise.
+     */
+    editedArrowColor?: AnnotationColor;
+    /**
+     * Callback invoked when a piece is moved through drag&drop (only if `interactionMode` is set to `'movePieces'`).
+     */
+    onPieceMoved?: (from: Square, to: Square) => void;
+    /**
+     * Callback invoked when the user clicks on a square (only if `interactionMode` is set to `'clickSquares'`).
+     */
+    onSquareClicked?: (square: Square) => void;
+    /**
+     * Callback invoked when an arrow is dragged (only if `interactionMode` is set to `'editArrows'`).
+     */
+    onArrowEdited?: (from: Square, to: Square) => void;
+    /**
+     * Callback invoked when a move is played (only if `interactionMode` is set to `'playMoves'`).
+     */
+    onMovePlayed?: (move: string) => void;
+}
+interface ChessboardState {
+    windowWidth: number;
+}
+/**
+ * SVG image representing a chessboard diagram. Optionally, the user may interact with the board (move pieces, click on squares...).
+ * Annotations such as square markers or arrows can also be added to the board.
+ */
+export declare class Chessboard extends React.Component<ChessboardProps, ChessboardState> {
+    static defaultProps: Partial<ChessboardProps>;
+    private windowResizeListener;
+    constructor(props: ChessboardProps);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    private handleWindowResize;
+    render(): React.JSX.Element;
+    private getInteractionModeAndValidateEditedArrowColor;
+    /**
+     * Return the size of the chessboard, assuming it is built with the given attributes.
+     */
+    static size(squareSize: number, coordinateVisible: boolean, smallScreenLimits?: SmallScreenLimit[]): {
+        width: number;
+        height: number;
+    };
+    /**
+     * Return the maximum square size that would allow the chessboard to fit in a rectangle of size `width x height`.
+     */
+    static adaptSquareSize(width: number, height: number, coordinateVisible: boolean, smallScreenLimits?: SmallScreenLimit[]): number;
+    /**
+     * Minimum square size (inclusive).
+     *
+     * @public
+     */
+    static minSquareSize(): number;
+    /**
+     * Maximum square size (inclusive).
+     *
+     * @public
+     */
+    static maxSquareSize(): number;
+    /**
+     * Available colorsets for theming.
+     *
+     * @public
+     */
+    static colorsets(): Record<string, Colorset>;
+    /**
+     * Available piecesets for theming.
+     *
+     * @public
+     */
+    static piecesets(): Record<string, Pieceset>;
+}
+export {};