Creating and deleting zones now works

src/components/utilities/Modal.vue

@@ -1,8 +1,6 @@
 <template>
   <Teleport to="body">
-    <div v-if="isModalOpenRef"
+    <div v-if="isModalOpenRef" class="fixed bg-opacity-80 bg-gray-300 border-solid border-2 border-cyan-200 z-50 flex flex-col rounded-lg backdrop-blur-sm shadow-lg" :style="modalStyle">
-         class="fixed bg-opacity-80 bg-gray-300 border-solid border-2 border-cyan-200 z-50 flex flex-col rounded-lg backdrop-blur-sm shadow-lg"
-         :style="modalStyle">
       <div @mousedown="startDrag" class="cursor-move p-2.5 flex justify-between items-center border-solid border-0 border-b border-cyan-200">
         <slot name="modalHeader" />
         <div class="flex gap-2.5">
@@ -13,9 +11,7 @@
       </div>
       <div class="overflow-auto flex-grow">
         <slot name="modalBody" />
-        <img v-if="isResizable" src="/assets/icons/resize-icon.svg" alt="resize"
+        <img v-if="isResizable" src="/assets/icons/resize-icon.svg" alt="resize" class="absolute bottom-0 right-0 w-5 h-5 cursor-nwse-resize filter invert-[60%]" @mousedown="startResize" />
-             class="absolute bottom-0 right-0 w-5 h-5 cursor-nwse-resize filter invert-[60%]"
-             @mousedown="startResize" />
       </div>
       <div v-if="$slots.modalFooter" class="px-5 min-h-[50px] flex justify-end gap-7.5 items-center border-solid border-t border-cyan-200">
         <slot name="modalFooter" />
@@ -143,20 +139,29 @@ function initializePosition() {
   y.value = (window.innerHeight - height.value) / 2
 }
 
-watch(() => props.isModalOpen, (value) => {
+watch(
+  () => props.isModalOpen,
+  (value) => {
     isModalOpenRef.value = value
     if (value) {
       initializePosition()
     }
-})
+  }
+)
 
-watch(() => props.modalWidth, (value) => {
+watch(
+  () => props.modalWidth,
+  (value) => {
     width.value = Math.min(value, window.innerWidth)
-})
+  }
+)
 
-watch(() => props.modalHeight, (value) => {
+watch(
+  () => props.modalHeight,
+  (value) => {
     height.value = Math.min(value, window.innerHeight)
-})
+  }
+)
 
 onMounted(() => {
   window.addEventListener('mousemove', drag)

src/components/utilities/assetManager/partials/ObjectList.vue

@@ -59,9 +59,7 @@ const filteredObjects = computed(() => {
   if (!searchQuery.value) {
     return assetManagerStore.objectList
   }
-  return assetManagerStore.objectList.filter(object =>
+  return assetManagerStore.objectList.filter((object) => object.name.toLowerCase().includes(searchQuery.value.toLowerCase()))
-    object.name.toLowerCase().includes(searchQuery.value.toLowerCase())
-  )
 })
 
 onMounted(() => {

src/components/utilities/assetManager/partials/TileList.vue

@@ -57,9 +57,7 @@ const filteredTiles = computed(() => {
   if (!searchQuery.value) {
     return assetManagerStore.tileList
   }
-  return assetManagerStore.tileList.filter(tile =>
+  return assetManagerStore.tileList.filter((tile) => tile.toLowerCase().includes(searchQuery.value.toLowerCase()))
-    tile.toLowerCase().includes(searchQuery.value.toLowerCase())
-  )
 })
 
 onMounted(() => {

src/components/utilities/zoneEditor/CreateZone.vue

@@ -0,0 +1,55 @@
+<template>
+  <Modal :isModalOpen="true" @modal:close="() => zoneEditorStore.toggleCreateZoneModal()" :modal-width="300" :modal-height="400" :is-resizable="false">
+    <template #modalHeader>
+      <h3 class="m-0 font-medium shrink-0">Create new zone</h3>
+    </template>
+
+    <template #modalBody>
+      <div class="m-[15px]">
+        <form method="post" @submit.prevent="submit" class="inline">
+          <div class="gap-2.5 flex flex-wrap">
+            <div class="w-full flex flex-col mb-5">
+              <label class="mb-1.5 font-titles" for="name">Name</label>
+              <input class="input-cyan max-w-[250px]" v-model="name" name="name" id="name" />
+            </div>
+            <div class="w-[48%] flex flex-col mb-5">
+              <label class="mb-1.5 font-titles" for="name">Width</label>
+              <input class="input-cyan max-w-[250px]" v-model="width" name="name" id="name" type="number" />
+            </div>
+            <div class="w-[48%] flex flex-col mb-5">
+              <label class="mb-1.5 font-titles" for="name">Height</label>
+              <input class="input-cyan max-w-[250px]" v-model="height" name="name" id="name" type="number" />
+            </div>
+            <div class="w-full flex flex-col mb-5">
+              <label class="mb-1.5 font-titles" for="name">PVP enabled</label>
+              <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>
+  </Modal>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import Modal from '@/components/utilities/Modal.vue'
+import { useSocketStore } from '@/stores/socket'
+import { useZoneEditorStore } from '@/stores/zoneEditor'
+
+const emit = defineEmits(['submit'])
+const socket = useSocketStore()
+const zoneEditorStore = useZoneEditorStore()
+
+const name = ref('')
+const width = ref(0)
+const height = ref(0)
+
+const submit = () => {
+  socket.connection.emit('gm:zone_editor:zone:create', { name: name.value, width: width.value, height: height.value }, () => {})
+
+  zoneEditorStore.toggleCreateZoneModal()
+  emit('submit')
+}
+</script>

src/components/utilities/zoneEditor/Toolbar.vue

@@ -74,9 +74,9 @@
       </div>
 
       <div class="flex gap-2.5 ml-auto">
-        <button class="btn-cyan px-3.5">Load</button>
+        <button class="btn-cyan px-3.5" @click="() => zoneEditorStore.toggleZoneListModal()">Load</button>
         <button class="btn-cyan px-3.5" @click="() => emit('save')">Save</button>
-        <button class="btn-cyan px-3.5" @click="clear">Clear</button>
+        <button class="btn-cyan px-3.5" @click="() => emit('clear')">Clear</button>
         <button class="btn-cyan px-3.5" @click="() => zoneEditorStore.toggleActive()">Exit</button>
       </div>
     </div>
@@ -96,7 +96,7 @@ const props = defineProps({
   layer: Phaser.Tilemaps.TilemapLayer
 })
 const scene = useScene()
-const emit = defineEmits(['move', 'eraser', 'pencil', 'paint', 'save'])
+const emit = defineEmits(['move', 'eraser', 'pencil', 'paint', 'save', 'clear'])
 
 // track select state
 let selectPencilOpen = ref(false)
@@ -147,8 +147,4 @@ onBeforeUnmount(() => {
   scene.input.off(Phaser.Input.Events.POINTER_UP, drawTile)
   scene.input.off(Phaser.Input.Events.POINTER_MOVE, drawTiles)
 })
-
-function clear() {
-  zoneEditorStore.setTiles(Array.from({ length: zoneEditorStore.width ?? 10 }, () => Array.from({ length: zoneEditorStore.height ?? 10 }, () => 'blank_tile')))
-}
 </script>

src/components/utilities/zoneEditor/ZoneEditor.vue

@@ -10,6 +10,7 @@
   <Tiles v-if="((zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'tile') || zoneEditorStore.tool === 'paint'" />
   <Objects v-if="(zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'object'" />
   <ZoneSettings v-if="zoneEditorStore.isSettingsModalShown" />
+  <ZoneList v-if="zoneEditorStore.isZoneListModalShown" />
 </template>
 
 <script setup lang="ts">
@@ -29,13 +30,13 @@ import { useAssetStore } from '@/stores/assets'
 import Objects from '@/components/utilities/zoneEditor/Objects.vue'
 import type { Object } from '@/types'
 import { storeToRefs } from 'pinia'
+import ZoneList from '@/components/utilities/zoneEditor/ZoneList.vue'
 
 const scene = useScene()
 const socket = useSocketStore()
 const zoneEditorStore = useZoneEditorStore()
 const assetStore = useAssetStore()
 
-// Tile tilemap
 const zoneData = new Phaser.Tilemaps.MapData({
   width: zoneEditorStore.width,
   height: zoneEditorStore.height,
@@ -45,16 +46,16 @@ const zoneData = new Phaser.Tilemaps.MapData({
   format: Phaser.Tilemaps.Formats.ARRAY_2D
 })
 
-const zone = new Phaser.Tilemaps.Tilemap(scene, zoneData)
 const tilesetImages: Tileset[] = []
+const zone = new Phaser.Tilemaps.Tilemap(scene, zoneData)
+const zoneObjects = ref<ZoneObject[]>([])
 
 type ZoneObject = {
-  id: string
+  id: number
   object: Object
   position_x: number
   position_y: number
 }
-const zoneObjects = ref<ZoneObject[]>([])
 
 /**
  * Walk through object and add them to the zone as tilesetImages
@@ -69,13 +70,6 @@ tilesetImages.push(zone.addTilesetImage('blank_tile', 'blank_tile', config.tile_
 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 }, () => 'blank_tile'))
 
-// socket.connection.on('gm:zone_editor:zone:load', (data: Zone) => {
-//   tileTilemap = generateTilemap(scene, data.width, data.height);
-//   zoneEditorStore.setName(data.name)
-//   zoneEditorStore.setWidth(data.width)
-//   zoneEditorStore.setHeight(data.height)
-// })
-
 function eraser(tile: Phaser.Tilemaps.Tile) {
   if (zoneEditorStore.drawMode === 'tile') {
     placeTile(zone, tiles, tile.x, tile.y, 'blank_tile')
@@ -91,14 +85,13 @@ function pencil(tile: Phaser.Tilemaps.Tile) {
   if (zoneEditorStore.drawMode === 'tile') {
     if (!zoneEditorStore.selectedTile) return
     placeTile(zone, tiles, tile.x, tile.y, zoneEditorStore.selectedTile)
-    // zoneEditorStore.setTiles(tile.x, tile.y, zoneEditorStore.selectedTile)
   }
 
   if (zoneEditorStore.drawMode === 'object') {
     if (zoneEditorStore.selectedObject === null) return
     zoneObjects.value.push({
-      id: Math.random().toString(10),
+      id: zoneObjects.value.length + 1,
-      object: toRaw(zoneEditorStore.selectedObject),
+      object: zoneEditorStore.selectedObject,
       position_x: tileToWorldXY(tiles, tile.x, tile.y).position_x,
       position_y: tileToWorldXY(tiles, tile.x, tile.y).position_y
     })
@@ -111,7 +104,7 @@ function paint(tile: Phaser.Tilemaps.Tile) {
 }
 
 function save() {
-  socket.connection.emit('gm:zone_editor:zone:save', {
+  socket.connection.emit('gm:zone_editor:zone:update', {
     zoneId: socket.character.zoneId,
     name: zoneEditorStore.name,
     width: zoneEditorStore.width,
@@ -121,6 +114,13 @@ function save() {
   })
 }
 
+// socket.connection.on('gm:zone_editor:zone:load', (data: Zone) => {
+//   tileTilemap = generateTilemap(scene, data.width, data.height);
+//   zoneEditorStore.setName(data.name)
+//   zoneEditorStore.setWidth(data.width)
+//   zoneEditorStore.setHeight(data.height)
+// })
+
 const { objectList } = storeToRefs(zoneEditorStore)
 
 watch(objectList, (newObjects) => {
@@ -128,10 +128,7 @@ watch(objectList, (newObjects) => {
   zoneObjects.value = zoneObjects.value.map((object) => {
     const newObject = newObjects.find((newObject) => newObject.id === object.object.id)
     if (!newObject) return object
-    return {
+    return { ...object, object: newObject }
-      ...object,
-      object: newObject
-    }
   })
 })
 
@@ -148,9 +145,4 @@ onBeforeUnmount(() => {
 const centerY = (zone.height * zone.tileHeight) / 2
 const centerX = (zone.width * zone.tileWidth) / 2
 scene.cameras.main.centerOn(centerX, centerY)
-
-/**
- * Resources:
- * https://stackoverflow.com/questions/14488989/drawing-isometric-walls
- */
 </script>

src/components/utilities/zoneEditor/ZoneList.vue

@@ -0,0 +1,58 @@
+<template>
+  <CreateZone @submit="fetchZones" v-if="zoneEditorStore.isCreateZoneModalShown" />
+
+  <Teleport to="body">
+    <Modal @modal:close="() => zoneEditorStore.toggleZoneListModal()" :is-resizable="false" :is-modal-open="true" :modal-width="200" :modal-height="360">
+      <template #modalHeader>
+        <h3 class="text-lg">Zones</h3>
+      </template>
+      <template #modalBody>
+        <div class="my-[15px] mx-auto">
+          <div class="text-center mb-4 px-2">
+            <button class="btn-cyan py-1.5 min-w-full" @click="() => zoneEditorStore.toggleCreateZoneModal()">New</button>
+          </div>
+          <div class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap" v-for="(zone, index) in zones" :key="zone.id">
+            <div class="absolute left-0 top-0 w-full h-[1px] bg-cyan-200" v-if="index === 0"></div>
+            <div class="flex items-center">
+              <span>{{ zone.name }}</span>
+              <!--              @TODO : BUG , ml-auto no work -->
+              <span class="ml-auto">
+                <button class="btn-bordeaux py-0.5 px-2.5" @click="() => deleteZone(zone.id)">X</button>
+              </span>
+            </div>
+            <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
+          </div>
+        </div>
+      </template>
+    </Modal>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useSocketStore } from '@/stores/socket'
+import Modal from '@/components/utilities/Modal.vue'
+import type { Zone } from '@/types'
+import { useZoneEditorStore } from '@/stores/zoneEditor'
+import CreateZone from '@/components/utilities/zoneEditor/CreateZone.vue'
+
+const socket = useSocketStore()
+const zoneEditorStore = useZoneEditorStore()
+const zones = ref([] as Zone[])
+
+onMounted(async () => {
+  fetchZones()
+})
+
+function fetchZones() {
+  socket.connection.emit('gm:zone_editor:zone:list', {}, (response: Zone[]) => {
+    zones.value = response
+  })
+}
+
+function deleteZone(id: number) {
+  socket.connection.emit('gm:zone_editor:zone:delete', { zoneId: id }, () => {
+    fetchZones()
+  })
+}
+</script>

src/components/utilities/zoneEditor/ZoneSettings.vue

@@ -1,5 +1,5 @@
 <template>
-  <Modal :isModalOpen="true" @modal:close="() => zoneEditorStore.toggleSettingsModal()" :modal-width="300" :modal-height="370" :is-resizable="false">
+  <Modal :is-modal-open="true" @modal:close="() => zoneEditorStore.toggleSettingsModal()" :modal-width="300" :modal-height="400" :is-resizable="false">
     <template #modalHeader>
       <h3 class="m-0 font-medium shrink-0">Zone settings</h3>
     </template>
@@ -25,6 +25,7 @@
               <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>

src/screens/Characters.vue

@@ -32,7 +32,11 @@
       </div>
 
       <div class="button-wrapper flex gap-[30px]" v-if="!isLoading">
-        <button class="btn-cyan py-2 pr-2.5 pl-[30px] min-w-[100px] relative rounded text-xl flex gap-[15px] items-center transition-all ease-in-out duration-200 hover:gap-[20px] disabled:bg-cyan disabled:hover:bg-opacity-50 disabled:bg-opacity-50 disabled:cursor-not-allowed disabled:hover:gap-[15px]" :disabled="!selected_character" @click="select_character()">
+        <button
+          class="btn-cyan py-2 pr-2.5 pl-[30px] min-w-[100px] relative rounded text-xl flex gap-[15px] items-center transition-all ease-in-out duration-200 hover:gap-[20px] disabled:bg-cyan disabled:hover:bg-opacity-50 disabled:bg-opacity-50 disabled:cursor-not-allowed disabled:hover:gap-[15px]"
+          :disabled="!selected_character"
+          @click="select_character()"
+        >
           PLAY
           <img class="h-[30px] drop-shadow-20" draggable="false" src="/assets/icons/arrow.svg" />
         </button>

src/stores/zoneEditor.ts

@@ -4,6 +4,8 @@ import type { Object, ZoneObject } from '@/types'
 export const useZoneEditorStore = defineStore('zoneEditor', {
   state: () => ({
     active: true,
+    isZoneListModalShown: false,
+    isCreateZoneModalShown: false,
     name: '',
     width: 10,
     height: 10,
@@ -21,6 +23,13 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
     toggleActive() {
       this.active = !this.active
     },
+    toggleZoneListModal() {
+      this.isZoneListModalShown = !this.isZoneListModalShown
+      this.isCreateZoneModalShown = false
+    },
+    toggleCreateZoneModal() {
+      this.isCreateZoneModalShown = !this.isCreateZoneModalShown
+    },
     setName(name: string) {
       this.name = name
     },

src/types.ts

@@ -76,7 +76,6 @@ export type Zone = {
   width: number
   height: number
   tiles: any // Using 'any' for Json type, consider using a more specific type if possible
-  walls: any // Using 'any' for Json type, consider using a more specific type if possible
   zoneObjects: ZoneObject[]
   characters: Character[]
   chats: Chat[]