From 8d6d627c6696e2105bf9ed19c39e8655950ca4e9 Mon Sep 17 00:00:00 2001
From: zojgame <zogame002@gmail.com>
Date: Mon, 26 Feb 2024 17:10:10 +0500
Subject: [PATCH] map fixed + fullscreen mode + adaptive fixing

---
 package.json                                  |   1 +
 src/components/ImagesButton.tsx               |   2 +-
 src/components/LayoutButton.tsx               |   2 +-
 src/components/Map/Map.tsx                    |  59 +--------
 src/components/Map/MapMediaLayer.tsx          |   6 +-
 src/components/Map/MapView.tsx                |   5 +-
 .../desktop/Appartment/ButtonPanel.tsx        | 113 ++++++++++++++----
 .../desktop/Appartment/LayoutModal.tsx        |   4 +-
 .../Appartment/ParameterDescription.tsx       |   2 +-
 src/index.css                                 |   4 +
 src/pages/Desktop/DesktopApartmentPage.tsx    |  47 ++++----
 src/store/store.ts                            |   4 -
 yarn.lock                                     |  12 ++
 13 files changed, 136 insertions(+), 125 deletions(-)

diff --git a/package.json b/package.json
index a074f6e..de4e098 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "react": "^18.2.0",
     "react-device-detect": "^2.2.3",
     "react-dom": "^18.2.0",
+    "react-full-screen": "^1.1.1",
     "react-router-dom": "^6.21.3",
     "react-swipeable": "^7.0.1",
     "react-unity-webgl": "^9.5.0",
diff --git a/src/components/ImagesButton.tsx b/src/components/ImagesButton.tsx
index d2693cc..456389d 100644
--- a/src/components/ImagesButton.tsx
+++ b/src/components/ImagesButton.tsx
@@ -8,7 +8,7 @@ const ImagesButton = ({ onClick }: ImagesButtonProps) => {
   return (
     <button
       onClick={onClick}
-      className="bg-white py-[6px] pr-5 pl-4 rounded-full border border-[#C7BDBA] flex gap-1 items-center hover:bg-secondary transition-all duration-200"
+      className="bg-white py-[6px] pr-5 pl-4 rounded-full border border-[#C7BDBA] flex gap-1 items-center hover:bg-secondary transition-all duration-200 h-10 "
     >
       <ImagesIcon />
       Images
diff --git a/src/components/LayoutButton.tsx b/src/components/LayoutButton.tsx
index 3607c37..e5adb1d 100644
--- a/src/components/LayoutButton.tsx
+++ b/src/components/LayoutButton.tsx
@@ -8,7 +8,7 @@ const LayoutButton = ({ onClick }: LayoutButtonProps) => {
   return (
     <button
       onClick={onClick}
-      className="bg-white py-[6px] pr-5 pl-4 rounded-full border border-[#C7BDBA] text-[16px] flex gap-1 justify-center items-center hover:bg-secondary transition-all duration-200"
+      className="bg-white py-[6px] pr-5 pl-4 rounded-full border border-[#C7BDBA] text-[16px] flex gap-1 justify-center items-center hover:bg-secondary transition-all duration-200 h-10"
     >
       <LayoutIcon />
       Layout
diff --git a/src/components/Map/Map.tsx b/src/components/Map/Map.tsx
index 320c1b2..64292cf 100644
--- a/src/components/Map/Map.tsx
+++ b/src/components/Map/Map.tsx
@@ -1,59 +1,16 @@
-import PictureMarkerSymbol from "@arcgis/core/symbols/PictureMarkerSymbol";
 import { useState, useEffect } from "react";
-import Polygon from "@arcgis/core/geometry/Polygon";
-import { MapGraphic } from "./MapGraphic";
 import { MapViewComponent } from "./MapView";
-import { MapGraphicsLayer } from "./MapGraphicsLayer";
 import { MapMediaLayer } from "./MapMediaLayer";
-import {
-  GRAPHIC_WIDTH,
-  GRAPHIC_HEIGHT,
-  ACTIVE_VILLAS_IMAGE,
-  GRAPHIC_X_POSITION,
-  GRAPHIC_Y_POSITION,
-} from "../../consts/map";
+import { ACTIVE_VILLAS_IMAGE } from "../../consts/map";
 import { VillaImage } from "../../types/map";
 import useStore from "../../store/store";
 
-const createPolygon = (polygonProperties: __esri.PolygonProperties) =>
-  new Polygon(polygonProperties);
-const ring = [
-  // [54.657801, 24.359971],
-  [GRAPHIC_X_POSITION, GRAPHIC_Y_POSITION],
-  // [54.666801, 24.338971],
-];
-// const ring = [[GRAPHIC_X_POSITION, GRAPHIC_Y_POSITION]];
-// const ring = [[GRAPHIC_X_POSITION, GRAPHIC_Y_POSITION]];
-
-const polygon = createPolygon({
-  rings: [ring],
-});
-
-const villas = new PictureMarkerSymbol({
-  url: "/images/map/Villas1.png",
-  width: GRAPHIC_WIDTH,
-  height: GRAPHIC_HEIGHT,
-  xoffset: -2,
-  yoffset: -5,
-});
-
-// const villas = {
-//   type: "picture-marker",
-//   contentType: "image/png",
-//   url: "/images/map/Villas.png",
-//   width: GRAPHIC_WIDTH,
-//   height: GRAPHIC_HEIGHT,
-// };
-
 type MapComponentProps = {
   className?: string;
 };
 
 const MapComponent = ({ className }: MapComponentProps) => {
   const { selectedOnMapVilla } = useStore();
-  const [villaSymbol, setVillaSymbol] = useState<PictureMarkerSymbol | null>(
-    null
-  );
   const [selectedVilla, setSelectedVilla] = useState<VillaImage | null>(null);
 
   useEffect(() => {
@@ -64,25 +21,13 @@ const MapComponent = ({ className }: MapComponentProps) => {
     );
 
     if (_selectedVilla) {
-      const _villaSymbol = new PictureMarkerSymbol({
-        url: `/images/map/${_selectedVilla.image}`,
-        width: GRAPHIC_WIDTH,
-        height: GRAPHIC_HEIGHT,
-      });
-
       setSelectedVilla(_selectedVilla);
-      setVillaSymbol(_villaSymbol);
     }
   }, [selectedOnMapVilla]);
 
   return (
     <MapViewComponent className={className}>
-      <MapMediaLayer selectedVilla={selectedVilla}>
-        {/* <MapGraphic geometry={polygon} symbol={villas} />
-        {selectedVilla && villaSymbol && (
-          <MapGraphic geometry={polygon} symbol={villaSymbol} />
-        )} */}
-      </MapMediaLayer>
+      <MapMediaLayer selectedVilla={selectedVilla}></MapMediaLayer>
     </MapViewComponent>
   );
 };
diff --git a/src/components/Map/MapMediaLayer.tsx b/src/components/Map/MapMediaLayer.tsx
index baaf055..d751928 100644
--- a/src/components/Map/MapMediaLayer.tsx
+++ b/src/components/Map/MapMediaLayer.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import { useContext, useEffect, useState } from "react";
 import Extent from "@arcgis/core/geometry/Extent.js";
 import MediaLayer from "@arcgis/core/layers/MediaLayer.js";
@@ -38,7 +39,6 @@ export const MapMediaLayer = ({
         extent: extent,
       }),
     });
-
     setAllVillas(allVillasImage);
 
     const _imagesLayer = new MediaLayer({
@@ -62,14 +62,12 @@ export const MapMediaLayer = ({
       });
 
       setImagesLayer(_imagesLayer);
-      return;
     }
-  }, [selectedVilla, allVillas]);
+  }, [selectedVilla, allVillas, view]);
 
   useEffect(() => {
     if (!view || !imagesLayer) return;
     view.map.add(imagesLayer);
-    console.log("loaded");
   }, [view, imagesLayer]);
 
   return (
diff --git a/src/components/Map/MapView.tsx b/src/components/Map/MapView.tsx
index 994b70a..739e47a 100644
--- a/src/components/Map/MapView.tsx
+++ b/src/components/Map/MapView.tsx
@@ -52,7 +52,6 @@ const createMapView = (container: HTMLDivElement) => {
         event.stopPropagation();
       }
     });
-
     return view;
   }
 
@@ -111,7 +110,7 @@ export const MapViewComponent = (props: MapViewComponentProps) => {
     return () => {
       _view && _view.destroy();
     };
-  }, []);
+  }, [selectedOnMapVilla]);
 
   useEffect(() => {
     if (isLoading) {
@@ -139,8 +138,6 @@ export const MapViewComponent = (props: MapViewComponentProps) => {
         handle.remove();
       }
     });
-
-    return () => {};
   }, [view, selectedOnMapVilla]);
 
   return (
diff --git a/src/components/desktop/Appartment/ButtonPanel.tsx b/src/components/desktop/Appartment/ButtonPanel.tsx
index 972010f..56d4ad7 100644
--- a/src/components/desktop/Appartment/ButtonPanel.tsx
+++ b/src/components/desktop/Appartment/ButtonPanel.tsx
@@ -1,4 +1,6 @@
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
+import { FullScreenHandle } from "react-full-screen";
+import { useState } from "react";
 import HelpButton from "../../HelpButton";
 import ResizeButton from "../../ResizeButton";
 import BackButton from "../../BackButton";
@@ -10,11 +12,18 @@ import LayoutModal from "./LayoutModal";
 import ImagesModal from "./ImagesModal";
 import PedestrianIcon from "../../../icons/Pedestrianicon";
 
-const ButtonPanel = () => {
+type ButtonPanelProps = {
+  handleFullscreen: FullScreenHandle;
+};
+
+const ButtonPanel = ({ handleFullscreen }: ButtonPanelProps) => {
   const navigate = useNavigate();
+  const location = useLocation();
+  // const history = useHistory();
+
   const {
-    setIsFullMode,
-    isFullMode,
+    // setIsFullMode,
+    // isFullMode,
     setModal,
     is3DTour,
     sendMessageToUnity,
@@ -22,12 +31,20 @@ const ButtonPanel = () => {
     setIs3DTour,
   } = useStore();
 
+  const [isFullMode, setIsFullMode] = useState(false);
+
   const handleOnMapClick = () => {
-    navigate("../");
+    // navigate("../");
   };
 
   const handleOnResizeClick = () => {
-    setIsFullMode(!isFullMode);
+    // setIsFullMode(!isFullMode);
+    setIsFullMode((prev) => !prev);
+    if (isFullMode) {
+      handleFullscreen.enter();
+    } else {
+      handleFullscreen.exit();
+    }
   };
 
   const handleOnHelpClick = () => {
@@ -51,26 +68,34 @@ const ButtonPanel = () => {
   };
 
   return (
-    <div className="absolute top-0 w-full p-4 flex justify-between select-none">
-      {is3DTour || currentView !== 1 ? (
-        <BackButton
-          onClick={handleOnBackClick}
-          className="pl-[6px] pr-[6px] w-[40px] h-10"
-        />
-      ) : (
-        <BackButton
-          onClick={handleOnMapClick}
-          title="Map"
-          className="w-[90px] h-10"
-        />
-      )}
-      {currentView !== 1 && !is3DTour && (
-        <div className="flex items-center bg-[#EAE5E0] h-fit px-12 py-2 gap-2 rounded-full">
-          <PedestrianIcon color="#000" className="w-5 h-5" />
-          Choose a room to start the 3D tour
-        </div>
-      )}
-      <div className="flex gap-2 w-fit">
+    <div className="absolute top-0 w-screen max-w-screen p-4 flex select-none">
+      <div className="w-1/3">
+        {location.key !== "default" && (
+          <>
+            {is3DTour || currentView !== 1 ? (
+              <BackButton
+                onClick={handleOnBackClick}
+                className="pl-[6px] pr-[6px] w-[40px] h-10"
+              />
+            ) : (
+              <BackButton
+                onClick={handleOnMapClick}
+                title="Map"
+                className="w-[90px] h-10"
+              />
+            )}
+          </>
+        )}
+      </div>
+      <div className="w-1/3">
+        {currentView !== 1 && !is3DTour && (
+          <div className="flex items-center justify-center bg-[#EAE5E0] h-fit px-12 w-fit py-2 gap-2 rounded-full mx-auto">
+            <PedestrianIcon color="#000" className="w-5 h-5" />
+            Choose a room to start the 3D tour
+          </div>
+        )}
+      </div>
+      <div className="flex gap-2 w-fit ml-auto">
         <ImagesButton onClick={handleOnImagesClick} />
         <LayoutButton onClick={handleOnLayoutClick} />
         <HelpButton
@@ -83,6 +108,42 @@ const ButtonPanel = () => {
         />
       </div>
     </div>
+    // <div className="absolute top-0 w-screen max-w-screen p-4 grid grid-cols-3 select-none">
+    //   <div className="">
+    //     {is3DTour || currentView !== 1 ? (
+    //       <BackButton
+    //         onClick={handleOnBackClick}
+    //         className="pl-[6px] pr-[6px] w-[40px] h-10"
+    //       />
+    //     ) : (
+    //       <BackButton
+    //         onClick={handleOnMapClick}
+    //         title="Map"
+    //         className="w-[90px] h-10"
+    //       />
+    //     )}
+    //   </div>
+    //   <div>
+    //     {currentView !== 1 && !is3DTour && (
+    //       <div className="flex items-center justify-center bg-[#EAE5E0] h-fit px-12 w-fit py-2 gap-2 rounded-full mx-auto">
+    //         <PedestrianIcon color="#000" className="w-5 h-5" />
+    //         Choose a room to start the 3D tour
+    //       </div>
+    //     )}
+    //   </div>
+    //   <div className="flex gap-2 w-fit ml-auto">
+    //     <ImagesButton onClick={handleOnImagesClick} />
+    //     <LayoutButton onClick={handleOnLayoutClick} />
+    //     <HelpButton
+    //       className="h-10 w-10"
+    //       handleOnHelpClick={handleOnHelpClick}
+    //     />
+    //     <ResizeButton
+    //       className="h-10 w-10"
+    //       handleOnHelpClick={handleOnResizeClick}
+    //     />
+    //   </div>
+    // </div>
   );
 };
 
diff --git a/src/components/desktop/Appartment/LayoutModal.tsx b/src/components/desktop/Appartment/LayoutModal.tsx
index 7e06b02..a0751a3 100644
--- a/src/components/desktop/Appartment/LayoutModal.tsx
+++ b/src/components/desktop/Appartment/LayoutModal.tsx
@@ -31,7 +31,7 @@ const LayoutModal = () => {
     setModal(null);
   };
   return (
-    <div className="w-screen h-screen bg-white absolute z-10 flex flex-col">
+    <div className="min-w-screen w-screen min-h-[100vh] bg-white absolute z-10 flex flex-col">
       <div className="flex justify-between pt-8 pr-8">
         <div />
         <CrossButton onClick={handleOnCloseClick} />
@@ -46,7 +46,7 @@ const LayoutModal = () => {
             setCurrentView={setCurrentView}
           />
           <LayoutToggle
-            className="w-[340px] mx-auto"
+            className="max-w-[340px] mx-auto"
             currentView={currentView}
             setCurrentView={setCurrentView}
           />
diff --git a/src/components/desktop/Appartment/ParameterDescription.tsx b/src/components/desktop/Appartment/ParameterDescription.tsx
index 3fbb438..efa0993 100644
--- a/src/components/desktop/Appartment/ParameterDescription.tsx
+++ b/src/components/desktop/Appartment/ParameterDescription.tsx
@@ -4,7 +4,7 @@ const ParameterDescription = () => {
   const { currentVilla } = useStore();
 
   return (
-    <div className="flex py-6 gap-6 items-center justify-center border select-none">
+    <div className="flex py-6 gap-6 items-center justify-center select-none">
       <h2 className="text-[#050409] font-medium text-2xl uppercase ">
         {currentVilla && currentVilla.type}
       </h2>
diff --git a/src/index.css b/src/index.css
index 18e6175..ff70128 100644
--- a/src/index.css
+++ b/src/index.css
@@ -32,3 +32,7 @@ body {
   background: #c7bdba;
   border-radius: 99px;
 }
+
+:fullscreen::backdrop {
+  background: none;
+}
diff --git a/src/pages/Desktop/DesktopApartmentPage.tsx b/src/pages/Desktop/DesktopApartmentPage.tsx
index 96111a8..00e1b9a 100644
--- a/src/pages/Desktop/DesktopApartmentPage.tsx
+++ b/src/pages/Desktop/DesktopApartmentPage.tsx
@@ -1,6 +1,8 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import { Unity } from "react-unity-webgl";
 import { useEffect, useState } from "react";
 import { ReactUnityEventParameter } from "react-unity-webgl/distribution/types/react-unity-event-parameters";
+import { FullScreen, useFullScreenHandle } from "react-full-screen";
 import useStore from "../../store/store";
 import LoaderModal from "../../components/LoaderModal";
 import ButtonPanel from "../../components/desktop/Appartment/ButtonPanel";
@@ -10,13 +12,8 @@ import ViewToggle from "../../components/ViewToggle";
 import ParameterDescription from "../../components/desktop/Appartment/ParameterDescription";
 
 const DesktopApartmentPage = () => {
-  const {
-    setCurrentView,
-    setSendMessageToUnity,
-    setLoader,
-    setIs3DTour,
-    isFullMode,
-  } = useStore();
+  const { setCurrentView, setSendMessageToUnity, setLoader, setIs3DTour } =
+    useStore();
 
   const { villa } = useVilla();
 
@@ -69,27 +66,27 @@ const DesktopApartmentPage = () => {
     }
   }, [isContainerLoaded]);
 
+  const onFullscreenHandle = useFullScreenHandle();
+
   return (
     <>
-      <div
-        className={` ${
-          !isFullMode ? "pt-[101px] px-[215px]" : ""
-        } relative transition-all duration-300 max-h-screen`}
-      >
-        <div
-          className={`relative h-[calc(100vh-199px)] ${
-            !isFullMode ? "h-[calc(100vh-199px)]" : "h-[calc(100vh-98px)]"
-          }`}
-        >
-          <ButtonPanel />
-          <Unity
-            unityProvider={unityProvider}
-            style={{ width: "100%", height: "100%" }}
-          />
-          <ViewToggle isDesktop />
+      <FullScreen handle={onFullscreenHandle}>
+        <div className={`relative transition-all duration-300 max-h-screen`}>
+          <div
+            className={`relative h-[calc(100vh-98px)] 
+            
+            `}
+          >
+            <ButtonPanel handleFullscreen={onFullscreenHandle} />
+            <Unity
+              unityProvider={unityProvider}
+              style={{ width: "100%", height: "100%" }}
+            />
+            <ViewToggle isDesktop />
+          </div>
+          <ParameterDescription />
         </div>
-        <ParameterDescription />
-      </div>
+      </FullScreen>
     </>
   );
 };
diff --git a/src/store/store.ts b/src/store/store.ts
index 6ad190e..5de0fe1 100644
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -9,7 +9,6 @@ interface StoreType {
   loader: React.ReactNode | null;
   panel: React.ReactNode | null;
   modal: React.ReactNode | null;
-  isFullMode: boolean;
   sendMessageToUnity:
     | ((
         gameObjectName: string,
@@ -21,7 +20,6 @@ interface StoreType {
   is3DTour: boolean;
 
   setIs3DTour: (is3D: boolean) => void;
-  setIsFullMode: (isFullMode: boolean) => void;
   setCurrentVilla: (villa: Villa) => void;
   setSelectedOnMapVilla: (villa: Villa | null) => void;
   setCurrentView: (view: number) => void;
@@ -39,7 +37,6 @@ interface StoreType {
 
 const useStore = create<StoreType>((set) => ({
   // currentVilla: null,
-  isFullMode: true,  
   currentVilla: VILLAS[0],
   is3DTour: false,
   selectedOnMapVilla: null,
@@ -50,7 +47,6 @@ const useStore = create<StoreType>((set) => ({
   currentView: 1,
 
 
-setIsFullMode: (isFullMode) => set(() => ({isFullMode: isFullMode})),
   setIs3DTour: (is3DTour) => set(() => ({ is3DTour: is3DTour })),
   setSelectedOnMapVilla: (villa) => set(() => ({ selectedOnMapVilla: villa })),
   setCurrentVilla: (villa) => set(() => ({ currentVilla: villa })),
diff --git a/yarn.lock b/yarn.lock
index bb55f62..3b4f0d8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1140,6 +1140,11 @@ fs.realpath@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
+fscreen@^1.0.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/fscreen/-/fscreen-1.2.0.tgz#1a8c88e06bc16a07b473ad96196fb06d6657f59e"
+  integrity sha512-hlq4+BU0hlPmwsFjwGGzZ+OZ9N/wq9Ljg/sq3pX+2CD7hrJsX9tJgWWK/wiNTFM212CLHWhicOoqwXyZGGetJg==
+
 fsevents@~2.3.2:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
@@ -1674,6 +1679,13 @@ react-dom@^18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+react-full-screen@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/react-full-screen/-/react-full-screen-1.1.1.tgz#b707d56891015a71c503a65dbab3086d75be97d7"
+  integrity sha512-xoEgkoTiN0dw9cjYYGViiMCBYbkS97BYb4bHPhQVWXj1UnOs8PZ1rPzpX+2HMhuvQV1jA5AF9GaRbO3fA5aZtg==
+  dependencies:
+    fscreen "^1.0.2"
+
 react-router-dom@^6.21.3:
   version "6.21.3"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.21.3.tgz#ef3a7956a3699c7b82c21fcb3dbc63c313ed8c5d"