Positioning a shape while dragging about react-chessboard

[Konstantin9658]

And yes, this is not related to custom pieces. Same behavior with default ones

[Clariity]

@Konstantin9658

Do you get the same issues here: https://react-chessboard.vercel.app/?path=/story/example-chessboard--play-vs-computer

If not, then can you please copy the board setup from here and use it and see if the issue remains, we need to work out at what point it stops working

[Clariity]

Are you able to check on any other devices?

[Konstantin9658]

I think it has something to do with this (position: "fixed")

[Manukyanq]

Hi! Is this issue also appears with default pieces? Can you provide code example of your <Chessboard/> component with the props you use?

[Konstantin9658]

const ModalVisual = ({ onHide }: { onHide: () => void }) => {
  const [game, setGame] = useState(new Chess());
  const [moveFrom, setMoveFrom] = useState<Square>();
  const [moveTo, setMoveTo] = useState<Square | null>(null);
  const [optionSquares, setOptionSquares] = useState<CustomSquareStyles>({});
  const [isCheck, setCheck] = useState(false);
  const [isCheckmate, setCheckmate] = useState(false);
  const [statusMessage, setStatusMessage] = useState<StatusMessage>(undefined);

  const whoseMove = game.turn();

  const gameName = useModalStore((state) => state.gameName);
  const reward = useModalStore((state) => state.reward);

  const setModalGiveUpVisible = useModalStore(
    (state) => state.setModalGiveUpVisible
  );

  const makeAMove = (move: ShortMove) => {
    const gameCopy = { ...game };
    gameCopy.move(move);
    setGame(gameCopy);
  };

  const customPieces = useMemo(() => {
    const pieceComponents: CustomPieces = {};
    pieces.map((piece) => {
      pieceComponents[piece] = () => (
        <div
          style={{
            width: 67.5,
            height: 67.5,
            backgroundImage: `url(${BASE_PATH_IMG}/${piece}.svg)`,
            backgroundSize: "100%",
          }}
        />
      );
      return null;
    });
    return pieceComponents;
  }, []);

  const getMoveOptions = (square: Square) => {
    const moves = game.moves({
      square,
      verbose: true,
    });

    if (moves.length === 0) {
      setOptionSquares({});
      return false;
    }

    const newSquares: CustomSquareStyles = {};

    moves.map((move) => {
      newSquares[move.to] = {
        background:
          game.get(move.to) &&
          game.get(move.to)?.color !== game.get(square)?.color
            ? "rgba(237, 65, 89, 0.40)"
            : "rgba(0, 205, 164, 0.40)",
        boxShadow:
          game.get(move.to) &&
          game.get(move.to)?.color !== game.get(square)?.color
            ? "inset 0 0 0 4px #ed4159"
            : "",
        borderTopLeftRadius: move.to === "a8" ? "24px" : "",
        borderBottomLeftRadius: move.to === "a1" ? "24px" : "",
        borderTopRightRadius: move.to === "h8" ? "24px" : "",
        borderBottomRightRadius: move.to === "h1" ? "24px" : "",
      };
      return move;
    });

    newSquares[square] = {
      background: "#00cda4",
      borderTopLeftRadius: square === "a8" ? "24px" : "",
      borderBottomLeftRadius: square === "a1" ? "24px" : "",
      borderTopRightRadius: square === "h8" ? "24px" : "",
      borderBottomRightRadius: square === "h1" ? "24px" : "",
    };

    setOptionSquares(newSquares);
    return true;
  };

  const onMouseOverSquare = (square: Square) => {
    // from square
    if (!moveFrom) {
      const hasMoveOptions = getMoveOptions(square);
      if (hasMoveOptions) setMoveFrom(square);
      return;
    }

    // to square
    if (!moveTo) {
      // check if valid move before showing dialog
      const moves = game.moves({
        square: moveFrom,
        verbose: true,
      });

      const foundMove = moves.find(
        (m) => m.from === moveFrom && m.to === square
      );

      // not a valid move
      if (!foundMove) {
        // check if clicked on new piece
        const hasMoveOptions = getMoveOptions(square);
        // if new piece, setMoveFrom, otherwise clear moveFrom
        setMoveFrom(hasMoveOptions ? square : undefined);
        return;
      }

      // valid move
      setMoveTo(square);

      setMoveFrom(undefined);
      setMoveTo(null);
      setOptionSquares({});
      return;
    }
  };

  const onDrop = (sourceSquare: Square, targetSquare: Square) => {
    const move = makeAMove({
      from: sourceSquare,
      to: targetSquare,
      promotion: "q",
    });

    if (move === null) return false;

    return true;
  };

  useEffect(() => {
    if (game.in_check()) {
      setCheck(true);
      setStatusMessage("Check");
    }
    if (game.in_checkmate()) {
      setCheckmate(true);
      setStatusMessage("Checkmate, you lose");
    }
    if (whoseMove === "b") {
      setStatusMessage("Opponent's turn");
    }
    if (game.in_check() && whoseMove === "b") {
      setStatusMessage("Check");
    }
  }, [game, whoseMove]);

  return (
    <>
      <div className={classes.background} />
      <IconButton
        className={classes.back}
        icon="arrow-left"
        onClick={() => setModalGiveUpVisible(true)}
        color="red"
      />
      <div className={classes.content}>
        <div className={classes.content__inner}>
          <div className={classes.game}>
            <div
              className={clsx(
                classes.game__badge,
                (isCheck || isCheckmate) &&
                  classes.game__badge_checkOrCheckmate,
                whoseMove === "b" && classes.game__badge_opponentsTurn
              )}
            >
              {(isCheck || isCheckmate || whoseMove === "b") && statusMessage}
            </div>
            <div className={classes["modal__game-board"]}>
              <Chessboard
                position={game.fen()}
                boardWidth={540}
                showBoardNotation={false}
                promotionToSquare={moveTo}
                customPieces={customPieces}
                customBoardStyle={BOARD_STYLE}
                customDropSquareStyle={DROP_SQUARE_STYLE}
                customDarkSquareStyle={DARK_SQUARE_STYLE}
                customLightSquareStyle={LIGHT_SQUARE_STYLE}
                customSquareStyles={{ ...optionSquares }}
                onPieceDrop={onDrop}
                onMouseOverSquare={onMouseOverSquare}
                
              />
            </div>
          </div>
          <VersusBox
            title={gameName}
            reward={reward}
            // isYouWin={isYouWin}
            // isYouLose={isYouLose}
            icon={icon}
            onHide={onHide}
          />
        </div>
      </div>
    </>
  );
};

[Konstantin9658]

@Clariity Hello! Yes, I'm having the same problem with blinking (if that's what we're talking about) in the mode "PlayerVsComputer"

[Konstantin9658]

And the funny thing is that only in this mode there is such a blinking, in other modes there is no Sorry for misleading you, it’s the same in other modes

[Clariity]

So using the same build, you experience blinking, and I do not, so this implies there must be something else affecting this, perhaps your device or browser or operating system?

For reference I am on Windows 10 on a desktop PC in Chrome Version 116.0.5845.188 (Official Build) (64-bit)

I also do not see the issue on my Android phone on a Chrome browser, nor on a Macbook Pro using a trackpad in Chrome

Does this occur for you on any other devices?

[Konstantin9658]

Well, I use too Windows 10, but in Chrome version 117.0.5938.89 (lastest, updated now)

But actually I'm more worried about the bug with dragging a figure and its teleportation (first comment in this issue)

[Konstantin9658]

I checked blinking in 3 browsers (Chrome, Mozilla and Edge) and this problem is present in all of them. Strange thing...

[Konstantin9658]

2023-09-20.16-50-43.mp4

[Clariity]

But actually I'm more worried about the bug with dragging a figure and its teleportation (first comment in this issue)

Are you able to replicate this on the react-chessboard storybook website? I have not been able to replicate it at all

[Konstantin9658]

I will try to do this

[Konstantin9658]

Are you able to check on any other devices?

In my iPhone 6S working correctly

[Clariity]

Could it be your mouse input device on the device where the bug is happening?

[Konstantin9658]

To be honest I doubt this is the problem

[Konstantin9658]

I noticed some differences in the drawing of the chessboard between you and me. On the left is what the storybook shows, on the right is what it draws for me, there are differences in nesting and quite possibly this is where the problem lies

[Konstantin9658]

I'm missing a perspective div and I don't know why this is?

[Clariity]

that will be because a new version has recently been released, shouldn't have any effect

[Konstantin9658]

@Clariity @Manukyanq Good morning! How are you doing?

A new day gave me new ideas that helped me solve this puzzle with dragging a figure. I revised the layout of this modal window and moved some styles to a lower level, which led to the correct operation of the chessboard. I am very glad and grateful to you for your help. Sometimes you need to talk to someone in order for some idea to come to fruition. Thanks again and sorry if I took up your time