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 '@/composables/zoneComposable'
-import { calculateIsometricDepth, placeTile, setAllTiles, sortByIsometricDepth, tileToWorldX, tileToWorldY } from '@/services/zone'
 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 { useScene } from 'phavuer'
-import { useAssetStore } from '@/stores/assets'
 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:teleport')
-  gameStore.connection?.off('zone:character:join')
+  gameStore.connection!.off('zone:character:join')
-  gameStore.connection?.off('zone:character:leave')
+  gameStore.connection!.off('zone:character:leave')
-  gameStore.connection?.off('character:move')
+  gameStore.connection!.off('character:move')
 })
 </script>

src/composables/pointerHandlers/useGamePointerHandlers.ts

@@ -1,5 +1,5 @@
 import { type Ref } from 'vue'
-import { getTile, tileToWorldXY } from '@/services/zone'
+import { getTile, tileToWorldXY } from '@/composables/zoneComposable'
 import { useGameStore } from '@/stores/game'
 import config from '@/config'
 

src/composables/pointerHandlers/useZoneEditorPointerHandlers.ts

@@ -1,5 +1,5 @@
 import { computed, type Ref, ref } from 'vue'
-import { getTile, tileToWorldXY } from '@/services/zone'
+import { getTile, tileToWorldXY } from '@/composables/zoneComposable'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
 import config from '@/config'
 

src/composables/zoneComposable.ts

@@ -2,7 +2,7 @@ import config from '@/config'
 import Tilemap = Phaser.Tilemaps.Tilemap
 import TilemapLayer = Phaser.Tilemaps.TilemapLayer
 import Tileset = Phaser.Tilemaps.Tileset
-import { useAssetStore } from '@/stores/assets'
+import { useGameStore } from '@/stores/game'
 
 export function getTile(x: number, y: number, layer: Phaser.Tilemaps.TilemapLayer): Phaser.Tilemaps.Tile | undefined {
   const tile: Phaser.Tilemaps.Tile = layer.getTileAtWorldXY(x, y)
@@ -58,9 +58,11 @@ export const sortByIsometricDepth = <T extends { positionX: number; positionY: n
   })
 }
 
-export const loadAssets = (scene: Phaser.Scene) => {
+export const loadAssets = (scene: Phaser.Scene): Promise<void> => {
-  const assetStore = useAssetStore()
+  return new Promise((resolve) => {
-  assetStore.assets.forEach((asset) => {
+    const gameStore = useGameStore()
+
+    gameStore.assets.forEach((asset) => {
       if (asset.group === 'sprite_animations') {
         scene.load.spritesheet(asset.key, config.server_endpoint + asset.url, { frameWidth: asset.frameWidth ?? 0, frameHeight: asset.frameHeight ?? 0 })
       } else {
@@ -69,4 +71,8 @@ export const loadAssets = (scene: Phaser.Scene) => {
     })
 
     scene.load.start()
+    scene.load.on(Phaser.Loader.Events.COMPLETE, () => {
+      resolve()
+    })
+  })
 }

src/screens/Game.vue

@@ -42,7 +42,6 @@ import { Game, Scene } from 'phavuer'
 import { useGameStore } from '@/stores/game'
 import { useZoneStore } from '@/stores/zone'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
-import { useAssetStore } from '@/stores/assets'
 import Hud from '@/components/gui/Hud.vue'
 import Zone from '@/components/zone/Zone.vue'
 import Chat from '@/components/gui/Chat.vue'
@@ -51,12 +50,10 @@ import GmTools from '@/components/gameMaster/GmTools.vue'
 import ZoneEditor from '@/components/gameMaster/zoneEditor/ZoneEditor.vue'
 import GmPanel from '@/components/gameMaster/GmPanel.vue'
 import Inventory from '@/components/gui/UserPanel.vue'
-import { loadAssets } from '@/services/zone'
+import { loadAssets } from '@/composables/zoneComposable'
 
 const gameStore = useGameStore()
-const zoneStore = useZoneStore()
 const zoneEditorStore = useZoneEditorStore()
-const assetStore = useAssetStore()
 const isLoaded = ref(false)
 
 const gameConfig = {
@@ -138,7 +135,7 @@ const createScene = (scene: Phaser.Scene) => {
   /**
    * Create sprite animations
    */
-  assetStore.assets.forEach((asset) => {
+  gameStore.assets.forEach((asset) => {
     if (asset.group !== 'sprite_animations') return
     scene.anims.create({
       key: asset.key,

src/screens/Login.vue

@@ -30,21 +30,19 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 import { login, register } from '@/services/authentication'
-import { useNotificationStore } from '@/stores/notifications'
 import { useGameStore } from '@/stores/game'
-import { useAssetStore } from '@/stores/assets'
 import { useCookies } from '@vueuse/integrations/useCookies'
 
 const gameStore = useGameStore()
-const notifications = useNotificationStore()
 const username = ref('')
 const password = ref('')
 
 // automatic login because of development
 onMounted(async () => {
   /**
-   * Fetch assets from the server
+   * Fetch sprite assets from the server
    */
+  await gameStore.fetchSpriteAssets()
 
   const token = useCookies().get('token')
   if (token) {
@@ -56,7 +54,7 @@ onMounted(async () => {
 async function loginFunc() {
   // check if username and password are valid
   if (username.value === '' || password.value === '') {
-    notifications.addNotification({ message: 'Please enter a valid username and password' })
+    gameStore.addNotification({ message: 'Please enter a valid username and password' })
     return
   }
 
@@ -64,7 +62,7 @@ async function loginFunc() {
   const response = await login(username.value, password.value)
 
   if (response.success === undefined) {
-    notifications.addNotification({ message: response.error })
+    gameStore.addNotification({ message: response.error })
     return
   }
 
@@ -76,7 +74,7 @@ async function loginFunc() {
 async function registerFunc() {
   // check if username and password are valid
   if (username.value === '' || password.value === '') {
-    notifications.addNotification({ message: 'Please enter a valid username and password' })
+    gameStore.addNotification({ message: 'Please enter a valid username and password' })
     return
   }
 
@@ -84,13 +82,13 @@ async function registerFunc() {
   const response = await register(username.value, password.value)
 
   if (response.success === undefined) {
-    notifications.addNotification({ message: response.error })
+    gameStore.addNotification({ message: response.error })
     return
   }
 
   const loginSuccess = await loginFunc()
   if (!loginSuccess) {
-    notifications.addNotification({ message: 'Login after registration failed. Please try logging in manually.' })
+    gameStore.addNotification({ message: 'Login after registration failed. Please try logging in manually.' })
   }
 }
 </script>

src/stores/assets.ts

@@ -1,38 +0,0 @@
-import { defineStore } from 'pinia'
-import { type Asset } from '@/types'
-import config from '@/config'
-
-export const useAssetStore = defineStore('assets', {
-  state: () => ({
-    assets: [] as Asset[]
-  }),
-  actions: {
-    setAssets(assets: Asset[]) {
-      this.assets = assets
-    },
-    async fetchAssets() {
-      return fetch(config.server_endpoint + '/assets')
-        .then((response) => response.json())
-        .then((assets) => {
-          this.setAssets(assets)
-          return true
-        })
-        .catch((error) => {
-          console.error('Error fetching assets:', error)
-          return false
-        })
-    },
-    async fetchAssetsByZoneId(zoneId: number) {
-      return fetch(config.server_endpoint + '/assets/' + zoneId)
-        .then((response) => response.json())
-        .then((assets) => {
-          this.setAssets(assets)
-          return true
-        })
-        .catch((error) => {
-          console.error('Error fetching assets:', error)
-          return false
-        })
-    }
-  }
-})

src/stores/game.ts

@@ -1,11 +1,13 @@
 import { defineStore } from 'pinia'
 import { io, Socket } from 'socket.io-client'
-import type { Character, User } from '@/types'
+import type { Asset, Character, Notification, User } from '@/types'
 import config from '@/config'
 import { useCookies } from '@vueuse/integrations/useCookies'
 
 export const useGameStore = defineStore('game', {
   state: () => ({
+    notifications: [] as Notification[],
+    assets: [] as Asset[],
     token: '' as string | null,
     connection: null as Socket | null,
     user: null as User | null,
@@ -15,7 +17,70 @@ export const useGameStore = defineStore('game', {
     isChatOpen: false,
     isUserPanelOpen: false
   }),
+  getters: {
+    getNotifications: (state: any) => state.notifications,
+    getAssetByKey: (state) => {
+      return (key: string) => state.assets.find((asset) => asset.key === key)
+    }
+  },
   actions: {
+    addNotification(notification: Notification) {
+      if (!notification.id) {
+        notification.id = Math.random().toString(16)
+      }
+      this.notifications.push(notification)
+    },
+    removeNotification(id: string) {
+      this.notifications = this.notifications.filter((notification: Notification) => notification.id !== id)
+    },
+    setAssets(assets: Asset[]) {
+      this.assets = assets
+    },
+    addAsset(asset: Asset) {
+      this.assets.push(asset)
+    },
+    addAssets(assets: Asset[]) {
+      this.assets = this.assets.concat(assets)
+    },
+    async fetchSpriteAssets() {
+      return fetch(config.server_endpoint + '/assets/sprites')
+        .then((response) => response.json())
+        .then((assets) => {
+          // Only add the sprites that are not already in the store
+          this.addAssets(assets.filter((asset: Asset) => !this.getAssetByKey(asset.key)))
+          return true
+        })
+        .catch((error) => {
+          console.error('Error fetching assets:', error)
+          return false
+        })
+    },
+    async fetchZoneAssets(zoneId: number) {
+      return fetch(config.server_endpoint + '/assets/zone/' + zoneId)
+        .then((response) => response.json())
+        .then((assets) => {
+          // Only add the zones that are not already in the store
+          this.addAssets(assets.filter((asset: Asset) => !this.getAssetByKey(asset.key)))
+          return true
+        })
+        .catch((error) => {
+          console.error('Error fetching assets:', error)
+          return false
+        })
+    },
+    async fetchAllAssets() {
+      return fetch(config.server_endpoint + '/assets')
+        .then((response) => response.json())
+        .then((assets) => {
+          // Only add the zones that are not already in the store
+          this.addAssets(assets.filter((asset: Asset) => !this.getAssetByKey(asset.key)))
+          return true
+        })
+        .catch((error) => {
+          console.error('Error fetching assets:', error)
+          return false
+        })
+    },
     setToken(token: string) {
       this.token = token
     },
@@ -74,6 +139,7 @@ export const useGameStore = defineStore('game', {
         domain: window.location.hostname.split('.').slice(-2).join('.')
       })
 
+      this.assets = []
       this.connection = null
       this.token = null
       this.user = null

src/stores/notifications.ts

@@ -1,22 +0,0 @@
-import { defineStore, type StoreDefinition } from 'pinia'
-import type { Notification } from '@/types'
-
-export const useNotificationStore: StoreDefinition = defineStore('notifications', {
-  state: () => ({
-    notifications: [] as Notification[]
-  }),
-  getters: {
-    getNotifications: (state: any) => state.notifications
-  },
-  actions: {
-    addNotification(notification: Notification) {
-      if (!notification.id) {
-        notification.id = Math.random().toString(16)
-      }
-      this.notifications.push(notification)
-    },
-    removeNotification(id: string) {
-      this.notifications = this.notifications.filter((notification: Notification) => notification.id !== id)
-    }
-  }
-})

src/types.ts

@@ -1,6 +1,6 @@
 export type Notification = {
-  id: string
+  id?: string
-  message: string
+  message?: string
 }
 
 export type Asset = {