react-chessboard-ui 0.1.1

package/README.md

@@ -0,0 +1,54 @@
+# rechess
+
+[![NPM](https://img.shields.io/npm/v/rechess.svg)](https://www.npmjs.com/package/rechess) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
+
+## ❗️ ATTENTION ❗️
+This is a package that is currently in active development.
+
+<img src="./blob/ChessBoard.png?raw=true" width="400px">
+
+## Install
+
+```bash
+npm install rechess
+```
+
+or
+
+```bash
+yarn add rechess
+```
+
+## Usage
+```tsx
+import React from 'react';
+import { ChessBoard } from 'rechess'; // ChessBoard is a base component of rechess
+
+import 'rechess/dist/index.css'; // required import css for ChessBoard
+
+export const App = () => {
+
+  // This handler for example 
+  const handleChangePosition = (data) => {
+    console.log(data);
+  }
+
+  return (
+    <div>
+      <ChessBoard 
+        FEN="rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1"
+        onChange={handleChangePosition}
+        color="white"
+        reversed={reversed} // For black
+      />
+    </div>
+  );
+}
+```
+
+## Designer
+[LinkedIn: Tatiana Utbanova](https://www.linkedin.com/in/tatiana-utbanova-6415b8271/)
+
+## License
+
+MIT © [](https://github.com/)

package/dist/ChessBoard/Arrow.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+interface ArrowProps {
+    start: number[];
+    end: number[];
+    color: string;
+}
+export declare const Arrow: FC<ArrowProps>;
+export {};

package/dist/ChessBoard/ArrowLayout.d.ts

@@ -0,0 +1,11 @@
+import { FC } from "react";
+import { CellPos } from "../JSChessEngine";
+import { ArrowCoords, ChessBoardConfig } from "./models";
+declare type ArrowLayoutType = {
+    startArrowCoord: CellPos;
+    arrowsCoords: ArrowCoords[];
+    grabbingPos: CellPos;
+    boardConfig: ChessBoardConfig;
+};
+export declare const ArrowLayout: FC<ArrowLayoutType>;
+export {};

package/dist/ChessBoard/ChessBoard.d.ts

@@ -0,0 +1,13 @@
+import { GameResult, MoveData } from "../JSChessEngine";
+import { FC } from "react";
+import { ChangeMove, ChessBoardConfig } from "./models";
+declare type ChessBoardProps = {
+    FEN: string;
+    onChange: (moveData: MoveData) => void;
+    onEndGame: (result: GameResult) => void;
+    change?: ChangeMove;
+    reversed?: boolean;
+    config?: Partial<ChessBoardConfig>;
+};
+export declare const ChessBoard: FC<ChessBoardProps>;
+export {};

package/dist/ChessBoard/ChessBoardCellsLayout.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import { ChessBoardConfig } from "./models";
+declare type ChessBoardCellsLayoutProps = {
+    size?: number;
+    boardConfig: ChessBoardConfig;
+};
+export declare const ChessBoardCellsLayout: FC<ChessBoardCellsLayoutProps>;
+export {};

package/dist/ChessBoard/ChessBoardControlLayout.d.ts

@@ -0,0 +1,16 @@
+import { FC } from "react";
+import { CellPos } from "../JSChessEngine";
+import { ChessBoardConfig } from "./models";
+declare type ChessBoardControlLayoutProps = {
+    size?: number;
+    boardConfig: ChessBoardConfig;
+    onClick: (position: CellPos) => void;
+    onGrabStart: (position: CellPos) => void;
+    onGrabStartRight: (position: CellPos) => void;
+    onGrabEnd: (position: CellPos) => void;
+    onGrabEndRight: (position: CellPos) => void;
+    onGrabbing: (x: number, y: number) => void;
+    onRightClick: (position: CellPos) => void;
+};
+export declare const ChessBoardControlLayout: FC<ChessBoardControlLayoutProps>;
+export {};

package/dist/ChessBoard/ChessBoardFiguresLayout.d.ts

@@ -0,0 +1,11 @@
+import { Cell } from "../JSChessEngine";
+import { FC } from "react";
+import { ChangeMove, ChessBoardConfig } from "./models";
+declare type ChessBoardFiguresLayoutProps = {
+    initialState: Cell[][];
+    change?: ChangeMove;
+    reversed?: boolean;
+    boardConfig: ChessBoardConfig;
+};
+export declare const ChessBoardFiguresLayout: FC<ChessBoardFiguresLayoutProps>;
+export {};

package/dist/ChessBoard/ChessBoardInteractiveLayout.d.ts

@@ -0,0 +1,15 @@
+import { FC } from "react";
+import { CellPos, Figure } from "../JSChessEngine";
+import { ChessBoardConfig } from "./models";
+declare type ChessBoardInteractiveLayoutProps = {
+    size?: number;
+    boardConfig: ChessBoardConfig;
+    selectedPos: CellPos;
+    possibleMoves: CellPos[];
+    markedCells: CellPos[];
+    holdedFigure?: Figure;
+    grabbingPos: CellPos;
+    onHasCheck: (cellPos: CellPos) => boolean;
+};
+export declare const ChessBoardInteractiveLayout: FC<ChessBoardInteractiveLayoutProps>;
+export {};

package/dist/ChessBoard/FigurePicker.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { Figure, FigureColor } from '../JSChessEngine';
+import { ChessBoardConfig } from './models';
+interface FigurePickerProps {
+    boardConfig: ChessBoardConfig;
+    color: FigureColor;
+    forPawnTransform?: boolean;
+    onSelect: (figure: Figure) => void;
+}
+export declare const FigurePicker: FC<FigurePickerProps>;
+export {};

package/dist/ChessBoard/HoldedFigure.d.ts

@@ -0,0 +1,10 @@
+import { CellPos, Figure } from "../JSChessEngine";
+import { FC } from "react";
+import { ChessBoardConfig } from "./models";
+declare type HoldedFigureProps = {
+    holdedFigure?: Figure;
+    grabbingPos: CellPos;
+    boardConfig: ChessBoardConfig;
+};
+export declare const HoldedFigure: FC<HoldedFigureProps>;
+export {};

package/dist/ChessBoard/chessPieciesMap.d.ts

@@ -0,0 +1,2 @@
+import { ChessPiecesMap } from "./models";
+export declare const CHESS_PIECES_MAP: ChessPiecesMap;

package/dist/ChessBoard/constants.d.ts

@@ -0,0 +1,13 @@
+import { ChessBoardConfig } from "./models";
+export declare const DEFAULT_CELL_SIZE = 92;
+export declare const FACTOR_FOR_SIZE_CIRCLE_MARK = 4.6;
+export declare const DEFAULT_CIRCLE_MARK_COLOR = "#3697ce";
+export declare const DEFAULT_WHITE_CELL_COLOR = "#fafafc";
+export declare const DEFAULT_BLACK_CELL_COLOR = "#d8d9e6";
+export declare const DEFAULT_SELECTED_CELL_COLOR = "#e3f1fe";
+export declare const DEFAULT_SELECTED_CELL_BORDER = "3px solid #6ac2fd";
+export declare const DEFAULT_ARROW_COLOR = "#6ac2fd";
+export declare const DEFAULT_MARKED_CELL_COLOR = "#3697ce";
+export declare const DEFAULT_CHECKED_CELL_COLOR = "#e95b5c";
+export declare const DEFAULT_PIECES_MAP: import("./models").ChessPiecesMap;
+export declare const DEFAULT_CHESSBORD_CONFIG: ChessBoardConfig;

package/dist/ChessBoard/index.d.ts

@@ -0,0 +1 @@
+export * from './ChessBoard';

package/dist/ChessBoard/models.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import { CellPos, Figure, MoveData } from "../JSChessEngine";
+export interface ChessPiecesMap {
+    [key: string]: (size: string) => JSX.Element;
+}
+export declare type ChessBoardConfig = {
+    cellSize: number;
+    whiteCellColor: string;
+    blackCellColor: string;
+    selectedCellColor: string;
+    selectedCellBorder: string;
+    markedCellColor: string;
+    circleMarkColor: string;
+    arrowColor: string;
+    checkedCellColor: string;
+    piecesMap: ChessPiecesMap;
+};
+export declare type ChangeMove = {
+    move: MoveData;
+    withTransition?: boolean;
+    attackedPos?: CellPos;
+    transformTo?: Figure;
+};
+export declare type ArrowCoords = {
+    start: number[];
+    end: number[];
+};

package/dist/ChessBoard/useChessBoardInteractive.d.ts

@@ -0,0 +1,41 @@
+/// <reference types="react" />
+import { Cell, CellPos, Figure, FigureColor, GameResult, MoveData } from "../JSChessEngine";
+import { ArrowCoords, ChangeMove, ChessBoardConfig } from "./models";
+declare type UseChessBoardInteractiveProps = {
+    config?: Partial<ChessBoardConfig>;
+    onChange: (moveData: MoveData) => void;
+    onEndGame: (result: GameResult) => void;
+};
+export declare const useChessBoardInteractive: (props: UseChessBoardInteractiveProps) => {
+    fromPos: CellPos;
+    newMove: ChangeMove;
+    boardConfig: ChessBoardConfig;
+    markedCells: CellPos[];
+    grabbingPos: CellPos;
+    actualState: Cell[][];
+    currentColor: FigureColor;
+    arrowsCoords: ArrowCoords[];
+    initialState: Cell[][];
+    holdedFigure: Figure;
+    possibleMoves: CellPos[];
+    linesWithCheck: CellPos[][];
+    startArrowCoord: CellPos;
+    showFigurePicker: boolean;
+    markCell: (cellPos: CellPos) => void;
+    setNewMove: import("react").Dispatch<import("react").SetStateAction<ChangeMove>>;
+    handleClick: (cellPos: CellPos) => void;
+    clearFromPos: () => void;
+    handleGrabEnd: (cellPos: CellPos, withTransition?: boolean) => void;
+    handleGrabbing: (x: number, y: number) => void;
+    endRenderArrow: ([x, y]: CellPos) => void;
+    setActualState: import("react").Dispatch<import("react").SetStateAction<Cell[][]>>;
+    setCurrentColor: import("react").Dispatch<import("react").SetStateAction<FigureColor>>;
+    selectClickFrom: (cellPos: CellPos) => void;
+    selectHoverFrom: (cellPos: CellPos) => void;
+    setInitialState: import("react").Dispatch<import("react").SetStateAction<Cell[][]>>;
+    startRenderArrow: (pos: CellPos) => void;
+    reverseChessBoard: () => void;
+    getHasCheckByCellPos: ([x, y]: CellPos) => boolean;
+    handleSelectFigurePicker: (figure: Figure) => void;
+};
+export {};

package/dist/ChessBoard/utils.d.ts

@@ -0,0 +1,51 @@
+import { Cell, CellPos, Figure, FigureColor, MoveData } from "../JSChessEngine";
+import { ChessBoardConfig } from "./models";
+/**
+ * Возвращает класс для фигуры в клетке
+ */
+export declare const getFigureCSS: (figure: Figure) => string;
+/**
+ * Возвращает белая ли клетка
+ */
+export declare const getIsLightCell: (rowId: number, cellId: number) => boolean;
+/**
+ * Функция, которая просто создает массив размером size
+ */
+export declare const getFilledArrayBySize: (size: number) => number[];
+/**
+ * Возвращает только массив фигурам у которых
+ * есть поле position
+ */
+export declare const mapCellsToFiguresArray: (boardState: Cell[][]) => Figure[];
+/**
+ *
+ * @param possibleMoves Список возможных ходов
+ * @param position позиция для проверки
+ */
+export declare const checkIsPossibleMove: (possibleMoves: CellPos[], position: CellPos) => boolean;
+/**
+ * Проверяет находится ли проверяемая позиция в
+ * наборе позиций
+ * @param positions набор позиций
+ * @param pos позиция
+ */
+export declare const checkPositionsHas: (positions: CellPos[] | undefined, pos: CellPos) => boolean;
+/**
+ * Проверяет, является ли ход рокеровкой
+ * @param moveData
+ * @returns
+ */
+export declare const checkIsCastlingMove: (moveData: MoveData) => boolean;
+/**
+ * Проверка клетки, на то есть ли шах
+ */
+export declare const hasCheck: (cell: Cell, currentColor: FigureColor, linesWithCheck: CellPos[][]) => boolean;
+export declare const degrees: (a: number, b: number) => number;
+export declare const calcAngle: (start: number[], end: number[]) => number;
+export declare const getChessBoardConfig: (config: Partial<ChessBoardConfig> | undefined) => ChessBoardConfig;
+/**
+ * Возвращает массив фигур по заданому цвету
+ * @param color цвет фигур
+ * @param forPawnTransform только фигуры для превращения пешки
+ */
+export declare const getFiguresByColor: (color: FigureColor, forPawnTransform?: boolean) => Figure[];

package/dist/JSChessEngine/FEN.utils.d.ts

@@ -0,0 +1,51 @@
+import type { FigureColor, Cell } from './JSChessEngine';
+/**
+ * Вовзвращет позицию клетки по состоянию fen
+ * @param positionFEN позиция из FEN вида e4
+ * @returns координаты для определения клетки на доске
+ */
+export declare const getPositionByFEN: (positionFEN: string) => number[];
+/**
+ * Проверяет по части FEN возможность рокировки
+ * и обновляет состояние доски для рокировки
+ * @param castlingNotation часть FEN-нотации описывающая рокировку
+ * @param state состояние доски
+ * @returns обновленное состояние доски
+ */
+export declare const prepareCastlingByFEN: (castlingNotation: string, state: Cell[][]) => Cell[][];
+/**
+ * Конвертирует часть FEN-нотации с фигурами в состояние доски
+ * @param state состояние доски
+ */
+export declare const partFENtoState: (notation: string) => Cell[][];
+/**
+ * Создает состояние доски
+ * по FEN-нотации
+ * rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1
+ * @param notation Описание текущего состояния от Stockfish https://hxim.github.io/Stockfish-Evaluation-Guide/
+ */
+export declare const FENtoGameState: (FEN: string) => {
+    boardState: Cell[][];
+    currentColor: FigureColor;
+};
+/**
+ * Возвращает FEN битое поле из состояние доски
+ * @param state состояние доски
+ */
+export declare const getBeatedCellFENfromState: (state: Cell[][]) => string;
+/**
+ * Возвращает FEN положение фигур на доске
+ * @param state состояние доски
+ */
+export declare const getFENpositionsFromState: (state: Cell[][]) => string;
+/**
+ * Возвращает FEN-рокеровку из состояния доски
+ * @param state состояние доски
+ */
+export declare const getFENcastlingFromState: (state: Cell[][]) => string;
+/**
+ * Преобразует состояние доски в FEN
+ * @param state
+ * @param countMoves
+ */
+export declare const stateToFEN: (state: Cell[][], currentColor: FigureColor, countMoves?: number) => string;