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

package-lock.json

@@ -2302,14 +2302,14 @@
       "license": "MIT"
     },
     "node_modules/@vue/devtools-core": {
-      "version": "7.2.1",
+      "version": "7.3.0",
-      "resolved": "https://registry.npmjs.org/@vue/devtools-core/-/devtools-core-7.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-core/-/devtools-core-7.3.0.tgz",
-      "integrity": "sha512-OyWl455UnJIVgZ6lo5WQ79WbDMoXtSRwyNKp9WzCZ0HhuQywIk4qv59KtLRe75uVmtGBde4hXNaSyRm+x9bY6g==",
+      "integrity": "sha512-J5nmaYadJvDgH9zsQI9vSLlWjfZn/TdKWEKMcc9xjbF3OvdhQwRrojvFax1G+WPoQ/X67EZKeUVY/ovCCyLo7A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vue/devtools-kit": "^7.2.1",
+        "@vue/devtools-kit": "^7.3.0",
-        "@vue/devtools-shared": "^7.2.1",
+        "@vue/devtools-shared": "^7.3.0",
         "mitt": "^3.0.1",
         "nanoid": "^3.3.4",
         "pathe": "^1.1.2",
@@ -2317,26 +2317,28 @@
       }
     },
     "node_modules/@vue/devtools-kit": {
-      "version": "7.2.1",
+      "version": "7.3.0",
-      "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.3.0.tgz",
-      "integrity": "sha512-Wak/fin1X0Q8LLIfCAHBrdaaB+R6IdpSXsDByPHbQ3BmkCP0/cIo/oEGp9i0U2+gEqD4L3V9RDjNf1S34DTzQQ==",
+      "integrity": "sha512-J9C+ue3Ka8cumQY/hMsNTcbb1tczqVBBXFMw4isa5YvPjyIBgEtJBfDSUVIK3nE+YWk7UNliUuCcE1GHEKaGcw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vue/devtools-shared": "^7.2.1",
+        "@vue/devtools-shared": "^7.3.0",
+        "birpc": "^0.2.17",
         "hookable": "^5.5.3",
         "mitt": "^3.0.1",
         "perfect-debounce": "^1.0.0",
-        "speakingurl": "^14.0.1"
+        "speakingurl": "^14.0.1",
+        "superjson": "^2.2.1"
       },
       "peerDependencies": {
         "vue": "^3.0.0"
       }
     },
     "node_modules/@vue/devtools-shared": {
-      "version": "7.2.1",
+      "version": "7.3.0",
-      "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.3.0.tgz",
-      "integrity": "sha512-PCJF4UknJmOal68+X9XHyVeQ+idv0LFujkTOIW30+GaMJqwFVN9LkQKX4gLqn61KkGMdJTzQ1bt7EJag3TI6AA==",
+      "integrity": "sha512-bYw4BtZclxzVrYBeYYHzNOcLlvVZbe9tutwtrixTtdgynHvuSJa5KI2MqWiumpGYm2feFI5sHlC8Vt61v4z18g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2835,6 +2837,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/birpc": {
+      "version": "0.2.17",
+      "resolved": "https://registry.npmjs.org/birpc/-/birpc-0.2.17.tgz",
+      "integrity": "sha512-+hkTxhot+dWsLpp3gia5AkVHIsKlZybNT5gIYiDlNzJrmYPcTM9k5/w2uaj3IPpd7LlEYpmCj4Jj1nC41VhDFg==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/boolbase": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
@@ -3145,6 +3157,22 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/copy-anything": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-3.0.5.tgz",
+      "integrity": "sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-what": "^4.1.8"
+      },
+      "engines": {
+        "node": ">=12.13"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
     "node_modules/cross-fetch": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-4.0.0.tgz",
@@ -3415,9 +3443,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.802",
+      "version": "1.4.803",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.802.tgz",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.803.tgz",
-      "integrity": "sha512-TnTMUATbgNdPXVSHsxvNVSG0uEd6cSZsANjm8c9HbvflZVVn1yTRcmVXYT1Ma95/ssB/Dcd30AHweH2TE+dNpA==",
+      "integrity": "sha512-61H9mLzGOCLLVsnLiRzCbc63uldP0AniRYPV3hbGVtONA1pI7qSGILdbofR7A8TMbOypDocEAjH/e+9k1QIe3g==",
       "dev": true,
       "license": "ISC"
     },
@@ -3986,9 +4014,9 @@
       }
     },
     "node_modules/foreground-child": {
-      "version": "3.2.0",
+      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.2.1.tgz",
-      "integrity": "sha512-CrWQNaEl1/6WeZoarcM9LHupTo3RpZO2Pdk1vktwzPiQTsJnAKJmm3TACKeG5UZbWDfaH2AbvYxzP96y0MT7fA==",
+      "integrity": "sha512-PXUUyLqrR2XCWICfv6ukppP96sdFwWbNEnfEMt7jNsISjMsvaLNinAHNDYyvkyU+SZG2BTSbT5NjG+vZslfGTA==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
@@ -4534,6 +4562,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-what": {
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/is-what/-/is-what-4.1.16.tgz",
+      "integrity": "sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.13"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
     "node_modules/is-wsl": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-3.1.0.tgz",
@@ -6295,6 +6336,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/superjson": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/superjson/-/superjson-2.2.1.tgz",
+      "integrity": "sha512-8iGv75BYOa0xRJHK5vRLEjE2H/i4lulTjzpUXic3Eg8akftYjkmQDa8JARQ42rlczXyFR3IeRoeFCc7RxHsYZA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "copy-anything": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -6722,19 +6776,19 @@
       }
     },
     "node_modules/vite-plugin-vue-devtools": {
-      "version": "7.2.1",
+      "version": "7.3.0",
-      "resolved": "https://registry.npmjs.org/vite-plugin-vue-devtools/-/vite-plugin-vue-devtools-7.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/vite-plugin-vue-devtools/-/vite-plugin-vue-devtools-7.3.0.tgz",
-      "integrity": "sha512-4k7QNZz0nSojoePQoxnE5fIzi8RU1QJHc0TEg4golv2phZxhBGfjScZD2B8X6bcrRbUQ9CaRKN0dzBs1xtzzNg==",
+      "integrity": "sha512-XnxQzTloGkQUTpsRdWVsEBzyh9F6i8NBmuPo8lotx4lSUnWYJ+jUlXvfftzmOf14hFgsTOySLJCr9nhaqOzgOA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vue/devtools-core": "^7.2.1",
+        "@vue/devtools-core": "^7.3.0",
-        "@vue/devtools-kit": "^7.2.1",
+        "@vue/devtools-kit": "^7.3.0",
-        "@vue/devtools-shared": "^7.2.1",
+        "@vue/devtools-shared": "^7.3.0",
         "execa": "^8.0.1",
         "sirv": "^2.0.4",
         "vite-plugin-inspect": "^0.8.4",
-        "vite-plugin-vue-inspector": "^5.1.0"
+        "vite-plugin-vue-inspector": "^5.1.2"
       },
       "engines": {
         "node": ">=v14.21.3"

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="buttons">
-        <div class="walls">
+          <button class="btn-cyan" @click="zoneEditorStore.setDrawMode('tile')">Walls</button>
-          <img v-for="(wall, index) in walls" :key="index" :src="wall" alt="Wall" @click="zoneEditorStore.setSelectedWall(index)" :class="{ selected: zoneEditorStore.selectedWall && zoneEditorStore.selectedWall === index }" />
+          <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 decorationWidth = config.wall_size.x
-const wallHeight = config.wall_size.y
+const decorationHeight = config.wall_size.y
-const walls = ref<number[][]>([])
+const decorations = ref<number[][]>([])
-const selectedWall = ref<number | null>(null)
+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 decorationsetWidth = img.width
-  const wallsetHeight = img.height
+  const decorationsetHeight = img.height
-  const columns = Math.floor(wallsetWidth / wallWidth)
+  const columns = Math.floor(decorationsetWidth / decorationWidth)
-  const rows = Math.floor(wallsetHeight / wallHeight)
+  const rows = Math.floor(decorationsetHeight / decorationHeight)
 
-  walls.value = []
+  decorations.value = []
-  selectedWall.value = null
+  selectedDecoration.value = null
 
   for (let row = 0; row < rows; row++) {
     for (let col = 0; col < columns; col++) {
-      const x = col * wallWidth
+      const x = col * decorationWidth
-      const y = row * wallHeight
+      const y = row * decorationHeight
 
-      ctx.clearRect(0, 0, wallWidth, wallHeight)
+      ctx.clearRect(0, 0, decorationWidth, decorationHeight)
-      ctx.drawImage(img, x, y, wallWidth, wallHeight, 0, 0, wallWidth, wallHeight)
+      ctx.drawImage(img, x, y, decorationWidth, decorationHeight, 0, 0, decorationWidth, decorationHeight)
 
-      const wallDataURL = canvas.value.toDataURL()
+      const decorationDataURL = canvas.value.toDataURL()
-      walls.value.push(wallDataURL)
+      decorations.value.push(decorationDataURL)
     }
   }
 }
 
-const selectWall = (index: number) => {
+const selectDecoration = (index: number) => {
-  selectedWall.value = index
+  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 { Container, TilemapLayer as TilemapLayerC, useScene, Image } from 'phavuer'
-import { onBeforeMount, onBeforeUnmount, ref, type Ref, watch } from 'vue'
+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 Decorations from '@/components/utilities/zoneEditor/Decorations.vue'
-import { generateTilemap } from '@/services/zone'
+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
+onMounted(() => {
-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
 })
-let wallTilemap = new Phaser.Tilemaps.Tilemap(scene, wallMapData);
+  const pos = tileToWorldXY(exampleTiles, 1, 1);
-let wallsImg = wallTilemap.addTilesetImage('default', 'walls', undefined, undefined, undefined, undefined, undefined, {
+  const pos2 = tileToWorldXY(exampleTiles, 1, 2);
-  x: 0,
+  const pos3 = tileToWorldXY(exampleTiles, 2, 1);
-  y: 0
+console.log(pos);
-});
-let walls = wallTilemap.createBlankLayer('walls', wallsImg as Tileset, 0, 0) as TilemapLayer
-
-
 // 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