Zone updating stuff

src/components/utilities/zoneEditor/Toolbar.vue

@@ -47,8 +47,8 @@
                 Tile
                 <div class="absolute w-[80%] left-1/2 translate-x-[-50%] bottom-0 h-[1px] bg-cyan"></div>
               </span>
-              <span class="py-[8px] px-[10px] relative hover:bg-cyan hover:bg-opacity-50" @click="setDrawMode('decoration')">
-                Decoration
+              <span class="py-[8px] px-[10px] relative hover:bg-cyan hover:bg-opacity-50" @click="setDrawMode('object')">
+                Object
                 <div class="absolute w-[80%] left-1/2 translate-x-[-50%] bottom-0 h-[1px] bg-cyan"></div>
               </span>
               <span class="py-[8px] px-[10px] relative hover:bg-cyan hover:bg-opacity-50" @click="setDrawMode('teleport')">

src/components/utilities/zoneEditor/ZoneEditor.vue

@@ -7,7 +7,7 @@
   </Container>
 
   <Container :depth="3">
-<!--    <Image v-for="object in zoneObjects" :key="object.object.id" :x="object.position_x" :y="object.position_y" :texture="object.object.id" />-->
+    <Image v-for="zoneEventTile in zoneEventTiles" :key="zoneEventTile.id" :x="tileToWorldX(zoneTilemap, zoneEventTile.position_x, zoneEventTile.position_y)" :y="tileToWorldY(zoneTilemap, zoneEventTile.position_x, zoneEventTile.position_y)" :texture="zoneEventTile.type" />
   </Container>
 
   <Toolbar :layer="tiles" @eraser="eraser" @pencil="pencil" @paint="paint" @clear="clear" @save="save" />
@@ -27,15 +27,21 @@ 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 { placeTile, setAllTiles, tileToWorldX, tileToWorldXY, tileToWorldY } from '@/services/zone'
+import { placeTile, setAllTiles, tileToWorldX, tileToWorldY } from '@/services/zone'
 import { useAssetStore } from '@/stores/assets'
 import Objects from '@/components/utilities/zoneEditor/Objects.vue'
-import type { ZoneEventTile, ZoneObject } from '@/types'
+import type { Zone, ZoneEventTile, ZoneObject } from '@/types'
 import { storeToRefs } from 'pinia'
 import ZoneList from '@/components/utilities/zoneEditor/ZoneList.vue'
 import Tileset = Phaser.Tilemaps.Tileset
 import TilemapLayer = Phaser.Tilemaps.TilemapLayer
 
+function uuidv4() {
+  return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, c =>
+    (+c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> +c / 4).toString(16)
+  );
+}
+
 const scene = useScene()
 const socket = useSocketStore()
 const zoneEditorStore = useZoneEditorStore()
@@ -103,6 +109,12 @@ function eraser(tile: Phaser.Tilemaps.Tile) {
       return object.position_x !== tile.x || object.position_y !== tile.y
     })
   }
+
+  if (zoneEditorStore.drawMode === 'blocking tile') {
+    zoneEventTiles.value = zoneEventTiles.value.filter((zoneTileEvent) => {
+      return zoneTileEvent.position_x !== tile.x || zoneTileEvent.position_y !== tile.y
+    })
+  }
 }
 
 function pencil(tile: Phaser.Tilemaps.Tile) {
@@ -117,7 +129,7 @@ function pencil(tile: Phaser.Tilemaps.Tile) {
     if (zoneEditorStore.selectedObject === null) return
 
     zoneObjects.value.push({
-      id: Math.random(),
+      id: uuidv4(),
       zoneId: zoneEditorStore.zone.id,
       zone: zoneEditorStore.zone,
       objectId: zoneEditorStore.selectedObject.id,
@@ -127,23 +139,24 @@ function pencil(tile: Phaser.Tilemaps.Tile) {
       position_y: tile.y
     })
 
-    // console.log(tileToWorldX(zoneTilemap, tile.x), tileToWorldY(zoneTilemap, tile.y))
-    console.log(tile.x, tile.y);
-    console.log(tileToWorldX(tiles, tile.x, tile.y), tileToWorldY(tiles, tile.x, tile.y))
-
     // remove duplicates based on object, pos x and y
     zoneObjects.value = zoneObjects.value.filter((object, index, self) => index === self.findIndex((t) => t.objectId === object.objectId && t.position_x === object.position_x && t.position_y === object.position_y))
   }
 
   if (zoneEditorStore.drawMode === 'blocking tile') {
+    if (zoneEditorStore.zone === null) return
+
     zoneEventTiles.value.push({
-      id: Math.random(),
+      id: uuidv4(),
       zoneId: zoneEditorStore.zone.id,
       zone: zoneEditorStore.zone,
       type: 'BLOCK',
       position_x: tile.x,
       position_y: tile.y
     })
+
+    // remove duplicates based on type, pos x and y
+    zoneEventTiles.value = zoneEventTiles.value.filter((zoneTileEvent, index, self) => index === self.findIndex((t) => t.type === zoneTileEvent.type && t.position_x === zoneTileEvent.position_x && t.position_y === zoneTileEvent.position_y))
   }
 }
 
@@ -156,21 +169,44 @@ function paint(tile: Phaser.Tilemaps.Tile) {
 function save() {
   if (!zoneEditorStore.zone) return
 
-  console.log(zoneTiles);
-
-  socket.connection.emit('gm:zone_editor:zone:update', {
+  const data = {
     zoneId: zoneEditorStore.zone.id,
     name: zoneEditorStore.zone.name,
-    width: zoneTilemap.width,
-    height: zoneTilemap.height,
+    width: zoneEditorStore.zone.width,
+    height: zoneEditorStore.zone.height,
     tiles: zoneTiles,
-    objects: zoneObjects.value
-  })
+    zoneEventTiles: toRaw(zoneEventTiles.value).map(tile => ({
+      id: tile.id,
+      zoneId: tile.zoneId,
+      type: tile.type,
+      position_x: tile.position_x,
+      position_y: tile.position_y
+    })),
+    zoneObjects: toRaw(zoneObjects.value).map(obj => ({
+      id: obj.id,
+      zoneId: obj.zoneId,
+      objectId: obj.objectId,
+      depth: obj.depth,
+      position_x: obj.position_x,
+      position_y: obj.position_y
+    }))
+  };
+
+  socket.connection.emit('gm:zone_editor:zone:update', data);
+
+  socket.connection.emit('gm:zone_editor:zone:request', { zoneId: zoneEditorStore.zone.id }, (response: Zone) => {
+    zoneEditorStore.setZone(response)
+  });
+
+  if (zoneEditorStore.isSettingsModalShown) {
+    zoneEditorStore.toggleSettingsModal()
+  }
 }
 
 function clear() {
   exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(zoneTilemap, tiles, x, y, 'blank_tile')))
   zoneTiles = exampleTilesArray
+  zoneEventTiles.value = []
   zoneObjects.value = []
 }
 
@@ -179,14 +215,36 @@ onBeforeMount(() => {
   zoneTiles = exampleTilesArray
 
   if (zoneEditorStore.zone && zoneEditorStore.zone.tiles) {
-    setAllTiles(zoneTilemap, tiles, zoneEditorStore.zone.tiles)
-    zoneTiles = zoneEditorStore.zone.tiles
+    setAllTiles(zoneTilemap, tiles, zoneEditorStore.zone.tiles);
+    zoneTiles = zoneEditorStore.zone.tiles;
+
+    // Determine the current zone dimensions
+    const currentZoneWidth = zoneEditorStore.zone.width ?? 0;
+    const currentZoneHeight = zoneEditorStore.zone.height ?? 0;
+
+    // Ensure zoneTiles matches the current zone dimensions, filling new spaces with 'blank_tile'
+    for (let y = 0; y < currentZoneHeight; y++) {
+      zoneTiles[y] = zoneTiles[y] || []; // Ensure the row exists
+      for (let x = 0; x < currentZoneWidth; x++) {
+        zoneTiles[y][x] = zoneTiles[y][x] || 'blank_tile'; // Fill missing tiles with 'blank_tile'
+      }
+    }
+
+    // Update the tilemap with any new 'blank_tile' entries
+    zoneTiles.forEach((row, y) => {
+      row.forEach((tileId, x) => {
+        placeTile(zoneTilemap, tiles, x, y, tileId);
+      });
+    });
   }
-  zoneObjects.value = zoneEditorStore.zone?.zoneObjects ?? []
+
   zoneEventTiles.value = zoneEditorStore.zone?.zoneEventTiles ?? []
+  zoneObjects.value = zoneEditorStore.zone?.zoneObjects ?? []
 })
 
 onBeforeUnmount(() => {
+  zoneEventTiles.value = []
+  zoneObjects.value = []
   tiles.destroy()
   zoneTilemap.removeAllLayers()
   zoneTilemap.destroy()

src/components/utilities/zoneEditor/ZoneSettings.vue

@@ -25,7 +25,6 @@
               <input class="input-cyan max-w-[250px]" name="name" id="name" />
             </div>
           </div>
-          <button class="btn-cyan px-[15px] py-1.5 min-w-[100px]" type="submit">Save</button>
         </form>
       </div>
     </template>
@@ -39,19 +38,19 @@ import { useZoneEditorStore } from '@/stores/zoneEditor'
 
 const zoneEditorStore = useZoneEditorStore()
 
-const name = ref(zoneEditorStore.name)
-const width = ref(zoneEditorStore.width)
-const height = ref(zoneEditorStore.height)
+const name = ref(zoneEditorStore.zone?.name)
+const width = ref(zoneEditorStore.zone?.width)
+const height = ref(zoneEditorStore.zone?.height)
 
 watch(name, (value) => {
-  zoneEditorStore.setName(value)
+  zoneEditorStore.setZoneName(value)
 })
 
 watch(width, (value) => {
-  zoneEditorStore.setWidth(parseInt(value))
+  zoneEditorStore.setZoneWidth(value)
 })
 
 watch(height, (value) => {
-  zoneEditorStore.setHeight(parseInt(value))
+  zoneEditorStore.setZoneHeight(value)
 })
 </script>

src/screens/Game.vue

@@ -122,8 +122,8 @@ const preloadScene = (scene: Phaser.Scene) => {
     }
   })
 
-  scene.load.image('bt_tile', '/assets/zone/bt_tile.png')
-  scene.load.image('tp_tile', '/assets/zone/tp_tile.png')
+  scene.load.image('BLOCK', '/assets/zone/bt_tile.png')
+  scene.load.image('WARP', '/assets/zone/tp_tile.png')
   scene.load.image('blank_tile', '/assets/zone/blank_tile.png')
   scene.load.image('blank_object', '/assets/zone/blank_tile.png')
   scene.load.image('waypoint', '/assets/waypoint.png')

src/services/zone.ts

@@ -19,12 +19,12 @@ export function tileToWorldXY(layer: Phaser.Tilemaps.TilemapLayer, pos_x: number
 
 export function tileToWorldX(layer: Phaser.Tilemaps.TilemapLayer, pos_x: number, pos_y: number): number {
   const worldPoint = layer.tileToWorldXY(pos_x, pos_y);
-  return worldPoint.x + config.tile_size.y;
+  return worldPoint.x + config.tile_size.x / 2;
 }
 
 export function tileToWorldY(layer: Phaser.Tilemaps.TilemapLayer, pos_x: number, pos_y: number): number {
   const worldPoint = layer.tileToWorldXY(pos_x, pos_y);
-  return worldPoint.y;
+  return worldPoint.y + config.tile_size.y * 1.5;
 }
 
 export function placeTile(zone: Tilemap, layer: TilemapLayer, x: number, y: number, tileName: string) {

src/stores/zoneEditor.ts

@@ -23,6 +23,21 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
     setZone(zone: Zone) {
       this.zone = zone
     },
+    setZoneName(name: string) {
+      if (this.zone) {
+        this.zone.name = name
+      }
+    },
+    setZoneWidth(width: number) {
+      if (this.zone) {
+        this.zone.width = width
+      }
+    },
+    setZoneHeight(height: number) {
+      if (this.zone) {
+        this.zone.height = height
+      }
+    },
     setTool(tool: string) {
       this.tool = tool
     },

src/types.ts

@@ -85,7 +85,7 @@ export type Zone = {
 }
 
 export type ZoneObject = {
-  id: number
+  id: string
   zoneId: number
   zone: Zone
   objectId: string
@@ -96,7 +96,7 @@ export type ZoneObject = {
 }
 
 export type ZoneEventTile = {
-  id: number
+  id: string
   zoneId: number
   zone: Zone
   type: "BLOCK" | "WARP" | "NPC" | "ITEM"