#263 - Updated character movement to pure ts (WIP)

.env.example

@@ -1,5 +1,5 @@
 VITE_NAME=Noxious
 VITE_DEVELOPMENT=true
 VITE_SERVER_ENDPOINT=http://localhost:4000
-VITE_TILE_SIZE_WIDTH=64
+VITE_TILE_SIZE_X=64
-VITE_TILE_SIZE_HEIGHT=32
+VITE_TILE_SIZE_Y=32

.eslintrc.cjs

@@ -0,0 +1,13 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+  root: true,
+  extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/eslint-config-typescript', '@vue/eslint-config-prettier/skip-formatting'],
+  parserOptions: {
+    ecmaVersion: 'latest'
+  },
+  rules: {
+    'vue/multi-word-component-names': 'off'
+  }
+}

.vscode/extensions.json

@@ -1,6 +1,7 @@
 {
   "recommendations": [
     "Vue.volar",
+    "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode"
   ]
 }

package.json

@@ -11,6 +11,7 @@
     "test:unit": "vitest",
     "build-only": "vite build",
     "type-check": "vue-tsc --build --force",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
     "format": "prettier --write src/"
   },
   "dependencies": {
@@ -27,13 +28,18 @@
   },
   "devDependencies": {
     "@ianvs/prettier-plugin-sort-imports": "^4.4.0",
+    "@rushstack/eslint-patch": "^1.10.3",
     "@tsconfig/node20": "^20.1.4",
     "@types/jsdom": "^21.1.7",
     "@types/node": "^20.14.11",
     "@vitejs/plugin-vue": "^5.0.5",
+    "@vue/eslint-config-prettier": "^9.0.0",
+    "@vue/eslint-config-typescript": "^13.0.0",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.5.1",
     "autoprefixer": "^10.4.19",
+    "eslint": "^8.57.0",
+    "eslint-plugin-vue": "^9.27.0",
     "jsdom": "^24.1.1",
     "npm-run-all2": "^6.2.3",
     "phaser3-rex-plugins": "^1.80.8",
@@ -45,6 +51,7 @@
     "typescript": "~5.6.2",
     "vite": "^5.4.9",
     "vite-plugin-compression": "^0.5.1",
+    "vite-plugin-vue-devtools": "^7.5.2",
     "vitest": "^2.0.3",
     "vue-tsc": "^1.6.5"
   }

src/App.vue

@@ -1,8 +1,7 @@
 <template>
-  <Debug />
   <Notifications />
   <BackgroundImageLoader />
-  <GmPanel v-if="gameStore.character?.role === 'gm'" @open-map-editor="mapEditor.toggleActive" />
+  <GmPanel v-if="gameStore.character?.role === 'gm'" />
   <component :is="currentScreen" />
 </template>
 
@@ -10,39 +9,34 @@
 import GmPanel from '@/components/gameMaster/GmPanel.vue'
 import Characters from '@/components/screens/Characters.vue'
 import Game from '@/components/screens/Game.vue'
-import Loading from '@/components/screens/Loading.vue'
 import Login from '@/components/screens/Login.vue'
-import MapEditor from '@/components/screens/MapEditor.vue'
+import ZoneEditor from '@/components/screens/ZoneEditor.vue'
 import BackgroundImageLoader from '@/components/utilities/BackgroundImageLoader.vue'
-import Debug from '@/components/utilities/Debug.vue'
 import Notifications from '@/components/utilities/Notifications.vue'
-import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
 import { useGameStore } from '@/stores/gameStore'
-import { useMapEditorStore } from '@/stores/mapEditorStore'
+import { useZoneEditorStore } from '@/stores/zoneEditorStore'
-import { computed, ref, useTemplateRef, watch } from 'vue'
+import { computed, watch } from 'vue'
 
 const gameStore = useGameStore()
-const mapEditor = useMapEditorComposable()
+const zoneEditorStore = useZoneEditorStore()
 
 const currentScreen = computed(() => {
-  if (!gameStore.game.isLoaded) return Loading
   if (!gameStore.connection) return Login
   if (!gameStore.token) return Login
   if (!gameStore.character) return Characters
-  if (mapEditor.active.value) return MapEditor
+  if (zoneEditorStore.active) return ZoneEditor
   return Game
 })
 
-// Watch mapEditor.active and empty gameStore.game.loadedAssets
+// Watch zoneEditorStore.active and empty gameStore.game.loadedAssets
 watch(
-  () => mapEditor.active.value,
+  () => zoneEditorStore.active,
   () => {
-    gameStore.game.loadedTextures = []
+    gameStore.game.loadedAssets = []
   }
 )
 
 // #209: Play sound when a button is pressed
-// @TODO: Not all button-like elements will actually be a button, so we need to find a better way to do this
 addEventListener('click', (event) => {
   if (!(event.target instanceof HTMLButtonElement)) {
     return
@@ -56,9 +50,7 @@ addEventListener('keydown', (event) => {
   if (gameStore.character?.role !== 'gm') return // Only allow toggling the gm panel if the character is a gm
 
   // Check if no input is active or focus is on an input
-  if (event.repeat || event.isComposing || event.defaultPrevented || document.activeElement?.tagName.toUpperCase() === 'INPUT' || document.activeElement?.tagName.toUpperCase() === 'TEXTAREA') {
+  if (event.repeat || event.isComposing || event.defaultPrevented || document.activeElement?.tagName.toUpperCase() === 'INPUT' || document.activeElement?.tagName.toUpperCase() === 'TEXTAREA') return
-    return
-  }
 
   if (event.key === 'G') {
     gameStore.toggleGmPanel()

src/application/assets.ts

@@ -0,0 +1,81 @@
+import config from '@/application/config'
+import type { AssetDataT } from '@/application/types'
+import Dexie from 'dexie'
+
+export class Assets {
+  private db: Dexie
+
+  constructor() {
+    this.db = new Dexie('assets')
+    this.db.version(1).stores({
+      assets: 'key, group'
+    })
+  }
+
+  async download(asset: AssetDataT) {
+    try {
+      // Check if the asset already exists, then check if updatedAt is newer
+      const _asset = await this.db.table('assets').get(asset.key)
+      if (_asset && _asset.updatedAt > asset.updatedAt) {
+        return
+      }
+
+      // Download the asset
+      const response = await fetch(config.server_endpoint + asset.data)
+      const blob = await response.blob()
+
+      // Store the asset in the database
+      await this.db.table('assets').put({
+        key: asset.key,
+        data: blob,
+        group: asset.group,
+        updatedAt: asset.updatedAt,
+        originX: asset.originX,
+        originY: asset.originY,
+        isAnimated: asset.isAnimated,
+        frameRate: asset.frameRate,
+        frameWidth: asset.frameWidth,
+        frameHeight: asset.frameHeight,
+        frameCount: asset.frameCount
+      })
+    } catch (error) {
+      console.error(`Failed to add asset ${asset.key}:`, error)
+    }
+  }
+
+  async get(key: string) {
+    try {
+      const asset = await this.db.table('assets').get(key)
+      if (asset) {
+        return {
+          ...asset,
+          data: URL.createObjectURL(asset.data) // Convert blob to data URL
+        }
+      }
+    } catch (error) {
+      console.error(`Failed to retrieve asset ${key}:`, error)
+    }
+    return null
+  }
+
+  async getByGroup(group: string) {
+    try {
+      const assets = await this.db.table('assets').where('group').equals(group).toArray()
+      return assets.map((asset) => ({
+        ...asset,
+        data: URL.createObjectURL(asset.data) // Convert blob to data URL
+      }))
+    } catch (error) {
+      console.error(`Failed to retrieve assets for group ${group}:`, error)
+      return []
+    }
+  }
+
+  async delete(key: string) {
+    try {
+      await this.db.table('assets').delete(key)
+    } catch (error) {
+      console.error(`Failed to delete asset ${key}:`, error)
+    }
+  }
+}

src/application/config.ts

@@ -3,7 +3,7 @@ export default {
   development: import.meta.env.VITE_DEVELOPMENT === 'true',
   server_endpoint: import.meta.env.VITE_SERVER_ENDPOINT,
   tile_size: {
-    width: Number(import.meta.env.VITE_TILE_SIZE_WIDTH),
+    x: Number(import.meta.env.VITE_TILE_SIZE_X),
-    height: Number(import.meta.env.VITE_TILE_SIZE_HEIGHT)
+    y: Number(import.meta.env.VITE_TILE_SIZE_Y)
   }
 }

src/application/enums.ts

@@ -1,5 +0,0 @@
-export enum Direction {
-  POSITIVE,
-  NEGATIVE,
-  UNCHANGED
-}

src/application/types.ts

@@ -12,13 +12,14 @@ export type HttpResponse<T> = {
   data?: T
 }
 
-export type TextureData = {
+export type AssetDataT = {
   key: string
-  data: string // URL or Base64 encoded blob
+  data: string
-  group: 'tiles' | 'map_objects' | 'sprites' | 'sprite_animations' | 'sound' | 'music' | 'ui' | 'font' | 'other'
+  group: 'tiles' | 'objects' | 'sprites' | 'sprite_animations' | 'sound' | 'music' | 'ui' | 'font' | 'other'
   updatedAt: Date
   originX?: number
   originY?: number
+  isAnimated?: boolean
   frameRate?: number
   frameWidth?: number
   frameHeight?: number
@@ -33,17 +34,19 @@ export type Tile = {
   updatedAt: Date
 }
 
-export type MapObject = {
+export type Object = {
   id: UUID
   name: string
   tags: any | null
   originX: number
   originY: number
+  isAnimated: boolean
   frameRate: number
   frameWidth: number
   frameHeight: number
   createdAt: Date
   updatedAt: Date
+  ZoneObject: ZoneObject[]
 }
 
 export type Item = {
@@ -53,6 +56,7 @@ export type Item = {
   itemType: ItemType
   stackable: boolean
   rarity: ItemRarity
+  spriteId: UUID | null
   sprite?: Sprite
   createdAt: Date
   updatedAt: Date
@@ -61,59 +65,65 @@ export type Item = {
 export type ItemType = 'WEAPON' | 'HELMET' | 'CHEST' | 'LEGS' | 'BOOTS' | 'GLOVES' | 'RING' | 'NECKLACE'
 export type ItemRarity = 'COMMON' | 'UNCOMMON' | 'RARE' | 'EPIC' | 'LEGENDARY'
 
-export type Map = {
+export type Zone = {
   id: UUID
   name: string
   width: number
   height: number
-  tiles: string[][]
+  tiles: any | null
   pvp: boolean
-  mapEffects: MapEffect[]
+  zoneEffects: ZoneEffect[]
-  mapEventTiles: MapEventTile[]
+  zoneEventTiles: ZoneEventTile[]
-  placedMapObjects: PlacedMapObject[]
+  zoneObjects: ZoneObject[]
   characters: Character[]
   chats: Chat[]
   createdAt: Date
   updatedAt: Date
 }
 
-export type MapEffect = {
+export type ZoneEffect = {
   id: UUID
-  map: Map
+  zoneId: UUID
+  zone: Zone
   effect: string
   strength: number
 }
 
-export type PlacedMapObject = {
+export type ZoneObject = {
   id: UUID
-  map: Map
+  zoneId: UUID
-  mapObject: MapObject
+  zone: Zone
+  objectId: UUID
+  object: Object
   depth: number
   isRotated: boolean
   positionX: number
   positionY: number
 }
 
-export enum MapEventTileType {
+export enum ZoneEventTileType {
   BLOCK = 'BLOCK',
   TELEPORT = 'TELEPORT',
   NPC = 'NPC',
   ITEM = 'ITEM'
 }
 
-export type MapEventTile = {
+export type ZoneEventTile = {
   id: UUID
-  mapId: UUID
+  zoneId: UUID
-  type: MapEventTileType
+  zone: Zone
+  type: ZoneEventTileType
   positionX: number
   positionY: number
-  teleport?: MapEventTileTeleport
+  teleport?: ZoneEventTileTeleport
 }
 
-export type MapEventTileTeleport = {
+export type ZoneEventTileTeleport = {
   id: UUID
-  mapEventTile: MapEventTile
+  zoneEventTileId: UUID
-  toMap: Map
+  zoneEventTile: ZoneEventTile
+  toZoneId: UUID
+  toZone: Zone
   toPositionX: number
   toPositionY: number
   toRotation: number
@@ -145,6 +155,8 @@ export type CharacterType = {
   gender: CharacterGender
   race: CharacterRace
   isSelectable: boolean
+  characters: Character[]
+  spriteId?: string
   sprite?: Sprite
   createdAt: Date
   updatedAt: Date
@@ -153,7 +165,7 @@ export type CharacterType = {
 export type CharacterHair = {
   id: UUID
   name: string
-  sprite?: Sprite
+  sprite: Sprite
   gender: CharacterGender
   isSelectable: boolean
 }
@@ -172,23 +184,27 @@ export type Character = {
   positionX: number
   positionY: number
   rotation: number
-  characterType: UUID | null
+  characterTypeId: UUID | null
-  characterHair: UUID | null
+  characterType: CharacterType | null | string
-  map: UUID
+  characterHairId: UUID | null
+  characterHair: CharacterHair | null
+  zoneId: UUID
+  zone: Zone
   chats: Chat[]
   items: CharacterItem[]
   equipment: CharacterEquipment[]
 }
 
-export type MapCharacter = {
+export type ZoneCharacter = {
   character: Character
-  isMoving: boolean
+  isMoving?: boolean
-  isAttacking?: boolean
 }
 
 export type CharacterItem = {
   id: UUID
+  characterId: UUID
   character: Character
+  itemId: UUID
   item: Item
   quantity: number
 }
@@ -196,6 +212,7 @@ export type CharacterItem = {
 export type CharacterEquipment = {
   id: UUID
   slot: CharacterEquipmentSlotType
+  characterItemId: UUID
   characterItem: CharacterItem
 }
 
@@ -217,45 +234,45 @@ export type Sprite = {
   characterTypes: CharacterType[]
 }
 
-export interface SpriteImage {
-  url: string
-  offset: {
-    x: number
-    y: number
-  }
-}
-
 export type SpriteAction = {
-  id: string
+  id: UUID
-  sprite: string
+  sprite: Sprite
   action: string
-  sprites: SpriteImage[]
+  sprites: string[]
   originX: number
   originY: number
+  isAnimated: boolean
+  isLooping: boolean
   frameWidth: number
   frameHeight: number
   frameRate: number
 }
 
 export type Chat = {
-  id: string
+  id: UUID
+  characterId: UUID
   character: Character
-  map: Map
+  zoneId: UUID
+  zone: Zone
   message: string
   createdAt: Date
 }
 
 export type WorldSettings = {
   date: Date
-  weatherState: WeatherState
+  isRainEnabled: boolean
-}
+  isFogEnabled: boolean
-
-export type WeatherState = {
-  rainPercentage: number
   fogDensity: number
 }
 
-export type mapLoadData = {
+export type WeatherState = {
-  mapId: UUID
+  isRainEnabled: boolean
-  characters: MapCharacter[]
+  rainPercentage: number
+  isFogEnabled: boolean
+  fogDensity: number
+}
+
+export type zoneLoadData = {
+  zone: Zone
+  characters: ZoneCharacter[]
 }

src/application/utilities.ts

@@ -1,7 +1,3 @@
-import config from '@/application/config'
-import type { HttpResponse } from '@/application/types'
-import type { BaseStorage } from '@/storage/baseStorage'
-
 export function uuidv4() {
   return '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, (c) => (+c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (+c / 4)))).toString(16))
 }
@@ -27,26 +23,3 @@ export function getDomain() {
 
   return window.location.hostname.split('.').slice(-2).join('.')
 }
-
-export async function downloadCache<T extends { id: string; updatedAt: Date }>(endpoint: string, storage: BaseStorage<T>) {
-  const request = await fetch(`${config.server_endpoint}/cache/${endpoint}`)
-  const response = (await request.json()) as HttpResponse<T[]>
-
-  if (!response.success) {
-    console.error(`Failed to download ${endpoint}:`, response.message)
-    return
-  }
-
-  const items = response.data ?? []
-
-  for (const item of items) {
-    let overwrite = false
-    const existingItem = await storage.get(item.id)
-
-    if (!existingItem || item.updatedAt > existingItem.updatedAt) {
-      overwrite = true
-    }
-
-    await storage.add(item, overwrite)
-  }
-}

src/components/Effects.vue

@@ -0,0 +1,179 @@
+<template>
+  <Scene name="effects" @preload="preloadScene" @create="createScene" @update="updateScene" />
+</template>
+
+<script setup lang="ts">
+import type { WeatherState } from '@/application/types'
+import { useGameStore } from '@/stores/gameStore'
+import { useZoneStore } from '@/stores/zoneStore'
+import { Scene } from 'phavuer'
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
+// Constants
+const LIGHT_CONFIG = {
+  SUNRISE_HOUR: 6,
+  SUNSET_HOUR: 20,
+  DAY_STRENGTH: 100,
+  NIGHT_STRENGTH: 30
+}
+
+// Stores and refs
+const gameStore = useGameStore()
+const zoneStore = useZoneStore()
+const sceneRef = ref<Phaser.Scene | null>(null)
+const zoneEffectsReady = ref(false)
+
+// Effect objects
+const effects = {
+  light: ref<Phaser.GameObjects.Graphics | null>(null),
+  rain: ref<Phaser.GameObjects.Particles.ParticleEmitter | null>(null),
+  fog: ref<Phaser.GameObjects.Sprite | null>(null)
+}
+
+// Weather state
+const weatherState = ref<WeatherState>({
+  isRainEnabled: false,
+  rainPercentage: 0,
+  isFogEnabled: false,
+  fogDensity: 0
+})
+
+// Scene setup
+const preloadScene = (scene: Phaser.Scene) => {
+  scene.load.image('raindrop', 'assets/raindrop.png')
+  scene.load.image('fog', 'assets/fog.png')
+}
+
+const createScene = (scene: Phaser.Scene) => {
+  sceneRef.value = scene
+  initializeEffects(scene)
+  setupSocketListeners()
+}
+
+const initializeEffects = (scene: Phaser.Scene) => {
+  // Light
+  effects.light.value = scene.add.graphics().setDepth(1000)
+
+  // Rain
+  effects.rain.value = scene.add
+    .particles(0, 0, 'raindrop', {
+      x: { min: 0, max: window.innerWidth },
+      y: -50,
+      quantity: 5,
+      lifespan: 2000,
+      speedY: { min: 300, max: 500 },
+      scale: { start: 0.005, end: 0.005 },
+      alpha: { start: 0.5, end: 0 },
+      blendMode: 'ADD'
+    })
+    .setDepth(900)
+  effects.rain.value.stop()
+
+  // Fog
+  effects.fog.value = scene.add
+    .sprite(window.innerWidth / 2, window.innerHeight / 2, 'fog')
+    .setScale(2)
+    .setAlpha(0)
+    .setDepth(950)
+}
+
+// Effect updates
+const updateScene = () => {
+  const timeBasedLight = calculateLightStrength(gameStore.world.date)
+  const zoneEffects = zoneStore.zone?.zoneEffects?.reduce(
+    (acc, curr) => ({
+      ...acc,
+      [curr.effect]: curr.strength
+    }),
+    {}
+  ) as { [key: string]: number }
+
+  // Only update effects once zoneEffects are loaded
+  if (!zoneEffectsReady.value) {
+    if (zoneEffects && Object.keys(zoneEffects).length) {
+      zoneEffectsReady.value = true
+    } else {
+      return
+    }
+  }
+
+  const finalEffects =
+    zoneEffects && Object.keys(zoneEffects).length
+      ? zoneEffects
+      : {
+          light: timeBasedLight,
+          rain: weatherState.value.isRainEnabled ? weatherState.value.rainPercentage : 0,
+          fog: weatherState.value.isFogEnabled ? weatherState.value.fogDensity * 100 : 0
+        }
+
+  applyEffects(finalEffects)
+}
+
+const applyEffects = (effectValues: any) => {
+  if (effects.light.value) {
+    const darkness = 1 - (effectValues.light ?? 100) / 100
+    effects.light.value.clear().fillStyle(0x000000, darkness).fillRect(0, 0, window.innerWidth, window.innerHeight)
+  }
+
+  if (effects.rain.value) {
+    const strength = effectValues.rain ?? 0
+    strength > 0 ? effects.rain.value.start().setQuantity(Math.floor((strength / 100) * 10)) : effects.rain.value.stop()
+  }
+
+  if (effects.fog.value) {
+    effects.fog.value.setAlpha((effectValues.fog ?? 0) / 100)
+  }
+}
+
+const calculateLightStrength = (time: Date): number => {
+  const hour = time.getHours()
+  const minute = time.getMinutes()
+
+  if (hour >= LIGHT_CONFIG.SUNSET_HOUR || hour < LIGHT_CONFIG.SUNRISE_HOUR) return LIGHT_CONFIG.NIGHT_STRENGTH
+
+  if (hour > LIGHT_CONFIG.SUNRISE_HOUR && hour < LIGHT_CONFIG.SUNSET_HOUR - 2) return LIGHT_CONFIG.DAY_STRENGTH
+
+  if (hour === LIGHT_CONFIG.SUNRISE_HOUR) return LIGHT_CONFIG.NIGHT_STRENGTH + ((LIGHT_CONFIG.DAY_STRENGTH - LIGHT_CONFIG.NIGHT_STRENGTH) * minute) / 60
+
+  const totalMinutes = (hour - (LIGHT_CONFIG.SUNSET_HOUR - 2)) * 60 + minute
+  return LIGHT_CONFIG.DAY_STRENGTH - (LIGHT_CONFIG.DAY_STRENGTH - LIGHT_CONFIG.NIGHT_STRENGTH) * (totalMinutes / 120)
+}
+
+// Socket and window handlers
+const setupSocketListeners = () => {
+  gameStore.connection?.emit('weather', (response: WeatherState) => {
+    weatherState.value = response
+    updateScene()
+  })
+
+  gameStore.connection!.on('weather', (data: WeatherState) => {
+    weatherState.value = data
+    updateScene()
+  })
+
+  gameStore.connection!.on('date', updateScene)
+}
+
+const handleResize = () => {
+  if (effects.rain.value) effects.rain.value.updateConfig({ x: { min: 0, max: window.innerWidth } })
+  if (effects.fog.value) effects.fog.value.setPosition(window.innerWidth / 2, window.innerHeight / 2)
+}
+
+// Lifecycle
+watch(
+  () => zoneStore.zone,
+  () => {
+    zoneEffectsReady.value = false
+    updateScene()
+  },
+  { deep: true }
+)
+
+onMounted(() => window.addEventListener('resize', handleResize))
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', handleResize)
+  if (sceneRef.value) sceneRef.value.scene.remove('effects')
+  gameStore.connection?.off('weather')
+})
+</script>

src/components/forms/ChipsInput.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="flex flex-wrap items-center input-field gap-1" @click="focusInput">
+  <div class="flex flex-wrap items-center input-field gap-1">
-    <div v-for="(chip, i) in internalValue" :key="i" class="flex gap-2.5 items-center bg-cyan rounded py-1 px-2" role="listitem">
+    <div v-for="(chip, i) in internalValue" :key="i" class="flex gap-2.5 items-center bg-cyan rounded py-1 px-2">
       <span class="text-xs text-white">{{ chip }}</span>
-      <button type="button" class="text-xs cursor-pointer text-white font-light font-default not-italic hover:text-gray-50" @click.stop="deleteChip(i)" aria-label="Remove tag">×</button>
+      <button type="button" class="text-xs cursor-pointer text-white font-light font-default not-italic hover:text-gray-50" @click="deleteChip(i)" aria-label="Remove chip">×</button>
     </div>
-    <input ref="inputRef" class="outline-none border-none p-1 text-gray-300 min-w-[60px] flex-grow" :placeholder="placeholder" v-model.trim="currentInput" @keydown="handleKeydown" @paste="handlePaste" :maxlength="maxChipLength" aria-label="Add new tag" />
+    <input class="outline-none border-none p-1 text-gray-300" placeholder="Tag name" v-model="currentInput" @keypress.enter.prevent="addChip" @keydown.backspace="handleBackspace" />
   </div>
 </template>
 
@@ -14,29 +14,20 @@ import type { Ref } from 'vue'
 
 interface Props {
   modelValue?: string[]
-  maxChips?: number
-  maxChipLength?: number
-  placeholder?: string
-  allowDuplicates?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  modelValue: () => [],
+  modelValue: () => []
-  maxChips: 10,
-  maxChipLength: 20,
-  placeholder: 'Add tag',
-  allowDuplicates: false
 })
 
 const emit = defineEmits<{
   (e: 'update:modelValue', value: string[]): void
-  (e: 'error', message: string): void
 }>()
 
 const currentInput: Ref<string> = ref('')
 const internalValue = ref<string[]>([])
-const inputRef = ref<HTMLInputElement | null>(null)
 
+// Initialize internalValue with props.modelValue
 watch(
   () => props.modelValue,
   (newValue) => {
@@ -45,27 +36,9 @@ watch(
   { immediate: true }
 )
 
-const validateChip = (chip: string): boolean => {
-  if (!chip) {
-    return false
-  }
-
-  if (!props.allowDuplicates && internalValue.value.includes(chip)) {
-    emit('error', 'Duplicate tags are not allowed')
-    return false
-  }
-
-  if (internalValue.value.length >= props.maxChips) {
-    emit('error', `Maximum ${props.maxChips} tags allowed`)
-    return false
-  }
-
-  return true
-}
-
 const addChip = () => {
   const trimmedInput = currentInput.value.trim()
-  if (validateChip(trimmedInput)) {
+  if (trimmedInput && !internalValue.value.includes(trimmedInput)) {
     internalValue.value.push(trimmedInput)
     emit('update:modelValue', internalValue.value)
     currentInput.value = ''
@@ -77,36 +50,10 @@ const deleteChip = (index: number) => {
   emit('update:modelValue', internalValue.value)
 }
 
-const handleKeydown = (event: KeyboardEvent) => {
+const handleBackspace = (event: KeyboardEvent) => {
-  switch (event.key) {
+  if (event.key === 'Backspace' && currentInput.value === '' && internalValue.value.length > 0) {
-    case 'Enter':
+    internalValue.value.pop()
-      event.preventDefault()
+    emit('update:modelValue', internalValue.value)
-      addChip()
-      break
-    case 'Backspace':
-      if (currentInput.value === '' && internalValue.value.length > 0) {
-        deleteChip(internalValue.value.length - 1)
   }
-      break
-  }
-}
-
-const handlePaste = (event: ClipboardEvent) => {
-  event.preventDefault()
-  const pastedText = event.clipboardData?.getData('text')
-  if (pastedText) {
-    const chips = pastedText
-      .split(/[,\n]/)
-      .map((chip) => chip.trim())
-      .filter(Boolean)
-    chips.forEach((chip) => {
-      currentInput.value = chip
-      addChip()
-    })
-  }
-}
-
-const focusInput = () => {
-  inputRef.value?.focus()
 }
 </script>

src/components/game/character/Character.vue

@@ -1,69 +1,192 @@
 <template>
-  <Container ref="characterContainer" :x="currentPositionX" :y="currentPositionY" :depth="isometricDepth">
+  <ChatBubble :zoneCharacter="props.zoneCharacter" :currentX="currentX" :currentY="currentY" />
-    <ChatBubble :mapCharacter="props.mapCharacter" />
+  <Healthbar :zoneCharacter="props.zoneCharacter" :currentX="currentX" :currentY="currentY" />
-    <HealthBar :mapCharacter="props.mapCharacter" />
+  <Container ref="charContainer" :depth="isometricDepth" :x="currentX" :y="currentY">
-    <CharacterHair :mapCharacter="props.mapCharacter" />
+    <CharacterHair :zoneCharacter="props.zoneCharacter" :currentX="currentX" :currentY="currentY" />
-    <Sprite ref="characterSprite" :origin-y="1" :flipX="isFlippedX" />
+    <!--    <CharacterChest :zoneCharacter="props.zoneCharacter" :currentX="currentX" :currentY="currentY" />-->
+    <Sprite ref="charSprite" :origin-y="1" :flipX="isFlippedX" />
   </Container>
 </template>
 
 <script lang="ts" setup>
-import { Direction } from '@/application/enums'
+import config from '@/application/config'
-import { type MapCharacter } from '@/application/types'
+import { type Sprite as SpriteT, type ZoneCharacter } from '@/application/types'
 import CharacterHair from '@/components/game/character/partials/CharacterHair.vue'
 import ChatBubble from '@/components/game/character/partials/ChatBubble.vue'
-import HealthBar from '@/components/game/character/partials/HealthBar.vue'
+import Healthbar from '@/components/game/character/partials/Healthbar.vue'
-import { useCharacterSprite } from '@/composables/useCharacterSpriteComposable'
+import { loadSpriteTextures } from '@/composables/gameComposable'
+import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
 import { useGameStore } from '@/stores/gameStore'
-import { useMapStore } from '@/stores/mapStore'
+import { useZoneStore } from '@/stores/zoneStore'
-import { Container, Sprite, useScene } from 'phavuer'
+import { Container, refObj, Sprite, useScene } from 'phavuer'
-import { onMounted, onUnmounted, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+
+// import CharacterChest from '@/components/game/character/partials/CharacterChest.vue'
+
+enum Direction {
+  POSITIVE,
+  NEGATIVE,
+  UNCHANGED
+}
 
 const props = defineProps<{
   tilemap: Phaser.Tilemaps.Tilemap
-  mapCharacter: MapCharacter
+  zoneCharacter: ZoneCharacter
 }>()
 
+const charContainer = refObj<Phaser.GameObjects.Container>()
+const charSprite = refObj<Phaser.GameObjects.Sprite>()
+
 const gameStore = useGameStore()
-const mapStore = useMapStore()
+const zoneStore = useZoneStore()
 const scene = useScene()
 
-const { characterContainer, characterSprite, currentPositionX, currentPositionY, isometricDepth, isFlippedX, updatePosition, calcDirection, updateSprite, initializeSprite, cleanup } = useCharacterSprite(scene, props.tilemap, props.mapCharacter)
+const currentX = ref(0)
+const currentY = ref(0)
+const isometricDepth = ref(1)
+const isInitialPosition = ref(true)
+const isMoving = ref(false)
+let animationFrame: number | null = null
+const moveSpeed = 5.7
 
-const handlePositionUpdate = (newValues: any, oldValues: any) => {
+const updateIsometricDepth = (x: number, y: number) => {
-  if (!newValues) return
+  isometricDepth.value = calculateIsometricDepth(x, y, 28, 94, true)
+}
 
-  if (!oldValues || newValues.positionX !== oldValues.positionX || newValues.positionY !== oldValues.positionY) {
+const stopMovement = () => {
-    const direction = !oldValues ? Direction.POSITIVE : calcDirection(oldValues.positionX, oldValues.positionY, newValues.positionX, newValues.positionY)
+  isMoving.value = false
-    updatePosition(newValues.positionX, newValues.positionY, direction)
+  if (animationFrame) {
+    cancelAnimationFrame(animationFrame)
+    animationFrame = null
+  }
+}
+
+const updatePosition = (x: number, y: number, direction: Direction) => {
+  const targetX = tileToWorldX(props.tilemap, x, y)
+  const targetY = tileToWorldY(props.tilemap, x, y)
+
+  if (isInitialPosition.value) {
+    currentX.value = targetX
+    currentY.value = targetY
+    isInitialPosition.value = false
+    return
   }
 
-  if (newValues.isMoving !== oldValues?.isMoving || newValues.rotation !== oldValues?.rotation) {
+  if (isMoving.value) {
-    updateSprite()
+    stopMovement()
   }
+
+  const distance = Math.sqrt(Math.pow(targetX - currentX.value, 2) + Math.pow(targetY - currentY.value, 2))
+
+  isMoving.value = true
+  const startTime = performance.now()
+  const startX = currentX.value
+  const startY = currentY.value
+  const duration = distance * moveSpeed
+
+  if (direction === Direction.POSITIVE) {
+    updateIsometricDepth(x, y)
+  }
+
+  const animate = (currentTime: number) => {
+    if (!isMoving.value) return
+
+    const elapsed = currentTime - startTime
+    const progress = Math.min(elapsed / duration, 1)
+
+    currentX.value = startX + (targetX - startX) * progress
+    currentY.value = startY + (targetY - startY) * progress
+
+    if (progress < 1) {
+      animationFrame = requestAnimationFrame(animate)
+    } else {
+      isMoving.value = false
+      if (direction === Direction.NEGATIVE) {
+        updateIsometricDepth(x, y)
+      }
+    }
+  }
+
+  animationFrame = requestAnimationFrame(animate)
+}
+
+const calcDirection = (oldX: number, oldY: number, newX: number, newY: number): Direction => {
+  if (newY < oldY || newX < oldX) return Direction.NEGATIVE
+  if (newX > oldX || newY > oldY) return Direction.POSITIVE
+  return Direction.UNCHANGED
+}
+
+const isFlippedX = computed(() => [6, 4].includes(props.zoneCharacter.character.rotation ?? 0))
+
+const charTexture = computed(() => {
+  const { rotation, characterType } = props.zoneCharacter.character
+  const spriteId = characterType?.sprite ?? 'idle_right_down'
+  const action = props.zoneCharacter.isMoving ? 'walk' : 'idle'
+  const direction = [0, 6].includes(rotation) ? 'left_up' : 'right_down'
+
+  return `${spriteId}-${action}_${direction}`
+})
+
+const updateSprite = () => {
+  if (props.zoneCharacter.isMoving) {
+    charSprite.value!.anims.play(charTexture.value, true)
+    return
+  }
+
+  charSprite.value!.anims.stop()
+  charSprite.value!.setFrame(0)
+  charSprite.value!.setTexture(charTexture.value)
 }
 
 watch(
   () => ({
-    positionX: props.mapCharacter.character.positionX,
+    x: props.zoneCharacter.character.positionX,
-    positionY: props.mapCharacter.character.positionY,
+    y: props.zoneCharacter.character.positionY,
-    isMoving: props.mapCharacter.isMoving,
+    isMoving: props.zoneCharacter.isMoving,
-    rotation: props.mapCharacter.character.rotation,
+    rotation: props.zoneCharacter.character.rotation
-    isAttacking: props.mapCharacter.isAttacking
   }),
-  handlePositionUpdate
+  (newValues, oldValues) => {
+    if (!newValues) return
+
+    if (!oldValues || newValues.x !== oldValues.x || newValues.y !== oldValues.y) {
+      const direction = !oldValues ? Direction.POSITIVE : calcDirection(oldValues.x, oldValues.y, newValues.x, newValues.y)
+      updatePosition(newValues.x, newValues.y, direction)
+    }
+
+    // Handle animation updates
+    if (newValues.isMoving !== oldValues?.isMoving || newValues.rotation !== oldValues?.rotation) {
+      updateSprite()
+    }
+  },
+  { deep: true }
 )
 
-onMounted(async () => {
+watch(() => props.zoneCharacter, updateSprite)
-  await initializeSprite()
 
-  if (props.mapCharacter.character.id === gameStore.character!.id) {
+loadSpriteTextures(scene, props.zoneCharacter.character.characterType?.sprite as string)
-    mapStore.setCharacterLoaded(true)
+  .then(() => {
-    scene.cameras.main.startFollow(characterContainer.value as Phaser.GameObjects.Container)
+    charSprite.value!.setTexture(charTexture.value)
+    charSprite.value!.setFlipX(isFlippedX.value)
+  })
+  .catch((error) => {
+    console.error('Error loading texture:', error)
+  })
+
+onMounted(() => {
+  charContainer.value!.setName(props.zoneCharacter.character!.name)
+
+  if (props.zoneCharacter.character.id === gameStore.character!.id) {
+    zoneStore.setCharacterLoaded(true)
+
+    // #146 : Set camera position to character, need to be improved still
+    // scene.cameras.main.startFollow(charContainer.value as Phaser.GameObjects.Container)
+    // scene.cameras.main.stopFollow()
   }
+
+  updatePosition(props.zoneCharacter.character.positionX, props.zoneCharacter.character.positionY, props.zoneCharacter.character.rotation)
 })
 
 onUnmounted(() => {
-  cleanup()
+  stopMovement()
 })
 </script>

src/components/game/character/partials/CharacterChest.vue

@@ -3,14 +3,14 @@
 </template>
 
 <script lang="ts" setup>
-import type { MapCharacter, Sprite as SpriteT } from '@/application/types'
+import type { Sprite as SpriteT, ZoneCharacter } from '@/application/types'
 import { loadSpriteTextures } from '@/composables/gameComposable'
 import { useGameStore } from '@/stores/gameStore'
 import { Image, useScene } from 'phavuer'
 import { computed } from 'vue'
 
 const props = defineProps<{
-  mapCharacter: MapCharacter
+  zoneCharacter: ZoneCharacter
   currentX: number
   currentY: number
 }>()
@@ -19,19 +19,19 @@ const gameStore = useGameStore()
 const scene = useScene()
 
 const texture = computed(() => {
-  const { rotation, characterHair } = props.mapCharacter.character
+  const { rotation, characterHair } = props.zoneCharacter.character
   const spriteId = characterHair?.sprite?.id
   const direction = [0, 6].includes(rotation) ? 'back' : 'front'
 
   return `${spriteId}-${direction}`
 })
 
-const isFlippedX = computed(() => [6, 4].includes(props.mapCharacter.character.rotation ?? 0))
+const isFlippedX = computed(() => [6, 4].includes(props.zoneCharacter.character.rotation ?? 0))
 
 const imageProps = computed(() => {
   // Get the current sprite action based on direction
-  const direction = [0, 6].includes(props.mapCharacter.character.rotation ?? 0) ? 'back' : 'front'
+  const direction = [0, 6].includes(props.zoneCharacter.character.rotation ?? 0) ? 'back' : 'front'
-  const spriteAction = props.mapCharacter.character.characterHair?.sprite?.spriteActions?.find((spriteAction) => spriteAction.action === direction)
+  const spriteAction = props.zoneCharacter.character.characterHair?.sprite?.spriteActions?.find((spriteAction) => spriteAction.action === direction)
 
   return {
     depth: 1,
@@ -39,11 +39,11 @@ const imageProps = computed(() => {
     originY: Number(spriteAction?.originY) ?? 0,
     flipX: isFlippedX.value,
     texture: texture.value
-    // y: props.mapCharacter.isMoving ? Math.floor(Date.now() / 250) % 2 : 0
+    // y: props.zoneCharacter.isMoving ? Math.floor(Date.now() / 250) % 2 : 0
   }
 })
 
-loadSpriteTextures(scene, props.mapCharacter.character.characterHair?.sprite as SpriteT)
+loadSpriteTextures(scene, props.zoneCharacter.character.characterHair?.sprite as SpriteT)
   .then(() => {})
   .catch((error) => {
     console.error('Error loading texture:', error)

src/components/game/character/partials/CharacterHair.vue

@@ -1,54 +1,51 @@
 <template>
-  <Image v-bind="imageProps" v-if="gameStore.isTextureLoaded(texture)" />
+  <Image v-bind="imageProps" v-if="gameStore.getLoadedAsset(texture)" />
 </template>
 
 <script lang="ts" setup>
-import type { MapCharacter, Sprite as SpriteT } from '@/application/types'
+import type { Sprite as SpriteT, ZoneCharacter } from '@/application/types'
 import { loadSpriteTextures } from '@/composables/gameComposable'
-import { CharacterHairStorage, CharacterTypeStorage, SpriteStorage } from '@/storage/storages'
 import { useGameStore } from '@/stores/gameStore'
 import { Image, useScene } from 'phavuer'
-import { computed, onMounted, ref } from 'vue'
+import { computed } from 'vue'
 
 const props = defineProps<{
-  mapCharacter: MapCharacter
+  zoneCharacter: ZoneCharacter
+  currentX: number
+  currentY: number
 }>()
 
 const gameStore = useGameStore()
 const scene = useScene()
-const hairSpriteId = ref('')
-const sprite = ref<SpriteT | null>(null)
 
 const texture = computed(() => {
-  const { rotation } = props.mapCharacter.character
+  const { rotation, characterHair } = props.zoneCharacter.character
+  const spriteId = characterHair?.sprite?.id
   const direction = [0, 6].includes(rotation) ? 'back' : 'front'
 
-  return `${hairSpriteId.value}-${direction}`
+  return `${spriteId}-${direction}`
 })
 
-const isFlippedX = computed(() => [6, 4].includes(props.mapCharacter.character.rotation ?? 0))
+const isFlippedX = computed(() => [6, 4].includes(props.zoneCharacter.character.rotation ?? 0))
 
 const imageProps = computed(() => {
-  const direction = [0, 6].includes(props.mapCharacter.character.rotation ?? 0) ? 'back' : 'front'
+  // Get the current sprite action based on direction
-  const spriteAction = sprite.value?.spriteActions?.find((spriteAction) => spriteAction.action === direction)
+  const direction = [0, 6].includes(props.zoneCharacter.character.rotation ?? 0) ? 'back' : 'front'
+  const spriteAction = props.zoneCharacter.character.characterHair?.sprite?.spriteActions?.find((spriteAction) => spriteAction.action === direction)
 
   return {
-    depth: 9999,
+    depth: 1,
     originX: Number(spriteAction?.originX) ?? 0,
     originY: Number(spriteAction?.originY) ?? 0,
     flipX: isFlippedX.value,
-    texture: texture.value
+    texture: texture.value,
+    y: props.zoneCharacter.isMoving ? Math.floor(Date.now() / 250) % 2 : 0
   }
 })
 
-onMounted(async () => {
+loadSpriteTextures(scene, props.zoneCharacter.character.characterHair?.sprite as SpriteT)
-  const characterHairStorage = new CharacterHairStorage()
+  .then(() => {})
-  const spriteId = await characterHairStorage.getSpriteId(props.mapCharacter.character.characterHair!)
+  .catch((error) => {
-  if (!spriteId) return
+    console.error('Error loading texture:', error)
-
+  })
-  hairSpriteId.value = spriteId
-  const spriteStorage = new SpriteStorage()
-  sprite.value = await spriteStorage.get(spriteId)
-  await loadSpriteTextures(scene, spriteId)
-})
 </script>

src/components/game/character/partials/ChatBubble.vue

@@ -1,32 +1,33 @@
 <template>
-  <Container ref="characterChatContainer" :depth="999">
+  <Container ref="charChatContainer" :depth="999" :x="currentX" :y="currentY">
     <RoundRectangle @create="createChatBubble" :origin-x="0.5" :origin-y="7.5" :fillColor="0xffffff" :width="194" :height="21" :radius="20" />
     <Text @create="createChatText" :style="{ fontSize: 13, fontFamily: 'Arial', color: '#000' }" />
   </Container>
 </template>
 
 <script setup lang="ts">
-import type { MapCharacter } from '@/application/types'
+import type { ZoneCharacter } from '@/application/types'
 import { Container, refObj, RoundRectangle, Text, useGame } from 'phavuer'
 import { onMounted } from 'vue'
 
 const props = defineProps<{
-  mapCharacter: MapCharacter
+  zoneCharacter: ZoneCharacter
+  currentX: number
+  currentY: number
 }>()
 
 const game = useGame()
-const characterChatContainer = refObj<Phaser.GameObjects.Container>()
+const charChatContainer = refObj<Phaser.GameObjects.Container>()
 
 const createChatBubble = (container: Phaser.GameObjects.Container) => {
-  container.setName(`${props.mapCharacter.character.name}_chatBubble`)
+  container.setName(`${props.zoneCharacter.character.name}_chatBubble`)
 }
 
 const createChatText = (text: Phaser.GameObjects.Text) => {
-  text.setName(`${props.mapCharacter.character.name}_chatText`)
+  text.setName(`${props.zoneCharacter.character.name}_chatText`)
   text.setFontSize(13)
   text.setFontFamily('Arial')
   text.setOrigin(0.5, 10.9)
-  text.setResolution(2)
 
   // Fix text alignment on Windows and Android
   if (game.device.os.windows || game.device.os.android) {
@@ -39,7 +40,7 @@ const createChatText = (text: Phaser.GameObjects.Text) => {
 }
 
 onMounted(() => {
-  characterChatContainer.value!.setName(`${props.mapCharacter.character!.name}_chatContainer`)
+  charChatContainer.value!.setName(`${props.zoneCharacter.character!.name}_chatContainer`)
-  characterChatContainer.value!.setVisible(false)
+  charChatContainer.value!.setVisible(false)
 })
 </script>

src/components/game/character/partials/Healthbar.vue

@@ -1,17 +1,19 @@
 <template>
-  <Container :depth="999">
+  <Container :depth="999" :x="currentX" :y="currentY">
-    <Text @create="createNicknameText" :text="props.mapCharacter.character.name" />
+    <Text @create="createNicknameText" :text="props.zoneCharacter.character.name" />
     <RoundRectangle :origin-x="0.5" :origin-y="18.5" :fillColor="0xffffff" :width="74" :height="6" :radius="5" />
     <RoundRectangle :origin-x="0.5" :origin-y="36.4" :fillColor="0x00b3b3" :width="70" :height="3" :radius="5" />
   </Container>
 </template>
 
 <script setup lang="ts">
-import type { MapCharacter } from '@/application/types'
+import type { ZoneCharacter } from '@/application/types'
 import { Container, RoundRectangle, Text, useGame } from 'phavuer'
 
 const props = defineProps<{
-  mapCharacter: MapCharacter
+  zoneCharacter: ZoneCharacter
+  currentX: number
+  currentY: number
 }>()
 
 const game = useGame()
@@ -20,7 +22,6 @@ const createNicknameText = (text: Phaser.GameObjects.Text) => {
   text.setFontSize(13)
   text.setFontFamily('Arial')
   text.setOrigin(0.5, 9)
-  text.setResolution(2)
 
   // Fix text alignment on Windows and Android
   if (game.device.os.windows || game.device.os.android) {

src/components/game/map/Characters.vue

@@ -1,14 +0,0 @@
-<template>
-  <Character v-for="item in mapStore.characters" :key="item.character.id" :tilemap="tilemap" :mapCharacter="item" />
-</template>
-
-<script setup lang="ts">
-import Character from '@/components/game/character/Character.vue'
-import { useMapStore } from '@/stores/mapStore'
-
-const mapStore = useMapStore()
-
-const props = defineProps<{
-  tilemap: Phaser.Tilemaps.Tilemap
-}>()
-</script>

src/components/game/map/Map.vue

@@ -1,56 +0,0 @@
-<template>
-  <MapTiles :key="mapStore.mapId" @tileMap:create="tileMap = $event" />
-  <PlacedMapObjects v-if="tileMap" :key="mapStore.mapId" :tilemap="tileMap" />
-  <Characters v-if="tileMap && mapStore.characters" :tilemap="tileMap" />
-</template>
-
-<script setup lang="ts">
-import type { MapCharacter, mapLoadData, UUID } from '@/application/types'
-import Characters from '@/components/game/map/Characters.vue'
-import MapTiles from '@/components/game/map/MapTiles.vue'
-import PlacedMapObjects from '@/components/game/map/PlacedMapObjects.vue'
-import { useGameStore } from '@/stores/gameStore'
-import { useMapStore } from '@/stores/mapStore'
-import { onUnmounted, shallowRef } from 'vue'
-
-const gameStore = useGameStore()
-const mapStore = useMapStore()
-
-const tileMap = shallowRef<Phaser.Tilemaps.Tilemap>()
-
-// Event listeners
-gameStore.connection?.on('map:character:teleport', async (data: mapLoadData) => {
-  mapStore.setMapId(data.mapId)
-  mapStore.setCharacters(data.characters)
-})
-
-gameStore.connection?.on('map:character:join', async (data: MapCharacter) => {
-  mapStore.addCharacter(data)
-})
-
-gameStore.connection?.on('map:character:leave', (characterId: UUID) => {
-  mapStore.removeCharacter(characterId)
-})
-
-gameStore.connection?.on('map:character:attack', (characterId: UUID) => {
-  mapStore.updateCharacterProperty(characterId, 'isAttacking', true)
-})
-
-gameStore.connection?.on('map:character:move', (data: { characterId: UUID; positionX: number; positionY: number; rotation: number; isMoving: boolean }) => {
-  mapStore.updateCharacterPosition(data)
-  // @TODO: Replace with universal class, composable or store
-  if (data.characterId === gameStore.character?.id) {
-    gameStore.character!.positionX = data.positionX
-    gameStore.character!.positionY = data.positionY
-    gameStore.character!.rotation = data.rotation
-  }
-})
-
-onUnmounted(() => {
-  mapStore.reset()
-  gameStore.connection?.off('map:character:teleport')
-  gameStore.connection?.off('map:character:join')
-  gameStore.connection?.off('map:character:leave')
-  gameStore.connection?.off('map:character:move')
-})
-</script>

src/components/game/map/MapTiles.vue

@@ -1,74 +0,0 @@
-<template>
-  <Controls v-if="tileLayer" :layer="tileLayer" :depth="0" />
-</template>
-
-<script setup lang="ts">
-import config from '@/application/config'
-import type { Map as MapT, UUID } from '@/application/types'
-import { unduplicateArray } from '@/application/utilities'
-import Controls from '@/components/utilities/Controls.vue'
-import { loadMapTilesIntoScene, setLayerTiles } from '@/composables/mapComposable'
-import { MapStorage } from '@/storage/storages'
-import { useMapStore } from '@/stores/mapStore'
-import { useScene } from 'phavuer'
-import { onBeforeUnmount, shallowRef } from 'vue'
-
-import Tileset = Phaser.Tilemaps.Tileset
-
-const emit = defineEmits(['tileMap:create'])
-const scene = useScene()
-const mapStore = useMapStore()
-const mapStorage = new MapStorage()
-
-const tileMap = shallowRef<Phaser.Tilemaps.Tilemap>()
-const tileLayer = shallowRef<Phaser.Tilemaps.TilemapLayer>()
-
-function createTileMap(map: MapT) {
-  const mapConfig = new Phaser.Tilemaps.MapData({
-    width: map.width,
-    height: map.height,
-    tileWidth: config.tile_size.width,
-    tileHeight: config.tile_size.height,
-    orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
-    format: Phaser.Tilemaps.Formats.ARRAY_2D
-  })
-
-  const newTileMap = new Phaser.Tilemaps.Tilemap(scene, mapConfig)
-  emit('tileMap:create', newTileMap)
-  return newTileMap
-}
-
-function createTileLayer(currentTileMap: Phaser.Tilemaps.Tilemap, mapData: any) {
-  const tilesArray = unduplicateArray(mapData?.tiles.flat())
-
-  const tilesetImages = tilesArray.map((tile: string, index: number) => {
-    return currentTileMap.addTilesetImage(tile, tile, config.tile_size.width, config.tile_size.height, 1, 2, index + 1, { x: 0, y: -config.tile_size.height })
-  })
-
-  // Add blank tile
-  tilesetImages.push(currentTileMap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.width, config.tile_size.height, 1, 2, 0, { x: 0, y: -config.tile_size.height }))
-
-  const layer = currentTileMap.createBlankLayer('tiles', tilesetImages as Tileset[], 0, config.tile_size.height) as Phaser.Tilemaps.TilemapLayer
-
-  layer.setDepth(0)
-  layer.setCullPadding(2, 2)
-  return layer
-}
-
-loadMapTilesIntoScene(mapStore.mapId as UUID, scene)
-  .then(() => mapStorage.get(mapStore.mapId))
-  .then((mapData) => {
-    if (!mapData || !mapData?.tiles) return
-    tileMap.value = createTileMap(mapData)
-    tileLayer.value = createTileLayer(tileMap.value, mapData)
-    setLayerTiles(tileMap.value, tileLayer.value, mapData.tiles)
-  })
-  .catch((error) => console.error('Failed to initialize map:', error))
-
-onBeforeUnmount(() => {
-  if (!tileMap.value) return
-  tileMap.value.destroyLayer('tiles')
-  tileMap.value.removeAllLayers()
-  tileMap.value.destroy()
-})
-</script>

src/components/game/map/PlacedMapObjects.vue

@@ -1,28 +0,0 @@
-<template>
-  <PlacedMapObject v-for="placedMapObject in items" :tilemap="tilemap" :placedMapObject />
-</template>
-
-<script setup lang="ts">
-import type { PlacedMapObject as PlacedMapObjectT } from '@/application/types'
-import PlacedMapObject from '@/components/game/map/partials/PlacedMapObject.vue'
-import { MapStorage } from '@/storage/storages'
-import { useMapStore } from '@/stores/mapStore'
-import { onMounted, ref } from 'vue'
-
-defineProps<{
-  tilemap: Phaser.Tilemaps.Tilemap
-}>()
-
-const mapStore = useMapStore()
-const mapStorage = new MapStorage()
-const items = ref<PlacedMapObjectT[]>([])
-
-onMounted(async () => {
-  if (!mapStore.mapId) return
-
-  const map = await mapStorage.get(mapStore.mapId)
-  if (!map) return
-
-  items.value = map.placedMapObjects
-})
-</script>

src/components/game/map/partials/PlacedMapObject.vue

@@ -1,43 +0,0 @@
-<template>
-  <Image v-if="gameStore.isTextureLoaded(props.placedMapObject.mapObject.id)" v-bind="imageProps" />
-</template>
-
-<script setup lang="ts">
-import type { PlacedMapObject, TextureData } from '@/application/types'
-import { loadTexture } from '@/composables/gameComposable'
-import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/mapComposable'
-import { useGameStore } from '@/stores/gameStore'
-import { Image, useScene } from 'phavuer'
-import { computed, onMounted } from 'vue'
-
-const props = defineProps<{
-  tilemap: Phaser.Tilemaps.Tilemap
-  placedMapObject: PlacedMapObject
-}>()
-
-const gameStore = useGameStore()
-const scene = useScene()
-
-const imageProps = computed(() => ({
-  depth: calculateIsometricDepth(props.placedMapObject.positionX, props.placedMapObject.positionY, props.placedMapObject.mapObject.frameWidth, props.placedMapObject.mapObject.frameHeight),
-  x: tileToWorldX(props.tilemap, props.placedMapObject.positionX, props.placedMapObject.positionY),
-  y: tileToWorldY(props.tilemap, props.placedMapObject.positionX, props.placedMapObject.positionY),
-  flipX: props.placedMapObject.isRotated,
-  texture: props.placedMapObject.mapObject.id,
-  originY: Number(props.placedMapObject.mapObject.originX),
-  originX: Number(props.placedMapObject.mapObject.originY)
-}))
-
-loadTexture(scene, {
-  key: props.placedMapObject.mapObject.id,
-  data: '/textures/map_objects/' + props.placedMapObject.mapObject.id + '.png',
-  group: 'map_objects',
-  updatedAt: props.placedMapObject.mapObject.updatedAt,
-  frameWidth: props.placedMapObject.mapObject.frameWidth,
-  frameHeight: props.placedMapObject.mapObject.frameHeight
-} as TextureData).catch((error) => {
-  console.error('Error loading texture:', error)
-})
-
-onMounted(async () => {})
-</script>

src/components/game/zone/Characters.vue

@@ -0,0 +1,14 @@
+<template>
+  <Character v-for="item in zoneStore.characters" :key="item.character.id" :tilemap="tilemap" :zoneCharacter="item" />
+</template>
+
+<script setup lang="ts">
+import Character from '@/components/game/character/Character.vue'
+import { useZoneStore } from '@/stores/zoneStore'
+
+const zoneStore = useZoneStore()
+
+const props = defineProps<{
+  tilemap: Phaser.Tilemaps.Tilemap
+}>()
+</script>

src/components/game/zone/Zone.vue

@@ -0,0 +1,50 @@
+<template>
+  <ZoneTiles :key="zoneStore.zone?.id ?? 0" @tileMap:create="tileMap = $event" />
+  <ZoneObjects v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
+  <Characters v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
+</template>
+
+<script setup lang="ts">
+import type { ZoneCharacter, zoneLoadData } from '@/application/types'
+import Characters from '@/components/game/zone/Characters.vue'
+import ZoneObjects from '@/components/game/zone/ZoneObjects.vue'
+import ZoneTiles from '@/components/game/zone/ZoneTiles.vue'
+import { loadZoneTilesIntoScene } from '@/composables/zoneComposable'
+import { useGameStore } from '@/stores/gameStore'
+import { useZoneStore } from '@/stores/zoneStore'
+import { useScene } from 'phavuer'
+import { onUnmounted, ref } from 'vue'
+
+const scene = useScene()
+const gameStore = useGameStore()
+const zoneStore = useZoneStore()
+
+const tileMap = ref(null as Phaser.Tilemaps.Tilemap | null)
+
+onUnmounted(() => {
+  zoneStore.reset()
+  gameStore.connection!.off('zone:character:teleport')
+  gameStore.connection!.off('zone:character:join')
+  gameStore.connection!.off('zone:character:leave')
+  gameStore.connection!.off('zone:character:move')
+})
+
+// Event listeners
+gameStore.connection!.on('zone:character:teleport', async (data: zoneLoadData) => {
+  await loadZoneTilesIntoScene(data.zone.id, scene)
+  zoneStore.setZone(data.zone)
+  zoneStore.setCharacters(data.characters)
+})
+
+gameStore.connection!.on('zone:character:join', async (data: ZoneCharacter) => {
+  zoneStore.addCharacter(data)
+})
+
+gameStore.connection!.on('zone:character:leave', (characterId: number) => {
+  zoneStore.removeCharacter(characterId)
+})
+
+gameStore.connection!.on('zone:character:move', (data: { characterId: number; positionX: number; positionY: number; rotation: number; isMoving: boolean }) => {
+  zoneStore.updateCharacterPosition(data)
+})
+</script>

src/components/game/zone/ZoneObjects.vue

@@ -0,0 +1,14 @@
+<template>
+  <ZoneObject v-for="zoneObject in zoneStore.zone?.zoneObjects" :tilemap="tilemap" :zoneObject />
+</template>
+
+<script setup lang="ts">
+import ZoneObject from '@/components/game/zone/partials/ZoneObject.vue'
+import { useZoneStore } from '@/stores/zoneStore'
+
+const zoneStore = useZoneStore()
+
+defineProps<{
+  tilemap: Phaser.Tilemaps.Tilemap
+}>()
+</script>

src/components/game/zone/ZoneTiles.vue

@@ -0,0 +1,69 @@
+<template>
+  <Controls :layer="tileLayer" :depth="0" />
+</template>
+
+<script setup lang="ts">
+import config from '@/application/config'
+import { unduplicateArray } from '@/application/utilities'
+import Controls from '@/components/utilities/Controls.vue'
+import { FlattenZoneArray, setLayerTiles } from '@/composables/zoneComposable'
+import { useZoneStore } from '@/stores/zoneStore'
+import { useScene } from 'phavuer'
+import { onBeforeUnmount } from 'vue'
+
+const emit = defineEmits(['tileMap:create'])
+
+const scene = useScene()
+const zoneStore = useZoneStore()
+const tileMap = createTileMap()
+const tileLayer = createTileLayer()
+
+/**
+ * A Tilemap is a container for Tilemap data.
+ * This isn't a display object, rather, it holds data about the map and allows you to add tilesets and tilemap layers to it.
+ * A map can have one or more tilemap layers, which are the display objects that actually render the tiles.
+ */
+function createTileMap() {
+  const zoneData = new Phaser.Tilemaps.MapData({
+    width: zoneStore.zone?.width,
+    height: zoneStore.zone?.height,
+    tileWidth: config.tile_size.x,
+    tileHeight: config.tile_size.y,
+    orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
+    format: Phaser.Tilemaps.Formats.ARRAY_2D
+  })
+
+  const newTileMap = new Phaser.Tilemaps.Tilemap(scene, zoneData)
+  emit('tileMap:create', newTileMap)
+
+  return newTileMap
+}
+
+/**
+ * A Tileset is a combination of a single image containing the tiles and a container for data about each tile.
+ */
+function createTileLayer() {
+  const tilesArray = unduplicateArray(FlattenZoneArray(zoneStore.zone?.tiles ?? []))
+
+  const tilesetImages = Array.from(tilesArray).map((tile: any, index: number) => {
+    return tileMap.addTilesetImage(tile, tile, config.tile_size.x, config.tile_size.y, 1, 2, index + 1, { x: 0, y: -config.tile_size.y })
+  }) as any
+
+  // Add blank tile
+  tilesetImages.push(tileMap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 1, 2, 0, { x: 0, y: -config.tile_size.y }))
+  const layer = tileMap.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer
+
+  layer.setDepth(0)
+  layer.setCullPadding(2, 2)
+
+  return layer
+}
+
+setLayerTiles(tileMap, tileLayer, zoneStore.zone?.tiles)
+
+onBeforeUnmount(() => {
+  tileMap.destroyLayer('tiles')
+  tileMap.removeAllLayers()
+  tileMap.destroy()
+})
+</script>

src/components/game/zone/partials/ZoneObject.vue

@@ -0,0 +1,41 @@
+<template>
+  <Image v-if="gameStore.getLoadedAsset(props.zoneObject.object.id)" v-bind="imageProps" />
+</template>
+
+<script setup lang="ts">
+import type { AssetDataT, ZoneObject } from '@/application/types'
+import { loadTexture } from '@/composables/gameComposable'
+import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
+import { useGameStore } from '@/stores/gameStore'
+import { Image, useScene } from 'phavuer'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  tilemap: Phaser.Tilemaps.Tilemap
+  zoneObject: ZoneObject
+}>()
+
+const gameStore = useGameStore()
+const scene = useScene()
+
+const imageProps = computed(() => ({
+  depth: calculateIsometricDepth(props.zoneObject.positionX, props.zoneObject.positionY, props.zoneObject.object.frameWidth, props.zoneObject.object.frameHeight),
+  x: tileToWorldX(props.tilemap, props.zoneObject.positionX, props.zoneObject.positionY),
+  y: tileToWorldY(props.tilemap, props.zoneObject.positionX, props.zoneObject.positionY),
+  flipX: props.zoneObject.isRotated,
+  texture: props.zoneObject.object.id,
+  originY: Number(props.zoneObject.object.originX),
+  originX: Number(props.zoneObject.object.originY)
+}))
+
+loadTexture(scene, {
+  key: props.zoneObject.object.id,
+  data: '/assets/objects/' + props.zoneObject.object.id + '.png',
+  group: 'objects',
+  updatedAt: props.zoneObject.object.updatedAt,
+  frameWidth: props.zoneObject.object.frameWidth,
+  frameHeight: props.zoneObject.object.frameHeight
+} as AssetDataT).catch((error) => {
+  console.error('Error loading texture:', error)
+})
+</script>

src/components/gameMaster/GmPanel.vue

@@ -6,7 +6,7 @@
         <button @mousedown.stop class="btn-cyan py-1.5 px-4 min-w-24">Users</button>
         <button @mousedown.stop class="btn-cyan py-1.5 px-4 min-w-24">Chats</button>
         <button @mousedown.stop class="btn-cyan active py-1.5 px-4 min-w-24">Asset manager</button>
-        <button class="btn-cyan py-1.5 px-4 min-w-24" type="button" @click="$emit('open-map-editor')">Map editor</button>
+        <button class="btn-cyan py-1.5 px-4 min-w-24" type="button" @click="() => zoneEditorStore.toggleActive()">Map editor</button>
       </div>
     </template>
     <template #modalBody>
@@ -20,13 +20,12 @@
 <script setup lang="ts">
 import AssetManager from '@/components/gameMaster/assetManager/AssetManager.vue'
 import Modal from '@/components/utilities/Modal.vue'
-import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
 import { useGameStore } from '@/stores/gameStore'
+import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import { ref } from 'vue'
 
-defineEmits(['open-map-editor'])
 const gameStore = useGameStore()
-const mapEditor = useMapEditorComposable()
+const zoneEditorStore = useZoneEditorStore()
 
 let toggle = ref('asset-manager')
 </script>

src/components/gameMaster/assetManager/AssetManager.vue

@@ -5,8 +5,8 @@
       <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group" :class="{ 'bg-cyan': selectedCategory === 'tiles' }" @click="() => (selectedCategory = 'tiles')">
         <span class="group-hover:text-white" :class="{ 'text-white': selectedCategory === 'tiles' }">Tiles</span>
       </a>
-      <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group" :class="{ 'bg-cyan': selectedCategory === 'map_objects' }" @click="() => (selectedCategory = 'map_objects')">
+      <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group" :class="{ 'bg-cyan': selectedCategory === 'objects' }" @click="() => (selectedCategory = 'objects')">
-        <span class="group-hover:text-white" :class="{ 'text-white': selectedCategory === 'map_objects' }">Map objects</span>
+        <span class="group-hover:text-white" :class="{ 'text-white': selectedCategory === 'objects' }">Objects</span>
       </a>
       <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group" :class="{ 'bg-cyan': selectedCategory === 'sprites' }" @click="() => (selectedCategory = 'sprites')">
         <span class="group-hover:text-white" :class="{ 'text-white': selectedCategory === 'sprites' }">Sprites</span>
@@ -40,7 +40,7 @@
     <!-- Assets list -->
     <div class="overflow-auto h-full w-4/12 flex flex-col relative">
       <TileList v-if="selectedCategory === 'tiles'" />
-      <MapObjectList v-if="selectedCategory === 'map_objects'" />
+      <ObjectList v-if="selectedCategory === 'objects'" />
       <SpriteList v-if="selectedCategory === 'sprites'" />
       <ItemList v-if="selectedCategory === 'items'" />
       <CharacterTypeList v-if="selectedCategory === 'characterTypes'" />
@@ -50,7 +50,7 @@
     <!-- Asset details -->
     <div class="flex w-7/12 after:hidden flex-col relative overflow-auto">
       <TileDetails v-if="selectedCategory === 'tiles' && assetManagerStore.selectedTile" />
-      <MapObjectDetails v-if="selectedCategory === 'map_objects' && assetManagerStore.selectedMapObject" />
+      <ObjectDetails v-if="selectedCategory === 'objects' && assetManagerStore.selectedObject" />
       <SpriteDetails v-if="selectedCategory === 'sprites' && assetManagerStore.selectedSprite" />
       <ItemDetails v-if="selectedCategory === 'items' && assetManagerStore.selectedItem" />
       <CharacterTypeDetails v-if="selectedCategory === 'characterTypes' && assetManagerStore.selectedCharacterType" />
@@ -66,8 +66,8 @@ import CharacterTypeDetails from '@/components/gameMaster/assetManager/partials/
 import CharacterTypeList from '@/components/gameMaster/assetManager/partials/characterType/CharacterTypeList.vue'
 import ItemDetails from '@/components/gameMaster/assetManager/partials/item/itemDetails.vue'
 import ItemList from '@/components/gameMaster/assetManager/partials/item/itemList.vue'
-import MapObjectDetails from '@/components/gameMaster/assetManager/partials/mapObject/MapObjectDetails.vue'
+import ObjectDetails from '@/components/gameMaster/assetManager/partials/object/ObjectDetails.vue'
-import MapObjectList from '@/components/gameMaster/assetManager/partials/mapObject/MapObjectList.vue'
+import ObjectList from '@/components/gameMaster/assetManager/partials/object/ObjectList.vue'
 import SpriteDetails from '@/components/gameMaster/assetManager/partials/sprite/SpriteDetails.vue'
 import SpriteList from '@/components/gameMaster/assetManager/partials/sprite/SpriteList.vue'
 import TileDetails from '@/components/gameMaster/assetManager/partials/tile/TileDetails.vue'

src/components/gameMaster/assetManager/partials/characterHair/CharacterHairDetails.vue

@@ -59,7 +59,7 @@ if (selectedCharacterHair.value) {
   characterName.value = selectedCharacterHair.value.name
   characterGender.value = selectedCharacterHair.value.gender
   characterIsSelectable.value = selectedCharacterHair.value.isSelectable
-  characterSpriteId.value = selectedCharacterHair.value.sprite?.id
+  characterSpriteId.value = selectedCharacterHair.value.spriteId
 }
 
 function removeCharacterHair() {
@@ -107,7 +107,7 @@ watch(selectedCharacterHair, (characterHair: CharacterHair | null) => {
   characterName.value = characterHair.name
   characterGender.value = characterHair.gender
   characterIsSelectable.value = characterHair.isSelectable
-  characterSpriteId.value = characterHair.sprite?.id
+  characterSpriteId.value = characterHair.spriteId
 })
 
 onMounted(() => {

src/components/gameMaster/assetManager/partials/characterHair/CharacterHairList.vue

@@ -9,8 +9,8 @@
       </button>
     </label>
   </div>
-  <div v-bind="containerProps" class="flex-1 overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
+  <div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
-    <div v-bind="wrapperProps" ref="elementToScroll" class="flex flex-col gap-2.5">
+    <div v-bind="wrapperProps" ref="elementToScroll">
       <a
         v-for="{ data: characterHair } in list"
         :key="characterHair.id"
@@ -25,7 +25,7 @@
     </div>
     <div class="absolute w-12 h-12 bottom-2.5 right-2.5">
       <button class="fixed min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
-        <img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/mapEditor/chevron.svg" alt="" />
+        <img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
       </button>
     </div>
   </div>

src/components/gameMaster/assetManager/partials/characterType/CharacterTypeDetails.vue

@@ -68,7 +68,7 @@ if (selectedCharacterType.value) {
   characterGender.value = selectedCharacterType.value.gender
   characterRace.value = selectedCharacterType.value.race
   characterIsSelectable.value = selectedCharacterType.value.isSelectable
-  characterSpriteId.value = selectedCharacterType.value.sprite?.id
+  characterSpriteId.value = selectedCharacterType.value.spriteId
 }
 
 function removeCharacterType() {
@@ -118,7 +118,7 @@ watch(selectedCharacterType, (characterType: CharacterType | null) => {
   characterGender.value = characterType.gender
   characterRace.value = characterType.race
   characterIsSelectable.value = characterType.isSelectable
-  characterSpriteId.value = characterType.sprite?.id
+  characterSpriteId.value = characterType.spriteId
 })
 
 onMounted(() => {

src/components/gameMaster/assetManager/partials/characterType/CharacterTypeList.vue

@@ -9,8 +9,8 @@
       </button>
     </label>
   </div>
-  <div v-bind="containerProps" class="flex-1 overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
+  <div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
-    <div v-bind="wrapperProps" ref="elementToScroll" class="flex flex-col gap-2.5">
+    <div v-bind="wrapperProps" ref="elementToScroll">
       <a
         v-for="{ data: characterType } in list"
         :key="characterType.id"
@@ -25,7 +25,7 @@
     </div>
     <div class="absolute w-12 h-12 bottom-2.5 right-2.5">
       <button class="fixed min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
-        <img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/mapEditor/chevron.svg" alt="" />
+        <img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
       </button>
     </div>
   </div>

src/components/gameMaster/assetManager/partials/item/itemDetails.vue

@@ -44,7 +44,7 @@
 </template>
 
 <script setup lang="ts">
-import type { Item, ItemRarity, ItemType, Sprite } from '@/application/types'
+import type { Item, ItemRarity, ItemType } from '@/application/types'
 import { useAssetManagerStore } from '@/stores/assetManagerStore'
 import { useGameStore } from '@/stores/gameStore'
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'

src/components/gameMaster/assetManager/partials/item/itemList.vue

@@ -9,8 +9,8 @@
       </button>
     </label>
   </div>
-  <div v-bind="containerProps" class="flex-1 overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
+  <div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
-    <div v-bind="wrapperProps" ref="elementToScroll" class="flex flex-col gap-2.5">
+    <div v-bind="wrapperProps" ref="elementToScroll">
       <a v-for="{ data: item } in list" :key="item.id" class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group" :class="{ 'bg-cyan': assetManagerStore.selectedItem?.id === item.id }" @click="assetManagerStore.setSelectedItem(item as Item)">
         <div class="flex items-center gap-2.5">
           <span class="group-hover:text-white" :class="{ 'text-white': assetManagerStore.selectedItem?.id === item.id }">
@@ -22,7 +22,7 @@
     </div>
     <div class="absolute w-12 h-12 bottom-2.5 right-2.5">
       <button class="fixed min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
-        <img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/mapEditor/chevron.svg" alt="" />
+        <img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
       </button>
     </div>
   </div>

src/components/gameMaster/assetManager/partials/mapObject/MapObjectDetails.vue

@@ -1,146 +0,0 @@
-<template>
-  <div class="h-full overflow-auto">
-    <div class="relative p-2.5 flex flex-col items-center justify-center h-72 rounded-md default-border bg-gray">
-      <img class="max-h-56" :src="`${config.server_endpoint}/textures/map_objects/${selectedMapObject?.id}.png`" :alt="'Object ' + selectedMapObject?.id" />
-    </div>
-    <div class="mt-5 block">
-      <form class="flex gap-2.5 flex-wrap" @submit.prevent="saveObject">
-        <div class="form-field-full">
-          <label for="name">Name</label>
-          <input v-model="mapObjectName" class="input-field" type="text" name="name" placeholder="Wall #1" />
-        </div>
-        <div class="form-field-half">
-          <label for="origin-x">Origin X</label>
-          <input v-model="mapObjectOriginX" class="input-field" type="number" step="any" name="origin-x" placeholder="Origin X" />
-        </div>
-        <div class="form-field-half">
-          <label for="origin-y">Origin Y</label>
-          <input v-model="mapObjectOriginY" class="input-field" type="number" step="any" name="origin-y" placeholder="Origin Y" />
-        </div>
-        <div class="form-field-full">
-          <label for="tags">Tags</label>
-          <ChipsInput v-model="mapObjectTags" @update:modelValue="mapObjectTags = $event" />
-        </div>
-        <div class="form-field-full">
-          <label for="frame-speed">Frame rate</label>
-          <input v-model="mapObjectFrameRate" class="input-field" type="number" step="any" name="frame-speed" placeholder="Frame rate" />
-        </div>
-        <div class="form-field-half">
-          <label for="frame-width">Frame width</label>
-          <input v-model="mapObjectFrameWidth" class="input-field" type="number" step="any" name="frame-width" placeholder="Frame width" />
-        </div>
-        <div class="form-field-half">
-          <label for="frame-height">Frame height</label>
-          <input v-model="mapObjectFrameHeight" class="input-field" type="number" step="any" name="frame-height" placeholder="Frame height" />
-        </div>
-        <div class="flex gap-4">
-          <button class="btn-cyan px-4 py-1.5 min-w-24" type="submit">Save</button>
-          <button class="btn-red px-4 py-1.5 min-w-24" type="button" @click.prevent="removeObject">Delete</button>
-        </div>
-      </form>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import config from '@/application/config'
-import type { MapObject } from '@/application/types'
-import ChipsInput from '@/components/forms/ChipsInput.vue'
-import { useAssetManagerStore } from '@/stores/assetManagerStore'
-import { useGameStore } from '@/stores/gameStore'
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-
-const gameStore = useGameStore()
-const assetManagerStore = useAssetManagerStore()
-
-const selectedMapObject = computed(() => assetManagerStore.selectedMapObject)
-
-const mapObjectName = ref('')
-const mapObjectTags = ref<string[]>([])
-const mapObjectOriginX = ref(0)
-const mapObjectOriginY = ref(0)
-const mapObjectFrameRate = ref(0)
-const mapObjectFrameWidth = ref(0)
-const mapObjectFrameHeight = ref(0)
-
-if (!selectedMapObject.value) {
-  console.error('No map mapObject selected')
-}
-
-if (selectedMapObject.value) {
-  mapObjectName.value = selectedMapObject.value.name
-  mapObjectTags.value = selectedMapObject.value.tags
-  mapObjectOriginX.value = selectedMapObject.value.originX
-  mapObjectOriginY.value = selectedMapObject.value.originY
-  mapObjectFrameRate.value = selectedMapObject.value.frameRate
-  mapObjectFrameWidth.value = selectedMapObject.value.frameWidth
-  mapObjectFrameHeight.value = selectedMapObject.value.frameHeight
-}
-
-function removeObject() {
-  gameStore.connection?.emit('gm:mapObject:remove', { mapObject: selectedMapObject.value?.id }, (response: boolean) => {
-    if (!response) {
-      console.error('Failed to remove mapObject')
-      return
-    }
-    refreshObjectList()
-  })
-}
-
-function refreshObjectList(unsetSelectedMapObject = true) {
-  gameStore.connection?.emit('gm:mapObject:list', {}, (response: MapObject[]) => {
-    assetManagerStore.setMapObjectList(response)
-
-    if (unsetSelectedMapObject) {
-      assetManagerStore.setSelectedMapObject(null)
-    }
-  })
-}
-
-function saveObject() {
-  if (!selectedMapObject.value) {
-    console.error('No mapObject selected')
-    return
-  }
-
-  gameStore.connection?.emit(
-    'gm:mapObject:update',
-    {
-      id: selectedMapObject.value.id,
-      name: mapObjectName.value,
-      tags: mapObjectTags.value,
-      originX: mapObjectOriginX.value,
-      originY: mapObjectOriginY.value,
-      frameRate: mapObjectFrameRate.value,
-      frameWidth: mapObjectFrameWidth.value,
-      frameHeight: mapObjectFrameHeight.value
-    },
-    (response: boolean) => {
-      if (!response) {
-        console.error('Failed to save mapObject')
-        return
-      }
-      refreshObjectList(false)
-    }
-  )
-}
-
-watch(selectedMapObject, (mapObject: MapObject | null) => {
-  if (!mapObject) return
-  mapObjectName.value = mapObject.name
-  mapObjectTags.value = mapObject.tags
-  mapObjectOriginX.value = mapObject.originX
-  mapObjectOriginY.value = mapObject.originY
-  mapObjectFrameRate.value = mapObject.frameRate
-  mapObjectFrameWidth.value = mapObject.frameWidth
-  mapObjectFrameHeight.value = mapObject.frameHeight
-})
-
-onMounted(() => {
-  if (!selectedMapObject.value) return
-})
-
-onBeforeUnmount(() => {
-  assetManagerStore.setSelectedMapObject(null)
-})
-</script>

src/components/gameMaster/assetManager/partials/object/ObjectDetails.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="h-full overflow-auto">
+    <div class="relative p-2.5 flex flex-col items-center justify-center h-72 rounded-md default-border bg-gray">
+      <img class="max-h-56" :src="`${config.server_endpoint}/assets/objects/${selectedObject?.id}.png`" :alt="'Object ' + selectedObject?.id" />
+    </div>
+    <div class="mt-5 block">
+      <form class="flex gap-2.5 flex-wrap" @submit.prevent="saveObject">
+        <div class="form-field-full">
+          <label for="name">Name</label>
+          <input v-model="objectName" class="input-field" type="text" name="name" placeholder="Wall #1" />
+        </div>
+        <div class="form-field-half">
+          <label for="origin-x">Origin X</label>
+          <input v-model="objectOriginX" class="input-field" type="number" step="any" name="origin-x" placeholder="Origin X" />
+        </div>
+        <div class="form-field-half">
+          <label for="origin-y">Origin Y</label>
+          <input v-model="objectOriginY" class="input-field" type="number" step="any" name="origin-y" placeholder="Origin Y" />
+        </div>
+        <div class="form-field-full">
+          <label for="tags">Tags</label>
+          <ChipsInput v-model="objectTags" @update:modelValue="objectTags = $event" />
+        </div>
+        <div class="form-field-full">
+          <label for="is-animated">Is animated</label>
+          <select v-model="objectIsAnimated" class="input-field" name="is-animated">
+            <option :value="false">No</option>
+            <option :value="true">Yes</option>
+          </select>
+        </div>
+        <div class="form-field-full">
+          <label for="frame-speed">Frame rate</label>
+          <input v-model="objectFrameRate" class="input-field" type="number" step="any" name="frame-speed" placeholder="Frame rate" />
+        </div>
+        <div class="form-field-half">
+          <label for="frame-width">Frame width</label>
+          <input v-model="objectFrameWidth" class="input-field" type="number" step="any" name="frame-width" placeholder="Frame width" />
+        </div>
+        <div class="form-field-half">
+          <label for="frame-height">Frame height</label>
+          <input v-model="objectFrameHeight" class="input-field" type="number" step="any" name="frame-height" placeholder="Frame height" />
+        </div>
+        <div class="flex gap-4">
+          <button class="btn-cyan px-4 py-1.5 min-w-24" type="submit">Save</button>
+          <button class="btn-red px-4 py-1.5 min-w-24" type="button" @click.prevent="removeObject">Delete</button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import config from '@/application/config'
+import type { Object } from '@/application/types'
+import ChipsInput from '@/components/forms/ChipsInput.vue'
+import { useAssetManagerStore } from '@/stores/assetManagerStore'
+import { useGameStore } from '@/stores/gameStore'
+import { useZoneEditorStore } from '@/stores/zoneEditorStore'
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
+const gameStore = useGameStore()
+const assetManagerStore = useAssetManagerStore()
+const zoneEditorStore = useZoneEditorStore()
+
+const selectedObject = computed(() => assetManagerStore.selectedObject)
+
+const objectName = ref('')
+const objectTags = ref<string[]>([])
+const objectOriginX = ref(0)
+const objectOriginY = ref(0)
+const objectIsAnimated = ref(false)
+const objectFrameRate = ref(0)
+const objectFrameWidth = ref(0)
+const objectFrameHeight = ref(0)
+
+if (!selectedObject.value) {
+  console.error('No object selected')
+}
+
+if (selectedObject.value) {
+  objectName.value = selectedObject.value.name
+  objectTags.value = selectedObject.value.tags
+  objectOriginX.value = selectedObject.value.originX
+  objectOriginY.value = selectedObject.value.originY
+  objectIsAnimated.value = selectedObject.value.isAnimated
+  objectFrameRate.value = selectedObject.value.frameRate
+  objectFrameWidth.value = selectedObject.value.frameWidth
+  objectFrameHeight.value = selectedObject.value.frameHeight
+}
+
+function removeObject() {
+  gameStore.connection?.emit('gm:object:remove', { object: selectedObject.value?.id }, (response: boolean) => {
+    if (!response) {
+      console.error('Failed to remove object')
+      return
+    }
+    refreshObjectList()
+  })
+}
+
+function refreshObjectList(unsetSelectedObject = true) {
+  gameStore.connection?.emit('gm:object:list', {}, (response: Object[]) => {
+    assetManagerStore.setObjectList(response)
+
+    if (unsetSelectedObject) {
+      assetManagerStore.setSelectedObject(null)
+    }
+
+    if (zoneEditorStore.active) {
+      zoneEditorStore.setObjectList(response)
+    }
+  })
+}
+
+function saveObject() {
+  if (!selectedObject.value) {
+    console.error('No object selected')
+    return
+  }
+
+  gameStore.connection?.emit(
+    'gm:object:update',
+    {
+      id: selectedObject.value.id,
+      name: objectName.value,
+      tags: objectTags.value,
+      originX: objectOriginX.value,
+      originY: objectOriginY.value,
+      isAnimated: objectIsAnimated.value,
+      frameRate: objectFrameRate.value,
+      frameWidth: objectFrameWidth.value,
+      frameHeight: objectFrameHeight.value
+    },
+    (response: boolean) => {
+      if (!response) {
+        console.error('Failed to save object')
+        return
+      }
+      refreshObjectList(false)
+    }
+  )
+}
+
+watch(selectedObject, (object: Object | null) => {
+  if (!object) return
+  objectName.value = object.name
+  objectTags.value = object.tags
+  objectOriginX.value = object.originX
+  objectOriginY.value = object.originY
+  objectIsAnimated.value = object.isAnimated
+  objectFrameRate.value = object.frameRate
+  objectFrameWidth.value = object.frameWidth
+  objectFrameHeight.value = object.frameHeight
+})
+
+onMounted(() => {
+  if (!selectedObject.value) return
+})
+
+onBeforeUnmount(() => {
+  assetManagerStore.setSelectedObject(null)
+})
+</script>

src/components/gameMaster/assetManager/partials/object/ObjectList.vue

@@ -8,20 +8,20 @@
       </svg>
     </label>
   </div>
-  <div v-bind="containerProps" class="flex-1 overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
+  <div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
-    <div v-bind="wrapperProps" ref="elementToScroll" class="flex flex-col gap-2.5">
+    <div v-bind="wrapperProps" ref="elementToScroll">
-      <a v-for="{ data: mapObject } in list" :key="mapObject.id" class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group" :class="{ 'bg-cyan': assetManagerStore.selectedMapObject?.id === mapObject.id }" @click="assetManagerStore.setSelectedMapObject(mapObject as MapObject)">
+      <a v-for="{ data: object } in list" :key="object.id" class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group" :class="{ 'bg-cyan': assetManagerStore.selectedObject?.id === object.id }" @click="assetManagerStore.setSelectedObject(object as Object)">
         <div class="flex items-center gap-2.5">
           <div class="h-7 w-16 max-w-16 flex justify-center">
-            <img class="h-7" :src="`${config.server_endpoint}/textures/map_objects/${mapObject.id}.png`" alt="Object" />
+            <img class="h-7" :src="`${config.server_endpoint}/assets/objects/${object.id}.png`" alt="Object" />
           </div>
-          <span :class="{ 'text-white': assetManagerStore.selectedMapObject?.id === mapObject.id }">{{ mapObject.name }}</span>
+          <span :class="{ 'text-white': assetManagerStore.selectedObject?.id === object.id }">{{ object.name }}</span>
         </div>
       </a>
     </div>
     <div class="absolute w-12 h-12 bottom-2.5 right-2.5">
       <button class="fixed min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
-        <img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/mapEditor/chevron.svg" alt="" />
+        <img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
       </button>
     </div>
   </div>
@@ -29,7 +29,7 @@
 
 <script setup lang="ts">
 import config from '@/application/config'
-import type { MapObject } from '@/application/types'
+import type { Object } from '@/application/types'
 import { useAssetManagerStore } from '@/stores/assetManagerStore'
 import { useGameStore } from '@/stores/gameStore'
 import { useVirtualList } from '@vueuse/core'
@@ -47,14 +47,14 @@ const elementToScroll = ref()
 const handleFileUpload = (e: Event) => {
   const files = (e.target as HTMLInputElement).files
   if (!files) return
-  gameStore.connection?.emit('gm:mapObject:upload', files, (response: boolean) => {
+  gameStore.connection?.emit('gm:object:upload', files, (response: boolean) => {
     if (!response) {
       if (config.development) console.error('Failed to upload object')
       return
     }
 
-    gameStore.connection?.emit('gm:mapObject:list', {}, (response: MapObject[]) => {
+    gameStore.connection?.emit('gm:object:list', {}, (response: Object[]) => {
-      assetManagerStore.setMapObjectList(response)
+      assetManagerStore.setObjectList(response)
     })
   })
 }
@@ -66,9 +66,9 @@ const handleSearch = () => {
 
 const filteredObjects = computed(() => {
   if (!searchQuery.value) {
-    return assetManagerStore.mapObjectList
+    return assetManagerStore.objectList
   }
-  return assetManagerStore.mapObjectList.filter((object) => object.name.toLowerCase().includes(searchQuery.value.toLowerCase()))
+  return assetManagerStore.objectList.filter((object) => object.name.toLowerCase().includes(searchQuery.value.toLowerCase()))
 })
 
 const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(filteredObjects, {
@@ -92,8 +92,8 @@ function toTop() {
 }
 
 onMounted(() => {
-  gameStore.connection?.emit('gm:mapObject:list', {}, (response: MapObject[]) => {
+  gameStore.connection?.emit('gm:object:list', {}, (response: Object[]) => {
-    assetManagerStore.setMapObjectList(response)
+    assetManagerStore.setObjectList(response)
   })
 })
 </script>

src/components/gameMaster/assetManager/partials/sprite/SpriteDetails.vue

@@ -21,12 +21,9 @@
       <button class="btn-cyan py-2 my-4" type="button" @click.prevent="addNewImage">New action</button>
       <Accordion v-for="action in spriteActions" :key="action.id">
         <template #header>
-          <div class="flex items-center">
+          <div class="flex justify-between items-center">
             {{ action.action }}
-            <div class="ml-auto space-x-2">
+            <button class="btn-red px-4 py-1.5 min-w-24" type="button" @click.prevent="() => spriteActions.splice(spriteActions.indexOf(action), 1)">Delete</button>
-              <button class="btn-cyan px-4 py-1.5 min-w-24" type="button" @click.stop.prevent="openPreviewModal(action)">View</button>
-              <button class="btn-red px-4 py-1.5 min-w-24" type="button" @click.stop.prevent="() => spriteActions.splice(spriteActions.indexOf(action), 1)">Delete</button>
-            </div>
           </div>
         </template>
         <template #content>
@@ -43,35 +40,38 @@
               <label for="origin-y">Origin Y</label>
               <input v-model.number="action.originY" class="input-field" type="number" step="any" name="origin-y" placeholder="Origin Y" />
             </div>
-            <div class="form-field-full">
+            <div class="form-field-half">
+              <label for="is-animated">Is animated</label>
+              <select v-model="action.isAnimated" class="input-field" name="is-animated">
+                <option :value="false">No</option>
+                <option :value="true">Yes</option>
+              </select>
+            </div>
+            <div class="form-field-half" v-if="action.isAnimated">
+              <label for="is-looping">Is looping</label>
+              <select v-model="action.isLooping" class="input-field" name="is-looping">
+                <option :value="false">No</option>
+                <option :value="true">Yes</option>
+              </select>
+            </div>
+            <div class="form-field-full" v-if="action.isAnimated">
               <label for="frame-speed">Frame rate</label>
               <input v-model.number="action.frameRate" class="input-field" type="number" step="any" name="frame-speed" placeholder="Frame rate" />
             </div>
             <div class="form-field-full">
-              <SpriteActionsInput v-model="action.sprites" @tempOffsetChange="(index, offset) => handleTempOffsetChange(action, index, offset)" />
+              <SpriteActionsInput v-model="action.sprites" />
             </div>
           </form>
         </template>
       </Accordion>
-      <SpritePreview
-        v-if="selectedAction"
-        :sprites="selectedAction.sprites"
-        :frame-rate="selectedAction.frameRate"
-        :is-modal-open="isModalOpen"
-        :temp-offset-index="tempOffsetData.index"
-        :temp-offset="tempOffsetData.offset"
-        @update:frame-rate="updateFrameRate"
-        @update:is-modal-open="isModalOpen = $event"
-      />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import type { Sprite, SpriteAction, UUID } from '@/application/types'
+import type { Sprite, SpriteAction } from '@/application/types'
 import { uuidv4 } from '@/application/utilities'
 import SpriteActionsInput from '@/components/gameMaster/assetManager/partials/sprite/partials/SpriteImagesInput.vue'
-import SpritePreview from '@/components/gameMaster/assetManager/partials/sprite/partials/SpritePreview.vue'
 import Accordion from '@/components/utilities/Accordion.vue'
 import { useAssetManagerStore } from '@/stores/assetManagerStore'
 import { useGameStore } from '@/stores/gameStore'
@@ -84,8 +84,6 @@ const selectedSprite = computed(() => assetManagerStore.selectedSprite)
 
 const spriteName = ref('')
 const spriteActions = ref<SpriteAction[]>([])
-const isModalOpen = ref(false)
-const selectedAction = ref<SpriteAction | null>(null)
 
 if (!selectedSprite.value) {
   console.error('No sprite selected')
@@ -142,6 +140,8 @@ function saveSprite() {
           sprites: action.sprites,
           originX: action.originX,
           originY: action.originY,
+          isAnimated: action.isAnimated,
+          isLooping: action.isLooping,
           frameRate: action.frameRate,
           frameWidth: action.frameWidth,
           frameHeight: action.frameHeight
@@ -163,11 +163,14 @@ function addNewImage() {
 
   const newImage: SpriteAction = {
     id: uuidv4(),
-    sprite: selectedSprite.value.id,
+    spriteId: selectedSprite.value.id,
+    sprite: selectedSprite.value,
     action: 'new_action',
     sprites: [],
     originX: 0,
     originY: 0,
+    isAnimated: false,
+    isLooping: false,
     frameRate: 0,
     frameWidth: 0,
     frameHeight: 0
@@ -181,44 +184,15 @@ function addNewImage() {
 }
 
 function sortSpriteActions(actions: SpriteAction[]): SpriteAction[] {
-  if (!actions) return []
   return [...actions].sort((a, b) => a.action.localeCompare(b.action))
 }
 
-function openPreviewModal(action: SpriteAction) {
-  selectedAction.value = action
-  isModalOpen.value = true
-}
-
-function updateFrameRate(value: number) {
-  if (selectedAction.value) {
-    selectedAction.value.frameRate = value
-  }
-}
-
-const tempOffsetData = ref<{ index: number | undefined; offset: { x: number; y: number } | undefined }>({
-  index: undefined,
-  offset: undefined
-})
-
-function handleTempOffsetChange(action: SpriteAction, index: number, offset: { x: number; y: number }) {
-  if (selectedAction.value === action) {
-    tempOffsetData.value = { index, offset }
-  }
-}
-
 watch(selectedSprite, (sprite: Sprite | null) => {
   if (!sprite) return
   spriteName.value = sprite.name
   spriteActions.value = sortSpriteActions(sprite.spriteActions)
 })
 
-watch(isModalOpen, (newValue) => {
-  if (!newValue) {
-    selectedAction.value = null
-  }
-})
-
 onMounted(() => {
   if (!selectedSprite.value) return
 })

src/components/gameMaster/assetManager/partials/sprite/SpriteList.vue

@@ -7,8 +7,8 @@
       </svg>
     </button>
   </div>
-  <div v-bind="containerProps" class="flex-1 overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
+  <div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
-    <div v-bind="wrapperProps" ref="elementToScroll" class="flex flex-col gap-2.5">
+    <div v-bind="wrapperProps" ref="elementToScroll">
       <a v-for="{ data: sprite } in list" :key="sprite.id" class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group" :class="{ 'bg-cyan': assetManagerStore.selectedSprite?.id === sprite.id }" @click="assetManagerStore.setSelectedSprite(sprite as Sprite)">
         <div class="flex items-center gap-2.5">
           <span :class="{ 'text-white': assetManagerStore.selectedSprite?.id === sprite.id }">{{ sprite.name }}</span>
@@ -17,7 +17,7 @@
     </div>
     <div class="absolute w-12 h-12 bottom-2.5 right-2.5">
       <button class="fixed min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
-        <img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/mapEditor/chevron.svg" alt="" />
+        <img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
       </button>
     </div>
   </div>

src/components/gameMaster/assetManager/partials/sprite/partials/SpriteImagesInput.vue

@@ -1,44 +1,19 @@
 <template>
   <div class="flex flex-wrap gap-3">
     <div v-for="(image, index) in modelValue" :key="index" class="h-20 w-20 p-4 bg-gray-300 bg-opacity-50 rounded text-center relative group cursor-move" draggable="true" @dragstart="dragStart($event, index)" @dragover.prevent @dragenter.prevent @drop="drop($event, index)">
-      <img :src="image.url" class="max-w-full max-h-full object-contain pointer-events-none" alt="Uploaded image" @load="updateImageDimensions($event, index)" />
+      <img :src="image" class="max-w-full max-h-full object-contain pointer-events-none" alt="Uploaded image" />
-      <div v-if="imageDimensions[index]" class="absolute bottom-1 right-1 bg-black/50 text-white text-xs px-1 py-0.5 rounded transition-opacity font-default">{{ image.dimensions.width }}x{{ image.dimensions.height }}</div>
       <div class="absolute top-1 left-1 flex-row space-y-1">
         <button @click.stop="deleteImage(index)" class="bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity" aria-label="Delete image">
           <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
           </svg>
         </button>
-        <button @click.stop="openOffsetModal(index)" class="bg-blue-500 text-white rounded-full w-6 h-6 flex items-center justify-center cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity" aria-label="Scope image">
+        <button class="bg-blue-500 text-white rounded-full w-6 h-6 flex items-center justify-center cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity" aria-label="Scope image">
-          <svg width="50px" height="50px" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path d="M8.29289 3.70711L1 11V15H5L12.2929 7.70711L8.29289 3.70711Z" fill="white" />
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-            <path d="M9.70711 2.29289L13.7071 6.29289L15.1716 4.82843C15.702 4.29799 16 3.57857 16 2.82843C16 1.26633 14.7337 0 13.1716 0C12.4214 0 11.702 0.297995 11.1716 0.828428L9.70711 2.29289Z" fill="white" />
           </svg>
         </button>
       </div>
-
-      <Modal :is-modal-open="selectedImageIndex === index" :modal-width="300" :modal-height="210" :is-resizable="false" :bg-style="'none'" @modal:close="closeOffsetModal">
-        <template #modalHeader>
-          <h3 class="m-0 font-medium shrink-0 text-white">Action offset ({{ selectedImageIndex }})</h3>
-        </template>
-        <template #modalBody>
-          <div class="m-4">
-            <form method="post" @submit.prevent="saveOffset(index)" class="inline">
-              <div class="gap-2.5 flex flex-wrap">
-                <div class="form-field-half">
-                  <label for="offsetX">Offset X</label>
-                  <input class="input-field max-w-64" v-model="tempOffset.x" name="offsetX" id="offsetX" type="number" />
-                </div>
-                <div class="form-field-half">
-                  <label for="offsetY">Offset Y</label>
-                  <input class="input-field max-w-64" v-model="tempOffset.y" name="offsetY" id="offsetY" type="number" />
-                </div>
-              </div>
-              <button class="btn-cyan px-4 py-1.5 min-w-24" type="submit">Save</button>
-            </form>
-          </div>
-        </template>
-      </Modal>
     </div>
     <div class="h-20 w-20 p-4 bg-gray-200 bg-opacity-50 rounded justify-center items-center flex hover:cursor-pointer" @click="triggerFileInput" @drop.prevent="onDrop" @dragover.prevent>
       <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 invert" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -50,19 +25,10 @@
 </template>
 
 <script setup lang="ts">
-import Modal from '@/components/utilities/Modal.vue'
+import { ref } from 'vue'
-import { ref, watch } from 'vue'
-
-interface SpriteImage {
-  url: string
-  offset: {
-    x: number
-    y: number
-  }
-}
 
 interface Props {
-  modelValue: SpriteImage[]
+  modelValue: string[]
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -70,15 +36,11 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: SpriteImage[]): void
+  (e: 'update:modelValue', value: string[]): void
-  (e: 'close'): void
-  (e: 'tempOffsetChange', index: number, offset: { x: number; y: number }): void
 }>()
 
 const fileInput = ref<HTMLInputElement | null>(null)
 const draggedIndex = ref<number | null>(null)
-const selectedImageIndex = ref<number | null>(null)
-const tempOffset = ref({ x: 0, y: 0 })
 
 const triggerFileInput = () => {
   fileInput.value?.click()
@@ -99,25 +61,19 @@ const onDrop = (event: DragEvent) => {
 
 const handleFiles = (files: FileList) => {
   Array.from(files).forEach((file) => {
-    if (!file.type.startsWith('image/')) {
+    if (file.type.startsWith('image/')) {
-      return
-    }
-
       const reader = new FileReader()
       reader.onload = (e) => {
         if (typeof e.target?.result === 'string') {
-        const newImage: SpriteImage = {
+          updateImages([...props.modelValue, e.target.result])
-          url: e.target.result,
-          offset: { x: 0, y: 0 }
-        }
-        updateImages([...props.modelValue, newImage])
         }
       }
       reader.readAsDataURL(file)
+    }
   })
 }
 
-const updateImages = (newImages: SpriteImage[]) => {
+const updateImages = (newImages: string[]) => {
   emit('update:modelValue', newImages)
 }
 
@@ -145,41 +101,4 @@ const drop = (event: DragEvent, dropIndex: number) => {
   }
   draggedIndex.value = null
 }
-
-const openOffsetModal = (index: number) => {
-  selectedImageIndex.value = index
-  tempOffset.value = { ...props.modelValue[index].offset }
-}
-
-const closeOffsetModal = () => {
-  selectedImageIndex.value = null
-}
-
-const saveOffset = (index: number) => {
-  const newImages = [...props.modelValue]
-  newImages[index] = {
-    ...newImages[index],
-    offset: { ...tempOffset.value }
-  }
-  updateImages(newImages)
-  closeOffsetModal()
-}
-
-const onOffsetChange = () => {
-  if (selectedImageIndex.value !== null) {
-    emit('tempOffsetChange', selectedImageIndex.value, tempOffset.value)
-  }
-}
-
-watch(tempOffset, onOffsetChange, { deep: true })
-
-const imageDimensions = ref<{ [key: number]: { width: number; height: number } }>({})
-
-const updateImageDimensions = (event: Event, index: number) => {
-  const img = event.target as HTMLImageElement
-  imageDimensions.value[index] = {
-    width: img.naturalWidth,
-    height: img.naturalHeight
-  }
-}
 </script>

src/components/gameMaster/assetManager/partials/sprite/partials/SpritePreview.vue

@@ -1,146 +0,0 @@
-<template>
-  <Modal :is-modal-open="isModalOpen" :modal-width="700" :modal-height="330" :bg-style="'none'" @modal:close="closeModal">
-    <template #modalHeader>
-      <h3 class="m-0 font-medium shrink-0 text-white">View sprite</h3>
-    </template>
-    <template #modalBody>
-      <div class="m-4 flex gap-8">
-        <div class="relative">
-          <div
-            class="sprite-container bg-gray-800"
-            :style="{
-              width: `${maxWidth}px`,
-              height: `${maxHeight}px`,
-              position: 'relative',
-              overflow: 'hidden'
-            }"
-          >
-            <img
-              v-for="(sprite, index) in spritesWithTempOffset"
-              :key="index"
-              :src="sprite.url"
-              alt="Sprite"
-              :style="{
-                position: 'absolute',
-                left: `${sprite.offset?.x || 0}px`,
-                bottom: `${sprite.offset?.y || 0}px`,
-                display: currentFrame === index ? 'block' : 'none',
-                transform: `scale(${zoomLevel / 100})`,
-                transformOrigin: 'bottom left'
-              }"
-              @load="updateContainerSize"
-            />
-          </div>
-        </div>
-        <div class="flex flex-col justify-center gap-8 flex-1">
-          <div class="flex flex-col">
-            <label class="block mb-2 text-white">Frame Rate: {{ frameRate }} FPS</label>
-            <input type="range" v-model.number="localFrameRate" min="0" max="60" step="1" class="w-full accent-cyan-500" @input="updateFrameRate" />
-          </div>
-          <div class="flex flex-col">
-            <label class="block mb-2 text-white">Frame: {{ currentFrame + 1 }} of {{ sprites.length }}</label>
-            <input type="range" v-model.number="currentFrame" :min="0" :max="sprites.length - 1" step="1" class="w-full accent-cyan-500" @input="stopAnimation" />
-          </div>
-          <div class="flex flex-col">
-            <label class="block mb-2 text-white">Zoom: {{ zoomLevel }}%</label>
-            <input type="range" v-model.number="zoomLevel" min="10" max="200" step="10" class="w-full accent-cyan-500" />
-          </div>
-        </div>
-      </div>
-    </template>
-  </Modal>
-</template>
-
-<script setup lang="ts">
-import type { SpriteImage } from '@/application/types'
-import Modal from '@/components/utilities/Modal.vue'
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
-
-const props = defineProps<{
-  sprites: SpriteImage[]
-  frameRate: number
-  isModalOpen?: boolean
-  tempOffsetIndex?: number
-  tempOffset?: { x: number; y: number }
-}>()
-
-const emit = defineEmits<{
-  (e: 'update:frameRate', value: number): void
-  (e: 'update:isModalOpen', value: boolean): void
-}>()
-
-const currentFrame = ref(0)
-const maxWidth = ref(250)
-const maxHeight = ref(250)
-const localFrameRate = ref(props.frameRate)
-const zoomLevel = ref(100)
-let animationInterval: number | null = null
-
-const spritesWithTempOffset = computed(() => {
-  return props.sprites.map((sprite, index) => {
-    if (index === props.tempOffsetIndex && props.tempOffset) {
-      return { ...sprite, offset: props.tempOffset }
-    }
-    return sprite
-  })
-})
-
-function updateContainerSize(event: Event) {
-  const img = event.target as HTMLImageElement
-  maxWidth.value = Math.max(maxWidth.value, img.naturalWidth)
-  maxHeight.value = Math.max(maxHeight.value, img.naturalHeight)
-}
-
-function updateAnimation() {
-  stopAnimation()
-  if (props.frameRate <= 0 || props.sprites.length === 0) {
-    currentFrame.value = 0
-    return
-  }
-
-  animationInterval = window.setInterval(() => {
-    currentFrame.value = (currentFrame.value + 1) % props.sprites.length
-  }, 1000 / props.frameRate)
-}
-
-function stopAnimation() {
-  if (animationInterval) {
-    clearInterval(animationInterval)
-    animationInterval = null
-  }
-}
-
-function updateFrameRate() {
-  emit('update:frameRate', localFrameRate.value)
-}
-
-function closeModal() {
-  emit('update:isModalOpen', false)
-}
-
-watch(
-  () => props.frameRate,
-  (newValue) => {
-    localFrameRate.value = newValue
-    updateAnimation()
-  },
-  { immediate: true }
-)
-
-watch(() => props.sprites, updateAnimation, { immediate: true })
-
-onMounted(() => {
-  updateAnimation()
-})
-
-onUnmounted(() => {
-  stopAnimation()
-})
-</script>
-
-<style scoped>
-.sprite-container {
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 4px;
-}
-</style>

src/components/gameMaster/assetManager/partials/tile/TileDetails.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="h-full overflow-auto">
     <div class="relative p-2.5 flex flex-col items-center justify-center h-72 rounded-md default-border bg-gray">
-      <img class="max-h-72" :src="`${config.server_endpoint}/textures/tiles/${selectedTile?.id}.png`" :alt="'Tile ' + selectedTile?.id" />
+      <img class="max-h-72" :src="`${config.server_endpoint}/assets/tiles/${selectedTile?.id}.png`" :alt="'Tile ' + selectedTile?.id" />
     </div>
     <div class="mt-5 block">
       <form class="flex gap-2.5 flex-wrap" @submit.prevent="saveTile">
@@ -26,14 +26,14 @@
 import config from '@/application/config'
 import type { Tile } from '@/application/types'
 import ChipsInput from '@/components/forms/ChipsInput.vue'
-import { TileStorage } from '@/storage/storages'
 import { useAssetManagerStore } from '@/stores/assetManagerStore'
 import { useGameStore } from '@/stores/gameStore'
+import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import { computed, onBeforeUnmount, onMounted, ref, toRaw, watch } from 'vue'
 
 const gameStore = useGameStore()
 const assetManagerStore = useAssetManagerStore()
-const tileStorage = new TileStorage()
+const zoneEditorStore = useZoneEditorStore()
 
 const selectedTile = computed(() => assetManagerStore.selectedTile)
 
@@ -55,13 +55,12 @@ watch(selectedTile, (tile: Tile | null) => {
   tileTags.value = tile.tags
 })
 
-async function deleteTile() {
+function deleteTile() {
-  gameStore.connection?.emit('gm:tile:delete', { id: selectedTile.value?.id }, async (response: boolean) => {
+  gameStore.connection?.emit('gm:tile:delete', { id: selectedTile.value?.id }, (response: boolean) => {
     if (!response) {
       console.error('Failed to delete tile')
       return
     }
-    await tileStorage.delete(selectedTile.value!.id)
     refreshTileList()
   })
 }
@@ -73,6 +72,10 @@ function refreshTileList(unsetSelectedTile = true) {
     if (unsetSelectedTile) {
       assetManagerStore.setSelectedTile(null)
     }
+
+    if (zoneEditorStore.active) {
+      zoneEditorStore.setTileList(response)
+    }
   })
 }
 

src/components/gameMaster/assetManager/partials/tile/TileList.vue

@@ -8,12 +8,12 @@
       </svg>
     </label>
   </div>
-  <div v-bind="containerProps" class="flex-1 overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
+  <div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
-    <div v-bind="wrapperProps" ref="elementToScroll" class="flex flex-col gap-2.5">
+    <div v-bind="wrapperProps" ref="elementToScroll">
       <a v-for="{ data: tile } in list" :key="tile.id" class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group" :class="{ 'bg-cyan': assetManagerStore.selectedTile?.id === tile.id }" @click="assetManagerStore.setSelectedTile(tile)">
         <div class="flex items-center gap-2.5">
           <div class="h-7 w-16 max-w-16 flex justify-center">
-            <img class="h-7" :src="`${config.server_endpoint}/textures/tiles/${tile.id}.png`" alt="Tile" />
+            <img class="h-7" :src="`${config.server_endpoint}/assets/tiles/${tile.id}.png`" alt="Tile" />
           </div>
           <span class="group-hover:text-white" :class="{ 'text-white': assetManagerStore.selectedTile?.id === tile.id }">{{ tile.name }}</span>
         </div>
@@ -21,7 +21,7 @@
     </div>
     <div class="absolute w-12 h-12 bottom-2.5 right-2.5">
       <button class="fixed min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
-        <img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/mapEditor/chevron.svg" alt="" />
+        <img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
       </button>
     </div>
   </div>

src/components/gameMaster/mapEditor/Map.vue

@@ -1,46 +0,0 @@
-<template>
-  <MapTiles ref="mapTiles" @tileMap:create="tileMap = $event" />
-  <PlacedMapObjects ref="mapObjects" v-if="tileMap" :tileMap="tileMap as Phaser.Tilemaps.Tilemap" />
-  <MapEventTiles ref="eventTiles" v-if="tileMap" :tileMap="tileMap as Phaser.Tilemaps.Tilemap" />
-</template>
-
-<script setup lang="ts">
-import MapEventTiles from '@/components/gameMaster/mapEditor/mapPartials/MapEventTiles.vue'
-import MapTiles from '@/components/gameMaster/mapEditor/mapPartials/MapTiles.vue'
-import PlacedMapObjects from '@/components/gameMaster/mapEditor/mapPartials/PlacedMapObjects.vue'
-import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
-import { useScene } from 'phavuer'
-import { onMounted, onUnmounted, shallowRef, useTemplateRef } from 'vue'
-
-const tileMap = shallowRef<Phaser.Tilemaps.Tilemap>()
-const mapEditor = useMapEditorComposable()
-
-const scene = useScene()
-
-const mapTiles = useTemplateRef('mapTiles')
-const mapObjects = useTemplateRef('mapObjects')
-const eventTiles = useTemplateRef('eventTiles')
-
-function handlePointer(pointer: Phaser.Input.Pointer) {
-  if (!mapTiles.value || !mapObjects.value || !eventTiles.value) return
-
-  // Check if left mouse button is pressed
-  if (!pointer.isDown) return
-
-  // Check if shift is pressed or if we're in move mode, this means we are moving the camera
-  if (pointer.event.shiftKey || mapEditor.tool.value === 'move') return
-
-  // Check if draw mode is tile
-  switch (mapEditor.drawMode.value) {
-    case 'tile':
-      mapTiles.value.handlePointer(pointer)
-      break
-    case 'object':
-      mapObjects.value.handlePointer(pointer)
-      break
-    case 'event':
-      eventTiles.value.handlePointer(pointer)
-      break
-  }
-}
-</script>

src/components/gameMaster/mapEditor/mapPartials/MapEventTiles.vue

@@ -1,100 +0,0 @@
-<template>
-  <Image v-for="tile in mapEditor.currentMap.value?.mapEventTiles" v-bind="getImageProps(tile)" />
-</template>
-
-<script setup lang="ts">
-import { MapEventTileType, type MapEventTile, type Map as MapT } from '@/application/types'
-import { uuidv4 } from '@/application/utilities'
-import { getTile, tileToWorldX, tileToWorldY } from '@/composables/mapComposable'
-import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
-import { Image, useScene } from 'phavuer'
-import { shallowRef } from 'vue'
-
-const mapEditor = useMapEditorComposable()
-
-defineExpose({ handlePointer })
-
-const props = defineProps<{
-  tileMap: Phaser.Tilemaps.Tilemap
-}>()
-
-const tileLayer = shallowRef<Phaser.Tilemaps.TilemapLayer>()
-
-function getImageProps(tile: MapEventTile) {
-  return {
-    x: tileToWorldX(props.tileMap, tile.positionX, tile.positionY),
-    y: tileToWorldY(props.tileMap, tile.positionX, tile.positionY),
-    texture: tile.type,
-    depth: 999
-  }
-}
-
-function pencil(pointer: Phaser.Input.Pointer, map: MapT) {
-  if (!tileLayer.value) return
-
-  // Check if there is a tile
-  const tile = getTile(tileLayer.value, pointer.worldX, pointer.worldY)
-  if (!tile) return
-
-  // Check if event tile already exists on position
-  const existingEventTile = map.mapEventTiles.find((eventTile) => eventTile.positionX === tile.x && eventTile.positionY === tile.y)
-  if (existingEventTile) return
-
-  // If teleport, check if there is a selected map
-  if (mapEditor.drawMode.value === 'teleport' && !mapEditor.teleportSettings.value.toMapId) return
-
-  const newEventTile = {
-    id: uuidv4(),
-    mapId: map?.id,
-    map: map?.id,
-    type: mapEditor.drawMode.value === 'blocking tile' ? MapEventTileType.BLOCK : MapEventTileType.TELEPORT,
-    positionX: tile.x,
-    positionY: tile.y,
-    teleport:
-      mapEditor.drawMode.value === 'teleport'
-        ? {
-            toMap: mapEditor.teleportSettings.value.toMapId,
-            toPositionX: mapEditor.teleportSettings.value.toPositionX,
-            toPositionY: mapEditor.teleportSettings.value.toPositionY,
-            toRotation: mapEditor.teleportSettings.value.toRotation
-          }
-        : undefined
-  }
-
-  map!.mapEventTiles = map!.mapEventTiles.concat(newEventTile as MapEventTile)
-}
-
-function erase(pointer: Phaser.Input.Pointer, map: MapT) {
-  if (!tileLayer.value) return
-  // Check if there is a tile
-  const tile = getTile(tileLayer.value, pointer.worldX, pointer.worldY)
-  if (!tile) return
-
-  // Check if event tile already exists on position
-  const existingEventTile = map.mapEventTiles.find((eventTile) => eventTile.positionX === tile.x && eventTile.positionY === tile.y)
-  if (!existingEventTile) return
-
-  // Remove existing event tile
-  map.mapEventTiles = map.mapEventTiles.filter((eventTile) => eventTile.id !== existingEventTile.id)
-}
-
-function handlePointer(pointer: Phaser.Input.Pointer) {
-  const map = mapEditor.currentMap.value
-  if (!map) return
-
-  // Check if left mouse button is pressed
-  if (!pointer.isDown) return
-
-  // Check if shift is not pressed, this means we are moving the camera
-  if (pointer.event.shiftKey) return
-
-  switch (mapEditor.tool.value) {
-    case 'pencil':
-      pencil(pointer, map)
-      break
-    case 'eraser':
-      erase(pointer, map)
-      break
-  }
-}
-</script>

src/components/gameMaster/mapEditor/mapPartials/MapTiles.vue

@@ -1,194 +0,0 @@
-<template>
-  <Controls v-if="tileLayer" :layer="tileLayer" :depth="0" />
-</template>
-
-<script setup lang="ts">
-import config from '@/application/config'
-import Controls from '@/components/utilities/Controls.vue'
-import { createTileArray, getTile, placeTile, setLayerTiles } from '@/composables/mapComposable'
-import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
-import { TileStorage } from '@/storage/storages'
-import { useScene } from 'phavuer'
-import { onMounted, onUnmounted, shallowRef, watch } from 'vue'
-
-import Tileset = Phaser.Tilemaps.Tileset
-
-const emit = defineEmits(['tileMap:create'])
-
-const scene = useScene()
-const mapEditor = useMapEditorComposable()
-const tileStorage = new TileStorage()
-
-const tileMap = shallowRef<Phaser.Tilemaps.Tilemap>()
-const tileLayer = shallowRef<Phaser.Tilemaps.TilemapLayer>()
-
-defineExpose({ handlePointer })
-
-function createTileMap() {
-  const mapData = new Phaser.Tilemaps.MapData({
-    width: mapEditor.currentMap.value?.width,
-    height: mapEditor.currentMap.value?.height,
-    tileWidth: config.tile_size.width,
-    tileHeight: config.tile_size.height,
-    orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
-    format: Phaser.Tilemaps.Formats.ARRAY_2D
-  })
-
-  const newTileMap = new Phaser.Tilemaps.Tilemap(scene, mapData)
-  emit('tileMap:create', newTileMap)
-  return newTileMap
-}
-
-async function createTileLayer(currentTileMap: Phaser.Tilemaps.Tilemap) {
-  const tiles = await tileStorage.getAll()
-  const tilesetImages = []
-
-  for (const tile of tiles) {
-    tilesetImages.push(currentTileMap.addTilesetImage(tile.id, tile.id, config.tile_size.width, config.tile_size.height, 1, 2, tilesetImages.length + 1, { x: 0, y: -config.tile_size.height }))
-  }
-
-  // Add blank tile
-  tilesetImages.push(currentTileMap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.width, config.tile_size.height, 1, 2, 0, { x: 0, y: -config.tile_size.height }))
-
-  const layer = currentTileMap.createBlankLayer('tiles', tilesetImages as Tileset[], 0, config.tile_size.height) as Phaser.Tilemaps.TilemapLayer
-
-  layer.setDepth(0)
-  layer.setCullPadding(2, 2)
-  return layer
-}
-
-function pencil(pointer: Phaser.Input.Pointer) {
-  let map = mapEditor.currentMap.value
-  if (!map) return
-
-  // Check if there is a selected tile
-  if (!mapEditor.selectedTile.value) return
-
-  if (!tileMap.value || !tileLayer.value) return
-
-  // Check if there is a tile
-  const tile = getTile(tileLayer.value, pointer.worldX, pointer.worldY)
-  if (!tile) return
-
-  // Place tile
-  placeTile(tileMap.value, tileLayer.value, tile.x, tile.y, mapEditor.selectedTile.value)
-
-  // Adjust mapEditorStore.map.tiles
-  map.tiles[tile.y][tile.x] = mapEditor.selectedTile.value
-}
-
-function eraser(pointer: Phaser.Input.Pointer) {
-  let map = mapEditor.currentMap.value
-  if (!map) return
-
-  if (!tileMap.value || !tileLayer.value) return
-
-  // Check if there is a tile
-  const tile = getTile(tileLayer.value, pointer.worldX, pointer.worldY)
-  if (!tile) return
-
-  // Place tile
-  placeTile(tileMap.value, tileLayer.value, tile.x, tile.y, 'blank_tile')
-
-  // Adjust mapEditorStore.map.tiles
-  map.tiles[tile.y][tile.x] = 'blank_tile'
-}
-
-function paint(pointer: Phaser.Input.Pointer) {
-  if (!tileMap.value || !tileLayer.value) return
-  // Set new tileArray with selected tile
-  const tileArray = createTileArray(tileMap.value.width, tileMap.value.height, mapEditor.selectedTile.value)
-  setLayerTiles(tileMap.value, tileLayer.value, tileArray)
-
-  // Adjust mapEditorStore.map.tiles
-  if (mapEditor.currentMap.value) {
-    mapEditor.currentMap.value.tiles = tileArray
-  }
-}
-
-// When alt is pressed, and the pointer is down, select the tile that the pointer is over
-function tilePicker(pointer: Phaser.Input.Pointer) {
-  let map = mapEditor.currentMap.value
-  if (!map) return
-
-  if (!tileMap.value || !tileLayer.value) return
-
-  // Check if there is a tile
-  const tile = getTile(tileLayer.value, pointer.worldX, pointer.worldY)
-  if (!tile) return
-
-  // Select the tile
-  mapEditor.setSelectedTile(map.tiles[tile.y][tile.x])
-}
-
-watch(
-  () => mapEditor.shouldClearTiles,
-  (shouldClear) => {
-    if (shouldClear && mapEditor.currentMap.value && tileMap.value && tileLayer.value) {
-      const blankTiles = createTileArray(tileLayer.value.width, tileLayer.value.height, 'blank_tile')
-      setLayerTiles(tileMap.value, tileLayer.value, blankTiles)
-      mapEditor.currentMap.value.tiles = blankTiles
-      mapEditor.resetClearTilesFlag()
-    }
-  }
-)
-
-function handlePointer(pointer: Phaser.Input.Pointer) {
-  if (!tileMap.value || !tileLayer.value) return
-
-  // Check if left mouse button is pressed
-  if (!pointer.isDown) return
-
-  // Check if shift is not pressed, this means we are moving the camera
-  if (pointer.event.shiftKey) return
-
-  // Check if alt is pressed
-  if (pointer.event.altKey) {
-    tilePicker(pointer)
-    return
-  }
-
-  // Check if draw mode is tile
-  switch (mapEditor.tool.value) {
-    case 'pencil':
-      pencil(pointer)
-      break
-    case 'eraser':
-      eraser(pointer)
-      break
-    case 'paint':
-      paint(pointer)
-      break
-  }
-}
-
-onMounted(async () => {
-  if (!mapEditor.currentMap.value) return
-
-  tileMap.value = createTileMap()
-  tileLayer.value = await createTileLayer(tileMap.value)
-
-  // First fill the entire map with blank tiles using current map dimensions
-  const blankTiles = createTileArray(mapEditor.currentMap.value.width, mapEditor.currentMap.value.height, 'blank_tile')
-
-  // Then overlay the map tiles, but only within the current map dimensions
-  const mapTiles = mapEditor.currentMap.value.tiles
-  for (let y = 0; y < mapEditor.currentMap.value.height; y++) {
-    for (let x = 0; x < mapEditor.currentMap.value.width; x++) {
-      if (mapTiles[y] && mapTiles[y][x] !== undefined) {
-        blankTiles[y][x] = mapTiles[y][x]
-      }
-    }
-  }
-
-  setLayerTiles(tileMap.value, tileLayer.value, blankTiles)
-})
-
-onUnmounted(() => {
-  if (tileMap.value) {
-    tileMap.value.destroyLayer('tiles')
-    tileMap.value.removeAllLayers()
-    tileMap.value.destroy()
-  }
-})
-</script>

src/components/gameMaster/mapEditor/mapPartials/PlacedMapObject.vue

@@ -1,45 +0,0 @@
-<template>
-  <Image v-if="gameStore.isTextureLoaded(props.placedMapObject.mapObject.id)" v-bind="imageProps" />
-</template>
-
-<script setup lang="ts">
-import type { PlacedMapObject, TextureData } from '@/application/types'
-import { loadTexture } from '@/composables/gameComposable'
-import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/mapComposable'
-import { useGameStore } from '@/stores/gameStore'
-import { Image, useScene } from 'phavuer'
-import { computed } from 'vue'
-
-const props = defineProps<{
-  tileMap: Phaser.Tilemaps.Tilemap
-  placedMapObject: PlacedMapObject
-  selectedPlacedMapObject: PlacedMapObject | null
-  movingPlacedMapObject: PlacedMapObject | null
-}>()
-
-const gameStore = useGameStore()
-const scene = useScene()
-
-const imageProps = computed(() => ({
-  alpha: props.movingPlacedMapObject?.id === props.placedMapObject.id ? 0.5 : 1,
-  tint: props.selectedPlacedMapObject?.id === props.placedMapObject.id ? 0x00ff00 : 0xffffff,
-  depth: calculateIsometricDepth(props.placedMapObject.positionX, props.placedMapObject.positionY, props.placedMapObject.mapObject.frameWidth, props.placedMapObject.mapObject.frameHeight),
-  x: tileToWorldX(props.tileMap, props.placedMapObject.positionX, props.placedMapObject.positionY),
-  y: tileToWorldY(props.tileMap, props.placedMapObject.positionX, props.placedMapObject.positionY),
-  flipX: props.placedMapObject.isRotated,
-  texture: props.placedMapObject.mapObject.id,
-  originY: Number(props.placedMapObject.mapObject.originX),
-  originX: Number(props.placedMapObject.mapObject.originY)
-}))
-
-loadTexture(scene, {
-  key: props.placedMapObject.mapObject.id,
-  data: '/textures/map_objects/' + props.placedMapObject.mapObject.id + '.png',
-  group: 'map_objects',
-  updatedAt: props.placedMapObject.mapObject.updatedAt,
-  frameWidth: props.placedMapObject.mapObject.frameWidth,
-  frameHeight: props.placedMapObject.mapObject.frameHeight
-} as TextureData).catch((error) => {
-  console.error('Error loading texture:', error)
-})
-</script>

src/components/gameMaster/mapEditor/mapPartials/PlacedMapObjects.vue

@@ -1,181 +0,0 @@
-<template>
-  <SelectedPlacedMapObjectComponent v-if="selectedPlacedMapObject" :placedMapObject="selectedPlacedMapObject" @move="moveMapObject" @rotate="rotatePlacedMapObject" @delete="deletePlacedMapObject" />
-  <PlacedMapObject v-for="placedMapObject in mapEditor.currentMap.value?.placedMapObjects" :tileMap="tileMap" :placedMapObject :selectedPlacedMapObject :movingPlacedMapObject @pointerup="clickPlacedMapObject(placedMapObject)" />
-</template>
-
-<script setup lang="ts">
-import type { Map as MapT, PlacedMapObject as PlacedMapObjectT } from '@/application/types'
-import { uuidv4 } from '@/application/utilities'
-import PlacedMapObject from '@/components/gameMaster/mapEditor/mapPartials/PlacedMapObject.vue'
-import SelectedPlacedMapObjectComponent from '@/components/gameMaster/mapEditor/partials/SelectedPlacedMapObject.vue'
-import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
-import { useScene } from 'phavuer'
-import { ref, watch } from 'vue'
-
-const scene = useScene()
-const mapEditor = useMapEditorComposable()
-const selectedPlacedMapObject = ref<PlacedMapObjectT | null>(null)
-const movingPlacedMapObject = ref<PlacedMapObjectT | null>(null)
-
-const props = defineProps<{
-  tileMap: Phaser.Tilemaps.Tilemap
-}>()
-
-defineExpose({ handlePointer })
-
-function pencil(pointer: Phaser.Input.Pointer, map: MapT) {
-  // Check if object already exists on position
-  const existingPlacedMapObject = findInMap(pointer, map)
-  if (existingPlacedMapObject) return
-
-  const newPlacedMapObject: PlacedMapObjectT = {
-    id: uuidv4(),
-    depth: 0,
-    map: map,
-    mapObject: mapEditor.selectedMapObject.value!,
-    isRotated: false,
-    positionX: pointer.x,
-    positionY: pointer.y
-  }
-
-  // Add new object to mapObjects
-  map.placedMapObjects.concat(newPlacedMapObject)
-}
-
-function eraser(pointer: Phaser.Input.Pointer, map: MapT) {
-  // Check if object already exists on position
-  const existingPlacedMapObject = findInMap(pointer, map)
-  if (!existingPlacedMapObject) return
-
-  // Remove existing object
-  map.placedMapObjects = map.placedMapObjects.filter((placedMapObject) => placedMapObject.id !== existingPlacedMapObject.id)
-}
-
-function findInMap(pointer: Phaser.Input.Pointer, map: MapT) {
-  return map.placedMapObjects.find((placedMapObject) => placedMapObject.positionX === pointer.worldX && placedMapObject.positionY === pointer.worldY)
-}
-
-function objectPicker(pointer: Phaser.Input.Pointer, map: MapT) {
-  // Check if object already exists on position
-  const existingPlacedMapObject = findInMap(pointer, map)
-  if (!existingPlacedMapObject) return
-
-  // Select the object
-  mapEditor.setSelectedMapObject(existingPlacedMapObject.mapObject)
-}
-
-function moveMapObject(id: string, map: MapT) {
-  movingPlacedMapObject.value = map.placedMapObjects.find((object) => object.id === id) as PlacedMapObjectT
-
-  function handlePointerMove(pointer: Phaser.Input.Pointer) {
-    if (!movingPlacedMapObject.value) return
-
-    movingPlacedMapObject.value.positionX = pointer.worldX
-    movingPlacedMapObject.value.positionY = pointer.worldY
-  }
-
-  scene.input.on(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
-
-  function handlePointerUp() {
-    scene.input.off(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
-    movingPlacedMapObject.value = null
-  }
-
-  scene.input.on(Phaser.Input.Events.POINTER_UP, handlePointerUp)
-}
-
-function rotatePlacedMapObject(id: string, map: MapT) {
-  map.placedMapObjects = map.placedMapObjects.map((placedMapObject) => {
-    if (placedMapObject.id === id) {
-      return {
-        ...placedMapObject,
-        isRotated: !placedMapObject.isRotated
-      }
-    }
-    return placedMapObject
-  })
-}
-
-function deletePlacedMapObject(id: string, map: MapT) {
-  map.placedMapObjects = map.placedMapObjects.filter((object) => object.id !== id)
-  selectedPlacedMapObject.value = null
-}
-
-function clickPlacedMapObject(placedMapObject: PlacedMapObjectT) {
-  selectedPlacedMapObject.value = placedMapObject
-
-  // If alt is pressed, select the object
-  if (scene.input.activePointer.event.altKey) {
-    mapEditor.setSelectedMapObject(placedMapObject.mapObject)
-  }
-}
-
-function handlePointer(pointer: Phaser.Input.Pointer) {
-  const map = mapEditor.currentMap.value
-  if (!map) return
-
-  if (mapEditor.drawMode.value !== 'map_object') return
-
-  // Check if left mouse button is pressed
-  if (!pointer.isDown) return
-
-  // Check if shift is not pressed, this means we are moving the camera
-  if (pointer.event.shiftKey) return
-
-  // Check if alt is pressed, this means we are selecting the object
-  if (pointer.event.altKey) return
-
-  // Check if tool is pencil
-  switch (mapEditor.tool.value) {
-    case 'pencil':
-      if (mapEditor.selectedMapObject.value) pencil(pointer, map)
-      break
-    case 'eraser':
-      eraser(pointer, map)
-      break
-    case 'object picker':
-      objectPicker(pointer, map)
-      break
-  }
-}
-
-// watch mapEditorStore.mapObjectList and update originX and originY of objects in mapObjects
-watch(
-  () => mapEditor.currentMap.value,
-  () => {
-    const map = mapEditor.currentMap.value
-    if (!map) return
-
-    const updatedMapObjects = map.placedMapObjects.map((mapObject) => {
-      const updatedMapObject = map.placedMapObjects.find((obj) => obj.id === mapObject.mapObject.id)
-      if (updatedMapObject) {
-        return {
-          ...mapObject,
-          mapObject: {
-            ...mapObject.mapObject,
-            originX: updatedMapObject.positionX,
-            originY: updatedMapObject.positionY
-          }
-        }
-      }
-      return mapObject
-    })
-
-    // Update the map with the new mapObjects
-    map.placedMapObjects = [...map.placedMapObjects, ...updatedMapObjects]
-
-    // Update mapObject if it's set
-    if (mapEditor.selectedMapObject.value) {
-      const updatedMapObject = map.placedMapObjects.find((obj) => obj.id === mapEditor.selectedMapObject.value?.id)
-      if (updatedMapObject) {
-        mapEditor.setSelectedMapObject({
-          ...mapEditor.selectedMapObject.value,
-          originX: updatedMapObject.positionX,
-          originY: updatedMapObject.positionY
-        })
-      }
-    }
-  }
-  // { deep: true }
-)
-</script>

src/components/gameMaster/mapEditor/partials/MapList.vue

@@ -1,84 +0,0 @@
-<template>
-  <Modal ref="modalRef" :is-resizable="false" :modal-width="300" :modal-height="360" :bg-style="'none'">
-    <template #modalHeader>
-      <h3 class="text-lg text-white">Maps</h3>
-    </template>
-    <template #modalBody>
-      <div class="my-4 mx-auto h-full">
-        <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="fetchMaps">Refresh</button>
-          <button class="btn-cyan py-1.5 min-w-[calc(50%_-_5px)]" @click="createMapModal?.open">New</button>
-        </div>
-        <div class="overflow-y-auto h-[calc(100%-20px)]">
-          <div class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap" v-for="(map, index) in mapList" :key="map.id">
-            <div class="absolute left-0 top-0 w-full h-px bg-gray-500" v-if="index === 0"></div>
-            <div class="flex gap-3 items-center w-full" @click="() => loadMap(map.id)">
-              <span>{{ map.name }}</span>
-              <span class="ml-auto gap-1 flex">
-                <button class="btn-red w-7 h-7 z-50 flex items-center justify-center" @click.stop="() => deleteMap(map.id)">x</button>
-              </span>
-            </div>
-            <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
-          </div>
-        </div>
-      </div>
-    </template>
-  </Modal>
-
-  <CreateMap ref="createMapModal" @create="fetchMaps" />
-</template>
-
-<script setup lang="ts">
-import type { Map, UUID } from '@/application/types'
-import CreateMap from '@/components/gameMaster/mapEditor/partials/CreateMap.vue'
-import Modal from '@/components/utilities/Modal.vue'
-import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
-import { MapStorage } from '@/storage/storages'
-import { useGameStore } from '@/stores/gameStore'
-import { useMapEditorStore } from '@/stores/mapEditorStore'
-import { onMounted, ref, useTemplateRef } from 'vue'
-
-const gameStore = useGameStore()
-
-const mapEditor = useMapEditorComposable()
-const mapStorage = new MapStorage()
-const mapList = ref<Map[]>([])
-const modalRef = useTemplateRef('modalRef')
-const createMapModal = useTemplateRef('createMapModal')
-
-defineEmits(['open-create-map'])
-
-defineExpose({
-  open: () => modalRef.value?.open()
-})
-
-onMounted(async () => {
-  await fetchMaps()
-})
-
-async function fetchMaps() {
-  mapList.value = await mapStorage.getAll()
-}
-
-function loadMap(id: UUID) {
-  gameStore.connection?.emit('gm:map:request', { mapId: id }, (response: Map) => {
-    mapEditor.loadMap(response)
-  })
-  modalRef.value?.close()
-}
-
-async function deleteMap(id: UUID) {
-  gameStore.connection?.emit('gm:map:delete', { mapId: id }, async (response: boolean) => {
-    if (!response) {
-      gameStore.addNotification({
-        title: 'Error',
-        message: 'Failed to delete map.'
-      })
-      return
-    }
-
-    await mapStorage.delete(id)
-    await fetchMaps()
-  })
-}
-</script>

src/components/gameMaster/mapEditor/partials/MapObjectList.vue

@@ -1,107 +0,0 @@
-<template>
-  <div class="absolute border-0 border-l-2 border-solid border-gray-500 w-1/4 min-w-80 flex flex-col top-0 right-0 z-10 h-dvh bg-gray-800 z-20" v-if="isOpen">
-    <div class="relative z-10 p-2.5 border-solid border-0 border-b border-gray-500">
-      <h3 class="text-lg text-white">Map objects</h3>
-    </div>
-    <div class="overflow-hidden grow relative">
-      <div class="absolute w-full h-full top-0 left-0">
-        <div class="relative z-10 h-full">
-          <div class="flex pt-4 pl-4">
-            <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-field" type="text" name="search" placeholder="Search" v-model="searchQuery" />
-              </div>
-            </div>
-          </div>
-          <div class="flex flex-col h-[calc(100%_-_170px)] p-4 pb-24">
-            <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="(mapObject, index) in filteredMapObjects" :key="index" class="max-w-1/4 inline-block">
-                  <img
-                    class="border-2 border-solid rounded max-w-full"
-                    :src="`${config.server_endpoint}/textures/map_objects/${mapObject.id}.png`"
-                    alt="Object"
-                    @click="mapEditor.setSelectedMapObject(mapObject)"
-                    :class="{
-                      'cursor-pointer transition-all duration-300': true,
-                      'border-cyan shadow-lg': mapEditor.selectedMapObject.value?.id === mapObject.id,
-                      'border-transparent hover:border-gray-300': mapEditor.selectedMapObject.value?.id !== mapObject.id
-                    }"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import config from '@/application/config'
-import type { MapObject } from '@/application/types'
-import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
-import { MapObjectStorage } from '@/storage/storages'
-import { liveQuery } from 'dexie'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
-
-defineExpose({
-  open: () => (isOpen.value = true),
-  close: () => (isOpen.value = false),
-  toggle: () => (isOpen.value = !isOpen.value)
-})
-
-const isOpen = ref(false)
-const mapObjectStorage = new MapObjectStorage()
-const mapEditor = useMapEditorComposable()
-const searchQuery = ref('')
-const selectedTags = ref<string[]>([])
-const mapObjectList = ref<MapObject[]>([])
-
-const uniqueTags = computed(() => {
-  const allTags = mapObjectList.value.flatMap((obj) => obj.tags || [])
-  return Array.from(new Set(allTags))
-})
-
-const filteredMapObjects = computed(() => {
-  return mapObjectList.value.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)
-  }
-}
-
-let subscription: any = null
-
-onMounted(() => {
-  subscription = liveQuery(() => mapObjectStorage.liveQuery()).subscribe({
-    next: (result) => {
-      mapObjectList.value = result
-    },
-    error: (error) => {
-      console.error('Failed to fetch objects:', error)
-    }
-  })
-})
-
-onUnmounted(() => {
-  if (subscription) {
-    subscription.unsubscribe()
-  }
-})
-</script>

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

@@ -1,179 +0,0 @@
-<template>
-  <div class="absolute border-0 border-l-2 border-solid border-gray-500 w-1/4 min-w-80 flex flex-col top-0 right-0 z-10 h-dvh bg-gray-800 z-20" v-if="isOpen">
-    <div class="relative z-10 p-2.5 border-solid border-0 border-b border-gray-500">
-      <h3 class="text-lg text-white">Tiles</h3>
-    </div>
-    <div class="overflow-hidden grow relative">
-      <div class="absolute top-0 left-0 h-full w-full">
-        <div class="relative z-10 h-full">
-          <div class="h-full" v-if="!selectedGroup">
-            <div class="flex pt-4 pl-4">
-              <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-field" type="text" name="search" placeholder="Search" v-model="searchQuery" />
-                </div>
-              </div>
-            </div>
-            <div class="flex flex-col h-[calc(100%_-_170px)] p-4 pb-24">
-              <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 flex-grow overflow-y-auto">
-                <div class="grid grid-cols-4 gap-2 justify-items-center">
-                  <div v-for="group in groupedTiles" :key="group.parent.id" class="flex flex-col items-center justify-center relative">
-                    <img
-                      class="max-w-full max-h-full border-2 border-solid rounded cursor-pointer transition-all duration-300"
-                      :src="`${config.server_endpoint}/textures/tiles/${group.parent.id}.png`"
-                      :alt="group.parent.name"
-                      @click="openGroup(group)"
-                      @load="() => tileProcessor.processTile(group.parent)"
-                      :class="{
-                        'border-cyan shadow-lg': isActiveTile(group.parent),
-                        'border-transparent hover:border-gray-300': !isActiveTile(group.parent)
-                      }"
-                    />
-                    <span class="text-xs mt-1">{{ getTileCategory(group.parent) }}</span>
-                    <span v-if="group.children.length > 0" class="absolute top-0 right-0 bg-cyan text-white rounded-full w-5 h-5 flex items-center justify-center text-xs">
-                      {{ group.children.length + 1 }}
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div v-else class="h-full overflow-auto">
-            <div class="p-4">
-              <button @click="closeGroup" class="btn-cyan mb-4">Back to All Tiles</button>
-              <h4 class="text-lg mb-4">{{ selectedGroup.parent.name }} Group</h4>
-              <div class="grid grid-cols-4 gap-2 justify-items-center">
-                <div class="flex flex-col items-center justify-center">
-                  <img
-                    class="max-w-full max-h-full border-2 border-solid rounded cursor-pointer transition-all duration-300"
-                    :src="`${config.server_endpoint}/textures/tiles/${selectedGroup.parent.id}.png`"
-                    :alt="selectedGroup.parent.name"
-                    @click="selectTile(selectedGroup.parent.id)"
-                    :class="{
-                      'border-cyan shadow-lg': isActiveTile(selectedGroup.parent),
-                      'border-transparent hover:border-gray-300': !isActiveTile(selectedGroup.parent)
-                    }"
-                  />
-                  <span class="text-xs mt-1">{{ getTileCategory(selectedGroup.parent) }}</span>
-                </div>
-                <div v-for="childTile in selectedGroup.children" :key="childTile.id" class="flex flex-col items-center justify-center">
-                  <img
-                    class="max-w-full max-h-full border-2 border-solid rounded cursor-pointer transition-all duration-300"
-                    :src="`${config.server_endpoint}/textures/tiles/${childTile.id}.png`"
-                    :alt="childTile.name"
-                    @click="selectTile(childTile.id)"
-                    :class="{
-                      'border-cyan shadow-lg': isActiveTile(childTile),
-                      'border-transparent hover:border-gray-300': !isActiveTile(childTile)
-                    }"
-                  />
-                  <span class="text-xs mt-1">{{ getTileCategory(childTile) }}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import config from '@/application/config'
-import type { Tile } from '@/application/types'
-import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
-import { useTileProcessingComposable } from '@/composables/useTileProcessingComposable'
-import { TileStorage } from '@/storage/storages'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
-
-const isOpen = ref(false)
-const tileStorage = new TileStorage()
-const mapEditor = useMapEditorComposable()
-const tileProcessor = useTileProcessingComposable()
-const searchQuery = ref('')
-const selectedTags = ref<string[]>([])
-const tileCategories = ref<Map<string, string>>(new Map())
-const selectedGroup = ref<{ parent: Tile; children: Tile[] } | null>(null)
-const tiles = ref<Tile[]>([])
-
-defineExpose({
-  open: () => (isOpen.value = true),
-  close: () => (isOpen.value = false),
-  toggle: () => (isOpen.value = !isOpen.value)
-})
-
-const uniqueTags = computed(() => {
-  const allTags = tiles.value.flatMap((tile) => tile.tags || [])
-  return Array.from(new Set(allTags))
-})
-
-const groupedTiles = computed(() => {
-  const groups: { parent: Tile; children: Tile[] }[] = []
-  const filteredTiles = tiles.value.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
-  })
-
-  filteredTiles.forEach((tile) => {
-    const parentGroup = groups.find((group) => tileProcessor.areTilesRelated(group.parent, tile))
-    if (parentGroup && parentGroup.parent.id !== tile.id) {
-      parentGroup.children.push(tile)
-    } else {
-      groups.push({ parent: tile, children: [] })
-    }
-  })
-
-  return groups
-})
-
-const toggleTag = (tag: string) => {
-  if (selectedTags.value.includes(tag)) {
-    selectedTags.value = selectedTags.value.filter((t) => t !== tag)
-  } else {
-    selectedTags.value.push(tag)
-  }
-}
-
-function getTileCategory(tile: Tile): string {
-  return tileCategories.value.get(tile.id) || ''
-}
-
-function openGroup(group: { parent: Tile; children: Tile[] }) {
-  selectedGroup.value = group
-}
-
-function closeGroup() {
-  selectedGroup.value = null
-}
-
-function selectTile(tile: string) {
-  mapEditor.setSelectedTile(tile)
-}
-
-function isActiveTile(tile: Tile): boolean {
-  return mapEditor.selectedTile.value === tile.id
-}
-
-onMounted(async () => {
-  tiles.value = await tileStorage.getAll()
-  const initialBatchSize = 20
-  const initialTiles = tiles.value.slice(0, initialBatchSize)
-  initialTiles.forEach((tile) => tileProcessor.processTile(tile))
-
-  // Process remaining tiles in background
-  setTimeout(() => {
-    tiles.value.slice(initialBatchSize).forEach((tile) => tileProcessor.processTile(tile))
-  }, 1000)
-})
-
-onUnmounted(() => {
-  tileProcessor.cleanup()
-})
-</script>

src/components/gameMaster/zoneEditor/ZoneEditor.vue

@@ -0,0 +1,73 @@
+<template>
+  <ZoneTiles @tileMap:create="tileMap = $event" />
+  <ZoneObjects v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
+  <ZoneEventTiles v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
+
+  <Toolbar @save="save" @clear="clear" />
+
+  <ZoneList />
+  <TileList />
+  <ObjectList />
+
+  <ZoneSettings />
+  <TeleportModal />
+</template>
+
+<script setup lang="ts">
+import { type Zone } from '@/application/types'
+import ObjectList from '@/components/gameMaster/zoneEditor/partials/ObjectList.vue'
+import TeleportModal from '@/components/gameMaster/zoneEditor/partials/TeleportModal.vue'
+import TileList from '@/components/gameMaster/zoneEditor/partials/TileList.vue'
+// Components
+import Toolbar from '@/components/gameMaster/zoneEditor/partials/Toolbar.vue'
+import ZoneList from '@/components/gameMaster/zoneEditor/partials/ZoneList.vue'
+import ZoneSettings from '@/components/gameMaster/zoneEditor/partials/ZoneSettings.vue'
+import ZoneEventTiles from '@/components/gameMaster/zoneEditor/zonePartials/ZoneEventTiles.vue'
+import ZoneObjects from '@/components/gameMaster/zoneEditor/zonePartials/ZoneObjects.vue'
+import ZoneTiles from '@/components/gameMaster/zoneEditor/zonePartials/ZoneTiles.vue'
+import { useGameStore } from '@/stores/gameStore'
+import { useZoneEditorStore } from '@/stores/zoneEditorStore'
+import { onUnmounted, ref } from 'vue'
+
+const gameStore = useGameStore()
+const zoneEditorStore = useZoneEditorStore()
+
+const tileMap = ref(null as Phaser.Tilemaps.Tilemap | null)
+
+function clear() {
+  if (!zoneEditorStore.zone) return
+
+  // Clear objects, event tiles and tiles
+  zoneEditorStore.zone.zoneObjects = []
+  zoneEditorStore.zone.zoneEventTiles = []
+  zoneEditorStore.triggerClearTiles()
+}
+
+function save() {
+  if (!zoneEditorStore.zone) return
+
+  const data = {
+    zoneId: zoneEditorStore.zone.id,
+    name: zoneEditorStore.zoneSettings.name,
+    width: zoneEditorStore.zoneSettings.width,
+    height: zoneEditorStore.zoneSettings.height,
+    tiles: zoneEditorStore.zone.tiles,
+    pvp: zoneEditorStore.zone.pvp,
+    zoneEffects: zoneEditorStore.zone.zoneEffects.map(({ id, zoneId, effect, strength }) => ({ id, zoneId, effect, strength })),
+    zoneEventTiles: zoneEditorStore.zone.zoneEventTiles.map(({ id, zoneId, type, positionX, positionY, teleport }) => ({ id, zoneId, type, positionX, positionY, teleport })),
+    zoneObjects: zoneEditorStore.zone.zoneObjects.map(({ id, zoneId, objectId, depth, isRotated, positionX, positionY }) => ({ id, zoneId, objectId, depth, isRotated, positionX, positionY }))
+  }
+
+  if (zoneEditorStore.isSettingsModalShown) {
+    zoneEditorStore.toggleSettingsModal()
+  }
+
+  gameStore.connection?.emit('gm:zone_editor:zone:update', data, (response: Zone) => {
+    zoneEditorStore.setZone(response)
+  })
+}
+
+onUnmounted(() => {
+  zoneEditorStore.reset()
+})
+</script>

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

@@ -1,8 +1,9 @@
 <template>
-  <Modal ref="modalRef" :modal-width="300" :modal-height="420" :is-resizable="false" :bg-style="'none'">
+  <Modal :isModalOpen="true" @modal:close="() => zoneEditorStore.toggleCreateZoneModal()" :modal-width="300" :modal-height="420" :is-resizable="false" :bg-style="'none'">
     <template #modalHeader>
-      <h3 class="m-0 font-medium shrink-0 text-white">Create new map</h3>
+      <h3 class="m-0 font-medium shrink-0 text-white">Create new zone</h3>
     </template>
+
     <template #modalBody>
       <div class="m-4">
         <form method="post" @submit.prevent="submit" class="inline">
@@ -13,15 +14,15 @@
             </div>
             <div class="form-field-half">
               <label for="name">Width</label>
-              <input class="input-field max-w-64" v-model="width" name="width" id="width" type="number" />
+              <input class="input-field 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-field max-w-64" v-model="height" name="height" id="height" type="number" />
+              <input class="input-field 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-field" v-model="pvp" name="pvp" id="pvp">
+              <select class="input-field" name="pvp" id="pvp">
                 <option :value="false">No</option>
                 <option :value="true">Yes</option>
               </select>
@@ -35,52 +36,23 @@
 </template>
 
 <script setup lang="ts">
-import type { Map } from '@/application/types'
+import type { Zone } from '@/application/types'
 import Modal from '@/components/utilities/Modal.vue'
-import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
-import { MapStorage } from '@/storage/storages'
 import { useGameStore } from '@/stores/gameStore'
-import { ref, useTemplateRef } from 'vue'
+import { useZoneEditorStore } from '@/stores/zoneEditorStore'
-
+import { ref } from 'vue'
-const emit = defineEmits(['create'])
 
 const gameStore = useGameStore()
-const mapStorage = new MapStorage()
+const zoneEditorStore = useZoneEditorStore()
-const modalRef = useTemplateRef('modalRef')
 
 const name = ref('')
 const width = ref(0)
 const height = ref(0)
-const pvp = ref(false)
 
-defineExpose({ open: () => modalRef.value?.open() })
+function submit() {
-
+  gameStore.connection.emit('gm:zone_editor:zone:create', { name: name.value, width: width.value, height: height.value }, (response: Zone[]) => {
-async function submit() {
+    zoneEditorStore.setZoneList(response)
-  gameStore.connection?.emit('gm:map:create', { name: name.value, width: width.value, height: height.value }, async (response: Map | false) => {
-    if (!response) {
-      gameStore.addNotification({
-        title: 'Error',
-        message: 'Failed to create map.'
   })
-      return
+  zoneEditorStore.toggleCreateZoneModal()
-    }
-
-    // Reset form
-    name.value = ''
-    width.value = 0
-    height.value = 0
-    pvp.value = false
-
-    // Add map to storage
-
-    console.log(response)
-    await mapStorage.add(response)
-
-    // Let list know to fetch new maps
-    emit('create')
-  })
-
-  // Close modal
-  modalRef.value?.close()
 }
 </script>

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

@@ -0,0 +1,84 @@
+<template>
+  <Modal :isModalOpen="zoneEditorStore.isObjectListModalShown" :modal-width="645" :modal-height="260" @modal:close="() => (zoneEditorStore.isObjectListModalShown = false)" :bg-style="'none'">
+    <template #modalHeader>
+      <h3 class="text-lg text-white">Objects</h3>
+    </template>
+    <template #modalBody>
+      <div class="flex pt-4 pl-4">
+        <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-field" type="text" name="search" placeholder="Search" v-model="searchQuery" />
+          </div>
+        </div>
+      </div>
+      <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>
+</template>
+
+<script setup lang="ts">
+import config from '@/application/config'
+import type { Object, ZoneObject } from '@/application/types'
+import Modal from '@/components/utilities/Modal.vue'
+import { useGameStore } from '@/stores/gameStore'
+import { useZoneEditorStore } from '@/stores/zoneEditorStore'
+import { computed, onMounted, ref } from 'vue'
+
+const gameStore = useGameStore()
+const isModalOpen = ref(false)
+const zoneEditorStore = useZoneEditorStore()
+const searchQuery = ref('')
+const selectedTags = ref<string[]>([])
+
+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 () => {
+  isModalOpen.value = true
+  gameStore.connection?.emit('gm:object:list', {}, (response: Object[]) => {
+    zoneEditorStore.setObjectList(response)
+  })
+})
+</script>

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

@@ -11,23 +11,23 @@
 </template>
 
 <script setup lang="ts">
-import type { PlacedMapObject } from '@/application/types'
+import type { ZoneObject } from '@/application/types'
 
 const props = defineProps<{
-  placedMapObject: PlacedMapObject
+  zoneObject: ZoneObject
 }>()
 
 const emit = defineEmits(['move', 'rotate', 'delete'])
 
 const handleMove = () => {
-  emit('move', props.placedMapObject.id)
+  emit('move', props.zoneObject.id)
 }
 
 const handleRotate = () => {
-  emit('rotate', props.placedMapObject.id)
+  emit('rotate', props.zoneObject.id)
 }
 
 const handleDelete = () => {
-  emit('delete', props.placedMapObject.id)
+  emit('delete', props.zoneObject.id)
 }
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-  <Modal ref="modalRef" @modal:close="() => mapEditorStore.setTool('move')" :modal-width="300" :modal-height="350" :is-resizable="false" :bg-style="'none'">
+  <Modal :is-modal-open="showTeleportModal" @modal:close="() => zoneEditorStore.setTool('move')" :modal-width="300" :modal-height="350" :is-resizable="false" :bg-style="'none'">
     <template #modalHeader>
       <h3 class="m-0 font-medium shrink-0 text-white">Teleport settings</h3>
     </template>
@@ -25,10 +25,10 @@
               </select>
             </div>
             <div class="form-field-full">
-              <label for="toMap">Map to teleport to</label>
+              <label for="toZoneId">Zone to teleport to</label>
-              <select v-model="toMap" class="input-field" name="toMap" id="toMap">
+              <select v-model="toZoneId" class="input-field" name="toZoneId" id="toZoneId">
-                <option :value="null">Select map</option>
+                <option :value="0">Select zone</option>
-                <option v-for="map in mapList" :key="map.id" :value="map">{{ map.name }}</option>
+                <option v-for="zone in zoneEditorStore.zoneList" :key="zone.id" :value="zone.id">{{ zone.name }}</option>
               </select>
             </div>
           </div>
@@ -39,50 +39,44 @@
 </template>
 
 <script setup lang="ts">
-import type { Map } from '@/application/types'
+import type { Zone } from '@/application/types'
 import Modal from '@/components/utilities/Modal.vue'
 import { useGameStore } from '@/stores/gameStore'
-import { useMapEditorStore } from '@/stores/mapEditorStore'
+import { useZoneEditorStore } from '@/stores/zoneEditorStore'
-import { computed, onMounted, ref, useTemplateRef, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 
-const showTeleportModal = computed(() => mapEditorStore.tool === 'pencil' && mapEditorStore.drawMode === 'teleport')
+const showTeleportModal = computed(() => zoneEditorStore.tool === 'pencil' && zoneEditorStore.drawMode === 'teleport')
-const mapEditorStore = useMapEditorStore()
+const zoneEditorStore = useZoneEditorStore()
 const gameStore = useGameStore()
-const mapList = ref<Map[]>([])
-const modalRef = useTemplateRef('modalRef')
 
-defineExpose({
+onMounted(fetchZones)
-  open: () => modalRef.value?.open()
-})
 
-onMounted(fetchMaps)
+function fetchZones() {
-
+  gameStore.connection?.emit('gm:zone_editor:zone:list', {}, (response: Zone[]) => {
-function fetchMaps() {
+    zoneEditorStore.setZoneList(response)
-  gameStore.connection?.emit('gm:map:list', {}, (response: Map[]) => {
-    mapList.value = response
   })
 }
 
-const { toPositionX, toPositionY, toRotation, toMap } = useRefTeleportSettings()
+const { toPositionX, toPositionY, toRotation, toZoneId } = useRefTeleportSettings()
 
 function useRefTeleportSettings() {
-  const settings = mapEditorStore.teleportSettings
+  const settings = zoneEditorStore.teleportSettings
   return {
     toPositionX: ref(settings.toPositionX),
     toPositionY: ref(settings.toPositionY),
     toRotation: ref(settings.toRotation),
-    toMap: ref(settings.toMapId)
+    toZoneId: ref(settings.toZoneId)
   }
 }
 
-watch([toPositionX, toPositionY, toRotation, toMap], updateTeleportSettings)
+watch([toPositionX, toPositionY, toRotation, toZoneId], updateTeleportSettings)
 
 function updateTeleportSettings() {
-  mapEditorStore.setTeleportSettings({
+  zoneEditorStore.setTeleportSettings({
     toPositionX: toPositionX.value,
     toPositionY: toPositionY.value,
     toRotation: toRotation.value,
-    toMapId: toMap.value
+    toZoneId: toZoneId.value
   })
 }
 </script>

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

@@ -0,0 +1,236 @@
+<template>
+  <Modal :isModalOpen="zoneEditorStore.isTileListModalShown" :modal-width="645" :modal-height="600" @modal:close="() => (zoneEditorStore.isTileListModalShown = false)" :bg-style="'none'">
+    <template #modalHeader>
+      <h3 class="text-lg text-white">Tiles</h3>
+    </template>
+    <template #modalBody>
+      <div class="h-full overflow-auto" v-if="!selectedGroup">
+        <div class="flex pt-4 pl-4">
+          <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-field" type="text" name="search" placeholder="Search" v-model="searchQuery" />
+            </div>
+          </div>
+        </div>
+        <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="group in groupedTiles" :key="group.parent.id" class="flex flex-col items-center justify-center relative">
+                <img
+                  class="max-w-full max-h-full border-2 border-solid cursor-pointer transition-all duration-300"
+                  :src="`${config.server_endpoint}/assets/tiles/${group.parent.id}.png`"
+                  :alt="group.parent.name"
+                  @click="openGroup(group)"
+                  @load="() => processTile(group.parent)"
+                  :class="{
+                    'border-cyan shadow-lg scale-105': isActiveTile(group.parent),
+                    'border-transparent hover:border-gray-300': !isActiveTile(group.parent)
+                  }"
+                />
+                <span class="text-xs mt-1">{{ getTileCategory(group.parent) }}</span>
+                <span v-if="group.children.length > 0" class="absolute top-0 right-0 bg-cyan text-white rounded-full w-5 h-5 flex items-center justify-center text-xs">
+                  {{ group.children.length + 1 }}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-else class="h-full overflow-auto">
+        <div class="p-4">
+          <button @click="closeGroup" class="btn-cyan mb-4">Back to All Tiles</button>
+          <h4 class="text-lg mb-4">{{ selectedGroup.parent.name }} Group</h4>
+          <div class="grid grid-cols-8 gap-2 justify-items-center">
+            <div class="flex flex-col items-center justify-center">
+              <img
+                class="max-w-full max-h-full border-2 border-solid cursor-pointer transition-all duration-300"
+                :src="`${config.server_endpoint}/assets/tiles/${selectedGroup.parent.id}.png`"
+                :alt="selectedGroup.parent.name"
+                @click="selectTile(selectedGroup.parent.id)"
+                :class="{
+                  'border-cyan shadow-lg scale-105': isActiveTile(selectedGroup.parent),
+                  'border-transparent hover:border-gray-300': !isActiveTile(selectedGroup.parent)
+                }"
+              />
+              <span class="text-xs mt-1">{{ getTileCategory(selectedGroup.parent) }}</span>
+            </div>
+            <div v-for="childTile in selectedGroup.children" :key="childTile.id" class="flex flex-col items-center justify-center">
+              <img
+                class="max-w-full max-h-full border-2 border-solid cursor-pointer transition-all duration-300"
+                :src="`${config.server_endpoint}/assets/tiles/${childTile.id}.png`"
+                :alt="childTile.name"
+                @click="selectTile(childTile.id)"
+                :class="{
+                  'border-cyan shadow-lg scale-105': isActiveTile(childTile),
+                  'border-transparent hover:border-gray-300': !isActiveTile(childTile)
+                }"
+              />
+              <span class="text-xs mt-1">{{ getTileCategory(childTile) }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </Modal>
+</template>
+
+<script setup lang="ts">
+import config from '@/application/config'
+import type { Tile } from '@/application/types'
+import Modal from '@/components/utilities/Modal.vue'
+import { useGameStore } from '@/stores/gameStore'
+import { useZoneEditorStore } from '@/stores/zoneEditorStore'
+import { computed, onMounted, ref } from 'vue'
+
+const gameStore = useGameStore()
+const isModalOpen = ref(false)
+const zoneEditorStore = useZoneEditorStore()
+const searchQuery = ref('')
+const selectedTags = ref<string[]>([])
+const tileCategories = ref<Map<string, string>>(new Map())
+const selectedGroup = ref<{ parent: Tile; children: Tile[] } | null>(null)
+
+const uniqueTags = computed(() => {
+  const allTags = zoneEditorStore.tileList.flatMap((tile) => tile.tags || [])
+  return Array.from(new Set(allTags))
+})
+
+const groupedTiles = computed(() => {
+  const groups: { parent: Tile; children: Tile[] }[] = []
+  const filteredTiles = 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
+  })
+
+  filteredTiles.forEach((tile) => {
+    const parentGroup = groups.find((group) => areTilesRelated(group.parent, tile))
+    if (parentGroup && parentGroup.parent.id !== tile.id) {
+      parentGroup.children.push(tile)
+    } else {
+      groups.push({ parent: tile, children: [] })
+    }
+  })
+
+  return groups
+})
+
+const tileColorData = ref<Map<string, { r: number; g: number; b: number }>>(new Map())
+const tileEdgeData = ref<Map<string, number>>(new Map())
+
+function areTilesRelated(tile1: Tile, tile2: Tile): boolean {
+  const colorSimilarityThreshold = 30 // Adjust this value as needed
+  const edgeComplexitySimilarityThreshold = 20 // Adjust this value as needed
+
+  const color1 = tileColorData.value.get(tile1.id)
+  const color2 = tileColorData.value.get(tile2.id)
+  const edge1 = tileEdgeData.value.get(tile1.id)
+  const edge2 = tileEdgeData.value.get(tile2.id)
+
+  if (!color1 || !color2 || edge1 === undefined || edge2 === undefined) {
+    return false
+  }
+
+  const colorDifference = Math.sqrt(Math.pow(color1.r - color2.r, 2) + Math.pow(color1.g - color2.g, 2) + Math.pow(color1.b - color2.b, 2))
+
+  const edgeComplexityDifference = Math.abs(edge1 - edge2)
+
+  const namePrefix1 = tile1.name.split('_')[0]
+  const namePrefix2 = tile2.name.split('_')[0]
+
+  return colorDifference <= colorSimilarityThreshold && edgeComplexityDifference <= edgeComplexitySimilarityThreshold && namePrefix1 === namePrefix2
+}
+
+const toggleTag = (tag: string) => {
+  if (selectedTags.value.includes(tag)) {
+    selectedTags.value = selectedTags.value.filter((t) => t !== tag)
+  } else {
+    selectedTags.value.push(tag)
+  }
+}
+
+function processTile(tile: Tile) {
+  const img = new Image()
+  img.crossOrigin = 'Anonymous'
+  img.onload = () => {
+    const canvas = document.createElement('canvas')
+    const ctx = canvas.getContext('2d')
+    canvas.width = img.width
+    canvas.height = img.height
+    ctx!.drawImage(img, 0, 0, img.width, img.height)
+
+    const imageData = ctx!.getImageData(0, 0, canvas.width, canvas.height)
+    tileColorData.value.set(tile.id, getDominantColor(imageData))
+    tileEdgeData.value.set(tile.id, getEdgeComplexity(imageData))
+  }
+  img.src = `${config.server_endpoint}/assets/tiles/${tile.id}.png`
+}
+
+function getDominantColor(imageData: ImageData) {
+  let r = 0,
+    g = 0,
+    b = 0,
+    total = 0
+  for (let i = 0; i < imageData.data.length; i += 4) {
+    if (imageData.data[i + 3] > 0) {
+      // Only consider non-transparent pixels
+      r += imageData.data[i]
+      g += imageData.data[i + 1]
+      b += imageData.data[i + 2]
+      total++
+    }
+  }
+  return {
+    r: Math.round(r / total),
+    g: Math.round(g / total),
+    b: Math.round(b / total)
+  }
+}
+
+function getEdgeComplexity(imageData: ImageData) {
+  let edgePixels = 0
+  for (let y = 0; y < imageData.height; y++) {
+    for (let x = 0; x < imageData.width; x++) {
+      const i = (y * imageData.width + x) * 4
+      if (imageData.data[i + 3] > 0 && (x === 0 || y === 0 || x === imageData.width - 1 || y === imageData.height - 1 || imageData.data[i - 1] === 0 || imageData.data[i + 7] === 0)) {
+        edgePixels++
+      }
+    }
+  }
+  return edgePixels
+}
+
+function getTileCategory(tile: Tile): string {
+  return tileCategories.value.get(tile.id) || ''
+}
+
+function openGroup(group: { parent: Tile; children: Tile[] }) {
+  selectedGroup.value = group
+}
+
+function closeGroup() {
+  selectedGroup.value = null
+}
+
+function selectTile(tile: string) {
+  zoneEditorStore.setSelectedTile(tile)
+}
+
+function isActiveTile(tile: Tile): boolean {
+  return zoneEditorStore.selectedTile === tile.id
+}
+
+onMounted(async () => {
+  isModalOpen.value = true
+  gameStore.connection?.emit('gm:tile:list', {}, (response: Tile[]) => {
+    zoneEditorStore.setTileList(response)
+    response.forEach((tile) => processTile(tile))
+  })
+})
+</script>

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

@@ -1,99 +1,94 @@
 <template>
   <div class="flex justify-center p-5">
-    <div class="toolbar fixed bottom-0 left-0 m-3 rounded flex bg-gray solid border-solid border-2 border-gray-500 text-gray-300 p-1.5 px-3 h-10 z-20">
+    <div class="toolbar fixed bottom-0 left-0 m-3 rounded flex bg-gray solid border-solid border-2 border-gray-500 text-gray-300 p-1.5 px-3 h-10">
-      <div ref="toolbar" class="tools flex gap-2.5" v-if="mapEditor.currentMap.value">
+      <div ref="toolbar" 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 gap-2.5': mapEditor.tool.value === 'move' }" @click="handleClick('move')">
+        <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan gap-2.5': zoneEditorStore.tool === 'move' }" @click="handleClick('move')">
-          <img class="invert w-5 h-5" src="/assets/icons/mapEditor/move.svg" alt="Move camera" /> <span class="h-5" :class="{ 'ml-2.5': mapEditor.tool.value !== 'move' }">(M)</span>
+          <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/move.svg" alt="Move camera" /> <span class="h-5" :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 gap-2.5': mapEditor.tool.value === 'pencil' }" @click="handleClick('pencil')">
+        <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan gap-2.5': zoneEditorStore.tool === 'pencil' }" @click="handleClick('pencil')">
-          <img class="invert w-5 h-5" src="/assets/icons/mapEditor/pencil.svg" alt="Pencil" /> <span class="h-5" :class="{ 'ml-2.5': mapEditor.tool.value !== 'pencil' }">(P)</span>
+          <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/pencil.svg" alt="Pencil" /> <span class="h-5" :class="{ 'ml-2.5': zoneEditorStore.tool !== 'pencil' }">(P)</span>
-          <div class="select" v-if="mapEditor.tool.value === 'pencil'">
+          <div class="select" v-if="zoneEditorStore.tool === 'pencil'">
             <div class="select-trigger group capitalize flex gap-3.5" :class="{ open: selectPencilOpen }">
-              {{ mapEditor.drawMode.value.replace('_', ' ') }}
+              {{ zoneEditorStore.drawMode }}
-              <img class="group-[.open]:rotate-180 invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/mapEditor/chevron.svg" alt="" />
+              <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 bottom-full mb-5 left-1/2 -translate-x-1/2 bg-gray rounded min-w-28 border border-gray-500 border-solid text-left" v-show="selectPencilOpen && mapEditor.tool.value === 'pencil'">
+            <div class="flex flex-col absolute bottom-full mb-5 left-1/2 -translate-x-1/2 bg-gray rounded min-w-28 border border-gray-500 border-solid text-left" v-show="selectPencilOpen && zoneEditorStore.tool === 'pencil'">
-              <span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="() => handleModeClick('tile', 'pencil')">
+              <span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @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 hover:text-white" @click="() => handleModeClick('map_object', 'pencil')">
+              <span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="setDrawMode('object')">
-                Map 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 hover:text-white" @click="() => handleModeClick('teleport', 'pencil')">
+              <span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @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 hover:text-white" @click="() => handleModeClick('blocking tile', 'pencil')">Blocking tile</span>
+              <span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @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 gap-2.5': mapEditor.tool.value === 'eraser' }" @click="handleClick('eraser')">
+        <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan gap-2.5': zoneEditorStore.tool === 'eraser' }" @click="handleClick('eraser')">
-          <img class="invert w-5 h-5" src="/assets/icons/mapEditor/eraser.svg" alt="Eraser" /> <span class="h-5" :class="{ 'ml-2.5': mapEditor.tool.value !== 'eraser' }">(E)</span>
+          <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/eraser.svg" alt="Eraser" /> <span class="h-5" :class="{ 'ml-2.5': zoneEditorStore.tool !== 'eraser' }">(E)</span>
-          <div class="select" v-if="mapEditor.tool.value === 'eraser'">
+          <div class="select" v-if="zoneEditorStore.tool === 'eraser'">
             <div class="select-trigger group capitalize flex gap-3.5" :class="{ open: selectEraserOpen }">
-              {{ mapEditor.drawMode.value.replace('_', ' ') }}
+              {{ zoneEditorStore.eraserMode }}
-              <img class="group-[.open]:rotate-180 invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/mapEditor/chevron.svg" alt="" />
+              <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 bottom-full mb-5 left-1/2 -translate-x-1/2 bg-gray rounded min-w-28 border border-gray-500 border-solid text-left" v-show="selectEraserOpen">
-              <span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="() => handleModeClick('tile', 'eraser')">
+              <span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @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 hover:text-white" @click="() => handleModeClick('map_object', 'eraser')">
+              <span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="setEraserMode('object')">
-                Map 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 hover:text-white" @click="() => handleModeClick('teleport', 'eraser')">
+              <span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @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 hover:text-white" @click="() => handleModeClick('blocking tile', 'eraser')">Blocking tile</span>
+              <span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @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 gap-2.5': mapEditor.tool.value === 'paint' }" @click="handleClick('paint')">
+        <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan gap-2.5': zoneEditorStore.tool === 'paint' }" @click="handleClick('paint')">
-          <img class="invert w-5 h-5" src="/assets/icons/mapEditor/paint.svg" alt="Paint bucket" /> <span class="h-5" :class="{ 'ml-2.5': mapEditor.tool.value !== 'paint' }">(B)</span>
+          <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/paint.svg" alt="Paint bucket" /> <span class="h-5" :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="handleClick('settings')"><img class="invert w-5 h-5" src="/assets/icons/mapEditor/gear.svg" alt="Map settings" /> <span class="h-5 ml-2.5">(Z)</span></button>
+        <button class="flex justify-center items-center min-w-10 p-0 relative" @click="handleClick('settings')" v-if="zoneEditorStore.zone"><img class="invert w-5 h-5" src="/assets/icons/zoneEditor/gear.svg" alt="Zone settings" /> <span class="h-5 ml-2.5">(Z)</span></button>
-
-        <div class="w-px bg-cyan"></div>
-
-        <label class="my-auto gap-0" for="checkbox">Continuous Drawing</label>
-        <input type="checkbox" />
       </div>
 
       <div class="toolbar fixed bottom-0 right-0 m-3 rounded flex bg-gray solid border-solid border-2 border-gray-500 text-gray-300 p-1.5 px-3 h-10 space-x-2">
-        <button class="btn-cyan px-3.5" @click="() => emit('open-maps')">Load</button>
+        <button class="btn-cyan px-3.5" @click="() => zoneEditorStore.toggleZoneListModal()">Load</button>
-        <button class="btn-cyan px-3.5" @click="() => emit('save')" v-if="mapEditor.currentMap.value">Save</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="mapEditor.currentMap.value">Clear</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="() => emit('close-editor')">Exit</button>
+        <button class="btn-cyan px-3.5" @click="() => zoneEditorStore.toggleActive()">Exit</button>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
+import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import { onClickOutside } from '@vueuse/core'
 import { onBeforeUnmount, onMounted, ref } from 'vue'
 
-const mapEditor = useMapEditorComposable()
+const zoneEditorStore = useZoneEditorStore()
 
-const emit = defineEmits(['save', 'clear', 'open-maps', 'open-settings', 'close-editor', 'open-tile-list', 'open-map-object-list', 'close-lists'])
+const emit = defineEmits(['save', 'clear'])
 
 // track when clicked outside of toolbar items
 const toolbar = ref(null)
@@ -102,49 +97,26 @@ const toolbar = ref(null)
 let selectPencilOpen = ref(false)
 let selectEraserOpen = ref(false)
 
-let tileListShown = ref(false)
-let mapObjectListShown = ref(false)
-
-defineExpose({ tileListShown, mapObjectListShown })
-
 // drawMode
 function setDrawMode(value: string) {
-  if (mapEditor.tool.value === 'paint' || mapEditor.tool.value === 'pencil' || mapEditor.tool.value === 'eraser') {
+  zoneEditorStore.isTileListModalShown = value === 'tile'
-    emit('close-lists')
+  zoneEditorStore.isObjectListModalShown = value === 'object'
-    if (value === 'tile') emit('open-tile-list')
-    if (value === 'map_object') emit('open-map-object-list')
-  }
 
-  mapEditor.setDrawMode(value)
+  zoneEditorStore.setDrawMode(value)
-  selectPencilOpen.value = false
-  selectEraserOpen.value = false
-}
-
-function setPencilMode() {
-  mapEditor.setTool('pencil')
   selectPencilOpen.value = false
 }
 
 // drawMode
-function setEraserMode() {
+function setEraserMode(value: string) {
-  mapEditor.setTool('eraser')
+  zoneEditorStore.setEraserMode(value)
   selectEraserOpen.value = false
 }
 
-function handleModeClick(mode: string, type: 'pencil' | 'eraser') {
-  setDrawMode(mode)
-  type === 'pencil' ? setPencilMode() : setEraserMode()
-}
-
 function handleClick(tool: string) {
   if (tool === 'settings') {
-    emit('open-settings')
+    zoneEditorStore.toggleSettingsModal()
-    emit('close-lists')
-  } else if (tool === 'move') {
-    emit('close-lists')
-    mapEditor.setTool(tool)
   } else {
-    mapEditor.setTool(tool)
+    zoneEditorStore.setTool(tool)
   }
 
   selectPencilOpen.value = tool === 'pencil' ? !selectPencilOpen.value : false
@@ -152,17 +124,22 @@ function handleClick(tool: string) {
 }
 
 function cycleToolMode(tool: 'pencil' | 'eraser') {
-  const modes = ['tile', 'map_object', 'teleport', 'blocking tile']
+  const modes = ['tile', 'object', 'teleport', 'blocking tile']
-  const currentIndex = modes.indexOf(mapEditor.drawMode.value)
+  const currentMode = tool === 'pencil' ? zoneEditorStore.drawMode : zoneEditorStore.eraserMode
+  const currentIndex = modes.indexOf(currentMode)
   const nextIndex = (currentIndex + 1) % modes.length
   const nextMode = modes[nextIndex]
 
+  if (tool === 'pencil') {
     setDrawMode(nextMode)
+  } else {
+    setEraserMode(nextMode)
+  }
 }
 
 function initKeyShortcuts(event: KeyboardEvent) {
-  // Check if map is set
+  // Check if zone is set
-  if (!mapEditor.currentMap.value) return
+  if (!zoneEditorStore.zone) return
 
   // prevent if focused on composables
   if (document.activeElement?.tagName === 'INPUT') return
@@ -177,7 +154,7 @@ function initKeyShortcuts(event: KeyboardEvent) {
 
   if (keyActions.hasOwnProperty(event.key)) {
     const tool = keyActions[event.key]
-    if ((tool === 'pencil' || tool === 'eraser') && mapEditor.tool.value === tool) {
+    if ((tool === 'pencil' || tool === 'eraser') && zoneEditorStore.tool === tool) {
       cycleToolMode(tool)
     } else {
       handleClick(tool)

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

@@ -0,0 +1,61 @@
+<template>
+  <CreateZone v-if="zoneEditorStore.isCreateZoneModalShown" />
+  <Modal :is-modal-open="zoneEditorStore.isZoneListModalShown" @modal:close="() => zoneEditorStore.toggleZoneListModal()" :is-resizable="false" :modal-width="300" :modal-height="360" :bg-style="'none'">
+    <template #modalHeader>
+      <h3 class="text-lg text-white">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-gray-500" 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-red w-7 h-7 z-50 flex items-center justify-center" @click.stop="() => deleteZone(zone.id)">x</button>
+            </span>
+          </div>
+          <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
+        </div>
+      </div>
+    </template>
+  </Modal>
+</template>
+
+<script setup lang="ts">
+import type { Zone } from '@/application/types'
+import CreateZone from '@/components/gameMaster/zoneEditor/partials/CreateZone.vue'
+import Modal from '@/components/utilities/Modal.vue'
+import { useGameStore } from '@/stores/gameStore'
+import { useZoneEditorStore } from '@/stores/zoneEditorStore'
+import { onMounted } from '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

@@ -1,7 +1,7 @@
 <template>
-  <Modal ref="modalRef" :modal-width="600" :modal-height="430" :bg-style="'none'">
+  <Modal :is-modal-open="zoneEditorStore.isSettingsModalShown" @modal:close="() => zoneEditorStore.toggleSettingsModal()" :modal-width="600" :modal-height="430" :bg-style="'none'">
     <template #modalHeader>
-      <h3 class="m-0 font-medium shrink-0 text-white">Map settings</h3>
+      <h3 class="m-0 font-medium shrink-0 text-white">Zone settings</h3>
     </template>
 
     <template #modalBody>
@@ -34,7 +34,7 @@
           </div>
         </form>
         <form method="post" @submit.prevent="" class="inline" v-if="screen === 'effects'">
-          <div v-for="(effect, index) in mapEffects" :key="effect.id" class="mb-2 flex items-center space-x-2 mt-4">
+          <div v-for="(effect, index) in zoneEffects" :key="effect.id" class="mb-2 flex items-center space-x-2 mt-4">
             <input class="input-field flex-grow" v-model="effect.effect" placeholder="Effect name" />
             <input class="input-field w-20" v-model.number="effect.strength" type="number" placeholder="Strength" />
             <button class="btn-red py-1 px-2" type="button" @click="removeEffect(index)">Delete</button>
@@ -46,57 +46,61 @@
   </Modal>
 </template>
 
-<script setup lang="ts">
+<script setup>
-import type { UUID } from '@/application/types'
-import { uuidv4 } from '@/application/utilities'
 import Modal from '@/components/utilities/Modal.vue'
-import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
+import { useZoneEditorStore } from '@/stores/zoneEditorStore'
-import { ref, useTemplateRef, watch } from 'vue'
+import { ref, watch } from 'vue'
 
-const mapEditor = useMapEditorComposable()
+const zoneEditorStore = useZoneEditorStore()
 const screen = ref('settings')
 
-const name = ref(mapEditor.currentMap.value?.name)
+zoneEditorStore.setZoneName(zoneEditorStore.zone?.name)
-const width = ref(mapEditor.currentMap.value?.width)
+zoneEditorStore.setZoneWidth(zoneEditorStore.zone?.width)
-const height = ref(mapEditor.currentMap.value?.height)
+zoneEditorStore.setZoneHeight(zoneEditorStore.zone?.height)
-const pvp = ref(mapEditor.currentMap.value?.pvp)
+zoneEditorStore.setZonePvp(zoneEditorStore.zone?.pvp)
-const mapEffects = ref(mapEditor.currentMap.value?.mapEffects || [])
+zoneEditorStore.setZoneEffects(zoneEditorStore.zone?.zoneEffects)
-const modalRef = useTemplateRef('modalRef')
 
-defineExpose({
+const name = ref(zoneEditorStore.zoneSettings?.name)
-  open: () => modalRef.value?.open()
+const width = ref(zoneEditorStore.zoneSettings?.width)
-})
+const height = ref(zoneEditorStore.zoneSettings?.height)
+const pvp = ref(zoneEditorStore.zoneSettings?.pvp)
+const zoneEffects = ref(zoneEditorStore.zoneSettings?.zoneEffects || [])
 
 watch(name, (value) => {
-  mapEditor.updateProperty('name', value!)
+  zoneEditorStore.setZoneName(value)
 })
 
 watch(width, (value) => {
-  mapEditor.updateProperty('width', value!)
+  zoneEditorStore.setZoneWidth(value)
 })
 
 watch(height, (value) => {
-  mapEditor.updateProperty('height', value!)
+  zoneEditorStore.setZoneHeight(value)
 })
 
 watch(pvp, (value) => {
-  mapEditor.updateProperty('pvp', value!)
+  zoneEditorStore.setZonePvp(value)
 })
 
-watch(mapEffects, (value) => {
+watch(
-  mapEditor.updateProperty('mapEffects', value!)
+  zoneEffects,
-})
+  (value) => {
+    zoneEditorStore.setZoneEffects(value)
+  },
+  { deep: true }
+)
 
 const addEffect = () => {
-  mapEffects.value.push({
+  zoneEffects.value.push({
-    id: uuidv4() as UUID, // Simple unique id generation
+    id: Date.now().toString(), // Simple unique id generation
-    map: mapEditor.currentMap.value!,
+    zoneId: zoneEditorStore.zone?.id,
+    zone: zoneEditorStore.zone,
     effect: '',
     strength: 1
   })
 }
 
-const removeEffect = (index: number) => {
+const removeEffect = (index) => {
-  mapEffects.value.splice(index, 1)
+  zoneEffects.value.splice(index, 1)
 }
 </script>

src/components/gameMaster/zoneEditor/zonePartials/ZoneEventTiles.vue

@@ -0,0 +1,118 @@
+<template>
+  <Image v-for="tile in zoneEditorStore.zone?.zoneEventTiles" v-bind="getImageProps(tile)" />
+</template>
+
+<script setup lang="ts">
+import { ZoneEventTileType, type ZoneEventTile } from '@/application/types'
+import { uuidv4 } from '@/application/utilities'
+import { getTile, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
+import { useZoneEditorStore } from '@/stores/zoneEditorStore'
+import { Image, useScene } from 'phavuer'
+import { onMounted, onUnmounted } from 'vue'
+
+const scene = useScene()
+const zoneEditorStore = useZoneEditorStore()
+
+const props = defineProps<{
+  tilemap: Phaser.Tilemaps.Tilemap
+}>()
+
+function getImageProps(tile: ZoneEventTile) {
+  return {
+    x: tileToWorldX(props.tilemap, tile.positionX, tile.positionY),
+    y: tileToWorldY(props.tilemap, tile.positionX, tile.positionY),
+    texture: tile.type,
+    depth: 999
+  }
+}
+
+function pencil(pointer: Phaser.Input.Pointer) {
+  // Check if zone is set
+  if (!zoneEditorStore.zone) return
+
+  // Check if tool is pencil
+  if (zoneEditorStore.tool !== 'pencil') return
+
+  // Check if draw mode is blocking tile or teleport
+  if (zoneEditorStore.drawMode !== 'blocking tile' && zoneEditorStore.drawMode !== 'teleport') return
+
+  // Check if left mouse button is pressed
+  if (!pointer.isDown) return
+
+  // Check if shift is not pressed, this means we are moving the camera
+  if (pointer.event.shiftKey) return
+
+  // Check if there is a tile
+  const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
+  if (!tile) return
+
+  // Check if event tile already exists on position
+  const existingEventTile = zoneEditorStore.zone.zoneEventTiles.find((eventTile) => eventTile.positionX === tile.x && eventTile.positionY === tile.y)
+  if (existingEventTile) return
+
+  // If teleport, check if there is a selected zone
+  if (zoneEditorStore.drawMode === 'teleport' && !zoneEditorStore.teleportSettings.toZoneId) return
+
+  const newEventTile = {
+    id: uuidv4(),
+    zoneId: zoneEditorStore.zone.id,
+    zone: zoneEditorStore.zone,
+    type: zoneEditorStore.drawMode === 'blocking tile' ? ZoneEventTileType.BLOCK : ZoneEventTileType.TELEPORT,
+    positionX: tile.x,
+    positionY: tile.y,
+    teleport:
+      zoneEditorStore.drawMode === 'teleport'
+        ? {
+            toZoneId: zoneEditorStore.teleportSettings.toZoneId,
+            toPositionX: zoneEditorStore.teleportSettings.toPositionX,
+            toPositionY: zoneEditorStore.teleportSettings.toPositionY,
+            toRotation: zoneEditorStore.teleportSettings.toRotation
+          }
+        : undefined
+  }
+
+  zoneEditorStore.zone.zoneEventTiles = zoneEditorStore.zone.zoneEventTiles.concat(newEventTile as ZoneEventTile)
+}
+
+function eraser(pointer: Phaser.Input.Pointer) {
+  // Check if zone is set
+  if (!zoneEditorStore.zone) return
+
+  // Check if tool is pencil
+  if (zoneEditorStore.tool !== 'eraser') return
+
+  // Check if draw mode is blocking tile or teleport
+  if (zoneEditorStore.eraserMode !== 'blocking tile' && zoneEditorStore.eraserMode !== 'teleport') return
+
+  // Check if left mouse button is pressed
+  if (!pointer.isDown) return
+
+  // Check if shift is not pressed, this means we are moving the camera
+  if (pointer.event.shiftKey) return
+
+  // Check if there is a tile
+  const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
+  if (!tile) return
+
+  // Check if event tile already exists on position
+  const existingEventTile = zoneEditorStore.zone.zoneEventTiles.find((eventTile) => eventTile.positionX === tile.x && eventTile.positionY === tile.y)
+  if (!existingEventTile) return
+
+  // Remove existing event tile
+  zoneEditorStore.zone.zoneEventTiles = zoneEditorStore.zone.zoneEventTiles.filter((eventTile) => eventTile.id !== existingEventTile.id)
+}
+
+onMounted(() => {
+  scene.input.on(Phaser.Input.Events.POINTER_DOWN, pencil)
+  scene.input.on(Phaser.Input.Events.POINTER_MOVE, pencil)
+  scene.input.on(Phaser.Input.Events.POINTER_DOWN, eraser)
+  scene.input.on(Phaser.Input.Events.POINTER_MOVE, eraser)
+})
+
+onUnmounted(() => {
+  scene.input.off(Phaser.Input.Events.POINTER_DOWN, pencil)
+  scene.input.off(Phaser.Input.Events.POINTER_MOVE, pencil)
+  scene.input.off(Phaser.Input.Events.POINTER_DOWN, eraser)
+  scene.input.off(Phaser.Input.Events.POINTER_MOVE, eraser)
+})
+</script>

src/components/gameMaster/zoneEditor/zonePartials/ZoneObject.vue

@@ -0,0 +1,45 @@
+<template>
+  <Image v-if="gameStore.getLoadedAsset(props.zoneObject.object.id)" v-bind="imageProps" />
+</template>
+
+<script setup lang="ts">
+import type { AssetDataT, ZoneObject } from '@/application/types'
+import { loadTexture } from '@/composables/gameComposable'
+import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
+import { useGameStore } from '@/stores/gameStore'
+import { Image, useScene } from 'phavuer'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  tilemap: Phaser.Tilemaps.Tilemap
+  zoneObject: ZoneObject
+  selectedZoneObject: ZoneObject | null
+  movingZoneObject: ZoneObject | null
+}>()
+
+const gameStore = useGameStore()
+const scene = useScene()
+
+const imageProps = computed(() => ({
+  alpha: props.movingZoneObject?.id === props.zoneObject.id ? 0.5 : 1,
+  tint: props.selectedZoneObject?.id === props.zoneObject.id ? 0x00ff00 : 0xffffff,
+  depth: calculateIsometricDepth(props.zoneObject.positionX, props.zoneObject.positionY, props.zoneObject.object.frameWidth, props.zoneObject.object.frameHeight),
+  x: tileToWorldX(props.tilemap, props.zoneObject.positionX, props.zoneObject.positionY),
+  y: tileToWorldY(props.tilemap, props.zoneObject.positionX, props.zoneObject.positionY),
+  flipX: props.zoneObject.isRotated,
+  texture: props.zoneObject.object.id,
+  originY: Number(props.zoneObject.object.originX),
+  originX: Number(props.zoneObject.object.originY)
+}))
+
+loadTexture(scene, {
+  key: props.zoneObject.object.id,
+  data: '/assets/objects/' + props.zoneObject.object.id + '.png',
+  group: 'objects',
+  updatedAt: props.zoneObject.object.updatedAt,
+  frameWidth: props.zoneObject.object.frameWidth,
+  frameHeight: props.zoneObject.object.frameHeight
+} as AssetDataT).catch((error) => {
+  console.error('Error loading texture:', error)
+})
+</script>

src/components/gameMaster/zoneEditor/zonePartials/ZoneObjects.vue

@@ -0,0 +1,248 @@
+<template>
+  <SelectedZoneObject v-if="selectedZoneObject" :zoneObject="selectedZoneObject" :movingZoneObject="movingZoneObject" @move="moveZoneObject" @rotate="rotateZoneObject" @delete="deleteZoneObject" />
+  <ZoneObject v-for="zoneObject in zoneEditorStore.zone?.zoneObjects" :tilemap="tilemap" :zoneObject :selectedZoneObject :movingZoneObject @pointerup="clickZoneObject(zoneObject)" />
+</template>
+
+<script setup lang="ts">
+import type { ZoneObject as ZoneObjectT } from '@/application/types'
+import { uuidv4 } from '@/application/utilities'
+import SelectedZoneObject from '@/components/gameMaster/zoneEditor/partials/SelectedZoneObject.vue'
+import ZoneObject from '@/components/gameMaster/zoneEditor/zonePartials/ZoneObject.vue'
+import { getTile } from '@/composables/zoneComposable'
+import { useZoneEditorStore } from '@/stores/zoneEditorStore'
+import { useScene } from 'phavuer'
+import { onMounted, onUnmounted, ref, watch } from 'vue'
+
+const scene = useScene()
+const zoneEditorStore = useZoneEditorStore()
+const selectedZoneObject = ref<ZoneObjectT | null>(null)
+const movingZoneObject = ref<ZoneObjectT | null>(null)
+
+const props = defineProps<{
+  tilemap: Phaser.Tilemaps.Tilemap
+}>()
+
+function pencil(pointer: Phaser.Input.Pointer) {
+  // Check if zone is set
+  if (!zoneEditorStore.zone) return
+
+  // Check if tool is pencil
+  if (zoneEditorStore.tool !== 'pencil') return
+
+  // Check if draw mode is object
+  if (zoneEditorStore.drawMode !== 'object') return
+
+  // Check if there is a selected object
+  if (!zoneEditorStore.selectedObject) return
+
+  // Check if left mouse button is pressed
+  if (!pointer.isDown) return
+
+  // Check if shift is not pressed, this means we are moving the camera
+  if (pointer.event.shiftKey) return
+
+  // Check if alt is pressed, this means we are selecting the object
+  if (pointer.event.altKey) return
+
+  // Check if there is a tile
+  const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
+  if (!tile) return
+
+  // Check if object already exists on position
+  const existingObject = zoneEditorStore.zone?.zoneObjects.find((object) => object.positionX === tile.x && object.positionY === tile.y)
+  if (existingObject) return
+
+  const newObject = {
+    id: uuidv4(),
+    zoneId: zoneEditorStore.zone.id,
+    zone: zoneEditorStore.zone,
+    objectId: zoneEditorStore.selectedObject.id,
+    object: zoneEditorStore.selectedObject,
+    depth: 0,
+    isRotated: false,
+    positionX: tile.x,
+    positionY: tile.y
+  }
+
+  // Add new object to zoneObjects
+  zoneEditorStore.zone.zoneObjects = zoneEditorStore.zone.zoneObjects.concat(newObject as ZoneObjectT)
+}
+
+function eraser(pointer: Phaser.Input.Pointer) {
+  // Check if zone is set
+  if (!zoneEditorStore.zone) return
+
+  // Check if tool is eraser
+  if (zoneEditorStore.tool !== 'eraser') return
+
+  // Check if draw mode is object
+  if (zoneEditorStore.eraserMode !== 'object') return
+
+  // Check if left mouse button is pressed
+  if (!pointer.isDown) return
+
+  // Check if shift is not pressed, this means we are moving the camera
+  if (pointer.event.shiftKey) return
+
+  // Check if alt is pressed, this means we are selecting the object
+  if (pointer.event.altKey) return
+
+  // Check if there is a tile
+  const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
+  if (!tile) return
+
+  // Check if object already exists on position
+  const existingObject = zoneEditorStore.zone.zoneObjects.find((object) => object.positionX === tile.x && object.positionY === tile.y)
+  if (!existingObject) return
+
+  // Remove existing object
+  zoneEditorStore.zone.zoneObjects = zoneEditorStore.zone.zoneObjects.filter((object) => object.id !== existingObject.id)
+}
+
+function objectPicker(pointer: Phaser.Input.Pointer) {
+  // Check if zone is set
+  if (!zoneEditorStore.zone) return
+
+  // Check if tool is pencil
+  if (zoneEditorStore.tool !== 'pencil') return
+
+  // Check if draw mode is object
+  if (zoneEditorStore.drawMode !== 'object') return
+
+  // Check if left mouse button is pressed
+  if (!pointer.isDown) return
+
+  // Check if shift is not pressed, this means we are moving the camera
+  if (pointer.event.shiftKey) return
+
+  // If alt is not pressed, return
+  if (!pointer.event.altKey) return
+
+  // Check if there is a tile
+  const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
+  if (!tile) return
+
+  // Check if object already exists on position
+  const existingObject = zoneEditorStore.zone.zoneObjects.find((object) => object.positionX === tile.x && object.positionY === tile.y)
+  if (!existingObject) return
+
+  // Select the object
+  zoneEditorStore.setSelectedObject(existingObject)
+}
+
+function moveZoneObject(id: string) {
+  // Check if zone is set
+  if (!zoneEditorStore.zone) return
+
+  movingZoneObject.value = zoneEditorStore.zone.zoneObjects.find((object) => object.id === id) as ZoneObjectT
+
+  function handlePointerMove(pointer: Phaser.Input.Pointer) {
+    if (!movingZoneObject.value) return
+
+    const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
+    if (!tile) return
+
+    movingZoneObject.value.positionX = tile.x
+    movingZoneObject.value.positionY = tile.y
+  }
+
+  scene.input.on(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
+
+  function handlePointerUp() {
+    scene.input.off(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
+    movingZoneObject.value = null
+  }
+
+  scene.input.on(Phaser.Input.Events.POINTER_UP, handlePointerUp)
+}
+
+function rotateZoneObject(id: string) {
+  // Check if zone is set
+  if (!zoneEditorStore.zone) return
+
+  zoneEditorStore.zone.zoneObjects = zoneEditorStore.zone.zoneObjects.map((object) => {
+    if (object.id === id) {
+      return {
+        ...object,
+        isRotated: !object.isRotated
+      }
+    }
+    return object
+  })
+}
+
+function deleteZoneObject(id: string) {
+  // Check if zone is set
+  if (!zoneEditorStore.zone) return
+
+  zoneEditorStore.zone.zoneObjects = zoneEditorStore.zone.zoneObjects.filter((object) => object.id !== id)
+  selectedZoneObject.value = null
+}
+
+function clickZoneObject(zoneObject: ZoneObjectT) {
+  selectedZoneObject.value = zoneObject
+
+  // If alt is pressed, select the object
+  if (scene.input.activePointer.event.altKey) {
+    zoneEditorStore.setSelectedObject(zoneObject.object)
+  }
+}
+
+onMounted(() => {
+  scene.input.on(Phaser.Input.Events.POINTER_DOWN, pencil)
+  scene.input.on(Phaser.Input.Events.POINTER_MOVE, pencil)
+  scene.input.on(Phaser.Input.Events.POINTER_DOWN, eraser)
+  scene.input.on(Phaser.Input.Events.POINTER_MOVE, eraser)
+  scene.input.on(Phaser.Input.Events.POINTER_DOWN, objectPicker)
+})
+
+onUnmounted(() => {
+  scene.input.off(Phaser.Input.Events.POINTER_DOWN, pencil)
+  scene.input.off(Phaser.Input.Events.POINTER_MOVE, pencil)
+  scene.input.off(Phaser.Input.Events.POINTER_DOWN, eraser)
+  scene.input.off(Phaser.Input.Events.POINTER_MOVE, eraser)
+  scene.input.off(Phaser.Input.Events.POINTER_DOWN, objectPicker)
+})
+
+// watch zoneEditorStore.objectList and update originX and originY of objects in zoneObjects
+watch(
+  () => zoneEditorStore.objectList,
+  (newObjects) => {
+    if (!zoneEditorStore.zone) return
+
+    const updatedZoneObjects = zoneEditorStore.zone.zoneObjects.map((zoneObject) => {
+      const updatedObject = newObjects.find((obj) => obj.id === zoneObject.object.id)
+      if (updatedObject) {
+        return {
+          ...zoneObject,
+          object: {
+            ...zoneObject.object,
+            originX: updatedObject.originX,
+            originY: updatedObject.originY
+          }
+        }
+      }
+      return zoneObject
+    })
+
+    // Update the zone with the new zoneObjects
+    zoneEditorStore.setZone({
+      ...zoneEditorStore.zone,
+      zoneObjects: updatedZoneObjects
+    })
+
+    // Update selectedObject if it's set
+    if (zoneEditorStore.selectedObject) {
+      const updatedObject = newObjects.find((obj) => obj.id === zoneEditorStore.selectedObject?.id)
+      if (updatedObject) {
+        zoneEditorStore.setSelectedObject({
+          ...zoneEditorStore.selectedObject,
+          originX: updatedObject.originX,
+          originY: updatedObject.originY
+        })
+      }
+    }
+  },
+  { deep: true }
+)
+</script>

src/components/gameMaster/zoneEditor/zonePartials/ZoneTiles.vue

@@ -0,0 +1,227 @@
+<template>
+  <Controls :layer="tileLayer" :depth="0" />
+</template>
+
+<script setup lang="ts">
+import config from '@/application/config'
+import type { AssetDataT } from '@/application/types'
+import Controls from '@/components/utilities/Controls.vue'
+import { createTileArray, getTile, placeTile, setLayerTiles } from '@/composables/zoneComposable'
+import { useGameStore } from '@/stores/gameStore'
+import { useZoneEditorStore } from '@/stores/zoneEditorStore'
+import { useScene } from 'phavuer'
+import { onMounted, onUnmounted, watch } from 'vue'
+
+const emit = defineEmits(['tileMap:create'])
+
+const scene = useScene()
+const gameStore = useGameStore()
+const zoneEditorStore = useZoneEditorStore()
+const tileMap = createTileMap()
+const tileLayer = createTileLayer()
+
+/**
+ * A Tilemap is a container for Tilemap data.
+ * This isn't a display object, rather, it holds data about the map and allows you to add tilesets and tilemap layers to it.
+ * A map can have one or more tilemap layers, which are the display objects that actually render the tiles.
+ */
+function createTileMap() {
+  const zoneData = new Phaser.Tilemaps.MapData({
+    width: zoneEditorStore.zone?.width,
+    height: zoneEditorStore.zone?.height,
+    tileWidth: config.tile_size.x,
+    tileHeight: config.tile_size.y,
+    orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
+    format: Phaser.Tilemaps.Formats.ARRAY_2D
+  })
+
+  const newTileMap = new Phaser.Tilemaps.Tilemap(scene, zoneData)
+  emit('tileMap:create', newTileMap)
+
+  return newTileMap
+}
+
+/**
+ * A Tileset is a combination of a single image containing the tiles and a container for data about each tile.
+ */
+function createTileLayer() {
+  const tilesArray = gameStore.getLoadedAssetsByGroup('tiles')
+
+  const tilesetImages = Array.from(tilesArray).map((tile: AssetDataT, index: number) => {
+    return tileMap.addTilesetImage(tile.key, tile.key, config.tile_size.x, config.tile_size.y, 1, 2, index + 1, { x: 0, y: -config.tile_size.y })
+  }) as any
+
+  // Add blank tile
+  tilesetImages.push(tileMap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 1, 2, 0, { x: 0, y: -config.tile_size.y }))
+  const layer = tileMap.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer
+
+  layer.setDepth(0)
+  layer.setCullPadding(2, 2)
+
+  return layer
+}
+
+function pencil(pointer: Phaser.Input.Pointer) {
+  // Check if zone is set
+  if (!zoneEditorStore.zone) return
+
+  // Check if tool is pencil
+  if (zoneEditorStore.tool !== 'pencil') return
+
+  // Check if draw mode is tile
+  if (zoneEditorStore.drawMode !== 'tile') return
+
+  // Check if there is a selected tile
+  if (!zoneEditorStore.selectedTile) return
+
+  // Check if left mouse button is pressed
+  if (!pointer.isDown) return
+
+  // Check if shift is not pressed, this means we are moving the camera
+  if (pointer.event.shiftKey) return
+
+  // Check if there is a tile
+  const tile = getTile(tileLayer, pointer.worldX, pointer.worldY)
+  if (!tile) return
+
+  // Place tile
+  placeTile(tileMap, tileLayer, tile.x, tile.y, zoneEditorStore.selectedTile)
+
+  // Adjust zoneEditorStore.zone.tiles
+  zoneEditorStore.zone.tiles[tile.y][tile.x] = zoneEditorStore.selectedTile
+}
+
+function eraser(pointer: Phaser.Input.Pointer) {
+  // Check if zone is set
+  if (!zoneEditorStore.zone) return
+
+  // Check if tool is pencil
+  if (zoneEditorStore.tool !== 'eraser') return
+
+  // Check if draw mode is tile
+  if (zoneEditorStore.eraserMode !== 'tile') return
+
+  // Check if left mouse button is pressed
+  if (!pointer.isDown) return
+
+  // Check if shift is not pressed, this means we are moving the camera
+  if (pointer.event.shiftKey) return
+
+  // Check if alt is pressed
+  if (pointer.event.altKey) return
+
+  // Check if there is a tile
+  const tile = getTile(tileLayer, pointer.worldX, pointer.worldY)
+  if (!tile) return
+
+  // Place tile
+  placeTile(tileMap, tileLayer, tile.x, tile.y, 'blank_tile')
+
+  // Adjust zoneEditorStore.zone.tiles
+  zoneEditorStore.zone.tiles[tile.y][tile.x] = 'blank_tile'
+}
+
+function paint(pointer: Phaser.Input.Pointer) {
+  // Check if zone is set
+  if (!zoneEditorStore.zone) return
+
+  // Check if tool is pencil
+  if (zoneEditorStore.tool !== 'paint') return
+
+  // Check if there is a selected tile
+  if (!zoneEditorStore.selectedTile) return
+
+  // Check if left mouse button is pressed
+  if (!pointer.isDown) return
+
+  // Check if shift is not pressed, this means we are moving the camera
+  if (pointer.event.shiftKey) return
+
+  // Check if alt is pressed
+  if (pointer.event.altKey) return
+
+  // Set new tileArray with selected tile
+  setLayerTiles(tileMap, tileLayer, createTileArray(tileMap.width, tileMap.height, zoneEditorStore.selectedTile))
+
+  // Adjust zoneEditorStore.zone.tiles
+  zoneEditorStore.zone.tiles = createTileArray(tileMap.width, tileMap.height, zoneEditorStore.selectedTile)
+}
+
+// When alt is pressed, and the pointer is down, select the tile that the pointer is over
+function tilePicker(pointer: Phaser.Input.Pointer) {
+  // Check if zone is set
+  if (!zoneEditorStore.zone) return
+
+  // Check if tool is pencil
+  if (zoneEditorStore.tool !== 'pencil') return
+
+  // Check if draw mode is tile
+  if (zoneEditorStore.drawMode !== 'tile') return
+
+  // Check if left mouse button is pressed
+  if (!pointer.isDown) return
+
+  // Check if shift is not pressed, this means we are moving the camera
+  if (pointer.event.shiftKey) return
+
+  // Check if alt is pressed
+  if (!pointer.event.altKey) return
+
+  // Check if there is a tile
+  const tile = getTile(tileLayer, pointer.worldX, pointer.worldY)
+  if (!tile) return
+
+  // Select the tile
+  zoneEditorStore.setSelectedTile(zoneEditorStore.zone.tiles[tile.y][tile.x])
+}
+
+watch(
+  () => zoneEditorStore.shouldClearTiles,
+  (shouldClear) => {
+    if (shouldClear && zoneEditorStore.zone) {
+      const blankTiles = createTileArray(tileMap.width, tileMap.height, 'blank_tile')
+      setLayerTiles(tileMap, tileLayer, blankTiles)
+      zoneEditorStore.zone.tiles = blankTiles
+      zoneEditorStore.resetClearTilesFlag()
+    }
+  }
+)
+
+onMounted(() => {
+  if (!zoneEditorStore.zone?.tiles) {
+    return
+  }
+
+  // First fill the entire map with blank tiles using current zone dimensions
+  const blankTiles = createTileArray(zoneEditorStore.zone.width, zoneEditorStore.zone.height, 'blank_tile')
+
+  // Then overlay the zone tiles, but only within the current zone dimensions
+  const zoneTiles = zoneEditorStore.zone.tiles
+  for (let y = 0; y < zoneEditorStore.zone.height; y++) {
+    for (let x = 0; x < zoneEditorStore.zone.width; x++) {
+      // Only copy if the source tiles array has this position
+      if (zoneTiles[y] && zoneTiles[y][x] !== undefined) {
+        blankTiles[y][x] = zoneTiles[y][x]
+      }
+    }
+  }
+
+  setLayerTiles(tileMap, tileLayer, blankTiles)
+
+  scene.input.on(Phaser.Input.Events.POINTER_MOVE, pencil)
+  scene.input.on(Phaser.Input.Events.POINTER_MOVE, eraser)
+  scene.input.on(Phaser.Input.Events.POINTER_DOWN, paint)
+  scene.input.on(Phaser.Input.Events.POINTER_DOWN, tilePicker)
+})
+
+onUnmounted(() => {
+  scene.input.off(Phaser.Input.Events.POINTER_MOVE, pencil)
+  scene.input.off(Phaser.Input.Events.POINTER_MOVE, eraser)
+  scene.input.off(Phaser.Input.Events.POINTER_DOWN, paint)
+  scene.input.off(Phaser.Input.Events.POINTER_DOWN, tilePicker)
+
+  tileMap.destroyLayer('tiles')
+  tileMap.removeAllLayers()
+  tileMap.destroy()
+})
+</script>

src/components/gui/CharacterProfile.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="absolute" v-if="gameStore.uiSettings.isCharacterProfileOpen" :style="modalStyle">
     <div class="relative">
-      <img src="/assets/ui-elements/profile-ui-box-outer.svg" class="absolute w-full h-full" alt="" />
+      <img src="/assets/ui-elements/profile-ui-box-outer.svg" class="absolute w-full h-full" />
-      <img src="/assets/ui-elements/profile-ui-box-inner.svg" class="absolute left-2 bottom-2 w-[calc(100%_-_16px)] h-[calc(100%_-_40px)]" alt="" />
+      <img src="/assets/ui-elements/profile-ui-box-inner.svg" class="absolute left-2 bottom-2 w-[calc(100%_-_16px)] h-[calc(100%_-_40px)]" />
       <div @mousedown="startDrag" class="cursor-move px-5 py-2.5 flex justify-between items-center relative">
         <span class="text-xs text-white font-thin">Character Profile [Alt+C]</span>
         <button @click="gameStore.uiSettings.isCharacterProfileOpen = false" class="w-3.5 h-3.5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out">
-          <img draggable="false" src="/assets/icons/modal/close-button-white.svg" class="w-full h-full" alt="Close button icon" />
+          <img alt="close" draggable="false" src="/assets/icons/modal/close-button-white.svg" class="w-full h-full" />
         </button>
       </div>
       <div class="py-4 px-6 flex flex-col gap-7 relative z-10">
@@ -17,7 +17,7 @@
               <span class="text-xs">{{ gameStore.character?.experience }} / 18.600XP</span>
             </div>
             <a class="hover:cursor-pointer bg-[url('/assets/ui-elements/button-ui-box-textured-small.svg')] bg-no-repeat block w-8 h-8 relative mx-[3px]">
-              <img class="hover:drop-shadow-default w-3.5 h-3.5 m-[9px] object-contain" draggable="false" src="/assets/icons/plus-green-icon.svg" alt="Plus button icon" />
+              <img class="hover:drop-shadow-default w-3.5 h-3.5 m-[9px] object-contain" draggable="false" src="/assets/icons/plus-green-icon.svg" />
             </a>
           </div>
           <div class="flex justify-between">
@@ -37,20 +37,20 @@
                 </div>
               </div>
             </div>
-            <img src="/assets/placeholders/inventory_player.png" class="w-8 h-auto" alt="Player character sprite" />
+            <img src="/assets/placeholders/inventory_player.png" class="w-8 h-auto" />
             <div class="flex flex-col items-end gap-0.5">
               <div class="w-9 h-9 default-border rounded-sm bg-gray relative hover:bg-gray-600">
-                <img class="w-6 h-6 center-element" src="/assets/icons/profile/helmet.svg" alt="Helmet icon" />
+                <img class="w-6 h-6 center-element" src="/assets/icons/profile/helmet.svg" />
               </div>
               <div class="w-9 h-9 default-border rounded-sm bg-gray relative hover:bg-gray-600">
-                <img class="w-6 h-6 center-element" src="/assets/icons/profile/chestplate.svg" alt="Chestplate icon" />
+                <img class="w-6 h-6 center-element" src="/assets/icons/profile/chestplate.svg" />
               </div>
               <div class="flex gap-0.5 items-end">
                 <div class="w-6 h-6 default-border rounded-sm bg-gray relative hover:bg-gray-600">
-                  <img class="w-4 h-4 center-element" src="/assets/icons/profile/boots.svg" alt="Boots icon" />
+                  <img class="w-4 h-4 center-element" src="/assets/icons/profile/boots.svg" />
                 </div>
                 <div class="w-9 h-9 default-border rounded-sm bg-gray relative hover:bg-gray-600">
-                  <img class="w-6 h-6 center-element" src="/assets/icons/profile/legs.svg" alt="Legs icon" />
+                  <img class="w-6 h-6 center-element" src="/assets/icons/profile/legs.svg" />
                 </div>
               </div>
             </div>
@@ -119,44 +119,111 @@
 
 <script setup lang="ts">
 import { useGameStore } from '@/stores/gameStore'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 
 const gameStore = useGameStore()
 
-const width = ref(286)
+let startX = 0
-const height = ref(483)
+let startY = 0
-const x = ref(window.innerWidth / 2 - 143)
+let initialX = 0
-const y = ref(window.innerHeight / 2 - 241)
+let initialY = 0
+let modalPositionX = 0
+let modalPositionY = 0
+let modalWidth = 286
+let modalHeight = 483
+
+const width = ref(modalWidth)
+const height = ref(modalHeight)
+const x = ref(0)
+const y = ref(0)
 const isDragging = ref(false)
 
 const modalStyle = computed(() => ({
   top: `${y.value}px`,
   left: `${x.value}px`,
   width: `${width.value}px`,
-  height: `${height.value}px`
+  height: `${height.value}px`,
+  maxWidth: '100vw',
+  maxHeight: '100vh'
 }))
 
 function startDrag(event: MouseEvent) {
   isDragging.value = true
-  const startX = event.clientX - x.value
+  startX = event.clientX
-  const startY = event.clientY - y.value
+  startY = event.clientY
-
+  initialX = x.value
-  function drag(event: MouseEvent) {
+  initialY = y.value
-    if (!isDragging.value) return
+  event.preventDefault()
-    x.value = event.clientX - startX
-    y.value = event.clientY - startY
-  }
-
-  function stopDrag() {
-    isDragging.value = false
-    removeEventListener('mousemove', drag)
-    removeEventListener('mouseup', stopDrag)
-  }
-
-  addEventListener('mousemove', drag)
-  addEventListener('mouseup', stopDrag)
 }
 
+function drag(event: MouseEvent) {
+  if (!isDragging.value) return
+  const dx = event.clientX - startX
+  const dy = event.clientY - startY
+  x.value = initialX + dx
+  y.value = initialY + dy
+  adjustPosition()
+}
+
+function stopDrag() {
+  isDragging.value = false
+}
+
+function adjustPosition() {
+  x.value = Math.min(x.value, window.innerWidth - width.value)
+  y.value = Math.min(y.value, window.innerHeight - height.value)
+}
+
+function initializePosition() {
+  width.value = Math.min(modalWidth, window.innerWidth)
+  height.value = Math.min(modalHeight, window.innerHeight)
+  if (modalPositionX !== 0 && modalPositionY !== 0) {
+    x.value = modalPositionX
+    y.value = modalPositionY
+  } else {
+    x.value = (window.innerWidth - width.value) / 2
+    y.value = (window.innerHeight - height.value) / 2
+  }
+}
+
+watch(
+  () => gameStore.uiSettings.isCharacterProfileOpen,
+  (value) => {
+    gameStore.uiSettings.isCharacterProfileOpen = value
+    if (value) {
+      initializePosition()
+    }
+  }
+)
+
+watch(
+  () => modalWidth,
+  (value) => {
+    width.value = Math.min(value, window.innerWidth)
+  }
+)
+
+watch(
+  () => modalHeight,
+  (value) => {
+    height.value = Math.min(value, window.innerHeight)
+  }
+)
+
+watch(
+  () => modalPositionX,
+  (value) => {
+    x.value = value
+  }
+)
+
+watch(
+  () => modalPositionY,
+  (value) => {
+    y.value = value
+  }
+)
+
 function keyPress(event: KeyboardEvent) {
   if (event.altKey && event.key === 'c') {
     gameStore.toggleCharacterProfile()
@@ -165,9 +232,14 @@ function keyPress(event: KeyboardEvent) {
 
 onMounted(() => {
   addEventListener('keydown', keyPress)
+  addEventListener('mousemove', drag)
+  addEventListener('mouseup', stopDrag)
+  initializePosition()
 })
 
 onUnmounted(() => {
   removeEventListener('keydown', keyPress)
+  removeEventListener('mousemove', drag)
+  removeEventListener('mouseup', stopDrag)
 })
 </script>

src/components/gui/Chat.vue

@@ -7,7 +7,7 @@
       </div>
     </div>
     <div class="w-96 mx-auto relative">
-      <img src="/assets/icons/ingameUI/chat-icon.svg" class="absolute top-1/2 -translate-y-1/2 left-2.5 h-4 w-4 opacity-50" alt="" />
+      <img src="/assets/icons/ingameUI/chat-icon.svg" class="absolute top-1/2 -translate-y-1/2 left-2.5 h-4 w-4 opacity-50" />
       <input
         class="w-[332px] h-8 rounded-sm text-xs font-default pl-8 pr-4 py-0 bg-gray-600 border-2 border-solid border-gray-500 text-gray-300 bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-cover focus:outline-none focus:ring-0 focus:border-cyan-800"
         placeholder="Type something..."
@@ -23,14 +23,14 @@
 <script setup lang="ts">
 import type { Chat } from '@/application/types'
 import { useGameStore } from '@/stores/gameStore'
-import { useMapStore } from '@/stores/mapStore'
+import { useZoneStore } from '@/stores/zoneStore'
 import { onClickOutside, useFocus } from '@vueuse/core'
 import { useScene } from 'phavuer'
 import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
 
 const scene = useScene()
 const gameStore = useGameStore()
-const mapStore = useMapStore()
+const zoneStore = useZoneStore()
 
 const message = ref('')
 const chats = ref([] as Chat[])
@@ -79,20 +79,17 @@ const scrollToBottom = () => {
   })
 }
 
-gameStore.connection?.on('chat:message', (data: Chat) => {
+gameStore.connection!.on('chat:message', (data: Chat) => {
   chats.value.push(data)
   scrollToBottom()
 
-  if (!mapStore.characterLoaded) return
+  if (!zoneStore.characterLoaded) return
 
-  const characterContainer = scene.children.getByName(data.character.name) as Phaser.GameObjects.Container
+  const charChatContainer = scene.children.getByName(data.character.name + '_chatContainer') as Phaser.GameObjects.Container
-  if (!characterContainer) return
+  if (!charChatContainer) return
 
-  const characterChatContainer = characterContainer.getByName(data.character.name + '_chatContainer') as Phaser.GameObjects.Container
+  const chatBubble = charChatContainer.getByName(data.character.name + '_chatBubble') as Phaser.GameObjects.Container
-  if (!characterChatContainer) return
+  const chatText = charChatContainer.getByName(data.character.name + '_chatText') as Phaser.GameObjects.Text
-
-  const chatBubble = characterChatContainer.getByName(data.character.name + '_chatBubble') as Phaser.GameObjects.Container
-  const chatText = characterChatContainer.getByName(data.character.name + '_chatText') as Phaser.GameObjects.Text
   if (!chatText || !chatBubble) return
 
   function calculateTextWidth(text: string, font: string, fontSize: number): number {
@@ -118,24 +115,24 @@ gameStore.connection?.on('chat:message', (data: Chat) => {
   // setText but with max. char limit of 90
   chatText.setText(data.message.substring(0, 90))
 
-  characterChatContainer.setVisible(true)
+  charChatContainer.setVisible(true)
 
   /**
    * Hide chat bubble after a few seconds
    */
 
   // Clear any existing hide timer
-  if (characterChatContainer.getData('hideTimer')) {
+  if (charChatContainer.getData('hideTimer')) {
-    clearTimeout(characterChatContainer.getData('hideTimer'))
+    clearTimeout(charChatContainer.getData('hideTimer'))
   }
 
   // Set a new hide timer
   const hideTimer = setTimeout(() => {
-    characterChatContainer.setVisible(false)
+    charChatContainer.setVisible(false)
   }, 3000)
 
   // Store the timer on the container itself
-  characterChatContainer.setData('hideTimer', hideTimer)
+  charChatContainer.setData('hideTimer', hideTimer)
 })
 scrollToBottom()
 

src/components/gui/Clock.vue

@@ -11,7 +11,7 @@ import { onUnmounted } from 'vue'
 const gameStore = useGameStore()
 
 // Listen for new date from socket
-gameStore.connection?.on('date', (data: Date) => {
+gameStore.connection!.on('date', (data: Date) => {
   gameStore.world.date = new Date(data)
 })
 

src/components/gui/Menu.vue

@@ -6,7 +6,7 @@
         <div class="group-hover:block absolute -left-2 bg-gray-500 h-3.5 w-2 [clip-path:polygon(100%_0,_0_50%,_100%_100%)] top-1/2 -translate-y-1/2 hidden"></div>
       </div>
       <a class="group-hover:cursor-pointer bg-[url('/assets/ui-elements/button-ui-box-textured.svg')] bg-no-repeat block w-[42px] h-[42px] relative">
-        <img class="group-hover:drop-shadow-default w-6 h-5 mx-[9px] my-[11px] object-contain" draggable="false" src="/assets/icons/ingameUI/menu-icon.svg" alt="Menu button icon" />
+        <img class="group-hover:drop-shadow-default w-6 h-5 mx-[9px] my-[11px] object-contain" draggable="false" src="/assets/icons/ingameUI/menu-icon.svg" />
       </a>
     </li>
     <li class="menu-item group relative" @click="gameStore.toggleCharacterProfile">
@@ -15,7 +15,7 @@
         <div class="group-hover:block absolute -left-2 bg-gray-500 h-3.5 w-2 [clip-path:polygon(100%_0,_0_50%,_100%_100%)] top-1/2 -translate-y-1/2 hidden"></div>
       </div>
       <a class="group-hover:cursor-pointer bg-[url('/assets/ui-elements/button-ui-box-textured.svg')] bg-no-repeat block w-[42px] h-[42px] relative">
-        <img class="group-hover:drop-shadow-default w-8 h-8 m-[5px] object-contain" draggable="false" src="/assets/placeholders/head.png" alt="User profile button icon" />
+        <img class="group-hover:drop-shadow-default w-8 h-8 m-[5px] object-contain" draggable="false" src="/assets/placeholders/head.png" />
         <p class="absolute bottom-0 -right-1.5 m-0 max-w-4 font-ui z-10 text-white text-[12px] leading-[6px] drop-shadow-pixel"><span class="font-ui text-white text-[8px] ml-0.5">LVL</span> {{ characterLevel }}</p>
       </a>
     </li>
@@ -25,7 +25,7 @@
         <div class="group-hover:block absolute -left-2 bg-gray-500 h-3.5 w-2 [clip-path:polygon(100%_0,_0_50%,_100%_100%)] top-1/2 -translate-y-1/2 hidden"></div>
       </div>
       <a class="group-hover:bg-gray-800 bg-gray-900 group-hover:cursor-pointer border-2 border-solid rounded border-gray-500 block w-[34px] h-[31px]">
-        <img class="group-hover:drop-shadow-default w-6 h-6 m-[5px] object-contain" draggable="false" src="/assets/icons/ingameUI/chat-icon.svg" alt="Open chat button icon" />
+        <img class="group-hover:drop-shadow-default w-6 h-6 m-[5px] object-contain" draggable="false" src="/assets/icons/ingameUI/chat-icon.svg" />
       </a>
     </li>
     <li class="menu-item group relative">
@@ -34,7 +34,7 @@
         <div class="group-hover:block absolute -left-2 bg-gray-500 h-3.5 w-2 [clip-path:polygon(100%_0,_0_50%,_100%_100%)] top-1/2 -translate-y-1/2 hidden"></div>
       </div>
       <a class="group-hover:bg-gray-800 bg-gray-900 group-hover:cursor-pointer border-2 border-solid rounded border-gray-500 block w-[34px] h-[31px]">
-        <img class="group-hover:drop-shadow-default w-6 h-6 m-[5px] object-contain" draggable="false" src="/assets/icons/ingameUI/map-icon.svg" alt="World map button icon" />
+        <img class="group-hover:drop-shadow-default w-6 h-6 m-[5px] object-contain" draggable="false" src="/assets/icons/ingameUI/map-icon.svg" />
       </a>
     </li>
     <li class="menu-item group relative">
@@ -43,7 +43,7 @@
         <div class="group-hover:block absolute -left-2 bg-gray-500 h-3.5 w-2 [clip-path:polygon(100%_0,_0_50%,_100%_100%)] top-1/2 -translate-y-1/2 hidden"></div>
       </div>
       <a class="group-hover:bg-gray-800 bg-gray-900 group-hover:cursor-pointer border-2 border-solid rounded border-gray-500 block w-[34px] h-[31px]">
-        <img class="group-hover:drop-shadow-default w-6 h-6 m-[5px] object-contain" draggable="false" src="/assets/icons/ingameUI/socials-icon.svg" alt="Users button icon" />
+        <img class="group-hover:drop-shadow-default w-6 h-6 m-[5px] object-contain" draggable="false" src="/assets/icons/ingameUI/socials-icon.svg" />
       </a>
     </li>
   </ul>

src/components/gui/Minimap.vue

@@ -5,12 +5,12 @@
     </div>
     <div class="absolute -bottom-3 left-1/2 -translate-x-1/2 flex gap-1">
       <button class="w-6 h-6 relative p-0">
-        <img class="w-3 h-3 center-element" src="/assets/icons/plus-icon.svg" alt="Zoom-in button icon" />
+        <img class="w-3 h-3 center-element" src="/assets/icons/plus-icon.svg" />
-        <img class="w-full h-full" src="/assets/ui-elements/button-ui-box-textured.svg" alt="" />
+        <img class="w-full h-full" src="/assets/ui-elements/button-ui-box-textured.svg" />
       </button>
       <button class="w-6 h-6 relative p-0">
-        <img class="w-3 h-3 center-element" src="/assets/icons/minus-icon.svg" alt="Zoom-out button icon" />
+        <img class="w-3 h-3 center-element" src="/assets/icons/minus-icon.svg" />
-        <img class="w-full h-full" src="/assets/ui-elements/button-ui-box-textured.svg" alt="" />
+        <img class="w-full h-full" src="/assets/ui-elements/button-ui-box-textured.svg" />
       </button>
     </div>
   </div>

src/components/gui/UserPanel.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="absolute z-50 w-full h-dvh top-0 left-0 bg-black/60" v-show="false">
+    <div class="center-element max-w-[875px] max-h-[600px] h-full w-[80%] bg-gray border-solid border-2 border-gray-500 rounded-md z-50 flex flex-col backdrop-blur-sm shadow-lg">
+      <div class="p-2.5 flex max-sm:flex-wrap justify-between items-center gap-5 border-solid border-0 border-b border-gray-500">
+        <h3 class="m-0 font-medium shrink-0">Game menu</h3>
+        <div class="hidden sm:flex gap-1.5 flex-wrap">
+          <button @click.stop="userPanelScreen = 'inventory'" :class="{ active: userPanelScreen === 'inventory' }" class="btn-cyan py-1.5 px-4 min-w-24">Inventory</button>
+          <button @click.stop="userPanelScreen = 'equipment'" :class="{ active: userPanelScreen === 'equipment' }" class="btn-cyan py-1.5 px-4 min-w-24">Equipment</button>
+          <button @click.stop="userPanelScreen = 'characterScreen'" :class="{ active: userPanelScreen === 'characterScreen' }" class="btn-cyan py-1.5 px-4 min-w-24">Character</button>
+          <button @click.stop="userPanelScreen = 'settings'" :class="{ active: userPanelScreen === 'settings' }" class="btn-cyan py-1.5 px-4 min-w-24">Settings</button>
+        </div>
+        <div class="flex gap-2.5">
+          <button class="w-3.5 h-3.5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out">
+            <img alt="close" draggable="false" src="/assets/icons/modal/close-button-white.svg" class="w-full h-full" />
+          </button>
+        </div>
+        <div class="flex sm:hidden gap-1.5 flex-wrap">
+          <button @click.stop="userPanelScreen = 'inventory'" :class="{ active: userPanelScreen === 'inventory' }" class="btn-cyan py-1.5 px-4 min-w-24">Inventory</button>
+          <button @click.stop="userPanelScreen = 'equipment'" :class="{ active: userPanelScreen === 'equipment' }" class="btn-cyan py-1.5 px-4 min-w-24">Equipment</button>
+          <button @click.stop="userPanelScreen = 'characterScreen'" :class="{ active: userPanelScreen === 'characterScreen' }" class="btn-cyan py-1.5 px-4 min-w-24">Character</button>
+          <button @click.stop="userPanelScreen = 'settings'" :class="{ active: userPanelScreen === 'settings' }" class="btn-cyan py-1.5 px-4 min-w-24">Settings</button>
+        </div>
+      </div>
+      <Inventory v-show="userPanelScreen === 'inventory'" />
+      <Equipment v-show="userPanelScreen === 'equipment'" />
+      <CharacterScreen v-show="userPanelScreen === 'characterScreen'" />
+      <Settings v-show="userPanelScreen === 'settings'" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import CharacterScreen from '@/components/gui/partials/CharacterScreen.vue'
+import Equipment from '@/components/gui/partials/Equipment.vue'
+import Inventory from '@/components/gui/partials/Inventory.vue'
+import Settings from '@/components/gui/partials/Settings.vue'
+import { useGameStore } from '@/stores/gameStore'
+import { ref } from 'vue'
+
+const gameStore = useGameStore()
+let userPanelScreen = ref('inventory')
+</script>

src/components/gui/partials/CharacterScreen.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="grow flex flex-col w-full h-full relative overflow-auto">
+    <div class="m-4 relative">
+      <h4 class="font-medium text-lg max-w-[375px]">Character</h4>
+      <div class="flex justify-center flex-wrap gap-20">
+        <div class="flex gap-3 mt-2 flex-wrap max-w-[375px]">
+          <div class="h-full flex flex-col justify-center items-center">
+            <img class="h-72 my-2 mx-auto" src="/assets/placeholders/inventory_player.png" />
+          </div>
+        </div>
+        <div class="flex flex-col gap-4">
+          <div class="flex flex-col gap-3 mx-5 mt-2">
+            <h3>{{ gameStore.character?.name }}</h3>
+            <div class="flex gap-4 flex-wrap max-w-[375px]">
+              <ul class="p-0 m-0 list-none">
+                <li class="leading-6 text-lg">Class:</li>
+                <li class="leading-6 text-lg">Race:</li>
+                <li class="leading-6 text-lg">Hit Points:</li>
+                <li class="leading-6 text-lg">Mana Points:</li>
+                <li class="leading-6 text-lg">Level:</li>
+                <li class="leading-6 text-lg">Stat Points:</li>
+              </ul>
+              <ul class="p-0 m-0 list-none">
+                <li class="leading-6 text-lg min-h-6">Knight</li>
+                <li class="leading-6 text-lg min-h-6">{{ gameStore.character?.characterType?.race }}</li>
+                <li class="leading-6 text-lg min-h-6">{{ gameStore.character?.hitpoints }} <span class="text-green">(+15)</span></li>
+                <li class="leading-6 text-lg min-h-6">{{ gameStore.character?.mana }}</li>
+                <li class="leading-6 text-lg min-h-6">{{ gameStore.character?.level }}</li>
+                <li class="leading-6 text-lg min-h-6">3</li>
+              </ul>
+            </div>
+          </div>
+          <div class="flex flex-col gap-3 mx-5 mt-2">
+            <h3>Alignment</h3>
+            <div class="h-8 w-64 rounded border border-solid border-white bg-gradient-to-r from-red to-blue relative">
+              <!-- TODO: Give slider left value based on alignment (0-100), new characters start with 50 -->
+              <div class="rounded border-2 border-solid border-white h-10 w-2 absolute top-1/2 -translate-y-1/2 -translate-x-1/2" :style="{ left: gameStore.character?.alignment + '%' }"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="absolute -left-5 -bottom-5 w-[calc(100%_+_40px)] my-px h-px bg-gray-500"></div>
+    </div>
+    <div class="m-4">
+      <h4 class="font-medium text-lg max-w-[375px]">Character stats</h4>
+      <div class="flex gap-3 mt-4 flex-wrap max-w-[375px]">
+        <ul class="p-0 m-0 list-none">
+          <li class="leading-6">Health:</li>
+          <li class="leading-6">Defense:</li>
+          <li class="leading-6">More stats:</li>
+          <li class="leading-6">Extra stats:</li>
+        </ul>
+        <ul class="p-0 m-0 list-none text-right">
+          <li class="leading-6">100 <span class="text-green">(+15)</span></li>
+          <li class="leading-6">1000 <span class="text-green">(+500)</span></li>
+          <li class="leading-6"></li>
+          <li class="leading-6"></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useGameStore } from '@/stores/gameStore'
+
+const gameStore = useGameStore()
+</script>

src/components/gui/partials/Equipment.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="grow flex flex-col w-full h-full relative overflow-auto">
+    <div class="m-4 relative">
+      <h4 class="font-medium text-lg max-w-[375px]">Equipment</h4>
+      <div class="flex justify-center items-center flex-wrap gap-20">
+        <div class="flex gap-3 mt-2 flex-wrap max-w-[375px]">
+          <div class="h-full flex flex-col justify-center items-center">
+            <h3>{{ gameStore.character?.name }}</h3>
+            <img class="h-60 my-2 mx-auto" src="/assets/placeholders/inventory_player.png" />
+            <span class="block text-sm">Level {{ gameStore.character?.level }}</span>
+          </div>
+        </div>
+        <div class="flex flex-col gap-3 mx-5 mt-2">
+          <div class="flex gap-3 justify-center">
+            <!-- Helmet -->
+            <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md aspect-square h-11 w-11 relative hover:bg-gray-200">
+              <img src="/assets/icons/inventory/helmet.svg" class="center-element w-11/12 opacity-20" />
+            </div>
+
+            <!-- Head charm -->
+            <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md aspect-square h-11 w-11 relative hover:bg-gray-200">
+              <img src="/assets/icons/inventory/head_charm.svg" class="center-element w-11/12 opacity-20" />
+            </div>
+          </div>
+
+          <div class="flex gap-3 justify-center">
+            <!-- Bracers -->
+            <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md w-11 h-[104px] relative hover:bg-gray-200">
+              <img src="/assets/icons/inventory/bracers.svg" class="center-element w-11/12 opacity-20" />
+            </div>
+
+            <!-- Chestplate -->
+            <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md aspect-square w-[104px] h-[104px] relative hover:bg-gray-200">
+              <img src="/assets/icons/inventory/chestplate.svg" class="center-element w-10/12 opacity-20" />
+            </div>
+
+            <!-- Primary Weapon -->
+            <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md w-11 h-[104px] self-stretch justify-self-stretch relative hover:bg-gray-200">
+              <img src="/assets/icons/inventory/primary_weapon.svg" class="center-element w-11/12 opacity-20" />
+            </div>
+          </div>
+
+          <div class="flex gap-3 justify-center">
+            <!-- Legs -->
+            <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md w-11 h-[104px] self-stretch justify-self-stretch relative hover:bg-gray-200">
+              <img src="/assets/icons/inventory/legs.svg" class="center-element w-11/12 opacity-20" />
+            </div>
+
+            <div class="flex flex-col gap-3">
+              <!-- Belt/pouch -->
+              <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md aspect-square h-11 w-11 self-stretch justify-self-stretch relative hover:bg-gray-200">
+                <img src="/assets/icons/inventory/pouch.svg" class="center-element w-11/12 opacity-20" />
+              </div>
+
+              <!-- Boots -->
+              <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md aspect-square h-11 w-11 self-stretch justify-self-stretch relative hover:bg-gray-200">
+                <img src="/assets/icons/inventory/boots.svg" class="center-element w-11/12 opacity-20" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="absolute -left-5 -bottom-5 w-[calc(100%_+_40px)] my-px h-px bg-gray-500"></div>
+    </div>
+    <div class="m-4">
+      <h4 class="font-medium text-lg max-w-[375px]">Equipment Bonus</h4>
+      <div class="flex gap-3 mt-4 flex-wrap max-w-[375px]">
+        <ul class="p-0 m-0 list-none">
+          <li class="leading-6">Health:</li>
+          <li class="leading-6">Defense:</li>
+          <li class="leading-6">More stats:</li>
+          <li class="leading-6">Extra stats:</li>
+        </ul>
+        <ul class="p-0 m-0 list-none text-right">
+          <li class="leading-6">+15</li>
+          <li class="leading-6">500</li>
+          <li class="leading-6"></li>
+          <li class="leading-6"></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useGameStore } from '@/stores/gameStore'
+
+const gameStore = useGameStore()
+</script>

src/components/gui/partials/Inventory.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="grow flex flex-col w-full h-full relative overflow-auto">
+    <div class="m-4 relative">
+      <h4 class="m-auto font-medium text-lg max-w-[375px]">Inventory</h4>
+      <div class="flex gap-3 mt-4 mx-auto flex-wrap max-w-[375px]">
+        <div v-for="n in 24" class="bg-gray-300/80 border-solid border-2 border-gray-500 w-12 h-12 rounded-md aspect-square shrink-0 justify-self-stretch hover:bg-gray-200"></div>
+      </div>
+      <div class="absolute -left-5 -bottom-5 w-[calc(100%_+_40px)] my-px h-px bg-gray-500"></div>
+    </div>
+    <div class="m-4">
+      <h4 class="m-auto font-medium text-lg max-w-[375px]">Chest items</h4>
+      <div class="flex gap-3 mt-4 mx-auto flex-wrap max-w-[375px]">
+        <div v-for="n in 12" class="bg-gray-300/80 border-solid border-2 border-gray-500 w-12 h-12 rounded-md aspect-square shrink-0 justify-self-stretch hover:bg-gray-200"></div>
+      </div>
+    </div>
+  </div>
+</template>

src/components/gui/partials/Settings.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="flex h-full w-full relative">
+    <div class="w-2/12 flex flex-col relative">
+      <!-- Settings Categories -->
+      <div class="relative p-2.5">
+        <h3>Settings</h3>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
+      </div>
+      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': settingCategory === 'character' }" @click.stop="settingCategory = 'character'">
+        <span>Character</span>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
+      </a>
+      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': settingCategory === 'account' }" @click.stop="settingCategory = 'account'">
+        <span>Account</span>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
+      </a>
+      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': settingCategory === 'audio' }" @click.stop="settingCategory = 'audio'">
+        <span>Audio</span>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
+      </a>
+      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': settingCategory === 'video' }" @click.stop="settingCategory = 'video'">
+        <span>Video</span>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
+      </a>
+    </div>
+    <div class="absolute w-px bg-gray-500 h-full top-0 left-1/6"></div>
+
+    <!-- Assets list -->
+    <div class="overflow-auto h-full w-10/12 flex flex-col relative">
+      <CharacterSettings v-show="settingCategory == 'character'" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import CharacterSettings from '@/components/gui/partials/settings/CharacterSettings.vue'
+import { ref } from 'vue'
+
+let settingCategory = ref('character')
+</script>

src/components/gui/partials/settings/CharacterSettings.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="h-full overflow-auto">
+    <div class="relative p-2.5 flex flex-col gap-5 h-72">
+      <h3>Character details</h3>
+      <button @click="toggle" class="btn-cyan px-4 py-1.5 w-24">Edit</button>
+      <form class="flex gap-2.5 flex-wrap">
+        <div class="form-field-half max-w-[300px]">
+          <label for="name">Name</label>
+          <input class="input-field" :class="{ inactive: !editCharacter }" type="text" name="name" placeholder="Ethereal" :disabled="!editCharacter" />
+        </div>
+        <div class="form-field-half max-w-[300px] relative">
+          <label for="class">Class</label>
+          <select class="input-field" v-model="characterClass" :class="{ inactive: !editCharacter }" name="class" :disabled="!editCharacter">
+            <option value="Knight" :selected="characterClass == 'Knight'" :disabled="characterClass == 'Knight'">Knight</option>
+            <option value="Paladin" :selected="characterClass == 'Paladin'" :disabled="characterClass == 'Paladin'">Paladin</option>
+          </select>
+          <span v-if="!editCharacter" class="absolute bottom-[9px] left-[14px] text-sm text-gray-300/50">{{ characterClass }}</span>
+        </div>
+        <button v-if="editCharacter" @click="toggle" class="btn-cyan px-4 py-1.5 min-w-24" type="submit">Save</button>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const editCharacter = ref(false)
+const characterClass = ref('')
+
+const toggle = () => {
+  editCharacter.value = !editCharacter.value
+}
+</script>

src/components/screens/Characters.vue

@@ -34,23 +34,27 @@
                     <button class="ml-6 w-4 h-8 p-0">
                       <img src="/assets/icons/triangle-icon.svg" class="w-3 h-3.5 m-auto" alt="Arrow left" />
                     </button>
-                    <img class="w-24 object-contain mb-3.5 max-h-[70%]" alt="Player avatar" :src="config.server_endpoint + '/avatar/s/' + characters.find((c) => c.id === selectedCharacterId)?.characterType + '/' + (selectedHairId ?? 'default')" />
+                    <img class="w-24 object-contain mb-3.5" alt="Player avatar" :src="config.server_endpoint + '/avatar/s/' + characters.find((c) => c.id === selectedCharacterId)?.characterType?.id + '/' + (selectedHairId ?? 'default')" />
                     <button class="mr-6 w-4 h-8 p-0">
                       <img src="/assets/icons/triangle-icon.svg" class="w-3 h-3.5 -scale-x-100" alt="Arrow right" />
                     </button>
                   </div>
+                  <!--                  <div class="flex justify-between w-[190px]">-->
+                  <!--                    &lt;!&ndash; TODO: replace with color swatches &ndash;&gt;-->
+                  <!--                    <button v-for="n in 9" class="w-4 h-4 rounded-sm bg-white"></button>-->
+                  <!--                  </div>-->
                 </div>
                 <!-- TODO: update gender on (selected) character -->
-                <!--                <div class="flex justify-between w-[190px]">-->
+                <div class="flex justify-between w-[190px]">
-                <!--                  <button class="btn-empty flex gap-2" :class="{ selected: characters.find((c) => c.id == selectedCharacterId)?.characterType?.gender === 'MALE' }">-->
+                  <button class="btn-empty flex gap-2" :class="{ selected: characters.find((c) => c.id == selectedCharacterId)?.characterType?.gender === 'MALE' }">
-                <!--                    <img src="/assets/icons/male-icon.svg" class="w-4 h-4 m-auto" alt="Male symbol" />-->
+                    <img src="/assets/icons/male-icon.svg" class="w-4 h-4 m-auto" alt="Male symbol" />
-                <!--                    <span class="text-white">Male</span>-->
+                    <span class="text-white">Male</span>
-                <!--                  </button>-->
+                  </button>
-                <!--                  <button class="btn-empty flex gap-2" :class="{ selected: characters.find((c) => c.id == selectedCharacterId)?.characterType?.gender === 'FEMALE' }">-->
+                  <button class="btn-empty flex gap-2" :class="{ selected: characters.find((c) => c.id == selectedCharacterId)?.characterType?.gender === 'FEMALE' }">
-                <!--                    <img src="/assets/icons/male-icon.svg" class="w-4 h-4 m-auto" alt="Male symbol" />-->
+                    <img src="/assets/icons/male-icon.svg" class="w-4 h-4 m-auto" alt="Male symbol" />
-                <!--                    <span class="text-white">Female</span>-->
+                    <span class="text-white">Female</span>
-                <!--                  </button>-->
+                  </button>
-                <!--                </div>-->
+                </div>
               </div>
             </div>
           </div>
@@ -70,7 +74,7 @@
                     v-for="hair in characterHairs"
                     class="relative flex justify-center items-center bg-gray default-border w-[18px] h-[18px] p-2 rounded-sm hover:bg-gray-500 hover:border-gray-400 focus-visible:outline-none focus-visible:border-gray-300 focus-visible:bg-gray-500 has-[:checked]:bg-cyan has-[:checked]:border-transparent"
                   >
-                    <img class="h-4 object-contain" :src="config.server_endpoint + '/textures/sprites/' + hair.sprite + '/front.png'" alt="Hair sprite" />
+                    <img class="h-4 object-contain" :src="config.server_endpoint + '/assets/sprites/' + hair.sprite.id + '/front.png'" alt="Hair sprite" />
                     <input type="radio" name="hair" :value="hair.id" v-model="selectedHairId" class="h-full w-full absolute left-0 top-0 m-0 z-10 hover:cursor-pointer focus-visible:outline-offset-0 focus-visible:outline-white" />
                   </div>
                 </div>
@@ -87,7 +91,7 @@
         </div>
       </div>
       <div v-else>
-        <img class="w-20 invert-80" src="/assets/icons/loading-icon1.svg" alt="Loading" />
+        <img class="w-20 invert-80" src="/assets/icons/loading-icon1.svg" />
       </div>
 
       <div class="w-2/3 button-wrapper flex self-center justify-center lg:justify-end gap-4 max-w-[860px]" v-if="!isLoading">
@@ -122,29 +126,34 @@
 
 <script setup lang="ts">
 import config from '@/application/config'
-import { type CharacterHair, type Character as CharacterT, type Map } from '@/application/types'
+import { type CharacterHair, type Character as CharacterT, type Zone } from '@/application/types'
 import Modal from '@/components/utilities/Modal.vue'
-import { CharacterHairStorage } from '@/storage/storages'
 import { useGameStore } from '@/stores/gameStore'
-import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { onBeforeUnmount, ref, watch } from 'vue'
 
 const gameStore = useGameStore()
 const isLoading = ref<boolean>(true)
 const characters = ref<CharacterT[]>([])
-const selectedCharacterId = ref<string | null>(null)
+const selectedCharacterId = ref<number | null>(null)
 const isCreateNewCharacterModalOpen = ref<boolean>(false)
 const newCharacterName = ref<string>('')
 const characterHairs = ref<CharacterHair[]>([])
-const selectedHairId = ref<string | null>(null)
+const selectedHairId = ref<number | null>(null)
 
 // Fetch characters
 setTimeout(() => {
   gameStore.connection?.emit('character:list')
 }, 750)
 
-gameStore.connection?.on('character:list', (data: any) => {
+gameStore.connection!.on('character:list', (data: any) => {
   characters.value = data
   isLoading.value = false
+
+  // Fetch hairs
+  // @TODO: This is hacky, we should have a better way to do this
+  gameStore.connection?.emit('character:hair:list', {}, (data: CharacterHair[]) => {
+    characterHairs.value = data
+  })
 })
 
 // Select character logics
@@ -157,7 +166,7 @@ function loginWithCharacter() {
       characterId: selectedCharacterId.value,
       characterHairId: selectedHairId.value
     },
-    (response: { character: CharacterT; map: Map; characters: CharacterT[] }) => {
+    (response: { character: CharacterT; zone: Zone; characters: CharacterT[] }) => {
       gameStore.setCharacter(response.character)
     }
   )
@@ -165,7 +174,7 @@ function loginWithCharacter() {
 
 // Create character logics
 function createCharacter() {
-  gameStore.connection?.on('character:create:success', (data: CharacterT) => {
+  gameStore.connection!.on('character:create:success', (data: CharacterT) => {
     gameStore.setCharacter(data)
     isCreateNewCharacterModalOpen.value = false
   })
@@ -175,12 +184,7 @@ function createCharacter() {
 // Watch changes for selected character and update hairs
 watch(selectedCharacterId, (characterId) => {
   if (!characterId) return
-  // selectedHairId.value = characters.value.find((c) => c.id == characterId)?.characterHairId ?? null
+  selectedHairId.value = characters.value.find((c) => c.id == characterId)?.characterHairId ?? null
-})
-
-onMounted(async () => {
-  const characterHairStorage = new CharacterHairStorage()
-  characterHairs.value = await characterHairStorage.getAll()
 })
 
 onBeforeUnmount(() => {

src/components/screens/Game.vue

@@ -6,11 +6,12 @@
         <Hud />
         <Hotkeys />
         <Clock />
-        <Map />
+        <Zone />
         <Chat />
         <ExpBar />
 
         <CharacterProfile />
+        <Effects />
       </Scene>
     </Game>
   </div>
@@ -19,17 +20,19 @@
 <script setup lang="ts">
 import config from '@/application/config'
 import 'phaser'
-import CharacterProfile from '@/components/game/gui/CharacterProfile.vue'
+import Effects from '@/components/Effects.vue'
-import Chat from '@/components/game/gui/Chat.vue'
+import Zone from '@/components/game/zone/Zone.vue'
-import Clock from '@/components/game/gui/Clock.vue'
+import CharacterProfile from '@/components/gui/CharacterProfile.vue'
-import ExpBar from '@/components/game/gui/ExpBar.vue'
+import Chat from '@/components/gui/Chat.vue'
-import Hotkeys from '@/components/game/gui/Hotkeys.vue'
+// import Minimap from '@/components/gui/Minimap.vue'
-import Hud from '@/components/game/gui/Hud.vue'
+import Clock from '@/components/gui/Clock.vue'
-import Menu from '@/components/game/gui/Menu.vue'
+import ExpBar from '@/components/gui/ExpBar.vue'
-import Map from '@/components/game/map/Map.vue'
+import Hotkeys from '@/components/gui/Hotkeys.vue'
+import Hud from '@/components/gui/Hud.vue'
+import Menu from '@/components/gui/Menu.vue'
 import { useGameStore } from '@/stores/gameStore'
+import AwaitLoaderPlugin from 'phaser3-rex-plugins/plugins/awaitloader-plugin'
 import { Game, Scene } from 'phavuer'
-import { onBeforeUnmount } from 'vue'
 
 const gameStore = useGameStore()
 
@@ -38,11 +41,22 @@ const gameConfig = {
   width: window.innerWidth,
   height: window.innerHeight,
   type: Phaser.AUTO, // AUTO, CANVAS, WEBGL, HEADLESS
-  resolution: 5
+  resolution: 5,
+  plugins: {
+    global: [
+      {
+        key: 'rexAwaitLoader',
+        plugin: AwaitLoaderPlugin,
+        start: true
+      }
+    ]
+  }
 }
 
 const createGame = (game: Phaser.Game) => {
-  // Resize the game when the window is resized
+  /**
+   * Resize the game when the window is resized
+   */
   addEventListener('resize', () => {
     game.scale.resize(window.innerWidth, window.innerHeight)
   })
@@ -58,12 +72,12 @@ const createGame = (game: Phaser.Game) => {
 }
 
 function preloadScene(scene: Phaser.Scene) {
-  // Load the base assets into the Phaser scene
+  /**
-  scene.load.image('blank_tile', '/assets/map/blank_tile.png')
+   * Load the base assets into the Phaser scene
+   */
+  scene.load.image('blank_tile', '/assets/zone/blank_tile.png')
   scene.load.image('waypoint', '/assets/waypoint.png')
 }
 
 function createScene(scene: Phaser.Scene) {}
-
-onBeforeUnmount(() => {})
 </script>

src/components/screens/Loading.vue

@@ -1,28 +1,25 @@
 <template>
-  <div class="flex flex-col justify-center items-center h-dvh relative col">
+  <div class="flex flex-col justify-center items-center h-dvh relative">
-    <img class="w-20 invert-80" src="/assets/icons/loading-icon1.svg" alt="Loading" />
+    <button @click="continueBtnClick" class="w-32 h-12 rounded-full bg-gray-500 flex items-center justify-between px-4 hover:bg-gray-600 transition-colors">
+      <span class="text-white text-lg flex-1 text-center">Play</span>
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+      </svg>
+    </button>
   </div>
 </template>
 
 <script setup lang="ts" async>
-import { downloadCache } from '@/application/utilities'
-import { CharacterHairStorage, CharacterTypeStorage, MapObjectStorage, MapStorage, SpriteStorage, TileStorage } from '@/storage/storages'
 import { useGameStore } from '@/stores/gameStore'
-import { ref } from 'vue'
 
 const gameStore = useGameStore()
 
-const totalItems = ref(0)
+function continueBtnClick() {
-const currentItem = ref(0)
+  // Play music
+  const audio = new Audio('/assets/music/login.mp3')
+  audio.play()
 
-Promise.all([
+  // Set isLoaded to true
-  downloadCache('tiles', new TileStorage()),
-  downloadCache('maps', new MapStorage()),
-  downloadCache('map_objects', new MapObjectStorage()),
-  downloadCache('sprites', new SpriteStorage()),
-  downloadCache('character_types', new CharacterTypeStorage()),
-  downloadCache('character_hair', new CharacterHairStorage())
-]).then(() => {
   gameStore.game.isLoaded = true
-})
+}
 </script>

src/components/screens/Login.vue

@@ -8,8 +8,8 @@
       <div class="h-dvh flex items-center lg:justify-center flex-col px-8 max-lg:pt-20">
         <!--        <img src="/assets/tlogo.png" class="mb-10 w-52" alt="Noxious logo" />-->
         <div class="relative">
-          <img src="/assets/ui-elements/login-ui-box-outer.svg" class="absolute w-full h-full" alt="" />
+          <img src="/assets/ui-elements/login-ui-box-outer.svg" class="absolute w-full h-full" alt="UI box outer" />
-          <img src="/assets/ui-elements/login-ui-box-inner.svg" class="absolute left-2 top-2 w-[calc(100%_-_16px)] h-[calc(100%_-_16px)]" alt="" />
+          <img src="/assets/ui-elements/login-ui-box-inner.svg" class="absolute left-2 top-2 w-[calc(100%_-_16px)] h-[calc(100%_-_16px)] max-lg:hidden" alt="UI box inner" />
 
           <!-- Login Form -->
           <LoginForm v-if="currentForm === 'login' && !doesUrlHaveToken" @openResetPasswordModal="() => (isPasswordResetFormShown = true)" @switchToRegister="currentForm = 'register'" />

src/components/screens/MapEditor.vue

@@ -1,123 +0,0 @@
-<template>
-  <div class="flex justify-center items-center h-dvh relative">
-    <Game :config="gameConfig" @create="createGame">
-      <Scene name="main" @preload="preloadScene">
-        <div v-if="!isLoaded" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-white text-3xl font-ui">Loading...</div>
-        <div v-else>
-          <Map :key="mapEditor.currentMap.value?.id" />
-          <Toolbar
-            ref="toolbar"
-            @save="save"
-            @clear="clear"
-            @open-maps="mapModal?.open"
-            @open-settings="mapSettingsModal?.open"
-            @close-editor="mapEditor.toggleActive"
-            @close-lists="tileList?.close"
-            @closeLists="objectList?.close"
-            @open-tile-list="tileList?.open"
-            @open-map-object-list="objectList?.open"
-          />
-          <MapList ref="mapModal" @open-create-map="mapSettingsModal?.open" />
-          <TileList ref="tileList" />
-          <ObjectList ref="objectList" />
-          <MapSettings ref="mapSettingsModal" />
-          <TeleportModal ref="teleportModal" />
-        </div>
-      </Scene>
-    </Game>
-  </div>
-</template>
-
-<script setup lang="ts">
-import config from '@/application/config'
-import 'phaser'
-import type { Map as MapT } from '@/application/types'
-import Map from '@/components/gameMaster/mapEditor/Map.vue'
-import MapList from '@/components/gameMaster/mapEditor/partials/MapList.vue'
-import ObjectList from '@/components/gameMaster/mapEditor/partials/MapObjectList.vue'
-import MapSettings from '@/components/gameMaster/mapEditor/partials/MapSettings.vue'
-import TeleportModal from '@/components/gameMaster/mapEditor/partials/TeleportModal.vue'
-import TileList from '@/components/gameMaster/mapEditor/partials/TileList.vue'
-import Toolbar from '@/components/gameMaster/mapEditor/partials/Toolbar.vue'
-import { loadAllTilesIntoScene } from '@/composables/mapComposable'
-import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
-import { MapStorage } from '@/storage/storages'
-import { useGameStore } from '@/stores/gameStore'
-import { Game, Scene } from 'phavuer'
-import { ref, useTemplateRef, watch } from 'vue'
-
-const mapStorage = new MapStorage()
-const mapEditor = useMapEditorComposable()
-const gameStore = useGameStore()
-
-const toolbar = useTemplateRef('toolbar')
-const mapModal = useTemplateRef('mapModal')
-const tileList = useTemplateRef('tileList')
-const objectList = useTemplateRef('objectList')
-const mapSettingsModal = useTemplateRef('mapSettingsModal')
-const teleportModal = useTemplateRef('teleportModal')
-
-const isLoaded = ref(false)
-
-const gameConfig = {
-  name: config.name,
-  width: window.innerWidth,
-  height: window.innerHeight,
-  type: Phaser.AUTO, // AUTO, CANVAS, WEBGL, HEADLESS
-  resolution: 5
-}
-
-const createGame = (game: Phaser.Game) => {
-  // Resize the game when the window is resized
-  window.addEventListener('resize', () => {
-    game.scale.resize(window.innerWidth, window.innerHeight)
-  })
-}
-
-const preloadScene = async (scene: Phaser.Scene) => {
-  // Load the base assets into the Phaser scene
-  scene.load.image('BLOCK', '/assets/map/bt_tile.png')
-  scene.load.image('TELEPORT', '/assets/map/tp_tile.png')
-  scene.load.image('blank_tile', '/assets/map/blank_tile.png')
-  scene.load.image('waypoint', '/assets/waypoint.png')
-
-  // Get all tiles from IndexedDB and load them into the scene
-  await loadAllTilesIntoScene(scene)
-
-  // Wait for all assets to be loaded before continuing
-  await new Promise<void>((resolve) => {
-    scene.load.on(Phaser.Loader.Events.COMPLETE, () => {
-      resolve()
-    })
-    isLoaded.value = true
-  })
-}
-
-function save() {
-  const currentMap = mapEditor.currentMap.value
-  if (!currentMap) return
-
-  const data = {
-    mapId: currentMap.id,
-    name: currentMap.name,
-    width: currentMap.width,
-    height: currentMap.height,
-    tiles: currentMap.tiles,
-    pvp: currentMap.pvp,
-    mapEffects: currentMap.mapEffects?.map(({ id, effect, strength }) => ({ id, effect, strength })) ?? [],
-    mapEventTiles: currentMap.mapEventTiles?.map(({ id, type, positionX, positionY, teleport }) => ({ id, type, positionX, positionY, teleport })) ?? [],
-    placedMapObjects: currentMap.placedMapObjects?.map(({ id, mapObject, depth, isRotated, positionX, positionY }) => ({ id, mapObject, depth, isRotated, positionX, positionY })) ?? []
-  }
-
-  gameStore.connection?.emit('gm:map:update', data, (response: MapT) => {
-    mapStorage.update(response.id, response)
-  })
-}
-
-function clear() {
-  if (!mapEditor.currentMap.value) return
-
-  // Clear placed objects, event tiles and tiles
-  mapEditor.clearMap()
-}
-</script>

src/components/screens/ZoneEditor.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="flex justify-center items-center h-dvh relative">
+    <Game :config="gameConfig" @create="createGame">
+      <Scene name="main" @preload="preloadScene" @create="createScene">
+        <ZoneEditor :key="JSON.stringify(`${zoneEditorStore.zone?.id}_${zoneEditorStore.zone?.createdAt}_${zoneEditorStore.zone?.updatedAt ?? ''}`)" />
+      </Scene>
+    </Game>
+  </div>
+</template>
+
+<script setup lang="ts">
+import config from '@/application/config'
+import 'phaser'
+import type { AssetDataT } from '@/application/types'
+import ZoneEditor from '@/components/gameMaster/zoneEditor/ZoneEditor.vue'
+import { loadTexture } from '@/composables/gameComposable'
+import { useGameStore } from '@/stores/gameStore'
+import { useZoneEditorStore } from '@/stores/zoneEditorStore'
+import AwaitLoaderPlugin from 'phaser3-rex-plugins/plugins/awaitloader-plugin'
+import { Game, Scene } from 'phavuer'
+
+const gameStore = useGameStore()
+const zoneEditorStore = useZoneEditorStore()
+
+const gameConfig = {
+  name: config.name,
+  width: window.innerWidth,
+  height: window.innerHeight,
+  type: Phaser.AUTO, // AUTO, CANVAS, WEBGL, HEADLESS
+  resolution: 5,
+  plugins: {
+    global: [
+      {
+        key: 'rexAwaitLoader',
+        plugin: AwaitLoaderPlugin,
+        start: true
+      }
+    ]
+  }
+}
+
+const createGame = (game: Phaser.Game) => {
+  /**
+   * Resize the game when the window is resized
+   */
+  addEventListener('resize', () => {
+    game.scale.resize(window.innerWidth, window.innerHeight)
+  })
+
+  // We don't support canvas mode, only WebGL
+  if (game.renderer.type === Phaser.CANVAS) {
+    gameStore.addNotification({
+      title: 'Warning',
+      message: 'Your browser does not support WebGL. Please use a modern browser like Chrome, Firefox, or Edge.'
+    })
+    gameStore.disconnectSocket()
+  }
+}
+
+const preloadScene = async (scene: Phaser.Scene) => {
+  /**
+   * Load the base assets into the Phaser scene
+   */
+  scene.load.image('BLOCK', '/assets/zone/bt_tile.png')
+  scene.load.image('TELEPORT', '/assets/zone/tp_tile.png')
+  scene.load.image('blank_tile', '/assets/zone/blank_tile.png')
+  scene.load.image('waypoint', '/assets/waypoint.png')
+
+  /**
+   * Because Phaser can't load tiles after the scene with map in it is created,
+   * we need to load and cache all the tiles first.
+   * Then load them into the scene.
+   */
+  scene.load.rexAwait(async function (successCallback: any) {
+    const tiles: AssetDataT[] = await fetch(config.server_endpoint + '/assets/list_tiles').then((response) => response.json())
+    for await (const tile of tiles) {
+      await loadTexture(scene, tile)
+    }
+
+    successCallback()
+  })
+}
+
+const createScene = async (scene: Phaser.Scene) => {}
+</script>

src/components/utilities/Controls.vue

@@ -3,7 +3,8 @@
 </template>
 
 <script setup lang="ts">
-import { useControlsComposable } from '@/composables/useControlsComposable'
+import { useCameraControls } from '@/composables/useCameraControls'
+import { usePointerHandlers } from '@/composables/usePointerHandlers'
 import { Image, useScene } from 'phavuer'
 import { onBeforeUnmount, ref } from 'vue'
 
@@ -13,16 +14,45 @@ type WayPoint = { visible: boolean; x: number; y: number }
 // Props
 const props = defineProps<{ layer: Phaser.Tilemaps.TilemapLayer }>()
 
+// Constants
+const ZOOM_SETTINGS = {
+  WHEEL_FACTOR: 0.005,
+  KEY_FACTOR: 0.3,
+  MIN: 1,
+  MAX: 3
+} as const
+
 // Setup
 const scene = useScene()
 const waypoint = ref<WayPoint>({ visible: false, x: 0, y: 0 })
-const { setupControls, cleanupControls } = useControlsComposable(scene, props.layer, waypoint)
+const { camera } = useCameraControls(scene)
+const { setupPointerHandlers, cleanupPointerHandlers } = usePointerHandlers(scene, props.layer, waypoint, camera)
+
+// Handlers
+function handleScrollZoom(pointer: Phaser.Input.Pointer) {
+  if (!(pointer.event instanceof WheelEvent && pointer.event.shiftKey)) return
+
+  const zoomLevel = Phaser.Math.Clamp(camera.zoom - pointer.event.deltaY * ZOOM_SETTINGS.WHEEL_FACTOR, ZOOM_SETTINGS.MIN, ZOOM_SETTINGS.MAX)
+  camera.setZoom(zoomLevel)
+}
+
+function handleKeyComboZoom(event: { keyCodes: number[] }) {
+  const deltaY = event.keyCodes[1] === 38 ? 1 : -1 // 38 is Up, 40 is Down
+  const zoomLevel = Phaser.Math.Clamp(camera.zoom + deltaY * ZOOM_SETTINGS.KEY_FACTOR, ZOOM_SETTINGS.MIN, ZOOM_SETTINGS.MAX)
+  camera.setZoom(zoomLevel)
+}
 
 // Event setup
-setupControls()
+setupPointerHandlers()
+scene.input.keyboard?.createCombo([16, 38], { resetOnMatch: true }) // Shift + Up
+scene.input.keyboard?.createCombo([16, 40], { resetOnMatch: true }) // Shift + Down
+scene.input.keyboard?.on('keycombomatch', handleKeyComboZoom)
+scene.input.on(Phaser.Input.Events.POINTER_WHEEL, handleScrollZoom)
 
 // Cleanup
 onBeforeUnmount(() => {
-  cleanupControls()
+  cleanupPointerHandlers()
+  scene.input.keyboard?.off('keycombomatch')
+  scene.input.off(Phaser.Input.Events.POINTER_WHEEL, handleScrollZoom)
 })
 </script>

src/components/utilities/Debug.vue

@@ -1,46 +0,0 @@
-<template></template>
-
-<script setup lang="ts">
-import { CharacterHairStorage, CharacterTypeStorage, MapObjectStorage, MapStorage, SpriteStorage, TileStorage } from '@/storage/storages'
-import { TextureStorage } from '@/storage/textureStorage'
-import { onMounted, onUnmounted } from 'vue'
-
-const mapStorage = new MapStorage()
-const tileStorage = new TileStorage()
-const mapObjectStorage = new MapObjectStorage()
-const spriteStorage = new SpriteStorage()
-const characterTypeStorage = new CharacterTypeStorage()
-const characterHairStorage = new CharacterHairStorage()
-const textureStorage = new TextureStorage()
-
-let currentString = ''
-
-async function handleKeyPress(event: KeyboardEvent) {
-  // Ignore if typing in input/textarea
-  if (document.activeElement?.tagName.toUpperCase() === 'INPUT' || document.activeElement?.tagName.toUpperCase() === 'TEXTAREA') {
-    return
-  }
-
-  currentString += event.key
-
-  // Do something when string matches
-  if (currentString.includes('reset')) {
-    await mapStorage.destroy()
-    await tileStorage.destroy()
-    await mapObjectStorage.destroy()
-    await spriteStorage.destroy()
-    await characterTypeStorage.destroy()
-    await characterHairStorage.destroy()
-    await textureStorage.destroy()
-    currentString = '' // Reset
-  }
-
-  // Reset string after a certain amount of time
-  setTimeout(() => {
-    currentString = ''
-  }, 60000)
-}
-
-onMounted(() => window.addEventListener('keydown', handleKeyPress))
-onUnmounted(() => window.removeEventListener('keydown', handleKeyPress))
-</script>