react-chessboard-ui 2.9.0 → 2.11.0

package/README.md

@@ -3,9 +3,14 @@
 [![NPM](https://img.shields.io/npm/v/react-chessboard-ui.svg)](https://www.npmjs.com/package/react-chessboard-ui)
 [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 
-A lightweight and customizable React chessboard component built with modern UI in mind. Easily integrate chess functionality into your React apps with FEN support, game-end detection, and position handling.
+<p align="center">
+  <img src="./blob/default.png?raw=true" width="23%" alt="Default react-chessboard-ui board" />
+  <img src="./blob/customization.png?raw=true" width="23%" alt="Customized react-chessboard-ui board" />
+  <img src="./blob/colorfull_arrows.png?raw=true" width="23%" alt="React chessboard with colorful arrows" />
+  <img src="./blob/all_queens.png?raw=true" width="23%" alt="React chessboard with custom pieces" />
+</p>
 
-<img src="./blob/ChessBoard.png?raw=true" width="400px" alt="react-chessboard-ui preview" />
+An all-in-one React chessboard component with both the chess engine and UI included. Drop it into your React app and get a ready-to-use chessboard without wiring up separate chess logic, move validation, or board state tools. Control the board position with simple FEN notation and react to moves or game-end events through callbacks.
 
 ## 📘 **Full documentation**: [https://react-chessboard-ui.dev/](https://react-chessboard-ui.dev/)
 
@@ -14,10 +19,18 @@ A lightweight and customizable React chessboard component built with modern UI i
 ## 🚀 Features
 
 - 🎯 Fully controlled via FEN strings
+- ♟️ Built-in chess engine and ready-made board UI
+- ✅ Move validation included
 - ♻️ React functional component with hooks support
 - 🎨 Customizable styles (via CSS or override)
 - ♟️ Game-end and move-change callbacks
-- 🧩 Easy integration into any React project
+- 🧩 No extra chess packages or setup required
+
+---
+
+## Why react-chessboard-ui?
+
+`react-chessboard-ui` is designed for developers who need a React chessboard, chess UI, and chess engine in one package. It is not just a board renderer: it provides drag-and-drop chess pieces, FEN-based position control, legal move handling, game-end detection, and customization options out of the box.
 
 ---
 
@@ -46,19 +59,16 @@ import 'react-chessboard-ui/dist/index.css'; // Required CSS
 
 export const App = () => {
   return (
-    <div>
-      <ChessBoard
-        FEN="rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1"
-        onChange={handleChangePosition}
-        onEndGame={handleEndGame}
-      />
-    </div>
+    <ChessBoard
+      FEN="rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1"
+      onChange={handleChangePosition}
+      onEndGame={handleEndGame}
+    />
   );
 };
 ```
 
 ## Full customizable
-<img src="./blob/customization.png?raw=true" width="400px" alt="react-chessboard-ui preview" />
 
 ### 📘 **Documentation for customization**: [https://react-chessboard-ui.dev/properties/config/](https://react-chessboard-ui.dev/properties/config/)
 
@@ -82,4 +92,4 @@ MIT © [react-chessboard-ui](https://github.com/)
 
 ## 🧠 Keywords (for discoverability)
 
-`react` `chess` `chessboard` `react-chess` `chess ui` `react chess component` `fen` `chess game` `react board game`
+`react` `react-chess` `react-chessboard` `react-chessboard-ui` `js-chess` `chess` `chessboard` `chessboard component` `chess engine`

package/dist/ChessBoard/ChessBoard.d.ts

@@ -16,6 +16,7 @@ declare type ChessBoardProps = {
     arrows?: (ArrowCoords & {
         color?: string;
     })[];
+    toggleTurn?: boolean;
 };
 export declare const ChessBoard: FC<ChessBoardProps>;
 export {};

package/dist/ChessBoard/useChessBoardInteractive.d.ts

@@ -6,12 +6,14 @@ declare type UseChessBoardInteractiveProps = {
     onChange: (moveData: MoveData) => void;
     onEndGame: (result: GameResult) => void;
     onClickByChessBoard?: (data: ClickData) => void;
+    toggleTurn?: boolean;
 };
 export declare const useChessBoardInteractive: (props: UseChessBoardInteractiveProps) => {
     fromPos: CellPos;
     newMove: ChangeMove;
     animated: boolean;
     movesTrail: [CellPos, CellPos];
+    invalidFEN: boolean;
     boardConfig: ChessBoardConfig;
     markedCells: CellPos[];
     grabbingPos: CellPos;
@@ -31,6 +33,7 @@ export declare const useChessBoardInteractive: (props: UseChessBoardInteractiveP
     handleClick: (cellPos: CellPos, viewOnly?: boolean) => void;
     clearFromPos: () => void;
     handleGrabEnd: (cellPos: CellPos, withTransition?: boolean) => void;
+    setInvalidFEN: import("react").Dispatch<import("react").SetStateAction<boolean>>;
     handleGrabbing: (x: number, y: number) => void;
     endRenderArrow: ([x, y]: CellPos) => void;
     setActualState: import("react").Dispatch<import("react").SetStateAction<Cell[][]>>;

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

@@ -27,6 +27,7 @@ export declare const partFENtoState: (notation: string) => Cell[][];
 export declare const FENtoGameState: (FEN: string, reversed?: boolean) => {
     boardState: Cell[][];
     currentColor: FigureColor;
+    invalidFEN?: boolean;
 };
 /**
  * Возвращает FEN битое поле из состояние доски

package/dist/index.css

@@ -148,6 +148,47 @@
     align-items: center;
 }
 
+._jyC3- {
+    z-index: 102;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    -webkit-backdrop-filter: blur(4px);
+            backdrop-filter: blur(4px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+._8urIN {
+  padding: 12px 14px;
+  border: 1px solid #f4b8b8;
+  border-radius: 6px;
+  background: #fff1f1;
+  color: #8a1f1f;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+._8urIN a {
+  color: #b42318;
+  font-weight: 600;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  cursor: pointer;
+}
+
+._8urIN a:hover {
+  color: #7a1712;
+}
+
+._3p5AF {
+    color: #6b6b6b !important;
+    font-size: 12px;
+}
+
 ._1RqCc {
     width: 100%;
     height: 100%;

package/dist/index.js

@@ -1491,6 +1491,8 @@ var prepareCastlingByFEN = function prepareCastlingByFEN(castlingNotation, state
       preparedState[preparedState.length - 1][preparedState.length - 1].figure = _extends({}, preparedState[preparedState.length - 1][preparedState.length - 1].figure, {
         touched: false
       });
+    }
+    if (!!preparedState[preparedState.length - 1][4].figure) {
       preparedState[preparedState.length - 1][4].figure = _extends({}, preparedState[preparedState.length - 1][4].figure, {
         touched: false
       });
@@ -1501,6 +1503,8 @@ var prepareCastlingByFEN = function prepareCastlingByFEN(castlingNotation, state
       preparedState[preparedState.length - 1][0].figure = _extends({}, preparedState[preparedState.length - 1][0].figure, {
         touched: false
       });
+    }
+    if (!!preparedState[preparedState.length - 1][4].figure) {
       preparedState[preparedState.length - 1][4].figure = _extends({}, preparedState[preparedState.length - 1][4].figure, {
         touched: false
       });
@@ -1511,6 +1515,8 @@ var prepareCastlingByFEN = function prepareCastlingByFEN(castlingNotation, state
       preparedState[0][preparedState.length - 1].figure = _extends({}, preparedState[0][preparedState.length - 1].figure, {
         touched: false
       });
+    }
+    if (!!preparedState[0][4].figure) {
       preparedState[0][4].figure = _extends({}, preparedState[0][4].figure, {
         touched: false
       });
@@ -1521,6 +1527,8 @@ var prepareCastlingByFEN = function prepareCastlingByFEN(castlingNotation, state
       preparedState[0][0].figure = _extends({}, preparedState[0][0].figure, {
         touched: false
       });
+    }
+    if (!!preparedState[0][4].figure) {
       preparedState[0][4].figure = _extends({}, preparedState[0][4].figure, {
         touched: false
       });
@@ -1555,39 +1563,47 @@ var partFENtoState = function partFENtoState(notation) {
   });
 };
 var FENtoGameState = function FENtoGameState(FEN, reversed) {
-  var gameState = {
-    boardState: [],
-    currentColor: 'white'
-  };
-  var _FEN$split = FEN.split(' '),
-    stateNotaion = _FEN$split[0],
-    currentColor = _FEN$split[1],
-    FENcastling = _FEN$split[2],
-    beatedField = _FEN$split[3],
-    _ = _FEN$split.slice(4);
-  var preparedStateNotation = '';
-  for (var i = 0; i < stateNotaion.length; i++) {
-    if (!isNaN(parseInt(stateNotaion[i]))) {
-      var dotsCount = parseInt(stateNotaion[i]);
-      for (var dotI = 0; dotI < dotsCount; dotI++) preparedStateNotation += '.';
-      continue;
-    }
-    preparedStateNotation += stateNotaion[i];
-  }
-  gameState.boardState = partFENtoState(preparedStateNotation);
-  gameState.currentColor = currentColor === 'w' ? 'white' : 'black';
-  gameState.boardState = prepareCastlingByFEN(FENcastling, gameState.boardState);
-  if (beatedField !== '-') {
-    var posBeatedCell = getPositionByFEN(beatedField);
-    gameState.boardState[posBeatedCell[0]][posBeatedCell[1]] = _extends({}, gameState.boardState[posBeatedCell[0]][posBeatedCell[1]], {
-      beated: true
-    });
+  try {
+    var gameState = {
+      boardState: [],
+      currentColor: 'white'
+    };
+    var _FEN$split = FEN.split(' '),
+      stateNotaion = _FEN$split[0],
+      currentColor = _FEN$split[1],
+      FENcastling = _FEN$split[2],
+      beatedField = _FEN$split[3],
+      _ = _FEN$split.slice(4);
+    var preparedStateNotation = '';
+    for (var i = 0; i < stateNotaion.length; i++) {
+      if (!isNaN(parseInt(stateNotaion[i]))) {
+        var dotsCount = parseInt(stateNotaion[i]);
+        for (var dotI = 0; dotI < dotsCount; dotI++) preparedStateNotation += '.';
+        continue;
+      }
+      preparedStateNotation += stateNotaion[i];
+    }
+    gameState.boardState = partFENtoState(preparedStateNotation);
+    gameState.currentColor = currentColor === 'w' ? 'white' : 'black';
+    gameState.boardState = prepareCastlingByFEN(FENcastling, gameState.boardState);
+    if (beatedField !== '-') {
+      var posBeatedCell = getPositionByFEN(beatedField);
+      gameState.boardState[posBeatedCell[0]][posBeatedCell[1]] = _extends({}, gameState.boardState[posBeatedCell[0]][posBeatedCell[1]], {
+        beated: true
+      });
+    }
+    if (reversed) return {
+      boardState: JSChessEngine.reverseChessBoard(gameState.boardState),
+      currentColor: gameState.currentColor
+    };
+    return gameState;
+  } catch (_unused) {
+    return {
+      boardState: INITIAL_CELLS,
+      currentColor: 'white',
+      invalidFEN: true
+    };
   }
-  if (reversed) return {
-    boardState: JSChessEngine.reverseChessBoard(gameState.boardState),
-    currentColor: gameState.currentColor
-  };
-  return gameState;
 };
 var getBeatedCellFENfromState = function getBeatedCellFENfromState(state) {
   var beatedFieldFEN = '-';
@@ -1679,7 +1695,7 @@ var stateToFEN = function stateToFEN(state, currentColor, countMoves) {
   return positionsFEN + " " + colorFEN + " " + casttlingFEN + " " + beatedFieldFEN + " " + blackMoves + " " + countMoves;
 };
 
-var styles = {"chessBoard":"_3XI6H","figuresLayout":"_2SyRK","controlLayout":"_3OVc8","controlLayoutGrabbing":"_G0IIl","interactiveLayout":"_3THn5","selectedSquare":"_1YsOr","pickedSquare":"_3MMcp","checkedSquare":"_KLkVN","interactiveCell":"_27yHq","possibleMoveMark":"_UYGA_","row":"_2XKSc","piece":"_2QHnf","holdedPiece":"_3z25q","bluredPiece":"_10meo","hiddenFigureEffect":"_2YKzU","arrow":"_12Bbd","arrowEnd":"_1BC3I","piecePicker":"_3gVhA","piecePickerItem":"_3EtmA","chessBoardPiecePicker":"_2xZM1","movesTrail":"_1RqCc","lightSquare":"_1B0qo","darkSquare":"_1NBqS"};
+var styles = {"chessBoard":"_3XI6H","figuresLayout":"_2SyRK","controlLayout":"_3OVc8","controlLayoutGrabbing":"_G0IIl","interactiveLayout":"_3THn5","selectedSquare":"_1YsOr","pickedSquare":"_3MMcp","checkedSquare":"_KLkVN","interactiveCell":"_27yHq","possibleMoveMark":"_UYGA_","row":"_2XKSc","piece":"_2QHnf","holdedPiece":"_3z25q","bluredPiece":"_10meo","hiddenFigureEffect":"_2YKzU","arrow":"_12Bbd","arrowEnd":"_1BC3I","piecePicker":"_3gVhA","piecePickerItem":"_3EtmA","chessBoardPiecePicker":"_2xZM1","chessBoardInvalidFenMessage":"_jyC3-","fenErrorMessage":"_8urIN","fenErrorMessageClose":"_3p5AF","movesTrail":"_1RqCc","lightSquare":"_1B0qo","darkSquare":"_1NBqS"};
 
 var CHESS_PIECES_MAP = {
   'pawn-white': function pawnWhite(size) {
@@ -2312,7 +2328,9 @@ var useChessBoardInteractive = function useChessBoardInteractive(props) {
   var config = props.config,
     onChange = props.onChange,
     onEndGame = props.onEndGame,
-    onClickByChessBoard = props.onClickByChessBoard;
+    onClickByChessBoard = props.onClickByChessBoard,
+    _props$toggleTurn = props.toggleTurn,
+    toggleTurn = _props$toggleTurn === void 0 ? true : _props$toggleTurn;
   var _useState = React.useState(DEFAULT_CHESSBORD_CONFIG),
     boardConfig = _useState[0],
     setBoardConfig = _useState[1];
@@ -2382,6 +2400,9 @@ var useChessBoardInteractive = function useChessBoardInteractive(props) {
   var _useState23 = React.useState(false),
     animated = _useState23[0],
     setAnimated = _useState23[1];
+  var _useState24 = React.useState(false),
+    invalidFEN = _useState24[0],
+    setInvalidFEN = _useState24[1];
   var clearFromPos = function clearFromPos() {
     return setFromPos([-1, -1]);
   };
@@ -2395,7 +2416,7 @@ var useChessBoardInteractive = function useChessBoardInteractive(props) {
     return setClickPossibleMoves([]);
   };
   var toggleCurrentColor = function toggleCurrentColor() {
-    return setCurrentColor(function (prevColor) {
+    if (toggleTurn) setCurrentColor(function (prevColor) {
       return prevColor === 'white' ? 'black' : 'white';
     });
   };
@@ -2444,7 +2465,8 @@ var useChessBoardInteractive = function useChessBoardInteractive(props) {
     if (!onClickByChessBoard) return;
     onClickByChessBoard({
       cellData: cellData,
-      pos: pos
+      pos: pos,
+      currentColor: currentColor
     });
   };
   var selectFigureFrom = function selectFigureFrom(cellPos, extActualState) {
@@ -2510,8 +2532,10 @@ var useChessBoardInteractive = function useChessBoardInteractive(props) {
     var _JSChessEngine$change = JSChessEngine.changeState(actualState, figure, to, from, boardReversed),
       updatedCells = _JSChessEngine$change.updatedCells,
       attackedPos = _JSChessEngine$change.attackedPos;
-    var linesCheck = JSChessEngine.getLinesWithCheck(updatedCells, currentColor, boardReversed);
-    setLinesWithCheck(linesCheck);
+    if (toggleTurn) {
+      var linesCheck = JSChessEngine.getLinesWithCheck(updatedCells, currentColor, boardReversed);
+      setLinesWithCheck(linesCheck);
+    }
     setActualState(updatedCells);
     if (figure.type === 'pawn' && (to[1] === 0 || to[1] === actualState.length - 1)) {
       setTargetPos(to);
@@ -2545,8 +2569,10 @@ var useChessBoardInteractive = function useChessBoardInteractive(props) {
       figure = _change$move.figure;
     var _JSChessEngine$change2 = JSChessEngine.changeState(actualState, figure, to, from, boardReversed),
       updatedCells = _JSChessEngine$change2.updatedCells;
-    var linesCheck = JSChessEngine.getLinesWithCheck(updatedCells, currentColor, boardReversed);
-    setLinesWithCheck(linesCheck);
+    if (toggleTurn) {
+      var linesCheck = JSChessEngine.getLinesWithCheck(updatedCells, currentColor, boardReversed);
+      setLinesWithCheck(linesCheck);
+    }
     var updatedChange = _extends({}, change, {
       move: boardReversed ? JSChessEngine.reverseMove(change.move) : change.move
     });
@@ -2567,8 +2593,10 @@ var useChessBoardInteractive = function useChessBoardInteractive(props) {
     var _JSChessEngine$change3 = JSChessEngine.changeState(actualState, figure, to, from, boardReversed),
       updatedCells = _JSChessEngine$change3.updatedCells,
       attackedPos = _JSChessEngine$change3.attackedPos;
-    var linesCheck = JSChessEngine.getLinesWithCheck(updatedCells, currentColor, boardReversed);
-    setLinesWithCheck(linesCheck);
+    if (toggleTurn) {
+      var linesCheck = JSChessEngine.getLinesWithCheck(updatedCells, currentColor, boardReversed);
+      setLinesWithCheck(linesCheck);
+    }
     setActualState(updatedCells);
     if (figure.type === 'pawn' && (to[1] === 0 || to[1] === actualState.length - 1)) {
       setTargetPos(to);
@@ -2599,8 +2627,11 @@ var useChessBoardInteractive = function useChessBoardInteractive(props) {
     var _JSChessEngine$change4 = JSChessEngine.changeState(actualState, figure, to, from, boardReversed),
       updatedCells = _JSChessEngine$change4.updatedCells,
       attackedPos = _JSChessEngine$change4.attackedPos;
-    var linesCheck = JSChessEngine.getLinesWithCheck(updatedCells, currentColor, boardReversed);
-    setLinesWithCheck(linesCheck);
+    var linesCheck = [];
+    if (toggleTurn) {
+      linesCheck = JSChessEngine.getLinesWithCheck(updatedCells, currentColor, boardReversed);
+      setLinesWithCheck(linesCheck);
+    }
     if (fromPos[0] !== -1) {
       var figureFromPos = updatedCells[fromPos[1]][fromPos[0]].figure;
       if (!figureFromPos || figureFromPos.type !== holdedFigure.type || figureFromPos.color !== holdedFigure.color) {
@@ -2815,7 +2846,9 @@ var useChessBoardInteractive = function useChessBoardInteractive(props) {
   var handleUpdateFEN = function handleUpdateFEN(FEN, reversed) {
     var _FENtoGameState = FENtoGameState(FEN, reversed),
       boardState = _FENtoGameState.boardState,
-      currentColor = _FENtoGameState.currentColor;
+      currentColor = _FENtoGameState.currentColor,
+      invalidFEN = _FENtoGameState.invalidFEN;
+    setInvalidFEN(invalidFEN);
     cleanAllForFigure();
     setAnimated(false);
     setInitialState(boardState);
@@ -2830,6 +2863,7 @@ var useChessBoardInteractive = function useChessBoardInteractive(props) {
     newMove: newMove,
     animated: animated,
     movesTrail: movesTrail,
+    invalidFEN: invalidFEN,
     boardConfig: boardConfig,
     markedCells: markedCells,
     grabbingPos: grabbingPos,
@@ -2849,6 +2883,7 @@ var useChessBoardInteractive = function useChessBoardInteractive(props) {
     handleClick: handleClick,
     clearFromPos: clearFromPos,
     handleGrabEnd: handleGrabEnd,
+    setInvalidFEN: setInvalidFEN,
     handleGrabbing: handleGrabbing,
     endRenderArrow: endRenderArrow,
     setActualState: setActualState,
@@ -3042,17 +3077,21 @@ var ChessBoard = function ChessBoard(props) {
     _props$moveArrows = props.moveArrows,
     moveArrows = _props$moveArrows === void 0 ? [] : _props$moveArrows,
     _props$arrows = props.arrows,
-    arrows = _props$arrows === void 0 ? [] : _props$arrows;
+    arrows = _props$arrows === void 0 ? [] : _props$arrows,
+    _props$toggleTurn = props.toggleTurn,
+    toggleTurn = _props$toggleTurn === void 0 ? true : _props$toggleTurn;
   var _useChessBoardInterac = useChessBoardInteractive({
       onChange: onChange,
       onEndGame: onEndGame,
       onClickByChessBoard: onClick,
-      config: config
+      config: config,
+      toggleTurn: toggleTurn
     }),
     fromPos = _useChessBoardInterac.fromPos,
     newMove = _useChessBoardInterac.newMove,
     animated = _useChessBoardInterac.animated,
     movesTrail = _useChessBoardInterac.movesTrail,
+    invalidFEN = _useChessBoardInterac.invalidFEN,
     boardConfig = _useChessBoardInterac.boardConfig,
     markedCells = _useChessBoardInterac.markedCells,
     grabbingPos = _useChessBoardInterac.grabbingPos,
@@ -3067,6 +3106,7 @@ var ChessBoard = function ChessBoard(props) {
     markCell = _useChessBoardInterac.markCell,
     handleClick = _useChessBoardInterac.handleClick,
     handleGrabEnd = _useChessBoardInterac.handleGrabEnd,
+    setInvalidFEN = _useChessBoardInterac.setInvalidFEN,
     handleGrabbing = _useChessBoardInterac.handleGrabbing,
     endRenderArrow = _useChessBoardInterac.endRenderArrow,
     setPlayerColor = _useChessBoardInterac.setPlayerColor,
@@ -3105,6 +3145,10 @@ var ChessBoard = function ChessBoard(props) {
       color: arrow.color
     };
   });
+  var handleHideInvalidFENmessage = function handleHideInvalidFENmessage(event) {
+    event.preventDefault();
+    setInvalidFEN(false);
+  };
   return React__default.createElement("div", {
     className: styles.chessBoard
   }, React__default.createElement(ChessBoardCellsLayout, {
@@ -3150,7 +3194,17 @@ var ChessBoard = function ChessBoard(props) {
     color: currentColor,
     forPawnTransform: true,
     onSelect: handleSelectFigurePicker
-  })));
+  })), invalidFEN && React__default.createElement("div", {
+    className: styles.chessBoardInvalidFenMessage
+  }, React__default.createElement("div", {
+    className: styles.fenErrorMessage,
+    role: "alert"
+  }, React__default.createElement("div", null, "Invalid FEN notation. The default board position was used instead.", " ", React__default.createElement("a", {
+    href: "/docs/fen-errors"
+  }, "See common FEN problems"), "."), React__default.createElement("div", null, React__default.createElement("a", {
+    className: styles.fenErrorMessageClose,
+    onClick: handleHideInvalidFENmessage
+  }, "Hide this message")))));
 };
 
 exports.ALL_FIGURES = ALL_FIGURES;