sequence wing page

src/components/Button.tsx

@@ -29,7 +29,7 @@ const Button = ({
   return (
     <button
       onClick={onClick}
-      className={`min-w-10 max-h-10 ${
+      className={`min-w-10 max-h-10  ${
         icon && !text ? "p-[10px]" : padding
       }  transition-all duration-300 ease-in-out text-s pointer-events-auto flex gap-1 items-center align-middle h-fit ${backgroundColor} ${textColor} ${border}  ${
         className ? className : ""

src/components/ComplexButtomPanel.tsx

@@ -1,8 +1,8 @@
-import useModal from "../../store/useModal";
-import useSequence from "../../store/useSequence";
-import Button from "../Button";
-import DisclaimerIcon from "../icons/DisclaimerIcon";
-import DisclaimerModal from "../modals/DisclaimerModal";
+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 ComplexButtomPanel = () => {
   const { setModal } = useModal();
@@ -30,7 +30,7 @@ const ComplexButtomPanel = () => {
         <div className="bg-[#0D192266] rounded-full backdrop-blur-sm">
           <img
             style={{ transform: `rotate(${currentCompassRotate - 180}deg)` }}
-            src="../images/masterplan/compass.png"
+            src="/images/masterplan/compass.png"
             alt="compass"
             className="transition-transform duration-[750ms] ease-in-out"
           />

src/components/ComplexTopPanel.tsx

@@ -1,16 +1,16 @@
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
-import useModal from "../../store/useModal";
-import Button from "../Button";
-import FilterIcon from "../icons/FilterIcon";
-import HintIcon from "../icons/HintIcon";
-import LeftArrowSliderIcon from "../icons/LeftArrowSliderIcon";
-import ResizeIcon from "../icons/ResizeIcon";
-import HelpModal from "../modals/HelpModal";
-import MasterplanFilters from "../modals/MasterplanFilters";
-import InfoIcon from "../icons/InfoIcon";
-import useFullScreen from "../../store/useFullScreen";
-import ActiveResizeIcon from "../icons/ActiveResizeIcon";
+import useModal from "../store/useModal";
+import Button from "./Button";
+import FilterIcon from "./icons/FilterIcon";
+import HintIcon from "./icons/HintIcon";
+import LeftArrowSliderIcon from "./icons/LeftArrowSliderIcon";
+import ResizeIcon from "./icons/ResizeIcon";
+import HelpModal from "./modals/HelpModal";
+import MasterplanFilters from "./modals/MasterplanFilters";
+import InfoIcon from "./icons/InfoIcon";
+import useFullScreen from "../store/useFullScreen";
+import ActiveResizeIcon from "./icons/ActiveResizeIcon";
 
 const ComplexTopPanel = () => {
   const [isFullMode, setIsFullMode] = useState(false);
@@ -27,7 +27,7 @@ const ComplexTopPanel = () => {
   };
 
   const handleOnBackClick = () => {
-    navigate("../masterplan");
+    navigate(-1);
   };
 
   const handleOnFullScreenClick = () => {
@@ -43,11 +43,11 @@ const ComplexTopPanel = () => {
 
   return (
     <>
-      <div className="absolute top-0 w-screen z-20">
+      <div className="absolute top-0 w-screen z-20 select-none pointer-events-none">
         <img src="../images/top_shadow.png" className="w-screen" alt="" />
       </div>
       <div
-        className={`absolute top-[62px] left-0 z-20 w-full p-4 grid grid-cols-12`}
+        className={`absolute top-[62px] left-0 z-20 w-full p-4 grid grid-cols-12 select-none touch-none pointer-events-none`}
       >
         <div className="flex gap-2 col-span-3">
           <Button

src/components/complexPage/SequenceSlider.tsx

@@ -8,41 +8,8 @@ import Button from "../Button";
 import LeftArrowSliderIcon from "../icons/LeftArrowSliderIcon";
 import RightArrowSliderIcon from "../icons/RightArrowSliderIcon";
 import useSequence from "../../store/useSequence";
-
-// const marks = [
-//     {
-//       id: "1",
-//       label: "Башня 1",
-//       icon: "tower1",
-//       x: [1210, 1095, 770, 660, 820, 1060],
-//       y: [675, 795, 790, 670, 590, 590],
-//       url: "/tower1",
-//     },
-//     {
-//       id: "2",
-//       label: "Башня 2",
-//       icon: "tower2",
-//       x: [650, 835, 1080, 1240, 1080, 720],
-//       y: [650, 565, 575, 670, 800, 780],
-//       url: "/tower2",
-//     },
-//     {
-//       id: "3",
-//       label: "Двор",
-//       icon: "walk",
-//       x: [930, 930, 930, 930, 930, 930],
-//       y: [930, 930, 930, 930, 930, 930],
-//       url: "/virtual-tour",
-//     },
-//     {
-//       id: "4",
-//       label: "Внешний двор",
-//       icon: "walk",
-//       x: [1310, 980, 600, -100, -100, 1185],
-//       y: [1075, 1280, 1130, -100, -100, 860],
-//       url: "/virtual-tour-2",
-//     },
-//   ];
+import SequenceHighlighting from "./SequenceHighlighting";
+import { useNavigate } from "react-router-dom";
 
 const arrayLength = 360;
 const keyframes: number[] = [51, 178, 249, 339];
@@ -62,6 +29,7 @@ function SequenceSlider({ path }: SequenceSliderProps) {
   const { setCurrentCompassRotate, currentCompassRotate } = useSequence();
   const [width, setWidth] = useState<number>();
   const [top, setTop] = useState<number>();
+  const navigate = useNavigate();
 
   useEffect(() => {
     setCurrentCompassRotate(keyframes[3]);
@@ -170,6 +138,10 @@ function SequenceSlider({ path }: SequenceSliderProps) {
     return () => window.removeEventListener("resize", handleResize);
   }, []);
 
+  function handleOnSequenceClick(): void {
+    navigate("./wing");
+  }
+
   return (
     <div
       {...handlers}
@@ -179,21 +151,31 @@ function SequenceSlider({ path }: SequenceSliderProps) {
         className="absolute left-0"
         style={{ width: `${width}px`, height: `${width}px`, top: `-${top}px` }}
       >
-        {Array.from({ length: arrayLength }).map((_, index) => (
-          <>
-            <img
-              key={index}
-              width={`${width}px`}
-              height={`${width}px`}
-              src={`${path}/${index + 1}.${isMobile ? "jpg" : "jpg"}`}
-              alt=""
-              className={`absolute t select-none pointer-events-none ${
-                index === selectedImageRightIndex ? "opacity-100" : "opacity-0"
-              }`}
-              onLoad={handleLoad}
-            />
-          </>
-        ))}
+        <div
+          className={`duration-300 transition-opacity ease-in-out opacity-100`}
+        >
+          {Array.from({ length: arrayLength }).map((_, index) => (
+            <>
+              <img
+                key={index}
+                width={`${width}px`}
+                height={`${width}px`}
+                src={`${path}/${index + 1}.${isMobile ? "jpg" : "jpg"}`}
+                alt=""
+                className={`absolute ${
+                  index === selectedImageRightIndex
+                    ? "opacity-100"
+                    : "opacity-0"
+                }`}
+                onLoad={handleLoad}
+              />
+            </>
+          ))}
+        </div>
+        <SequenceHighlighting
+          keyframe={selectedImageRightIndex + 1}
+          onClick={handleOnSequenceClick}
+        />
       </div>
       <Button
         className={`p-3 rounded-full transition-colors absolute left-6 top-[calc(50%-24px)] z-50 ${

src/components/icons/CrossIcon.tsx

@@ -1,15 +1,15 @@
 const CrossIcon = () => {
   return (
     <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M12 11.9999L17.6569 6.34331M12 11.9999L6.34312 6.34302M12 11.9999L17.6568 17.6567M12 11.9999L6.34302 17.6568"
-        stroke="#73787C"
+        d="M10.0003 9.99993L14.7144 5.28613M10.0003 9.99993L5.28622 5.28589M10.0003 9.99993L14.7143 14.714M10.0003 9.99993L5.28613 14.714"
+        stroke="currentColor"
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"

src/components/masterplanPage/TopPanel.tsx

@@ -29,11 +29,11 @@ const TopPanel = () => {
 
   return (
     <>
-      <div className="absolute top-0 w-screen z-10">
+      <div className="absolute top-0 w-screen z-10 select-none pointer-events-none touch-none">
         <img src="../images/top_shadow.png" className="w-screen" alt="" />
       </div>
       <div
-        className={`absolute top-[62px] left-0 z-20 w-full p-4 flex justify-end gap-2`}
+        className={`absolute top-[62px] left-0 z-20 w-full p-4 flex justify-end gap-2 select-none touch-none pointer-events-none`}
       >
         {isFullMode ? (
           <Button

src/main.tsx

@@ -5,6 +5,7 @@ import Masterplan from "./pages/Masterplan";
 import Company from "./pages/Company";
 import "./index.css";
 import Complex from "./pages/Complex";
+import ComplexWing from "./pages/ComplexWing";
 
 const router = createBrowserRouter([
   {
@@ -23,6 +24,10 @@ const router = createBrowserRouter([
         path: "/masterplan/:complexId",
         element: <Complex />,
       },
+      {
+        path: "/masterplan/:complexId/wing",
+        element: <ComplexWing />,
+      },
       {
         path: "/company",
         element: <Company />,

src/pages/Complex.tsx

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

src/pages/ComplexWing.tsx

@@ -0,0 +1,15 @@
+import ComplexTopPanel from "../components/ComplexTopPanel";
+import ComplexButtomPanel from "../components/ComplexButtomPanel";
+import SequenceWing from "../components/complexWingPage/SequenceWing";
+
+const ComplexWing = () => {
+  return (
+    <div className="overflow-hidden h-screen w-screen">
+      <ComplexTopPanel />
+      <SequenceWing />
+      <ComplexButtomPanel />
+    </div>
+  );
+};
+
+export default ComplexWing;