Refactor assetManager, renamed assetManager to assetStorage, renamed AssetT to AssetDataT, added better error handling in authentication service, continued working on dynamic asset loading for both maps and map editor

src/components/gameMaster/zoneEditor/ZoneEditor.vue

@@ -1,7 +1,5 @@
 <template>
-  <div v-if="isLoaded">
-    <ZoneTiles @tilemap:create="tileMap = $event" />
-  </div>
+  <ZoneTiles @tilemap:create="tileMap = $event" />
   <ZoneObjects v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
   <ZoneEventTiles v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
 
@@ -16,11 +14,10 @@
 </template>
 
 <script setup lang="ts">
-import { useScene } from 'phavuer'
-import { onMounted, onUnmounted, ref } from 'vue'
+import { onUnmounted, ref } from 'vue'
 import { useGameStore } from '@/stores/gameStore'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
-import { type AssetT, type Zone } from '@/types'
+import { type Zone } from '@/types'
 
 // Components
 import Toolbar from '@/components/gameMaster/zoneEditor/partials/Toolbar.vue'
@@ -32,14 +29,10 @@ import TeleportModal from '@/components/gameMaster/zoneEditor/partials/TeleportM
 import ZoneTiles from '@/components/gameMaster/zoneEditor/ZoneTiles.vue'
 import ZoneObjects from '@/components/gameMaster/zoneEditor/ZoneObjects.vue'
 import ZoneEventTiles from '@/components/gameMaster/zoneEditor/ZoneEventTiles.vue'
-import config from '@/config'
-import { loadZoneTileTexture } from '@/composables/zoneComposable'
 
-const scene = useScene()
 const gameStore = useGameStore()
 const zoneEditorStore = useZoneEditorStore()
 const tileMap = ref(null as Phaser.Tilemaps.Tilemap | null)
-const isLoaded = ref(false)
 
 function save() {
   if (!zoneEditorStore.zone) return
@@ -65,14 +58,6 @@ function save() {
   })
 }
 
-onMounted(async () => {
-  const tiles: AssetT[] = await fetch(config.server_endpoint + '/assets/list_tiles').then((response) => response.json())
-  for (const tile of tiles) {
-    await loadZoneTileTexture(scene, tile.key, tile.updatedAt)
-  }
-  isLoaded.value = true
-})
-
 onUnmounted(() => {
   zoneEditorStore.reset()
 })

src/components/gameMaster/zoneEditor/ZoneTiles.vue

@@ -7,13 +7,15 @@ import config from '@/config'
 import { useScene } from 'phavuer'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import { onMounted, onUnmounted } from 'vue'
-import { createTileArray, FlattenZoneArray, getTile, placeTile, setLayerTiles } from '@/composables/zoneComposable'
+import { createTileArray, getTile, placeTile, setLayerTiles } from '@/composables/zoneComposable'
 import Controls from '@/components/utilities/Controls.vue'
-import { unduplicateArray } from '@/utilities'
+import { useGameStore } from '@/stores/gameStore'
+import type { AssetDataT } from '@/types'
 
 const emit = defineEmits(['tilemap:create'])
 
 const scene = useScene()
+const gameStore = useGameStore()
 const zoneEditorStore = useZoneEditorStore()
 const zoneTilemap = createTilemap()
 const tiles = createTileLayer()
@@ -41,10 +43,10 @@ function createTilemap() {
  * 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(FlattenZoneArray(zoneEditorStore.zone?.tiles ?? []))
+  const tilesArray = gameStore.getLoadedAssetsByGroup('tiles')
 
-  const tilesetImages = Array.from(tilesArray).map((tile: any, index: number) => {
-    return zoneTilemap.addTilesetImage(tile, tile, config.tile_size.x, config.tile_size.y, 1, 2, index + 1, { x: 0, y: -config.tile_size.y })
+  const tilesetImages = Array.from(tilesArray).map((tile: AssetDataT, index: number) => {
+    return zoneTilemap.addTilesetImage(tile.key, tile.key, config.tile_size.x, config.tile_size.y, 1, 2, index + 1, { x: 0, y: -config.tile_size.y })
   }) as any
 
   // Add blank tile

src/components/gameMaster/zoneEditor/zonePartials/ZoneObject.vue

@@ -5,8 +5,8 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import { Image, useScene } from 'phavuer'
-import { calculateIsometricDepth, loadZoneObjectTexture, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
-import type { ZoneObject } from '@/types'
+import { calculateIsometricDepth, loadTexture, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
+import type { AssetDataT, ZoneObject } from '@/types'
 
 const props = defineProps<{
   tilemap: Phaser.Tilemaps.Tilemap
@@ -26,7 +26,14 @@ const imageProps = computed(() => ({
   originX: Number(props.zoneObject.object.originY)
 }))
 
-loadZoneObjectTexture(scene, props.zoneObject.object.id, props.zoneObject.object.updatedAt)
+loadTexture(scene, {
+  key: props.zoneObject.object.id,
+  data: '/assets/objects/' + props.zoneObject.object.id + '.png',
+  group: 'objects',
+  updatedAt: props.zoneObject.object.updatedAt,
+  frameWidth: props.zoneObject.object.frameWidth,
+  frameHeight: props.zoneObject.object.frameHeight
+} as AssetDataT)
   .then((loaded) => {
     isTextureLoaded.value = loaded
   })