react-chessboard-ui 2.10.0 → 2.12.0

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

@@ -278,22 +278,24 @@ JSChessEngine.correctionPossibleMoves = function (state, figurePos, possibleMove
         DIRECTIONS_D.forEach(function (direction) {
           if (!kingBehidFigure) {
             var attackedLine = JSChessEngine.getFullAttackedLine(state, enemyPos, direction);
-            var foundIndexKingPos = attackedLine.findIndex(function (pos) {
-              return pos[0] === kingPos[0] && pos[1] === kingPos[1];
-            });
-            var foundIndexFigurePos = attackedLine.findIndex(function (pos) {
-              return pos[0] === figurePos[0] && pos[1] === figurePos[1];
-            });
-            var countFiguresBehindKing = JSChessEngine.getCountEnemys(state, enemyPos, attackedLine);
-            kingBehidFigure = foundIndexKingPos > -1 && foundIndexFigurePos > -1 && foundIndexKingPos > foundIndexFigurePos && countFiguresBehindKing === 1;
-            if (kingBehidFigure) {
-              possibleMoves.forEach(function (possibleMove) {
-                [].concat(attackedLine, [enemyPos]).forEach(function (attackedPos) {
-                  if (attackedPos[0] === possibleMove[0] && attackedPos[1] === possibleMove[1]) {
-                    correctedPossibleMoves.push(possibleMove);
-                  }
-                });
+            if (!!kingPos) {
+              var foundIndexKingPos = attackedLine.findIndex(function (pos) {
+                return pos[0] === kingPos[0] && pos[1] === kingPos[1];
               });
+              var foundIndexFigurePos = attackedLine.findIndex(function (pos) {
+                return pos[0] === figurePos[0] && pos[1] === figurePos[1];
+              });
+              var countFiguresBehindKing = JSChessEngine.getCountEnemys(state, enemyPos, attackedLine);
+              kingBehidFigure = foundIndexKingPos > -1 && foundIndexFigurePos > -1 && foundIndexKingPos > foundIndexFigurePos && countFiguresBehindKing === 1;
+              if (kingBehidFigure) {
+                possibleMoves.forEach(function (possibleMove) {
+                  [].concat(attackedLine, [enemyPos]).forEach(function (attackedPos) {
+                    if (attackedPos[0] === possibleMove[0] && attackedPos[1] === possibleMove[1]) {
+                      correctedPossibleMoves.push(possibleMove);
+                    }
+                  });
+                });
+              }
             }
           }
         });
@@ -305,22 +307,24 @@ JSChessEngine.correctionPossibleMoves = function (state, figurePos, possibleMove
         DIRECTIONS_VH.forEach(function (direction) {
           if (!kingBehidFigure) {
             var attackedLine = JSChessEngine.getFullAttackedLine(state, enemyPos, direction);
-            var foundIndexKingPos = attackedLine.findIndex(function (pos) {
-              return pos[0] === kingPos[0] && pos[1] === kingPos[1];
-            });
-            var foundIndexFigurePos = attackedLine.findIndex(function (pos) {
-              return pos[0] === figurePos[0] && pos[1] === figurePos[1];
-            });
-            var countFiguresBehindKing = JSChessEngine.getCountEnemys(state, enemyPos, attackedLine);
-            kingBehidFigure = foundIndexKingPos > -1 && foundIndexFigurePos > -1 && foundIndexKingPos > foundIndexFigurePos && countFiguresBehindKing === 1;
-            if (kingBehidFigure) {
-              possibleMoves.forEach(function (possibleMove) {
-                [].concat(attackedLine, [enemyPos]).forEach(function (attackedPos) {
-                  if (attackedPos[0] === possibleMove[0] && attackedPos[1] === possibleMove[1]) {
-                    correctedPossibleMoves.push(possibleMove);
-                  }
-                });
+            if (!!kingPos) {
+              var foundIndexKingPos = attackedLine.findIndex(function (pos) {
+                return pos[0] === kingPos[0] && pos[1] === kingPos[1];
               });
+              var foundIndexFigurePos = attackedLine.findIndex(function (pos) {
+                return pos[0] === figurePos[0] && pos[1] === figurePos[1];
+              });
+              var countFiguresBehindKing = JSChessEngine.getCountEnemys(state, enemyPos, attackedLine);
+              kingBehidFigure = foundIndexKingPos > -1 && foundIndexFigurePos > -1 && foundIndexKingPos > foundIndexFigurePos && countFiguresBehindKing === 1;
+              if (kingBehidFigure) {
+                possibleMoves.forEach(function (possibleMove) {
+                  [].concat(attackedLine, [enemyPos]).forEach(function (attackedPos) {
+                    if (attackedPos[0] === possibleMove[0] && attackedPos[1] === possibleMove[1]) {
+                      correctedPossibleMoves.push(possibleMove);
+                    }
+                  });
+                });
+              }
             }
           }
         });
@@ -332,22 +336,24 @@ JSChessEngine.correctionPossibleMoves = function (state, figurePos, possibleMove
         [].concat(DIRECTIONS_D, DIRECTIONS_VH).forEach(function (direction) {
           if (!kingBehidFigure) {
             var attackedLine = JSChessEngine.getFullAttackedLine(state, enemyPos, direction);
-            var foundIndexKingPos = attackedLine.findIndex(function (pos) {
-              return pos[0] === kingPos[0] && pos[1] === kingPos[1];
-            });
-            var foundIndexFigurePos = attackedLine.findIndex(function (pos) {
-              return pos[0] === figurePos[0] && pos[1] === figurePos[1];
-            });
-            var countFiguresBehindKing = JSChessEngine.getCountEnemys(state, enemyPos, attackedLine);
-            kingBehidFigure = foundIndexKingPos > -1 && foundIndexFigurePos > -1 && foundIndexKingPos > foundIndexFigurePos && countFiguresBehindKing === 1;
-            if (kingBehidFigure) {
-              possibleMoves.forEach(function (possibleMove) {
-                [].concat(attackedLine, [enemyPos]).forEach(function (attackedPos) {
-                  if (attackedPos[0] === possibleMove[0] && attackedPos[1] === possibleMove[1]) {
-                    correctedPossibleMoves.push(possibleMove);
-                  }
-                });
+            if (!!kingPos) {
+              var foundIndexKingPos = attackedLine.findIndex(function (pos) {
+                return pos[0] === kingPos[0] && pos[1] === kingPos[1];
+              });
+              var foundIndexFigurePos = attackedLine.findIndex(function (pos) {
+                return pos[0] === figurePos[0] && pos[1] === figurePos[1];
               });
+              var countFiguresBehindKing = JSChessEngine.getCountEnemys(state, enemyPos, attackedLine);
+              kingBehidFigure = foundIndexKingPos > -1 && foundIndexFigurePos > -1 && foundIndexKingPos > foundIndexFigurePos && countFiguresBehindKing === 1;
+              if (kingBehidFigure) {
+                possibleMoves.forEach(function (possibleMove) {
+                  [].concat(attackedLine, [enemyPos]).forEach(function (attackedPos) {
+                    if (attackedPos[0] === possibleMove[0] && attackedPos[1] === possibleMove[1]) {
+                      correctedPossibleMoves.push(possibleMove);
+                    }
+                  });
+                });
+              }
             }
           }
         });
@@ -1491,6 +1497,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 +1509,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 +1521,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 +1533,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 +1569,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 +1701,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 +2334,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 +2406,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 +2422,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';
     });
   };
@@ -2511,8 +2538,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);
@@ -2546,8 +2575,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
     });
@@ -2568,8 +2599,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);
@@ -2600,8 +2633,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) {
@@ -2816,7 +2852,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);
@@ -2831,6 +2869,7 @@ var useChessBoardInteractive = function useChessBoardInteractive(props) {
     newMove: newMove,
     animated: animated,
     movesTrail: movesTrail,
+    invalidFEN: invalidFEN,
     boardConfig: boardConfig,
     markedCells: markedCells,
     grabbingPos: grabbingPos,
@@ -2850,6 +2889,7 @@ var useChessBoardInteractive = function useChessBoardInteractive(props) {
     handleClick: handleClick,
     clearFromPos: clearFromPos,
     handleGrabEnd: handleGrabEnd,
+    setInvalidFEN: setInvalidFEN,
     handleGrabbing: handleGrabbing,
     endRenderArrow: endRenderArrow,
     setActualState: setActualState,
@@ -3043,17 +3083,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,
@@ -3068,6 +3112,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,
@@ -3106,6 +3151,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, {
@@ -3151,7 +3200,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;