Minor improvements, more work on dynamic asset loading

src/components/gameMaster/zoneEditor/EventTiles.vue

@@ -8,7 +8,7 @@ import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import { Image, useScene } from 'phavuer'
 import { getTile, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
 import { uuidv4 } from '@/utilities'
-import { onBeforeMount, onBeforeUnmount } from 'vue'
+import { onMounted, onUnmounted } from 'vue'
 
 const scene = useScene()
 const zoneEditorStore = useZoneEditorStore()
@@ -102,14 +102,14 @@ function eraser(pointer: Phaser.Input.Pointer) {
   zoneEditorStore.zone.zoneEventTiles = zoneEditorStore.zone.zoneEventTiles.filter((eventTile) => eventTile.id !== existingEventTile.id)
 }
 
-onBeforeMount(() => {
+onMounted(() => {
   scene.input.on(Phaser.Input.Events.POINTER_DOWN, pencil)
   scene.input.on(Phaser.Input.Events.POINTER_MOVE, pencil)
   scene.input.on(Phaser.Input.Events.POINTER_DOWN, eraser)
   scene.input.on(Phaser.Input.Events.POINTER_MOVE, eraser)
 })
 
-onBeforeUnmount(() => {
+onUnmounted(() => {
   scene.input.off(Phaser.Input.Events.POINTER_DOWN, pencil)
   scene.input.off(Phaser.Input.Events.POINTER_MOVE, pencil)
   scene.input.off(Phaser.Input.Events.POINTER_DOWN, eraser)

src/components/gameMaster/zoneEditor/Objects.vue

@@ -10,7 +10,7 @@ import { Image, useScene } from 'phavuer'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import type { ZoneObject } from '@/types'
 import SelectedZoneObject from '@/components/gameMaster/zoneEditor/partials/SelectedZoneObject.vue'
-import { onBeforeMount, onBeforeUnmount, ref, watch } from 'vue'
+import { onMounted, onUnmounted, ref, watch } from 'vue'
 
 const scene = useScene()
 const zoneEditorStore = useZoneEditorStore()
@@ -155,14 +155,14 @@ function deleteZoneObject(id: string) {
   selectedZoneObject.value = null
 }
 
-onBeforeMount(() => {
+onMounted(() => {
   scene.input.on(Phaser.Input.Events.POINTER_DOWN, pencil)
   scene.input.on(Phaser.Input.Events.POINTER_MOVE, pencil)
   scene.input.on(Phaser.Input.Events.POINTER_DOWN, eraser)
   scene.input.on(Phaser.Input.Events.POINTER_MOVE, eraser)
 })
 
-onBeforeUnmount(() => {
+onUnmounted(() => {
   scene.input.off(Phaser.Input.Events.POINTER_DOWN, pencil)
   scene.input.off(Phaser.Input.Events.POINTER_MOVE, pencil)
   scene.input.off(Phaser.Input.Events.POINTER_DOWN, eraser)

src/components/gameMaster/zoneEditor/Tiles.vue

@@ -7,7 +7,7 @@ import config from '@/config'
 import { useScene } from 'phavuer'
 import { useGameStore } from '@/stores/gameStore'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
-import { onBeforeMount, onBeforeUnmount } from 'vue'
+import { onMounted, onUnmounted } from 'vue'
 import { createTileArray, getTile, placeTile, setLayerTiles } from '@/composables/zoneComposable'
 import Controls from '@/components/utilities/Controls.vue'
 
@@ -123,7 +123,7 @@ function paint(pointer: Phaser.Input.Pointer) {
   zoneEditorStore.zone.tiles = createTileArray(zoneTilemap.width, zoneTilemap.height, zoneEditorStore.selectedTile.id)
 }
 
-onBeforeMount(() => {
+onMounted(() => {
   if (!zoneEditorStore.zone?.tiles) {
     return
   }
@@ -134,7 +134,7 @@ onBeforeMount(() => {
   scene.input.on(Phaser.Input.Events.POINTER_DOWN, paint)
 })
 
-onBeforeUnmount(() => {
+onUnmounted(() => {
   scene.input.off(Phaser.Input.Events.POINTER_MOVE, pencil)
   scene.input.off(Phaser.Input.Events.POINTER_MOVE, eraser)
   scene.input.off(Phaser.Input.Events.POINTER_DOWN, paint)

src/components/utilities/Notifications.vue

@@ -12,7 +12,7 @@
 <script setup lang="ts">
 import { useGameStore } from '@/stores/gameStore'
 import Modal from '@/components/utilities/Modal.vue'
-import { onBeforeMount, onBeforeUnmount, watch } from 'vue'
+import { onBeforeMount, onBeforeUnmount, onMounted, onUnmounted, watch } from 'vue'
 
 const gameStore = useGameStore()
 
@@ -34,7 +34,7 @@ function setupNotificationListener(connection: any) {
   })
 }
 
-onBeforeMount(() => {
+onMounted(() => {
   const connection = gameStore.connection
   if (connection) {
     setupNotificationListener(connection)
@@ -49,7 +49,7 @@ onBeforeMount(() => {
   }
 })
 
-onBeforeUnmount(() => {
+onUnmounted(() => {
   const connection = gameStore.connection
   if (connection) {
     connection.off('notification')

src/components/zone/Zone.vue

@@ -7,7 +7,7 @@
 <script setup lang="ts">
 import { useGameStore } from '@/stores/gameStore'
 import { useZoneStore } from '@/stores/zoneStore'
-import { onBeforeUnmount, ref, onBeforeMount } from 'vue'
+import { ref, onUnmounted, onMounted } from 'vue'
 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'
@@ -51,15 +51,15 @@ gameStore.connection!.on('character:move', (data: ExtendedCharacterT) => {
   zoneStore.updateCharacter(data)
 })
 
-onBeforeMount(async () => {
+onMounted(async () => {
+  // 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) => {
-    // Set zone and characters
     zoneStore.setZone(response.zone)
     zoneStore.setCharacters(response.characters)
   })
 })
 
-onBeforeUnmount(() => {
+onUnmounted(() => {
   zoneStore.reset()
   gameStore.connection!.off('zone:character:teleport')
   gameStore.connection!.off('zone:character:join')

src/components/zone/ZoneTiles.vue

@@ -6,17 +6,34 @@
 import config from '@/config'
 import { useScene } from 'phavuer'
 import { useZoneStore } from '@/stores/zoneStore'
-import { onBeforeMount, onBeforeUnmount } from 'vue'
-import { setLayerTiles } from '@/composables/zoneComposable'
+import { onBeforeUnmount } from 'vue'
+import { setLayerTiles, loadZoneTileTexture } from '@/composables/zoneComposable'
 import Controls from '@/components/utilities/Controls.vue'
 
 const emit = defineEmits(['tilemap:create'])
 
 const zoneStore = useZoneStore()
 const scene = useScene()
+
+const tilesFromZone = zoneStore.zone?.tiles
+const uniqueTiles = new Set(tilesFromZone.flat().filter(Boolean))
+
+/**
+ * @TODO fix this
+ */
+for (const tile of uniqueTiles) {
+  console.log(tile)
+  await loadZoneTileTexture(scene, tile, new Date())
+}
+
 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: zoneStore.zone?.width,
@@ -31,6 +48,9 @@ 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 tilesFromZone = zoneStore.zone?.tiles || []
   const uniqueTiles = new Set(tilesFromZone.flat().filter(Boolean))
@@ -49,12 +69,7 @@ function createTileLayer() {
   return layer
 }
 
-onBeforeMount(() => {
-  if (!zoneStore.zone?.tiles) {
-    return
-  }
-  setLayerTiles(zoneTilemap, tiles, zoneStore.zone.tiles)
-})
+setLayerTiles(zoneTilemap, tiles, zoneStore.zone?.tiles)
 
 onBeforeUnmount(() => {
   zoneTilemap.destroyLayer('tiles')

src/components/zone/partials/ZoneObject.vue

@@ -3,14 +3,9 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, computed } from 'vue'
+import { ref, computed } from 'vue'
 import { Image, useScene } from 'phavuer'
-import {
-  calculateIsometricDepth,
-  loadZoneObjectTexture,
-  tileToWorldX,
-  tileToWorldY
-} from '@/composables/zoneComposable'
+import { calculateIsometricDepth, loadZoneObjectTexture, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
 import type { ZoneObject } from '@/types'
 
 const props = defineProps<{
@@ -31,13 +26,11 @@ const imageProps = computed(() => ({
   originX: Number(props.zoneObject.object.originY)
 }))
 
-onMounted(() => {
-  loadZoneObjectTexture(scene, props.zoneObject.object.id, props.zoneObject.object.updatedAt)
-    .then((loaded) => {
-      isTextureLoaded.value = loaded
-    })
-    .catch((error) => {
-      console.error('Error loading texture:', error)
-    })
-})
+loadZoneObjectTexture(scene, props.zoneObject.object.id, props.zoneObject.object.updatedAt)
+  .then((loaded) => {
+    isTextureLoaded.value = loaded
+  })
+  .catch((error) => {
+    console.error('Error loading texture:', error)
+  })
 </script>