From 6bc0c7ab3f1173061d1213d5cb91211eeb902c5a Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Mon, 16 Sep 2024 20:51:48 +0200
Subject: [PATCH] Forgot to push

---
 src/screens/Game.vue | 18 ++++++++++++------
 src/stores/assets.ts | 12 ++++++++++++
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/screens/Game.vue b/src/screens/Game.vue
index 858b435..ee317fc 100644
--- a/src/screens/Game.vue
+++ b/src/screens/Game.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex justify-center items-center h-dvh relative">
+  <div v-if="assetsLoaded" class="flex justify-center items-center h-dvh relative">
     <GmTools v-if="isLoaded && gameStore.character?.role === 'gm'" />
     <GmPanel v-if="isLoaded && gameStore.character?.role === 'gm'" />
     <Inventory />
@@ -37,7 +37,7 @@
 <script setup lang="ts">
 import config from '@/config'
 import 'phaser'
-import { watch, ref, onBeforeUnmount } from 'vue'
+import { watch, ref, onBeforeUnmount, onMounted } from 'vue'
 import { storeToRefs } from 'pinia'
 import { Game, Scene } from 'phavuer'
 import { useGameStore } from '@/stores/game'
@@ -56,6 +56,7 @@ const gameStore = useGameStore()
 const zoneEditorStore = useZoneEditorStore()
 const assetStore = useAssetStore()
 const isLoaded = ref(false)
+const assetsLoaded = ref(false)
 const { assets } = storeToRefs(assetStore)
 
 const gameConfig = {
@@ -82,6 +83,11 @@ const createGame = (game: Phaser.Game) => {
   })
 }
 
+onMounted(async () => {
+  await assetStore.fetchAssetsByZoneId(gameStore.character?.zoneId);
+  assetsLoaded.value = true;
+})
+
 const preloadScene = (scene: Phaser.Scene) => {
   /**
    * Create loading bar
@@ -158,11 +164,11 @@ const createScene = (scene: Phaser.Scene) => {
    * Watch for changes in assets and reload them
    */
   watch(assets, (newAssets) => {
-    newAssets.forEach((asset) => {
-      scene.load.image(asset.key, config.server_endpoint + asset.url)
-    })
+    // newAssets.forEach((asset) => {
+    //   scene.load.image(asset.key, config.server_endpoint + asset.url)
+    // })
 
-    scene.load.start()
+    // scene.load.start()
     // scene.load.once('complete', () => {})
   })
 }
diff --git a/src/stores/assets.ts b/src/stores/assets.ts
index 287c943..a37bd9e 100644
--- a/src/stores/assets.ts
+++ b/src/stores/assets.ts
@@ -21,6 +21,18 @@ export const useAssetStore = defineStore('assets', {
           console.error('Error fetching assets:', error)
           return false
         })
+    },
+    fetchAssetsByZoneId(zoneId: number) {
+      return fetch(config.server_endpoint + '/assets/' + zoneId)
+        .then((response) => response.json())
+        .then((assets) => {
+          this.setAssets(assets)
+          return true
+        })
+        .catch((error) => {
+          console.error('Error fetching assets:', error)
+          return false
+        })
     }
   }
 })