From fc34a488d96ec68624e59e7be019f095bec6be08 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Fri, 21 Mar 2025 21:50:31 +0100
Subject: [PATCH] Bug fix for hot reload map objects upon saving in map editor

---
 .../game/map/partials/PlacedMapObject.vue     | 13 +++---------
 .../mapPartials/PlacedMapObjects.vue          | 20 +++++++++++++------
 2 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/src/components/game/map/partials/PlacedMapObject.vue b/src/components/game/map/partials/PlacedMapObject.vue
index 17df46b..52fa2fe 100644
--- a/src/components/game/map/partials/PlacedMapObject.vue
+++ b/src/components/game/map/partials/PlacedMapObject.vue
@@ -5,12 +5,11 @@
 <script setup lang="ts">
 import type { MapObject, PlacedMapObject } from '@/application/types'
 import ImageGroup from '@/components/game/map/partials/ImageGroup.vue'
-import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
 import { loadMapObjectTextures, tileToWorldXY } from '@/services/mapService'
 import { MapObjectStorage } from '@/storage/storages'
 import { useGameStore } from '@/stores/gameStore'
 import { useScene } from 'phavuer'
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 
 import Tilemap = Phaser.Tilemaps.Tilemap
 import TilemapLayer = Phaser.Tilemaps.TilemapLayer
@@ -24,7 +23,6 @@ const props = defineProps<{
 const scene = useScene()
 
 const gameStore = useGameStore()
-const mapEditor = useMapEditorComposable()
 
 const mapObject = ref<MapObject>()
 
@@ -50,6 +48,8 @@ async function initialize() {
   const _mapObject = await mapObjectStorage.getById(props.placedMapObject.mapObject as string)
   if (!_mapObject) return
 
+  console.log(_mapObject)
+
   mapObject.value = _mapObject
 
   await loadMapObjectTextures([_mapObject], scene)
@@ -64,13 +64,6 @@ function calculateObjectPlacement(mapObj: PlacedMapObject): { x: number; y: numb
   }
 }
 
-watch(
-  () => mapEditor.refreshMapObject.value,
-  async () => {
-    await initialize()
-  }
-)
-
 onMounted(async () => {
   await initialize()
 })
diff --git a/src/components/gameMaster/mapEditor/mapPartials/PlacedMapObjects.vue b/src/components/gameMaster/mapEditor/mapPartials/PlacedMapObjects.vue
index 2ba4122..1eedbc7 100644
--- a/src/components/gameMaster/mapEditor/mapPartials/PlacedMapObjects.vue
+++ b/src/components/gameMaster/mapEditor/mapPartials/PlacedMapObjects.vue
@@ -1,13 +1,20 @@
 <template>
   <PlacedMapObject
-    v-if="mapEditor.tool.value === 'pencil' && mapEditor.drawMode.value === 'map_object' && mapEditor.isPlacedMapObjectPreviewEnabled.value && mapEditor.selectedMapObject.value && previewPlacedMapObject"
-    :tileMap
-    :tileMapLayer
-    :key="previewPlacedMapObject?.id"
-    :placedMapObject="previewPlacedMapObject as PlacedMapObjectT"
+      v-if="mapEditor.tool.value === 'pencil' && mapEditor.drawMode.value === 'map_object' && mapEditor.isPlacedMapObjectPreviewEnabled.value && mapEditor.selectedMapObject.value && previewPlacedMapObject"
+      :tileMap
+      :tileMapLayer
+      :key="previewPlacedMapObject?.id"
+      :placedMapObject="previewPlacedMapObject as PlacedMapObjectT"
   />
   <SelectedPlacedMapObjectComponent v-if="mapEditor.selectedPlacedObject.value" :key="mapEditor.selectedPlacedObject.value.id" :map :placedMapObject="mapEditor.selectedPlacedObject.value" @move="moveMapObject" @rotate="rotatePlacedMapObject" @delete="deletePlacedMapObject" />
-  <PlacedMapObject v-for="placedMapObject in mapEditor.currentMap.value?.placedMapObjects" :tileMap :tileMapLayer :placedMapObject @pointerdown="clickPlacedMapObject(placedMapObject)" />
+  <PlacedMapObject
+      v-for="placedMapObject in mapEditor.currentMap.value?.placedMapObjects"
+      :tileMap
+      :tileMapLayer
+      :placedMapObject
+      @pointerdown="clickPlacedMapObject(placedMapObject)"
+      :key="`${placedMapObject.id}-${placedMapObjectKey}`"
+  />
 </template>
 
 <script setup lang="ts">
@@ -26,6 +33,7 @@ import TilemapLayer = Phaser.Tilemaps.TilemapLayer
 const scene = useScene()
 const mapEditor = useMapEditorComposable()
 const map = computed(() => mapEditor.currentMap.value!)
+const placedMapObjectKey = computed(() => mapEditor.refreshMapObject.value)
 
 const emit = defineEmits<{ (e: 'update', map: MapT): void; (e: 'updateAndCommit', map: MapT): void; (e: 'pauseObjectTracking'): void; (e: 'resumeObjectTracking'): void }>()