75 lines
2.5 KiB
Vue
75 lines
2.5 KiB
Vue
<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">
|
|
<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">
|
|
<h1 class="text-2xl font-bold">Loading...</h1>
|
|
<p class="text-gray-400">Please wait while we load the assets.</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts" async>
|
|
import { onMounted, ref } from 'vue'
|
|
import config from '@/config'
|
|
import type { AssetT as ServerAsset } from '@/types'
|
|
import { useAssetManager } from '@/utilities/assetManager'
|
|
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
|
|
}
|
|
|
|
onMounted(async () => {
|
|
const assets = await getAssets()
|
|
if (assets) {
|
|
await loadAssetsIntoAssetManager(assets)
|
|
isLoaded.value = true
|
|
}
|
|
})
|
|
</script>
|