Updated tiles, improved folder & file structure, npm update, more progress on zone editor

src/components/utilities/Controls.vue

@@ -4,10 +4,14 @@
 
 <script setup lang="ts">
 import { Image, useScene } from 'phavuer'
-import { onBeforeUnmount, ref } from 'vue'
+import { onBeforeUnmount, ref, watch } from 'vue'
 import config from '@/config'
 import { getTile, tileToWorldXY } from '@/services/zone'
+import { useZoneStore } from '@/stores/zone'
+import { useZoneEditorStore } from '@/stores/zoneEditor'
 
+const zoneStore = useZoneStore();
+const zoneEditorStore = useZoneEditorStore();
 const scene = useScene()
 const props = defineProps({
   layer: Phaser.Tilemaps.TilemapLayer
@@ -38,7 +42,29 @@ function onPointerMove(pointer: Phaser.Input.Pointer) {
 
 scene.input.on(Phaser.Input.Events.POINTER_MOVE, onPointerMove)
 
+// Zone camera system
+function dragZone (pointer: Phaser.Input.Pointer) {
+  if (!pointer.isDown) return
+  cam.scrollX -= (pointer.x - pointer.prevPosition.x) / cam.zoom
+  cam.scrollY -= (pointer.y - pointer.prevPosition.y) / cam.zoom
+}
+let cam = scene.cameras.main
+scene.input.on(Phaser.Input.Events.POINTER_MOVE, dragZone)
+
+watch(
+  () => zoneEditorStore.tool, () => {
+    // @TODO : change to tiles for when loading other maps
+   if (zoneEditorStore.tool === 'move') {
+     scene.input.on(Phaser.Input.Events.POINTER_MOVE, dragZone)
+   } else {
+     scene.input.off(Phaser.Input.Events.POINTER_MOVE, dragZone)
+   }
+  }, { deep: true }
+)
+
+// Unload funcs
 onBeforeUnmount(() => {
   scene.input.off(Phaser.Input.Events.POINTER_MOVE, onPointerMove)
+  scene.input.off(Phaser.Input.Events.POINTER_MOVE, dragZone)
 })
 </script>