WIP: updated zone manager to match with zone logic (dynamic asset/texture loading)

src/components/gameMaster/zoneEditor/ZoneEditor.vue

@@ -1,7 +1,7 @@
 <template>
-  <Tiles @tilemap:create="tileMap = $event" />
-  <Objects v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
-  <EventTiles v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
+  <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" />
 
   <Toolbar @save="save" />
 
@@ -26,9 +26,9 @@ import ObjectList from '@/components/gameMaster/zoneEditor/partials/ObjectList.v
 import ZoneSettings from '@/components/gameMaster/zoneEditor/partials/ZoneSettings.vue'
 import ZoneList from '@/components/gameMaster/zoneEditor/partials/ZoneList.vue'
 import TeleportModal from '@/components/gameMaster/zoneEditor/partials/TeleportModal.vue'
-import Tiles from '@/components/gameMaster/zoneEditor/Tiles.vue'
-import Objects from '@/components/gameMaster/zoneEditor/Objects.vue'
-import EventTiles from '@/components/gameMaster/zoneEditor/EventTiles.vue'
+import ZoneTiles from '@/components/gameMaster/zoneEditor/ZoneTiles.vue'
+import ZoneObjects from '@/components/gameMaster/zoneEditor/ZoneObjects.vue'
+import ZoneEventTiles from '@/components/gameMaster/zoneEditor/ZoneEventTiles.vue'
 
 const gameStore = useGameStore()
 const zoneEditorStore = useZoneEditorStore()

src/components/gameMaster/zoneEditor/ZoneObjects.vue

@@ -1,40 +1,27 @@
 <template>
   <SelectedZoneObject v-if="selectedZoneObject" :zoneObject="selectedZoneObject" @move="moveZoneObject" @rotate="rotateZoneObject" @delete="deleteZoneObject" />
-  <Image v-for="object in zoneEditorStore.zone?.zoneObjects" v-bind="getImageProps(object)" @pointerup="() => (selectedZoneObject = object)" />
+  <ZoneObject v-for="zoneObject in zoneEditorStore.zone?.zoneObjects" :tilemap="tilemap" :zoneObject @pointerup="() => (selectedZoneObject = zoneObject)" />
 </template>
 
 <script setup lang="ts">
 import { uuidv4 } from '@/utilities'
-import { calculateIsometricDepth, getTile, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
-import { Image, useScene } from 'phavuer'
+import { getTile } from '@/composables/zoneComposable'
+import { useScene } from 'phavuer'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
-import type { ZoneObject } from '@/types'
 import SelectedZoneObject from '@/components/gameMaster/zoneEditor/partials/SelectedZoneObject.vue'
 import { onMounted, onUnmounted, ref, watch } from 'vue'
+import ZoneObject from '@/components/gameMaster/zoneEditor/zonePartials/ZoneObject.vue'
+import type { ZoneObject as ZoneObjectT } from '@/types'
 
 const scene = useScene()
 const zoneEditorStore = useZoneEditorStore()
-const selectedZoneObject = ref<ZoneObject | null>(null)
-const movingZoneObject = ref<ZoneObject | null>(null)
+const selectedZoneObject = ref<ZoneObjectT | null>(null)
+const movingZoneObject = ref<ZoneObjectT | null>(null)
 
 const props = defineProps<{
   tilemap: Phaser.Tilemaps.Tilemap
 }>()
 
-function getImageProps(zoneObject: ZoneObject) {
-  return {
-    alpha: zoneObject.id === movingZoneObject.value?.id ? 0.5 : 1,
-    depth: calculateIsometricDepth(zoneObject.positionX, zoneObject.positionY, zoneObject.object.frameWidth, zoneObject.object.frameHeight),
-    tint: selectedZoneObject.value?.id === zoneObject.id ? 0x00ff00 : 0xffffff,
-    x: tileToWorldX(props.tilemap, zoneObject.positionX, zoneObject.positionY),
-    y: tileToWorldY(props.tilemap, zoneObject.positionX, zoneObject.positionY),
-    flipX: zoneObject.isRotated,
-    texture: zoneObject.object.id,
-    originY: Number(zoneObject.object.originX),
-    originX: Number(zoneObject.object.originY)
-  }
-}
-
 function pencil(pointer: Phaser.Input.Pointer) {
   // Check if zone is set
   if (!zoneEditorStore.zone) return

src/components/gameMaster/zoneEditor/ZoneTiles.vue

@@ -5,21 +5,24 @@
 <script setup lang="ts">
 import config from '@/config'
 import { useScene } from 'phavuer'
-import { useGameStore } from '@/stores/gameStore'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import { onMounted, onUnmounted } from 'vue'
-import { createTileArray, getTile, placeTile, setLayerTiles } from '@/composables/zoneComposable'
+import { createTileArray, FlattenZoneArray, getTile, placeTile, setLayerTiles } from '@/composables/zoneComposable'
 import Controls from '@/components/utilities/Controls.vue'
+import { unduplicateArray } from '@/utilities'
 
 const emit = defineEmits(['tilemap:create'])
 
 const scene = useScene()
-const gameStore = useGameStore()
 const zoneEditorStore = useZoneEditorStore()
-
 const zoneTilemap = createTilemap()
 const tiles = createTileLayer()
 
+/**
+ * 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 zoneData = new Phaser.Tilemaps.MapData({
     width: zoneEditorStore.zone?.width,
@@ -34,11 +37,19 @@ function createTilemap() {
   return tilemap
 }
 
+/**
+ * A Tileset is a combination of a single image containing the tiles and a container for data about each tile.
+ */
 function createTileLayer() {
-  const tilesetImages = gameStore.assets.filter((asset) => asset.group === 'tiles').map((asset, index) => zoneTilemap.addTilesetImage(asset.key, asset.key, config.tile_size.x, config.tile_size.y, 1, 2, index + 1, { x: 0, y: -config.tile_size.y }))
-  tilesetImages.push(zoneTilemap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 1, 2, 0, { x: 0, y: -config.tile_size.y }))
+  const tilesArray = unduplicateArray(FlattenZoneArray(zoneEditorStore.zone?.tiles ?? []))
 
-  const layer = zoneTilemap.createBlankLayer('tiles', tilesetImages as any, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer
+  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 })
+  }) as any
+
+  // Add blank tile
+  tilesetImages.push(zoneTilemap.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 = zoneTilemap.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer
 
   layer.setDepth(0)
   layer.setCullPadding(2, 2)

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

@@ -0,0 +1,36 @@
+<template>
+  <Image v-if="isTextureLoaded" v-bind="imageProps" />
+</template>
+
+<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'
+
+const props = defineProps<{
+  tilemap: Phaser.Tilemaps.Tilemap
+  zoneObject: ZoneObject
+}>()
+
+const scene = useScene()
+const isTextureLoaded = ref(false)
+
+const imageProps = computed(() => ({
+  depth: calculateIsometricDepth(props.zoneObject.positionX, props.zoneObject.positionY, props.zoneObject.object.frameWidth, props.zoneObject.object.frameHeight),
+  x: tileToWorldX(props.tilemap, props.zoneObject.positionX, props.zoneObject.positionY),
+  y: tileToWorldY(props.tilemap, props.zoneObject.positionX, props.zoneObject.positionY),
+  flipX: props.zoneObject.isRotated,
+  texture: props.zoneObject.object.id,
+  originY: Number(props.zoneObject.object.originX),
+  originX: Number(props.zoneObject.object.originY)
+}))
+
+loadZoneObjectTexture(scene, props.zoneObject.object.id, props.zoneObject.object.updatedAt)
+  .then((loaded) => {
+    isTextureLoaded.value = loaded
+  })
+  .catch((error) => {
+    console.error('Error loading texture:', error)
+  })
+</script>

src/components/zone/Zone.vue

@@ -5,15 +5,15 @@
 </template>
 
 <script setup lang="ts">
+import { ref, onUnmounted } from 'vue'
 import { useScene } from 'phavuer'
 import { useGameStore } from '@/stores/gameStore'
 import { useZoneStore } from '@/stores/zoneStore'
-import { ref, onUnmounted, onMounted } from 'vue'
+import { loadZoneTilesIntoScene } from '@/composables/zoneComposable'
 import type { Character as CharacterT, Zone as ZoneT, ExtendedCharacter as ExtendedCharacterT } from '@/types'
 import ZoneTiles from '@/components/zone/ZoneTiles.vue'
 import ZoneObjects from '@/components/zone/ZoneObjects.vue'
 import Characters from '@/components/zone/Characters.vue'
-import { loadZoneTiles } from '@/composables/zoneComposable'
 
 const scene = useScene()
 const gameStore = useGameStore()
@@ -36,7 +36,7 @@ gameStore.connection!.on('zone:character:teleport', async (data: zoneLoadData) =
     zoneId: data.zone.id
   })
 
-  await loadZoneTiles(data.zone, scene)
+  await loadZoneTilesIntoScene(data.zone, scene)
   zoneStore.setZone(data.zone)
   zoneStore.setCharacters(data.characters)
 })
@@ -57,7 +57,7 @@ gameStore.connection!.on('character:move', (data: ExtendedCharacterT) => {
 
 // Emit zone:character:join event to server and wait for response, then set zone and characters
 gameStore!.connection!.emit('zone:character:join', async (response: zoneLoadData) => {
-  await loadZoneTiles(response.zone, scene)
+  await loadZoneTilesIntoScene(response.zone, scene)
   zoneStore.setZone(response.zone)
   zoneStore.setCharacters(response.characters)
 })

src/components/zone/ZoneTiles.vue

@@ -7,13 +7,14 @@ import config from '@/config'
 import { useScene } from 'phavuer'
 import { useZoneStore } from '@/stores/zoneStore'
 import { onBeforeUnmount } from 'vue'
-import { setLayerTiles } from '@/composables/zoneComposable'
+import { FlattenZoneArray, setLayerTiles } from '@/composables/zoneComposable'
 import Controls from '@/components/utilities/Controls.vue'
+import { unduplicateArray } from '@/utilities'
 
 const emit = defineEmits(['tilemap:create'])
 
-const zoneStore = useZoneStore()
 const scene = useScene()
+const zoneStore = useZoneStore()
 const zoneTilemap = createTilemap()
 const tiles = createTileLayer()
 
@@ -40,10 +41,9 @@ 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 tilesFromZone = zoneStore.zone?.tiles || []
-  const uniqueTiles = new Set(tilesFromZone.flat().filter(Boolean))
+  const tilesArray = unduplicateArray(FlattenZoneArray(zoneStore.zone?.tiles ?? []))
 
-  const tilesetImages = Array.from(uniqueTiles).map((tile: any, index: number) => {
+  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 })
   }) as any