desktop updated + updated unity assets

src/App.tsx

@@ -5,10 +5,14 @@ import { useVilla } from "./hooks/useVilla";
 import Desktop from "./pages/Desktop/Desktop";
 import Mobile from "./pages/Mobile/Mobile";
 import useStore from "./store/store";
+// import { Villa } from "./types/appartment";
+// import _villas from "./consts/villas.json";
 
 function App() {
   const { villa } = useVilla();
   const { setCurrentVilla } = useStore();
+  // const villas = _villas as Villa[];
+  // _villas
 
   useEffect(() => {
     setCurrentVilla(villa);

src/components/BackButton.tsx

@@ -1,12 +1,23 @@
 import BackIcon from "../icons/BackIcon";
 
-const BackButton = () => {
+type BackButtonProps = {
+  onClick?: () => void;
+  className?: string;
+  title: string;
+};
+
+const BackButton = ({ title, onClick, className }: BackButtonProps) => {
   return (
-    <button className="flex w-fit items-center gap-1 py-[6px] pl-2 pr-4 bg-white rounded-full text-sm font-medium border border-[#C7BDBA]">
+    <button
+      onClick={onClick}
+      className={`${
+        className ? className : ""
+      } flex w-fit items-center gap-1 py-[6px] pl-2 pr-4 bg-white rounded-full text-sm font-medium border border-[#C7BDBA] justify-center`}
+    >
       <div className="w-5 h-5 flex items-center justify-center">
         <BackIcon className="w-[5px] h-[10px]" />
       </div>
-      Back
+      {title}
     </button>
   );
 };

src/components/ViewToggle.tsx

@@ -32,8 +32,8 @@ const ViewToggle = ({ offset, isDesktop }: ViewSwitcherProps) => {
 
   return (
     <div
-      className={`${
-        isDesktop ? "" : "w-full absolute top-[-51px] mx-auto"
+      className={` w-full mx-auto absolute ${
+        isDesktop ? "bottom-4" : "top-[-51px]"
       } h-9 px-6 `}
     >
       <div

src/components/desktop/ButtonPanel.tsx

@@ -1,12 +1,12 @@
 import HelpButton from "../HelpButton";
 import ResizeButton from "../ResizeButton";
-import ViewToggle from "../ViewToggle";
+import BackButton from "../BackButton";
 
 const ButtonPanel = () => {
   return (
-    <div className="absolute top-0 w-full p-4 flex justify-between h-10">
-      <div />
-      <ViewToggle isDesktop />
+    <div className="absolute top-0 w-full p-4 flex justify-between ">
+      {/* <ViewToggle isDesktop /> */}
+      <BackButton title="Map" className="w-[90px] h-10" />
       <div className="flex gap-2 w-fit">
         <HelpButton
           handleOnHelpClick={function (): void {

src/components/desktop/ParameterDescription.tsx

@@ -5,7 +5,7 @@ const ParameterDescription = () => {
 
   return (
     <div className="flex py-6 gap-6 items-center justify-center border">
-      <h2 className="text-[#050409] font-medium text-2xl">
+      <h2 className="text-[#050409] font-medium text-2xl uppercase ">
         {currentVilla && currentVilla.type}
       </h2>
       <div className="h-8 bg-[#DDD7D6] w-[1px]" />
@@ -22,11 +22,15 @@ const ParameterDescription = () => {
       <div className="h-8 bg-[#DDD7D6] w-[1px]" />
       <div className="flex flex-col">
         <div className="flex gap-4 justify-between">
-          <div className="text-[#666668]">Plot area</div>
+          <div className="text-[#666668]">
+            Plot area, m<sup>2</sup>
+          </div>
           <div>{currentVilla && currentVilla.plotArea}</div>
         </div>
         <div className="flex gap-4">
-          <div className="text-[#666668]">Total Build up Area</div>
+          <div className="text-[#666668]">
+            Total Build up Area, m<sup>2</sup>
+          </div>
           <div>{currentVilla && currentVilla.totalBuildUpArea}</div>
         </div>
       </div>

src/components/mobile/Appartment/ButtonPanel.tsx

@@ -16,7 +16,7 @@ const ButtonPanel = () => {
     <>
       {
         <div className="flex w-full absolute p-4 justify-between top-0 left-0">
-          <BackButton />
+          <BackButton title="Back" className="w-20 h-8" />
           <HelpButton handleOnHelpClick={handleOnHelpClick} />
         </div>
       }

src/consts/villas.json

@@ -0,0 +1,4 @@
+{
+  "type": "a1m",
+  "plotArea": "1080"
+}

src/consts/villas.ts

@@ -30,6 +30,46 @@ const villaA1M: Villa = {
       image: "/images/apartment/A1M/perspectiveWorking/009_Villa_A1MO_CAM_02_R05.jpg",
     },
   ],
+  groundFloorUnits: {
+    entrance: '3.25x3.10',
+    livingRoom: '4.10x5.10',
+    dinningRoom: '5.00x5.00',
+    terrace1: '5.70x0.90',
+    store1: '2.90x1.35',
+    mensMajilas: '5.00x7.00',
+    bathRoom1: '1.70x2.00',
+    washBasins: '1.80x2.00',
+    guestBedroom: '4.10x4.60',
+    bathRoom2: '2.70x2.00',
+    kitchen: '5.00x4.00',
+    terrace2: '5.30x1.00',
+    store2: '2.20x1.35',
+    bathRoom3: '1.50x2.50',
+    laundryRoom: '2.20x1.50',
+    domesticWorkerRoom1: '3.50x3.00',
+    domesticWorkerBathroom1: '1.50x2.00',
+    serviceRoom: '1.10x1.90',
+    domesticWorkerRoom2: '3.00x3.00',
+    domesticWorkerBathroom2: '3.00x1.50',
+    watertank: '3.00x3.50',
+    outdoorPatio: '2.40x2.20',
+  },
+  firstFloorUnits: {
+    livingRoom: '4.10x4.60',
+    masterBedroom: '5.00x5.00',
+    dressingRoom1: '2.90x3.50',
+    bathRoom1: '2.00x3.50',
+    terrace1: '9.25x2.55',
+    bedroom1: '5.00x4.00',
+    dressingRoom2: '3.10x2.70',
+    bathRoom2: '1.80x2.70',
+    terrace2: '5.00x2.30',
+    bedroom2: '5.00x4.00',
+    dressingRoom3: '2.20x1.80',
+    bedroom3: '4.10x4.80',
+    bathRoom3: '2.70x1.80',
+    store1: '1.80x1.35',
+  }
 };
 
 const villaA1T: Villa = {
@@ -62,6 +102,45 @@ const villaA1T: Villa = {
       image: "/images/apartment/A1T/perspectiveWorking/001_Villa_A1TO_CAM_02_R04.jpg",
     },
   ],
+  groundFloorUnits: {
+    entrance: '3.25x3.10',
+    livingRoom: '4.10x5.10',
+    dinningRoom: '4.10x5.10',
+    store1: '2.90x1.35',
+    mensMajilas: '5.00x7.00',
+    bathRoom1: '1.70x2.00',
+    washBasins: '1.70x2.00',
+    guestBedroom: '4.10x4.60',
+    bathRoom2: '2.70x2.00',
+    kitchen: '5.00x4.00',
+    bathRoom3: '1.50x2.50',
+    store2: '2.20x1.30',
+    laundryRoom: '2.20x1.50',
+    domesticWorkerRoom1: '3.50x3.00',
+    domesticWorkerBathroom1: '1.50x2.00',
+    serviceRoom: '1.10x1.90',
+    domesticWorkerRoom2: '3.00x3.00',
+    domesticWorkerBathroom2: '2.40x2.20',
+    watertank: '3.00x3.50',
+    outdoorPatio: '3.40x2.20',
+  },
+  firstFloorUnits: {
+    livingRoom: '4.10x4.60',
+    masterBedroom: '5.00x5.00',
+    dressingRoom1: '2.90x3.50',
+    bathRoom1: '2.00x3.50',
+    terrace1: '5.20x2.70',
+    bedroom1: '2.70x1.80',
+    dressingRoom2: '2.70x1.80',
+    bathRoom2: '2.70x1.80',
+    bedroom2: '5.00x4.00',
+    dressingRoom3: '3.00x2.45',
+    bathRoom3: '1.80x2.70',
+    terrace2: '5.50x1.50',
+    bedroom3: '4.10x4.20',
+    bathRoom4: '2.65x1.80',
+    store1: '1.80x1.35'
+  }
 };
 
 const villaA2M: Villa = {

src/main.tsx

@@ -4,7 +4,6 @@ import MainPage from "./pages/MainPage";
 import App from "./App";
 import "./index.css";
 import Layout from "./components/Layout";
-import ButtomPanelModal from "./components/mobile/Appartment/ButtomPanelModal";
 
 const router = createBrowserRouter([
   {
@@ -13,7 +12,6 @@ const router = createBrowserRouter([
     children: [
       {
         path: "/:villaTitle",
-
         element: <App />,
       },
       {

src/pages/Desktop/Desktop.tsx

@@ -4,11 +4,24 @@ import { ReactUnityEventParameter } from "react-unity-webgl/distribution/types/r
 import useStore from "../../store/store";
 import LoaderModal from "../../components/LoaderModal";
 import ButtonPanel from "../../components/desktop/ButtonPanel";
-import ParameterDescription from "../../components/desktop/ParameterDescription";
 import { useUnity } from "../../hooks/useUnity";
+import { useVilla } from "../../hooks/useVilla";
+import ViewToggle from "../../components/ViewToggle";
+import ParameterDescription from "../../components/desktop/ParameterDescription";
 
 const Desktop = () => {
-  const { setLoader, setSendMessageToUnity } = useStore();
+  const {
+    panel,
+    setCurrentView,
+    setModal,
+    setPanel,
+    currentVilla,
+    setSendMessageToUnity,
+    setLoader,
+    setIs3DTour,
+    is3DTour,
+  } = useStore();
+  const { villa } = useVilla();
 
   const {
     unityProvider,
@@ -20,17 +33,31 @@ const Desktop = () => {
 
   const handleSetLoaded = (isSceneLoaded: ReactUnityEventParameter) => {
     if (isSceneLoaded === 0) {
-      setLoader(<LoaderModal />);
+      setLoader(<LoaderModal isSimleLoader />);
     } else {
+      // setModal(<ButtomPanelModal />);
       setLoader(null);
     }
   };
 
+  const handleSetView = (view: ReactUnityEventParameter) => {
+    if (view === 1 || view === 2 || view === 3) {
+      setCurrentView(view);
+    }
+    if (view === 2 || view === 3) {
+      setIs3DTour(true);
+    } else {
+      setIs3DTour(false);
+    }
+  };
+
   useEffect(() => {
     addEventListener("SetLoaded", handleSetLoaded);
+    addEventListener("SetView", handleSetView);
 
     return () => {
       removeEventListener("SetLoaded", handleSetLoaded);
+      removeEventListener("SetView", handleSetView);
     };
   }, []);
 
@@ -38,11 +65,29 @@ const Desktop = () => {
     if (!isLoaded) {
       setLoader(<LoaderModal />);
     } else {
-      setLoader(null);
+      // setModal(<ButtomPanelModal />);
       setSendMessageToUnity(sendMessage);
-      sendMessage("LevelSwitcher", "LoadSceneSingle", "Outdoor/A1");
+
+      sendMessage("SceneContext", "SwitchLevel");
+      sendMessage("JsConnector", "SetCurrentVilla", villa.type);
+
+      if (is3DTour) {
+        setPanel(<ButtonPanel />);
+      } else {
+        setPanel(null);
+      }
     }
-  }, [isLoaded]);
+  }, [
+    isLoaded,
+    sendMessage,
+    setLoader,
+    setModal,
+    setPanel,
+    setSendMessageToUnity,
+    currentVilla,
+    villa.type,
+    is3DTour,
+  ]);
 
   return (
     <>
@@ -53,7 +98,9 @@ const Desktop = () => {
             unityProvider={unityProvider}
             style={{ width: "100%", height: "100%" }}
           />
+          <ViewToggle isDesktop />
         </div>
+
         <ParameterDescription />
       </div>
     </>

src/pages/Mobile/Mobile.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import { ReactUnityEventParameter } from "react-unity-webgl/distribution/types/react-unity-event-parameters";
 import { Unity } from "react-unity-webgl";
 import useStore from "../../store/store";
@@ -31,7 +31,7 @@ const Mobile = () => {
   } = useUnity();
 
   const handleSetLoaded = (isSceneLoaded: ReactUnityEventParameter) => {
-    if (isSceneLoaded === 0) {
+    if (isSceneLoaded) {
       setLoader(<LoaderModal isSimleLoader />);
     } else {
       setModal(<ButtomPanelModal />);
@@ -43,20 +43,21 @@ const Mobile = () => {
     if (view === 1 || view === 2 || view === 3) {
       setCurrentView(view);
     }
-    if (view === 2 || view === 3) {
-      setIs3DTour(true);
-    } else {
-      setIs3DTour(false);
-    }
+  };
+
+  const handleSet3DTour = (is3DTour: ReactUnityEventParameter | boolean) => {
+    setIs3DTour(!!is3DTour);
   };
 
   useEffect(() => {
     addEventListener("SetLoaded", handleSetLoaded);
     addEventListener("SetView", handleSetView);
+    addEventListener("Set3DTour", handleSet3DTour);
 
     return () => {
       removeEventListener("SetLoaded", handleSetLoaded);
       removeEventListener("SetView", handleSetView);
+      removeEventListener("Set3DTour", handleSet3DTour);
     };
   }, []);
 
@@ -66,11 +67,12 @@ const Mobile = () => {
     } else {
       setModal(<ButtomPanelModal />);
       setSendMessageToUnity(sendMessage);
-
-      // sendMessage("SceneContext", "SwitchLevel");
       sendMessage("JsConnector", "SetCurrentVilla", villa.type);
+
       if (is3DTour) {
         setPanel(<ButtonPanel />);
+      } else {
+        setPanel(null);
       }
     }
   }, [

src/types/appartment.ts

@@ -3,6 +3,40 @@ type SliderImage = {
     image: string;
 }
 
+type Units = {
+  entrance: string;
+  livingRoom: string;
+  dinningRoom: string;
+  store1: string;
+  mensMajilas: string;
+  bathRoom1: string;
+  bathRoom2: string;
+  bathRoom3: string;
+  bathRoom4: string;
+  washBasins: string;
+  guestBedroom: string;
+  kitchen: string;
+  store2: string;
+  laundryRoom: string;
+  domesticWorkerRoom1: string;
+  domesticWorkerBathroom1: string;
+  domesticWorkerRoom2: string;
+  domesticWorkerBathroom2: string;
+  terrace1: string;
+  terrace2: string;
+  serviceRoom: string;
+  watertank: string;
+  outdoorPatio: string;
+  masterBedroom: string;
+  dressingRoom1: string;
+  dressingRoom2: string;
+  dressingRoom3: string;
+  bedroom1: string;
+  bedroom2: string;
+  bedroom3: string;
+  bedroom4: string;
+}
+
 type Villa = {
   type: string;
   plotArea: string;
@@ -10,7 +44,9 @@ type Villa = {
   totalCountBedroms: number;
   villaTheme: string;
   sliders: SliderImage[];
-  perspectiveWorkings: SliderImage[]
+  perspectiveWorkings: SliderImage[];
+  firstFloorUnits?: Partial<Units>;
+  groundFloorUnits?: Partial<Units>;
 };
 
 type ViewSwitcher ={

tailwind.config.js

@@ -1,12 +1,8 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx,json}"],
   theme: {
     extend: {},
   },
   plugins: [],
-}
-
+};