Load all tiles in zone editor

src/components/gameMaster/zoneEditor/ZoneEditor.vue

@@ -1,5 +1,7 @@
 <template>
+  <div v-if="isLoaded">
     <ZoneTiles @tilemap:create="tileMap = $event" />
+  </div>
   <ZoneObjects v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
   <ZoneEventTiles v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
 
@@ -14,10 +16,11 @@
 </template>
 
 <script setup lang="ts">
-import { onUnmounted, ref } from 'vue'
+import { useScene } from 'phavuer'
+import { onMounted, onUnmounted, ref } from 'vue'
 import { useGameStore } from '@/stores/gameStore'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
-import { type Zone } from '@/types'
+import { type AssetT, type Zone } from '@/types'
 
 // Components
 import Toolbar from '@/components/gameMaster/zoneEditor/partials/Toolbar.vue'
@@ -29,11 +32,14 @@ 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
@@ -59,6 +65,14 @@ 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/utilities/Modal.vue

@@ -223,23 +223,23 @@ watch(
 )
 
 onMounted(() => {
-  window.addEventListener('mousemove', drag)
-  window.addEventListener('mouseup', stopDrag)
-  window.addEventListener('mousemove', resizeModal)
-  window.addEventListener('mouseup', stopResize)
+  addEventListener('mousemove', drag)
+  addEventListener('mouseup', stopDrag)
+  addEventListener('mousemove', resizeModal)
+  addEventListener('mouseup', stopResize)
   if (props.modalPositionX !== 0 && props.modalPositionY !== 0) {
-    window.addEventListener('resize', handleResize)
+    addEventListener('resize', handleResize)
   }
   initializePosition()
 })
 
 onUnmounted(() => {
-  window.removeEventListener('mousemove', drag)
-  window.removeEventListener('mouseup', stopDrag)
-  window.removeEventListener('mousemove', resizeModal)
-  window.removeEventListener('mouseup', stopResize)
+  removeEventListener('mousemove', drag)
+  removeEventListener('mouseup', stopDrag)
+  removeEventListener('mousemove', resizeModal)
+  removeEventListener('mouseup', stopResize)
   if (props.modalPositionX !== 0 && props.modalPositionY !== 0) {
-    window.removeEventListener('resize', handleResize)
+    removeEventListener('resize', handleResize)
   }
 })
 </script>

src/composables/zoneComposable.ts

@@ -4,8 +4,7 @@ import TilemapLayer = Phaser.Tilemaps.TilemapLayer
 import Tileset = Phaser.Tilemaps.Tileset
 import Tile = Phaser.Tilemaps.Tile
 import { useAssetManager } from '@/managers/assetManager'
-import type { Zone as ZoneT } from '@/types'
-import { unduplicateArray } from '@/utilities'
+import type { AssetT, Zone as ZoneT } from '@/types'
 
 export function getTile(layer: TilemapLayer | Tilemap, x: number, y: number): Tile | undefined {
   const tile = layer.getTileAtWorldXY(x, y)
@@ -48,6 +47,7 @@ export function tileToWorldY(layer: TilemapLayer | Tilemap, pos_x: number, pos_y
 export function placeTile(zone: Tilemap, layer: TilemapLayer, x: number, y: number, tileName: string) {
   let tileImg = zone.getTileset(tileName) as Tileset
   if (!tileImg) {
+    console.log('tile not found:', tileName)
     tileImg = zone.getTileset('blank_tile') as Tileset
   }
   layer.putTileAt(tileImg.firstgid, x, y)
@@ -86,9 +86,10 @@ export function FlattenZoneArray(tiles: string[][]) {
 }
 
 export async function loadZoneTilesIntoScene(zone: ZoneT, scene: Phaser.Scene) {
-  const tileArray = unduplicateArray(FlattenZoneArray(zone.tiles))
+  const tileArray: AssetT[] = await fetch(config.server_endpoint + '/assets/list_tiles/' + zone.id).then((response) => response.json())
+  console.log(tileArray)
   for (const tile of tileArray) {
-    await loadZoneTileTexture(scene, tile, new Date())
+    await loadZoneTileTexture(scene, tile.key, tile.updatedAt)
   }
 }
 

src/managers/assetManager.ts

@@ -24,8 +24,17 @@ class AssetManager extends Dexie {
 
   async downloadAsset(key: string, url: string, group: string, updatedAt: Date, frameCount?: number, frameWidth?: number, frameHeight?: number) {
     try {
+      // Check if the asset already exists, then check if updatedAt is newer
+      const asset = await this.assets.get(key)
+      if (asset && asset.updatedAt > updatedAt) {
+        return
+      }
+
+      // Download the asset
       const response = await fetch(config.server_endpoint + url)
       const blob = await response.blob()
+
+      // Store the asset in the database
       await this.assets.put({ key, data: blob, group, updatedAt, frameCount, frameWidth, frameHeight })
     } catch (error) {
       console.error(`Failed to add asset ${key}:`, error)

src/screens/ZoneEditor.vue

@@ -11,17 +11,16 @@
 <script setup lang="ts">
 import config from '@/config'
 import 'phaser'
-import { ref } from 'vue'
 import { Game, Scene } from 'phavuer'
 import { useGameStore } from '@/stores/gameStore'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import ZoneEditor from '@/components/gameMaster/zoneEditor/ZoneEditor.vue'
 import AwaitLoaderPlugin from 'phaser3-rex-plugins/plugins/awaitloader-plugin'
-import { useAssetManager } from '@/managers/assetManager'
+import { loadZoneTilesIntoScene, loadZoneTileTexture } from '@/composables/zoneComposable'
+import type { AssetT, Tile } from '@/types'
 
 const gameStore = useGameStore()
 const zoneEditorStore = useZoneEditorStore()
-const assetManager = useAssetManager
 
 const gameConfig = {
   name: config.name,
@@ -66,45 +65,7 @@ const preloadScene = async (scene: Phaser.Scene) => {
   scene.load.image('TELEPORT', '/assets/zone/tp_tile.png')
   scene.load.image('blank_tile', '/assets/zone/blank_tile.png')
   scene.load.image('waypoint', '/assets/waypoint.png')
-
-  /**
-   *  We're using rex-await-loader to load assets asynchronously
-   *  Phaser does not support this out of the box, so we're using this plugin
-   */
-  // scene.load.rexAwait(async function (successCallback) {
-  //   await assetManager.getAssetsByGroup('tiles').then((assets) => {
-  //     assets.forEach((asset) => {
-  //       if (scene.load.textureManager.exists(asset.key)) return
-  //       scene.textures.addBase64(asset.key, asset.data)
-  //     })
-  //   })
-  //
-  //   // Load objects
-  //   await assetManager.getAssetsByGroup('objects').then((assets) => {
-  //     assets.forEach((asset) => {
-  //       if (scene.load.textureManager.exists(asset.key)) return
-  //       scene.textures.addBase64(asset.key, asset.data)
-  //     })
-  //   })
-  //
-  //   successCallback()
-  // })
 }
 
-const createScene = async (scene: Phaser.Scene) => {
-  /**
-   * Create sprite animations
-   * This is done here because phaser forces us to
-   */
-  // assetManager.getAssetsByGroup('sprite_animations').then((assets) => {
-  //   assets.forEach((asset) => {
-  //     scene.anims.create({
-  //       key: asset.key,
-  //       frameRate: 7,
-  //       frames: scene.anims.generateFrameNumbers(asset.key, { start: 0, end: asset.frameCount! - 1 }),
-  //       repeat: -1
-  //     })
-  //   })
-  // })
-}
+const createScene = async (scene: Phaser.Scene) => {}
 </script>