From 5cf7423a5c9db23a18933b9ed6d1c94d978654fd Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Mon, 13 Jan 2025 11:40:41 +0100
Subject: [PATCH] PlacedMapObjects.vue refactor for map

---
 src/components/game/map/Map.vue               |  4 ++--
 src/components/game/map/PlacedMapObjects.vue  | 20 +++++++++++++++---
 .../game/map/partials/PlacedMapObject.vue     |  8 +++++--
 .../gameMaster/mapEditor/MapEditor.vue        |  1 -
 .../mapEditor/mapPartials/MapTiles.vue        | 21 +++++++------------
 src/composables/useCharacter.ts               |  0
 src/composables/useCharacterMovement.ts       |  0
 src/composables/useCharacterPosition.ts       |  0
 src/composables/useCharacterSprite.ts         |  0
 9 files changed, 33 insertions(+), 21 deletions(-)
 delete mode 100644 src/composables/useCharacter.ts
 delete mode 100644 src/composables/useCharacterMovement.ts
 delete mode 100644 src/composables/useCharacterPosition.ts
 delete mode 100644 src/composables/useCharacterSprite.ts

diff --git a/src/components/game/map/Map.vue b/src/components/game/map/Map.vue
index 454fc72..ddf35ed 100644
--- a/src/components/game/map/Map.vue
+++ b/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'
diff --git a/src/components/game/map/PlacedMapObjects.vue b/src/components/game/map/PlacedMapObjects.vue
index 7de353f..46a2267 100644
--- a/src/components/game/map/PlacedMapObjects.vue
+++ b/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'
-
-const mapStore = useMapStore()
+import { onMounted, ref } from 'vue'
+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>
diff --git a/src/components/game/map/partials/PlacedMapObject.vue b/src/components/game/map/partials/PlacedMapObject.vue
index 6d0d76c..a62fcc5 100644
--- a/src/components/game/map/partials/PlacedMapObject.vue
+++ b/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>
diff --git a/src/components/gameMaster/mapEditor/MapEditor.vue b/src/components/gameMaster/mapEditor/MapEditor.vue
index 47f921f..2d0d69a 100644
--- a/src/components/gameMaster/mapEditor/MapEditor.vue
+++ b/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()
diff --git a/src/components/gameMaster/mapEditor/mapPartials/MapTiles.vue b/src/components/gameMaster/mapEditor/mapPartials/MapTiles.vue
index 1eaad42..3db3c6c 100644
--- a/src/components/gameMaster/mapEditor/mapPartials/MapTiles.vue
+++ b/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(
-  () => mapEditorStore.shouldClearTiles,
-  (shouldClear) => {
-    if (shouldClear && mapEditorStore.map && tileMap.value && tileLayer.value) {
-      const blankTiles = createTileArray(tileMap.value.width, tileMap.value.height, 'blank_tile')
-      setLayerTiles(tileMap.value, tileLayer.value, blankTiles)
-      mapEditorStore.map.tiles = blankTiles
-      mapEditorStore.resetClearTilesFlag()
-    }
+watch(() => mapEditorStore.shouldClearTiles, (shouldClear) => {
+  if (shouldClear && mapEditorStore.map && tileMap.value && tileLayer.value) {
+    const blankTiles = createTileArray(tileMap.value.width, tileMap.value.height, 'blank_tile')
+    setLayerTiles(tileMap.value, tileLayer.value, blankTiles)
+    mapEditorStore.map.tiles = blankTiles
+    mapEditorStore.resetClearTilesFlag()
   }
-)
+})
 
 onMounted(async () => {
   if (!mapEditorStore.map?.tiles) return
diff --git a/src/composables/useCharacter.ts b/src/composables/useCharacter.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/src/composables/useCharacterMovement.ts b/src/composables/useCharacterMovement.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/src/composables/useCharacterPosition.ts b/src/composables/useCharacterPosition.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/src/composables/useCharacterSprite.ts b/src/composables/useCharacterSprite.ts
deleted file mode 100644
index e69de29..0000000