Showing placed map object works in both game and map editor, updated types, cleaned some logic

src/components/game/map/Map.vue

@@ -1,20 +1,21 @@
 <template>
-  <MapTiles :key="mapStore.mapId" :tileMap :tileMapLayer />
-  <PlacedMapObjects v-if="tileMap" :key="mapStore.mapId" :tileMap :tileMapLayer />
+  <MapTiles v-if="tileMap && tileMapLayer" :tileMap :tileMapLayer />
+  <PlacedMapObjects v-if="tileMap && tileMapLayer" :tileMap :tileMapLayer />
   <Characters v-if="tileMap && mapStore.characters" :tileMap />
 </template>
 
 <script setup lang="ts">
 import type { MapCharacter, mapLoadData, UUID } from '@/application/types'
+import { unduplicateArray } from '@/application/utilities'
 import Characters from '@/components/game/map/Characters.vue'
 import MapTiles from '@/components/game/map/MapTiles.vue'
 import PlacedMapObjects from '@/components/game/map/PlacedMapObjects.vue'
+import { createTileLayer, createTileMap, loadTileTexturesFromMapTileArray } from '@/services/mapService'
+import { MapStorage } from '@/storage/storages'
 import { useGameStore } from '@/stores/gameStore'
 import { useMapStore } from '@/stores/mapStore'
-import { onMounted, onUnmounted, shallowRef } from 'vue'
-import { createTileLayer, createTileMap } from '@/services/mapService'
 import { useScene } from 'phavuer'
-import { MapStorage } from '@/storage/storages'
+import { onUnmounted, shallowRef, watch } from 'vue'
 
 const scene = useScene()
 
@@ -54,17 +55,32 @@ gameStore.connection?.on('map:character:move', (data: { characterId: UUID; posit
   }
 })
 
-onMounted(async () => {
+async function initialize() {
   if (!mapStore.mapId) return
 
   const map = await mapStorage.get(mapStore.mapId)
   if (!map) return
 
+  await loadTileTexturesFromMapTileArray(mapStore.mapId, scene)
+
   tileMap.value = createTileMap(scene, map)
-  tileMapLayer.value = createTileLayer(tileMap.value, map)
-})
+  tileMapLayer.value = createTileLayer(tileMap.value, unduplicateArray(map.tiles.flat()))
+}
+
+watch(
+  () => mapStore.mapId,
+  async () => {
+    await initialize()
+  }
+)
 
 onUnmounted(() => {
+  if (tileMap.value) {
+    tileMap.value.destroyLayer('tiles')
+    tileMap.value.removeAllLayers()
+    tileMap.value.destroy()
+  }
+
   mapStore.reset()
   gameStore.connection?.off('map:character:teleport')
   gameStore.connection?.off('map:character:join')

src/components/game/map/MapTiles.vue

@@ -3,7 +3,6 @@
 </template>
 
 <script setup lang="ts">
-import type { UUID } from '@/application/types'
 import Controls from '@/components/utilities/Controls.vue'
 import { loadTileTexturesFromMapTileArray, placeTiles } from '@/services/mapService'
 import { MapStorage } from '@/storage/storages'
@@ -20,19 +19,14 @@ const props = defineProps<{
   tileMapLayer: Phaser.Tilemaps.TilemapLayer
 }>()
 
-loadTileTexturesFromMapTileArray(mapStore.mapId as UUID, scene)
-  .then(() => mapStorage.get(mapStore.mapId))
-  .then((mapData) => {
-    if (!mapData || !mapData?.tiles) return
-  })
-  .catch((error) => console.error('Failed to initialize map:', error))
-
 onMounted(async () => {
   if (!mapStore.mapId) return
 
   const map = await mapStorage.get(mapStore.mapId)
   if (!map) return
 
+  await loadTileTexturesFromMapTileArray(mapStore.mapId, scene)
+
   placeTiles(props.tileMap, props.tileMapLayer, map.tiles)
 })
 </script>

src/components/game/map/PlacedMapObjects.vue

@@ -8,6 +8,7 @@ import PlacedMapObject from '@/components/game/map/partials/PlacedMapObject.vue'
 import { MapStorage } from '@/storage/storages'
 import { useMapStore } from '@/stores/mapStore'
 import { onMounted, ref } from 'vue'
+
 import TilemapLayer = Phaser.Tilemaps.TilemapLayer
 
 defineProps<{

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

@@ -1,16 +1,16 @@
 <template>
-  <Image v-if="gameStore.isTextureLoaded(props.placedMapObject.mapObject.id)" v-bind="imageProps" />
+  <Image v-if="mapObject && gameStore.isTextureLoaded(props.placedMapObject.mapObject as string)" v-bind="imageProps" />
 </template>
 
 <script setup lang="ts">
 import config from '@/application/config'
-import type { PlacedMapObject, TextureData } from '@/application/types'
+import type { MapObject, PlacedMapObject } from '@/application/types'
 import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
-import { calculateIsometricDepth, tileToWorldXY } from '@/services/mapService'
-import { loadTexture } from '@/services/textureService'
+import { calculateIsometricDepth, loadMapObjectTextures, tileToWorldXY } from '@/services/mapService'
+import { MapObjectStorage } from '@/storage/storages'
 import { useGameStore } from '@/stores/gameStore'
 import { Image, useScene } from 'phavuer'
-import { computed, onMounted } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 
 import Tilemap = Phaser.Tilemaps.Tilemap
 import TilemapLayer = Phaser.Tilemaps.TilemapLayer
@@ -21,38 +21,55 @@ const props = defineProps<{
   tileMapLayer: TilemapLayer
 }>()
 
-const gameStore = useGameStore()
 const scene = useScene()
+
+const gameStore = useGameStore()
 const mapEditor = useMapEditorComposable()
 
-const imageProps = computed(() => ({
-  alpha: mapEditor.movingPlacedObject.value?.id == props.placedMapObject.id ? 0.5 : 1,
-  tint: mapEditor.selectedPlacedObject.value?.id == props.placedMapObject.id ? 0x00ff00 : 0xffffff,
-  depth: calculateIsometricDepth(props.placedMapObject.positionX, props.placedMapObject.positionY, props.placedMapObject.mapObject.frameWidth, props.placedMapObject.mapObject.frameHeight),
-  ...calculateObjectPlacement(props.placedMapObject),
-  flipX: props.placedMapObject.isRotated,
-  texture: props.placedMapObject.mapObject.id,
-  originX: props.placedMapObject.mapObject.originX,
-  originY: props.placedMapObject.mapObject.originY
-}))
+const mapObject = ref<MapObject>()
+
+async function initialize() {
+  if (!props.placedMapObject.mapObject) return
+
+  /**
+   * Check if mapObject is an string or object, if its an object we assume its a mapObject and change it to a string
+   * We do this because this component is shared with the map editor, which gets sent the mapObject as an object by the server
+   */
+  if (typeof props.placedMapObject.mapObject === 'object') {
+    // @ts-ignore
+    props.placedMapObject.mapObject = props.placedMapObject.mapObject.id
+  }
+
+  const mapObjectStorage = new MapObjectStorage()
+  const _mapObject = await mapObjectStorage.get(props.placedMapObject.mapObject)
+  if (!_mapObject) return
+
+  mapObject.value = _mapObject
+
+  await loadMapObjectTextures([_mapObject], scene)
+}
 
 function calculateObjectPlacement(mapObj: PlacedMapObject): { x: number; y: number } {
   let position = tileToWorldXY(props.tileMapLayer, mapObj.positionX, mapObj.positionY)
 
   return {
-    x: position.worldPositionX - mapObj.mapObject.frameWidth / 2,
-    y: position.worldPositionY - mapObj.mapObject.frameHeight / 2 + config.tile_size.height
+    x: position.worldPositionX - mapObject.value!.frameWidth / 2,
+    y: position.worldPositionY - mapObject.value!.frameHeight / 2 + config.tile_size.height
   }
 }
 
-loadTexture(scene, {
-  key: props.placedMapObject.mapObject.id,
-  data: '/textures/map_objects/' + props.placedMapObject.mapObject.id + '.png',
-  group: 'map_objects',
-  updatedAt: props.placedMapObject.mapObject.updatedAt,
-  frameWidth: props.placedMapObject.mapObject.frameWidth,
-  frameHeight: props.placedMapObject.mapObject.frameHeight
-} as TextureData).catch((error) => {
-  console.error('Error loading texture:', error)
+const imageProps = computed(() => ({
+  alpha: mapEditor.movingPlacedObject.value?.id == props.placedMapObject.id ? 0.5 : 1,
+  tint: mapEditor.selectedPlacedObject.value?.id == props.placedMapObject.id ? 0x00ff00 : 0xffffff,
+  depth: calculateIsometricDepth(props.placedMapObject.positionX, props.placedMapObject.positionY, mapObject.value!.frameWidth, mapObject.value!.frameHeight),
+  ...calculateObjectPlacement(props.placedMapObject),
+  flipX: props.placedMapObject.isRotated,
+  texture: mapObject.value!.id,
+  originX: mapObject.value!.originX,
+  originY: mapObject.value!.originY
+}))
+
+onMounted(async () => {
+  await initialize()
 })
 </script>

src/components/gameMaster/mapEditor/Map.vue

@@ -1,6 +1,6 @@
 <template>
-  <MapTiles ref="mapTiles" v-if="tileMap" :tileMap :tileMapLayer />
-  <PlacedMapObjects ref="mapObjects" v-if="tileMap" :tileMap :tileMapLayer />
+  <MapTiles ref="mapTiles" v-if="tileMap && tileMapLayer" :tileMap :tileMapLayer />
+  <PlacedMapObjects ref="mapObjects" v-if="tileMap && tileMapLayer" :tileMap :tileMapLayer />
   <MapEventTiles ref="eventTiles" v-if="tileMap" :tileMap />
 </template>
 
@@ -10,6 +10,7 @@ import MapTiles from '@/components/gameMaster/mapEditor/mapPartials/MapTiles.vue
 import PlacedMapObjects from '@/components/gameMaster/mapEditor/mapPartials/PlacedMapObjects.vue'
 import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
 import { createTileLayer, createTileMap } from '@/services/mapService'
+import { TileStorage } from '@/storage/storages'
 import { useScene } from 'phavuer'
 import { onBeforeUnmount, onMounted, onUnmounted, shallowRef, useTemplateRef } from 'vue'
 
@@ -74,11 +75,16 @@ function handlePointerUp(pointer: Phaser.Input.Pointer) {
   }
 }
 
-onMounted(() => {
+onMounted(async () => {
   let mapValue = mapEditor.currentMap.value
   if (!mapValue) return
+
+  const tileStorage = new TileStorage()
+  const allTiles = await tileStorage.getAll()
+  const allTileIds = allTiles.map((tile) => tile.id)
+
   tileMap.value = createTileMap(scene, mapValue)
-  tileMapLayer.value = createTileLayer(tileMap.value, mapValue)
+  tileMapLayer.value = createTileLayer(tileMap.value, allTileIds)
 
   addEventListener('keydown', handleKeyDown)
   scene.input.on(Phaser.Input.Events.POINTER_DOWN, handlePointerDown)

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

@@ -4,7 +4,7 @@
 </template>
 
 <script setup lang="ts">
-import type { Map as MapT, PlacedMapObject as PlacedMapObjectT, UUID } from '@/application/types'
+import type { MapObject, Map as MapT, PlacedMapObject as PlacedMapObjectT, UUID } 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'
@@ -36,9 +36,7 @@ function pencil(pointer: Phaser.Input.Pointer, map: MapT) {
   if (!mapEditor.selectedMapObject.value) return
 
   const newPlacedMapObject: PlacedMapObjectT = {
-    id: uuidv4() as UUID,
-    depth: 0,
-    map: map,
+    id: uuidv4(),
     mapObject: mapEditor.selectedMapObject.value,
     isRotated: false,
     positionX: tile.x,
@@ -72,7 +70,7 @@ function objectPicker(pointer: Phaser.Input.Pointer, map: MapT) {
   if (!existingPlacedMapObject) return
 
   // Select the object
-  mapEditor.setSelectedMapObject(existingPlacedMapObject.mapObject)
+  mapEditor.setSelectedMapObject(existingPlacedMapObject.mapObject as MapObject)
 }
 
 function moveMapObject(id: string, map: MapT) {
@@ -113,7 +111,7 @@ function clickPlacedMapObject(placedMapObject: PlacedMapObjectT) {
 
   // If alt is pressed, select the object
   if (scene.input.activePointer.event.altKey) {
-    mapEditor.setSelectedMapObject(placedMapObject.mapObject)
+    mapEditor.setSelectedMapObject(placedMapObject.mapObject as MapObject)
   }
 }
 

src/components/screens/Game.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex justify-center items-center h-dvh relative">
     <Game :config="gameConfig" @create="createGame">
-      <Scene name="main" @preload="preloadScene" @create="createScene">
+      <Scene name="main" @preload="preloadScene">
         <Menu />
         <Hud />
         <Hotkeys />
@@ -29,7 +29,6 @@ import Menu from '@/components/game/gui/Menu.vue'
 import Map from '@/components/game/map/Map.vue'
 import { useGameStore } from '@/stores/gameStore'
 import { Game, Scene } from 'phavuer'
-import { onBeforeUnmount } from 'vue'
 
 const gameStore = useGameStore()
 
@@ -62,8 +61,4 @@ function preloadScene(scene: Phaser.Scene) {
   scene.load.image('blank_tile', '/assets/map/blank_tile.png')
   scene.load.image('waypoint', '/assets/waypoint.png')
 }
-
-function createScene(scene: Phaser.Scene) {}
-
-onBeforeUnmount(() => {})
 </script>

src/components/screens/MapEditor.vue

@@ -104,7 +104,7 @@ function save() {
     pvp: currentMap.pvp,
     mapEffects: currentMap.mapEffects,
     mapEventTiles: currentMap.mapEventTiles,
-    placedMapObjects: currentMap.placedMapObjects.map(({ id, mapObject, depth, isRotated, positionX, positionY }) => ({ id, mapObject: { ...mapObject }, depth, isRotated, positionX, positionY })) ?? []
+    placedMapObjects: currentMap.placedMapObjects.map(({ id, mapObject, depth, isRotated, positionX, positionY }) => ({ id, mapObject, depth, isRotated, positionX, positionY })) ?? []
   }
 
   gameStore.connection?.emit('gm:map:update', data, (response: MapT) => {