#197: Added background image loader

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'

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>