Clean up

src/App.vue

@@ -18,7 +18,7 @@ import Debug from '@/components/utilities/Debug.vue'
 import Notifications from '@/components/utilities/Notifications.vue'
 import { useGameStore } from '@/stores/gameStore'
 import { useMapEditorStore } from '@/stores/mapEditorStore'
-import { computed, onMounted, onUnmounted, watch } from 'vue'
+import { computed, watch } from 'vue'
 
 const gameStore = useGameStore()
 const mapEditorStore = useMapEditorStore()
@@ -57,7 +57,9 @@ addEventListener('keydown', (event) => {
   if (gameStore.character?.role !== 'gm') return // Only allow toggling the gm panel if the character is a gm
 
   // Check if no input is active or focus is on an input
-  if (event.repeat || event.isComposing || event.defaultPrevented || document.activeElement?.tagName.toUpperCase() === 'INPUT' || document.activeElement?.tagName.toUpperCase() === 'TEXTAREA') return
+  if (event.repeat || event.isComposing || event.defaultPrevented || document.activeElement?.tagName.toUpperCase() === 'INPUT' || document.activeElement?.tagName.toUpperCase() === 'TEXTAREA') {
+    return
+  }
 
   if (event.key === 'G') {
     gameStore.toggleGmPanel()

src/components/game/character/Character.vue

@@ -150,6 +150,10 @@ onMounted(async () => {
   const characterTypeStorage = new CharacterTypeStorage()
 
   const spriteId = await characterTypeStorage.getSpriteId(props.mapCharacter.character.characterType!)
+  if (!spriteId) return
+
+  charSpriteId.value = spriteId
+
   await loadSpriteTextures(scene, spriteId)
 
   charSprite.value!.setTexture(charTexture.value)

src/components/game/map/Map.vue

@@ -18,14 +18,6 @@ const mapStore = useMapStore()
 
 const tileMap = shallowRef<Phaser.Tilemaps.Tilemap>()
 
-onUnmounted(() => {
-  mapStore.reset()
-  gameStore.connection?.off('map:character:teleport')
-  gameStore.connection?.off('map:character:join')
-  gameStore.connection?.off('map:character:leave')
-  gameStore.connection?.off('map:character:move')
-})
-
 // Event listeners
 gameStore.connection?.on('map:character:teleport', async (data: mapLoadData) => {
   mapStore.setMapId(data.mapId)
@@ -43,4 +35,12 @@ gameStore.connection?.on('map:character:leave', (characterId: UUID) => {
 gameStore.connection?.on('map:character:move', (data: { characterId: UUID; positionX: number; positionY: number; rotation: number; isMoving: boolean }) => {
   mapStore.updateCharacterPosition(data)
 })
+
+onUnmounted(() => {
+  mapStore.reset()
+  gameStore.connection?.off('map:character:teleport')
+  gameStore.connection?.off('map:character:join')
+  gameStore.connection?.off('map:character:leave')
+  gameStore.connection?.off('map:character:move')
+})
 </script>

src/components/screens/Game.vue

@@ -24,7 +24,6 @@ import Effects from '@/components/Effects.vue'
 import Map from '@/components/game/map/Map.vue'
 import CharacterProfile from '@/components/gui/CharacterProfile.vue'
 import Chat from '@/components/gui/Chat.vue'
-// import Minimap from '@/components/gui/Minimap.vue'
 import Clock from '@/components/gui/Clock.vue'
 import ExpBar from '@/components/gui/ExpBar.vue'
 import Hotkeys from '@/components/gui/Hotkeys.vue'
@@ -42,22 +41,11 @@ const gameConfig = {
   width: window.innerWidth,
   height: window.innerHeight,
   type: Phaser.AUTO, // AUTO, CANVAS, WEBGL, HEADLESS
-  resolution: 5,
+  resolution: 5
-  plugins: {
-    global: [
-      {
-        key: 'rexAwaitLoader',
-        plugin: AwaitLoaderPlugin,
-        start: true
-      }
-    ]
-  }
 }
 
 const createGame = (game: Phaser.Game) => {
-  /**
+  // Resize the game when the window is resized
-   * Resize the game when the window is resized
-   */
   addEventListener('resize', () => {
     game.scale.resize(window.innerWidth, window.innerHeight)
   })
@@ -73,9 +61,7 @@ const createGame = (game: Phaser.Game) => {
 }
 
 function preloadScene(scene: Phaser.Scene) {
-  /**
+  // Load the base assets into the Phaser scene
-   * Load the base assets into the Phaser scene
-   */
   scene.load.image('blank_tile', '/assets/map/blank_tile.png')
   scene.load.image('waypoint', '/assets/waypoint.png')
 }

src/components/screens/MapEditor.vue

@@ -2,7 +2,7 @@
   <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}`)" />
       </Scene>
     </Game>
   </div>
@@ -11,12 +11,9 @@
 <script setup lang="ts">
 import config from '@/application/config'
 import 'phaser'
-import type { TextureData } from '@/application/types'
 import MapEditor from '@/components/gameMaster/mapEditor/MapEditor.vue'
-import { loadTexture } from '@/composables/gameComposable'
 import { useGameStore } from '@/stores/gameStore'
 import { useMapEditorStore } from '@/stores/mapEditorStore'
-import AwaitLoaderPlugin from 'phaser3-rex-plugins/plugins/awaitloader-plugin'
 import { Game, Scene } from 'phavuer'
 
 const gameStore = useGameStore()
@@ -27,22 +24,11 @@ const gameConfig = {
   width: window.innerWidth,
   height: window.innerHeight,
   type: Phaser.AUTO, // AUTO, CANVAS, WEBGL, HEADLESS
-  resolution: 5,
+  resolution: 5
-  plugins: {
-    global: [
-      {
-        key: 'rexAwaitLoader',
-        plugin: AwaitLoaderPlugin,
-        start: true
-      }
-    ]
-  }
 }
 
 const createGame = (game: Phaser.Game) => {
-  /**
+  // Resize the game when the window is resized
-   * Resize the game when the window is resized
-   */
   addEventListener('resize', () => {
     game.scale.resize(window.innerWidth, window.innerHeight)
   })
@@ -58,28 +44,11 @@ const createGame = (game: Phaser.Game) => {
 }
 
 const preloadScene = async (scene: Phaser.Scene) => {
-  /**
+  // Load the base assets into the Phaser scene
-   * Load the base assets into the Phaser scene
-   */
   scene.load.image('BLOCK', '/assets/map/bt_tile.png')
   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')
-
-  /**
-   * Because Phaser can't load tiles after the scene with map in it is created,
-   * we need to load and cache all the tiles first.
-   * Then load them into the scene.
-   */
-  scene.load.rexAwait(async function (successCallback: any) {
-    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)
-    }
-
-    successCallback()
-  })
 }
 
 const createScene = async (scene: Phaser.Scene) => {}

src/composables/gameComposable.ts

@@ -60,7 +60,6 @@ export async function loadTexture(scene: Phaser.Scene, textureData: TextureData)
 export async function loadSpriteTextures(scene: Phaser.Scene, sprite_id: string) {
   if (!sprite_id) return
 
-  console.log(sprite_id)
   // @TODO: Fix this
   const spriteStorage = new SpriteStorage()
   const sprite = await spriteStorage.get(sprite_id)
@@ -71,7 +70,6 @@ export async function loadSpriteTextures(scene: Phaser.Scene, sprite_id: string)
   }
 
   for await (const sprite_action of sprite.spriteActions) {
-    console.log('Loading sprite action:', sprite.id + '-' + sprite_action.action)
     const key = sprite.id + '-' + sprite_action.action
     await loadTexture(scene, {
       key,