TS improvements, WIP loading map objects in game map, WIP loading tile textures

src/components/game/map/Characters.vue

@@ -1,5 +1,5 @@
 <template>
-  <Character v-for="item in mapStore.characters" :key="item.character.id" :tilemap="tilemap" :mapCharacter="item" />
+  <Character v-for="item in mapStore.characters" :key="item.character.id" :tileMap :mapCharacter="item" />
 </template>
 
 <script setup lang="ts">
@@ -9,6 +9,6 @@ import { useMapStore } from '@/stores/mapStore'
 const mapStore = useMapStore()
 
 const props = defineProps<{
-  tilemap: Phaser.Tilemaps.Tilemap
+  tileMap: Phaser.Tilemaps.Tilemap
 }>()
 </script>

src/components/game/map/Map.vue

@@ -1,7 +1,7 @@
 <template>
-  <MapTiles :key="mapStore.mapId" @tileMap:create="tileMap = $event" />
-  <PlacedMapObjects v-if="tileMap" :key="mapStore.mapId" :tilemap="tileMap" />
-  <Characters v-if="tileMap && mapStore.characters" :tilemap="tileMap" />
+  <MapTiles :key="mapStore.mapId" :tileMap :tileMapLayer />
+  <PlacedMapObjects v-if="tileMap" :key="mapStore.mapId" :tileMap :tileMapLayer />
+  <Characters v-if="tileMap && mapStore.characters" :tileMap />
 </template>
 
 <script setup lang="ts">
@@ -11,12 +11,20 @@ import MapTiles from '@/components/game/map/MapTiles.vue'
 import PlacedMapObjects from '@/components/game/map/PlacedMapObjects.vue'
 import { useGameStore } from '@/stores/gameStore'
 import { useMapStore } from '@/stores/mapStore'
-import { onUnmounted, shallowRef } from 'vue'
+import { onMounted, onUnmounted, shallowRef } from 'vue'
+import { createTileLayer, createTileMap } from '@/services/mapService'
+import { useScene } from 'phavuer'
+import { MapStorage } from '@/storage/storages'
+
+const scene = useScene()
 
 const gameStore = useGameStore()
 const mapStore = useMapStore()
 
+const mapStorage = new MapStorage()
+
 const tileMap = shallowRef<Phaser.Tilemaps.Tilemap>()
+const tileMapLayer = shallowRef<Phaser.Tilemaps.TilemapLayer>()
 
 // Event listeners
 gameStore.connection?.on('map:character:teleport', async (data: mapLoadData) => {
@@ -46,6 +54,16 @@ gameStore.connection?.on('map:character:move', (data: { characterId: UUID; posit
   }
 })
 
+onMounted(async () => {
+  if (!mapStore.mapId) return
+
+  const map = await mapStorage.get(mapStore.mapId)
+  if (!map) return
+
+  tileMap.value = createTileMap(scene, map)
+  tileMapLayer.value = createTileLayer(tileMap.value, map)
+})
+
 onUnmounted(() => {
   mapStore.reset()
   gameStore.connection?.off('map:character:teleport')

src/components/game/map/MapTiles.vue

@@ -1,39 +1,38 @@
 <template>
-  <Controls v-if="tileLayer" :layer="tileLayer" :depth="0" />
+  <Controls v-if="tileMapLayer" :layer="tileMapLayer" :depth="0" />
 </template>
 
 <script setup lang="ts">
 import type { UUID } from '@/application/types'
 import Controls from '@/components/utilities/Controls.vue'
-import { createTileLayer, createTileMap, loadTileTexturesFromMapTileArray, setLayerTiles } from '@/services/mapService'
+import { loadTileTexturesFromMapTileArray, placeTiles } from '@/services/mapService'
 import { MapStorage } from '@/storage/storages'
 import { useMapStore } from '@/stores/mapStore'
 import { useScene } from 'phavuer'
-import { onBeforeUnmount, shallowRef } from 'vue'
+import { onMounted } from 'vue'
 
-const emit = defineEmits(['tileMap:create'])
 const scene = useScene()
 const mapStore = useMapStore()
 const mapStorage = new MapStorage()
 
-const tileMap = shallowRef<Phaser.Tilemaps.Tilemap>()
-const tileLayer = shallowRef<Phaser.Tilemaps.TilemapLayer>()
+const props = defineProps<{
+  tileMap: Phaser.Tilemaps.Tilemap
+  tileMapLayer: Phaser.Tilemaps.TilemapLayer
+}>()
 
 loadTileTexturesFromMapTileArray(mapStore.mapId as UUID, scene)
   .then(() => mapStorage.get(mapStore.mapId))
   .then((mapData) => {
     if (!mapData || !mapData?.tiles) return
-    tileMap.value = createTileMap(scene, mapData)
-    emit('tileMap:create', tileMap.value)
-    tileLayer.value = createTileLayer(tileMap.value, mapData)
-    setLayerTiles(tileMap.value, tileLayer.value, mapData.tiles)
   })
   .catch((error) => console.error('Failed to initialize map:', error))
 
-onBeforeUnmount(() => {
-  if (!tileMap.value) return
-  tileMap.value.destroyLayer('tiles')
-  tileMap.value.removeAllLayers()
-  tileMap.value.destroy()
+onMounted(async () => {
+  if (!mapStore.mapId) return
+
+  const map = await mapStorage.get(mapStore.mapId)
+  if (!map) return
+
+  placeTiles(props.tileMap, props.tileMapLayer, map.tiles)
 })
 </script>

src/components/game/map/PlacedMapObjects.vue

@@ -1,5 +1,5 @@
 <template>
-  <PlacedMapObject v-for="placedMapObject in items" :tilemap="tilemap" :placedMapObject />
+  <PlacedMapObject v-for="placedMapObject in items" :tileMap :tileMapLayer :placedMapObject />
 </template>
 
 <script setup lang="ts">
@@ -8,9 +8,11 @@ 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<{
-  tilemap: Phaser.Tilemaps.Tilemap
+  tileMap: Phaser.Tilemaps.Tilemap
+  tileMapLayer: TilemapLayer
 }>()
 
 const mapStore = useMapStore()