npm run format, started working on follow player logic, refactor some camera logic

src/components/gameMaster/GmTools.vue

@@ -19,29 +19,26 @@ import { onMounted, ref } from 'vue'
 
 const zoneEditorStore = useZoneEditorStore()
 const gameStore = useGameStore()
-const modalWidth = ref(200);
-const modalHeight = ref(160);
+const modalWidth = ref(200)
+const modalHeight = ref(160)
 
-let posXY = ref({x: 0, y: 0});
+let posXY = ref({ x: 0, y: 0 })
 
 onMounted(() => {
-
   window.addEventListener('resize', () => {
-    posXY.value = customPositionGmPanel(modalWidth.value);
+    posXY.value = customPositionGmPanel(modalWidth.value)
   })
-
 })
 
 const customPositionGmPanel = (modalWidth: number) => {
   const padding = 25
   const width = window.innerWidth
 
-  const x = width - (modalWidth+4) - 25
+  const x = width - (modalWidth + 4) - 25
   const y = padding
 
   return { x, y }
 }
 
 posXY.value = customPositionGmPanel(modalWidth.value)
-
 </script>

src/components/gameMaster/zoneEditor/ZoneEditor.vue

@@ -29,15 +29,7 @@ import { Container, Image, useScene } from 'phavuer'
 import { storeToRefs } from 'pinia'
 import { useGameStore } from '@/stores/gameStore'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
-import {
-  calculateIsometricDepth,
-  loadAssets,
-  placeTile,
-  setAllTiles,
-  sortByIsometricDepth,
-  tileToWorldX,
-  tileToWorldY
-} from '@/composables/zoneComposable'
+import { calculateIsometricDepth, loadAssets, placeTile, setAllTiles, sortByIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
 import { ZoneEventTileType, type ZoneObject, type ZoneEventTile, type Zone } from '@/types'
 import { uuidv4 } from '@/utilities'
 import config from '@/config'
@@ -323,5 +315,5 @@ const setSelectedZoneObject = (zoneObject: ZoneObject | null) => {
 onBeforeMount(async () => {
   await gameStore.fetchAllZoneAssets()
   await loadAssets(scene)
-});
+})
 </script>

src/components/gameMaster/zoneEditor/partials/Toolbar.vue

@@ -68,9 +68,7 @@
 
         <div class="w-px bg-cyan"></div>
 
-        <button class="flex justify-center items-center min-w-10 p-0 relative" @click="handleClick('settings')" v-if="zoneEditorStore.zone">
-          <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/gear.svg" alt="Zone settings" /> <span class="ml-2.5">(Z)</span>
-        </button>
+        <button class="flex justify-center items-center min-w-10 p-0 relative" @click="handleClick('settings')" v-if="zoneEditorStore.zone"><img class="invert w-5 h-5" src="/assets/icons/zoneEditor/gear.svg" alt="Zone settings" /> <span class="ml-2.5">(Z)</span></button>
       </div>
 
       <div class="flex gap-2.5 ml-auto">
@@ -163,14 +161,14 @@ onBeforeUnmount(() => {
 })
 
 function handleClick(tool: string) {
-  if(tool === 'settings') {
+  if (tool === 'settings') {
     zoneEditorStore.toggleSettingsModal()
   } else {
     zoneEditorStore.setTool(tool)
   }
 
-  selectPencilOpen.value = tool === 'pencil' ? !selectPencilOpen.value : false;
-  selectEraserOpen.value = tool === 'eraser' ? !selectEraserOpen.value : false;
+  selectPencilOpen.value = tool === 'pencil' ? !selectPencilOpen.value : false
+  selectEraserOpen.value = tool === 'eraser' ? !selectEraserOpen.value : false
 }
 
 // Key bindings
@@ -180,15 +178,15 @@ function initKeyShortcuts(event: KeyboardEvent) {
   if (document.activeElement?.tagName === 'INPUT') return
 
   const keyActions: any = {
-    'm': 'move',
-    'p': 'pencil',
-    'e': 'eraser',
-    'b': 'paint',
-    'z': 'settings'
-  };
+    m: 'move',
+    p: 'pencil',
+    e: 'eraser',
+    b: 'paint',
+    z: 'settings'
+  }
 
   if (keyActions.hasOwnProperty(event.key)) {
-    handleClick(keyActions[event.key]);
+    handleClick(keyActions[event.key])
   }
 }