preview room shpere

src/components/complexWingPage/FloorSidebar/ApartmentDescription.tsx

@@ -1,16 +1,10 @@
-import { useEffect } from "react";
-
 interface ApartmentDescriptionProps {
   isVisible: boolean;
 }
 
 const ApartmentDescription = ({ isVisible }: ApartmentDescriptionProps) => {
-  useEffect(() => {
-    console.log("isVisible", isVisible);
-  }, [isVisible]);
-
   return (
-    <div className="p-6">
+    <div className="p-6 bg-black">
       <div
         className={`bg-white rounded-lg p-6 flex flex-col text-subheadline-s relative text-nowrap desc-shadow py-2  ${
           isVisible ? "opacity-100" : "opacity-0"

src/components/complexWingPage/FloorSidebar/FloorSidebar.tsx

@@ -3,6 +3,8 @@ import { IDesctiptionFloor } from "../../../types/descriptionFloor";
 import ApartmentDescription from "./ApartmentDescription";
 import FloorWestWingHighlighting from "./FloorWestWingHighlighting";
 import FloorWestWingLayout from "./FloorWestWingLayout";
+import { useNavigate } from "react-router-dom";
+import useWingSidebar from "../../../store/useWingSidebar";
 
 interface IFloorSidebarProps {
   currentFloor: IDesctiptionFloor | null;
@@ -11,12 +13,29 @@ interface IFloorSidebarProps {
 
 const FloorSidebar = ({ currentFloor, onMouseEnter }: IFloorSidebarProps) => {
   const [mousePos, setMousePos] = useState<number[]>([0, 0]);
-  const [isDescVisible, setIsDescVisible] = useState(true);
+  const [isDescVisible, setIsDescVisible] = useState(false);
+  const { setIsSidebar } = useWingSidebar();
+
+  const navigate = useNavigate();
+
+  function handleOnApartmentClick() {
+    navigate("../virtual-tour/apartments-studio-1");
+    setIsDescVisible(false);
+    setIsSidebar(false);
+  }
 
   function handleMouseMove(e: MouseEvent) {
     const top = window.innerWidth / 2 - window.innerHeight / 2;
-    // setMousePos([e.clientX, e.clientY - top]);
-    setMousePos([e.clientX - 752, e.clientY - Math.abs(top) + 5]);
+    // setMousePos([e.clientX - 752, e.clientY - Math.abs(top) + 5]);
+    const y = e.clientY - 210;
+    const x = e.clientX - 800;
+    setMousePos([x, y]);
+    console.log("e.clientX", e.clientX);
+    console.log("e.clientY", e.clientY);
+    // setMousePos([
+    //   e.clientX - window.innerWidth / 2 - 48,
+    //   e.clientY - window.innerHeight / 2 - top,
+    // ]);
   }
 
   function handleOnMouseOut(): void {
@@ -73,8 +92,8 @@ const FloorSidebar = ({ currentFloor, onMouseEnter }: IFloorSidebarProps) => {
       </div>
       <div className="px-10 bg-white flex gap-6 font-semibold text-caption-m rounded-lg justify-center items-center flex-1 py-4">
         <div
-          className="absolute z-[99999] w-fit h-fit top-0 left-0 overflow-hidden"
-          style={{ top: `${mousePos[1]}px`, left: `${mousePos[0]}px` }}
+          className="absolute z-[99999] w-fit h-fit top-0 right-0"
+          style={{ top: `${mousePos[1]}px`, right: `${-mousePos[0]}px` }}
         >
           <ApartmentDescription isVisible={isDescVisible} />
         </div>
@@ -85,6 +104,7 @@ const FloorSidebar = ({ currentFloor, onMouseEnter }: IFloorSidebarProps) => {
         >
           <FloorWestWingLayout />
           <FloorWestWingHighlighting
+            handleOnApartmentClick={handleOnApartmentClick}
             handleOnMouseOut={handleOnMouseOut}
             handleOnMouseOver={handleOnMouseOver}
           />

src/components/complexWingPage/FloorSidebar/FloorWestWingHighlighting.tsx

@@ -1,11 +1,13 @@
 interface FloorWestWingHighlightingProps {
   handleOnMouseOut: () => void;
   handleOnMouseOver: () => void;
+  handleOnApartmentClick: () => void;
 }
 
 const FloorWestWingHighlighting = ({
   handleOnMouseOut,
   handleOnMouseOver,
+  handleOnApartmentClick,
 }: FloorWestWingHighlightingProps) => {
   return (
     <>
@@ -20,6 +22,7 @@ const FloorWestWingHighlighting = ({
           className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
           onMouseOut={handleOnMouseOut}
           onMouseOver={handleOnMouseOver}
+          onClick={handleOnApartmentClick}
           y={36}
           x={205}
           width="44"
@@ -44,6 +47,7 @@ const FloorWestWingHighlighting = ({
           className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
           onMouseOut={handleOnMouseOut}
           onMouseOver={handleOnMouseOver}
+          onClick={handleOnApartmentClick}
           y={36}
           x={250}
           width="79"
@@ -68,6 +72,7 @@ const FloorWestWingHighlighting = ({
           className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
           onMouseOut={handleOnMouseOut}
           onMouseOver={handleOnMouseOver}
+          onClick={handleOnApartmentClick}
           y={36}
           x={328}
           width="45"
@@ -92,6 +97,7 @@ const FloorWestWingHighlighting = ({
           className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
           onMouseOut={handleOnMouseOut}
           onMouseOver={handleOnMouseOver}
+          onClick={handleOnApartmentClick}
           y={36}
           x={371}
           width="44"
@@ -116,6 +122,7 @@ const FloorWestWingHighlighting = ({
           className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
           onMouseOut={handleOnMouseOut}
           onMouseOver={handleOnMouseOver}
+          onClick={handleOnApartmentClick}
           y={36}
           x={415}
           width="71"
@@ -140,6 +147,7 @@ const FloorWestWingHighlighting = ({
           className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
           onMouseOut={handleOnMouseOut}
           onMouseOver={handleOnMouseOver}
+          onClick={handleOnApartmentClick}
           y={36}
           x={484}
           width="73"
@@ -164,6 +172,7 @@ const FloorWestWingHighlighting = ({
           className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
           onMouseOut={handleOnMouseOut}
           onMouseOver={handleOnMouseOver}
+          onClick={handleOnApartmentClick}
           y={159}
           x={415}
           width="71"
@@ -188,6 +197,7 @@ const FloorWestWingHighlighting = ({
           className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
           onMouseOut={handleOnMouseOut}
           onMouseOver={handleOnMouseOver}
+          onClick={handleOnApartmentClick}
           y={158}
           x={370}
           width="44"
@@ -212,6 +222,7 @@ const FloorWestWingHighlighting = ({
           className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
           onMouseOut={handleOnMouseOut}
           onMouseOver={handleOnMouseOver}
+          onClick={handleOnApartmentClick}
           y={158}
           x={328}
           width="45"
@@ -236,6 +247,7 @@ const FloorWestWingHighlighting = ({
           className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
           onMouseOut={handleOnMouseOut}
           onMouseOver={handleOnMouseOver}
+          onClick={handleOnApartmentClick}
           y={158}
           x={285}
           width="43"
@@ -260,6 +272,7 @@ const FloorWestWingHighlighting = ({
           className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
           onMouseOut={handleOnMouseOut}
           onMouseOver={handleOnMouseOver}
+          onClick={handleOnApartmentClick}
           y={158}
           x={242}
           width="42"
@@ -284,6 +297,7 @@ const FloorWestWingHighlighting = ({
           className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
           onMouseOut={handleOnMouseOut}
           onMouseOver={handleOnMouseOver}
+          onClick={handleOnApartmentClick}
           x={70}
           y={157}
           width="71"
@@ -308,6 +322,7 @@ const FloorWestWingHighlighting = ({
           className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
           onMouseOut={handleOnMouseOut}
           onMouseOver={handleOnMouseOver}
+          onClick={handleOnApartmentClick}
           xmlns="http://www.w3.org/2000/svg"
           y={157}
           x={2}
@@ -326,6 +341,7 @@ const FloorWestWingHighlighting = ({
           className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
           onMouseOut={handleOnMouseOut}
           onMouseOver={handleOnMouseOver}
+          onClick={handleOnApartmentClick}
           xmlns="http://www.w3.org/2000/svg"
           y={4.94}
           x={92.12}
@@ -356,6 +372,7 @@ const FloorWestWingHighlighting = ({
           className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
           onMouseOut={handleOnMouseOut}
           onMouseOver={handleOnMouseOver}
+          onClick={handleOnApartmentClick}
           y={35.26}
           x={555.27}
           xmlns="http://www.w3.org/2000/svg"
@@ -379,6 +396,7 @@ const FloorWestWingHighlighting = ({
           className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
           onMouseOut={handleOnMouseOut}
           onMouseOver={handleOnMouseOver}
+          onClick={handleOnApartmentClick}
           y={158.26}
           x={556}
           xmlns="http://www.w3.org/2000/svg"

src/components/complexWingPage/SequenceWing.tsx

@@ -159,7 +159,7 @@ const SequenceWing = () => {
         }}
       >
         <div
-          className={`absolute z-40 top-0 left-0 transition-opacity duration-300 ease-in-out lg:flex hidden ${
+          className={`absolute z-40 top-0 left-0 transition-opacity duration-300 ease-in-out lg:flex hidden bg-black ${
             currentHoveredFloor?.floor === skyGardenFloor && isWrapperHovered
               ? "opacity-100"
               : "opacity-0"

src/components/virtualTour/LabelMarker.tsx

@@ -10,6 +10,9 @@ interface LaberlMarkerProps {
 
 const LabelMarker = ({ sphereLink, apartment }: LaberlMarkerProps) => {
   const { setSelectedSphere } = useSphere();
+  const currentSphere = apartment.spheres.find(
+    (sphere) => sphereLink.id === sphere.id
+  );
 
   const handleOnClick = () => {
     const moveToShpere = apartment.spheres.find(
@@ -24,13 +27,23 @@ const LabelMarker = ({ sphereLink, apartment }: LaberlMarkerProps) => {
     <>
       {
         <Html position={sphereLink.labelPosition} center>
+          <div className="relative">
             <div
-            className="bg-white w-9 h-9 rounded-full text-[#00BED7] flex items-center justify-center cursor-pointer"
-            onMouseEnter={() => console.log(sphereLink.id)}
+              className="bg-white w-9 h-9 rounded-full text-[#00BED7] flex items-center justify-center cursor-pointer peer"
               onClick={handleOnClick}
             >
               <WalkHereIcon />
             </div>
+            <div className="absolute -left-[66px] bottom-11 bg-[#0D192266] w-[168px] h-[121px] rounded-lg flex flex-col p-1 gap-1 items-center opacity-0 peer-hover:opacity-100 duration-300 ease-in-out transition-opacity">
+              <div className="bg-[#D9D9D9] rounded-lg w-full h-full object-contain overflow-clip">
+                <img
+                  src="/images/virtual-tour/studio1/previews/preview.jpg"
+                  alt=""
+                />
+              </div>
+              <div className="text-white  ">{currentSphere?.roomType}</div>
+            </div>
+          </div>
         </Html>
       }
     </>

src/components/virtualTour/VirtualTourSidebar.tsx

@@ -12,7 +12,7 @@ interface VirtualTourSidebarProps {
 
 const VirtualTourSidebar = ({ currentAppartment }: VirtualTourSidebarProps) => {
   const [isActive, setIsActive] = useState(false);
-  const { setSelectedSphere } = useSphere();
+  const { setSelectedSphere, selectedSphere } = useSphere();
   const handleOnShowClick = () => {
     setIsActive((prev) => !prev);
   };
@@ -53,7 +53,9 @@ const VirtualTourSidebar = ({ currentAppartment }: VirtualTourSidebarProps) => {
                 !isActive ? "max-h-0 opacity-0" : "max-h-screen opacity-100"
               }`}
             >
-              <div className="aspect-square w-full bg-black my-4"></div>
+              <div className="aspect-square w-full bg-black my-4">
+                <img src="" alt="" />
+              </div>
               <div className="pt-4 border-t">
                 <div className="flex flex-col gap-3">
                   <div className="flex justify-between text-m">
@@ -78,13 +80,17 @@ const VirtualTourSidebar = ({ currentAppartment }: VirtualTourSidebarProps) => {
             </div>
           </div>
           <div className="h-14 absolute -bottom-14 left-0 w-full  flex justify-between">
-            <div className="flex gap-1 py-2 items-start flex-wrap">
+            <div className="flex gap-1 py-2 items-start flex-wrap ">
               {currentAppartment &&
                 currentAppartment.spheres.map((sphere) => {
                   return (
                     <div
                       onClick={() => handleOnLabelClick(sphere)}
-                      className="bg-[#F3F3F2] font-semibold text-[#0D1922] text-caption-s py-0.5 px-2 w-fit rounded-full cursor-pointer pointer-events-auto select-none"
+                      className={` font-semibold text-caption-s py-0.5 px-2 w-fit rounded-full cursor-pointer pointer-events-auto select-none text-white ${
+                        selectedSphere?.id === sphere.id
+                          ? "bg-[#00BED7]"
+                          : "bg-[#0D192266]"
+                      }`}
                       key={sphere.id}
                     >
                       {sphere.roomType}

src/components/virtualTour/VirtualTourTopPanel.tsx

@@ -8,12 +8,11 @@ import HelpModal from "../modals/HelpModal";
 import InfoIcon from "../icons/InfoIcon";
 import useFullScreen from "../../store/useFullScreen";
 import ActiveResizeIcon from "../icons/ActiveResizeIcon";
-import useWingSidebar from "../../store/useWingSidebar";
 
 const VirtualTourTopPanel = () => {
   const { setModal } = useModal();
   const { onFullscreen, isFullscreen, setIsFullscreen } = useFullScreen();
-  const { setIsSidebar, isSidebar } = useWingSidebar();
+
   const navigate = useNavigate();
 
   const handleOnHelpClick = () => {
@@ -21,11 +20,7 @@ const VirtualTourTopPanel = () => {
   };
 
   const handleOnBackClick = () => {
-    if (isSidebar) {
-      setIsSidebar(false);
-    } else {
     navigate(-1);
-    }
   };
 
   const handleOnFullScreenClick = () => {

src/data/appartments.json

@@ -5,7 +5,7 @@
       {
         "id": "studio-1_sp-01",
         "sphereImage": "/images/virtual-tour/studio1/Studio1_w-12_13_sp-01.jpg",
-        "roomType": "room 1",
+        "roomType": "entrance",
         "position": [-14.16, 0, 24.11],
         "links": [
           {
@@ -23,7 +23,7 @@
       {
         "id": "studio-1_sp-02",
         "sphereImage": "/images/virtual-tour/studio1/Studio1_w-12_13_sp-02.jpg",
-        "roomType": "room 2",
+        "roomType": "bathroom",
         "position": [-14.16, 0, 24.11],
         "links": [
           {
@@ -36,7 +36,7 @@
       {
         "id": "studio-1_sp-03",
         "sphereImage": "/images/virtual-tour/studio1/Studio1_w-12_13_sp-03.jpg",
-        "roomType": "room 3",
+        "roomType": "kitchen",
         "position": [-14.16, 0, 24.11],
         "links": [
           {
@@ -54,7 +54,7 @@
       {
         "id": "studio-1_sp-04",
         "sphereImage": "/images/virtual-tour/studio1/Studio1_w-12_13_sp-04.jpg",
-        "roomType": "room 4",
+        "roomType": "bedroom 1",
         "position": [-14.16, 0, 24.11],
         "links": [
           {
@@ -72,7 +72,7 @@
       {
         "id": "studio-1_sp-05",
         "sphereImage": "/images/virtual-tour/studio1/Studio1_w-12_13_sp-05.jpg",
-        "roomType": "room 5",
+        "roomType": "bedroom 2",
         "position": [-14.16, 0, 24.11],
         "links": [
           {
@@ -90,7 +90,7 @@
       {
         "id": "studio-1_sp-06",
         "sphereImage": "/images/virtual-tour/studio1/Studio1_w-12_13_sp-06.jpg",
-        "roomType": "room 6",
+        "roomType": "glass doors",
         "position": [-14.16, 0, 24.11],
         "links": [
           {
@@ -108,7 +108,7 @@
       {
         "id": "studio-1_sp-07",
         "sphereImage": "/images/virtual-tour/studio1/Studio1_w-12_13_sp-07.jpg",
-        "roomType": "room 7",
+        "roomType": "balcony",
         "position": [-14.16, 0, 24.11],
         "links": [
           {