😂🔫

src/components/utilities/zoneEditor/ZoneEditor.vue

@@ -1,7 +1,7 @@
 <template>
-  <TilemapLayerC :tilemap="tileTilemap" :tileset="exampleTilesArray" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" />
+  <TilemapLayerC :tilemap="zone" :tileset="exampleTilesArray" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" />
 
-  <Controls :layer="exampleTiles" />
+  <Controls :layer="tiles" />
   <!--  @TODO: inside asset manager we need to be able to set the originX and originY per individial asset -->
   <Container>
     <Image :texture="'wall1'" :x="pos.position_x" :y="pos.position_y" :originY="1.13" :originX="1" />
@@ -9,7 +9,7 @@
     <Image :texture="'wall2'" :x="pos3.position_x" :y="pos3.position_y" :originY="1.255" :originX="1" />
   </Container>
 
-  <Toolbar :layer="exampleTiles" @eraser="eraser" @pencil="pencil" @save="save" />
+  <Toolbar :layer="tiles" @eraser="eraser" @pencil="pencil" @save="save" />
   <Tiles v-if="(zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'tile'" />
   <Decorations v-if="(zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'decoration'" />
   <ZoneSettings v-if="zoneEditorStore.isSettingsModalShown" />
@@ -31,14 +31,15 @@ import ZoneSettings from '@/components/utilities/zoneEditor/ZoneSettings.vue'
 import Decorations from '@/components/utilities/zoneEditor/Decorations.vue'
 import { tileToWorldXY } from '@/services/zone'
 import GmPanel from '@/components/utilities/GmPanel.vue'
+import { useAssetStore } from '@/stores/assets'
 
-// Phavuer logic
-let scene = useScene()
+const scene = useScene()
 const socket = useSocketStore()
 const zoneEditorStore = useZoneEditorStore()
+const assetStore = useAssetStore()
 
 // Tile tilemap
-const tileMapData = new Phaser.Tilemaps.MapData({
+const zoneData = new Phaser.Tilemaps.MapData({
   width: zoneEditorStore.width,
   height: zoneEditorStore.height,
   tileWidth: config.tile_size.x,
@@ -46,25 +47,40 @@ const tileMapData = new Phaser.Tilemaps.MapData({
   orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
   format: Phaser.Tilemaps.Formats.ARRAY_2D
 })
-let tileTilemap = new Phaser.Tilemaps.Tilemap(scene, tileMapData)
-let tilesImg = tileTilemap.addTilesetImage('default', 'tiles')
-let exampleTiles = tileTilemap.createBlankLayer('exampleTiles', tilesImg as Tileset, 0, config.tile_size.y) as TilemapLayer
 
-const exampleTilesArray = Array.from({ length: zoneEditorStore.width }, () => Array.from({ length: zoneEditorStore.height }, () => 1))
+const zone = new Phaser.Tilemaps.Tilemap(scene, zoneData)
+
+let tilesetImages: Tileset[] = [];
+assetStore.assets.forEach((asset) => {
+  if (asset.group !== 'tiles') {
+    return
+  }
+  tilesetImages.push(zone.addTilesetImage(asset.key) as Tileset)
+})
+
+const tiles = zone.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y) as TilemapLayer
+
+const exampleTilesArray = Array.from({ length: zoneEditorStore.width }, () => Array.from({ length: zoneEditorStore.height }, () => 'tile_0.png'))
 
 onMounted(() => {})
-const pos = tileToWorldXY(exampleTiles, 1, 1)
-const pos2 = tileToWorldXY(exampleTiles, 1, 2)
-const pos3 = tileToWorldXY(exampleTiles, 2, 1)
+const pos = tileToWorldXY(tiles, 1, 1)
+const pos2 = tileToWorldXY(tiles, 1, 2)
+const pos3 = tileToWorldXY(tiles, 2, 1)
 console.log(pos)
+
+
 // center camera
-const centerY = (tileTilemap.height * tileTilemap.tileHeight) / 2
-const centerX = (tileTilemap.width * tileTilemap.tileWidth) / 2
+const centerY = (zone.height * zone.tileHeight) / 2
+const centerX = (zone.width * zone.tileWidth) / 2
 scene.cameras.main.centerOn(centerX, centerY)
 
-onBeforeMount(() => {
-  exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => exampleTiles.putTileAt(tile, x, y)))
+function placeTile(x: number, y: number, tileType: string) {
+  const tileset = map.getTileset(tileType);
+  layer.putTileAt(tileset.firstgid, x, y);
+}
 
+onBeforeMount(() => {
+  exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => tiles.putTileAt(tile, x, y)))
   socket.connection.emit('gm:zone_editor:zone:request', { zoneId: socket.character.zoneId })
 })
 

src/screens/Game.vue

@@ -36,9 +36,12 @@ 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()
 const zoneEditorStore = useZoneEditorStore()
+const assetStore = useAssetStore()
 
 onUnmounted(() => {
   socket.disconnectSocket()
@@ -64,23 +67,24 @@ const createGame = (game: Phaser.Game) => {
 }
 
 const preloadScene = (scene: Phaser.Scene) => {
-  type Asset = {
-    key: string
-    value: string
-    type: 'base64' | 'link'
-  }
+
 
   socket.connection.emit('assets:download', {}, (response: Asset[]) => {
     console.log(response);
     response.forEach((asset) => {
-      if (asset.type === 'base64') {
-        scene.textures.addBase64(asset.key, asset.value)
-      }
-      if (asset.type === 'link') {
-        scene.load.image(asset.key, config.server_endpoint + '/assets' + asset.value)
-      }
+      assetStore.addAsset(asset)
     })
   })
+
+  assetStore.assets.forEach((asset) => {
+    if (asset.type === 'link') {
+      scene.load.image(asset.key, 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')

src/stores/assets.ts

@@ -0,0 +1,16 @@
+import { defineStore } from 'pinia'
+import { type Asset } from '@/types'
+
+export const useAssetStore = defineStore('assets', {
+  state: () => ({
+    assets: [] as Asset[]
+  }),
+  actions: {
+    setAssets(assets: Asset[]) {
+      this.assets = assets
+    },
+    addAsset(asset: Asset) {
+      this.assets.push(asset)
+    }
+  }
+})

src/types.ts

@@ -64,3 +64,10 @@ export type Chat = {
   message: string
   createdAt: Date
 }
+
+export type Asset = {
+  key: string
+  value: string
+  group: 'tiles' | 'objects' | 'sound' | 'music' | 'ui' | 'font' | 'other'
+  type: 'base64' | 'link'
+}