From 90f3056e0821cb5ac94ee2a1d75e1566efcbc919 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Thu, 6 Feb 2025 13:22:52 +0100
Subject: [PATCH] Minor improvements

---
 .../game/map/partials/PlacedMapObject.vue     |  2 +-
 src/components/gameMaster/GmPanel.vue         |  2 -
 .../mapPartials/PlacedMapObjects.vue          |  6 +--
 .../partials/SelectedPlacedMapObject.vue      | 47 +++++++++++++++++--
 4 files changed, 48 insertions(+), 9 deletions(-)

diff --git a/src/components/game/map/partials/PlacedMapObject.vue b/src/components/game/map/partials/PlacedMapObject.vue
index bb94afd..7f6ba6d 100644
--- a/src/components/game/map/partials/PlacedMapObject.vue
+++ b/src/components/game/map/partials/PlacedMapObject.vue
@@ -41,7 +41,7 @@ async function initialize() {
   }
 
   const mapObjectStorage = new MapObjectStorage()
-  const _mapObject = await mapObjectStorage.get(props.placedMapObject.mapObject)
+  const _mapObject = await mapObjectStorage.get(props.placedMapObject.mapObject as string)
   if (!_mapObject) return
 
   mapObject.value = _mapObject
diff --git a/src/components/gameMaster/GmPanel.vue b/src/components/gameMaster/GmPanel.vue
index e0cde14..843de09 100644
--- a/src/components/gameMaster/GmPanel.vue
+++ b/src/components/gameMaster/GmPanel.vue
@@ -20,13 +20,11 @@
 <script setup lang="ts">
 import AssetManager from '@/components/gameMaster/assetManager/AssetManager.vue'
 import Modal from '@/components/utilities/Modal.vue'
-import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
 import { useGameStore } from '@/stores/gameStore'
 import { ref } from 'vue'
 
 defineEmits(['open-map-editor'])
 const gameStore = useGameStore()
-const mapEditor = useMapEditorComposable()
 
 let toggle = ref('asset-manager')
 </script>
diff --git a/src/components/gameMaster/mapEditor/mapPartials/PlacedMapObjects.vue b/src/components/gameMaster/mapEditor/mapPartials/PlacedMapObjects.vue
index 76fe98a..57b4f73 100644
--- a/src/components/gameMaster/mapEditor/mapPartials/PlacedMapObjects.vue
+++ b/src/components/gameMaster/mapEditor/mapPartials/PlacedMapObjects.vue
@@ -1,10 +1,10 @@
 <template>
-  <SelectedPlacedMapObjectComponent v-if="mapEditor.selectedPlacedObject.value" :map :placedMapObject="mapEditor.selectedPlacedObject.value" @move="moveMapObject" @rotate="rotatePlacedMapObject" @delete="deletePlacedMapObject" />
+  <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)" />
 </template>
 
 <script setup lang="ts">
-import type { MapObject, Map as MapT, PlacedMapObject as PlacedMapObjectT, UUID } from '@/application/types'
+import type { MapObject, Map as MapT, PlacedMapObject as PlacedMapObjectT } from '@/application/types'
 import { uuidv4 } from '@/application/utilities'
 import PlacedMapObject from '@/components/game/map/partials/PlacedMapObject.vue'
 import SelectedPlacedMapObjectComponent from '@/components/gameMaster/mapEditor/partials/SelectedPlacedMapObject.vue'
@@ -18,7 +18,7 @@ import TilemapLayer = Phaser.Tilemaps.TilemapLayer
 
 const scene = useScene()
 const mapEditor = useMapEditorComposable()
-const map = computed(() => mapEditor.currentMap.value)
+const map = computed(() => mapEditor.currentMap.value!)
 
 defineExpose({ handlePointer })
 
diff --git a/src/components/gameMaster/mapEditor/partials/SelectedPlacedMapObject.vue b/src/components/gameMaster/mapEditor/partials/SelectedPlacedMapObject.vue
index dcd4cd7..b4840e2 100644
--- a/src/components/gameMaster/mapEditor/partials/SelectedPlacedMapObject.vue
+++ b/src/components/gameMaster/mapEditor/partials/SelectedPlacedMapObject.vue
@@ -33,7 +33,7 @@
               <input class="input-field" v-model="mapObjectOriginY" name="originY" id="originY" type="number" />
             </div>
           </div>
-          <button class="btn-cyan px-4 py-1.5 min-w-24" type="submit">Save</button>
+          <button class="btn-cyan px-4 py-1.5 min-w-24" @click="handleUpdate">Save</button>
         </form>
       </div>
     </template>
@@ -41,9 +41,12 @@
 </template>
 
 <script setup lang="ts">
-import type { Map as MapT, PlacedMapObject } from '@/application/types'
+import type { Map as MapT, MapObject, PlacedMapObject } from '@/application/types'
 import Modal from '@/components/utilities/Modal.vue'
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
+import { MapObjectStorage } from '@/storage/storages'
+import { useGameStore } from '@/stores/gameStore'
+import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
 
 const props = defineProps<{
   placedMapObject: PlacedMapObject
@@ -52,6 +55,11 @@ const props = defineProps<{
 
 const emit = defineEmits(['move', 'rotate', 'delete'])
 
+const gameStore = useGameStore()
+const mapEditor = useMapEditorComposable()
+
+const mapObjectStorage = new MapObjectStorage()
+const mapObject = ref<MapObject | null>(null)
 const showMapObjectSettings = ref(false)
 const mapObjectName = ref('')
 const mapObjectOriginX = ref(0)
@@ -68,4 +76,37 @@ const handleRotate = () => {
 const handleDelete = () => {
   emit('delete', props.placedMapObject.id, props.map)
 }
+
+async function handleUpdate () {
+  if (!mapObject.value) return
+
+  gameStore.connection?.emit(
+    'gm:mapObject:update',
+    {
+      id: props.placedMapObject.mapObject as string,
+      name: mapObjectName.value,
+      originX: mapObjectOriginX.value,
+      originY: mapObjectOriginY.value,
+    }, async (response: boolean) => {
+      if (!response) return
+      // Update mapObject in storage
+      await mapObjectStorage.update(mapObject.value!.id, {
+        name: mapObjectName.value,
+        originX: mapObjectOriginX.value,
+        originY: mapObjectOriginY.value
+      })
+    }
+  )
+}
+
+onMounted(async () => {
+  if (!props.placedMapObject.mapObject) return
+
+  mapObject.value = await mapObjectStorage.get(props.placedMapObject.mapObject as string)
+  if (!mapObject.value) return
+
+  mapObjectName.value = mapObject.value.name
+  mapObjectOriginX.value = mapObject.value.originX
+  mapObjectOriginY.value = mapObject.value.originY
+})
 </script>