zojgame/IRTH
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

virtual

Browse Source
This commit is contained in:
zojgame
2024-06-21 18:19:41 +05:00
parent 22e04fd927
commit b1bd436ab7
17 changed files with 273 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/complexPage/ComplexTopPanel.tsx
+3 -4
View File
@@ -19,7 +19,6 @@ const ComplexTopPanel = () => {
const { onFullscreen, isFullscreen, setIsFullscreen } = useFullScreen();
const { setIsSidebar, isSidebar } = useWingSidebar();
const navigate = useNavigate();
// const { complexId } = useParams();
const handleOnHelpClick = () => {
setModal(<HelpModal />);
@@ -101,12 +100,12 @@ const ComplexTopPanel = () => {
isSidebar ? "opacity-0" : "opacity-100"
}`}
>
<h2 className="font-semibold text-subheadline-s drop-shadow drop-shadow-[0_2px_8px_0px_rgba(62, 84, 100, 0.25)]">
<h2 className="font-semibold text-subheadline-s drop-shadow drop-shadow-[0_2px_8px_0px_rgba(62, 84, 100, 0.25)] select-none">
ROVE Home Marasi Drive
</h2>
<p className="text-s drop-shadow drop-shadow-[0_2px_8px_0px_rgba(62, 84, 100, 0.25)]">
{/* <p className="text-s drop-shadow drop-shadow-[0_2px_8px_0px_rgba(62, 84, 100, 0.25)]">
Select a wing
</p>
</p> */}
</div>
</div>
<div className="flex gap-2 col-span-1 col-start-12 justify-end">
client/src/components/complexWingPage/FloorSidebar/ApartmentDescription.tsx
+3 -1
View File
@@ -3,14 +3,16 @@ import VirtualTourIcon from "../../icons/VirtualTourIcon";
interface ApartmentDescriptionProps {
isVisible: boolean;
is3DTourAvailable: boolean;
descRef: React.LegacyRef<HTMLDivElement>;
}
const ApartmentDescription = ({
isVisible,
is3DTourAvailable,
descRef,
}: ApartmentDescriptionProps) => {
return (
<div className="p-6 py-3">
<div className="p-6 py-3" ref={descRef}>
<div
className={`bg-white rounded-2xl p-6 flex flex-col text-subheadline-s relative text-nowrap desc-shadow py-2 ${
isVisible ? "opacity-100" : "opacity-0"
client/src/components/complexWingPage/FloorSidebar/FloorSidebar.tsx
+9 -1
View File
@@ -1,4 +1,4 @@
import { useState, useEffect } from "react";
import { useState, useEffect, useRef } from "react";
import { IDesctiptionFloor } from "../../../types/descriptionFloor";
import ApartmentDescription from "./ApartmentDescription";
import FloorWestWingHighlighting from "./FloorWestWingHighlighting";
@@ -22,6 +22,7 @@ const FloorSidebar = ({ currentFloor, onMouseEnter }: IFloorSidebarProps) => {
const [isDescVisible, setIsDescVisible] = useState(false);
const [is3DTourAvailable] = useState(true);
const { setModal } = useModal();
const descRef = useRef(null);
function handleOnApartmentClick(
event: React.MouseEvent<SVGSVGElement, 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<HTMLDivElement>).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` }}
>
<ApartmentDescription
descRef={descRef}
isVisible={isDescVisible}
is3DTourAvailable={is3DTourAvailable}
/>
</div>
<div
ref={descRef}
className="absolute h-full right-0 w-full z-30 bg-[#F3F3F2] p-6 flex flex-col top-[56px] "
onMouseOver={onMouseEnter}
>
client/src/components/favoritesPage/FavoriteApartmentCard.tsx
+10 -1
View File
@@ -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(<SendEnquiryModal />);
};
@@ -31,7 +37,10 @@ const FavoriteAppartmentCard = ({ card }: FavoriteAppartmentCardProps) => {
};
return (
<div className="bg-white flex flex-col p-4 rounded-2xl gap-4 cursor-pointer select-none">
<div
className="bg-white flex flex-col p-4 rounded-2xl gap-4 cursor-pointer select-none"
onClick={handleOnFavoriteCardClick}
>
<div className="flex gap-4 justify-between">
<div className="flex gap-1 flex-col">
<p className="text-[#00BED7] text-s leading-5">
client/src/components/header/Header/DesktopHeader.tsx
+1 -1
View File
@@ -4,7 +4,7 @@ import Navbar from "../Navbar/Navbar";
import Location from "../Location";
const DesktopHeader = () => (
<header className="bg-white w-full text-white sm:grid grid-cols-6 fixed left-0 top-0 z-[99999900] font-usual text-m">
<header className="bg-white w-full text-white sm:grid grid-cols-6 fixed left-0 top-0 z-[99999900] font-usual text-m select-none">
<div className="flex gap-4 col-span-2">
<Logo />
<Location />
client/src/components/icons/VideoIcon.tsx
+21
View File
@@ -0,0 +1,21 @@
const VideoIcon = () => {
return (
<svg
width="25"
height="24"
viewBox="0 0 25 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M19.685 11.7856C19.8468 11.8827 19.8468 12.1173 19.685 12.2144L7.62863 19.4482C7.46199 19.5482 7.25 19.4281 7.25 19.2338L7.25 4.76619C7.25 4.57187 7.46199 4.45184 7.62862 4.55182L19.685 11.7856Z"
stroke="#00BED7"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
};
export default VideoIcon;
client/src/components/modals/DisclaimerModal.tsx
+1 -1
View File
@@ -8,7 +8,7 @@ const DisclaimerModal = () => {
};
return (
<div className="absolute z-50 top-0 left-0 w-screen bg-[#0D192266] h-screen backdrop-blur-[6px] grid grid-cols-12 items-center">
<div className="absolute z-[99999999] top-0 left-0 w-screen bg-[#0D192266] h-screen backdrop-blur-[6px] grid grid-cols-12 items-center">
<div className="bg-white rounded-lg col-span-4 col-start-5 py-[37px] px-8">
<div className=" w-full h-1 flex justify-between">
<div className="h-[2px] bg-[#00BED7] w-1/3 rounded-full"></div>
client/src/components/virtualTour/LabelMarker.tsx
+8 -35
View File
@@ -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 (
<>
{
<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 peer"
onClick={handleOnClick}
>
<WalkHereIcon />
</div>
<div className="absolute -left-[66px] bottom-11 w-[168px] 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 font-semibold bg-[#0D192266] py-1 px-2 rounded-lg capitalize">
{currentSphere?.roomType}
</div>
</div>
</div>
{sphereLink.type === "default" && (
<WalkHereMarker sphereLink={sphereLink} apartment={apartment} />
)}
{sphereLink.type === "video" && (
<VideoMarker sphereLink={sphereLink} />
)}
</Html>
}
</>
client/src/components/virtualTour/VideoMarker.tsx
+26
View File
@@ -0,0 +1,26 @@
import { ISphereLink } from "../../types/apartmentSphere";
import VideoIcon from "../icons/VideoIcon";
interface VideoMarkerProps {
sphereLink: ISphereLink;
}
const VideoMarker = ({ sphereLink }: VideoMarkerProps) => {
return (
<div className="relative">
<div
className="bg-white w-9 h-9 rounded-full text-[#00BED7] flex items-center justify-center cursor-pointer peer"
// onClick={handleOnClick}
>
<VideoIcon />
</div>
<div className="absolute -left-[66px] bottom-11 w-[168px] 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="text-white font-semibold bg-[#0D192266] py-1 px-2 rounded-lg capitalize">
{sphereLink.videoTitle}
</div>
</div>
</div>
);
};
export default VideoMarker;
client/src/components/virtualTour/VirtualTourSidebar.tsx
+1 -1
View File
@@ -45,7 +45,7 @@ const VirtualTourSidebar = ({ currentAppartment }: VirtualTourSidebarProps) => {
};
return (
<div className="absolute w-screen h-screen grid z-[99999999] pointer-events-none select-none">
<div className="absolute w-screen h-screen grid z-[99999997] pointer-events-none select-none">
<div className="h-screen py-[72px] px-3 w-[360px]">
<div className="bg-white w-full rounded-2xl p-5 flex flex-col relative rounded-ee-none">
<div className="flex items-center justify-between pb-[18px] border-b gap-4">
client/src/components/virtualTour/VirtualTourWrapper.tsx
+1 -1
View File
@@ -27,7 +27,7 @@ const VirtualTourWrapper = ({ appartment }: VirtualTourWrapperProps) => {
useEffect(() => {
setSelectedSphere(appartment.spheres[0]);
}, []);
}, [appartment.spheres, setSelectedSphere]);
return (
<Suspense
client/src/components/virtualTour/WalkHereMarker.tsx
+42
View File
@@ -0,0 +1,42 @@
import useSphere from "../../store/useSphere";
import { ISphereLink, IAppartmentComplex } from "../../types/apartmentSphere";
import WalkHereIcon from "../icons/WalkHereIcon";
interface WalkHereMarkerProps {
sphereLink: ISphereLink;
apartment: IAppartmentComplex;
}
const WalkHereMarker = ({ sphereLink, apartment }: WalkHereMarkerProps) => {
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 (
<div className="relative">
<div
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 w-[168px] 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="text-white font-semibold bg-[#0D192266] py-1 px-2 rounded-lg capitalize">
{currentSphere?.roomType}
</div>
</div>
</div>
);
};
export default WalkHereMarker;
client/src/data/appartments.json
+7
View File
@@ -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]
}
]
},
client/src/pages/Complex.tsx
+1 -1
View File
@@ -4,7 +4,7 @@ import SequenceSlider from "../components/complexPage/SequenceSlider";
const Complex = () => {
return (
<div className="overflow-hidden h-screen w-screen">
<div className="overflow-hidden h-screen w-screen select-none">
<ComplexTopPanel />
<SequenceSlider path={"/images/sequence"} />
<ButtomPanelCompass />
client/src/pages/Favorites.tsx
+136 -136
View File
@@ -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<ILayoutCard[]>([]);
// const [cards, setCards] = useState(favoriteCards);
// const [cards, setCards] = useState<ILayoutCard[]>([]);
const [cards, setCards] = useState(favoriteCards);
const [switcher, setSwitcher] = useState(initialCollectionCompareSwitcher);
const handleOnSortClick = (sortId: string) => {
client/src/pages/Masterplan.tsx
+1 -1
View File
@@ -13,7 +13,7 @@ const Masterplan = () => {
}, []);
return (
<div className="overflow-hidden h-screen w-screen">
<div className="overflow-hidden h-screen w-screen select-none">
<TopPanel />
<Map />
<ButtomPanel />
client/src/types/apartmentSphere.ts
+2
View File
@@ -2,6 +2,8 @@ interface ISphereLink {
id: string;
type: string;
labelPosition: [number, number, number];
video?: string;
videoTitle?: string;
}
interface ISphere {