From 43c0f0ab1eb2dd7c08d093a1746e4eb15e4ebd2a Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Sat, 2 Nov 2024 13:34:52 +0100
Subject: [PATCH] Added vite-plugin-compression
---
package-lock.json | 41 +++++++++++++++++++++++++++++
package.json | 1 +
src/App.vue | 15 ++++++++---
src/screens/Loading.vue | 58 +++--------------------------------------
src/stores/gameStore.ts | 5 ++--
vite.config.ts | 2 ++
6 files changed, 62 insertions(+), 60 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index ca25188..35a6bd5 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index b54fe60..3e721ae 100644
--- a/package.json
+++ b/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"
diff --git a/src/App.vue b/src/App.vue
index 53a6077..58f084b 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/screens/Loading.vue b/src/screens/Loading.vue
index a2ebf47..a82c0bb 100644
--- a/src/screens/Loading.vue
+++ b/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>
diff --git a/src/stores/gameStore.ts b/src/stores/gameStore.ts
index 33b47ad..3697758 100644
--- a/src/stores/gameStore.ts
+++ b/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
diff --git a/vite.config.ts b/vite.config.ts
index b4c7711..e52c1e4 100644
--- a/vite.config.ts
+++ b/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: {