stuffs

src/components/game/character/Character.vue

@@ -2,7 +2,7 @@
   <ChatBubble :mapCharacter="props.mapCharacter" :currentX="currentX" :currentY="currentY" />
   <Healthbar :mapCharacter="props.mapCharacter" :currentX="currentX" :currentY="currentY" />
   <Container ref="charContainer" :depth="isometricDepth" :x="currentX" :y="currentY">
-    <CharacterHair :mapCharacter="props.mapCharacter" :currentX="currentX" :currentY="currentY" />
+<!--    <CharacterHair :mapCharacter="props.mapCharacter" :currentX="currentX" :currentY="currentY" />-->
     <!--    <CharacterChest :mapCharacter="props.mapCharacter" :currentX="currentX" :currentY="currentY" />-->
     <Sprite ref="charSprite" :origin-y="1" :flipX="isFlippedX" />
   </Container>
@@ -109,7 +109,7 @@ const isFlippedX = computed(() => [6, 4].includes(props.mapCharacter.character.r
 
 const charTexture = computed(() => {
   const { rotation, characterType } = props.mapCharacter.character
-  const spriteId = characterType?.sprite ?? 'idle_right_down'
+  const spriteId = characterType ?? 'idle_right_down'
   const action = props.mapCharacter.isMoving ? 'walk' : 'idle'
   const direction = [0, 6].includes(rotation) ? 'left_up' : 'right_down'
 
@@ -152,7 +152,7 @@ watch(
 
 watch(() => props.mapCharacter, updateSprite)
 
-loadSpriteTextures(scene, props.mapCharacter.character.characterType?.sprite as string)
+loadSpriteTextures(scene, props.mapCharacter.character.characterType as string)
   .then(() => {
     charSprite.value!.setTexture(charTexture.value)
     charSprite.value!.setFlipX(isFlippedX.value)

src/components/game/map/Map.vue

@@ -1,11 +1,11 @@
 <template>
-  <MapTiles :key="mapStore.map?.id ?? 0" @tileMap:create="tileMap = $event" />
+  <MapTiles :key="mapStore.mapId" @tileMap:create="tileMap = $event" />
   <MapObjects v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
   <Characters v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
 </template>
 
 <script setup lang="ts">
-import type { MapCharacter, mapLoadData, UUID } from '@/application/types'
+import type { MapCharacter, mapLoadData, UUID, Map } 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'
@@ -14,10 +14,13 @@ import { useGameStore } from '@/stores/gameStore'
 import { useMapStore } from '@/stores/mapStore'
 import { useScene } from 'phavuer'
 import { onUnmounted, ref, shallowRef } from 'vue'
+import { MapStorage } from '@/storage/storages'
 
 const scene = useScene()
 const gameStore = useGameStore()
 const mapStore = useMapStore()
+const mapStorage = new MapStorage()
+const mapData = ref<Map>()
 
 const tileMap = shallowRef<Phaser.Tilemaps.Tilemap>()
 
@@ -31,8 +34,7 @@ onUnmounted(() => {
 
 // Event listeners
 gameStore.connection?.on('map:character:teleport', async (data: mapLoadData) => {
-  await loadMapTilesIntoScene(data.map.id, scene)
-  mapStore.setMap(data.map)
+  mapStore.setMapId(data.mapId)
   mapStore.setCharacters(data.characters)
 })
 

src/components/game/map/MapTiles.vue

@@ -1,57 +1,54 @@
 <template>
-  <Controls :layer="tileLayer" :depth="0" />
+  <Controls v-if="isInitialized" :layer="tileLayer" :depth="0" />
 </template>
 
 <script setup lang="ts">
 import config from '@/application/config'
 import { unduplicateArray } from '@/application/utilities'
 import Controls from '@/components/utilities/Controls.vue'
-import { FlattenMapArray, setLayerTiles } from '@/composables/mapComposable'
+import { FlattenMapArray, loadMapTilesIntoScene, setLayerTiles } from '@/composables/mapComposable'
 import { useMapStore } from '@/stores/mapStore'
 import { useScene } from 'phavuer'
-import { onBeforeUnmount } from 'vue'
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { MapStorage } from '@/storage/storages'
+import type { UUID } from '@/application/types'
 
 const emit = defineEmits(['tileMap:create'])
 
 const scene = useScene()
 const mapStore = useMapStore()
-const tileMap = createTileMap()
-const tileLayer = createTileLayer()
+const mapStorage = new MapStorage()
 
-/**
- * A Tilemap is a container for Tilemap data.
- * This isn't a display object, rather, it holds data about the map and allows you to add tilesets and tilemap layers to it.
- * A map can have one or more tilemap layers, which are the display objects that actually render the tiles.
- */
-function createTileMap() {
-  const mapData = new Phaser.Tilemaps.MapData({
-    width: mapStore.map?.width,
-    height: mapStore.map?.height,
+let tileMap: Phaser.Tilemaps.Tilemap
+let tileLayer: Phaser.Tilemaps.TilemapLayer
+let isInitialized = ref(false)
+
+function createTileMap(mapData: any) {
+  const mapConfig = new Phaser.Tilemaps.MapData({
+    width: mapData?.width,
+    height: mapData?.height,
     tileWidth: config.tile_size.x,
     tileHeight: config.tile_size.y,
     orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
     format: Phaser.Tilemaps.Formats.ARRAY_2D
   })
 
-  const newTileMap = new Phaser.Tilemaps.Tilemap(scene, mapData)
+  const newTileMap = new Phaser.Tilemaps.Tilemap(scene, mapConfig)
   emit('tileMap:create', newTileMap)
 
   return newTileMap
 }
 
-/**
- * A Tileset is a combination of a single image containing the tiles and a container for data about each tile.
- */
-function createTileLayer() {
-  const tilesArray = unduplicateArray(FlattenMapArray(mapStore.map?.tiles ?? []))
+function createTileLayer(mapData: any) {
+  const tilesArray = unduplicateArray(FlattenMapArray(mapData?.tiles ?? []))
 
   const tilesetImages = Array.from(tilesArray).map((tile: any, index: number) => {
     return tileMap.addTilesetImage(tile, tile, config.tile_size.x, config.tile_size.y, 1, 2, index + 1, { x: 0, y: -config.tile_size.y })
-  }) as any
+  })
 
   // Add blank tile
   tilesetImages.push(tileMap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 1, 2, 0, { x: 0, y: -config.tile_size.y }))
-  const layer = tileMap.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer
+  const layer = tileMap.createBlankLayer('tiles', tilesetImages as any, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer
 
   layer.setDepth(0)
   layer.setCullPadding(2, 2)
@@ -59,11 +56,28 @@ function createTileLayer() {
   return layer
 }
 
-setLayerTiles(tileMap, tileLayer, mapStore.map?.tiles)
+async function initialize() {
+  try {
+    await loadMapTilesIntoScene(mapStore.mapId as UUID, scene)
+    const mapData = await mapStorage.get(mapStore.mapId)
+    tileMap = createTileMap(mapData)
+    tileLayer = createTileLayer(mapData)
+    setLayerTiles(tileMap, tileLayer, mapData?.tiles)
+    isInitialized.value = true
+  } catch (error) {
+    console.error('Failed to initialize map:', error)
+  }
+}
+
+onMounted(() => {
+  initialize()
+})
 
 onBeforeUnmount(() => {
-  tileMap.destroyLayer('tiles')
-  tileMap.removeAllLayers()
-  tileMap.destroy()
+  if (tileMap) {
+    tileMap.destroyLayer('tiles')
+    tileMap.removeAllLayers()
+    tileMap.destroy()
+  }
 })
-</script>
+</script>

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

@@ -1,5 +1,5 @@
 <template>
-  <Image v-if="gameStore.getLoadedAsset(props.placedMapObject.mapObject.id)" v-bind="imageProps" />
+  <Image v-if="gameStore.isAssetLoaded(props.placedMapObject.mapObject)" v-bind="imageProps" />
 </template>
 
 <script setup lang="ts">