teleport improvement

src/components/gameMaster/zoneEditor/ZoneEditor.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onBeforeMount, onBeforeUnmount, ref } from 'vue'
+import { computed, onBeforeMount, onBeforeUnmount, ref, watch } from 'vue'
 import { Container, Image, TilemapLayer as TilemapLayerC, useScene } from 'phavuer'
 import { storeToRefs } from 'pinia'
 import { useGameStore } from '@/stores/game'
@@ -84,8 +84,8 @@ function createTileArray() {
 function getObjectImageProps(object: ZoneObject) {
   return {
     tint: selectedZoneObject.value?.id === object.id ? 0x00ff00 : 0xffffff,
-    x: tileToWorldX(zoneTilemap.value as Tilemap, object.positionX, object.positionY),
-    y: tileToWorldY(zoneTilemap.value as Tilemap, object.positionX, object.positionY),
+    x: tileToWorldX(zoneTilemap.value as any, object.positionX, object.positionY),
+    y: tileToWorldY(zoneTilemap.value as any, object.positionX, object.positionY),
     texture: object.object.id,
     originY: Number(object.object.originX),
     originX: Number(object.object.originY)
@@ -94,8 +94,8 @@ function getObjectImageProps(object: ZoneObject) {
 
 function getEventTileImageProps(tile: ZoneEventTile) {
   return {
-    x: tileToWorldX(zoneTilemap.value, tile.positionX, tile.positionY),
-    y: tileToWorldY(zoneTilemap.value, tile.positionX, tile.positionY),
+    x: tileToWorldX(zoneTilemap.value as any, tile.positionX, tile.positionY),
+    y: tileToWorldY(zoneTilemap.value as any, tile.positionX, tile.positionY),
     texture: tile.type
   }
 }
@@ -224,9 +224,39 @@ onBeforeMount(() => {
 onBeforeUnmount(() => {
   zoneEventTiles.value = []
   zoneObjects.value = []
-  tiles.value.destroy()
-  zoneTilemap.value.removeAllLayers()
-  zoneTilemap.value.destroy()
+  tiles.value?.destroy()
+  zoneTilemap.value?.removeAllLayers()
+  zoneTilemap.value?.destroy()
   zoneEditorStore.reset()
 })
+
+// watch zoneEditorStore.objectList and update originX and originY of objects in zoneObjects
+watch(objectList, (newObjects) => {
+  zoneObjects.value = zoneObjects.value.map(zoneObject => {
+    const updatedObject = newObjects.find(obj => obj.id === zoneObject.objectId);
+    if (updatedObject) {
+      return {
+        ...zoneObject,
+        object: {
+          ...zoneObject.object,
+          originX: updatedObject.originX,
+          originY: updatedObject.originY
+        }
+      };
+    }
+    return zoneObject;
+  });
+
+  // Update selectedObject if it exists
+  if (zoneEditorStore.selectedObject) {
+    const updatedObject = newObjects.find(obj => obj.id === zoneEditorStore.selectedObject?.id);
+    if (updatedObject) {
+      zoneEditorStore.setSelectedObject({
+        ...zoneEditorStore.selectedObject,
+        originX: updatedObject.originX,
+        originY: updatedObject.originY
+      });
+    }
+  }
+}, { deep: true })
 </script>

src/components/zone/Zone.vue

@@ -1,6 +1,6 @@
 <template>
   <Tiles :key="zoneStore.zone?.id ?? 0" @tilemap:create="tileMap = $event" />
-  <Objects />
+  <Objects v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap"  />
   <Characters v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
 </template>
 
@@ -31,7 +31,6 @@ gameStore.connection?.emit('zone:characterJoin', { zoneId: gameStore.character?.
 // Event listeners
 gameStore.connection?.on('zone:teleport', (data: zoneLoadData) => {
   if (zoneStore.zone?.id === data.zone.id) return
-  tileMap.value = null;
   zoneStore.setZone(data.zone)
   zoneStore.setCharacters(data.characters)
 })