diff --git a/public/images/apartment/A1T/A1T_1F.png b/public/images/apartment/A1T/A1T_1F.png new file mode 100644 index 0000000..d8e8dfd Binary files /dev/null and b/public/images/apartment/A1T/A1T_1F.png differ diff --git a/public/images/apartment/A1T/A1T_GF.png b/public/images/apartment/A1T/A1T_GF.png new file mode 100644 index 0000000..dafabb1 Binary files /dev/null and b/public/images/apartment/A1T/A1T_GF.png differ diff --git a/public/images/apartment/A1T/A1T_P.png b/public/images/apartment/A1T/A1T_P.png new file mode 100644 index 0000000..a20caf9 Binary files /dev/null and b/public/images/apartment/A1T/A1T_P.png differ diff --git a/public/images/apartment/A1T/perspectiveWorking/001_Villa_A1TO_CAM_01_R05.jpg b/public/images/apartment/A1T/perspectiveWorking/001_Villa_A1TO_CAM_01_R05.jpg new file mode 100644 index 0000000..e92b5da Binary files /dev/null and b/public/images/apartment/A1T/perspectiveWorking/001_Villa_A1TO_CAM_01_R05.jpg differ diff --git a/public/images/apartment/A1T/perspectiveWorking/001_Villa_A1TO_CAM_02_R04.jpg b/public/images/apartment/A1T/perspectiveWorking/001_Villa_A1TO_CAM_02_R04.jpg new file mode 100644 index 0000000..aa8e866 Binary files /dev/null and b/public/images/apartment/A1T/perspectiveWorking/001_Villa_A1TO_CAM_02_R04.jpg differ diff --git a/src/App.tsx b/src/App.tsx index 7d2142f..51eb8ec 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -5,6 +5,7 @@ import { useVilla } from "./hooks/useVilla"; import Desktop from "./pages/Desktop/Desktop"; import Mobile from "./pages/Mobile/Mobile"; import useStore from "./store/store"; +import { MapComponent } from "./components/Map/Map"; function App() { const { villa } = useVilla(); @@ -14,7 +15,12 @@ function App() { setCurrentVilla(villa); }, [setCurrentVilla, villa]); - return <>{isMobile ? : }; + // return <>{isMobile ? : }; + return ( + <> + + + ); } export default App; diff --git a/src/components/Map/Map.tsx b/src/components/Map/Map.tsx index e2615a6..fb521d1 100644 --- a/src/components/Map/Map.tsx +++ b/src/components/Map/Map.tsx @@ -1,16 +1,25 @@ import { useEffect, useRef, useState } from "react"; import MapView from "@arcgis/core/views/MapView"; import Map from "@arcgis/core/Map"; + // import { createMapView } from "../../ArcGIS-SDK"; const createMapView = (container: HTMLDivElement) => { + // const map = new Map({ + // // extent:esri.geometry.geographicToWebMercator(initExtent), + // slider:false + // }); const map = new Map({ - basemap: "osm", + // basemap: "osm", + basemap: "streets", + // ground: "world-elevation", + // basemap: "terrain/base", }); + return new MapView({ map: map, container: container, - center: [55, 25], + center: [54.67, 24.33], zoom: 13, }); }; @@ -38,7 +47,7 @@ export const MapComponent = (props: IArcMapViewProps) => { return () => _view && _view.destroy(); }, []); return ( -
+
{children} diff --git a/src/components/UnitList.tsx b/src/components/UnitList.tsx new file mode 100644 index 0000000..e693c44 --- /dev/null +++ b/src/components/UnitList.tsx @@ -0,0 +1,47 @@ +const units = [ + { id: 1, title: "Entrance", area: "3.25x3.10" }, + { id: 2, title: "Living Room", area: "4.10x5.10" }, + { id: 3, title: "Dining Room", area: "5.00x5.00" }, + { id: 4, title: "Store 1", area: "2.90x1.35" }, + { id: 5, title: "Men’s Majlas", area: "5.00x7.00" }, + { id: 6, title: "Bathroom 1", area: "1.70x2.00" }, + { id: 7, title: "Washbasins", area: "1.80x2.00" }, + { id: 8, title: "Guest Bedroom", area: "4.10x4.60" }, + { id: 9, title: "Bathroom 2", area: "2.70x2.00" }, + { id: 10, title: "Kitchen", area: "5.00x4.00" }, + { id: 11, title: "Bathroom 3", area: "1.50x2.50" }, + { id: 12, title: "Store 2", area: "2.20x1.30" }, + { id: 13, title: "Laundry Room", area: "2.20x1.50" }, + { id: 14, title: "Domestic Worker Room", area: "3.50x3.00" }, + { id: 15, title: "Domestic Worker Bathroom", area: "1.50x2.00" }, +]; + +const UnitList = () => { + return ( +
+
+
№
+
+
Unit
+
Area (m)
+
+
+ {units.map((unit, index) => ( +
+
{index + 1}
+
+
{unit.title}
+
{unit.area}
+
+
+ ))} +
+ ); +}; + +export default UnitList; diff --git a/src/components/ViewToggle.tsx b/src/components/ViewToggle.tsx index a1e8947..4890a67 100644 --- a/src/components/ViewToggle.tsx +++ b/src/components/ViewToggle.tsx @@ -48,7 +48,7 @@ const ViewToggle = ({ offset, isDesktop }: ViewSwitcherProps) => { onClick={handleOnFirstClick} className={`${ currentView === 1 ? "bg-black text-white" : "" - } py-2 px-4 w-fit rounded-[32px] `} + } py-2 px-4 w-fit rounded-[32px] `} > {" "} Outdoor diff --git a/src/components/mobile/Appartment/Parameters.tsx b/src/components/mobile/Appartment/Parameters.tsx index a626ca9..f558991 100644 --- a/src/components/mobile/Appartment/Parameters.tsx +++ b/src/components/mobile/Appartment/Parameters.tsx @@ -15,7 +15,7 @@ const Parameters = () => {
- Plot area + Plot area m2
{currentVilla && currentVilla.plotArea} @@ -23,7 +23,7 @@ const Parameters = () => {
- Total Build up Area + Unit Area, m2
{currentVilla && currentVilla.totalBuildUpArea} diff --git a/src/components/mobile/Appartment/ViewControllerModal.tsx b/src/components/mobile/Appartment/ViewControllerModal.tsx index 74a2cbb..f919efc 100644 --- a/src/components/mobile/Appartment/ViewControllerModal.tsx +++ b/src/components/mobile/Appartment/ViewControllerModal.tsx @@ -1,15 +1,16 @@ import { useEffect, useState } from "react"; import { SwipeEventData, useSwipeable } from "react-swipeable"; import ButtonSwipperIcon from "../../../icons/ButtonSwipperIcon"; -// import { Parameters as ParametersType } from "../../../types/appartment"; import Parameters from "./Parameters"; import LayoutSlider from "./LayoutSlider"; import ImageSlider from "./ImageSlider"; import ViewToggle from "../../ViewToggle"; +import UnitList from "../../UnitList"; const ViewControllerModal = () => { // const { sliders } = parameters; const [offset, setOffset] = useState(1); + const [isActive, setIsActive] = useState(false); const [isTouchable, setIsTouchable] = useState(true); const [scrollY, setScrollY] = useState(0); @@ -24,32 +25,48 @@ const ViewControllerModal = () => { const handleOnSwiped = (eventData: SwipeEventData) => { if (eventData.dir === "Down") { setOffset(1); + setIsActive(false); } if (eventData.dir === "Up") { setOffset(0); + setIsActive(true); } }; const handleOnBackClick = () => { setOffset(1); + setIsActive(false); }; const handleOnScroll = (event: React.UIEvent) => { setScrollY(event.currentTarget.scrollTop); }; + const handleOnSwiping = (eventData: SwipeEventData) => { + const screenHeight = window.innerHeight; + if (eventData.dir === "Down" && isActive && offset <= 1) { + const offsetDown = eventData.absY / screenHeight; + setOffset(() => offsetDown); + } + if (eventData.dir === "Up" && !isActive && offset >= 0) { + const offsetDown = 1 - eventData.absY / screenHeight; + setOffset(() => offsetDown); + } + }; + const handlers = useSwipeable({ onSwiped: handleOnSwiped, - preventScrollOnSwipe: offset === 1, + onSwiping: handleOnSwiping, + + preventScrollOnSwipe: offset !== 0, trackTouch: isTouchable, }); return ( -
+
{ + {/* */}
+
diff --git a/src/pages/Mobile/Mobile.tsx b/src/pages/Mobile/Mobile.tsx index 8aa9876..61e864d 100644 --- a/src/pages/Mobile/Mobile.tsx +++ b/src/pages/Mobile/Mobile.tsx @@ -1,10 +1,11 @@ import { useEffect } from "react"; import { ReactUnityEventParameter } from "react-unity-webgl/distribution/types/react-unity-event-parameters"; -import { Unity, useUnityContext } from "react-unity-webgl"; +import { Unity } from "react-unity-webgl"; import useStore from "../../store/store"; import LoaderModal from "../../components/LoaderModal"; import ButtonPanel from "../../components/mobile/Appartment/ButtonPanel"; import ViewControllerModal from "../../components/mobile/Appartment/ViewControllerModal"; +import { useUnity } from "../../hooks/useUnity"; const Mobile = () => { const { @@ -25,13 +26,7 @@ const Mobile = () => { sendMessage, addEventListener, removeEventListener, - } = useUnityContext({ - loaderUrl: "builds/estate-webgl.loader.js", - dataUrl: "builds/estate-webgl.data.unityweb", - frameworkUrl: "builds/estate-webgl.framework.js.unityweb", - codeUrl: "builds/estate-webgl.wasm.unityweb", - streamingAssetsUrl: "StreamingAssets", - }); + } = useUnity(); const handleSetLoaded = (isSceneLoaded: ReactUnityEventParameter) => { if (isSceneLoaded === 0) { @@ -43,7 +38,9 @@ const Mobile = () => { }; const handleSetView = (view: ReactUnityEventParameter) => { - setCurrentView(view as number); + if (view === 1 || view === 2 || view === 3) { + setCurrentView(view); + } }; useEffect(() => {