From b1bd436ab7629f86ed3d299464176166cf9c54a2 Mon Sep 17 00:00:00 2001 From: zojgame Date: Fri, 21 Jun 2024 18:19:41 +0500 Subject: [PATCH] virtual --- .../complexPage/ComplexTopPanel.tsx | 7 +- .../FloorSidebar/ApartmentDescription.tsx | 4 +- .../FloorSidebar/FloorSidebar.tsx | 10 +- .../favoritesPage/FavoriteApartmentCard.tsx | 11 +- .../header/Header/DesktopHeader.tsx | 2 +- client/src/components/icons/VideoIcon.tsx | 21 ++ .../src/components/modals/DisclaimerModal.tsx | 2 +- .../components/virtualTour/LabelMarker.tsx | 43 +-- .../components/virtualTour/VideoMarker.tsx | 26 ++ .../virtualTour/VirtualTourSidebar.tsx | 2 +- .../virtualTour/VirtualTourWrapper.tsx | 2 +- .../components/virtualTour/WalkHereMarker.tsx | 42 +++ client/src/data/appartments.json | 7 + client/src/pages/Complex.tsx | 2 +- client/src/pages/Favorites.tsx | 272 +++++++++--------- client/src/pages/Masterplan.tsx | 2 +- client/src/types/apartmentSphere.ts | 2 + 17 files changed, 273 insertions(+), 184 deletions(-) create mode 100644 client/src/components/icons/VideoIcon.tsx create mode 100644 client/src/components/virtualTour/VideoMarker.tsx create mode 100644 client/src/components/virtualTour/WalkHereMarker.tsx diff --git a/client/src/components/complexPage/ComplexTopPanel.tsx b/client/src/components/complexPage/ComplexTopPanel.tsx index b224178..84db7a3 100644 --- a/client/src/components/complexPage/ComplexTopPanel.tsx +++ b/client/src/components/complexPage/ComplexTopPanel.tsx @@ -19,7 +19,6 @@ const ComplexTopPanel = () => { const { onFullscreen, isFullscreen, setIsFullscreen } = useFullScreen(); const { setIsSidebar, isSidebar } = useWingSidebar(); const navigate = useNavigate(); - // const { complexId } = useParams(); const handleOnHelpClick = () => { setModal(); @@ -101,12 +100,12 @@ const ComplexTopPanel = () => { isSidebar ? "opacity-0" : "opacity-100" }`} > -

+

ROVE Home Marasi Drive

-

+ {/*

Select a wing -

+

*/}
diff --git a/client/src/components/complexWingPage/FloorSidebar/ApartmentDescription.tsx b/client/src/components/complexWingPage/FloorSidebar/ApartmentDescription.tsx index f75be23..38031b3 100644 --- a/client/src/components/complexWingPage/FloorSidebar/ApartmentDescription.tsx +++ b/client/src/components/complexWingPage/FloorSidebar/ApartmentDescription.tsx @@ -3,14 +3,16 @@ import VirtualTourIcon from "../../icons/VirtualTourIcon"; interface ApartmentDescriptionProps { isVisible: boolean; is3DTourAvailable: boolean; + descRef: React.LegacyRef; } const ApartmentDescription = ({ isVisible, is3DTourAvailable, + descRef, }: ApartmentDescriptionProps) => { return ( -
+
{ const [isDescVisible, setIsDescVisible] = useState(false); const [is3DTourAvailable] = useState(true); const { setModal } = useModal(); + const descRef = useRef(null); function handleOnApartmentClick( event: React.MouseEvent @@ -36,7 +37,12 @@ const FloorSidebar = ({ currentFloor, onMouseEnter }: IFloorSidebarProps) => { function handleMouseMove(e: MouseEvent) { const y = e.clientY - 170; + // if(!descRef && !descRef?.current){ + // const x = window.innerWidth / 2 - 54 - (descRef.current as React.LegacyRef).width; + + // } const x = e.clientX - window.innerWidth / 2 - 50; + setMousePos([x, y]); } @@ -61,11 +67,13 @@ const FloorSidebar = ({ currentFloor, onMouseEnter }: IFloorSidebarProps) => { style={{ top: `${mousePos[1]}px`, left: `${mousePos[0]}px` }} >
diff --git a/client/src/components/favoritesPage/FavoriteApartmentCard.tsx b/client/src/components/favoritesPage/FavoriteApartmentCard.tsx index 2c0f7f1..ac37d17 100644 --- a/client/src/components/favoritesPage/FavoriteApartmentCard.tsx +++ b/client/src/components/favoritesPage/FavoriteApartmentCard.tsx @@ -1,3 +1,4 @@ +import { useNavigate } from "react-router-dom"; import { formatNumber } from "../../calc/formatNumber"; import useModal from "../../store/useModal"; import { ILayoutCard } from "../../types/layoutCard"; @@ -15,9 +16,14 @@ interface FavoriteAppartmentCardProps { const FavoriteAppartmentCard = ({ card }: FavoriteAppartmentCardProps) => { const { roveHome, floorEnd, floorStart, wing, apartmentType, square, cost } = card; + const navigate = useNavigate(); const { setModal } = useModal(); + const handleOnFavoriteCardClick = () => { + navigate(`../search/${card.id}`); + }; + const handleOnSendEquiryClick = () => { setModal(); }; @@ -31,7 +37,10 @@ const FavoriteAppartmentCard = ({ card }: FavoriteAppartmentCardProps) => { }; return ( -
+

diff --git a/client/src/components/header/Header/DesktopHeader.tsx b/client/src/components/header/Header/DesktopHeader.tsx index 0ee2f83..7c54361 100644 --- a/client/src/components/header/Header/DesktopHeader.tsx +++ b/client/src/components/header/Header/DesktopHeader.tsx @@ -4,7 +4,7 @@ import Navbar from "../Navbar/Navbar"; import Location from "../Location"; const DesktopHeader = () => ( -

+
diff --git a/client/src/components/icons/VideoIcon.tsx b/client/src/components/icons/VideoIcon.tsx new file mode 100644 index 0000000..4a0a02a --- /dev/null +++ b/client/src/components/icons/VideoIcon.tsx @@ -0,0 +1,21 @@ +const VideoIcon = () => { + return ( + + + + ); +}; + +export default VideoIcon; diff --git a/client/src/components/modals/DisclaimerModal.tsx b/client/src/components/modals/DisclaimerModal.tsx index b6f30b9..442047b 100644 --- a/client/src/components/modals/DisclaimerModal.tsx +++ b/client/src/components/modals/DisclaimerModal.tsx @@ -8,7 +8,7 @@ const DisclaimerModal = () => { }; return ( -
+
diff --git a/client/src/components/virtualTour/LabelMarker.tsx b/client/src/components/virtualTour/LabelMarker.tsx index 0ed0415..b3b460e 100644 --- a/client/src/components/virtualTour/LabelMarker.tsx +++ b/client/src/components/virtualTour/LabelMarker.tsx @@ -1,7 +1,7 @@ import { Html } from "@react-three/drei"; import { IAppartmentComplex, ISphereLink } from "../../types/apartmentSphere"; -import WalkHereIcon from "../icons/WalkHereIcon"; -import useSphere from "../../store/useSphere"; +import WalkHereMarker from "./WalkHereMarker"; +import VideoMarker from "./VideoMarker"; interface LaberlMarkerProps { sphereLink: ISphereLink; @@ -9,43 +9,16 @@ 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( - (sph) => sph.id === sphereLink.id - ); - if (moveToShpere) { - setSelectedSphere(moveToShpere); - } - }; - return ( <> { -
-
- -
-
- {/*
- -
*/} -
- {currentSphere?.roomType} -
-
-
+ {sphereLink.type === "default" && ( + + )} + {sphereLink.type === "video" && ( + + )} } diff --git a/client/src/components/virtualTour/VideoMarker.tsx b/client/src/components/virtualTour/VideoMarker.tsx new file mode 100644 index 0000000..45d92ac --- /dev/null +++ b/client/src/components/virtualTour/VideoMarker.tsx @@ -0,0 +1,26 @@ +import { ISphereLink } from "../../types/apartmentSphere"; +import VideoIcon from "../icons/VideoIcon"; + +interface VideoMarkerProps { + sphereLink: ISphereLink; +} + +const VideoMarker = ({ sphereLink }: VideoMarkerProps) => { + return ( +
+
+ +
+
+
+ {sphereLink.videoTitle} +
+
+
+ ); +}; + +export default VideoMarker; diff --git a/client/src/components/virtualTour/VirtualTourSidebar.tsx b/client/src/components/virtualTour/VirtualTourSidebar.tsx index e8f5390..b7b1bfa 100644 --- a/client/src/components/virtualTour/VirtualTourSidebar.tsx +++ b/client/src/components/virtualTour/VirtualTourSidebar.tsx @@ -45,7 +45,7 @@ const VirtualTourSidebar = ({ currentAppartment }: VirtualTourSidebarProps) => { }; return ( -
+
diff --git a/client/src/components/virtualTour/VirtualTourWrapper.tsx b/client/src/components/virtualTour/VirtualTourWrapper.tsx index 5da79be..2fca124 100644 --- a/client/src/components/virtualTour/VirtualTourWrapper.tsx +++ b/client/src/components/virtualTour/VirtualTourWrapper.tsx @@ -27,7 +27,7 @@ const VirtualTourWrapper = ({ appartment }: VirtualTourWrapperProps) => { useEffect(() => { setSelectedSphere(appartment.spheres[0]); - }, []); + }, [appartment.spheres, setSelectedSphere]); return ( { + const { setSelectedSphere } = useSphere(); + const currentSphere = apartment.spheres.find( + (sphere) => sphereLink.id === sphere.id + ); + + const handleOnClick = () => { + const moveToShpere = apartment.spheres.find( + (sph) => sph.id === sphereLink.id + ); + if (moveToShpere) { + setSelectedSphere(moveToShpere); + } + }; + + return ( +
+
+ +
+
+
+ {currentSphere?.roomType} +
+
+
+ ); +}; + +export default WalkHereMarker; diff --git a/client/src/data/appartments.json b/client/src/data/appartments.json index e969013..8bad13e 100644 --- a/client/src/data/appartments.json +++ b/client/src/data/appartments.json @@ -52,6 +52,13 @@ "id": "studio-1_sp-01", "type": "default", "labelPosition": [-45, 0, 24.11] + }, + { + "id": "studio-1_video-1", + "type": "video", + "video": "", + "videoTitle": "Cloud Bed", + "labelPosition": [-5, 0, 36.11] } ] }, diff --git a/client/src/pages/Complex.tsx b/client/src/pages/Complex.tsx index debb275..493f19d 100644 --- a/client/src/pages/Complex.tsx +++ b/client/src/pages/Complex.tsx @@ -4,7 +4,7 @@ import SequenceSlider from "../components/complexPage/SequenceSlider"; const Complex = () => { return ( -
+
diff --git a/client/src/pages/Favorites.tsx b/client/src/pages/Favorites.tsx index f2ab7d6..629b2ba 100644 --- a/client/src/pages/Favorites.tsx +++ b/client/src/pages/Favorites.tsx @@ -11,140 +11,140 @@ import { ISwitcher } from "../types/switcher"; import FavoritesSlider from "../components/favoritesPage/FavoriteSlider"; import FavoriteCardList from "../components/favoritesPage/FavoriteCardList"; -// const favoriteCards: ILayoutCard[] = [ -// { -// id: "1", -// roveHome: "Marasi Drive", -// apartmentType: "Studio Flex", -// wing: "East Wing", -// floorStart: 11, -// floorEnd: 35, -// units: 234, -// cost: 10488888, -// square: 619, -// }, -// { -// id: "2", -// roveHome: "Marasi Drive", -// apartmentType: "1 Bedroom", -// wing: "East Wing", -// floorStart: 11, -// floorEnd: 35, -// units: 234, -// cost: 1668888, -// square: 619, -// }, -// { -// id: "3", -// roveHome: "Marasi Drive", -// apartmentType: "1 Bedroom", -// wing: "East Wing", -// floorStart: 11, -// floorEnd: 35, -// units: 234, -// cost: 1668888, -// square: 609, -// }, -// { -// id: "4", -// roveHome: "Marasi Drive", -// apartmentType: "1 Bedroom", -// wing: "East Wing", -// floorStart: 11, -// floorEnd: 35, -// units: 234, -// cost: 1138888, -// square: 609, -// }, -// { -// id: "5", -// roveHome: "Marasi Drive", -// apartmentType: "Studio Flex", -// wing: "East Wing", -// floorStart: 11, -// floorEnd: 35, -// units: 234, -// cost: 10488888, -// square: 609, -// }, -// { -// id: "6", -// roveHome: "Marasi Drive", -// apartmentType: "1 Bedroom", -// wing: "East Wing", -// floorStart: 11, -// floorEnd: 35, -// units: 234, -// cost: 1668888, -// square: 609, -// }, -// { -// id: "7", -// roveHome: "Marasi Drive", -// apartmentType: "1 Bedroom", -// wing: "East Wing", -// floorStart: 11, -// floorEnd: 35, -// units: 234, -// cost: 1668888, -// square: 609, -// }, -// { -// id: "8", -// roveHome: "Marasi Drive", -// apartmentType: "1 Bedroom", -// wing: "East Wing", -// floorStart: 11, -// floorEnd: 35, -// units: 234, -// cost: 1138888, -// square: 609, -// }, -// { -// id: "9", -// roveHome: "Marasi Drive", -// apartmentType: "Studio Flex", -// wing: "East Wing", -// floorStart: 11, -// floorEnd: 35, -// units: 234, -// cost: 10488888, -// square: 609, -// }, -// { -// id: "10", -// roveHome: "Marasi Drive", -// apartmentType: "1 Bedroom", -// wing: "East Wing", -// floorStart: 11, -// floorEnd: 35, -// units: 234, -// cost: 1668888, -// square: 609, -// }, -// { -// id: "11", -// roveHome: "Marasi Drive", -// apartmentType: "1 Bedroom", -// wing: "East Wing", -// floorStart: 11, -// floorEnd: 35, -// units: 234, -// cost: 1668888, -// square: 609, -// }, -// { -// id: "12", -// roveHome: "Marasi Drive", -// apartmentType: "1 Bedroom", -// wing: "East Wing", -// floorStart: 11, -// floorEnd: 35, -// units: 234, -// cost: 1138888, -// square: 609, -// }, -// ]; +const favoriteCards: ILayoutCard[] = [ + { + id: "1", + roveHome: "Marasi Drive", + apartmentType: "Studio Flex", + wing: "East Wing", + floorStart: 11, + floorEnd: 35, + units: 234, + cost: 10488888, + square: 619, + }, + { + id: "2", + roveHome: "Marasi Drive", + apartmentType: "1 Bedroom", + wing: "East Wing", + floorStart: 11, + floorEnd: 35, + units: 234, + cost: 1668888, + square: 619, + }, + { + id: "3", + roveHome: "Marasi Drive", + apartmentType: "1 Bedroom", + wing: "East Wing", + floorStart: 11, + floorEnd: 35, + units: 234, + cost: 1668888, + square: 609, + }, + { + id: "4", + roveHome: "Marasi Drive", + apartmentType: "1 Bedroom", + wing: "East Wing", + floorStart: 11, + floorEnd: 35, + units: 234, + cost: 1138888, + square: 609, + }, + { + id: "5", + roveHome: "Marasi Drive", + apartmentType: "Studio Flex", + wing: "East Wing", + floorStart: 11, + floorEnd: 35, + units: 234, + cost: 10488888, + square: 609, + }, + { + id: "6", + roveHome: "Marasi Drive", + apartmentType: "1 Bedroom", + wing: "East Wing", + floorStart: 11, + floorEnd: 35, + units: 234, + cost: 1668888, + square: 609, + }, + { + id: "7", + roveHome: "Marasi Drive", + apartmentType: "1 Bedroom", + wing: "East Wing", + floorStart: 11, + floorEnd: 35, + units: 234, + cost: 1668888, + square: 609, + }, + { + id: "8", + roveHome: "Marasi Drive", + apartmentType: "1 Bedroom", + wing: "East Wing", + floorStart: 11, + floorEnd: 35, + units: 234, + cost: 1138888, + square: 609, + }, + { + id: "9", + roveHome: "Marasi Drive", + apartmentType: "Studio Flex", + wing: "East Wing", + floorStart: 11, + floorEnd: 35, + units: 234, + cost: 10488888, + square: 609, + }, + { + id: "10", + roveHome: "Marasi Drive", + apartmentType: "1 Bedroom", + wing: "East Wing", + floorStart: 11, + floorEnd: 35, + units: 234, + cost: 1668888, + square: 609, + }, + { + id: "11", + roveHome: "Marasi Drive", + apartmentType: "1 Bedroom", + wing: "East Wing", + floorStart: 11, + floorEnd: 35, + units: 234, + cost: 1668888, + square: 609, + }, + { + id: "12", + roveHome: "Marasi Drive", + apartmentType: "1 Bedroom", + wing: "East Wing", + floorStart: 11, + floorEnd: 35, + units: 234, + cost: 1138888, + square: 609, + }, +]; const initialCollectionCompareSwitcher: ISwitcher = { id: "1", @@ -154,8 +154,8 @@ const initialCollectionCompareSwitcher: ISwitcher = { const Favorites = () => { const [sortList, setSortList] = useState(initialSortList); - const [cards, setCards] = useState([]); - // const [cards, setCards] = useState(favoriteCards); + // const [cards, setCards] = useState([]); + const [cards, setCards] = useState(favoriteCards); const [switcher, setSwitcher] = useState(initialCollectionCompareSwitcher); const handleOnSortClick = (sortId: string) => { diff --git a/client/src/pages/Masterplan.tsx b/client/src/pages/Masterplan.tsx index aab9475..abc588d 100644 --- a/client/src/pages/Masterplan.tsx +++ b/client/src/pages/Masterplan.tsx @@ -13,7 +13,7 @@ const Masterplan = () => { }, []); return ( -
+
diff --git a/client/src/types/apartmentSphere.ts b/client/src/types/apartmentSphere.ts index 31da09e..0f4f079 100644 --- a/client/src/types/apartmentSphere.ts +++ b/client/src/types/apartmentSphere.ts @@ -2,6 +2,8 @@ interface ISphereLink { id: string; type: string; labelPosition: [number, number, number]; + video?: string; + videoTitle?: string; } interface ISphere {