Major refractor, cleaning and improvements.

src/components/gameMaster/zoneEditor/ZoneEditor.vue

@@ -0,0 +1,232 @@
+<template>
+  <TilemapLayerC :tilemap="zoneTilemap as Tilemap" :tileset="tileArray as any" :layerIndex="0" :cull-padding="10" />
+  <Controls :layer="tiles as TilemapLayer" />
+
+  <Container :depth="2">
+    <Image v-for="object in sortedZoneObjects" :key="object.id" v-bind="getObjectImageProps(object)" @pointerup="() => zoneEditorStore.setSelectedZoneObject(object)" />
+  </Container>
+
+  <Container :depth="3">
+    <Image v-for="tile in zoneEventTiles" :key="tile.id" v-bind="getEventTileImageProps(tile)" />
+  </Container>
+
+  <Toolbar :layer="tiles" @eraser="eraser" @pencil="pencil" @paint="paint" @clear="clear" @save="save" />
+  <SelectedZoneObject v-if="zoneEditorStore.selectedZoneObject" @update_depth="updateZoneObjectDepth" @delete="deleteZoneObject" @move="handleMove" />
+  <Tiles v-if="zoneEditorStore.isTileListModalShown" />
+  <Objects v-if="zoneEditorStore.isObjectListModalShown" />
+  <ZoneSettings v-if="zoneEditorStore.isSettingsModalShown" />
+  <ZoneList v-if="zoneEditorStore.isZoneListModalShown" />
+  <TeleportModal v-if="shouldShowTeleportModal" />
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeMount, onBeforeUnmount, ref } from 'vue'
+import { Container, Image, TilemapLayer as TilemapLayerC, useScene } from 'phavuer'
+import { storeToRefs } from 'pinia'
+import { useGameStore } from '@/stores/game'
+import { useZoneEditorStore } from '@/stores/zoneEditor'
+import { useAssetStore } from '@/stores/assets'
+import { placeTile, setAllTiles, sortByDepth, tileToWorldX, tileToWorldY } from '@/services/zone'
+import { ZoneEventTileType, type ZoneObject, type ZoneEventTile } from '@/types'
+import { uuidv4 } from '@/utilities'
+import config from '@/config'
+
+// Components
+import Controls from '@/components/utilities/Controls.vue'
+import Toolbar from '@/components/gameMaster/zoneEditor/partials/Toolbar.vue'
+import Tiles from '@/components/gameMaster/zoneEditor/partials/TileList.vue'
+import SelectedZoneObject from '@/components/gameMaster/zoneEditor/partials/SelectedZoneObject.vue'
+import ZoneSettings from '@/components/gameMaster/zoneEditor/partials/ZoneSettings.vue'
+import Objects from '@/components/gameMaster/zoneEditor/partials/ObjectList.vue'
+import ZoneList from '@/components/gameMaster/zoneEditor/partials/ZoneList.vue'
+import TeleportModal from '@/components/gameMaster/zoneEditor/partials/TeleportModal.vue'
+import Tilemap = Phaser.Tilemaps.Tilemap
+import TilemapLayer = Phaser.Tilemaps.TilemapLayer
+
+const scene = useScene()
+const gameStore = useGameStore()
+const zoneEditorStore = useZoneEditorStore()
+const assetStore = useAssetStore()
+
+const { objectList, zone, selectedTile, selectedObject, selectedZoneObject, eraserMode, drawMode, objectDepth } = storeToRefs(zoneEditorStore)
+
+const zoneTilemap = ref(createTilemap())
+const tiles = ref(createTileLayer())
+const zoneObjects = ref<ZoneObject[]>([])
+const zoneEventTiles = ref<ZoneEventTile[]>([])
+const tileArray = ref(createTileArray())
+
+const sortedZoneObjects = computed(() => sortByDepth(zoneObjects.value, zoneTilemap.value.width))
+const shouldShowTeleportModal = computed(() => zoneEditorStore.tool === 'pencil' && drawMode.value === 'teleport')
+
+function createTilemap() {
+  const zoneData = new Phaser.Tilemaps.MapData({
+    width: zone.value?.width ?? 10,
+    height: zone.value?.height ?? 10,
+    tileWidth: config.tile_size.x,
+    tileHeight: config.tile_size.y,
+    orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
+    format: Phaser.Tilemaps.Formats.ARRAY_2D
+  })
+  return new Phaser.Tilemaps.Tilemap(scene, zoneData)
+}
+
+function createTileLayer() {
+  const tilesetImages = assetStore.assets.filter((asset) => asset.group === 'tiles').map((asset, index) => zoneTilemap.value.addTilesetImage(asset.key, asset.key, config.tile_size.x, config.tile_size.y, 0, 0, index + 1))
+  tilesetImages.push(zoneTilemap.value.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 0, 0, 0))
+  return zoneTilemap.value.createBlankLayer('tiles', tilesetImages as any, 0, config.tile_size.y)
+}
+
+function createTileArray() {
+  return Array.from({ length: zone.value?.width ?? 0 }, () => Array.from({ length: zone.value?.height ?? 0 }, () => 'blank_tile'))
+}
+
+function getObjectImageProps(object: ZoneObject) {
+  return {
+    tint: selectedZoneObject.value?.id === object.id ? 0x00ff00 : 0xffffff,
+    x: tileToWorldX(zoneTilemap.value as Tilemap, object.positionX, object.positionY),
+    y: tileToWorldY(zoneTilemap.value as Tilemap, object.positionX, object.positionY),
+    texture: object.object.id,
+    originY: Number(object.object.originX),
+    originX: Number(object.object.originY)
+  }
+}
+
+function getEventTileImageProps(tile: ZoneEventTile) {
+  return {
+    x: tileToWorldX(zoneTilemap.value, tile.positionX, tile.positionY),
+    y: tileToWorldY(zoneTilemap.value, tile.positionX, tile.positionY),
+    texture: tile.type
+  }
+}
+
+function eraser(tile: Phaser.Tilemaps.Tile) {
+  if (eraserMode.value === 'tile') {
+    placeTile(zoneTilemap.value as Tilemap, tiles.value as TilemapLayer, tile.x, tile.y, 'blank_tile')
+    tileArray.value[tile.y][tile.x] = 'blank_tile'
+  } else if (eraserMode.value === 'object') {
+    zoneObjects.value = zoneObjects.value.filter((object) => object.positionX !== tile.x || object.positionY !== tile.y)
+  } else if (eraserMode.value === 'blocking tile' || eraserMode.value === 'teleport') {
+    zoneEventTiles.value = zoneEventTiles.value.filter((eventTile) => eventTile.positionX !== tile.x || eventTile.positionY !== tile.y || (eraserMode.value === 'teleport' && eventTile.type !== ZoneEventTileType.TELEPORT))
+  }
+}
+
+function pencil(tile: Phaser.Tilemaps.Tile) {
+  if (drawMode.value === 'tile' && selectedTile.value) {
+    placeTile(zoneTilemap.value as Tilemap, tiles.value as TilemapLayer, tile.x, tile.y, selectedTile.value.id)
+    tileArray.value[tile.y][tile.x] = selectedTile.value.id
+  } else if (drawMode.value === 'object' && selectedObject.value) {
+    addZoneObject(tile)
+  } else if (drawMode.value === 'blocking tile' || drawMode.value === 'teleport') {
+    addZoneEventTile(tile)
+  }
+}
+
+function addZoneObject(tile: Phaser.Tilemaps.Tile) {
+  const newObject = {
+    id: uuidv4(),
+    zoneId: zone.value!.id,
+    zone: zone.value!,
+    objectId: selectedObject.value!.id,
+    object: selectedObject.value!,
+    depth: objectDepth.value,
+    positionX: tile.x,
+    positionY: tile.y
+  }
+  zoneObjects.value = [...new Set([...zoneObjects.value, newObject])]
+}
+
+function addZoneEventTile(tile: Phaser.Tilemaps.Tile) {
+  const newEventTile = {
+    id: uuidv4(),
+    zoneId: zone.value!.id,
+    zone: zone.value!,
+    type: drawMode.value === 'blocking tile' ? ZoneEventTileType.BLOCK : ZoneEventTileType.TELEPORT,
+    positionX: tile.x,
+    positionY: tile.y,
+    teleport:
+      drawMode.value === 'teleport'
+        ? {
+            toZoneId: zoneEditorStore.teleportSettings.toZoneId,
+            toPositionX: zoneEditorStore.teleportSettings.toPositionX,
+            toPositionY: zoneEditorStore.teleportSettings.toPositionY
+          }
+        : undefined
+  }
+  zoneEventTiles.value = [...new Set([...zoneEventTiles.value, newEventTile])] as any
+}
+
+function paint() {
+  if (!selectedTile.value) return
+  tileArray.value.forEach((row, y) =>
+    row.forEach((_, x) => {
+      placeTile(zoneTilemap.value as Tilemap, tiles.value as TilemapLayer, x, y, selectedTile.value!.id)
+      tileArray.value[y][x] = selectedTile.value!.id
+    })
+  )
+}
+
+function save() {
+  if (!zone.value) return
+  console.log('update')
+  const data = {
+    zoneId: zone.value.id,
+    name: zone.value.name,
+    width: zone.value.width,
+    height: zone.value.height,
+    tiles: tileArray.value,
+    pvp: zone.value.pvp,
+    zoneEventTiles: zoneEventTiles.value.map(({ id, zoneId, type, positionX, positionY, teleport }) => ({ id, zoneId, type, positionX, positionY, teleport })),
+    zoneObjects: zoneObjects.value.map(({ id, zoneId, objectId, depth, positionX, positionY }) => ({ id, zoneId, objectId, depth, positionX, positionY }))
+  }
+  gameStore.connection?.emit('gm:zone_editor:zone:update', data)
+  if (zoneEditorStore.isSettingsModalShown) {
+    zoneEditorStore.toggleSettingsModal()
+  }
+}
+
+function clear() {
+  tileArray.value.forEach((row, y) => row.forEach((_, x) => placeTile(zoneTilemap.value as Tilemap, tiles.value as TilemapLayer, x, y, 'blank_tile')))
+  tileArray.value = createTileArray()
+  zoneEventTiles.value = []
+  zoneObjects.value = []
+}
+
+function updateZoneObjectDepth(depth: number) {
+  zoneObjects.value = zoneObjects.value.map((object) => (object.id === selectedZoneObject.value?.id ? { ...object, depth } : object))
+}
+
+function deleteZoneObject(objectId: string) {
+  zoneObjects.value = zoneObjects.value.filter((object) => object.id !== objectId)
+}
+
+function handleMove() {
+  console.log('move btn clicked')
+}
+
+onBeforeMount(() => {
+  tileArray.value.forEach((row, y) => row.forEach((_, x) => placeTile(zoneTilemap.value, tiles.value, x, y, 'blank_tile')))
+
+  if (zone.value?.tiles) {
+    setAllTiles(zoneTilemap.value, tiles.value, zone.value.tiles)
+    tileArray.value = zone.value.tiles.map((row) => row.map((tileId) => tileId || 'blank_tile'))
+  }
+
+  zoneEventTiles.value = zone.value?.zoneEventTiles ?? []
+  zoneObjects.value = zone.value?.zoneObjects ?? []
+
+  // Center camera
+  const centerY = (zoneTilemap.value.height * zoneTilemap.value.tileHeight) / 2
+  const centerX = (zoneTilemap.value.width * zoneTilemap.value.tileWidth) / 2
+  scene.cameras.main.centerOn(centerX, centerY)
+})
+
+onBeforeUnmount(() => {
+  zoneEventTiles.value = []
+  zoneObjects.value = []
+  tiles.value.destroy()
+  zoneTilemap.value.removeAllLayers()
+  zoneTilemap.value.destroy()
+  zoneEditorStore.reset()
+})
+</script>

src/components/gameMaster/zoneEditor/partials/CreateZone.vue

@@ -0,0 +1,58 @@
+<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-4">
+        <form method="post" @submit.prevent="submit" class="inline">
+          <div class="gap-2.5 flex flex-wrap">
+            <div class="form-field-full">
+              <label for="name">Name</label>
+              <input class="input-cyan max-w-64" v-model="name" name="name" id="name" />
+            </div>
+            <div class="form-field-half">
+              <label for="name">Width</label>
+              <input class="input-cyan max-w-64" v-model="width" name="name" id="name" type="number" />
+            </div>
+            <div class="form-field-half">
+              <label for="name">Height</label>
+              <input class="input-cyan max-w-64" v-model="height" name="name" id="name" type="number" />
+            </div>
+            <div class="form-field-full">
+              <label for="name">PVP enabled</label>
+              <select class="input-cyan" name="pvp" id="pvp">
+                <option :value="false">No</option>
+                <option :value="true">Yes</option>
+              </select>
+            </div>
+          </div>
+          <button class="btn-cyan px-4 py-1.5 min-w-24" type="submit">Save</button>
+        </form>
+      </div>
+    </template>
+  </Modal>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import Modal from '@/components/utilities/Modal.vue'
+import { useGameStore } from '@/stores/game'
+import { useZoneEditorStore } from '@/stores/zoneEditor'
+import type { Zone } from '@/types'
+
+const gameStore = useGameStore()
+const zoneEditorStore = useZoneEditorStore()
+
+const name = ref('')
+const width = ref(0)
+const height = ref(0)
+
+function submit() {
+  gameStore.connection.emit('gm:zone_editor:zone:create', { name: name.value, width: width.value, height: height.value }, (response: Zone[]) => {
+    zoneEditorStore.setZoneList(response)
+  })
+  zoneEditorStore.toggleCreateZoneModal()
+}
+</script>

src/components/gameMaster/zoneEditor/partials/ObjectList.vue

@@ -0,0 +1,97 @@
+<template>
+  <Teleport to="body">
+    <Modal v-if="isModalOpen" @modal:close="() => (zoneEditorStore.isObjectListModalShown = false)" :isModalOpen="true" :modal-width="645" :modal-height="260">
+      <template #modalHeader>
+        <h3 class="text-lg">Objects</h3>
+        <div class="flex">
+          <div class="w-full flex gap-1.5 flex-row">
+            <div>
+              <label class="mb-1.5 font-titles hidden" for="search">Search...</label>
+              <input @mousedown.stop class="input-cyan" type="text" name="search" placeholder="Search" v-model="searchQuery" />
+            </div>
+            <!--            <div>-->
+            <!--              <label class="mb-1.5 font-titles hidden" for="depth">Depth</label>-->
+            <!--              <input v-model="objectDepth" @mousedown.stop class="input-cyan" type="number" name="depth" placeholder="Depth" />-->
+            <!--            </div>-->
+          </div>
+        </div>
+      </template>
+      <template #modalBody>
+        <div class="flex flex-col h-full p-4">
+          <div class="mb-4 flex flex-wrap gap-2">
+            <button v-for="tag in uniqueTags" :key="tag" @click="toggleTag(tag)" class="btn-cyan" :class="{ 'opacity-50': !selectedTags.includes(tag) }">
+              {{ tag }}
+            </button>
+          </div>
+          <div class="h-full overflow-auto">
+            <div class="flex justify-between flex-wrap gap-2.5 items-center">
+              <div v-for="(object, index) in filteredObjects" :key="index" class="max-w-1/4 inline-block">
+                <img
+                  class="border-2 border-solid max-w-full"
+                  :src="`${config.server_endpoint}/assets/objects/${object.id}.png`"
+                  alt="Object"
+                  @click="zoneEditorStore.setSelectedObject(object)"
+                  :class="{
+                    'cursor-pointer transition-all duration-300': true,
+                    'border-cyan shadow-lg scale-105': zoneEditorStore.selectedObject?.id === object.id,
+                    'border-transparent hover:border-gray-300': zoneEditorStore.selectedObject?.id !== object.id
+                  }"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </Modal>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import config from '@/config'
+import { ref, onMounted, computed, watch } from 'vue'
+import { useZoneEditorStore } from '@/stores/zoneEditor'
+import { useGameStore } from '@/stores/game'
+import Modal from '@/components/utilities/Modal.vue'
+import type { Object } from '@/types'
+
+const gameStore = useGameStore()
+const isModalOpen = ref(false)
+const zoneEditorStore = useZoneEditorStore()
+const searchQuery = ref('')
+// const objectDepth = ref(0)
+const selectedTags = ref<string[]>([])
+
+// watch(objectDepth, (depth) => {
+//   zoneEditorStore.setObjectDepth(depth)
+// })
+
+const uniqueTags = computed(() => {
+  const allTags = zoneEditorStore.objectList.flatMap((obj) => obj.tags || [])
+  return Array.from(new Set(allTags))
+})
+
+const filteredObjects = computed(() => {
+  return zoneEditorStore.objectList.filter((object) => {
+    const matchesSearch = !searchQuery.value || object.name.toLowerCase().includes(searchQuery.value.toLowerCase())
+    const matchesTags = selectedTags.value.length === 0 || (object.tags && selectedTags.value.some((tag) => object.tags.includes(tag)))
+    return matchesSearch && matchesTags
+  })
+})
+
+const toggleTag = (tag: string) => {
+  if (selectedTags.value.includes(tag)) {
+    selectedTags.value = selectedTags.value.filter((t) => t !== tag)
+  } else {
+    selectedTags.value.push(tag)
+  }
+}
+
+onMounted(async () => {
+  zoneEditorStore.setObjectDepth(0)
+
+  isModalOpen.value = true
+  gameStore.connection?.emit('gm:object:list', {}, (response: Object[]) => {
+    zoneEditorStore.setObjectList(response)
+  })
+})
+</script>

src/components/gameMaster/zoneEditor/partials/SelectedZoneObject.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="flex flex-col items-center p-5 fixed bottom-6 mx-6 right-0">
+    <div class="self-end mt-2 flex gap-2">
+      <div>
+        <label class="mb-1.5 font-titles block text-sm text-gray-700 hidden" for="depth">Depth</label>
+        <input v-model="objectDepth" @mousedown.stop @input="handleDepthInput" class="input-cyan max-w-24 px-2 py-1 border rounded" type="number" name="depth" placeholder="Depth" :disabled="!isObjectSelected" />
+      </div>
+      <button @mousedown.stop @click="handleDelete" class="btn-bordeaux py-1.5 px-4" :disabled="!isObjectSelected">
+        <img src="/assets/icons/trashcan.svg" class="w-4 h-4" alt="Delete" />
+      </button>
+      <button @mousedown.stop @click="zoneEditorStore.setSelectedObject(zoneEditorStore.selectedZoneObject?.object)" class="btn-cyan py-1.5 px-4" :disabled="!isObjectSelected">S</button>
+      <button @mousedown.stop @click="handleMove" class="btn-cyan py-1.5 px-4 min-w-24" :disabled="!isObjectSelected">Move</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useZoneEditorStore } from '@/stores/zoneEditor'
+import { ref, computed, watch } from 'vue'
+
+const emit = defineEmits(['update_depth', 'move', 'delete'])
+const zoneEditorStore = useZoneEditorStore()
+
+const objectDepth = ref(zoneEditorStore.objectDepth)
+
+const isObjectSelected = computed(() => !!zoneEditorStore.selectedZoneObject)
+
+watch(
+  () => zoneEditorStore.selectedZoneObject,
+  (selectedZoneObject) => {
+    objectDepth.value = selectedZoneObject?.depth ?? 0
+  }
+)
+
+const handleDepthInput = () => {
+  const depth = parseFloat(objectDepth.value)
+  if (!isNaN(depth)) {
+    emit('update_depth', depth)
+  }
+}
+
+const handleMove = () => {
+  emit('move')
+}
+
+const handleDelete = () => {
+  emit('delete', zoneEditorStore.selectedZoneObject?.id)
+  zoneEditorStore.setSelectedZoneObject(null)
+}
+</script>

src/components/gameMaster/zoneEditor/partials/TeleportModal.vue

@@ -0,0 +1,80 @@
+<template>
+  <Modal :is-modal-open="true" @modal:close="() => zoneEditorStore.setTool('move')" :modal-width="300" :modal-height="250" :is-resizable="false">
+    <template #modalHeader>
+      <h3 class="m-0 font-medium shrink-0">Teleport settings</h3>
+    </template>
+
+    <template #modalBody>
+      <div class="m-4">
+        <form method="post" @submit.prevent="" class="inline">
+          <div class="gap-2.5 flex flex-wrap">
+            <div class="form-field-half">
+              <label for="positionX">Position X</label>
+              <input class="input-cyan" v-model="toPositionX" name="positionX" id="positionX" type="number" />
+            </div>
+            <div class="form-field-half">
+              <label for="positionY">Position Y</label>
+              <input class="input-cyan" v-model="toPositionY" name="positionY" id="positionY" type="number" />
+            </div>
+            <div class="form-field-full">
+              <label for="toZoneId">Zone to teleport to</label>
+              <select v-model="toZoneId" class="input-cyan" name="toZoneId" id="toZoneId">
+                <option :value="0">Select zone</option>
+                <option v-for="zone in zoneEditorStore.zoneList" :key="zone.id" :value="zone.id">{{ zone.name }}</option>
+              </select>
+            </div>
+          </div>
+        </form>
+      </div>
+    </template>
+  </Modal>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue'
+import Modal from '@/components/utilities/Modal.vue'
+import { useZoneEditorStore } from '@/stores/zoneEditor'
+import { useGameStore } from '@/stores/game'
+import type { Zone } from '@/types'
+
+const zoneEditorStore = useZoneEditorStore()
+const gameStore = useGameStore()
+
+onMounted(async () => {
+  fetchZones()
+})
+
+function fetchZones() {
+  gameStore.connection?.emit('gm:zone_editor:zone:list', {}, (response: Zone[]) => {
+    zoneEditorStore.setZoneList(response)
+  })
+}
+
+const toPositionX = ref(zoneEditorStore.teleportSettings.toPositionX)
+const toPositionY = ref(zoneEditorStore.teleportSettings.toPositionY)
+const toZoneId = ref(zoneEditorStore.teleportSettings.toZoneId)
+
+watch(toZoneId, (value) => {
+  zoneEditorStore.setTeleportSettings({
+    toPositionX: toPositionX.value,
+    toPositionY: toPositionY.value,
+    toZoneId: value
+  })
+})
+
+watch(toPositionX, (value) => {
+  zoneEditorStore.setTeleportSettings({
+    toPositionX: value,
+    toPositionY: toPositionY.value,
+    toZoneId: toZoneId.value
+  })
+})
+
+watch(toPositionY, (value) => {
+  zoneEditorStore.setTeleportSettings({
+    toPositionX: toPositionX.value,
+    toPositionY: value,
+    toZoneId: toZoneId.value
+  })
+})
+</script>

src/components/gameMaster/zoneEditor/partials/TileList.vue

@@ -0,0 +1,86 @@
+<template>
+  <Teleport to="body">
+    <Modal v-if="isModalOpen" @modal:close="() => (zoneEditorStore.isTileListModalShown = false)" :isModalOpen="true" :modal-width="645" :modal-height="600">
+      <template #modalHeader>
+        <h3 class="text-lg">Tiles</h3>
+        <div class="flex">
+          <div class="w-full flex gap-1.5 flex-row">
+            <div>
+              <label class="mb-1.5 font-titles hidden" for="search">Search...</label>
+              <input @mousedown.stop class="input-cyan" type="text" name="search" placeholder="Search" v-model="searchQuery" />
+            </div>
+          </div>
+        </div>
+      </template>
+      <template #modalBody>
+        <div class="flex flex-col h-full p-4">
+          <div class="mb-4 flex flex-wrap gap-2">
+            <button v-for="tag in uniqueTags" :key="tag" @click="toggleTag(tag)" class="btn-cyan" :class="{ 'opacity-50': !selectedTags.includes(tag) }">
+              {{ tag }}
+            </button>
+          </div>
+          <div class="h-[calc(100%_-_60px)] flex-grow overflow-y-auto">
+            <div class="grid grid-cols-8 gap-2 justify-items-center">
+              <div v-for="tile in filteredTiles" :key="tile.id" class="flex items-center justify-center">
+                <img
+                  class="max-w-full max-h-full border-2 border-solid"
+                  :src="`${config.server_endpoint}/assets/tiles/${tile.id}.png`"
+                  alt="Tile"
+                  @click="zoneEditorStore.setSelectedTile(tile)"
+                  :class="{
+                    'cursor-pointer transition-all duration-300': true,
+                    'border-cyan shadow-lg scale-105': zoneEditorStore.selectedTile?.id === tile.id,
+                    'border-transparent hover:border-gray-300': zoneEditorStore.selectedTile?.id !== tile.id
+                  }"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </Modal>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import config from '@/config'
+import { ref, onMounted, computed } from 'vue'
+import { useZoneEditorStore } from '@/stores/zoneEditor'
+import { useGameStore } from '@/stores/game'
+import Modal from '@/components/utilities/Modal.vue'
+import type { Tile } from '@/types'
+
+const gameStore = useGameStore()
+const isModalOpen = ref(false)
+const zoneEditorStore = useZoneEditorStore()
+const searchQuery = ref('')
+const selectedTags = ref<string[]>([])
+
+const uniqueTags = computed(() => {
+  const allTags = zoneEditorStore.tileList.flatMap((tile) => tile.tags || [])
+  return Array.from(new Set(allTags))
+})
+
+const filteredTiles = computed(() => {
+  return zoneEditorStore.tileList.filter((tile) => {
+    const matchesSearch = !searchQuery.value || tile.name.toLowerCase().includes(searchQuery.value.toLowerCase())
+    const matchesTags = selectedTags.value.length === 0 || (tile.tags && selectedTags.value.some((tag) => tile.tags.includes(tag)))
+    return matchesSearch && matchesTags
+  })
+})
+
+const toggleTag = (tag: string) => {
+  if (selectedTags.value.includes(tag)) {
+    selectedTags.value = selectedTags.value.filter((t) => t !== tag)
+  } else {
+    selectedTags.value.push(tag)
+  }
+}
+
+onMounted(async () => {
+  isModalOpen.value = true
+  gameStore.connection?.emit('gm:tile:list', {}, (response: Tile[]) => {
+    zoneEditorStore.setTileList(response)
+  })
+})
+</script>

src/components/gameMaster/zoneEditor/partials/Toolbar.vue

@@ -0,0 +1,209 @@
+<template>
+  <div class="flex justify-center p-5">
+    <div class="toolbar fixed top-6 mx-6 rounded left-0 right-0 flex bg-gray-300/80 solid border-solid border-2 border-cyan ext-gray-50 p-1.5 px-3 p min-w-11/12 h-10">
+      <div class="tools flex gap-2.5" v-if="zoneEditorStore.zone">
+        <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'move' }" @click="zoneEditorStore.setTool('move')">
+          <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/move.svg" alt="Move camera" /> <span :class="{ 'ml-2.5': zoneEditorStore.tool !== 'move' }">(M)</span>
+        </button>
+
+        <div class="w-px bg-cyan"></div>
+
+        <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'pencil' }" @click="handlePencilClick">
+          <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/pencil.svg" alt="Pencil" /> <span :class="{ 'ml-2.5': zoneEditorStore.tool !== 'pencil' }">(P)</span>
+          <div class="select" v-if="zoneEditorStore.tool === 'pencil'">
+            <div class="select-trigger group capitalize flex gap-3.5" :class="{ open: selectPencilOpen }">
+              {{ zoneEditorStore.drawMode }}
+              <img class="group-[.open]:rotate-180 invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/zoneEditor/chevron.svg" />
+            </div>
+            <div class="flex flex-col absolute top-full mt-5 left-1/2 -translate-x-1/2 bg-gray-300/80 rounded min-w-28 border border-cyan border-solid text-left" v-show="selectPencilOpen && zoneEditorStore.tool === 'pencil'">
+              <span class="py-2 px-2.5 relative hover:bg-cyan/50" @click="setDrawMode('tile')">
+                Tile
+                <div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
+              </span>
+              <span class="py-2 px-2.5 relative hover:bg-cyan/50" @click="setDrawMode('object')">
+                Object
+                <div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
+              </span>
+              <span class="py-2 px-2.5 relative hover:bg-cyan/50" @click="setDrawMode('teleport')">
+                Teleport
+                <div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
+              </span>
+              <span class="py-2 px-2.5 relative hover:bg-cyan/50" @click="setDrawMode('blocking tile')">Blocking tile</span>
+            </div>
+          </div>
+        </button>
+
+        <div class="w-px bg-cyan"></div>
+
+        <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'eraser' }" @click="handleEraserClick">
+          <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/eraser.svg" alt="Eraser" /> <span :class="{ 'ml-2.5': zoneEditorStore.tool !== 'eraser' }">(E)</span>
+          <div class="select" v-if="zoneEditorStore.tool === 'eraser'">
+            <div class="select-trigger group capitalize flex gap-3.5" :class="{ open: selectEraserOpen }">
+              {{ zoneEditorStore.eraserMode }}
+              <img class="group-[.open]:rotate-180 invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/zoneEditor/chevron.svg" />
+            </div>
+            <div class="flex flex-col absolute top-full mt-5 left-1/2 -translate-x-1/2 bg-gray-300/80 rounded min-w-28 border border-cyan border-solid text-left" v-show="selectEraserOpen">
+              <span class="py-2 px-2.5 relative hover:bg-cyan/50" @click="setEraserMode('tile')">
+                Tile
+                <div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
+              </span>
+              <span class="py-2 px-2.5 relative hover:bg-cyan/50" @click="setEraserMode('object')">
+                Object
+                <div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
+              </span>
+              <span class="py-2 px-2.5 relative hover:bg-cyan/50" @click="setEraserMode('teleport')">
+                Teleport
+                <div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
+              </span>
+              <span class="py-2 px-2.5 relative hover:bg-cyan/50" @click="setEraserMode('blocking tile')">Blocking tile</span>
+            </div>
+          </div>
+        </button>
+
+        <div class="w-px bg-cyan"></div>
+
+        <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'paint' }" @click="zoneEditorStore.setTool('paint')">
+          <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/paint.svg" alt="Paint bucket" /> <span :class="{ 'ml-2.5': zoneEditorStore.tool !== 'paint' }">(B)</span>
+        </button>
+
+        <div class="w-px bg-cyan"></div>
+
+        <button class="flex justify-center items-center min-w-10 p-0 relative" @click="() => zoneEditorStore.toggleSettingsModal()" v-if="zoneEditorStore.zone">
+          <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/gear.svg" alt="Zone settings" /> <span :class="{ 'ml-2.5': zoneEditorStore.tool !== 'settings' }">(Z)</span>
+        </button>
+      </div>
+
+      <div class="flex gap-2.5 ml-auto">
+        <button class="btn-cyan px-3.5" @click="() => zoneEditorStore.toggleZoneListModal()">Load</button>
+        <button class="btn-cyan px-3.5" @click="() => emit('save')" v-if="zoneEditorStore.zone">Save</button>
+        <button class="btn-cyan px-3.5" @click="() => emit('clear')" v-if="zoneEditorStore.zone">Clear</button>
+        <button class="btn-cyan px-3.5" @click="() => zoneEditorStore.toggleActive()">Exit</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { useScene } from 'phavuer'
+import { getTile } from '@/services/zone'
+import { useZoneEditorStore } from '@/stores/zoneEditor'
+import TilemapLayer = Phaser.Tilemaps.TilemapLayer
+
+const zoneEditorStore = useZoneEditorStore()
+
+const props = defineProps({
+  layer: Phaser.Tilemaps.TilemapLayer
+})
+const scene = useScene()
+const emit = defineEmits(['move', 'eraser', 'pencil', 'paint', 'save', 'clear'])
+
+// track select state
+let selectPencilOpen = ref(false)
+let selectEraserOpen = ref(false)
+
+// drawMode
+function setDrawMode(value: string) {
+  if (value === 'tile') {
+    zoneEditorStore.isTileListModalShown = true
+  }
+  if (value === 'object') {
+    zoneEditorStore.isObjectListModalShown = true
+  }
+  zoneEditorStore.setDrawMode(value)
+  selectPencilOpen.value = false
+}
+
+// drawMode
+function setEraserMode(value: string) {
+  zoneEditorStore.setEraserMode(value)
+  selectEraserOpen.value = false
+}
+
+function clickTile(pointer: Phaser.Input.Pointer) {
+  if (zoneEditorStore.tool !== 'eraser' && zoneEditorStore.tool !== 'pencil' && zoneEditorStore.tool !== 'paint') {
+    return
+  }
+
+  if (pointer.event.shiftKey) {
+    return
+  }
+
+  const px = scene.cameras.main.worldView.x + pointer.x
+  const py = scene.cameras.main.worldView.y + pointer.y
+
+  const pointer_tile = getTile(px, py, props.layer as TilemapLayer) as Phaser.Tilemaps.Tile
+  if (!pointer_tile) {
+    return
+  }
+
+  if (zoneEditorStore.tool === 'eraser') {
+    emit('eraser', pointer_tile)
+  }
+
+  if (zoneEditorStore.tool === 'pencil') {
+    emit('pencil', pointer_tile)
+  }
+
+  if (zoneEditorStore.tool === 'paint') {
+    emit('paint', pointer_tile)
+  }
+}
+
+function drawTiles(pointer: Phaser.Input.Pointer) {
+  if (!pointer.isDown) return
+  clickTile(pointer)
+}
+
+scene.input.on(Phaser.Input.Events.POINTER_UP, clickTile)
+scene.input.on(Phaser.Input.Events.POINTER_MOVE, drawTiles)
+
+onMounted(() => {
+  addEventListener('keydown', initKeyShortcuts)
+})
+
+onBeforeUnmount(() => {
+  scene.input.off(Phaser.Input.Events.POINTER_UP, clickTile)
+  scene.input.off(Phaser.Input.Events.POINTER_MOVE, drawTiles)
+  removeEventListener('keydown', initKeyShortcuts)
+})
+
+function handlePencilClick() {
+  zoneEditorStore.setTool('pencil')
+  selectPencilOpen.value = !selectPencilOpen.value
+}
+
+function handleEraserClick() {
+  zoneEditorStore.setTool('eraser')
+  selectEraserOpen.value = !selectEraserOpen.value
+}
+
+// Key bindings
+function initKeyShortcuts(event: KeyboardEvent) {
+  if (!zoneEditorStore.zone) return
+
+  // prevent if focussed on composables
+  if (document.activeElement?.tagName === 'INPUT') return
+
+  if (event.key === 'm') {
+    zoneEditorStore.setTool('move')
+  }
+
+  if (event.key === 'p') {
+    zoneEditorStore.setTool('pencil')
+  }
+
+  if (event.key === 'e') {
+    zoneEditorStore.setTool('eraser')
+  }
+
+  if (event.key === 'b') {
+    zoneEditorStore.setTool('paint')
+  }
+
+  if (event.key === 'z') {
+    console.log('settings')
+    zoneEditorStore.toggleSettingsModal()
+  }
+}
+</script>

src/components/gameMaster/zoneEditor/partials/ZoneList.vue

@@ -0,0 +1,64 @@
+<template>
+  <CreateZone v-if="zoneEditorStore.isCreateZoneModalShown" />
+
+  <Teleport to="body">
+    <Modal @modal:close="() => zoneEditorStore.toggleZoneListModal()" :is-resizable="false" :is-modal-open="true" :modal-width="300" :modal-height="360">
+      <template #modalHeader>
+        <h3 class="text-lg">Zones</h3>
+      </template>
+      <template #modalBody>
+        <div class="my-4 mx-auto">
+          <div class="text-center mb-4 px-2 flex gap-2.5">
+            <button class="btn-cyan py-1.5 min-w-[calc(50%_-_5px)]" @click="fetchZones">Refresh</button>
+            <button class="btn-cyan py-1.5 min-w-[calc(50%_-_5px)]" @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 zoneEditorStore.zoneList" :key="zone.id">
+            <div class="absolute left-0 top-0 w-full h-px bg-cyan-200" v-if="index === 0"></div>
+            <div class="flex gap-3 items-center w-full" @click="() => loadZone(zone.id)">
+              <span>{{ zone.name }}</span>
+              <span class="ml-auto gap-1 flex">
+                <button class="btn-bordeaux py-0.5 px-2.5 z-50" @click.stop="() => deleteZone(zone.id)">X</button>
+              </span>
+            </div>
+            <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+          </div>
+        </div>
+      </template>
+    </Modal>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { useGameStore } from '@/stores/game'
+import Modal from '@/components/utilities/Modal.vue'
+import type { Zone } from '@/types'
+import { useZoneEditorStore } from '@/stores/zoneEditor'
+import CreateZone from '@/components/gameMaster/zoneEditor/partials/CreateZone.vue'
+
+const gameStore = useGameStore()
+const zoneEditorStore = useZoneEditorStore()
+
+onMounted(async () => {
+  fetchZones()
+})
+
+function fetchZones() {
+  gameStore.connection?.emit('gm:zone_editor:zone:list', {}, (response: Zone[]) => {
+    zoneEditorStore.setZoneList(response)
+  })
+}
+
+function loadZone(id: number) {
+  gameStore.connection?.emit('gm:zone_editor:zone:request', { zoneId: id }, (response: Zone) => {
+    zoneEditorStore.setZone(response)
+  })
+  zoneEditorStore.toggleZoneListModal()
+}
+
+function deleteZone(id: number) {
+  gameStore.connection?.emit('gm:zone_editor:zone:delete', { zoneId: id }, () => {
+    fetchZones()
+  })
+}
+</script>

src/components/gameMaster/zoneEditor/partials/ZoneSettings.vue

@@ -0,0 +1,64 @@
+<template>
+  <Modal :is-modal-open="true" @modal:close="() => zoneEditorStore.toggleSettingsModal()" :modal-width="300" :modal-height="350" :is-resizable="false">
+    <template #modalHeader>
+      <h3 class="m-0 font-medium shrink-0">Zone settings</h3>
+    </template>
+
+    <template #modalBody>
+      <div class="m-4">
+        <form method="post" @submit.prevent="" class="inline">
+          <div class="gap-2.5 flex flex-wrap">
+            <div class="form-field-full">
+              <label for="name">Name</label>
+              <input class="input-cyan" v-model="name" name="name" id="name" />
+            </div>
+            <div class="form-field-half">
+              <label for="name">Width</label>
+              <input class="input-cyan" v-model="width" name="name" id="name" type="number" />
+            </div>
+            <div class="form-field-half">
+              <label for="name">Height</label>
+              <input class="input-cyan" v-model="height" name="name" id="name" type="number" />
+            </div>
+            <div class="form-field-full">
+              <label for="pvp">PVP enabled</label>
+              <select v-model="pvp" class="input-cyan" name="pvp" id="pvp">
+                <option :value="false">No</option>
+                <option :value="true">Yes</option>
+              </select>
+            </div>
+          </div>
+        </form>
+      </div>
+    </template>
+  </Modal>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import Modal from '@/components/utilities/Modal.vue'
+import { useZoneEditorStore } from '@/stores/zoneEditor.ts'
+
+const zoneEditorStore = useZoneEditorStore()
+
+const name = ref(zoneEditorStore.zone?.name)
+const width = ref(zoneEditorStore.zone?.width)
+const height = ref(zoneEditorStore.zone?.height)
+const pvp = ref(zoneEditorStore.zone?.pvp)
+
+watch(name, (value) => {
+  zoneEditorStore.setZoneName(value)
+})
+
+watch(width, (value) => {
+  zoneEditorStore.setZoneWidth(value)
+})
+
+watch(height, (value) => {
+  zoneEditorStore.setZoneHeight(value)
+})
+
+watch(pvp, (value) => {
+  zoneEditorStore.setZonePvp(value)
+})
+</script>