diff --git a/client/public/images/skyGarden/skyGardenIndoor.jpg b/client/public/images/skyGarden/sky-garden-indoor.jpg similarity index 85% rename from client/public/images/skyGarden/skyGardenIndoor.jpg rename to client/public/images/skyGarden/sky-garden-indoor.jpg index 2bd69ff..1c694f1 100644 Binary files a/client/public/images/skyGarden/skyGardenIndoor.jpg and b/client/public/images/skyGarden/sky-garden-indoor.jpg differ diff --git a/client/public/images/skyGarden/sky-garden-outdoor.jpg b/client/public/images/skyGarden/sky-garden-outdoor.jpg new file mode 100644 index 0000000..e19c3e9 Binary files /dev/null and b/client/public/images/skyGarden/sky-garden-outdoor.jpg differ diff --git a/client/public/images/skyGarden/skyGardenOutdoor.jpg b/client/public/images/skyGarden/skyGardenOutdoor.jpg deleted file mode 100644 index b53109c..0000000 Binary files a/client/public/images/skyGarden/skyGardenOutdoor.jpg and /dev/null differ diff --git a/client/src/components/SwitchToggle.tsx b/client/src/components/SwitchToggle.tsx index 91990ed..335b539 100644 --- a/client/src/components/SwitchToggle.tsx +++ b/client/src/components/SwitchToggle.tsx @@ -3,15 +3,15 @@ import { ISwitchLabel } from "../types/switchLabel"; interface ISwitchToggleProps { labels: ISwitchLabel[]; currentLabel: ISwitchLabel; - onClick: (label: ISwitchLabel) => void; isDisabled?: boolean; + onClick: (label: ISwitchLabel) => void; } function SwitchToggle({ labels, currentLabel, - onClick, isDisabled = false, + onClick, }: ISwitchToggleProps) { return (
diff --git a/client/src/components/Test/FloorItem.tsx b/client/src/components/Test/FloorItem.tsx index 59d0b69..c881dd2 100644 --- a/client/src/components/Test/FloorItem.tsx +++ b/client/src/components/Test/FloorItem.tsx @@ -1,5 +1,6 @@ /* eslint-disable react-hooks/exhaustive-deps */ import { useEffect, useRef, useState } from "react"; +import { isMobile } from "react-device-detect"; interface Props { floor: string; @@ -8,23 +9,11 @@ interface Props { function FloorItem({ floor, onSelected }: Props) { const [selected, setSelected] = useState(false); - // const [ref, entry] = useIntersectionObserver({ - // threshold: 0, - // root: document.querySelector("#test"), - // rootMargin: "0px", - // }); - - // console.log(document.querySelector("#test")); - - // useEffect(() => { - // if (!entry?.isIntersecting) return; - - // onSelected(); - // }, [entry?.isIntersecting]); - const ref = useRef(null); useEffect(() => { + if (!isMobile) return; + const test = document.querySelector("#test")!.getBoundingClientRect(); setInterval(() => { @@ -37,13 +26,13 @@ function FloorItem({ floor, onSelected }: Props) { } else { setSelected(false); } - }, 0); + }, 50); }, []); return (

diff --git a/client/src/components/complexWingPage/FloorSidebar/EastWingFloorPlan.tsx b/client/src/components/complexWingPage/FloorSidebar/EastWingFloorPlan.tsx index 8decf47..83c6f27 100644 --- a/client/src/components/complexWingPage/FloorSidebar/EastWingFloorPlan.tsx +++ b/client/src/components/complexWingPage/FloorSidebar/EastWingFloorPlan.tsx @@ -2437,7 +2437,7 @@ function EastWingFloorPlan({ }} > - {`E-${floor.padStart(2, "0")}16`} + {`E-${floor}16`} {"1BR"} @@ -2464,7 +2464,7 @@ function EastWingFloorPlan({ }} > - {`E-${floor.padStart(2, "0")}15`} + {`E-${floor}15`} {"1BR"} @@ -2491,7 +2491,7 @@ function EastWingFloorPlan({ }} > - {`E-${floor.padStart(2, "0")}14`} + {`E-${floor}14`} {"ST"} @@ -2518,7 +2518,7 @@ function EastWingFloorPlan({ }} > - {`E-${floor.padStart(2, "0")}13`} + {`E-${floor}13`} {"ST"} @@ -2545,7 +2545,7 @@ function EastWingFloorPlan({ }} > - {`E-${floor.padStart(2, "0")}12`} + {`E-${floor}12`} {"ST"} @@ -2572,7 +2572,7 @@ function EastWingFloorPlan({ }} > - {`E-${floor.padStart(2, "0")}11`} + {`E-${floor}11`} {"ST"} @@ -2599,7 +2599,7 @@ function EastWingFloorPlan({ }} > - {`E-${floor.padStart(2, "0")}10`} + {`E-${floor}10`} {"1BR"} @@ -2626,7 +2626,7 @@ function EastWingFloorPlan({ }} > - {`E-${floor.padStart(2, "0")}09`} + {`E-${floor}09`} {"1BR"} @@ -2653,7 +2653,7 @@ function EastWingFloorPlan({ }} > - {`E-${floor.padStart(2, "0")}08`} + {`E-${floor}08`} {"1BR"} @@ -2680,7 +2680,7 @@ function EastWingFloorPlan({ }} > - {`E-${floor.padStart(2, "0")}07`} + {`E-${floor}07`} {"1BR"} @@ -2708,7 +2708,7 @@ function EastWingFloorPlan({ }} > - {`E-${floor.padStart(2, "0")}06`} + {`E-${floor}06`} {"1BR"} @@ -2735,7 +2735,7 @@ function EastWingFloorPlan({ }} > - {`E-${floor.padStart(2, "0")}05`} + {`E-${floor}05`} {"ST"} @@ -2762,7 +2762,7 @@ function EastWingFloorPlan({ }} > - {`E-${floor.padStart(2, "0")}04`} + {`E-${floor}04`} {"ST"} @@ -2789,7 +2789,7 @@ function EastWingFloorPlan({ }} > - {`E-${floor.padStart(2, "0")}03`} + {`E-${floor}03`} {"1BR"} @@ -2816,7 +2816,7 @@ function EastWingFloorPlan({ }} > - {`E-${floor.padStart(2, "0")}02`} + {`E-${floor}02`} {"ST"} @@ -2843,7 +2843,7 @@ function EastWingFloorPlan({ }} > - {`E-${floor.padStart(2, "0")}01`} + {`E-${floor}01`} {"2BR"} diff --git a/client/src/components/complexWingPage/FloorSidebar/FloorPlanSidebar.tsx b/client/src/components/complexWingPage/FloorSidebar/FloorPlanSidebar.tsx index e0cc550..453242d 100644 --- a/client/src/components/complexWingPage/FloorSidebar/FloorPlanSidebar.tsx +++ b/client/src/components/complexWingPage/FloorSidebar/FloorPlanSidebar.tsx @@ -11,19 +11,49 @@ import { isMobile } from "react-device-detect"; import WestWingFloorPlanLower from "./WestWingFloorPlanLower"; import WestWingFloorPlanUpper from "./WestWingFloorPlanUpper"; import EastWingFloorPlan from "./EastWingFloorPlan"; +import PlayIcon from "../../icons/PlayIcon"; +import SwitchToggle from "../../SwitchToggle"; +import AmphitheatreIcon from "../../icons/activities/AmphitheatreIcon"; +import BoulderingWallIcon from "../../icons/activities/BoulderingWallIcon"; +import ChangingRoomsIcon from "../../icons/activities/ChangingRoomsIcon"; +import ChessTablesIcon from "../../icons/activities/ChessTablesIcon"; +import ClimbingRoomIcon from "../../icons/activities/ClimbingRoomIcon"; +import CommunalDiningTablesIcon from "../../icons/activities/CommunalDiningTablesIcon"; +import IndoorLapPoolIcon from "../../icons/activities/IndoorLapPoolIcon"; +import LushLandscapeIcon from "../../icons/activities/LushLandscapeIcon"; +import MultiPurposeCourtIcon from "../../icons/activities/MultiPurposeCourtIcon"; +import OutdoorCinemaIcon from "../../icons/activities/OutdoorCinemaIcon"; +import OutdoorCoworkingSpaceIcon from "../../icons/activities/OutdoorCoworkingSpaceIcon"; +import PadelPongIcon from "../../icons/activities/PadelPongIcon"; +import PingPongInATableIcon from "../../icons/activities/PingPongInATableIcon"; +import RunningWheelIcon from "../../icons/activities/RunningWheelIcon"; +import SunLoungingDeckIcon from "../../icons/activities/SunLoungingDeckIcon"; +import SuspendedLoungingNetsIcon from "../../icons/activities/SuspendedLoungingNetsIcon"; +import WellnessFeaturesIcon from "../../icons/activities/WellnessFeaturesIcon"; +import ActivityCard from "../SkygardenSidebar/ActivityCard"; +import SkyGardenSlider from "../SkygardenSidebar/SkyGardenSlider"; +import VirtualTourVideoModal from "../../modals/VirtualTourVideoModal"; interface Props { - floor: number; + floor: string; wing: string; onClose: () => void; } +const skyGardenImages = { + indoor: "/images/skyGarden/sky-garden-indoor.jpg", + outdoor: "/images/skyGarden/sky-garden-outdoor.jpg", +}; + function FloorPlanSidebar({ floor, wing, onClose }: Props) { const { setModal } = useModal(); const [hoveredUnit, setHoveredUnit] = useState(); const [showPopup, setShowPopup] = useState(false); const [mousePos, setMousePos] = useState<[number, number]>([0, 0]); const [type, setType] = useState(null); + const [selectedSkyGardenImage, setSelectedSkyGardenImage] = useState< + "indoor" | "outdoor" + >("indoor"); function handleMouseEnter(e: React.MouseEvent) { const unitNumber = e.currentTarget.dataset.number; @@ -46,14 +76,12 @@ function FloorPlanSidebar({ floor, wing, onClose }: Props) { const x = e.clientX - e.currentTarget.getBoundingClientRect().left; const y = e.clientY - e.currentTarget.getBoundingClientRect().top; - console.log(x, y); - setMousePos([x, y]); } function handleClick() { - console.log("hoveredUnit", hoveredUnit); - console.log("type", type); + // console.log("hoveredUnit", hoveredUnit); + // console.log("type", type); if (!hoveredUnit || !type) return; @@ -79,7 +107,7 @@ function FloorPlanSidebar({ floor, wing, onClose }: Props) { }, [hoveredUnit]); return ( -

+

- {floor} floor + {floor === "Sky Garden" ? "Sky Garden" : `${floor} floor`} +

+

+ {floor === "Sky Garden" ? `22-23 floor` : `${wing} Wing`}

-

{wing} Wing

} @@ -97,68 +127,205 @@ function FloorPlanSidebar({ floor, wing, onClose }: Props) { onClick={onClose} />
-
-
-
-
-
-

Studio Flex

-
-
-
-

Studio²

-
-
-
-

1 Bedroom²

-
-
-
-

2 Bedroom²

+ {floor === "Sky Garden" ? ( +
+
+
+ } + className="absolute self-end max-sm:hidden" + onClick={() => + setModal( + + ) + } + > + Play video + + } + onlyIcon + size="small" + className="absolute self-end sm:hidden" + onClick={() => + setModal( + + ) + } + /> +
+
+ +
+
+ + setSelectedSkyGardenImage( + label.id as "indoor" | "outdoor" + ) + } + /> +
+
- {/*
+
+

+ Indoor Amenities +

+
+ } + /> + } + /> + } + /> +
+
+
+

+ Outdoor Amenities +

+
+ } /> + } + /> + } + /> + } + /> + } + /> + } + /> + } + /> + } + /> + } + /> + } + /> + } /> + } + /> + } + /> + } + /> +
+
+ +
+ ) : ( +
+
+
+
+
+

Studio Flex

+
+
+
+

Studio²

+
+
+
+

1 Bedroom²

+
+
+
+

2 Bedroom²

+
+
+ {/*
0 units
*/} -
-
- - {wing === "West" ? ( - floor <= 21 ? ( - +
+
+ + {wing === "West" ? ( + +floor <= 21 ? ( + + ) : ( + + ) ) : ( - - ) - ) : ( - + + {!isMobile && ( + )} - - - {!isMobile && ( - - )} +
-
+ )}
); } diff --git a/client/src/components/complexWingPage/SkygardenSidebar/ActivityCard.tsx b/client/src/components/complexWingPage/SkygardenSidebar/ActivityCard.tsx index 31ccf7d..4151ad1 100644 --- a/client/src/components/complexWingPage/SkygardenSidebar/ActivityCard.tsx +++ b/client/src/components/complexWingPage/SkygardenSidebar/ActivityCard.tsx @@ -5,8 +5,8 @@ interface ActivityCardProps { const ActivityCard = ({ icon, title }: ActivityCardProps) => { return ( - //
- //
+ //
+ //
//
//

{title}

//
@@ -18,7 +18,7 @@ const ActivityCard = ({ icon, title }: ActivityCardProps) => {
{icon}
-

{title}

+

{title}

); }; diff --git a/client/src/components/complexWingPage/SkygardenSidebar/SkyGardenSlider.tsx b/client/src/components/complexWingPage/SkygardenSidebar/SkyGardenSlider.tsx index 5ba75f2..31ae042 100644 --- a/client/src/components/complexWingPage/SkygardenSidebar/SkyGardenSlider.tsx +++ b/client/src/components/complexWingPage/SkygardenSidebar/SkyGardenSlider.tsx @@ -39,23 +39,37 @@ function SkyGardenSlider() { }, [currentSlideIndex]); return ( -
+
{ref.current?.clientWidth && ( -
- {images.map((image, index) => ( - - ))} -
+ <> +
+ {images.map((image, index) => ( + + ))} +
+
+ {images.map((image, index) => ( + + ))} +
+ )} -
+