compass

src/components/complexPage/SequenceSlider.tsx

@@ -5,9 +5,9 @@ import { isMobile } from "react-device-detect";
 import { useSwipeable } from "react-swipeable";
 import { Transition } from "react-transition-group";
 import Button from "../Button";
-import ActiveResizeIcon from "../icons/ActiveResizeIcon";
 import LeftArrowSliderIcon from "../icons/LeftArrowSliderIcon";
 import RightArrowSliderIcon from "../icons/RightArrowSliderIcon";
+import useSequence from "../../store/useSequence";
 
 // const marks = [
 //     {
@@ -54,26 +54,32 @@ interface SequenceSliderProps {
 function SequenceSlider({ path }: SequenceSliderProps) {
   const [selectedImageRightIndex, setSelectedRightImageIndex] =
     useState<number>(keyframes[3]);
-  const [selectedImageLeftIndex, setSelectedImageLeftIndex] = useState<number>(
-    arrayLength - keyframes[3]
-  );
+  const [selectedImageLeftKeyframe, setSelectedImageLeftKeyframe] =
+    useState<number>(arrayLength - keyframes[3]);
   const [isAnimate, setIsAnimate] = useState<boolean>(false);
-
+  const [loadedImages, setLoadedImages] = useState<number>(0);
   const [keyframeIndex, setKeyframeIndex] = useState<number>(3);
+  const { setCurrentCompassRotate, currentCompassRotate } = useSequence();
+  const [width, setWidth] = useState<number>();
+  const [top, setTop] = useState<number>();
+
+  useEffect(() => {
+    setCurrentCompassRotate(keyframes[3]);
+  }, []);
+
   const handlers = useSwipeable({
     trackMouse: true,
     onSwipedLeft: () => !isAnimate && next(),
     onSwipedRight: () => !isAnimate && prev(),
   });
 
-  const [loadedImages, setLoadedImages] = useState<number>(0);
-
   function handleLoad() {
     setLoadedImages((prev) => prev + 1);
   }
 
   function animateToRight(currentOffset: number) {
     const obj = { selectedImageIndex: selectedImageRightIndex };
+    setCurrentCompassRotate(currentCompassRotate + currentOffset);
 
     gsap.to(obj, {
       selectedImageIndex: selectedImageRightIndex + currentOffset,
@@ -81,12 +87,15 @@ function SequenceSlider({ path }: SequenceSliderProps) {
       ease: "power1.inOut",
       onUpdate: () => {
         const roundedIndex = Math.round(obj.selectedImageIndex);
+
         if (roundedIndex >= arrayLength) {
           setSelectedRightImageIndex(roundedIndex - arrayLength);
-          setSelectedImageLeftIndex(arrayLength - (roundedIndex - arrayLength));
+          setSelectedImageLeftKeyframe(
+            arrayLength - (roundedIndex - arrayLength)
+          );
         } else {
           setSelectedRightImageIndex(roundedIndex);
-          setSelectedImageLeftIndex(arrayLength - roundedIndex);
+          setSelectedImageLeftKeyframe(arrayLength - roundedIndex);
         }
       },
       onComplete: () => {
@@ -96,21 +105,23 @@ function SequenceSlider({ path }: SequenceSliderProps) {
   }
 
   function animateToLeft(currentOffset: number) {
-    const obj = { selectedImageIndex: selectedImageLeftIndex };
+    const obj = { selectedImageIndex: selectedImageLeftKeyframe };
+    setCurrentCompassRotate(currentCompassRotate - currentOffset);
 
     gsap.to(obj, {
-      selectedImageIndex: selectedImageLeftIndex + currentOffset,
+      selectedImageIndex: selectedImageLeftKeyframe + currentOffset,
       duration: 0.75,
       ease: "power1.inOut",
       onUpdate: () => {
         const roundedIndex = Math.round(obj.selectedImageIndex);
+
         if (roundedIndex > arrayLength) {
           setSelectedRightImageIndex(
             arrayLength - (roundedIndex - arrayLength)
           );
-          setSelectedImageLeftIndex(roundedIndex - arrayLength);
+          setSelectedImageLeftKeyframe(roundedIndex - arrayLength);
         } else {
-          setSelectedImageLeftIndex(roundedIndex);
+          setSelectedImageLeftKeyframe(roundedIndex);
           setSelectedRightImageIndex(arrayLength - roundedIndex);
         }
       },
@@ -148,9 +159,6 @@ function SequenceSlider({ path }: SequenceSliderProps) {
     animateToLeft(currentOffset);
   }
 
-  const [width, setWidth] = useState<number>();
-  const [top, setTop] = useState<number>();
-
   function handleResize() {
     setWidth(window.innerWidth);
     setTop(window.innerWidth / 2 - window.innerHeight / 2);