fix: promoting moves are animated (#221)

Author: antonryoung02

src/ChessboardProvider.tsx

@@ -23,6 +23,7 @@ import {
 import {
   fenStringToPositionObject,
   generateBoard,
+  getPromotionUpdates,
   getPositionUpdates,
 } from './utils';
 import {
@@ -390,6 +391,34 @@ export function ChessboardProvider({
       return;
     }
 
+    // this extra position check will only run if the position HAS changed, but we have been unable to identify the pieces that have moved, reducing the impact of the performance overhead
+    if (Object.keys(positionUpdates).length === 0) {
+      const promotionUpdates = getPromotionUpdates(
+        currentWaitingForAnimationPosition ?? currentPosition,
+        newPosition,
+        chessboardRows,
+        chessboardColumns,
+      );
+      // Play the animation only if one promoting move was found and no updates were found
+      // This does not animate in cases like:
+      // - position changes where non promoting pieces moved
+      // - multiple pawn promotions or promotion reversals
+      // - removing one pawn from the board and promoting one nearby. would result in both pawns animating to the same promotion square
+      if (Object.keys(promotionUpdates).length === 1) {
+        setPositionDifferences(promotionUpdates);
+        setWaitingForAnimationPosition(newPosition);
+
+        const newTimeout = setTimeout(() => {
+          setCurrentPosition(newPosition);
+          setPositionDifferences({});
+          setWaitingForAnimationPosition(null);
+        }, animationDurationInMs);
+
+        animationTimeoutRef.current = newTimeout;
+        return;
+      }
+    }
+
     // new position was a result of an external move
 
     setPositionDifferences(positionUpdates);

src/utils.ts

@@ -269,6 +269,121 @@ export function getPositionUpdates(
   return updates;
 }
 
+/*
+ * Returns all position changes that can be explained by a pawn promotion or pawn promotion reversal
+ */
+export function getPromotionUpdates(
+  oldPosition: PositionDataType,
+  newPosition: PositionDataType,
+  noOfRows: number,
+  noOfColumns: number,
+): { [square: string]: string } {
+  const promotionUpdates: { [square: string]: string } = {};
+  for (const newSquare in newPosition) {
+    // new piece hasn't moved
+    if (
+      oldPosition[newSquare]?.pieceType === newPosition[newSquare].pieceType
+    ) {
+      continue;
+    }
+    for (const oldSquare in oldPosition) {
+      // old piece hasn't moved
+      if (
+        newPosition[oldSquare]?.pieceType === oldPosition[oldSquare].pieceType
+      ) {
+        continue;
+      }
+      if (
+        pawnPromotesAtSquares(
+          oldPosition,
+          newPosition,
+          oldSquare,
+          newSquare,
+          noOfRows,
+          noOfColumns,
+        )
+      ) {
+        promotionUpdates[oldSquare] = newSquare;
+      }
+    }
+  }
+  return promotionUpdates;
+}
+
+/*
+ Helper method that determines if the changes at oldSquare and newSquare
+ can be explained by a pawn promotion or pawn promotion reversal
+
+ Criteria:
+ promotion can only happen in adjacent files or same file
+ white promotes from P to [Q, R, B, N] from rank n - 1 to n
+ black promotes from P to [Q, R, B, N] from rank 2 to 1
+*/
+function pawnPromotesAtSquares(
+  oldPosition: PositionDataType,
+  newPosition: PositionDataType,
+  oldSquare: string,
+  newSquare: string,
+  noOfRows: number,
+  noOfColumns: number,
+): boolean {
+  const oldPiece = oldPosition[oldSquare].pieceType;
+  const newPiece = newPosition[newSquare].pieceType;
+  const promotablePieces = new Set(['Q', 'R', 'B', 'N']);
+
+  let pawnSquare;
+  let promotionSquare;
+  if (oldPiece[1] === 'P' && promotablePieces.has(newPiece[1])) {
+    // promotion
+    pawnSquare = oldSquare;
+    promotionSquare = newSquare;
+  } else if (newPiece[1] === 'P' && promotablePieces.has(oldPiece[1])) {
+    // promotion reversal
+    pawnSquare = newSquare;
+    promotionSquare = oldSquare;
+  } else {
+    return false;
+  }
+
+  const columnDifference = Math.abs(
+    chessColumnToColumnIndex(pawnSquare[0], noOfColumns, 'black') -
+      chessColumnToColumnIndex(promotionSquare[0], noOfColumns, 'black'),
+  );
+
+  // ensure piece has moved at most 1 column away and is the same colour
+  if (columnDifference > 1 || oldPiece[0] !== newPiece[0]) {
+    return false;
+  }
+
+  const pawnSquareRowIndex = chessRowToRowIndex(
+    pawnSquare[1],
+    noOfRows,
+    'black',
+  );
+  const promotionSquareRowIndex = chessRowToRowIndex(
+    promotionSquare[1],
+    noOfRows,
+    'black',
+  );
+  if (
+    oldPiece[0] === 'b' &&
+    pawnSquareRowIndex === 1 &&
+    promotionSquareRowIndex === 0
+  ) {
+    // bP promotion or promotion reversal
+    return true;
+  } else if (
+    oldPiece[0] === 'w' &&
+    pawnSquareRowIndex === noOfRows - 2 &&
+    promotionSquareRowIndex === noOfRows - 1
+  ) {
+    // wP promotion or promotion reversal
+    return true;
+  } else {
+    return false;
+  }
+}
+
 /**
  * Retrieves the coordinates at the centre of the requested square, relative to the top left of the board (0, 0).
  */