My 13th reason (2.0)

src/components/gameMaster/assetManager/partials/object/ObjectList.vue

@@ -32,14 +32,12 @@ import config from '@/config'
 import { useGameStore } from '@/stores/game'
 import { onMounted, ref, computed } from 'vue'
 import { useAssetManagerStore } from '@/stores/assetManager'
-import { useAssetStore } from '@/stores/assets'
 import type { Object } from '@/types'
 import { useVirtualList } from '@vueuse/core'
 
 const gameStore = useGameStore()
 const objectUploadField = ref(null)
 const assetManagerStore = useAssetManagerStore()
-const assetStore = useAssetStore()
 
 const searchQuery = ref('')
 
@@ -55,8 +53,6 @@ const handleFileUpload = (e: Event) => {
       return
     }
 
-    assetStore.fetchAssets()
-
     gameStore.connection?.emit('gm:object:list', {}, (response: Object[]) => {
       assetManagerStore.setObjectList(response)
     })

src/components/gameMaster/assetManager/partials/sprite/SpriteList.vue

@@ -28,13 +28,11 @@ import config from '@/config'
 import { useGameStore } from '@/stores/game'
 import { onMounted, ref, computed } from 'vue'
 import { useAssetManagerStore } from '@/stores/assetManager'
-import { useAssetStore } from '@/stores/assets'
 import { useVirtualList } from '@vueuse/core'
 import type { Sprite } from '@/types'
 
 const gameStore = useGameStore()
 const assetManagerStore = useAssetManagerStore()
-const assetStore = useAssetStore()
 
 const searchQuery = ref('')
 

src/components/gameMaster/assetManager/partials/tile/TileList.vue

@@ -32,14 +32,12 @@ import config from '@/config'
 import { useGameStore } from '@/stores/game'
 import { onMounted, ref, computed } from 'vue'
 import { useAssetManagerStore } from '@/stores/assetManager'
-import { useAssetStore } from '@/stores/assets'
 import type { Tile } from '@/types'
 import { useVirtualList } from '@vueuse/core'
 
 const gameStore = useGameStore()
 const tileUploadField = ref(null)
 const assetManagerStore = useAssetManagerStore()
-const assetStore = useAssetStore()
 
 const searchQuery = ref('')
 
@@ -55,8 +53,6 @@ const handleFileUpload = (e: Event) => {
       return
     }
 
-    assetStore.fetchAssets()
-
     gameStore.connection?.emit('gm:tile:list', {}, (response: Tile[]) => {
       assetManagerStore.setTileList(response)
     })

src/components/gameMaster/zoneEditor/ZoneEditor.vue

@@ -29,8 +29,7 @@ import { Container, Image, useScene } from 'phavuer'
 import { storeToRefs } from 'pinia'
 import { useGameStore } from '@/stores/game'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
-import { useAssetStore } from '@/stores/assets'
-import { calculateIsometricDepth, placeTile, setAllTiles, sortByIsometricDepth, tileToWorldX, tileToWorldY } from '@/services/zone'
+import { calculateIsometricDepth, placeTile, setAllTiles, sortByIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
 import { ZoneEventTileType, type ZoneObject, type ZoneEventTile, type Zone } from '@/types'
 import { uuidv4 } from '@/utilities'
 import config from '@/config'
@@ -55,7 +54,6 @@ import TilemapLayer = Phaser.Tilemaps.TilemapLayer
 const scene = useScene()
 const gameStore = useGameStore()
 const zoneEditorStore = useZoneEditorStore()
-const assetStore = useAssetStore()
 
 const { objectList, zone, selectedTile, selectedObject, selectedZoneObject, eraserMode, drawMode } = storeToRefs(zoneEditorStore)
 
@@ -81,7 +79,7 @@ function createTilemap() {
 }
 
 function createTileLayer() {
-  const tilesetImages = assetStore.assets.filter((asset) => asset.group === 'tiles').map((asset, index) => zoneTilemap.addTilesetImage(asset.key, asset.key, config.tile_size.x, config.tile_size.y, 0, 0, index + 1, { x: 0, y: -config.tile_size.y }))
+  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, 0, 0, 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, 0, 0, 0, { x: 0, y: -config.tile_size.y }))
 
   const layer = zoneTilemap.createBlankLayer('tiles', tilesetImages as any, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer

src/components/gameMaster/zoneEditor/partials/Toolbar.vue

@@ -86,7 +86,7 @@
 <script setup lang="ts">
 import { onBeforeUnmount, onMounted, ref } from 'vue'
 import { useScene } from 'phavuer'
-import { getTile } from '@/services/zone'
+import { getTile } from '@/composables/zoneComposable'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
 import TilemapLayer = Phaser.Tilemaps.TilemapLayer
 

src/components/gui/Chat.vue

@@ -21,11 +21,9 @@
 <script setup lang="ts">
 import { onBeforeUnmount, onMounted, ref, nextTick } from 'vue'
 import { useGameStore } from '@/stores/game'
-import { useNotificationStore } from '@/stores/notifications'
 import type { Character } from '@/types'
 
 const gameStore = useGameStore()
-const notifications = useNotificationStore()
 
 const message = ref('')
 const chats = ref([] as ChatMessage[])

src/components/sprites/Character.vue

@@ -18,7 +18,7 @@
 <script lang="ts" setup>
 import { Container, Image, RoundRectangle, Sprite, Text } from 'phavuer'
 import { type ExtendedCharacter as CharacterT } from '@/types'
-import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/services/zone'
+import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
 import { watch, computed, ref, onMounted, onUnmounted } from 'vue'
 import config from '@/config'
 

src/components/utilities/Notifications.vue

@@ -1,5 +1,5 @@
 <template>
-  <Modal v-for="notification in notifications.getNotifications" :key="notification.id" :isModalOpen="true" @modal:close="closeNotification(notification.id)">
+  <Modal v-for="notification in gameStore.getNotifications" :key="notification.id" :isModalOpen="true" @modal:close="closeNotification(notification.id)">
     <template #modalHeader v-if="notification.title">
       <h3 class="m-0 font-medium shrink-0">{{ notification.title }}</h3>
     </template>
@@ -10,16 +10,14 @@
 </template>
 
 <script setup lang="ts">
-import { useNotificationStore } from '@/stores/notifications'
 import { useGameStore } from '@/stores/game'
 import Modal from '@/components/utilities/Modal.vue'
 import { onBeforeMount, onBeforeUnmount, watch } from 'vue'
 
-const notifications = useNotificationStore()
 const gameStore = useGameStore()
 
 function closeNotification(id: string) {
-  notifications.removeNotification(id)
+  gameStore.removeNotification(id)
 }
 
 type Notification = {
@@ -29,7 +27,7 @@ type Notification = {
 
 function setupNotificationListener(connection: any) {
   connection.on('notification', (data: Notification) => {
-    notifications.addNotification({
+    gameStore.addNotification({
       title: data.title,
       message: data.message
     })

src/components/zone/Characters.vue

@@ -5,7 +5,7 @@
 <script setup lang="ts">
 import Character from '@/components/sprites/Character.vue'
 import { useZoneStore } from '@/stores/zone'
-import { calculateIsometricDepth } from '@/services/zone'
+import { calculateIsometricDepth } from '@/composables/zoneComposable'
 
 const zoneStore = useZoneStore()
 

src/components/zone/Objects.vue

@@ -4,7 +4,7 @@
 </template>
 
 <script setup lang="ts">
-import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/services/zone'
+import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
 import { Image, Text } from 'phavuer'
 import { useZoneStore } from '@/stores/zone'
 import type { ZoneObject } from '@/types'

src/components/zone/Tiles.vue

@@ -8,7 +8,7 @@ import { useScene } from 'phavuer'
 import { useZoneStore } from '@/stores/zone'
 import { onBeforeMount, onBeforeUnmount, ref } from 'vue'
 import { storeToRefs } from 'pinia'
-import { placeTile, setAllTiles } from '@/services/zone'
+import { placeTile, setAllTiles } from '@/composables/zoneComposable'
 import Controls from '@/components/utilities/Controls.vue'
 
 const emit = defineEmits(['tilemap:create'])

src/components/zone/Zone.vue

@@ -5,21 +5,18 @@
 </template>
 
 <script setup lang="ts">
-import { useGame, useScene } from 'phavuer'
-import { useAssetStore } from '@/stores/assets'
+import { useScene } from 'phavuer'
 import { useGameStore } from '@/stores/game'
 import { useZoneStore } from '@/stores/zone'
-import { onBeforeMount, onBeforeUnmount, ref, watch } from 'vue'
+import { onBeforeUnmount, ref } from 'vue'
 import type { Character as CharacterT, Zone as ZoneT, ExtendedCharacter as ExtendedCharacterT } from '@/types'
 import Tiles from '@/components/zone/Tiles.vue'
 import Objects from '@/components/zone/Objects.vue'
 import Characters from '@/components/zone/Characters.vue'
-import { loadAssets } from '@/services/zone'
+import { loadAssets } from '@/composables/zoneComposable'
 
-const assetStore = useAssetStore()
 const gameStore = useGameStore()
 const zoneStore = useZoneStore()
-const game = useGame()
 const scene = useScene()
 
 const tileMap = ref(null as Phaser.Tilemaps.Tilemap | null)
@@ -29,15 +26,25 @@ type zoneLoadData = {
   characters: CharacterT[]
 }
 
-gameStore.connection?.emit('zone:character:join', { zoneId: gameStore.character!.zoneId }, (response: zoneLoadData) => {
+gameStore.connection!.emit('zone:character:join', { zoneId: gameStore.character!.zoneId }, async (response: zoneLoadData) => {
+  // Fetch assets for new zone
+  await gameStore.fetchZoneAssets(response.zone.id)
+  await loadAssets(scene)
+
+  // Set zone and characters
   zoneStore.setZone(response.zone)
   zoneStore.setCharacters(response.characters)
 })
 
 // Event listeners
-gameStore.connection?.on('zone:teleport', (data: zoneLoadData) => {
+gameStore.connection!.on('zone:teleport', async (data: zoneLoadData) => {
   if (zoneStore.zone?.id === data.zone.id) return
 
+  // Fetch assets for new zone
+  await gameStore.fetchZoneAssets(data.zone.id)
+  // wait 1.5 sec
+  await loadAssets(scene)
+
   /**
    * @TODO : Update character via global event server-side, remove this and listen for it somewhere not here
    */
@@ -50,23 +57,23 @@ gameStore.connection?.on('zone:teleport', (data: zoneLoadData) => {
   zoneStore.setCharacters(data.characters)
 })
 
-gameStore.connection?.on('zone:character:join', async (data: ExtendedCharacterT) => {
+gameStore.connection!.on('zone:character:join', async (data: ExtendedCharacterT) => {
   zoneStore.addCharacter(data)
 })
 
-gameStore.connection?.on('zone:character:leave', (character_id: number) => {
+gameStore.connection!.on('zone:character:leave', (character_id: number) => {
   zoneStore.removeCharacter(character_id)
 })
 
-gameStore.connection?.on('character:move', (data: ExtendedCharacterT) => {
+gameStore.connection!.on('character:move', (data: ExtendedCharacterT) => {
   zoneStore.updateCharacter(data)
 })
 
 onBeforeUnmount(() => {
   zoneStore.reset()
-  gameStore.connection?.off('zone:teleport')
-  gameStore.connection?.off('zone:character:join')
-  gameStore.connection?.off('zone:character:leave')
-  gameStore.connection?.off('character:move')
+  gameStore.connection!.off('zone:teleport')
+  gameStore.connection!.off('zone:character:join')
+  gameStore.connection!.off('zone:character:leave')
+  gameStore.connection!.off('character:move')
 })
 </script>