From 7c5602f2048a010abfce934c8fcf794c547013c3 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Tue, 5 Nov 2024 22:01:28 +0100
Subject: [PATCH] #197: Added background image loader

---
 src/App.vue                                   |  3 +-
 .../utilities/BackgroundImageLoader.vue       | 34 +++++++++++++++++++
 2 files changed, 36 insertions(+), 1 deletion(-)
 create mode 100644 src/components/utilities/BackgroundImageLoader.vue

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