More work on wall positioning, started working on GM asset manager

src/components/utilities/AssetManager/AssetManager.vue

@@ -0,0 +1,18 @@
+<template>
+  <Modal :isModalOpen="true" :modal-width="800" :modal-height="560">
+    <template #modalHeader>
+      <h3 class="modal-title">Asset manager</h3>
+    </template>
+    <template #modalBody>
+
+    </template>
+  </Modal>
+</template>
+
+<script setup lang="ts">
+import Modal from '@/components/utilities/Modal.vue'
+</script>
+
+<style lang="scss">
+
+</style>

src/components/utilities/zoneEditor/Decorations.vue

@@ -1,13 +1,19 @@
 <template>
   <Teleport to="body">
-    <Modal v-if="isModalOpen" :isModalOpen="true" :closable="false" :modal-width="645" :modal-height="260">
+    <Modal v-if="isModalOpen" :isModalOpen="true" :closable="false" :modal-width="745" :modal-height="460">
       <template #modalHeader>
-        <h3 class="modal-title">Walls</h3>
+        <h3 class="modal-title">Decorations</h3>
       </template>
       <template #modalBody>
-        <canvas ref="canvas" :width="wallWidth" :height="wallHeight" style="display: none"></canvas>
-        <div class="walls">
-          <img v-for="(wall, index) in walls" :key="index" :src="wall" alt="Wall" @click="zoneEditorStore.setSelectedWall(index)" :class="{ selected: zoneEditorStore.selectedWall && zoneEditorStore.selectedWall === index }" />
+        <div class="buttons">
+          <button class="btn-cyan" @click="zoneEditorStore.setDrawMode('tile')">Walls</button>
+          <button class="btn-cyan" @click="zoneEditorStore.setDrawMode('tile')">Decorations</button>
+          <button class="btn-cyan" @click="zoneEditorStore.setDrawMode('tile')">NPC</button>
+        </div>
+        <hr>
+        <canvas ref="canvas" :width="decorationWidth" :height="decorationHeight" style="display: none"></canvas>
+        <div class="decorations">
+          <img v-for="(decoration, index) in decorations" :key="index" :src="decoration" alt="Decoration" @click="zoneEditorStore.setSelectedDecoration(index)" :class="{ selected: zoneEditorStore.selectedDecoration && zoneEditorStore.selectedDecoration === index }" />
         </div>
       </template>
     </Modal>
@@ -20,10 +26,10 @@ import config from '@/config'
 import Modal from '@/components/utilities/Modal.vue'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
 
-const wallWidth = config.wall_size.x
-const wallHeight = config.wall_size.y
-const walls = ref<number[][]>([])
-const selectedWall = ref<number | null>(null)
+const decorationWidth = config.wall_size.x
+const decorationHeight = config.wall_size.y
+const decorations = ref<number[][]>([])
+const selectedDecoration = ref<number | null>(null)
 const canvas = ref<HTMLCanvasElement | null>(null)
 const isModalOpen = ref(false)
 const zoneEditorStore = useZoneEditorStore()
@@ -39,7 +45,7 @@ const loadImage = (src: string): Promise<HTMLImageElement> => {
   })
 }
 
-const splitWalls = (img: HTMLImageElement) => {
+const splitDecorations = (img: HTMLImageElement) => {
   if (!canvas.value) {
     console.error('Canvas not found')
     return
@@ -50,48 +56,48 @@ const splitWalls = (img: HTMLImageElement) => {
     return
   }
 
-  const wallsetWidth = img.width
-  const wallsetHeight = img.height
-  const columns = Math.floor(wallsetWidth / wallWidth)
-  const rows = Math.floor(wallsetHeight / wallHeight)
+  const decorationsetWidth = img.width
+  const decorationsetHeight = img.height
+  const columns = Math.floor(decorationsetWidth / decorationWidth)
+  const rows = Math.floor(decorationsetHeight / decorationHeight)
 
-  walls.value = []
-  selectedWall.value = null
+  decorations.value = []
+  selectedDecoration.value = null
 
   for (let row = 0; row < rows; row++) {
     for (let col = 0; col < columns; col++) {
-      const x = col * wallWidth
-      const y = row * wallHeight
+      const x = col * decorationWidth
+      const y = row * decorationHeight
 
-      ctx.clearRect(0, 0, wallWidth, wallHeight)
-      ctx.drawImage(img, x, y, wallWidth, wallHeight, 0, 0, wallWidth, wallHeight)
+      ctx.clearRect(0, 0, decorationWidth, decorationHeight)
+      ctx.drawImage(img, x, y, decorationWidth, decorationHeight, 0, 0, decorationWidth, decorationHeight)
 
-      const wallDataURL = canvas.value.toDataURL()
-      walls.value.push(wallDataURL)
+      const decorationDataURL = canvas.value.toDataURL()
+      decorations.value.push(decorationDataURL)
     }
   }
 }
 
-const selectWall = (index: number) => {
-  selectedWall.value = index
+const selectDecoration = (index: number) => {
+  selectedDecoration.value = index
 }
 
 onMounted(async () => {
   isModalOpen.value = true
   const img = await loadImage(imagePath)
   await nextTick()
-  splitWalls(img)
+  splitDecorations(img)
 })
 </script>
 
 <style lang="scss">
-.walls {
+.decorations {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
 }
 
-.walls img {
+.decorations img {
   width: 30px;
   height: 130px;
   cursor: pointer;
@@ -99,7 +105,12 @@ onMounted(async () => {
   transition: border 0.3s ease;
 }
 
-.walls img.selected {
+.buttons {
+  display: flex;
+  gap: 10px;
+}
+
+.decorations img.selected {
   border: 2px solid #ff0000;
 }
 </style>

src/components/utilities/zoneEditor/Toolbar.vue

@@ -17,7 +17,6 @@
             </div>
             <div class="options" v-show="selectPencilOpen && zoneEditorStore.tool === 'pencil'">
               <span class="option" @click="setDrawMode('tile')">Tile</span>
-              <span class="option" @click="setDrawMode('wall')">Wall</span>
               <span class="option" @click="setDrawMode('decoration')">Decoration</span>
               <span class="option" @click="setDrawMode('teleport')">Teleport</span>
               <span class="option" @click="setDrawMode('blocking tile')">Blocking tile</span>
@@ -36,7 +35,6 @@
             </div>
             <div class="options" v-show="selectEraserOpen">
               <span class="option" @click="setDrawMode('tile')">Tile</span>
-              <span class="option" @click="setDrawMode('wall')">Wall</span>
               <span class="option" @click="setDrawMode('decoration')">Decoration</span>
               <span class="option" @click="setDrawMode('teleport')">Teleport</span>
               <span class="option" @click="setDrawMode('blocking tile')">Blocking tile</span>

src/components/utilities/zoneEditor/Walls.vue

@@ -1,105 +0,0 @@
-<template>
-  <Teleport to="body">
-    <Modal v-if="isModalOpen" :isModalOpen="true" :closable="false" :modal-width="645" :modal-height="260">
-      <template #modalHeader>
-        <h3 class="modal-title">Walls</h3>
-      </template>
-      <template #modalBody>
-        <canvas ref="canvas" :width="wallWidth" :height="wallHeight" style="display: none"></canvas>
-        <div class="walls">
-          <img v-for="(wall, index) in walls" :key="index" :src="wall" alt="Wall" @click="zoneEditorStore.setSelectedWall(index)" :class="{ selected: zoneEditorStore.selectedWall && zoneEditorStore.selectedWall === index }" />
-        </div>
-      </template>
-    </Modal>
-  </Teleport>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted, nextTick } from 'vue'
-import config from '@/config'
-import Modal from '@/components/utilities/Modal.vue'
-import { useZoneEditorStore } from '@/stores/zoneEditor'
-
-const wallWidth = config.wall_size.x
-const wallHeight = config.wall_size.y
-const walls = ref<number[][]>([])
-const selectedWall = ref<number | null>(null)
-const canvas = ref<HTMLCanvasElement | null>(null)
-const isModalOpen = ref(false)
-const zoneEditorStore = useZoneEditorStore()
-
-// Hardcoded image path
-const imagePath = '/assets/zone/walls.png'
-
-const loadImage = (src: string): Promise<HTMLImageElement> => {
-  return new Promise((resolve) => {
-    const img = new Image()
-    img.onload = () => resolve(img)
-    img.src = src
-  })
-}
-
-const splitWalls = (img: HTMLImageElement) => {
-  if (!canvas.value) {
-    console.error('Canvas not found')
-    return
-  }
-  const ctx = canvas.value.getContext('2d')
-  if (!ctx) {
-    console.error('Failed to get canvas context')
-    return
-  }
-
-  const wallsetWidth = img.width
-  const wallsetHeight = img.height
-  const columns = Math.floor(wallsetWidth / wallWidth)
-  const rows = Math.floor(wallsetHeight / wallHeight)
-
-  walls.value = []
-  selectedWall.value = null
-
-  for (let row = 0; row < rows; row++) {
-    for (let col = 0; col < columns; col++) {
-      const x = col * wallWidth
-      const y = row * wallHeight
-
-      ctx.clearRect(0, 0, wallWidth, wallHeight)
-      ctx.drawImage(img, x, y, wallWidth, wallHeight, 0, 0, wallWidth, wallHeight)
-
-      const wallDataURL = canvas.value.toDataURL()
-      walls.value.push(wallDataURL)
-    }
-  }
-}
-
-const selectWall = (index: number) => {
-  selectedWall.value = index
-}
-
-onMounted(async () => {
-  isModalOpen.value = true
-  const img = await loadImage(imagePath)
-  await nextTick()
-  splitWalls(img)
-})
-</script>
-
-<style lang="scss">
-.walls {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-}
-
-.walls img {
-  width: 30px;
-  height: 130px;
-  cursor: pointer;
-  border: 2px solid transparent;
-  transition: border 0.3s ease;
-}
-
-.walls img.selected {
-  border: 2px solid #ff0000;
-}
-</style>

src/components/utilities/zoneEditor/ZoneEditor.vue

@@ -1,34 +1,44 @@
 <template>
   <TilemapLayerC :tilemap="tileTilemap" :tileset="exampleTilesArray" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" />
-  <TilemapLayerC :tilemap="wallTilemap" :tileset="[]" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" />
+
   <Controls :layer="exampleTiles" />
+<!--  @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"  />
+    <Image :texture="'wall1'" :x="pos2.position_x" :y="pos2.position_y" :originY="1.13" :originX="1"  />
+    <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" />
   <Tiles v-if="(zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'tile'" />
-  <Walls v-if="(zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'wall'" />
+  <Decorations v-if="(zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'decoration'" />
   <ZoneSettings v-if="zoneEditorStore.isSettingsModalShown" />
+  <AssetManager />
 </template>
 
 <script setup lang="ts">
 import config from '@/config'
 import Tileset = Phaser.Tilemaps.Tileset
 import TilemapLayer = Phaser.Tilemaps.TilemapLayer
-import { Container, TilemapLayer as TilemapLayerC, useScene } from 'phavuer'
-import { onBeforeMount, onBeforeUnmount, ref, type Ref, watch } from 'vue'
+import { Container, TilemapLayer as TilemapLayerC, useScene, Image } from 'phavuer'
+import { onBeforeMount, onBeforeUnmount, onMounted, ref, type Ref, watch } from 'vue'
 import Controls from '@/components/utilities/Controls.vue'
 import { useSocketStore } from '@/stores/socket'
 import Toolbar from '@/components/utilities/zoneEditor/Toolbar.vue'
 import Tiles from '@/components/utilities/zoneEditor/Tiles.vue'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
 import ZoneSettings from '@/components/utilities/zoneEditor/ZoneSettings.vue'
-import Walls from '@/components/utilities/zoneEditor/Walls.vue'
-import { generateTilemap } from '@/services/zone'
+import Decorations from '@/components/utilities/zoneEditor/Decorations.vue'
+import { generateTilemap, tileToWorldX, tileToWorldXY, tileToWorldY } from '@/services/zone'
 import type { Zone } from '@/types'
+import AssetManager from '@/components/utilities/AssetManager/AssetManager.vue'
 
 // Phavuer logic
 let scene = useScene()
 const socket = useSocketStore()
 const zoneEditorStore = useZoneEditorStore()
 
+
 // Tile tilemap
 const tileMapData = new Phaser.Tilemaps.MapData({
   width: zoneEditorStore.width,
@@ -41,34 +51,23 @@ const tileMapData = new Phaser.Tilemaps.MapData({
 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
-let tiles = tileTilemap.createBlankLayer('tiles', tilesImg as Tileset, 0, config.tile_size.y) as TilemapLayer
 
 const exampleTilesArray = Array.from({ length: zoneEditorStore.width }, () => Array.from({ length: zoneEditorStore.height }, () => 1))
-exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => exampleTiles.putTileAt(tile, x, y)))
 
-// Wall tilemap
-const wallMapData = new Phaser.Tilemaps.MapData({
-  width: zoneEditorStore.width,
-  height: zoneEditorStore.height,
-  tileWidth: config.wall_size.x,
-  tileHeight: config.wall_size.y,
-  orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
-  format: Phaser.Tilemaps.Formats.ARRAY_2D
+onMounted(() => {
 })
-let wallTilemap = new Phaser.Tilemaps.Tilemap(scene, wallMapData);
-let wallsImg = wallTilemap.addTilesetImage('default', 'walls', undefined, undefined, undefined, undefined, undefined, {
-  x: 0,
-  y: 0
-});
-let walls = wallTilemap.createBlankLayer('walls', wallsImg as Tileset, 0, 0) as TilemapLayer
-
-
+  const pos = tileToWorldXY(exampleTiles, 1, 1);
+  const pos2 = tileToWorldXY(exampleTiles, 1, 2);
+  const pos3 = tileToWorldXY(exampleTiles, 2, 1);
+console.log(pos);
 // center camera
 const centerY = (tileTilemap.height * tileTilemap.tileHeight) / 2
 const centerX = (tileTilemap.width * tileTilemap.tileWidth) / 2
 scene.cameras.main.centerOn(centerX, centerY)
 
 onBeforeMount(() => {
+  exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => exampleTiles.putTileAt(tile, x, y)))
+
   socket.connection.emit('gm:zone_editor:zone:request', { zoneId: socket.character.zoneId })
 })
 
@@ -96,7 +95,7 @@ function eraser(tile: Phaser.Tilemaps.Tile) {
   }
 
   if (zoneEditorStore.drawMode === 'wall') {
-    walls.putTileAt(0, tile.x, tile.y)
+    walls.putTileAt(0, tile.x, tile.y )
     zoneEditorStore.updateWall(tile.x, tile.y, 0);
   }
 }
@@ -105,7 +104,6 @@ function pencil(tile: Phaser.Tilemaps.Tile) {
   if (zoneEditorStore.drawMode === 'tile') {
     if (zoneEditorStore.selectedTile === null) return
     tiles.putTileAt(zoneEditorStore.selectedTile, tile.x, tile.y)
-    // isometric fix
     zoneEditorStore.setTiles(tile.x, tile.y, zoneEditorStore.selectedTile);
   }
 

src/screens/Game.vue

@@ -71,6 +71,8 @@ const preloadScene = (scene: Phaser.Scene) => {
    */
   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')
   scene.load.image('waypoint', '/assets/waypoint.png')
   scene.textures.addBase64(
     'character',

src/stores/zoneEditor.ts

@@ -7,10 +7,9 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
     width: 10,
     height: 10,
     tiles: [] as number[][],
-    walls: [] as number[][],
     decorations: [] as number[][],
     tool: 'move',
-    drawMode: 'wall',
+    drawMode: 'tile',
     selectedTile: null,
     selectedWall: null,
     selectedDecoration: null,
@@ -35,12 +34,6 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
     updateTile(x: number, y: number, tile: number) {
       this.tiles[y][x] = tile
     },
-    setWalls(walls: number[][]) {
-      this.walls = walls
-    },
-    updateWall(x: number, y: number, wall: number) {
-      this.walls[y][x] = wall
-    },
     setDecorations(decorations: number[][]) {
       this.decorations = decorations
     },
@@ -71,7 +64,7 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
       this.height = 10
       this.tiles = []
       this.tool = 'move'
-      this.drawMode = 'wall'
+      this.drawMode = 'tile'
       this.selectedTile = null
       this.selectedWall = null
       this.selectedDecoration = null