Fixed varies bugs with Drone movement and location system

src/experience/character/Drone.tsx

@@ -4,23 +4,32 @@ import { useRef } from "react";
 import { ASSETS } from "../utils/constants";
 import { useGLTF } from "@react-three/drei";
 
-let xCoord = 13.3;
-let yCoord = 8;
-let zCoord = 10;
-let hDirection = true;
-let prev = { x: 0, y: 0, z: 0 };
+const minmax = {
+  x: { min: -22, max: 9, middle: -6 },
+  y: { min: 3, max: 10 },
+  z: { min: -12, max: 9, middle: -1 },
+};
 const step = 0.002;
 
+let prev = { x: minmax.x.min, y: minmax.y.max, z: minmax.z.min };
+
+let xCoord = 4.8;
+let yCoord = 2;
+let zCoord = 3;
+
+let hDirection = false;
+let passedMiddle = true;
+
 const getCoordinates = () => {
   const prevX = Math.floor(prev.x);
   const prevZ = Math.floor(prev.z);
   const prevY = Math.floor(prev.y);
 
   if (hDirection) {
-    if (prevX === 3 && prevZ === 9 && prevY > 3) {
+    if (prevX === 3 && prevZ === minmax.z.max && prevY > minmax.y.min) {
       // Come down by bridge
       yCoord += step * 2;
-    } else if (prevX === 3 && prevZ === -12 && prevY < 10) {
+    } else if (prevX === 3 && prevZ === minmax.z.min && prevY < minmax.y.max) {
       // Go up by Tech Center roof
       yCoord += step * 2;
     } else if (prevZ > 7 && prevX > -17 && prevX < -13) {
@@ -29,15 +38,26 @@ const getCoordinates = () => {
     } else {
       xCoord += step;
     }
-    if (prevX === -22 || prevX === 9) {
-      hDirection = false;
+    // Passed the middle point (good to turn)
+    if (prevX === minmax.x.middle && !passedMiddle) {
+      passedMiddle = true;
     }
   } else {
     zCoord += step;
-    if (prevZ === -12 || prevZ === 9) {
-      hDirection = true;
+    // Passed the middle point (good to turn)
+    if (prevZ === minmax.z.middle && !passedMiddle) {
+      passedMiddle = true;
     }
   }
+  // Change direction (turn)
+  if (
+    ((hDirection && (prevX === minmax.x.min || prevX === minmax.x.max)) ||
+      (!hDirection && (prevZ === minmax.z.max || prevZ === minmax.z.min))) &&
+    passedMiddle
+  ) {
+    hDirection = !hDirection;
+    passedMiddle = false;
+  }
 
   prev = {
     x: Math.sin(xCoord) * 15.5 - 6,

src/experience/interface/ui/TitleBar.tsx

@@ -1,14 +1,20 @@
 import { useEffect, useState } from "react";
 import "./TitleBar.scss";
 import useLocation from "../../stores/useLocation";
+import { MAIN_TERRITORIES_NAMES } from "../../utils/enums";
+
+const mainTerritories = Object.values(MAIN_TERRITORIES_NAMES);
 
 function TitleBar() {
   const territoriesName = useLocation((state) => state.territoriesName);
   const [text, setText] = useState("");
   const [isHidden, setIsHidden] = useState(true);
 
   useEffect(() => {
-    if (territoriesName.length) {
+    if (
+      territoriesName.length &&
+      mainTerritories.includes(territoriesName.at(-1) as MAIN_TERRITORIES_NAMES)
+    ) {
       setText(territoriesName.at(-1) as string);
     }
   }, [territoriesName]);

src/experience/stores/useLocation.ts

@@ -7,14 +7,14 @@ import { subscribeWithSelector } from "zustand/middleware";
 import { Vector3 } from "three";
 import { checkTerritories } from "../utils/utils";
 import TERRITORIES from "../utils/territories";
-import { MAIN_TERRITORIES_NAMES } from "../utils/enums";
+import { TERRITORIES_NAMES } from "../utils/enums";
 
 interface LocationState {
   location: Vector3;
   setLocation: (location: Vector3) => void;
 
-  territoriesName: MAIN_TERRITORIES_NAMES[];
-  setTerritoriesName: (territoriesName: MAIN_TERRITORIES_NAMES[]) => void;
+  territoriesName: TERRITORIES_NAMES[];
+  setTerritoriesName: (territoriesName: TERRITORIES_NAMES[]) => void;
 }
 
 export default create(
@@ -51,7 +51,7 @@ export default create(
         }),
 
       territoriesName: [],
-      setTerritoriesName: (territoriesName: MAIN_TERRITORIES_NAMES[]) =>
+      setTerritoriesName: (territoriesName: TERRITORIES_NAMES[]) =>
         set({ territoriesName }),
     };
   })