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

refactoring + bug fix

Browse Source
This commit is contained in:
zojgame
2024-02-15 18:37:20 +05:00
parent b41c877708
commit ce7bc77b1c
12 changed files with 102 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.css
View File
src/App.tsx
-53
View File
@@ -1,53 +0,0 @@
import { isMobile } from "react-device-detect";
import { useEffect, useState } from "react";
import { osVersion, isIOS } from "react-device-detect";
import "./App.css";
import { useVilla } from "./hooks/useVilla";
import Desktop from "./pages/Desktop/Desktop";
import Mobile from "./pages/Mobile/Mobile";
import useStore from "./store/store";
import NotSupportModal from "./components/NotSupportModal";
function isWebview() {
const navigator = window.navigator;
const userAgent = navigator.userAgent;
const normalizedUserAgent = userAgent.toLowerCase();
const standalone = navigator.standalone;
const isIos =
/ip(ad|hone|od)/.test(normalizedUserAgent) ||
(navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1);
const isAndroid = /android/.test(normalizedUserAgent);
const isSafari = /safari/.test(normalizedUserAgent);
const isWebview =
(isAndroid && /; wv\)/.test(normalizedUserAgent)) ||
(isIos && !standalone && !isSafari);
return isWebview;
}
function App() {
const { villa } = useVilla();
const { setCurrentVilla, setModal } = useStore();
const [isNotSupport, setIsNotSupport] = useState(true);
useEffect(() => {
// const isDeviceSupport = !(Number(osVersion) < 17 && isIOS);
// console.log("isDeviceSupport", isDeviceSupport);
// setIsNotSupport(!isDeviceSupport);
setCurrentVilla(villa);
}, [setCurrentVilla, villa]);
// useEffect(() => {
// if (isNotSupport) {
// setModal(<NotSupportModal />);
// }
// }, [isNotSupport]);
return (
// <>{isNotSupport ? <></> : <>{isMobile ? <Mobile /> : <Desktop />}</>}</>
<>{isMobile ? <Mobile /> : <Desktop />}</>
);
}
export default App;
src/components/LayoutToggle.tsx
+3 -3
View File
@@ -19,7 +19,7 @@ const LayoutToggle = ({
<div
className={`${
currentView === 1 ? "bg-[#333] text-white" : ""
} py-2 px-4 w-fit rounded-[32px] `}
} py-2 px-4 w-full text-center text-nowrap rounded-[32px] `}
onClick={() => setCurrentView(1)}
>
{" "}
@@ -28,7 +28,7 @@ const LayoutToggle = ({
<div
className={`${
currentView === 2 ? "bg-[#333] text-white" : ""
} py-2 px-4 w-fit rounded-[32px] `}
} py-2 px-4 w-full rounded-[32px] text-center text-nowrap`}
onClick={() => setCurrentView(2)}
>
{" "}
@@ -37,7 +37,7 @@ const LayoutToggle = ({
<div
className={`${
currentView === 3 ? "bg-[#333] text-white" : ""
} py-2 px-4 w-fit rounded-[32px] `}
} py-2 px-4 w-full rounded-[32px] text-center text-nowrap`}
onClick={() => setCurrentView(3)}
>
{" "}
src/components/Map/MapView.tsx
+5 -5
View File
@@ -88,13 +88,12 @@ type MapViewComponentProps = {
export const MapViewComponent = (props: MapViewComponentProps) => {
const { children, className } = props;
const { selectedOnMapVilla, setModal } = useStore();
const [isLoading, setIsLoading] = useState(false);
const { selectedOnMapVilla, setLoader, setModal } = useStore();
const [isLoading, setIsLoading] = useState(true);
const [view, setView] = useState<__esri.MapView | undefined>();
const mapRef = useRef(null);
const [view, setView] = useState<__esri.MapView | undefined>();
useEffect(() => {
if (!mapRef?.current) return;
@@ -109,8 +108,9 @@ export const MapViewComponent = (props: MapViewComponentProps) => {
useEffect(() => {
if (isLoading) {
setModal(<LoaderModal isSimleLoader />);
setLoader(<LoaderModal isSimleLoader />);
} else {
setLoader(null);
if (isMobile) {
if (selectedOnMapVilla) {
setModal(<SelectedHouseModal />);
src/components/ViewToggle.tsx
+1 -5
View File
@@ -6,12 +6,10 @@ type ViewSwitcherProps = {
};
const ViewToggle = ({ offset, isDesktop }: ViewSwitcherProps) => {
const { sendMessageToUnity, setCurrentView, currentView, setIs3DTour } =
useStore();
const { sendMessageToUnity, setCurrentView, currentView } = useStore();
const handleOnFirstClick = () => {
setCurrentView(1);
setIs3DTour(false);
if (sendMessageToUnity) {
sendMessageToUnity("JsConnector", "SetOutdoor");
}
@@ -19,7 +17,6 @@ const ViewToggle = ({ offset, isDesktop }: ViewSwitcherProps) => {
const handleOnSecondClick = () => {
setCurrentView(2);
setIs3DTour(false);
if (sendMessageToUnity) {
sendMessageToUnity("JsConnector", "SetGroundFloor");
}
@@ -27,7 +24,6 @@ const ViewToggle = ({ offset, isDesktop }: ViewSwitcherProps) => {
const handleOnThirdClick = () => {
setCurrentView(3);
setIs3DTour(false);
if (sendMessageToUnity) {
sendMessageToUnity("JsConnector", "SetFirstFloor");
}
src/components/mobile/Appartment/ButtomPanelModal.tsx
+4 -5
View File
@@ -75,7 +75,6 @@ export default function ButtomPanelModal() {
return (
<div className="flex overflow-hidden">
<a.div
// className={`fixed h-[calc(100vh)] w-screen z-30 border bg-white touch-none ${
className={`fixed h-[calc(100vh + 100px)] w-screen z-30 border bg-white touch-none ${
offset === 1 ? "rounded-ss-2xl rounded-se-2xl " : ""
}`}
@@ -87,12 +86,12 @@ export default function ButtomPanelModal() {
<ButtonSwipperIcon />
</div>
<div
className={`h-[calc(100vh-110px)] overflow-y-scroll ${
!isTouchable ? "" : "touch-pan-down"
}`}
className={`h-[calc(100vh-110px)] ${
offset !== 1 ? "overflow-y-scroll" : "pr-[3px]"
} ${!isTouchable ? "" : "touch-pan-down"}`}
onScroll={handleOnScroll}
>
<ImageSlider />
<ImageSlider isScrollable={offset !== 1} />
<Parameters />
<LayoutSection />
</div>
src/components/mobile/Appartment/ButtonPanel.tsx
+35 -11
View File
@@ -1,9 +1,27 @@
import { useNavigate } from "react-router-dom";
import useStore from "../../../store/store";
import PopupModal from "./PopupModal";
import HelpPanel from "./HelpPanel";
import HelpButton from "../../HelpButton";
import BackButton from "../../BackButton";
import { useNavigate } from "react-router-dom";
function isWebview() {
const navigator = window.navigator;
const userAgent = navigator.userAgent;
const normalizedUserAgent = userAgent.toLowerCase();
const standalone = window.matchMedia("(display-mode: standalone)").matches;
const isIos =
/ip(ad|hone|od)/.test(normalizedUserAgent) ||
(navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1);
const isAndroid = /android/.test(normalizedUserAgent);
const isSafari = /safari/.test(normalizedUserAgent);
const isWebview =
(isAndroid && /; wv\)/.test(normalizedUserAgent)) ||
(isIos && !standalone && !isSafari);
return isWebview;
}
const ButtonPanel = () => {
const {
@@ -15,6 +33,7 @@ const ButtonPanel = () => {
currentView,
} = useStore();
const navigate = useNavigate();
const isWebView = isWebview();
const handleOnHelpClick = () => {
setModal(<PopupModal />);
@@ -43,17 +62,22 @@ const ButtonPanel = () => {
onClick={handleOnBackClick}
/>
) : (
<BackButton
onClick={handleOnMapClick}
className="w-8 h-8 flex justify-center items-center pl-[6px] pr-[6px]"
/>
// <BackButton
// onClick={handleOnMapClick}
// title="Map"
// className="w-[90px] h-10"
// />
<>
{!isWebView ? (
<BackButton
onClick={handleOnMapClick}
className="w-8 h-8 flex justify-center items-center pl-[6px] pr-[6px]"
/>
) : (
<></>
)}
</>
)}
{is3DTour ? (
<HelpButton handleOnHelpClick={handleOnHelpClick} />
) : (
<></>
)}
<HelpButton handleOnHelpClick={handleOnHelpClick} />
</div>
}
</>
src/components/mobile/Appartment/ImageSlider.tsx
+10 -2
View File
@@ -1,9 +1,17 @@
import useStore from "../../../store/store";
const ImageSlider = () => {
type ImageSliderProps = {
isScrollable?: boolean;
};
const ImageSlider = ({ isScrollable = true }: ImageSliderProps) => {
const { currentVilla } = useStore();
return (
<div className="flex p-6 gap-2 overflow-x-scroll touch-pan-x">
<div
className={`flex p-6 gap-2 ${
isScrollable ? "overflow-x-scroll" : "overflow-x-hidden"
} touch-pan-x`}
>
{currentVilla &&
currentVilla.perspectiveWorkings.map((working) => (
<img
src/main.tsx
+3 -7
View File
@@ -1,11 +1,7 @@
import ReactDOM from "react-dom/client";
import {
RouterProvider,
createHashRouter,
createBrowserRouter,
} from "react-router-dom";
import { RouterProvider, createBrowserRouter } from "react-router-dom";
import MainPage from "./pages/MainPage";
import App from "./App";
import ApartmentPage from "./pages/ApartmentPage";
import "./index.css";
import Layout from "./components/Layout";
@@ -16,7 +12,7 @@ const router = createBrowserRouter([
children: [
{
path: "/:villaTitle",
element: <App />,
element: <ApartmentPage />,
},
{
path: "/",
src/pages/ApartmentPage.tsx
+19
View File
@@ -0,0 +1,19 @@
import { isMobile } from "react-device-detect";
import { useEffect } from "react";
import { useVilla } from "../hooks/useVilla";
import DesktopApartmentPage from "./Desktop/DesktopApartmentPage";
import MobileApartmentPage from "./Mobile/MobileApartmentPage";
import useStore from "../store/store";
function ApartmentPage() {
const { villa } = useVilla();
const { setCurrentVilla } = useStore();
useEffect(() => {
setCurrentVilla(villa);
}, [setCurrentVilla, villa]);
return <>{isMobile ? <MobileApartmentPage /> : <DesktopApartmentPage />}</>;
}
export default ApartmentPage;
src/pages/Desktop/Desktop.tsx → src/pages/Desktop/DesktopApartmentPage.tsx
+2 -2
View File
@@ -9,7 +9,7 @@ import { useVilla } from "../../hooks/useVilla";
import ViewToggle from "../../components/ViewToggle";
import ParameterDescription from "../../components/desktop/Appartment/ParameterDescription";
const Desktop = () => {
const DesktopApartmentPage = () => {
const {
setCurrentView,
setSendMessageToUnity,
@@ -94,4 +94,4 @@ const Desktop = () => {
);
};
export default Desktop;
export default DesktopApartmentPage;
src/pages/Mobile/Mobile.tsx → src/pages/Mobile/MobileApartmentPage.tsx
+20 -19
View File
@@ -1,40 +1,35 @@
/* eslint-disable react-hooks/exhaustive-deps */
import { useEffect, useState } from "react";
import { ReactUnityEventParameter } from "react-unity-webgl/distribution/types/react-unity-event-parameters";
import { Unity } from "react-unity-webgl";
import { osVersion, isIOS } from "react-device-detect";
import useStore from "../../store/store";
import LoaderModal from "../../components/LoaderModal";
import ButtonPanel from "../../components/mobile/Appartment/ButtonPanel";
import { useUnity } from "../../hooks/useUnity";
import { useVilla } from "../../hooks/useVilla";
import ButtomPanelModal from "../../components/mobile/Appartment/ButtomPanelModal";
import NotSupportModal from "../../components/NotSupportModal";
type MobileProps = {
isWebView?: boolean;
};
const Mobile = ({ isWebView }: MobileProps) => {
const MobileApartmentPage = () => {
const {
setCurrentView,
setModal,
currentVilla,
setSendMessageToUnity,
setLoader,
setIs3DTour,
is3DTour,
} = useStore();
const { villa } = useVilla();
const { unityProvider, sendMessage, addEventListener, removeEventListener } =
useUnity();
// const [isNotSupport, setIsNotSupport] = useState(true);
const [isContainerLoaded, setIsContainerLoaded] = useState(false);
// useEffect(() => {
// const isDeviceSupport = !(Number(osVersion) < 17 && isIOS);
// console.log("isDeviceSupport", isDeviceSupport);
// setIsNotSupport(!isDeviceSupport);
// }, []);
const isDeviceSupported = !(Number(osVersion) < 17 && isIOS);
useEffect(() => {
if (!isDeviceSupported) {
return;
}
setLoader(<LoaderModal />);
addEventListener("SetLoaded", handleSetLoaded);
addEventListener("SetView", handleSetView);
@@ -50,6 +45,10 @@ const Mobile = ({ isWebView }: MobileProps) => {
}, []);
useEffect(() => {
if (!isDeviceSupported) {
setModal(<NotSupportModal />);
return;
}
setModal(<ButtomPanelModal />);
setSendMessageToUnity(sendMessage);
if (isContainerLoaded) {
@@ -84,13 +83,15 @@ const Mobile = ({ isWebView }: MobileProps) => {
<>
<div className="h-screen overflow-hidden relative">
<ButtonPanel />
<Unity
unityProvider={unityProvider}
style={{ width: "100vw", height: "100vh" }}
/>
{isDeviceSupported && (
<Unity
unityProvider={unityProvider}
style={{ width: "100vw", height: "100vh" }}
/>
)}
</div>
</>
);
};
export default Mobile;
export default MobileApartmentPage;