diff --git a/src/App.vue b/src/App.vue index 3179c4f..6d798fd 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,5 +1,6 @@ <template> <Notifications /> + <BackgroundImageLoader /> <GmPanel v-if="gameStore.character?.role === 'gm'" /> <component :is="currentScreen" /> </template> @@ -8,7 +9,7 @@ import { useGameStore } from '@/stores/gameStore' import { useZoneEditorStore } from '@/stores/zoneEditorStore' import Notifications from '@/components/utilities/Notifications.vue' -import GmTools from '@/components/gameMaster/GmTools.vue' +import BackgroundImageLoader from '@/components/utilities/BackgroundImageLoader.vue' import GmPanel from '@/components/gameMaster/GmPanel.vue' import Login from '@/components/screens/Login.vue' import Characters from '@/components/screens/Characters.vue' diff --git a/src/components/utilities/BackgroundImageLoader.vue b/src/components/utilities/BackgroundImageLoader.vue new file mode 100644 index 0000000..51c8c05 --- /dev/null +++ b/src/components/utilities/BackgroundImageLoader.vue @@ -0,0 +1,34 @@ +<template> + <div style="display: none"> + <img + v-for="(url, index) in imageUrls" + :key="index" + :src="url" + alt="" + @load="handleImageLoad(index)" + @error="handleImageError(index)" + /> + </div> +</template> + +<script setup lang="ts"> +import { ref } from 'vue' + +// Internal array of images to preload +const imageUrls = ref<string[]>([ + '/assets/ui-elements/ui-border-4-corners.svg', + '/assets/ui-elements/ui-border-4-corners-light.svg', + '/assets/ui-elements/ui-border-4-corners-small.svg' +]) + +const loadedImages = ref<Set<number>>(new Set()) + +const handleImageLoad = (index: number) => { + loadedImages.value.add(index) + console.log(`Image ${index} loaded:`, imageUrls.value[index]) +} + +const handleImageError = (index: number) => { + console.log(`Image ${index} failed to load:`, imageUrls.value[index]) +} +</script> \ No newline at end of file