Load textures using cache data instead of data sent from server

package-lock.json

@@ -2948,9 +2948,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.78",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.78.tgz",
-      "integrity": "sha512-UmwIt7HRKN1rsJfddG5UG7rCTCTAKoS9JeOy/R0zSenAyaZ8SU3RuXlwcratxhdxGRNpk03iq8O7BA3W7ibLVw==",
+      "version": "1.5.79",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.79.tgz",
+      "integrity": "sha512-nYOxJNxQ9Om4EC88BE4pPoNI8xwSFf8pU/BAeOl4Hh/b/i6V4biTAzwV7pXi3ARKeoYO5JZKMIXTryXSVer5RA==",
       "dev": true,
       "license": "ISC"
     },

src/App.vue

@@ -36,7 +36,7 @@ const currentScreen = computed(() => {
 watch(
   () => mapEditorStore.active,
   () => {
-    gameStore.game.loadedAssets = []
+    gameStore.game.loadedTextures = []
   }
 )
 

src/components/game/character/Character.vue

@@ -20,6 +20,7 @@ import { useGameStore } from '@/stores/gameStore'
 import { useMapStore } from '@/stores/mapStore'
 import { Container, refObj, Sprite, useScene } from 'phavuer'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { CharacterTypeStorage } from '@/storage/storages'
 
 // import CharacterChest from '@/components/game/character/partials/CharacterChest.vue'
 
@@ -152,14 +153,18 @@ watch(
 
 watch(() => props.mapCharacter, updateSprite)
 
-loadSpriteTextures(scene, props.mapCharacter.character.characterType as string)
-  .then(() => {
-    charSprite.value!.setTexture(charTexture.value)
-    charSprite.value!.setFlipX(isFlippedX.value)
-  })
-  .catch((error) => {
-    console.error('Error loading texture:', error)
-  })
+const characterTypeStorage = new CharacterTypeStorage()
+characterTypeStorage.getSpriteId(props.mapCharacter.character.characterType!).then((spriteId) => {
+  console.log(spriteId)
+  loadSpriteTextures(scene, spriteId)
+    .then(() => {
+      charSprite.value!.setTexture(charTexture.value)
+      charSprite.value!.setFlipX(isFlippedX.value)
+    })
+    .catch((error) => {
+      console.error('Error loading texture:', error)
+    })
+})
 
 onMounted(() => {
   charContainer.value!.setName(props.mapCharacter.character!.name)

src/components/screens/Characters.vue

@@ -182,7 +182,6 @@ watch(selectedCharacterId, (characterId) => {
 onMounted(async () => {
   const characterHairStorage = new CharacterHairStorage()
   characterHairs.value = await characterHairStorage.getAll()
-  console.log(characterHairs.value)
 })
 
 onBeforeUnmount(() => {

src/composables/gameComposable.ts

@@ -1,5 +1,4 @@
-import config from '@/application/config'
-import type { HttpResponse, Sprite, SpriteAction, TextureData } from '@/application/types'
+import type { TextureData } from '@/application/types'
 import { TextureStorage } from '@/storage/textureStorage'
 import { useGameStore } from '@/stores/gameStore'
 import { SpriteStorage } from '@/storage/storages'
@@ -11,7 +10,7 @@ export async function loadTexture(scene: Phaser.Scene, textureData: TextureData)
   const textureStorage = new TextureStorage()
 
   // Check if the texture is already loaded in Phaser
-  if (gameStore.game.loadedAssets.find((asset) => asset.key === textureData.key)) {
+  if (gameStore.game.loadedTextures.find((texture) => texture === textureData.key)) {
     return Promise.resolve(true)
   }
 
@@ -41,7 +40,7 @@ export async function loadTexture(scene: Phaser.Scene, textureData: TextureData)
 
         scene.textures.addBase64(texture.key, texture.data)
         scene.textures.once(`addtexture-${texture.key}`, () => {
-          gameStore.game.loadedAssets.push(textureData)
+          gameStore.game.loadedTextures.push(textureData.key)
           textureLoadingPromises.delete(textureData.key) // Clean up the promise
           resolve(true)
         })
@@ -60,20 +59,24 @@ export async function loadTexture(scene: Phaser.Scene, textureData: TextureData)
 export async function loadSpriteTextures(scene: Phaser.Scene, sprite_id: string) {
   if (!sprite_id) return
 
+  console.log(sprite_id)
   // @TODO: Fix this
   const spriteStorage = new SpriteStorage()
   const sprite = await spriteStorage.get(sprite_id)
 
-  if (!sprite) return
+  if (!sprite) {
+    console.error('Failed to load sprite:', sprite_id)
+    return
+  }
 
   for await (const sprite_action of sprite.spriteActions) {
     await loadTexture(scene, {
-      key: sprite_action.key,
-      data: sprite_action.data,
+      key: sprite_action.id + '_' + sprite_action.action,
+      data: '/textures/sprites/' + sprite.id + '/' + sprite_action.action + '.png',
       group: sprite_action.isAnimated ? 'sprite_animations' : 'sprites',
       updatedAt: sprite_action.updatedAt,
-      originX: sprite_action.originX ?? 0,
-      originY: sprite_action.originY ?? 0,
+      originX: sprite_action.originX,
+      originY: sprite_action.originY,
       isAnimated: sprite_action.isAnimated,
       frameWidth: sprite_action.frameWidth,
       frameHeight: sprite_action.frameHeight,

src/storage/storages.ts

@@ -29,6 +29,11 @@ export class CharacterTypeStorage extends BaseStorage<any> {
   constructor() {
     super('characterTypes', 'id, name, createdAt, updatedAt')
   }
+
+  async getSpriteId(characterTypeId: string) {
+    const characterType = await this.get(characterTypeId)
+    return characterType?.sprite
+  }
 }
 
 export class CharacterHairStorage extends BaseStorage<any> {

src/stores/gameStore.ts

@@ -9,7 +9,7 @@ export const useGameStore = defineStore('game', {
   state: () => {
     return {
       notifications: [] as Notification[],
-      token: '' as string | null,
+      token: '',
       connection: null as Socket | null,
       user: null as User | null,
       character: null as Character | null,
@@ -17,12 +17,12 @@ export const useGameStore = defineStore('game', {
         date: new Date(),
         isRainEnabled: false,
         isFogEnabled: false,
-        fogDensity: 0.5
+        fogDensity: 0
       } as WorldSettings,
       game: {
         isLoading: false,
         isLoaded: false, // isLoaded is currently being used to determine if the player has interacted with the game
-        loadedAssets: [] as string[],
+        loadedTextures: [] as string[],
         isPlayerDraggingCamera: false,
         isCameraFollowingCharacter: false
       },
@@ -35,10 +35,10 @@ export const useGameStore = defineStore('game', {
   },
   getters: {
     getLoadedAssets: (state) => {
-      return state.game.loadedAssets
+      return state.game.loadedTextures
     },
     isAssetLoaded: (state) => {
-      return (key: string) => { return state.game.loadedAssets.includes(key)}
+      return (key: string) => { return state.game.loadedTextures.includes(key)}
     },
   },
   actions: {
@@ -106,12 +106,12 @@ export const useGameStore = defineStore('game', {
       })
 
       this.connection = null
-      this.token = null
+      this.token = ''
       this.user = null
       this.character = null
 
       this.game.isLoaded = false
-      this.game.loadedAssets = []
+      this.game.loadedTextures = []
       this.game.isPlayerDraggingCamera = false
       this.game.isCameraFollowingCharacter = false
 
@@ -122,7 +122,7 @@ export const useGameStore = defineStore('game', {
       this.world.date = new Date()
       this.world.isRainEnabled = false
       this.world.isFogEnabled = false
-      this.world.fogDensity = 0.5
+      this.world.fogDensity = 0
     }
   }
 })