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

src/components/screens/Characters.vue

@@ -74,7 +74,7 @@
                     v-for="hair in characterHairs"
                     class="relative flex justify-center items-center bg-gray default-border w-[18px] h-[18px] p-2 rounded-sm hover:bg-gray-500 hover:border-gray-400 focus-visible:outline-none focus-visible:border-gray-300 focus-visible:bg-gray-500 has-[:checked]:bg-cyan has-[:checked]:border-transparent"
                   >
-                    <img class="h-4 object-contain" :src="config.server_endpoint + '/assets/sprites/' + hair.sprite.id + '/front.png'" alt="Hair sprite" />
+                    <img class="h-4 object-contain" :src="config.server_endpoint + '/textures/sprites/' + hair.sprite?.id + '/front.png'" alt="Hair sprite" />
                     <input type="radio" name="hair" :value="hair.id" v-model="selectedHairId" class="h-full w-full absolute left-0 top-0 m-0 z-10 hover:cursor-pointer focus-visible:outline-offset-0 focus-visible:outline-white" />
                   </div>
                 </div>

src/components/screens/Game.vue

@@ -82,7 +82,5 @@ function preloadScene(scene: Phaser.Scene) {
 
 function createScene(scene: Phaser.Scene) {}
 
-onBeforeUnmount(() => {
-
-})
+onBeforeUnmount(() => {})
 </script>

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>

src/components/screens/MapEditor.vue

@@ -11,7 +11,7 @@
 <script setup lang="ts">
 import config from '@/application/config'
 import 'phaser'
-import type { AssetDataT } from '@/application/types'
+import type { TextureData } from '@/application/types'
 import MapEditor from '@/components/gameMaster/mapEditor/MapEditor.vue'
 import { loadTexture } from '@/composables/gameComposable'
 import { useGameStore } from '@/stores/gameStore'
@@ -72,7 +72,7 @@ const preloadScene = async (scene: Phaser.Scene) => {
    * Then load them into the scene.
    */
   scene.load.rexAwait(async function (successCallback: any) {
-    const tiles: { data: AssetDataT[] } = await fetch(config.server_endpoint + '/assets/list_tiles').then((response) => response.json())
+    const tiles: { data: TextureData[] } = await fetch(config.server_endpoint + '/assets/list_tiles').then((response) => response.json())
 
     for await (const tile of tiles?.data ?? []) {
       await loadTexture(scene, tile)