PlacedMapObjects.vue refactor for map

src/components/game/map/Map.vue

@@ -1,6 +1,6 @@
 <template>
   <MapTiles :key="mapStore.mapId" @tileMap:create="tileMap = $event" />
-  <!--  <MapObjects v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />-->
+  <PlacedMapObjects v-if="tileMap" :key="mapStore.mapId" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
   <Characters v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
 </template>
 
@@ -8,7 +8,7 @@
 import type { MapCharacter, mapLoadData, UUID } from '@/application/types'
 import Characters from '@/components/game/map/Characters.vue'
 import MapTiles from '@/components/game/map/MapTiles.vue'
-import MapObjects from '@/components/game/map/PlacedMapObjects.vue'
+import PlacedMapObjects from '@/components/game/map/PlacedMapObjects.vue'
 import { useGameStore } from '@/stores/gameStore'
 import { useMapStore } from '@/stores/mapStore'
 import { onUnmounted, shallowRef } from 'vue'

src/components/game/map/PlacedMapObjects.vue

@@ -1,14 +1,28 @@
 <template>
-  <PlacedMapObject v-for="placedMapObject in mapStore.map?.placedMapObjects" :tilemap="tilemap" :placedMapObject />
+  <PlacedMapObject v-for="placedMapObject in items" :tilemap="tilemap" :placedMapObject />
 </template>
 
 <script setup lang="ts">
+import type { PlacedMapObject as PlacedMapObjectT } from '@/application/types'
 import PlacedMapObject from '@/components/game/map/partials/PlacedMapObject.vue'
 import { useMapStore } from '@/stores/mapStore'
-
+import { onMounted, ref } from 'vue'
-const mapStore = useMapStore()
+import { MapStorage } from '@/storage/storages'
 
 defineProps<{
   tilemap: Phaser.Tilemaps.Tilemap
 }>()
+
+const mapStore = useMapStore()
+const mapStorage = new MapStorage()
+const items = ref<PlacedMapObjectT[]>([])
+
+onMounted(async () => {
+  if (!mapStore.mapId) return
+
+  const map = await mapStorage.get(mapStore.mapId)
+  if (!map) return
+
+  items.value = map.placedMapObjects
+})
 </script>

src/components/game/map/partials/PlacedMapObject.vue

@@ -1,5 +1,5 @@
 <template>
-  <Image v-if="gameStore.isTextureLoaded(props.placedMapObject.mapObject)" v-bind="imageProps" />
+  <Image v-if="gameStore.isTextureLoaded(props.placedMapObject.mapObject.id)" v-bind="imageProps" />
 </template>
 
 <script setup lang="ts">
@@ -8,7 +8,7 @@ import { loadTexture } from '@/composables/gameComposable'
 import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/mapComposable'
 import { useGameStore } from '@/stores/gameStore'
 import { Image, useScene } from 'phavuer'
-import { computed } from 'vue'
+import { computed, onMounted } from 'vue'
 
 const props = defineProps<{
   tilemap: Phaser.Tilemaps.Tilemap
@@ -38,4 +38,8 @@ loadTexture(scene, {
 } as TextureData).catch((error) => {
   console.error('Error loading texture:', error)
 })
+
+onMounted(async () => {
+  
+})
 </script>

src/components/gameMaster/mapEditor/MapEditor.vue

@@ -26,7 +26,6 @@ import TileList from '@/components/gameMaster/mapEditor/partials/TileList.vue'
 import Toolbar from '@/components/gameMaster/mapEditor/partials/Toolbar.vue'
 import { useGameStore } from '@/stores/gameStore'
 import { useMapEditorStore } from '@/stores/mapEditorStore'
-import { useScene } from 'phavuer'
 import { onUnmounted, shallowRef } from 'vue'
 
 const gameStore = useGameStore()

src/components/gameMaster/mapEditor/mapPartials/MapTiles.vue

@@ -4,11 +4,9 @@
 
 <script setup lang="ts">
 import config from '@/application/config'
-import type { TextureData } from '@/application/types'
 import Controls from '@/components/utilities/Controls.vue'
-import { createTileArray, FlattenMapArray, getTile, loadAllTilesIntoScene, loadMapTilesIntoScene, placeTile, setLayerTiles } from '@/composables/mapComposable'
+import { createTileArray, getTile, loadAllTilesIntoScene, placeTile, setLayerTiles } from '@/composables/mapComposable'
 import { TileStorage } from '@/storage/storages'
-import { useGameStore } from '@/stores/gameStore'
 import { useMapEditorStore } from '@/stores/mapEditorStore'
 import { useScene } from 'phavuer'
 import { onBeforeMount, onMounted, onUnmounted, shallowRef, watch } from 'vue'
@@ -179,17 +177,14 @@ function tilePicker(pointer: Phaser.Input.Pointer) {
   mapEditorStore.setSelectedTile(mapEditorStore.map.tiles[tile.y][tile.x])
 }
 
-watch(
+watch(() => mapEditorStore.shouldClearTiles, (shouldClear) => {
-  () => mapEditorStore.shouldClearTiles,
+  if (shouldClear && mapEditorStore.map && tileMap.value && tileLayer.value) {
-  (shouldClear) => {
+    const blankTiles = createTileArray(tileMap.value.width, tileMap.value.height, 'blank_tile')
-    if (shouldClear && mapEditorStore.map && tileMap.value && tileLayer.value) {
+    setLayerTiles(tileMap.value, tileLayer.value, blankTiles)
-      const blankTiles = createTileArray(tileMap.value.width, tileMap.value.height, 'blank_tile')
+    mapEditorStore.map.tiles = blankTiles
-      setLayerTiles(tileMap.value, tileLayer.value, blankTiles)
+    mapEditorStore.resetClearTilesFlag()
-      mapEditorStore.map.tiles = blankTiles
-      mapEditorStore.resetClearTilesFlag()
-    }
   }
-)
+})
 
 onMounted(async () => {
   if (!mapEditorStore.map?.tiles) return