compass

src/components/complexPage/ComplexButtomPanel.tsx

@@ -1,13 +1,17 @@
 import useModal from "../../store/useModal";
+import useSequence from "../../store/useSequence";
 import Button from "../Button";
 import DisclaimerIcon from "../icons/DisclaimerIcon";
 import DisclaimerModal from "../modals/DisclaimerModal";
 
-const ButtomPanel = () => {
+const ComplexButtomPanel = () => {
   const { setModal } = useModal();
+  const { currentCompassRotate } = useSequence();
+
   const handleOnDisclaimerClick = () => {
     setModal(<DisclaimerModal />);
   };
+
   return (
     <div className="absolute z-20 bottom-0 left-0 w-full select-none touch-none pointer-events-none flex gap-2 justify-between items-end">
       <div className="flex flex-col gap-2">
@@ -25,9 +29,10 @@ const ButtomPanel = () => {
       <div className="p-6">
         <div className="bg-[#0D192266] rounded-full backdrop-blur-sm">
           <img
+            style={{ transform: `rotate(${currentCompassRotate - 180}deg)` }}
             src="../images/masterplan/compass.png"
             alt="compass"
-            className=""
+            className="transition-transform duration-[750ms] ease-in-out"
           />
         </div>
       </div>
@@ -35,4 +40,4 @@ const ButtomPanel = () => {
   );
 };
 
-export default ButtomPanel;
+export default ComplexButtomPanel;

src/components/complexPage/FloorLayout.tsx

@@ -1,5 +1,5 @@
 const FloorLayout = () => {
-  return <></>;
+  return <div></div>;
 };
 
 export default FloorLayout;

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);

src/pages/Complex.tsx

@@ -1,4 +1,4 @@
-import ButtomPanel from "../components/ButtomPanel";
+import ComplexButtomPanel from "../components/complexPage/ComplexButtomPanel";
 import ComplexTopPanel from "../components/complexPage/ComplexTopPanel";
 import SequenceSlider from "../components/complexPage/SequenceSlider";
 
@@ -8,7 +8,8 @@ const Complex = () => {
       <ComplexTopPanel />
       <div className="bg-blue-500 h-full w-full"></div>
       <SequenceSlider path={"/images/sequence"} />
-      <ButtomPanel />
+      {/* <ButtomPanel /> */}
+      <ComplexButtomPanel />
     </div>
   );
 };

src/store/useSequence.tsx

@@ -0,0 +1,14 @@
+import { create } from "zustand";
+
+interface SequenceStore {
+  currentCompassRotate: number;
+  setCurrentCompassRotate: (keyframe: number) => void;
+}
+
+const useSequence = create<SequenceStore>((set) => ({
+  currentCompassRotate: 0,
+  setCurrentCompassRotate: (keyframe) =>
+    set(() => ({ currentCompassRotate: keyframe })),
+}));
+
+export default useSequence;