yeet

src/components/zone/Zone.vue

@@ -5,6 +5,7 @@
 </template>
 
 <script setup lang="ts">
+import { useAssetStore } from '@/stores/assets'
 import { useGameStore } from '@/stores/game'
 import { useZoneStore } from '@/stores/zone'
 import { onBeforeMount, onBeforeUnmount, ref, watch } from 'vue'
@@ -13,6 +14,7 @@ import Tiles from '@/components/zone/Tiles.vue'
 import Objects from '@/components/zone/Objects.vue'
 import Characters from '@/components/zone/Characters.vue'
 
+const assetStore = useAssetStore()
 const gameStore = useGameStore()
 const zoneStore = useZoneStore()
 
@@ -23,6 +25,13 @@ type zoneLoadData = {
   characters: CharacterT[]
 }
 
+/**
+ * Fetch assets from the server when a new zone is loaded
+ */
+gameStore.connection?.on('zone:character:load_assets', async (zoneId: number) => {
+  await assetStore.fetchAssetsByZoneId(zoneId)
+})
+
 gameStore.connection?.emit('zone:character:join', { zoneId: gameStore.character?.zoneId }, (response: zoneLoadData) => {
   zoneStore.setZone(response.zone)
   zoneStore.setCharacters(response.characters)

src/screens/Characters.vue

@@ -3,16 +3,9 @@
     <div class="absolute bg-[url('/assets/shapes/select-screen-bg-shape.svg')] bg-no-repeat bg-center w-full h-full"></div>
     <div class="ui-wrapper h-dvh flex flex-col justify-center items-center gap-20 px-10 sm:px-20">
       <div class="filler"></div>
-      <ConfirmationModal v-if="deletingCharacter != null" :confirm-function="delete_character.bind(this, deletingCharacter.id)" :cancel-function="(() => (deletingCharacter = null)).bind(this)" confirm-button-text="Delete">
-        <template #modalHeader>
-          <h3 class="m-0 font-medium">Deleting character</h3>
-        </template>
-        <template #modalBody>
-          You are about to delete <span class="font-extrabold">{{ deletingCharacter.name }}</span
-          >, are you sure about that?
-        </template>
-      </ConfirmationModal>
       <div class="flex gap-14 w-full max-h-[650px] overflow-x-auto" v-if="!isLoading">
+
+        <!-- CHARACTER LIST -->
         <div
           v-for="character in characters"
           :key="character.id"
@@ -34,7 +27,7 @@
           </button>
 
           <div class="sprite-container flex flex-col items-center m-auto">
-            <img class="drop-shadow-20" draggable="false" src="/assets/avatar/default/0.png" />
+<!--            <img class="drop-shadow-20" draggable="false" src="/assets/avatar/default/0.png" />-->
           </div>
           <span class="absolute bottom-5 w-full text-center translate-y-1/2 z-10 drop-shadow-text">Lvl. {{ character.level }}</span>
           <div class="selected-character group-[.active]:max-w-[170px] absolute max-w-0 w-4/6 h-[3px] bg-white rounded-[3px] left-1/2 -bottom-4 -translate-x-1/2 transition-all ease-in-out duration-300"></div>
@@ -68,10 +61,10 @@
           <img class="h-8 drop-shadow-20" draggable="false" src="/assets/icons/arrow.svg" alt="Play icon" />
         </button>
       </div>
-      <!-- @TODO , style this button properly -->
     </div>
   </div>
 
+  <!-- CREATE CHARACTER MODAL -->
   <Modal :isModalOpen="isModalOpen" @modal:close="isModalOpen = false">
     <template #modalHeader>
       <h3 class="m-0 font-medium">Create your character</h3>
@@ -90,6 +83,17 @@
       </div>
     </template>
   </Modal>
+
+  <!-- DELETE CHARACTER MODAL -->
+  <ConfirmationModal v-if="deletingCharacter != null" :confirm-function="delete_character.bind(this, deletingCharacter.id)" :cancel-function="(() => (deletingCharacter = null)).bind(this)" confirm-button-text="Delete">
+    <template #modalHeader>
+      <h3 class="m-0 font-medium">Deleting character</h3>
+    </template>
+    <template #modalBody>
+      You are about to delete <span class="font-extrabold">{{ deletingCharacter.name }}</span
+    >, are you sure about that?
+    </template>
+  </ConfirmationModal>
 </template>
 
 <script setup lang="ts">

src/screens/Game.vue

@@ -60,13 +60,6 @@ const isLoaded = ref(false)
 const assetsLoaded = ref(false)
 const { assets } = storeToRefs(assetStore)
 
-/**
- * Fetch assets from the server when a new zone is loaded
- */
-gameStore.connection?.on('zone:character:load_assets', async (zoneId: number) => {
-  await assetStore.fetchAssetsByZoneId(zoneId)
-})
-
 const gameConfig = {
   name: 'New Quest',
   width: window.innerWidth,
@@ -170,7 +163,6 @@ const createScene = (scene: Phaser.Scene) => {
     })
 
     scene.load.start()
-    // scene.load.once('complete', () => {})
   })
 }
 
@@ -180,8 +172,8 @@ const loadAssets = (scene: Phaser.Scene) => {
       if (!asset.frameWidth || !asset.frameHeight) {
         console.error('Frame width and height must be defined for spritesheets', asset)
       }
+      scene.load.spritesheet(asset.key, config.server_endpoint + asset.url, { frameWidth: asset.frameWidth, frameHeight: asset.frameHeight })
     } else {
-      scene.load.spritesheet(asset.key, config.server_endpoint + asset.url, { frameWidth: asset.frameWidth ?? 0, frameHeight: asset.frameHeight ?? 0 })
       scene.load.image(asset.key, config.server_endpoint + asset.url)
     }
   })