Added vite-plugin-compression

src/App.vue

@@ -2,7 +2,6 @@
   <Notifications />
   <GmTools v-if="gameStore.character?.role === 'gm'" />
   <GmPanel v-if="gameStore.character?.role === 'gm'" />
-
   <component :is="currentScreen" />
 </template>
 
@@ -12,22 +11,30 @@ import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import Notifications from '@/components/utilities/Notifications.vue'
 import GmTools from '@/components/gameMaster/GmTools.vue'
 import GmPanel from '@/components/gameMaster/GmPanel.vue'
+import Loading from '@/screens/Loading.vue'
 import Login from '@/screens/Login.vue'
 import Characters from '@/screens/Characters.vue'
 import Game from '@/screens/Game.vue'
-// import Loading from '@/screens/Loading.vue'
 import ZoneEditor from '@/screens/ZoneEditor.vue'
-import { computed } from 'vue'
+import { computed, watch } from 'vue'
 
 const gameStore = useGameStore()
 const zoneEditorStore = useZoneEditorStore()
 
 const currentScreen = computed(() => {
-  // if (!gameStore.isAssetsLoaded) return Loading
+  // if (!gameStore.game.isLoaded) return Loading
   if (!gameStore.connection) return Login
   if (!gameStore.token) return Login
   if (!gameStore.character) return Characters
   if (zoneEditorStore.active) return ZoneEditor
   return Game
 })
+
+// Watch zoneEditorStore.active and empty gameStore.game.loadedAssets
+watch(
+  () => zoneEditorStore.active,
+  () => {
+    gameStore.game.loadedAssets = []
+  }
+)
 </script>

src/screens/Loading.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="flex flex-col justify-center items-center h-dvh relative">
-    <div v-if="!isLoaded" class="w-20 h-20 rounded-full border-4 border-solid border-gray-300 border-t-transparent animate-spin"></div>
-    <button v-else @click="continueBtnClick" class="w-20 h-20 rounded-full bg-gray-500 flex items-center justify-center hover:bg-gray-600 transition-colors">
+    <div class="w-20 h-20 rounded-full border-4 border-solid border-gray-300 border-t-transparent animate-spin"></div>
+    <button @click="continueBtnClick" class="w-20 h-20 rounded-full bg-gray-500 flex items-center justify-center hover:bg-gray-600 transition-colors">
       <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
       </svg>
     </button>
-    <div v-if="!isLoaded" class="text-center mt-6">
+    <div class="text-center mt-6">
       <h1 class="text-2xl font-bold">Loading...</h1>
       <p class="text-gray-400">Please wait while we load the assets.</p>
     </div>
@@ -14,61 +14,11 @@
 </template>
 
 <script setup lang="ts" async>
-import { onMounted, ref } from 'vue'
-import config from '@/config'
-import type { AssetDataT as ServerAsset } from '@/types'
-import { useAssetManager } from '@/storage/assetStorage'
 import { useGameStore } from '@/stores/gameStore'
 
-/**
- * This component downloads all assets from the server and
- * stores them in the asset manager.
- */
-
 const gameStore = useGameStore()
-const assetManager = useAssetManager
-const isLoaded = ref(false)
-
-async function getAssets() {
-  return fetch(config.server_endpoint + '/assets/')
-    .then((response) => {
-      if (!response.ok) throw new Error('Failed to fetch assets')
-      console.log(response)
-      return response.json()
-    })
-    .catch((error) => {
-      console.error('Error fetching assets:', error)
-      return false
-    })
-}
-
-async function loadAssetsIntoAssetManager(assets: ServerAsset[]): Promise<void> {
-  for (const asset of assets) {
-    // Check if the asset is already loaded
-    const existingAsset = await assetManager.getAsset(asset.key)
-
-    // Check if the asset needs to be updated
-    if (!existingAsset || new Date(asset.updatedAt) > new Date(existingAsset.updatedAt)) {
-      // Check if the asset is already loaded, if so, delete it
-      if (existingAsset) {
-        await assetManager.deleteAsset(asset.key)
-      }
-
-      // Add the asset to the asset manager
-      await assetManager.downloadAsset(asset.key, asset.url, asset.group, asset.updatedAt, asset.frameCount, asset.frameWidth, asset.frameHeight)
-    }
-  }
-}
 
 function continueBtnClick() {
-  gameStore.isAssetsLoaded = true
+  gameStore.game.isLoaded = true
 }
-
-onMounted(async () => {
-  const assets = await getAssets()
-  if (assets) {
-    await loadAssetsIntoAssetManager(assets)
-    isLoaded.value = true
-  }
-})
 </script>

src/stores/gameStore.ts

@@ -20,7 +20,8 @@ export const useGameStore = defineStore('game', {
         fogDensity: 0.5
       } as WorldSettings,
       game: {
-        isAssetsLoaded: false,
+        isLoading: false,
+        isLoaded: false, // isLoaded is currently being used to determine if the player has interacted with the game
         loadedAssets: [] as AssetDataT[],
         isPlayerDraggingCamera: false,
         isCameraFollowingCharacter: false
@@ -112,7 +113,7 @@ export const useGameStore = defineStore('game', {
       this.user = null
       this.character = null
 
-      this.game.isAssetsLoaded = false
+      this.game.isLoaded = false
       this.game.loadedAssets = []
       this.game.isPlayerDraggingCamera = false
       this.game.isCameraFollowingCharacter = false