From 4d0c1ae77cfafd5bbce9b7218fc3f79c3c9b40dd Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Sat, 6 Jul 2024 19:56:04 +0200
Subject: [PATCH] Added loader logics for assets

---
 src/screens/Game.vue | 52 +++++++++++++++++++++++++++++++++++++-------
 1 file changed, 44 insertions(+), 8 deletions(-)

diff --git a/src/screens/Game.vue b/src/screens/Game.vue
index bd88bb8..ca3b1de 100644
--- a/src/screens/Game.vue
+++ b/src/screens/Game.vue
@@ -1,25 +1,25 @@
 <template>
   <div class="game-container">
-    <GmTools />
-    <GmPanel />
+    <GmTools v-if="isLoaded" />
+    <GmPanel v-if="isLoaded" />
 
     <Game class="game" :config="gameConfig" @create="createGame" v-if="!zoneEditorStore.active">
       <Scene name="main" @preload="preloadScene" @create="createScene">
-        <div class="top-ui">
+        <div class="top-ui" v-if="isLoaded">
           <Hud />
         </div>
-        <div class="center-ui">
+        <div class="center-ui"v-if="isLoaded">
           <World />
         </div>
-        <div class="bottom-ui">
+        <div class="bottom-ui" v-if="isLoaded">
           <Chat />
           <Menubar />
         </div>
       </Scene>
     </Game>
-    <Game class="game" :config="gameConfig" @create="createGame" v-else>
+    <Game class="game" :config="gameConfig" @create="createGame" v-if="zoneEditorStore.active">
       <Scene name="main" @preload="preloadScene" @create="createScene">
-        <ZoneEditor />
+        <ZoneEditor v-if="isLoaded" />
       </Scene>
     </Game>
   </div>
@@ -28,7 +28,7 @@
 <script setup lang="ts">
 import config from '@/config'
 import 'phaser'
-import { onUnmounted, toRaw, watch } from 'vue'
+import { onUnmounted, toRaw, watch, ref } from 'vue'
 import { Game, Scene } from 'phavuer'
 import { useSocketStore } from '@/stores/socket'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
@@ -44,6 +44,7 @@ import GmPanel from '@/components/utilities/GmPanel.vue'
 const socket = useSocketStore()
 const zoneEditorStore = useZoneEditorStore()
 const assetStore = useAssetStore()
+const isLoaded = ref(false)
 
 onUnmounted(() => {
   socket.disconnectSocket()
@@ -72,6 +73,41 @@ const createGame = (game: Phaser.Game) => {
 }
 
 const preloadScene = (scene: Phaser.Scene) => {
+  /**
+   * @TODO : Fix the progress bar so its centered correctly
+   */
+  const width = scene.cameras.main.width;
+  const height = scene.cameras.main.height;
+
+  const progressBox = scene.add.graphics();
+  const progressBar = scene.add.graphics();
+  progressBox.fillStyle(0x222222, 0.8);
+  progressBox.fillRect(width / 2 - 180, height / 2, 320, 50);
+
+  const loadingText = scene.make.text({
+    x: width / 2,
+    y: height / 2 - 50,
+    text: 'Loading...',
+    style: {
+      font: '20px monospace',
+      fill: '#ffffff'
+    }
+  });
+  loadingText.setOrigin(0.5, 0.5);
+
+  scene.load.on('progress', function (value: any) {
+    progressBar.clear();
+    progressBar.fillStyle(0x368f8b, 1);
+    progressBar.fillRect(width / 2 - 180 + 10, height / 2 + 10, 300 * value, 30);
+  });
+
+  scene.load.on('complete', function () {
+    progressBar.destroy();
+    progressBox.destroy();
+    loadingText.destroy();
+    isLoaded.value = true
+  });
+
   /**
    * Load the assets into the Phaser scene
    */