Added vite-plugin-compression

package-lock.json

@@ -43,6 +43,7 @@
         "tailwindcss": "^3.4.13",
         "typescript": "~5.6.2",
         "vite": "^5.4.9",
+        "vite-plugin-compression": "^0.5.1",
         "vite-plugin-vue-devtools": "^7.5.2",
         "vitest": "^2.0.3",
         "vue-tsc": "^1.6.5"
@@ -7318,6 +7319,46 @@
         "url": "https://opencollective.com/vitest"
       }
     },
+    "node_modules/vite-plugin-compression": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/vite-plugin-compression/-/vite-plugin-compression-0.5.1.tgz",
+      "integrity": "sha512-5QJKBDc+gNYVqL/skgFAP81Yuzo9R+EAf19d+EtsMF/i8kFUpNi3J/H01QD3Oo8zBQn+NzoCIFkpPLynoOzaJg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "^4.1.2",
+        "debug": "^4.3.3",
+        "fs-extra": "^10.0.0"
+      },
+      "peerDependencies": {
+        "vite": ">=2.0.0"
+      }
+    },
+    "node_modules/vite-plugin-compression/node_modules/fs-extra": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite-plugin-compression/node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
     "node_modules/vite-plugin-inspect": {
       "version": "0.8.7",
       "resolved": "https://registry.npmjs.org/vite-plugin-inspect/-/vite-plugin-inspect-0.8.7.tgz",

package.json

@@ -50,6 +50,7 @@
     "tailwindcss": "^3.4.13",
     "typescript": "~5.6.2",
     "vite": "^5.4.9",
+    "vite-plugin-compression": "^0.5.1",
     "vite-plugin-vue-devtools": "^7.5.2",
     "vitest": "^2.0.3",
     "vue-tsc": "^1.6.5"

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>
+    <div 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">
+    <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

vite.config.ts

@@ -2,12 +2,14 @@ import { fileURLToPath, URL } from 'node:url'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue';
 import VueDevTools from 'vite-plugin-vue-devtools'
+import viteCompression from 'vite-plugin-compression';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     vue(),
     VueDevTools(),
+    viteCompression()
   ],
   resolve: {
     alias: {