Load tiles before showing map editor UI

src/components/game/map/Effects.vue

@@ -4,8 +4,8 @@
 
 <script setup lang="ts">
 import type { Map, WeatherState } from '@/application/types'
-import { useGameStore } from '@/stores/gameStore'
 import { MapStorage } from '@/storage/storages'
+import { useGameStore } from '@/stores/gameStore'
 import { useMapStore } from '@/stores/mapStore'
 import { Scene } from 'phavuer'
 import { onBeforeUnmount, onMounted, ref, watch } from 'vue'

src/components/gameMaster/mapEditor/mapPartials/MapTiles.vue

@@ -216,10 +216,6 @@ onMounted(async () => {
   scene.input.on(Phaser.Input.Events.POINTER_DOWN, tilePicker)
 })
 
-onBeforeMount(async () => {
-  await loadAllTilesIntoScene(scene)
-})
-
 onUnmounted(() => {
   scene.input.off(Phaser.Input.Events.POINTER_MOVE, pencil)
   scene.input.off(Phaser.Input.Events.POINTER_MOVE, eraser)

src/components/screens/Game.vue

@@ -20,7 +20,6 @@
 <script setup lang="ts">
 import config from '@/application/config'
 import 'phaser'
-import Effects from '@/components/game/map/Effects.vue'
 import CharacterProfile from '@/components/game/gui/CharacterProfile.vue'
 import Chat from '@/components/game/gui/Chat.vue'
 import Clock from '@/components/game/gui/Clock.vue'
@@ -28,6 +27,7 @@ import ExpBar from '@/components/game/gui/ExpBar.vue'
 import Hotkeys from '@/components/game/gui/Hotkeys.vue'
 import Hud from '@/components/game/gui/Hud.vue'
 import Menu from '@/components/game/gui/Menu.vue'
+import Effects from '@/components/game/map/Effects.vue'
 import Map from '@/components/game/map/Map.vue'
 import { useGameStore } from '@/stores/gameStore'
 import { Game, Scene } from 'phavuer'

src/components/screens/MapEditor.vue

@@ -2,7 +2,8 @@
   <div class="flex justify-center items-center h-dvh relative">
     <Game :config="gameConfig" @create="createGame">
       <Scene name="main" @preload="preloadScene" @create="createScene">
-        <MapEditor :key="JSON.stringify(`${mapEditorStore.map?.id}_${mapEditorStore.map?.createdAt}_${mapEditorStore.map?.updatedAt}`)" />
+        <MapEditor :key="JSON.stringify(`${mapEditorStore.map?.id}_${mapEditorStore.map?.createdAt}_${mapEditorStore.map?.updatedAt}`)" v-if="isLoaded" />
+        <div v-else class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-white text-2xl">Loading...</div>
       </Scene>
     </Game>
   </div>
@@ -12,13 +13,17 @@
 import config from '@/application/config'
 import 'phaser'
 import MapEditor from '@/components/gameMaster/mapEditor/MapEditor.vue'
+import { loadAllTilesIntoScene } from '@/composables/mapComposable'
 import { useGameStore } from '@/stores/gameStore'
 import { useMapEditorStore } from '@/stores/mapEditorStore'
 import { Game, Scene } from 'phavuer'
+import { ref } from 'vue'
 
 const gameStore = useGameStore()
 const mapEditorStore = useMapEditorStore()
 
+const isLoaded = ref(false)
+
 const gameConfig = {
   name: config.name,
   width: window.innerWidth,
@@ -49,6 +54,15 @@ const preloadScene = async (scene: Phaser.Scene) => {
   scene.load.image('TELEPORT', '/assets/map/tp_tile.png')
   scene.load.image('blank_tile', '/assets/map/blank_tile.png')
   scene.load.image('waypoint', '/assets/waypoint.png')
+
+  await loadAllTilesIntoScene(scene)
+
+  await new Promise<void>((resolve) => {
+    scene.load.on(Phaser.Loader.Events.COMPLETE, () => {
+      resolve()
+    })
+    isLoaded.value = true
+  })
 }
 
 const createScene = async (scene: Phaser.Scene) => {}

src/composables/game/scene/loaderComposable.ts

@@ -1,34 +0,0 @@
-export function createSceneLoader(scene: Phaser.Scene) {
-  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',
-      // @ts-ignore
-      fill: '#ffffff'
-    }
-  })
-  loadingText.setOrigin(0.5, 0.5)
-
-  scene.load.on(Phaser.Loader.Events.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(Phaser.Loader.Events.COMPLETE, function () {
-    progressBar.destroy()
-    progressBox.destroy()
-    loadingText.destroy()
-    return true
-  })
-}