╭∩╮( •̀_•́ )╭∩╮

src/components/utilities/zoneEditor/ZoneEditor.vue

@@ -21,7 +21,7 @@ import config from '@/config'
 import Tileset = Phaser.Tilemaps.Tileset
 import TilemapLayer = Phaser.Tilemaps.TilemapLayer
 import { Container, TilemapLayer as TilemapLayerC, useScene, Image } from 'phavuer'
-import { onBeforeMount, onBeforeUnmount, onMounted } from 'vue'
+import { onBeforeMount, onBeforeUnmount, onMounted, toRaw } from 'vue'
 import Controls from '@/components/utilities/Controls.vue'
 import { useSocketStore } from '@/stores/socket'
 import Toolbar from '@/components/utilities/zoneEditor/Toolbar.vue'
@@ -51,15 +51,23 @@ const zoneData = new Phaser.Tilemaps.MapData({
 const zone = new Phaser.Tilemaps.Tilemap(scene, zoneData)
 
 let tilesetImages: Tileset[] = [];
-assetStore.assets.forEach((asset) => {
+
+toRaw(assetStore.assets).forEach((asset) => {
   if (asset.group !== 'tiles') {
     return
   }
-  tilesetImages.push(zone.addTilesetImage(asset.key) as Tileset)
+  console.log(asset)
+  // tilesetImages.push(zone.addTilesetImage(asset.key) as Tileset)
 })
 
-const tiles = zone.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y) as TilemapLayer
+/**
+ * @TODO BUG : in the map. somehow always the latest tileset is used instead of the correct one.
+ */
+const t1 = zone.addTilesetImage('tile_1.png') as Tileset
+const t2 = zone.addTilesetImage('tile_2.png') as Tileset
+const t3 = zone.addTilesetImage('tile_3.png') as Tileset
 
+const tiles = zone.createBlankLayer('tiles', [t1,t2,t3], 0, config.tile_size.y) as TilemapLayer
 const exampleTilesArray = Array.from({ length: zoneEditorStore.width }, () => Array.from({ length: zoneEditorStore.height }, () => 'tile_0.png'))
 
 onMounted(() => {})
@@ -74,13 +82,16 @@ const centerY = (zone.height * zone.tileHeight) / 2
 const centerX = (zone.width * zone.tileWidth) / 2
 scene.cameras.main.centerOn(centerX, centerY)
 
-function placeTile(x: number, y: number, tileType: string) {
-  const tileset = map.getTileset(tileType);
-  layer.putTileAt(tileset.firstgid, x, y);
+function placeTile(layer: TilemapLayer, x: number, y: number, tileType: string) {
+  let tilesett = zone.getTileset(tileType) as Tileset;
+  console.log(tilesett)
+  layer.putTileAt(tilesett.firstgid, x, y);
 }
 
+placeTile(tiles, 0, 0, 'tile_1.png')
+
 onBeforeMount(() => {
-  exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => tiles.putTileAt(tile, x, y)))
+  // exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(tiles, x, y, 'tile_2.png')))
   socket.connection.emit('gm:zone_editor:zone:request', { zoneId: socket.character.zoneId })
 })
 

src/screens/Game.vue

@@ -26,17 +26,17 @@
 <script setup lang="ts">
 import config from '@/config'
 import 'phaser'
+import { onUnmounted, toRaw } from 'vue'
 import { Game, Scene } from 'phavuer'
+import { useSocketStore } from '@/stores/socket'
+import { useZoneEditorStore } from '@/stores/zoneEditor'
+import { useAssetStore } from '@/stores/assets'
 import World from '@/components/World.vue'
 import Hud from '@/components/gui/Hud.vue'
 import Chat from '@/components/gui/Chat.vue'
 import Menubar from '@/components/gui/Menu.vue'
-import { onUnmounted } from 'vue'
 import GmTools from '@/components/utilities/GmTools.vue'
-import { useSocketStore } from '@/stores/socket'
-import { useZoneEditorStore } from '@/stores/zoneEditor'
 import ZoneEditor from '@/components/utilities/zoneEditor/ZoneEditor.vue'
-import { useAssetStore } from '@/stores/assets'
 import type { Asset } from '@/types'
 
 const socket = useSocketStore()
@@ -47,7 +47,7 @@ onUnmounted(() => {
   socket.disconnectSocket()
 })
 
-// on page close
+// On page close
 addEventListener('beforeunload', () => {
   socket.disconnectSocket()
 })
@@ -61,31 +61,27 @@ const gameConfig = {
 }
 
 const createGame = (game: Phaser.Game) => {
+  /**
+   * Resize the game when the window is resized
+   */
   addEventListener('resize', () => {
     game.scale.resize(window.innerWidth, window.innerHeight)
   })
 }
 
 const preloadScene = (scene: Phaser.Scene) => {
-
-
-  socket.connection.emit('assets:download', {}, (response: Asset[]) => {
-    console.log(response);
-    response.forEach((asset) => {
-      assetStore.addAsset(asset)
-    })
-  })
-
-  assetStore.assets.forEach((asset) => {
+  /**
+   * Load the assets into the Phaser scene
+   */
+  toRaw(assetStore.assets).forEach((asset) => {
     if (asset.type === 'link') {
-      scene.load.image(asset.key, asset.value)
+      scene.load.image(asset.key, config.server_endpoint + '/assets' + asset.value)
     }
     if (asset.type === 'base64') {
       scene.textures.addBase64(asset.key, asset.value)
     }
   })
 
-  scene.load.image('tiles', '/assets/zone/tiles.png')
   scene.load.image('walls', '/assets/zone/walls.png')
   scene.load.image('wall1', '/assets/zone/wall1.png')
   scene.load.image('wall2', '/assets/zone/wall2.png')

src/screens/Login.vue

@@ -31,6 +31,7 @@ import { onMounted, ref } from 'vue'
 import { login, register } from '@/services/authentication'
 import { useNotificationStore } from '@/stores/notifications'
 import { useSocketStore } from '@/stores/socket'
+import {useAssetStore} from '@/stores/assets'
 
 const bgm = ref('bgm')
 if (bgm.value.paused) {
@@ -40,11 +41,17 @@ if (bgm.value.paused) {
 
 const socket = useSocketStore()
 const notifications = useNotificationStore()
+const assetStore = useAssetStore()
 const username = ref('')
 const password = ref('')
 
 // automatic login because of development
 onMounted(async () => {
+  /**
+   * Fetch assets from the server
+   */
+  assetStore.fetchAssets();
+
   const response = await login('ethereal', 'kanker123')
 
   if (response.success === undefined) {

src/stores/assets.ts

@@ -1,5 +1,6 @@
 import { defineStore } from 'pinia'
 import { type Asset } from '@/types'
+import config from '@/config'
 
 export const useAssetStore = defineStore('assets', {
   state: () => ({
@@ -11,6 +12,16 @@ export const useAssetStore = defineStore('assets', {
     },
     addAsset(asset: Asset) {
       this.assets.push(asset)
+    },
+    fetchAssets() {
+      fetch(config.server_endpoint + '/assets')
+        .then((response) => response.json())
+        .then((assets) => {
+          this.setAssets(assets)
+        })
+        .catch((error) => {
+          console.error('Error fetching assets:', error)
+        })
     }
   }
 })