POC working new caching method - moved controllers folder, renamed assets to textures, fixed HTTP bug, formatted code

src/components/screens/Loading.vue

@@ -1,25 +1,79 @@
 <template>
-  <div class="flex flex-col justify-center items-center h-dvh relative">
-    <button @click="continueBtnClick" class="w-32 h-12 rounded-full bg-gray-500 flex items-center justify-between px-4 hover:bg-gray-600 transition-colors">
-      <span class="text-white text-lg flex-1 text-center">Play</span>
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 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 class="flex flex-col justify-center items-center h-dvh relative col">
+    <svg width="40" height="40" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="4" cy="12" r="3" fill="white">
+        <animate id="spinner_qFRN" begin="0;spinner_OcgL.end+0.25s" attributeName="cy" calcMode="spline" dur="0.6s" values="12;6;12" keySplines=".33,.66,.66,1;.33,0,.66,.33" />
+      </circle>
+      <circle cx="12" cy="12" r="3" fill="white">
+        <animate begin="spinner_qFRN.begin+0.1s" attributeName="cy" calcMode="spline" dur="0.6s" values="12;6;12" keySplines=".33,.66,.66,1;.33,0,.66,.33" />
+      </circle>
+      <circle cx="20" cy="12" r="3" fill="white">
+        <animate id="spinner_OcgL" begin="spinner_qFRN.begin+0.2s" attributeName="cy" calcMode="spline" dur="0.6s" values="12;6;12" keySplines=".33,.66,.66,1;.33,0,.66,.33" />
+      </circle>
+    </svg>
   </div>
 </template>
 
 <script setup lang="ts" async>
+import config from '@/application/config'
+import type { HttpResponse, MapObject } from '@/application/types'
+import { MapObjectStorage } from '@/dexie/mapObjects'
+import { MapStorage } from '@/dexie/maps'
+// import type { Map } from '@/application/types'
+import type { Map } from '@/dexie/maps'
 import { useGameStore } from '@/stores/gameStore'
+import { ref } from 'vue'
 
 const gameStore = useGameStore()
 
-function continueBtnClick() {
-  // Play music
-  const audio = new Audio('/assets/music/login.mp3')
-  audio.play()
+const mapStorage = new MapStorage()
+const mapObjectStorage = new MapObjectStorage()
 
+const totalItems = ref(0)
+const currentItem = ref(0)
+
+/**
+ * Download map cache from the server and add them to the storage
+ */
+async function downloadMaps() {
+  // Request to download maps
+  const request = await fetch(config.server_endpoint + '/cache/maps')
+  const response = (await request.json()) as HttpResponse<Map[]>
+  if (!response.success) {
+    console.error('Failed to download maps:', response.message)
+    return
+  }
+
+  const maps = response.data ?? ([] as Map[])
+
+  // Add maps to storage
+  for (const map of maps) {
+    await mapStorage.add(map)
+  }
+}
+
+/**
+ * Download map objects cache from the server and add them to the storage
+ */
+async function downloadMapObjects() {
+  // Request to download map objects
+  const request = await fetch(config.server_endpoint + '/cache/map_objects')
+  const response = (await request.json()) as HttpResponse<MapObject[]>
+  if (!response.success) {
+    console.error('Failed to download map objects:', response.message)
+    return
+  }
+
+  const mapObjects = response.data ?? ([] as MapObject[])
+
+  // Add map objects to storage
+  for (const mapObject of mapObjects) {
+    await mapObjectStorage.add(mapObject)
+  }
+}
+
+Promise.all([downloadMaps(), downloadMapObjects()]).then(() => {
   // Set isLoaded to true
   gameStore.game.isLoaded = true
-}
+})
 </script>