[piece-movement] add on drag animation end callback to apply a smooth…

…er experience for the last moved piece
iee-ihu-gr-course1941 · Dec 14, 2024 · c7731ba · c7731ba
1 parent 85f4e7c
commit c7731ba
Showing 1 changed file with 23 additions and 15 deletions.
diff --git a/resources/js/Game/Board/Piece/Piece.tsx b/resources/js/Game/Board/Piece/Piece.tsx
@@ -36,6 +36,7 @@ export const Piece = ({code: pieceCode = 0, origin_position: position, rotation,
     const [shadowPosition, setShadowPosition] = useState<THREE.Vector3>();
     const onStart = useRef<() => void>();
     const onComplete = useRef<(moveType: MoveType) => void>();
+    const onDragAnimationEnd = useRef<() => void>();
     const [boardState, setBoardState] = useState<BoardState>()
 
     const canMovePiece = useMemo(() => {
@@ -89,16 +90,13 @@ export const Piece = ({code: pieceCode = 0, origin_position: position, rotation,
     }, [boardState?.gameState.state])
 
     const onLockIn = () => {
-        if((boardState?.move?.code !== pieceCode || !isPiecePositionValid()) && hasMoved){
-            onMoveReject();
-        }else if(isPositionValid && boardState?.move?.code === pieceCode && ref.current){
-            boardState?.endTurn();
-            boardState?.addBoardPiece(ref.current)
-        }else if(hasMoved){
-            onMoveReject();
+        if(ref.current){
+            gsap.to(ref.current.position, {
+                y: blockSize*0.5,
+                duration: animationDuration,
+                onComplete: onDragAnimationEnd.current
+            });
         }
-        setIsDragging(false);
-        removeDragAnimation();
     }
 
     useEffect(() => {
@@ -134,6 +132,22 @@ export const Piece = ({code: pieceCode = 0, origin_position: position, rotation,
 
     }, [ref.current, preQuaternion, isPositionValid, prePosition])
 
+    useEffect(() => {
+
+        onDragAnimationEnd.current = () => {
+            if((boardState?.move?.code !== pieceCode || !isPiecePositionValid()) && hasMoved){
+                onMoveReject();
+            }else if(isPositionValid && boardState?.move?.code === pieceCode && ref.current){
+                boardState?.endTurn();
+                boardState?.addBoardPiece(ref.current)
+            }else if(hasMoved){
+                onMoveReject();
+            }
+            setIsDragging(false);
+        }
+
+    }, [boardState?.move, pieceCode, hasMoved, ref.current, isPositionValid])
+
     const getOriginalQuaternion = () => {
         const flipAxis = getFlipAxis();
         return new THREE.Quaternion().setFromEuler(
@@ -489,12 +503,6 @@ export const Piece = ({code: pieceCode = 0, origin_position: position, rotation,
         }
     }
 
-    const removeDragAnimation = () => {
-        if(ref.current){
-            gsap.to(ref.current.position, {y: blockSize*0.5, duration: animationDuration, ease: 'power1.inOut'});
-        }
-    }
-
     const onDrag = () => {
         //* Snap the shadow to the grid