70 lines
2.0 KiB
Vue
70 lines
2.0 KiB
Vue
<template>
|
|
<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 { mapLoadData } 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 { useScene } from 'phavuer'
|
|
import { onMounted, onUnmounted, shallowRef, watch } from 'vue'
|
|
|
|
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) => {
|
|
mapStore.setMapId(data.mapId)
|
|
mapStore.setCharacters(data.characters)
|
|
})
|
|
|
|
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, unduplicateArray(map.tiles.flat()))
|
|
}
|
|
|
|
watch(
|
|
() => mapStore.mapId,
|
|
async () => {
|
|
await initialize()
|
|
}
|
|
)
|
|
|
|
onMounted(async () => {
|
|
if (!mapStore.mapId) return
|
|
await initialize()
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
if (tileMap.value) {
|
|
tileMap.value.destroyLayer('tiles')
|
|
tileMap.value.removeAllLayers()
|
|
tileMap.value.destroy()
|
|
}
|
|
|
|
gameStore.connection?.off('map:character:teleport')
|
|
})
|
|
</script>
|