Added overlay on portrait screens to force switching to landscape

(Needs better styling/design)

.env.example

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

.prettierrc.json

@@ -4,5 +4,8 @@
   "tabWidth": 2,
   "singleQuote": true,
   "printWidth": 300,
-  "trailingComma": "none"
+  "trailingComma": "none",
+  "plugins": ["@ianvs/prettier-plugin-sort-imports"],
+  "importOrderParserPlugins": ["typescript", "jsx", "decorators-legacy", "classProperties"],
+  "importOrderCaseSensitive": false
 }

package.json

@@ -27,6 +27,7 @@
     "zod": "^3.22.2"
   },
   "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",
@@ -37,7 +38,6 @@
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.5.1",
     "autoprefixer": "^10.4.19",
-    "easystarjs": "^0.4.4",
     "eslint": "^8.57.0",
     "eslint-plugin-vue": "^9.27.0",
     "jsdom": "^24.1.1",
@@ -51,7 +51,6 @@
     "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,4 +1,5 @@
 <template>
+  <Debug />
   <Notifications />
   <BackgroundImageLoader />
   <GmPanel v-if="gameStore.character?.role === 'gm'" />
@@ -6,37 +7,43 @@
 </template>
 
 <script setup lang="ts">
-import { useGameStore } from '@/stores/gameStore'
-import { useZoneEditorStore } from '@/stores/zoneEditorStore'
-import Notifications from '@/components/utilities/Notifications.vue'
-import BackgroundImageLoader from '@/components/utilities/BackgroundImageLoader.vue'
 import GmPanel from '@/components/gameMaster/GmPanel.vue'
-import Login from '@/components/screens/Login.vue'
 import Characters from '@/components/screens/Characters.vue'
 import Game from '@/components/screens/Game.vue'
-import ZoneEditor from '@/components/screens/ZoneEditor.vue'
+import Loading from '@/components/screens/Loading.vue'
+import Login from '@/components/screens/Login.vue'
+import MapEditor from '@/components/screens/MapEditor.vue'
+import BackgroundImageLoader from '@/components/utilities/BackgroundImageLoader.vue'
+import Debug from '@/components/utilities/Debug.vue'
+import Notifications from '@/components/utilities/Notifications.vue'
+import { useGameStore } from '@/stores/gameStore'
+import { useMapEditorStore } from '@/stores/mapEditorStore'
 import { computed, watch } from 'vue'
 
 const gameStore = useGameStore()
-const zoneEditorStore = useZoneEditorStore()
+const mapEditorStore = useMapEditorStore()
 
 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 (zoneEditorStore.active) return ZoneEditor
+  if (mapEditorStore.active) return MapEditor
   return Game
 })
 
-// Watch zoneEditorStore.active and empty gameStore.game.loadedAssets
+// Watch mapEditorStore.active and empty gameStore.game.loadedAssets
 watch(
-  () => zoneEditorStore.active,
+  () => mapEditorStore.active,
   () => {
-    gameStore.game.loadedAssets = []
+    gameStore.game.loadedTextures = []
   }
 )
 
 // #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
@@ -50,7 +57,9 @@ 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') return
+  if (event.repeat || event.isComposing || event.defaultPrevented || document.activeElement?.tagName.toUpperCase() === 'INPUT' || document.activeElement?.tagName.toUpperCase() === 'TEXTAREA') {
+    return
+  }
 
   if (event.key === 'G') {
     gameStore.toggleGmPanel()

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: {
-    x: Number(import.meta.env.VITE_TILE_SIZE_X),
-    y: Number(import.meta.env.VITE_TILE_SIZE_Y)
+    width: Number(import.meta.env.VITE_TILE_SIZE_WIDTH),
+    height: Number(import.meta.env.VITE_TILE_SIZE_HEIGHT)
   }
 }

src/application/types.ts

@@ -1,3 +1,5 @@
+export type UUID = `${string}-${string}-${string}-${string}-${string}`
+
 export type Notification = {
   id?: string
   title?: string
@@ -10,10 +12,10 @@ export type HttpResponse<T> = {
   data?: T
 }
 
-export type AssetDataT = {
+export type TextureData = {
   key: string
-  data: string
-  group: 'tiles' | 'objects' | 'sprites' | 'sprite_animations' | 'sound' | 'music' | 'ui' | 'font' | 'other'
+  data: string // URL or Base64 encoded blob
+  group: 'tiles' | 'map_objects' | 'sprites' | 'sprite_animations' | 'sound' | 'music' | 'ui' | 'font' | 'other'
   updatedAt: Date
   originX?: number
   originY?: number
@@ -25,15 +27,15 @@ export type AssetDataT = {
 }
 
 export type Tile = {
-  id: string
+  id: UUID
   name: string
   tags: any | null
   createdAt: Date
   updatedAt: Date
 }
 
-export type Object = {
-  id: string
+export type MapObject = {
+  id: UUID
   name: string
   tags: any | null
   originX: number
@@ -44,17 +46,15 @@ export type Object = {
   frameHeight: number
   createdAt: Date
   updatedAt: Date
-  ZoneObject: ZoneObject[]
 }
 
 export type Item = {
-  id: string
+  id: UUID
   name: string
   description: string | null
   itemType: ItemType
   stackable: boolean
   rarity: ItemRarity
-  spriteId: string | null
   sprite?: Sprite
   createdAt: Date
   updatedAt: Date
@@ -63,72 +63,66 @@ export type Item = {
 export type ItemType = 'WEAPON' | 'HELMET' | 'CHEST' | 'LEGS' | 'BOOTS' | 'GLOVES' | 'RING' | 'NECKLACE'
 export type ItemRarity = 'COMMON' | 'UNCOMMON' | 'RARE' | 'EPIC' | 'LEGENDARY'
 
-export type Zone = {
-  id: number
+export type Map = {
+  id: UUID
   name: string
   width: number
   height: number
   tiles: any | null
   pvp: boolean
-  zoneEffects: ZoneEffect[]
-  zoneEventTiles: ZoneEventTile[]
-  zoneObjects: ZoneObject[]
+  mapEffects: MapEffect[]
+  mapEventTiles: MapEventTile[]
+  placedMapObjects: PlacedMapObject[]
   characters: Character[]
   chats: Chat[]
   createdAt: Date
   updatedAt: Date
 }
 
-export type ZoneEffect = {
-  id: string
-  zoneId: number
-  zone: Zone
+export type MapEffect = {
+  id: UUID
+  map: Map
   effect: string
   strength: number
 }
 
-export type ZoneObject = {
-  id: string
-  zoneId: number
-  zone: Zone
-  objectId: string
-  object: Object
+export type PlacedMapObject = {
+  id: UUID
+  map: Map
+  mapObject: MapObject
   depth: number
   isRotated: boolean
   positionX: number
   positionY: number
 }
 
-export enum ZoneEventTileType {
+export enum MapEventTileType {
   BLOCK = 'BLOCK',
   TELEPORT = 'TELEPORT',
   NPC = 'NPC',
   ITEM = 'ITEM'
 }
 
-export type ZoneEventTile = {
-  id: string
-  zoneId: number
-  zone: Zone
-  type: ZoneEventTileType
+export type MapEventTile = {
+  id: UUID
+  map: Map
+  type: MapEventTileType
   positionX: number
   positionY: number
-  teleport?: ZoneEventTileTeleport
+  teleport?: MapEventTileTeleport
 }
 
-export type ZoneEventTileTeleport = {
-  id: string
-  zoneEventTileId: string
-  zoneEventTile: ZoneEventTile
-  toZoneId: number
-  toZone: Zone
+export type MapEventTileTeleport = {
+  id: UUID
+  mapEventTile: MapEventTile
+  toMap: Map
   toPositionX: number
   toPositionY: number
   toRotation: number
 }
 
 export type User = {
-  id: number
+  id: UUID
   username: string
   password: string
   characters: Character[]
@@ -148,29 +142,27 @@ export enum CharacterRace {
 }
 
 export type CharacterType = {
-  id: number
+  id: UUID
   name: string
   gender: CharacterGender
   race: CharacterRace
   isSelectable: boolean
-  characters: Character[]
-  spriteId?: string
   sprite?: Sprite
   createdAt: Date
   updatedAt: Date
 }
 
 export type CharacterHair = {
-  id: number
+  id: UUID
   name: string
-  sprite: Sprite
+  sprite?: Sprite
   gender: CharacterGender
   isSelectable: boolean
 }
 
 export type Character = {
-  id: number
-  userId: number
+  id: UUID
+  userId: UUID
   user: User
   name: string
   hitpoints: number
@@ -182,35 +174,29 @@ export type Character = {
   positionX: number
   positionY: number
   rotation: number
-  characterTypeId: number | null
-  characterType: CharacterType | null
-  characterHairId: number | null
-  characterHair: CharacterHair | null
-  zoneId: number
-  zone: Zone
+  characterType: UUID | null
+  characterHair: UUID | null
+  map: UUID
   chats: Chat[]
   items: CharacterItem[]
   equipment: CharacterEquipment[]
 }
 
-export type ZoneCharacter = {
+export type MapCharacter = {
   character: Character
-  isMoving?: boolean
+  isMoving: boolean
 }
 
 export type CharacterItem = {
-  id: number
-  characterId: number
+  id: UUID
   character: Character
-  itemId: string
   item: Item
   quantity: number
 }
 
 export type CharacterEquipment = {
-  id: number
+  id: UUID
   slot: CharacterEquipmentSlotType
-  characterItemId: number
   characterItem: CharacterItem
 }
 
@@ -224,7 +210,7 @@ export enum CharacterEquipmentSlotType {
 }
 
 export type Sprite = {
-  id: string
+  id: UUID
   name: string
   createdAt: Date
   updatedAt: Date
@@ -233,8 +219,7 @@ export type Sprite = {
 }
 
 export type SpriteAction = {
-  id: string
-  spriteId: string
+  id: UUID
   sprite: Sprite
   action: string
   sprites: string[]
@@ -248,11 +233,9 @@ export type SpriteAction = {
 }
 
 export type Chat = {
-  id: number
-  characterId: number
+  id: UUID
   character: Character
-  zoneId: number
-  zone: Zone
+  map: Map
   message: string
   createdAt: Date
 }
@@ -271,7 +254,7 @@ export type WeatherState = {
   fogDensity: number
 }
 
-export type zoneLoadData = {
-  zone: ZoneT
-  characters: ZoneCharacter[]
-}
+export type mapLoadData = {
+  mapId: UUID
+  characters: MapCharacter[]
+}

src/assets/scss/main.scss

@@ -31,6 +31,12 @@ body {
     @apply outline-offset-2;
     @apply rounded-sm;
   }
+
+  @media only screen and (orientation:portrait) and (max-width: 768px) {
+    .portrait-mode-notice {
+      @apply block;
+    }
+  }
 }
 
 h1,
@@ -146,7 +152,7 @@ button {
 }
 
 .character.active {
-  @apply bg-gray bg-none
+  @apply bg-gray bg-none;
 }
 
 .hair-deselect:has(:checked) {

src/components/forms/ChipsInput.vue

@@ -1,10 +1,10 @@
 <template>
-  <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">
+  <div class="flex flex-wrap items-center input-field gap-1" @click="focusInput">
+    <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">
       <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="deleteChip(i)" aria-label="Remove chip">×</button>
+      <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>
     </div>
-    <input class="outline-none border-none p-1 text-gray-300" placeholder="Tag name" v-model="currentInput" @keypress.enter.prevent="addChip" @keydown.backspace="handleBackspace" />
+    <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" />
   </div>
 </template>
 
@@ -14,20 +14,29 @@ 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) => {
@@ -36,9 +45,27 @@ 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 (trimmedInput && !internalValue.value.includes(trimmedInput)) {
+  if (validateChip(trimmedInput)) {
     internalValue.value.push(trimmedInput)
     emit('update:modelValue', internalValue.value)
     currentInput.value = ''
@@ -50,10 +77,36 @@ const deleteChip = (index: number) => {
   emit('update:modelValue', internalValue.value)
 }
 
-const handleBackspace = (event: KeyboardEvent) => {
-  if (event.key === 'Backspace' && currentInput.value === '' && internalValue.value.length > 0) {
-    internalValue.value.pop()
-    emit('update:modelValue', internalValue.value)
+const handleKeydown = (event: KeyboardEvent) => {
+  switch (event.key) {
+    case 'Enter':
+      event.preventDefault()
+      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,26 +1,23 @@
 <template>
-  <ChatBubble :zoneCharacter="props.zoneCharacter" :currentX="currentX" :currentY="currentY" />
-  <Healthbar :zoneCharacter="props.zoneCharacter" :currentX="currentX" :currentY="currentY" />
-  <Container ref="charContainer" :depth="isometricDepth" :x="currentX" :y="currentY">
-    <CharacterHair :zoneCharacter="props.zoneCharacter" :currentX="currentX" :currentY="currentY" />
-    <!--    <CharacterChest :zoneCharacter="props.zoneCharacter" :currentX="currentX" :currentY="currentY" />-->
+  <ChatBubble :mapCharacter="props.mapCharacter" :currentX="currentPositionX" :currentY="currentPositionY" />
+  <Healthbar :mapCharacter="props.mapCharacter" :currentX="currentPositionX" :currentY="currentPositionY" />
+  <Container ref="charContainer" :depth="isometricDepth" :x="currentPositionX" :y="currentPositionY">
     <Sprite ref="charSprite" :origin-y="1" :flipX="isFlippedX" />
   </Container>
 </template>
 
 <script lang="ts" setup>
 import config from '@/application/config'
-import { type Sprite as SpriteT, type ZoneCharacter } from '@/application/types'
-import { useGameStore } from '@/stores/gameStore'
-import { useZoneStore } from '@/stores/zoneStore'
-import { watch, computed, ref, onMounted, onUnmounted } from 'vue'
-import { Container, refObj, Sprite, useScene } from 'phavuer'
-import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
-import { loadSpriteTextures } from '@/composables/gameComposable'
+import { type MapCharacter } from '@/application/types'
 import ChatBubble from '@/components/game/character/partials/ChatBubble.vue'
 import Healthbar from '@/components/game/character/partials/Healthbar.vue'
-import CharacterHair from '@/components/game/character/partials/CharacterHair.vue'
-// import CharacterChest from '@/components/game/character/partials/CharacterChest.vue'
+import { loadSpriteTextures } from '@/composables/gameComposable'
+import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/mapComposable'
+import { CharacterTypeStorage } from '@/storage/storages'
+import { useGameStore } from '@/stores/gameStore'
+import { useMapStore } from '@/stores/mapStore'
+import { Container, refObj, Sprite, useScene } from 'phavuer'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 
 enum Direction {
   POSITIVE,
@@ -29,34 +26,35 @@ enum Direction {
 }
 
 const props = defineProps<{
-  layer: Phaser.Tilemaps.TilemapLayer
-  zoneCharacter: ZoneCharacter
+  tilemap: Phaser.Tilemaps.Tilemap
+  mapCharacter: MapCharacter
 }>()
 
 const charContainer = refObj<Phaser.GameObjects.Container>()
 const charSprite = refObj<Phaser.GameObjects.Sprite>()
+const charSpriteId = ref('')
 
 const gameStore = useGameStore()
-const zoneStore = useZoneStore()
+const mapStore = useMapStore()
 const scene = useScene()
 
-const currentX = ref(0)
-const currentY = ref(0)
+const currentPositionX = ref(0)
+const currentPositionY = ref(0)
 const isometricDepth = ref(1)
 const isInitialPosition = ref(true)
 const tween = ref<Phaser.Tweens.Tween | null>(null)
 
-const updateIsometricDepth = (x: number, y: number) => {
-  isometricDepth.value = calculateIsometricDepth(x, y, 28, 94, true)
+const updateIsometricDepth = (positionX: number, positionY: number) => {
+  isometricDepth.value = calculateIsometricDepth(positionX, positionY, 28, 94, true)
 }
 
-const updatePosition = (x: number, y: number, direction: Direction) => {
-  const targetX = tileToWorldX(props.layer, x, y)
-  const targetY = tileToWorldY(props.layer, x, y)
+const updatePosition = (positionX: number, positionY: number, direction: Direction) => {
+  const newPositionX = tileToWorldX(props.tilemap, positionX, positionY)
+  const newPositionY = tileToWorldY(props.tilemap, positionX, positionY)
 
   if (isInitialPosition.value) {
-    currentX.value = targetX
-    currentY.value = targetY
+    currentPositionX.value = newPositionX
+    currentPositionY.value = newPositionY
     isInitialPosition.value = false
     return
   }
@@ -65,102 +63,112 @@ const updatePosition = (x: number, y: number, direction: Direction) => {
     tween.value.stop()
   }
 
-  const distance = Math.sqrt(Math.pow(targetX - currentX.value, 2) + Math.pow(targetY - currentY.value, 2))
+  const distance = Math.sqrt(Math.pow(newPositionX - currentPositionX.value, 2) + Math.pow(newPositionY - currentPositionY.value, 2))
 
-  if (distance >= config.tile_size.x / 1.1) {
-    currentX.value = targetX
-    currentY.value = targetY
+  if (distance >= config.tile_size.width / 1.1) {
+    currentPositionX.value = newPositionX
+    currentPositionY.value = newPositionY
     return
   }
 
   const duration = distance * 5.7
 
-  tween.value = props.layer.scene.tweens.add({
-    targets: { x: currentX.value, y: currentY.value },
-    x: targetX,
-    y: targetY,
+  tween.value = props.tilemap.scene.tweens.add({
+    targets: { x: currentPositionX.value, y: currentPositionY.value },
+    x: newPositionX,
+    y: newPositionY,
     duration,
     ease: 'Linear',
     onStart: () => {
       if (direction === Direction.POSITIVE) {
-        updateIsometricDepth(x, y)
+        updateIsometricDepth(positionX, positionY)
       }
     },
     onUpdate: (tween) => {
-      currentX.value = tween.targets[0].x
-      currentY.value = tween.targets[0].y
+      // @ts-ignore
+      currentPositionX.value = tween.targets[0].x
+      // @ts-ignore
+      currentPositionY.value = tween.targets[0].y
     },
     onComplete: () => {
       if (direction === Direction.NEGATIVE) {
-        updateIsometricDepth(x, y)
+        updateIsometricDepth(positionX, positionY)
       }
     }
   })
 }
 
-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
+const calcDirection = (oldPositionX: number, oldPositionY: number, newPositionX: number, newPositionY: number): Direction => {
+  if (newPositionY < oldPositionY || newPositionX < oldPositionX) return Direction.NEGATIVE
+  if (newPositionX > oldPositionX || newPositionY > oldPositionY) return Direction.POSITIVE
   return Direction.UNCHANGED
 }
 
-const isFlippedX = computed(() => [6, 4].includes(props.zoneCharacter.character.rotation ?? 0))
+const isFlippedX = computed(() => [6, 4].includes(props.mapCharacter.character.rotation ?? 0))
 
 const charTexture = computed(() => {
-  const { rotation, characterType } = props.zoneCharacter.character
-  const spriteId = characterType?.sprite?.id ?? 'idle_right_down'
-  const action = props.zoneCharacter.isMoving ? 'walk' : 'idle'
-  const direction = [0, 6].includes(rotation) ? 'left_up' : 'right_down'
+  const spriteId = charSpriteId.value ?? 'idle_right_down'
+  const action = props.mapCharacter.isMoving ? 'walk' : 'idle'
+  const direction = [0, 6].includes(props.mapCharacter.character.rotation) ? 'left_up' : 'right_down'
 
   return `${spriteId}-${action}_${direction}`
 })
 
 const updateSprite = () => {
-  if (props.zoneCharacter.isMoving) {
+  if (props.mapCharacter.isMoving) {
     charSprite.value!.anims.play(charTexture.value, true)
-    return
+  } else {
+    charSprite.value!.anims.stop()
+    charSprite.value!.setFrame(0)
+    charSprite.value!.setTexture(charTexture.value)
   }
-
-  charSprite.value!.anims.stop()
-  charSprite.value!.setFrame(0)
-  charSprite.value!.setTexture(charTexture.value)
 }
 
 watch(
-  () => props.zoneCharacter.character,
-  (newChar, oldChar) => {
-    if (!newChar) return
+  () => ({
+    positionX: props.mapCharacter.character.positionX,
+    positionY: props.mapCharacter.character.positionY,
+    isMoving: props.mapCharacter.isMoving,
+    rotation: props.mapCharacter.character.rotation
+  }),
+  (newValues, oldValues) => {
+    if (!newValues) return
 
-    if (!oldChar || newChar.positionX !== oldChar.positionX || newChar.positionY !== oldChar.positionY) {
-      const direction = !oldChar ? Direction.POSITIVE : calcDirection(oldChar.positionX, oldChar.positionY, newChar.positionX, newChar.positionY)
-      updatePosition(newChar.positionX, newChar.positionY, direction)
+    if (!oldValues || newValues.positionX !== oldValues.positionX || newValues.positionY !== oldValues.positionY) {
+      const direction = !oldValues ? Direction.POSITIVE : calcDirection(oldValues.positionX, oldValues.positionY, newValues.positionX, newValues.positionY)
+      updatePosition(newValues.positionX, newValues.positionY, direction)
+    }
+
+    // Handle animation updates
+    if (newValues.isMoving !== oldValues?.isMoving || newValues.rotation !== oldValues?.rotation) {
+      updateSprite()
     }
   }
 )
 
-watch(() => props.zoneCharacter, updateSprite)
+onMounted(async () => {
+  const characterTypeStorage = new CharacterTypeStorage()
 
-loadSpriteTextures(scene, props.zoneCharacter.character.characterType?.sprite as SpriteT)
-  .then(() => {
-    charSprite.value!.setTexture(charTexture.value)
-    charSprite.value!.setFlipX(isFlippedX.value)
-  })
-  .catch((error) => {
-    console.error('Error loading texture:', error)
-  })
+  const spriteId = await characterTypeStorage.getSpriteId(props.mapCharacter.character.characterType!)
+  if (!spriteId) return
 
-onMounted(() => {
-  charContainer.value!.setName(props.zoneCharacter.character!.name)
+  charSpriteId.value = spriteId
 
-  if (props.zoneCharacter.character.id === gameStore.character!.id) {
-    zoneStore.setCharacterLoaded(true)
+  await loadSpriteTextures(scene, spriteId)
+
+  charSprite.value!.setTexture(charTexture.value)
+  charSprite.value!.setFlipX(isFlippedX.value)
+
+  charContainer.value!.setName(props.mapCharacter.character!.name)
+
+  if (props.mapCharacter.character.id === gameStore.character!.id) {
+    mapStore.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()
+    scene.cameras.main.startFollow(charContainer.value as Phaser.GameObjects.Container)
   }
 
-  updatePosition(props.zoneCharacter.character.positionX, props.zoneCharacter.character.positionY, props.zoneCharacter.character.rotation)
+  updatePosition(props.mapCharacter.character.positionX, props.mapCharacter.character.positionY, props.mapCharacter.character.rotation)
 })
 
 onUnmounted(() => {

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

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

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

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

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

@@ -6,12 +6,12 @@
 </template>
 
 <script setup lang="ts">
+import type { MapCharacter } from '@/application/types'
 import { Container, refObj, RoundRectangle, Text, useGame } from 'phavuer'
-import type { ZoneCharacter } from '@/application/types'
 import { onMounted } from 'vue'
 
 const props = defineProps<{
-  zoneCharacter: ZoneCharacter
+  mapCharacter: MapCharacter
   currentX: number
   currentY: number
 }>()
@@ -20,14 +20,15 @@ const game = useGame()
 const charChatContainer = refObj<Phaser.GameObjects.Container>()
 
 const createChatBubble = (container: Phaser.GameObjects.Container) => {
-  container.setName(`${props.zoneCharacter.character.name}_chatBubble`)
+  container.setName(`${props.mapCharacter.character.name}_chatBubble`)
 }
 
 const createChatText = (text: Phaser.GameObjects.Text) => {
-  text.setName(`${props.zoneCharacter.character.name}_chatText`)
+  text.setName(`${props.mapCharacter.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) {
@@ -40,7 +41,7 @@ const createChatText = (text: Phaser.GameObjects.Text) => {
 }
 
 onMounted(() => {
-  charChatContainer.value!.setName(`${props.zoneCharacter.character!.name}_chatContainer`)
+  charChatContainer.value!.setName(`${props.mapCharacter.character!.name}_chatContainer`)
   charChatContainer.value!.setVisible(false)
 })
 </script>

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

@@ -1,17 +1,17 @@
 <template>
   <Container :depth="999" :x="currentX" :y="currentY">
-    <Text @create="createNicknameText" :text="props.zoneCharacter.character.name" />
+    <Text @create="createNicknameText" :text="props.mapCharacter.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 { Container, RoundRectangle, Text, useGame } from 'phavuer'
-import type { ZoneCharacter } from '@/application/types'
 
 const props = defineProps<{
-  zoneCharacter: ZoneCharacter
+  mapCharacter: MapCharacter
   currentX: number
   currentY: number
 }>()
@@ -22,6 +22,7 @@ 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/gui/CharacterProfile.vue

@@ -118,8 +118,8 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref, watch, computed } from 'vue'
 import { useGameStore } from '@/stores/gameStore'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 
 const gameStore = useGameStore()
 

src/components/game/gui/Chat.vue

@@ -21,16 +21,16 @@
 </template>
 
 <script setup lang="ts">
-import { onBeforeUnmount, ref, nextTick, onMounted } from 'vue'
-import { onClickOutside, useFocus } from '@vueuse/core'
-import { useGameStore } from '@/stores/gameStore'
 import type { Chat } from '@/application/types'
-import { useZoneStore } from '@/stores/zoneStore'
+import { useGameStore } from '@/stores/gameStore'
+import { useMapStore } from '@/stores/mapStore'
+import { onClickOutside, useFocus } from '@vueuse/core'
 import { useScene } from 'phavuer'
+import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
 
 const scene = useScene()
 const gameStore = useGameStore()
-const zoneStore = useZoneStore()
+const mapStore = useMapStore()
 
 const message = ref('')
 const chats = ref([] as Chat[])
@@ -83,7 +83,7 @@ gameStore.connection?.on('chat:message', (data: Chat) => {
   chats.value.push(data)
   scrollToBottom()
 
-  if (!zoneStore.characterLoaded) return
+  if (!mapStore.characterLoaded) return
 
   const charChatContainer = scene.children.getByName(data.character.name + '_chatContainer') as Phaser.GameObjects.Container
   if (!charChatContainer) return

src/components/game/gui/UserPanel.vue

@@ -30,12 +30,12 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import CharacterScreen from '@/components/game/gui/partials/CharacterScreen.vue'
+import Equipment from '@/components/game/gui/partials/Equipment.vue'
+import Inventory from '@/components/game/gui/partials/Inventory.vue'
+import Settings from '@/components/game/gui/partials/Settings.vue'
 import { useGameStore } from '@/stores/gameStore'
-import Inventory from '@/components/gui/partials/Inventory.vue'
-import Equipment from '@/components/gui/partials/Equipment.vue'
-import CharacterScreen from '@/components/gui/partials/CharacterScreen.vue'
-import Settings from '@/components/gui/partials/Settings.vue'
+import { ref } from 'vue'
 
 const gameStore = useGameStore()
 let userPanelScreen = ref('inventory')

src/components/game/gui/partials/Settings.vue

@@ -33,8 +33,8 @@
 </template>
 
 <script setup lang="ts">
+import CharacterSettings from '@/components/game/gui/partials/settings/CharacterSettings.vue'
 import { ref } from 'vue'
-import CharacterSettings from '@/components/gui/partials/settings/CharacterSettings.vue'
 
 let settingCategory = ref('character')
 </script>

src/components/game/map/Characters.vue

@@ -0,0 +1,14 @@
+<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/Effects.vue

@@ -3,11 +3,12 @@
 </template>
 
 <script setup lang="ts">
-import { Scene } from 'phavuer'
-import { useZoneStore } from '@/stores/zoneStore'
+import type { Map, WeatherState } from '@/application/types'
+import { MapStorage } from '@/storage/storages'
 import { useGameStore } from '@/stores/gameStore'
+import { useMapStore } from '@/stores/mapStore'
+import { Scene } from 'phavuer'
 import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import type { WeatherState } from '@/application/types'
 
 // Constants
 const LIGHT_CONFIG = {
@@ -19,9 +20,11 @@ const LIGHT_CONFIG = {
 
 // Stores and refs
 const gameStore = useGameStore()
-const zoneStore = useZoneStore()
+const mapStore = useMapStore()
+const mapStorage = new MapStorage()
 const sceneRef = ref<Phaser.Scene | null>(null)
-const zoneEffectsReady = ref(false)
+const mapEffectsReady = ref(false)
+const mapObject = ref<Map | null>(null)
 
 // Effect objects
 const effects = {
@@ -50,6 +53,24 @@ const createScene = (scene: Phaser.Scene) => {
   setupSocketListeners()
 }
 
+const loadMap = async () => {
+  if (!mapStore.mapId) return
+  mapObject.value = await mapStorage.get(mapStore.mapId)
+}
+
+// Watch for mapId changes and load map when it's available
+watch(
+  () => mapStore.mapId,
+  async (newMapId) => {
+    if (newMapId) {
+      mapEffectsReady.value = false
+      await loadMap()
+      updateScene()
+    }
+  },
+  { immediate: true }
+)
+
 const initializeEffects = (scene: Phaser.Scene) => {
   // Light
   effects.light.value = scene.add.graphics().setDepth(1000)
@@ -80,7 +101,7 @@ const initializeEffects = (scene: Phaser.Scene) => {
 // Effect updates
 const updateScene = () => {
   const timeBasedLight = calculateLightStrength(gameStore.world.date)
-  const zoneEffects = zoneStore.zone?.zoneEffects?.reduce(
+  const mapEffects = mapObject.value?.mapEffects?.reduce(
     (acc, curr) => ({
       ...acc,
       [curr.effect]: curr.strength
@@ -88,24 +109,23 @@ const updateScene = () => {
     {}
   ) as { [key: string]: number }
 
-  // Only update effects once zoneEffects are loaded
-  if (!zoneEffectsReady.value) {
-    if (zoneEffects && Object.keys(zoneEffects).length) {
-      zoneEffectsReady.value = true
+  // Only update effects once mapEffects are loaded
+  if (!mapEffectsReady.value) {
+    if (mapObject.value) {
+      mapEffectsReady.value = true
     } else {
       return
     }
   }
 
   const finalEffects =
-    zoneEffects && Object.keys(zoneEffects).length
-      ? zoneEffects
+    mapEffects && Object.keys(mapEffects).length
+      ? mapEffects
       : {
           light: timeBasedLight,
           rain: weatherState.value.isRainEnabled ? weatherState.value.rainPercentage : 0,
           fog: weatherState.value.isFogEnabled ? weatherState.value.fogDensity * 100 : 0
         }
-
   applyEffects(finalEffects)
 }
 
@@ -161,9 +181,9 @@ const handleResize = () => {
 
 // Lifecycle
 watch(
-  () => zoneStore.zone,
+  () => mapObject.value,
   () => {
-    zoneEffectsReady.value = false
+    mapEffectsReady.value = false
     updateScene()
   },
   { deep: true }

src/components/game/map/Map.vue

@@ -0,0 +1,46 @@
+<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:move', (data: { characterId: UUID; positionX: number; positionY: number; rotation: number; isMoving: boolean }) => {
+  mapStore.updateCharacterPosition(data)
+})
+
+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

@@ -0,0 +1,73 @@
+<template>
+  <Controls v-if="tileLayer" :layer="tileLayer" :depth="0" />
+</template>
+
+<script setup lang="ts">
+import config from '@/application/config'
+import type { UUID } from '@/application/types'
+import { unduplicateArray } from '@/application/utilities'
+import Controls from '@/components/utilities/Controls.vue'
+import { FlattenMapArray, 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(mapData: any) {
+  const mapConfig = new Phaser.Tilemaps.MapData({
+    width: mapData?.width,
+    height: mapData?.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(FlattenMapArray(mapData?.tiles ?? []))
+
+  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) => {
+    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

@@ -0,0 +1,28 @@
+<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

@@ -0,0 +1,43 @@
+<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

@@ -1,14 +0,0 @@
-<template>
-  <Character v-for="item in zoneStore.characters" :key="item.character.id" :layer="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

@@ -1,50 +0,0 @@
-<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 { ref, onUnmounted, onMounted, onBeforeMount } from 'vue'
-import { useScene } from 'phavuer'
-import { useGameStore } from '@/stores/gameStore'
-import { useZoneStore } from '@/stores/zoneStore'
-import { loadZoneTilesIntoScene } from '@/composables/zoneComposable'
-import type { Zone as ZoneT, ZoneCharacter, zoneLoadData } from '@/application/types'
-import ZoneTiles from '@/components/game/zone/ZoneTiles.vue'
-import ZoneObjects from '@/components/game/zone/ZoneObjects.vue'
-import Characters from '@/components/game/zone/Characters.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, 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: { id: number; positionX: number; positionY: number; rotation: number; isMoving: boolean }) => {
-  zoneStore.updateCharacterPosition(data)
-})
-</script>

src/components/game/zone/ZoneObjects.vue

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

src/components/game/zone/ZoneTiles.vue

@@ -1,69 +0,0 @@
-<template>
-  <Controls :layer="tileLayer" :depth="0" />
-</template>
-
-<script setup lang="ts">
-import config from '@/application/config'
-import { useScene } from 'phavuer'
-import { useZoneStore } from '@/stores/zoneStore'
-import { onBeforeUnmount } from 'vue'
-import { FlattenZoneArray, setLayerTiles } from '@/composables/zoneComposable'
-import Controls from '@/components/utilities/Controls.vue'
-import { unduplicateArray } from '@/application/utilities'
-
-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

@@ -1,41 +0,0 @@
-<template>
-  <Image v-if="gameStore.getLoadedAsset(props.zoneObject.object.id)" v-bind="imageProps" />
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { Image, useScene } from 'phavuer'
-import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
-import { loadTexture } from '@/composables/gameComposable'
-import type { AssetDataT, ZoneObject } from '@/application/types'
-import { useGameStore } from '@/stores/gameStore'
-
-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="() => zoneEditorStore.toggleActive()">Map editor</button>
+        <button class="btn-cyan py-1.5 px-4 min-w-24" type="button" @click="() => mapEditorStore.toggleActive()">Map editor</button>
       </div>
     </template>
     <template #modalBody>
@@ -18,14 +18,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import Modal from '@/components/utilities/Modal.vue'
 import AssetManager from '@/components/gameMaster/assetManager/AssetManager.vue'
+import Modal from '@/components/utilities/Modal.vue'
 import { useGameStore } from '@/stores/gameStore'
-import { useZoneEditorStore } from '@/stores/zoneEditorStore'
+import { useMapEditorStore } from '@/stores/mapEditorStore'
+import { ref } from 'vue'
 
 const gameStore = useGameStore()
-const zoneEditorStore = useZoneEditorStore()
+const mapEditorStore = useMapEditorStore()
 
 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 === 'objects' }" @click="() => (selectedCategory = 'objects')">
-        <span class="group-hover:text-white" :class="{ 'text-white': selectedCategory === 'objects' }">Objects</span>
+      <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group" :class="{ 'bg-cyan': selectedCategory === 'map_objects' }" @click="() => (selectedCategory = 'map_objects')">
+        <span class="group-hover:text-white" :class="{ 'text-white': selectedCategory === 'map_objects' }">Map 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'" />
-      <ObjectList v-if="selectedCategory === 'objects'" />
+      <MapObjectList v-if="selectedCategory === 'map_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" />
-      <ObjectDetails v-if="selectedCategory === 'objects' && assetManagerStore.selectedObject" />
+      <MapObjectDetails v-if="selectedCategory === 'map_objects' && assetManagerStore.selectedMapObject" />
       <SpriteDetails v-if="selectedCategory === 'sprites' && assetManagerStore.selectedSprite" />
       <ItemDetails v-if="selectedCategory === 'items' && assetManagerStore.selectedItem" />
       <CharacterTypeDetails v-if="selectedCategory === 'characterTypes' && assetManagerStore.selectedCharacterType" />
@@ -60,20 +60,20 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import { useAssetManagerStore } from '@/stores/assetManagerStore'
-import TileList from '@/components/gameMaster/assetManager/partials/tile/TileList.vue'
-import TileDetails from '@/components/gameMaster/assetManager/partials/tile/TileDetails.vue'
-import ObjectList from '@/components/gameMaster/assetManager/partials/object/ObjectList.vue'
-import ObjectDetails from '@/components/gameMaster/assetManager/partials/object/ObjectDetails.vue'
-import SpriteList from '@/components/gameMaster/assetManager/partials/sprite/SpriteList.vue'
-import SpriteDetails from '@/components/gameMaster/assetManager/partials/sprite/SpriteDetails.vue'
-import CharacterTypeList from '@/components/gameMaster/assetManager/partials/characterType/CharacterTypeList.vue'
-import CharacterTypeDetails from '@/components/gameMaster/assetManager/partials/characterType/CharacterTypeDetails.vue'
-import CharacterHairList from '@/components/gameMaster/assetManager/partials/characterHair/CharacterHairList.vue'
 import CharacterHairDetails from '@/components/gameMaster/assetManager/partials/characterHair/CharacterHairDetails.vue'
-import ItemList from '@/components/gameMaster/assetManager/partials/item/itemList.vue'
+import CharacterHairList from '@/components/gameMaster/assetManager/partials/characterHair/CharacterHairList.vue'
+import CharacterTypeDetails from '@/components/gameMaster/assetManager/partials/characterType/CharacterTypeDetails.vue'
+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 MapObjectList from '@/components/gameMaster/assetManager/partials/mapObject/MapObjectList.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'
+import TileList from '@/components/gameMaster/assetManager/partials/tile/TileList.vue'
+import { useAssetManagerStore } from '@/stores/assetManagerStore'
+import { ref } from 'vue'
 
 const assetManagerStore = useAssetManagerStore()
 const selectedCategory = ref('tiles')

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

@@ -34,10 +34,10 @@
 </template>
 
 <script setup lang="ts">
-import type { CharacterHair, CharacterGender, Sprite } from '@/application/types'
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import type { CharacterGender, CharacterHair, Sprite } from '@/application/types'
 import { useAssetManagerStore } from '@/stores/assetManagerStore'
 import { useGameStore } from '@/stores/gameStore'
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 const gameStore = useGameStore()
 const assetManagerStore = useAssetManagerStore()
@@ -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.spriteId
+  characterSpriteId.value = selectedCharacterHair.value.sprite?.id
 }
 
 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.spriteId
+  characterSpriteId.value = characterHair.sprite?.id
 })
 
 onMounted(() => {

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

@@ -9,8 +9,8 @@
       </button>
     </label>
   </div>
-  <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">
+  <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="wrapperProps" ref="elementToScroll" class="flex flex-col gap-2.5">
       <a
         v-for="{ data: characterHair } in list"
         :key="characterHair.id"
@@ -25,18 +25,18 @@
     </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/zoneEditor/chevron.svg" alt="" />
+        <img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/mapEditor/chevron.svg" alt="" />
       </button>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { useGameStore } from '@/stores/gameStore'
-import { onMounted, ref, computed } from 'vue'
-import { useAssetManagerStore } from '@/stores/assetManagerStore'
 import type { CharacterHair } from '@/application/types'
+import { useAssetManagerStore } from '@/stores/assetManagerStore'
+import { useGameStore } from '@/stores/gameStore'
 import { useVirtualList } from '@vueuse/core'
+import { computed, onMounted, ref } from 'vue'
 
 const gameStore = useGameStore()
 const assetManagerStore = useAssetManagerStore()

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

@@ -40,10 +40,10 @@
 </template>
 
 <script setup lang="ts">
-import type { CharacterType, CharacterGender, CharacterRace, Sprite } from '@/application/types'
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import type { CharacterGender, CharacterRace, CharacterType, Sprite } from '@/application/types'
 import { useAssetManagerStore } from '@/stores/assetManagerStore'
 import { useGameStore } from '@/stores/gameStore'
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 const gameStore = useGameStore()
 const assetManagerStore = useAssetManagerStore()
@@ -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.spriteId
+  characterSpriteId.value = selectedCharacterType.value.sprite?.id
 }
 
 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.spriteId
+  characterSpriteId.value = characterType.sprite?.id
 })
 
 onMounted(() => {

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

@@ -9,8 +9,8 @@
       </button>
     </label>
   </div>
-  <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">
+  <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="wrapperProps" ref="elementToScroll" class="flex flex-col gap-2.5">
       <a
         v-for="{ data: characterType } in list"
         :key="characterType.id"
@@ -25,18 +25,18 @@
     </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/zoneEditor/chevron.svg" alt="" />
+        <img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/mapEditor/chevron.svg" alt="" />
       </button>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { useGameStore } from '@/stores/gameStore'
-import { onMounted, ref, computed } from 'vue'
-import { useAssetManagerStore } from '@/stores/assetManagerStore'
 import type { CharacterType } from '@/application/types'
+import { useAssetManagerStore } from '@/stores/assetManagerStore'
+import { useGameStore } from '@/stores/gameStore'
 import { useVirtualList } from '@vueuse/core'
+import { computed, onMounted, ref } from 'vue'
 
 const gameStore = useGameStore()
 const assetManagerStore = useAssetManagerStore()

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

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

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

@@ -9,8 +9,8 @@
       </button>
     </label>
   </div>
-  <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">
+  <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="wrapperProps" ref="elementToScroll" class="flex flex-col gap-2.5">
       <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,18 +22,18 @@
     </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/zoneEditor/chevron.svg" alt="" />
+        <img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/mapEditor/chevron.svg" alt="" />
       </button>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { useGameStore } from '@/stores/gameStore'
-import { onMounted, ref, computed } from 'vue'
-import { useAssetManagerStore } from '@/stores/assetManagerStore'
 import type { Item } from '@/application/types'
+import { useAssetManagerStore } from '@/stores/assetManagerStore'
+import { useGameStore } from '@/stores/gameStore'
 import { useVirtualList } from '@vueuse/core'
+import { computed, onMounted, ref } from 'vue'
 
 const gameStore = useGameStore()
 const assetManagerStore = useAssetManagerStore()

src/components/gameMaster/assetManager/partials/mapObject/MapObjectDetails.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}/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="is-animated">Is animated</label>
+          <select v-model="mapObjectIsAnimated" 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="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 { useMapEditorStore } from '@/stores/mapEditorStore'
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
+const gameStore = useGameStore()
+const assetManagerStore = useAssetManagerStore()
+const mapEditorStore = useMapEditorStore()
+
+const selectedMapObject = computed(() => assetManagerStore.selectedMapObject)
+
+const mapObjectName = ref('')
+const mapObjectTags = ref<string[]>([])
+const mapObjectOriginX = ref(0)
+const mapObjectOriginY = ref(0)
+const mapObjectIsAnimated = ref(false)
+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
+  mapObjectIsAnimated.value = selectedMapObject.value.isAnimated
+  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)
+    }
+
+    if (mapEditorStore.active) {
+      mapEditorStore.setMapObjectList(response)
+    }
+  })
+}
+
+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,
+      isAnimated: mapObjectIsAnimated.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
+  mapObjectIsAnimated.value = mapObject.isAnimated
+  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/mapObject/MapObjectList.vue

@@ -8,20 +8,20 @@
       </svg>
     </label>
   </div>
-  <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">
-      <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 v-bind="containerProps" class="flex-1 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">
+      <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)">
         <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}/assets/objects/${object.id}.png`" alt="Object" />
+            <img class="h-7" :src="`${config.server_endpoint}/textures/map_objects/${mapObject.id}.png`" alt="Object" />
           </div>
-          <span :class="{ 'text-white': assetManagerStore.selectedObject?.id === object.id }">{{ object.name }}</span>
+          <span :class="{ 'text-white': assetManagerStore.selectedMapObject?.id === mapObject.id }">{{ mapObject.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/zoneEditor/chevron.svg" alt="" />
+        <img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/mapEditor/chevron.svg" alt="" />
       </button>
     </div>
   </div>
@@ -29,11 +29,11 @@
 
 <script setup lang="ts">
 import config from '@/application/config'
-import { useGameStore } from '@/stores/gameStore'
-import { onMounted, ref, computed } from 'vue'
+import type { MapObject } from '@/application/types'
 import { useAssetManagerStore } from '@/stores/assetManagerStore'
-import type { Object } from '@/application/types'
+import { useGameStore } from '@/stores/gameStore'
 import { useVirtualList } from '@vueuse/core'
+import { computed, onMounted, ref } from 'vue'
 
 const gameStore = useGameStore()
 const objectUploadField = ref(null)
@@ -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:object:upload', files, (response: boolean) => {
+  gameStore.connection?.emit('gm:mapObject:upload', files, (response: boolean) => {
     if (!response) {
       if (config.development) console.error('Failed to upload object')
       return
     }
 
-    gameStore.connection?.emit('gm:object:list', {}, (response: Object[]) => {
-      assetManagerStore.setObjectList(response)
+    gameStore.connection?.emit('gm:mapObject:list', {}, (response: MapObject[]) => {
+      assetManagerStore.setMapObjectList(response)
     })
   })
 }
@@ -66,9 +66,9 @@ const handleSearch = () => {
 
 const filteredObjects = computed(() => {
   if (!searchQuery.value) {
-    return assetManagerStore.objectList
+    return assetManagerStore.mapObjectList
   }
-  return assetManagerStore.objectList.filter((object) => object.name.toLowerCase().includes(searchQuery.value.toLowerCase()))
+  return assetManagerStore.mapObjectList.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:object:list', {}, (response: Object[]) => {
-    assetManagerStore.setObjectList(response)
+  gameStore.connection?.emit('gm:mapObject:list', {}, (response: MapObject[]) => {
+    assetManagerStore.setMapObjectList(response)
   })
 })
 </script>

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

@@ -1,163 +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}/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 type { Object } from '@/application/types'
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { useAssetManagerStore } from '@/stores/assetManagerStore'
-import { useZoneEditorStore } from '@/stores/zoneEditorStore'
-import { useGameStore } from '@/stores/gameStore'
-import config from '@/application/config'
-import ChipsInput from '@/components/forms/ChipsInput.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/sprite/SpriteDetails.vue

@@ -70,12 +70,12 @@
 
 <script setup lang="ts">
 import type { Sprite, SpriteAction } from '@/application/types'
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { uuidv4 } from '@/application/utilities'
+import SpriteActionsInput from '@/components/gameMaster/assetManager/partials/sprite/partials/SpriteImagesInput.vue'
+import Accordion from '@/components/utilities/Accordion.vue'
 import { useAssetManagerStore } from '@/stores/assetManagerStore'
 import { useGameStore } from '@/stores/gameStore'
-import Accordion from '@/components/utilities/Accordion.vue'
-import SpriteActionsInput from '@/components/gameMaster/assetManager/partials/sprite/partials/SpriteImagesInput.vue'
-import { uuidv4 } from '@/application/utilities'
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 const gameStore = useGameStore()
 const assetManagerStore = useAssetManagerStore()
@@ -184,6 +184,7 @@ function addNewImage() {
 }
 
 function sortSpriteActions(actions: SpriteAction[]): SpriteAction[] {
+  if (!actions) return []
   return [...actions].sort((a, b) => a.action.localeCompare(b.action))
 }
 

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

@@ -7,8 +7,8 @@
       </svg>
     </button>
   </div>
-  <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">
+  <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="wrapperProps" ref="elementToScroll" class="flex flex-col gap-2.5">
       <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/zoneEditor/chevron.svg" alt="" />
+        <img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/mapEditor/chevron.svg" alt="" />
       </button>
     </div>
   </div>
@@ -25,11 +25,11 @@
 
 <script setup lang="ts">
 import config from '@/application/config'
-import { useGameStore } from '@/stores/gameStore'
-import { onMounted, ref, computed } from 'vue'
-import { useAssetManagerStore } from '@/stores/assetManagerStore'
-import { useVirtualList } from '@vueuse/core'
 import type { Sprite } from '@/application/types'
+import { useAssetManagerStore } from '@/stores/assetManagerStore'
+import { useGameStore } from '@/stores/gameStore'
+import { useVirtualList } from '@vueuse/core'
+import { computed, onMounted, ref } from 'vue'
 
 const gameStore = useGameStore()
 const assetManagerStore = useAssetManagerStore()

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}/assets/tiles/${selectedTile?.id}.png`" :alt="'Tile ' + selectedTile?.id" />
+      <img class="max-h-72" :src="`${config.server_endpoint}/textures/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">
@@ -23,17 +23,17 @@
 </template>
 
 <script setup lang="ts">
-import type { Tile } from '@/application/types'
-import { computed, onBeforeUnmount, onMounted, ref, toRaw, watch } from 'vue'
-import { useAssetManagerStore } from '@/stores/assetManagerStore'
-import { useZoneEditorStore } from '@/stores/zoneEditorStore'
-import { useGameStore } from '@/stores/gameStore'
 import config from '@/application/config'
+import type { Tile } from '@/application/types'
 import ChipsInput from '@/components/forms/ChipsInput.vue'
+import { useAssetManagerStore } from '@/stores/assetManagerStore'
+import { useGameStore } from '@/stores/gameStore'
+import { useMapEditorStore } from '@/stores/mapEditorStore'
+import { computed, onBeforeUnmount, onMounted, ref, toRaw, watch } from 'vue'
 
 const gameStore = useGameStore()
 const assetManagerStore = useAssetManagerStore()
-const zoneEditorStore = useZoneEditorStore()
+const mapEditorStore = useMapEditorStore()
 
 const selectedTile = computed(() => assetManagerStore.selectedTile)
 
@@ -73,8 +73,8 @@ function refreshTileList(unsetSelectedTile = true) {
       assetManagerStore.setSelectedTile(null)
     }
 
-    if (zoneEditorStore.active) {
-      zoneEditorStore.setTileList(response)
+    if (mapEditorStore.active) {
+      mapEditorStore.setTileList(response)
     }
   })
 }

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

@@ -8,12 +8,12 @@
       </svg>
     </label>
   </div>
-  <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">
+  <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="wrapperProps" ref="elementToScroll" class="flex flex-col gap-2.5">
       <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}/assets/tiles/${tile.id}.png`" alt="Tile" />
+            <img class="h-7" :src="`${config.server_endpoint}/textures/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/zoneEditor/chevron.svg" alt="" />
+        <img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/mapEditor/chevron.svg" alt="" />
       </button>
     </div>
   </div>
@@ -29,11 +29,11 @@
 
 <script setup lang="ts">
 import config from '@/application/config'
-import { useGameStore } from '@/stores/gameStore'
-import { onMounted, ref, computed } from 'vue'
-import { useAssetManagerStore } from '@/stores/assetManagerStore'
 import type { Tile } from '@/application/types'
+import { useAssetManagerStore } from '@/stores/assetManagerStore'
+import { useGameStore } from '@/stores/gameStore'
 import { useVirtualList } from '@vueuse/core'
+import { computed, onMounted, ref } from 'vue'
 
 const gameStore = useGameStore()
 const tileUploadField = ref(null)

src/components/gameMaster/mapEditor/MapEditor.vue

@@ -0,0 +1,72 @@
+<template>
+  <MapTiles @tileMap:create="tileMap = $event" />
+  <PlacedMapObjects v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
+  <MapEventTiles v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
+
+  <Toolbar @save="save" @clear="clear" />
+
+  <MapList />
+  <TileList />
+  <ObjectList />
+
+  <MapSettings />
+  <TeleportModal />
+</template>
+
+<script setup lang="ts">
+import { type Map } from '@/application/types'
+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 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 { useGameStore } from '@/stores/gameStore'
+import { useMapEditorStore } from '@/stores/mapEditorStore'
+import { onUnmounted, shallowRef } from 'vue'
+
+const gameStore = useGameStore()
+const mapEditorStore = useMapEditorStore()
+
+const tileMap = shallowRef<Phaser.Tilemaps.Tilemap>()
+
+function clear() {
+  if (!mapEditorStore.map) return
+
+  // Clear objects, event tiles and tiles
+  mapEditorStore.map.placedMapObjects = []
+  mapEditorStore.map.mapEventTiles = []
+  mapEditorStore.triggerClearTiles()
+}
+
+function save() {
+  if (!mapEditorStore.map) return
+
+  const data = {
+    mapId: mapEditorStore.map.id,
+    name: mapEditorStore.mapSettings.name,
+    width: mapEditorStore.mapSettings.width,
+    height: mapEditorStore.mapSettings.height,
+    tiles: mapEditorStore.map.tiles,
+    pvp: mapEditorStore.map.pvp,
+    mapEffects: mapEditorStore.map.mapEffects?.map(({ id, effect, strength }) => ({ id, effect, strength })) ?? [],
+    mapEventTiles: mapEditorStore.map.mapEventTiles?.map(({ id, type, positionX, positionY, teleport }) => ({ id, type, positionX, positionY, teleport })) ?? [],
+    placedMapObjects: mapEditorStore.map.placedMapObjects?.map(({ id, mapObject, depth, isRotated, positionX, positionY }) => ({ id, mapObject, depth, isRotated, positionX, positionY })) ?? []
+  }
+
+  if (mapEditorStore.isSettingsModalShown) {
+    mapEditorStore.toggleSettingsModal()
+  }
+
+  gameStore.connection?.emit('gm:map:update', data, (response: Map) => {
+    mapEditorStore.setMap(response)
+  })
+}
+
+onUnmounted(() => {
+  mapEditorStore.reset()
+})
+</script>

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

@@ -1,23 +1,23 @@
 <template>
-  <Image v-for="tile in zoneEditorStore.zone?.zoneEventTiles" v-bind="getImageProps(tile)" />
+  <Image v-for="tile in mapEditorStore.map?.mapEventTiles" v-bind="getImageProps(tile)" />
 </template>
 
 <script setup lang="ts">
-import { type ZoneEventTile, ZoneEventTileType } from '@/application/types'
-import { useZoneEditorStore } from '@/stores/zoneEditorStore'
-import { Image, useScene } from 'phavuer'
-import { getTile, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
+import { MapEventTileType, type MapEventTile } from '@/application/types'
 import { uuidv4 } from '@/application/utilities'
+import { getTile, tileToWorldX, tileToWorldY } from '@/composables/mapComposable'
+import { useMapEditorStore } from '@/stores/mapEditorStore'
+import { Image, useScene } from 'phavuer'
 import { onMounted, onUnmounted } from 'vue'
 
 const scene = useScene()
-const zoneEditorStore = useZoneEditorStore()
+const mapEditorStore = useMapEditorStore()
 
 const props = defineProps<{
   tilemap: Phaser.Tilemaps.Tilemap
 }>()
 
-function getImageProps(tile: ZoneEventTile) {
+function getImageProps(tile: MapEventTile) {
   return {
     x: tileToWorldX(props.tilemap, tile.positionX, tile.positionY),
     y: tileToWorldY(props.tilemap, tile.positionX, tile.positionY),
@@ -27,14 +27,14 @@ function getImageProps(tile: ZoneEventTile) {
 }
 
 function pencil(pointer: Phaser.Input.Pointer) {
-  // Check if zone is set
-  if (!zoneEditorStore.zone) return
+  // Check if map is set
+  if (!mapEditorStore.map) return
 
   // Check if tool is pencil
-  if (zoneEditorStore.tool !== 'pencil') return
+  if (mapEditorStore.tool !== 'pencil') return
 
   // Check if draw mode is blocking tile or teleport
-  if (zoneEditorStore.drawMode !== 'blocking tile' && zoneEditorStore.drawMode !== 'teleport') return
+  if (mapEditorStore.drawMode !== 'blocking tile' && mapEditorStore.drawMode !== 'teleport') return
 
   // Check if left mouse button is pressed
   if (!pointer.isDown) return
@@ -47,42 +47,42 @@ function pencil(pointer: Phaser.Input.Pointer) {
   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)
+  const existingEventTile = mapEditorStore.map.mapEventTiles.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
+  // If teleport, check if there is a selected map
+  if (mapEditorStore.drawMode === 'teleport' && !mapEditorStore.teleportSettings.toMap) return
 
   const newEventTile = {
     id: uuidv4(),
-    zoneId: zoneEditorStore.zone.id,
-    zone: zoneEditorStore.zone,
-    type: zoneEditorStore.drawMode === 'blocking tile' ? ZoneEventTileType.BLOCK : ZoneEventTileType.TELEPORT,
+    mapId: mapEditorStore.map.id,
+    map: mapEditorStore.map,
+    type: mapEditorStore.drawMode === 'blocking tile' ? MapEventTileType.BLOCK : MapEventTileType.TELEPORT,
     positionX: tile.x,
     positionY: tile.y,
     teleport:
-      zoneEditorStore.drawMode === 'teleport'
+      mapEditorStore.drawMode === 'teleport'
         ? {
-            toZoneId: zoneEditorStore.teleportSettings.toZoneId,
-            toPositionX: zoneEditorStore.teleportSettings.toPositionX,
-            toPositionY: zoneEditorStore.teleportSettings.toPositionY,
-            toRotation: zoneEditorStore.teleportSettings.toRotation
+            toMap: mapEditorStore.teleportSettings.toMap,
+            toPositionX: mapEditorStore.teleportSettings.toPositionX,
+            toPositionY: mapEditorStore.teleportSettings.toPositionY,
+            toRotation: mapEditorStore.teleportSettings.toRotation
           }
         : undefined
   }
 
-  zoneEditorStore.zone.zoneEventTiles = zoneEditorStore.zone.zoneEventTiles.concat(newEventTile as ZoneEventTile)
+  mapEditorStore.map.mapEventTiles = mapEditorStore.map.mapEventTiles.concat(newEventTile as MapEventTile)
 }
 
 function eraser(pointer: Phaser.Input.Pointer) {
-  // Check if zone is set
-  if (!zoneEditorStore.zone) return
+  // Check if map is set
+  if (!mapEditorStore.map) return
 
   // Check if tool is pencil
-  if (zoneEditorStore.tool !== 'eraser') return
+  if (mapEditorStore.tool !== 'eraser') return
 
   // Check if draw mode is blocking tile or teleport
-  if (zoneEditorStore.eraserMode !== 'blocking tile' && zoneEditorStore.eraserMode !== 'teleport') return
+  if (mapEditorStore.eraserMode !== 'blocking tile' && mapEditorStore.eraserMode !== 'teleport') return
 
   // Check if left mouse button is pressed
   if (!pointer.isDown) return
@@ -95,11 +95,11 @@ function eraser(pointer: Phaser.Input.Pointer) {
   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)
+  const existingEventTile = mapEditorStore.map.mapEventTiles.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)
+  mapEditorStore.map.mapEventTiles = mapEditorStore.map.mapEventTiles.filter((eventTile) => eventTile.id !== existingEventTile.id)
 }
 
 onMounted(() => {

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

@@ -0,0 +1,231 @@
+<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, loadAllTilesIntoScene, placeTile, setLayerTiles } from '@/composables/mapComposable'
+import { TileStorage } from '@/storage/storages'
+import { useMapEditorStore } from '@/stores/mapEditorStore'
+import { useScene } from 'phavuer'
+import { onBeforeMount, onMounted, onUnmounted, shallowRef, watch } from 'vue'
+
+import Tileset = Phaser.Tilemaps.Tileset
+
+const emit = defineEmits(['tileMap:create'])
+
+const scene = useScene()
+const mapEditorStore = useMapEditorStore()
+const tileStorage = new TileStorage()
+
+const tileMap = shallowRef<Phaser.Tilemaps.Tilemap>()
+const tileLayer = shallowRef<Phaser.Tilemaps.TilemapLayer>()
+
+function createTileMap() {
+  const mapData = new Phaser.Tilemaps.MapData({
+    width: mapEditorStore.map?.width,
+    height: mapEditorStore.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, 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) {
+  if (!tileMap.value || !tileLayer.value) return
+
+  // Check if map is set
+  if (!mapEditorStore.map) return
+
+  // Check if tool is pencil
+  if (mapEditorStore.tool !== 'pencil') return
+
+  // Check if draw mode is tile
+  if (mapEditorStore.drawMode !== 'tile') return
+
+  // Check if there is a selected tile
+  if (!mapEditorStore.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.value, pointer.worldX, pointer.worldY)
+  if (!tile) return
+
+  // Place tile
+  placeTile(tileMap.value, tileLayer.value, tile.x, tile.y, mapEditorStore.selectedTile)
+
+  // Adjust mapEditorStore.map.tiles
+  mapEditorStore.map.tiles[tile.y][tile.x] = mapEditorStore.selectedTile
+}
+
+function eraser(pointer: Phaser.Input.Pointer) {
+  if (!tileMap.value || !tileLayer.value) return
+
+  // Check if map is set
+  if (!mapEditorStore.map) return
+
+  // Check if tool is pencil
+  if (mapEditorStore.tool !== 'eraser') return
+
+  // Check if draw mode is tile
+  if (mapEditorStore.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.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
+  mapEditorStore.map.tiles[tile.y][tile.x] = 'blank_tile'
+}
+
+function paint(pointer: Phaser.Input.Pointer) {
+  if (!tileMap.value || !tileLayer.value) return
+
+  // Check if map is set
+  if (!mapEditorStore.map) return
+
+  // Check if tool is pencil
+  if (mapEditorStore.tool !== 'paint') return
+
+  // Check if there is a selected tile
+  if (!mapEditorStore.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.value, tileLayer.value, createTileArray(tileMap.value.width, tileMap.value.height, mapEditorStore.selectedTile))
+
+  // Adjust mapEditorStore.map.tiles
+  mapEditorStore.map.tiles = createTileArray(tileMap.value.width, tileMap.value.height, mapEditorStore.selectedTile)
+}
+
+// When alt is pressed, and the pointer is down, select the tile that the pointer is over
+function tilePicker(pointer: Phaser.Input.Pointer) {
+  if (!tileMap.value || !tileLayer.value) return
+
+  // Check if map is set
+  if (!mapEditorStore.map) return
+
+  // Check if tool is pencil
+  if (mapEditorStore.tool !== 'pencil') return
+
+  // Check if draw mode is tile
+  if (mapEditorStore.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.value, pointer.worldX, pointer.worldY)
+  if (!tile) return
+
+  // Select the tile
+  mapEditorStore.setSelectedTile(mapEditorStore.map.tiles[tile.y][tile.x])
+}
+
+watch(
+  () => mapEditorStore.shouldClearTiles,
+  (shouldClear) => {
+    if (shouldClear && mapEditorStore.map && tileMap.value && tileLayer.value) {
+      const blankTiles = createTileArray(tileMap.value.width, tileMap.value.height, 'blank_tile')
+      setLayerTiles(tileMap.value, tileLayer.value, blankTiles)
+      mapEditorStore.map.tiles = blankTiles
+      mapEditorStore.resetClearTilesFlag()
+    }
+  }
+)
+
+onMounted(async () => {
+  if (!mapEditorStore.map?.tiles) 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(mapEditorStore.map.width, mapEditorStore.map.height, 'blank_tile')
+
+  // Then overlay the map tiles, but only within the current map dimensions
+  const mapTiles = mapEditorStore.map.tiles
+  for (let y = 0; y < mapEditorStore.map.height; y++) {
+    for (let x = 0; x < mapEditorStore.map.width; x++) {
+      if (mapTiles[y] && mapTiles[y][x] !== undefined) {
+        blankTiles[y][x] = mapTiles[y][x]
+      }
+    }
+  }
+
+  setLayerTiles(tileMap.value, tileLayer.value, 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)
+
+  if (tileMap.value) {
+    tileMap.value.destroyLayer('tiles')
+    tileMap.value.removeAllLayers()
+    tileMap.value.destroy()
+  }
+})
+</script>

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

@@ -0,0 +1,45 @@
+<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

@@ -0,0 +1,246 @@
+<template>
+  <SelectedPlacedMapObjectComponent v-if="selectedPlacedMapObject" :placedMapObject="selectedPlacedMapObject" @move="moveMapObject" @rotate="rotatePlacedMapObject" @delete="deletePlacedMapObject" />
+  <PlacedMapObject v-for="placedMapObject in mapEditorStore.map?.placedMapObjects" :tilemap="tilemap" :placedMapObject :selectedPlacedMapObject :movingPlacedMapObject @pointerup="clickPlacedMapObject(placedMapObject)" />
+</template>
+
+<script setup lang="ts">
+import type { 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 { getTile } from '@/composables/mapComposable'
+import { useMapEditorStore } from '@/stores/mapEditorStore'
+import { useScene } from 'phavuer'
+import { onMounted, onUnmounted, ref, watch } from 'vue'
+
+const scene = useScene()
+const mapEditorStore = useMapEditorStore()
+const selectedPlacedMapObject = ref<PlacedMapObjectT | null>(null)
+const movingPlacedMapObject = ref<PlacedMapObjectT | null>(null)
+
+const props = defineProps<{
+  tilemap: Phaser.Tilemaps.Tilemap
+}>()
+
+function pencil(pointer: Phaser.Input.Pointer) {
+  // Check if map is set
+  if (!mapEditorStore.map) return
+
+  // Check if tool is pencil
+  if (mapEditorStore.tool !== 'pencil') return
+
+  // Check if draw mode is map_object
+  if (mapEditorStore.drawMode !== 'map_object') return
+
+  // Check if there is a selected object
+  if (!mapEditorStore.selectedMapObject) 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 existingPlacedMapObject = mapEditorStore.map.placedMapObjects.find((placedMapObject) => placedMapObject.positionX === tile.x && placedMapObject.positionY === tile.y)
+  if (existingPlacedMapObject) return
+
+  const newPlacedMapObject = {
+    id: uuidv4(),
+    map: mapEditorStore.map,
+    mapObject: mapEditorStore.selectedMapObject,
+    depth: 0,
+    isRotated: false,
+    positionX: tile.x,
+    positionY: tile.y
+  }
+
+  // Add new object to mapObjects
+  mapEditorStore.map.placedMapObjects = mapEditorStore.map.placedMapObjects.concat(newPlacedMapObject as PlacedMapObjectT)
+}
+
+function eraser(pointer: Phaser.Input.Pointer) {
+  // Check if map is set
+  if (!mapEditorStore.map) return
+
+  // Check if tool is eraser
+  if (mapEditorStore.tool !== 'eraser') return
+
+  // Check if draw mode is map_object
+  if (mapEditorStore.eraserMode !== '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 there is a tile
+  const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
+  if (!tile) return
+
+  // Check if object already exists on position
+  const existingPlacedMapObject = mapEditorStore.map.placedMapObjects.find((placedMapObject) => placedMapObject.positionX === tile.x && placedMapObject.positionY === tile.y)
+  if (!existingPlacedMapObject) return
+
+  // Remove existing object
+  mapEditorStore.map.placedMapObjects = mapEditorStore.map.placedMapObjects.filter((placedMapObject) => placedMapObject.id !== existingPlacedMapObject.id)
+}
+
+function objectPicker(pointer: Phaser.Input.Pointer) {
+  // Check if map is set
+  if (!mapEditorStore.map) return
+
+  // Check if tool is pencil
+  if (mapEditorStore.tool !== 'pencil') return
+
+  // Check if draw mode is map_object
+  if (mapEditorStore.drawMode !== '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
+
+  // 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 existingPlacedMapObject = mapEditorStore.map.placedMapObjects.find((placedMapObject) => placedMapObject.positionX === tile.x && placedMapObject.positionY === tile.y)
+  if (!existingPlacedMapObject) return
+
+  // Select the object
+  mapEditorStore.setSelectedMapObject(existingPlacedMapObject.mapObject)
+}
+
+function moveMapObject(id: string) {
+  // Check if map is set
+  if (!mapEditorStore.map) return
+
+  movingPlacedMapObject.value = mapEditorStore.map.placedMapObjects.find((object) => object.id === id) as PlacedMapObjectT
+
+  function handlePointerMove(pointer: Phaser.Input.Pointer) {
+    if (!movingPlacedMapObject.value) return
+
+    const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
+    if (!tile) return
+
+    movingPlacedMapObject.value.positionX = tile.x
+    movingPlacedMapObject.value.positionY = tile.y
+  }
+
+  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) {
+  // Check if map is set
+  if (!mapEditorStore.map) return
+
+  mapEditorStore.map.placedMapObjects = mapEditorStore.map.placedMapObjects.map((placedMapObject) => {
+    if (placedMapObject.id === id) {
+      return {
+        ...placedMapObject,
+        isRotated: !placedMapObject.isRotated
+      }
+    }
+    return placedMapObject
+  })
+}
+
+function deletePlacedMapObject(id: string) {
+  // Check if map is set
+  if (!mapEditorStore.map) return
+
+  mapEditorStore.map.placedMapObjects = mapEditorStore.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) {
+    mapEditorStore.setSelectedMapObject(placedMapObject.mapObject)
+  }
+}
+
+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 mapEditorStore.mapObjectList and update originX and originY of objects in mapObjects
+watch(
+  () => mapEditorStore.mapObjectList,
+  (newMapObjects) => {
+    if (!mapEditorStore.map) return
+
+    const updatedMapObjects = mapEditorStore.map.placedMapObjects.map((mapObject) => {
+      const updatedMapObject = newMapObjects.find((obj) => obj.id === mapObject.mapObject.id)
+      if (updatedMapObject) {
+        return {
+          ...mapObject,
+          mapObject: {
+            ...mapObject.mapObject,
+            originX: updatedMapObject.originX,
+            originY: updatedMapObject.originY
+          }
+        }
+      }
+      return mapObject
+    })
+
+    // Update the map with the new mapObjects
+    mapEditorStore.setMap({
+      ...mapEditorStore.map,
+      placedMapObjects: updatedMapObjects
+    })
+
+    // Update selectedMapObject if it's set
+    if (mapEditorStore.selectedMapObject) {
+      const updatedMapObject = newMapObjects.find((obj) => obj.id === mapEditorStore.selectedMapObject?.id)
+      if (updatedMapObject) {
+        mapEditorStore.setSelectedMapObject({
+          ...mapEditorStore.selectedMapObject,
+          originX: updatedMapObject.originX,
+          originY: updatedMapObject.originY
+        })
+      }
+    }
+  }
+  // { deep: true }
+)
+</script>

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

@@ -1,7 +1,7 @@
 <template>
-  <Modal :isModalOpen="true" @modal:close="() => zoneEditorStore.toggleCreateZoneModal()" :modal-width="300" :modal-height="420" :is-resizable="false" :bg-style="'none'">
+  <Modal :isModalOpen="true" @modal:close="() => mapEditorStore.toggleCreateMapModal()" :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 zone</h3>
+      <h3 class="m-0 font-medium shrink-0 text-white">Create new map</h3>
     </template>
 
     <template #modalBody>
@@ -36,23 +36,23 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import type { Map } from '@/application/types'
 import Modal from '@/components/utilities/Modal.vue'
 import { useGameStore } from '@/stores/gameStore'
-import { useZoneEditorStore } from '@/stores/zoneEditorStore'
-import type { Zone } from '@/application/types'
+import { useMapEditorStore } from '@/stores/mapEditorStore'
+import { ref } from 'vue'
 
 const gameStore = useGameStore()
-const zoneEditorStore = useZoneEditorStore()
+const mapEditorStore = useMapEditorStore()
 
 const name = ref('')
 const width = ref(0)
 const height = ref(0)
 
 function submit() {
-  gameStore.connection.emit('gm:zone_editor:zone:create', { name: name.value, width: width.value, height: height.value }, (response: Zone[]) => {
-    zoneEditorStore.setZoneList(response)
+  gameStore.connection?.emit('gm:map:create', { name: name.value, width: width.value, height: height.value }, (response: Map[]) => {
+    mapEditorStore.setMapList(response)
   })
-  zoneEditorStore.toggleCreateZoneModal()
+  mapEditorStore.toggleCreateMapModal()
 }
 </script>

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

@@ -0,0 +1,61 @@
+<template>
+  <CreateMap v-if="mapEditorStore.isCreateMapModalShown" />
+  <Modal :is-modal-open="mapEditorStore.isMapListModalShown" @modal:close="() => mapEditorStore.toggleMapListModal()" :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">
+        <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="() => mapEditorStore.toggleCreateMapModal()">New</button>
+        </div>
+        <div class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap" v-for="(map, index) in mapEditorStore.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>
+    </template>
+  </Modal>
+</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 { useGameStore } from '@/stores/gameStore'
+import { useMapEditorStore } from '@/stores/mapEditorStore'
+import { onMounted } from 'vue'
+
+const gameStore = useGameStore()
+const mapEditorStore = useMapEditorStore()
+
+onMounted(async () => {
+  fetchMaps()
+})
+
+function fetchMaps() {
+  gameStore.connection?.emit('gm:map:list', {}, (response: Map[]) => {
+    mapEditorStore.setMapList(response)
+  })
+}
+
+function loadMap(id: UUID) {
+  gameStore.connection?.emit('gm:map:request', { mapId: id }, (response: Map) => {
+    mapEditorStore.setMap(response)
+  })
+  mapEditorStore.toggleMapListModal()
+}
+
+function deleteMap(id: UUID) {
+  gameStore.connection?.emit('gm:map:delete', { mapId: id }, () => {
+    fetchMaps()
+  })
+}
+</script>

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

@@ -1,7 +1,7 @@
 <template>
-  <Modal :isModalOpen="zoneEditorStore.isObjectListModalShown" :modal-width="645" :modal-height="260" @modal:close="() => (zoneEditorStore.isObjectListModalShown = false)" :bg-style="'none'">
+  <Modal :isModalOpen="mapEditorStore.isMapObjectListModalShown" :modal-width="645" :modal-height="260" @modal:close="() => (mapEditorStore.isMapObjectListModalShown = false)" :bg-style="'none'">
     <template #modalHeader>
-      <h3 class="text-lg text-white">Objects</h3>
+      <h3 class="text-lg text-white">Map objects</h3>
     </template>
     <template #modalBody>
       <div class="flex pt-4 pl-4">
@@ -20,16 +20,16 @@
         </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">
+            <div v-for="(mapObject, index) in filteredMapObjects" :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`"
+                :src="`${config.server_endpoint}/textures/map_objects/${mapObject.id}.png`"
                 alt="Object"
-                @click="zoneEditorStore.setSelectedObject(object)"
+                @click="mapEditorStore.setSelectedMapObject(mapObject)"
                 :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
+                  'border-cyan shadow-lg scale-105': mapEditorStore.selectedMapObject?.id === mapObject.id,
+                  'border-transparent hover:border-gray-300': mapEditorStore.selectedMapObject?.id !== mapObject.id
                 }"
               />
             </div>
@@ -42,25 +42,25 @@
 
 <script setup lang="ts">
 import config from '@/application/config'
-import { ref, onMounted, computed } from 'vue'
-import { useZoneEditorStore } from '@/stores/zoneEditorStore'
-import { useGameStore } from '@/stores/gameStore'
+import type { MapObject } from '@/application/types'
 import Modal from '@/components/utilities/Modal.vue'
-import type { Object, ZoneObject } from '@/application/types'
+import { useGameStore } from '@/stores/gameStore'
+import { useMapEditorStore } from '@/stores/mapEditorStore'
+import { computed, onMounted, ref } from 'vue'
 
 const gameStore = useGameStore()
 const isModalOpen = ref(false)
-const zoneEditorStore = useZoneEditorStore()
+const mapEditorStore = useMapEditorStore()
 const searchQuery = ref('')
 const selectedTags = ref<string[]>([])
 
 const uniqueTags = computed(() => {
-  const allTags = zoneEditorStore.objectList.flatMap((obj) => obj.tags || [])
+  const allTags = mapEditorStore.mapObjectList.flatMap((obj) => obj.tags || [])
   return Array.from(new Set(allTags))
 })
 
-const filteredObjects = computed(() => {
-  return zoneEditorStore.objectList.filter((object) => {
+const filteredMapObjects = computed(() => {
+  return mapEditorStore.mapObjectList.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
@@ -77,8 +77,8 @@ const toggleTag = (tag: string) => {
 
 onMounted(async () => {
   isModalOpen.value = true
-  gameStore.connection?.emit('gm:object:list', {}, (response: Object[]) => {
-    zoneEditorStore.setObjectList(response)
+  gameStore.connection?.emit('gm:mapObject:list', {}, (response: MapObject[]) => {
+    mapEditorStore.setMapObjectList(response)
   })
 })
 </script>

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

@@ -1,7 +1,7 @@
 <template>
-  <Modal :is-modal-open="zoneEditorStore.isSettingsModalShown" @modal:close="() => zoneEditorStore.toggleSettingsModal()" :modal-width="600" :modal-height="430" :bg-style="'none'">
+  <Modal :is-modal-open="mapEditorStore.isSettingsModalShown" @modal:close="() => mapEditorStore.toggleSettingsModal()" :modal-width="600" :modal-height="430" :bg-style="'none'">
     <template #modalHeader>
-      <h3 class="m-0 font-medium shrink-0 text-white">Zone settings</h3>
+      <h3 class="m-0 font-medium shrink-0 text-white">Map 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 zoneEffects" :key="effect.id" class="mb-2 flex items-center space-x-2 mt-4">
+          <div v-for="(effect, index) in mapEffects" :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,61 +46,61 @@
   </Modal>
 </template>
 
-<script setup>
-import { ref, watch } from 'vue'
+<script setup lang="ts">
 import Modal from '@/components/utilities/Modal.vue'
-import { useZoneEditorStore } from '@/stores/zoneEditorStore'
+import { useMapEditorStore } from '@/stores/mapEditorStore'
+import { ref, watch } from 'vue'
 
-const zoneEditorStore = useZoneEditorStore()
+const mapEditorStore = useMapEditorStore()
 const screen = ref('settings')
 
-zoneEditorStore.setZoneName(zoneEditorStore.zone?.name)
-zoneEditorStore.setZoneWidth(zoneEditorStore.zone?.width)
-zoneEditorStore.setZoneHeight(zoneEditorStore.zone?.height)
-zoneEditorStore.setZonePvp(zoneEditorStore.zone?.pvp)
-zoneEditorStore.setZoneEffects(zoneEditorStore.zone?.zoneEffects)
+mapEditorStore.setMapName(mapEditorStore.map?.name)
+mapEditorStore.setMapWidth(mapEditorStore.map?.width)
+mapEditorStore.setMapHeight(mapEditorStore.map?.height)
+mapEditorStore.setMapPvp(mapEditorStore.map?.pvp)
+mapEditorStore.setMapEffects(mapEditorStore.map?.mapEffects)
 
-const name = ref(zoneEditorStore.zoneSettings?.name)
-const width = ref(zoneEditorStore.zoneSettings?.width)
-const height = ref(zoneEditorStore.zoneSettings?.height)
-const pvp = ref(zoneEditorStore.zoneSettings?.pvp)
-const zoneEffects = ref(zoneEditorStore.zoneSettings?.zoneEffects || [])
+const name = ref(mapEditorStore.mapSettings?.name)
+const width = ref(mapEditorStore.mapSettings?.width)
+const height = ref(mapEditorStore.mapSettings?.height)
+const pvp = ref(mapEditorStore.mapSettings?.pvp)
+const mapEffects = ref(mapEditorStore.mapSettings?.mapEffects || [])
 
 watch(name, (value) => {
-  zoneEditorStore.setZoneName(value)
+  mapEditorStore.setMapName(value)
 })
 
 watch(width, (value) => {
-  zoneEditorStore.setZoneWidth(value)
+  mapEditorStore.setMapWidth(value)
 })
 
 watch(height, (value) => {
-  zoneEditorStore.setZoneHeight(value)
+  mapEditorStore.setMapHeight(value)
 })
 
 watch(pvp, (value) => {
-  zoneEditorStore.setZonePvp(value)
+  mapEditorStore.setMapPvp(value)
 })
 
 watch(
-  zoneEffects,
+  mapEffects,
   (value) => {
-    zoneEditorStore.setZoneEffects(value)
+    mapEditorStore.setMapEffects(value)
   },
   { deep: true }
 )
 
 const addEffect = () => {
-  zoneEffects.value.push({
+  mapEffects.value.push({
     id: Date.now().toString(), // Simple unique id generation
-    zoneId: zoneEditorStore.zone?.id,
-    zone: zoneEditorStore.zone,
+    mapId: mapEditorStore.map?.id,
+    map: mapEditorStore.map,
     effect: '',
     strength: 1
   })
 }
 
 const removeEffect = (index) => {
-  zoneEffects.value.splice(index, 1)
+  mapEffects.value.splice(index, 1)
 }
 </script>

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

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

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

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

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

@@ -1,5 +1,5 @@
 <template>
-  <Modal :isModalOpen="zoneEditorStore.isTileListModalShown" :modal-width="645" :modal-height="600" @modal:close="() => (zoneEditorStore.isTileListModalShown = false)" :bg-style="'none'">
+  <Modal :isModalOpen="mapEditorStore.isTileListModalShown" :modal-width="645" :modal-height="600" @modal:close="() => (mapEditorStore.isTileListModalShown = false)" :bg-style="'none'">
     <template #modalHeader>
       <h3 class="text-lg text-white">Tiles</h3>
     </template>
@@ -24,7 +24,7 @@
               <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`"
+                  :src="`${config.server_endpoint}/textures/tiles/${group.parent.id}.png`"
                   :alt="group.parent.name"
                   @click="openGroup(group)"
                   @load="() => processTile(group.parent)"
@@ -50,7 +50,7 @@
             <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`"
+                :src="`${config.server_endpoint}/textures/tiles/${selectedGroup.parent.id}.png`"
                 :alt="selectedGroup.parent.name"
                 @click="selectTile(selectedGroup.parent.id)"
                 :class="{
@@ -63,7 +63,7 @@
             <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`"
+                :src="`${config.server_endpoint}/textures/tiles/${childTile.id}.png`"
                 :alt="childTile.name"
                 @click="selectTile(childTile.id)"
                 :class="{
@@ -82,28 +82,28 @@
 
 <script setup lang="ts">
 import config from '@/application/config'
-import { ref, onMounted, computed } from 'vue'
-import { useZoneEditorStore } from '@/stores/zoneEditorStore'
-import { useGameStore } from '@/stores/gameStore'
-import Modal from '@/components/utilities/Modal.vue'
 import type { Tile } from '@/application/types'
+import Modal from '@/components/utilities/Modal.vue'
+import { useGameStore } from '@/stores/gameStore'
+import { useMapEditorStore } from '@/stores/mapEditorStore'
+import { computed, onMounted, ref } from 'vue'
 
 const gameStore = useGameStore()
 const isModalOpen = ref(false)
-const zoneEditorStore = useZoneEditorStore()
+const mapEditorStore = useMapEditorStore()
 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 || [])
+  const allTags = mapEditorStore.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 filteredTiles = mapEditorStore.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
@@ -169,7 +169,7 @@ function processTile(tile: Tile) {
     tileColorData.value.set(tile.id, getDominantColor(imageData))
     tileEdgeData.value.set(tile.id, getEdgeComplexity(imageData))
   }
-  img.src = `${config.server_endpoint}/assets/tiles/${tile.id}.png`
+  img.src = `${config.server_endpoint}/textures/tiles/${tile.id}.png`
 }
 
 function getDominantColor(imageData: ImageData) {
@@ -219,17 +219,17 @@ function closeGroup() {
 }
 
 function selectTile(tile: string) {
-  zoneEditorStore.setSelectedTile(tile)
+  mapEditorStore.setSelectedTile(tile)
 }
 
 function isActiveTile(tile: Tile): boolean {
-  return zoneEditorStore.selectedTile === tile.id
+  return mapEditorStore.selectedTile === tile.id
 }
 
 onMounted(async () => {
   isModalOpen.value = true
   gameStore.connection?.emit('gm:tile:list', {}, (response: Tile[]) => {
-    zoneEditorStore.setTileList(response)
+    mapEditorStore.setTileList(response)
     response.forEach((tile) => processTile(tile))
   })
 })

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

@@ -1,27 +1,27 @@
 <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">
-      <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': zoneEditorStore.tool === 'move' }" @click="handleClick('move')">
-          <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>
+      <div ref="toolbar" class="tools flex gap-2.5" v-if="mapEditorStore.map">
+        <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': mapEditorStore.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': mapEditorStore.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': zoneEditorStore.tool === 'pencil' }" @click="handleClick('pencil')">
-          <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="zoneEditorStore.tool === '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': mapEditorStore.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': mapEditorStore.tool !== 'pencil' }">(P)</span>
+          <div class="select" v-if="mapEditorStore.tool === 'pencil'">
             <div class="select-trigger group capitalize flex gap-3.5" :class="{ open: selectPencilOpen }">
-              {{ zoneEditorStore.drawMode }}
-              <img class="group-[.open]:rotate-180 invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/zoneEditor/chevron.svg" />
+              {{ mapEditorStore.drawMode.replace('_', ' ') }}
+              <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="" />
             </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 && zoneEditorStore.tool === '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 && mapEditorStore.tool === '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="setDrawMode('object')">
-                Object
+              <span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="setDrawMode('map_object')">
+                Map 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="setDrawMode('teleport')">
@@ -35,20 +35,20 @@
 
         <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': zoneEditorStore.tool === 'eraser' }" @click="handleClick('eraser')">
-          <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="zoneEditorStore.tool === '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': mapEditorStore.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': mapEditorStore.tool !== 'eraser' }">(E)</span>
+          <div class="select" v-if="mapEditorStore.tool === 'eraser'">
             <div class="select-trigger group capitalize flex gap-3.5" :class="{ open: selectEraserOpen }">
-              {{ zoneEditorStore.eraserMode }}
-              <img class="group-[.open]:rotate-180 invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/zoneEditor/chevron.svg" />
+              {{ mapEditorStore.eraserMode.replace('_', ' ') }}
+              <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" />
             </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="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="setEraserMode('object')">
-                Object
+              <span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="setEraserMode('map_object')">
+                Map 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="setEraserMode('teleport')">
@@ -62,31 +62,31 @@
 
         <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': zoneEditorStore.tool === 'paint' }" @click="handleClick('paint')">
-          <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 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': mapEditorStore.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': mapEditorStore.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')" 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>
+        <button class="flex justify-center items-center min-w-10 p-0 relative" @click="handleClick('settings')" v-if="mapEditorStore.map"><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>
       </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="() => zoneEditorStore.toggleZoneListModal()">Load</button>
-        <button class="btn-cyan px-3.5" @click="() => emit('save')" v-if="zoneEditorStore.zone">Save</button>
-        <button class="btn-cyan px-3.5" @click="() => emit('clear')" v-if="zoneEditorStore.zone">Clear</button>
-        <button class="btn-cyan px-3.5" @click="() => zoneEditorStore.toggleActive()">Exit</button>
+        <button class="btn-cyan px-3.5" @click="() => mapEditorStore.toggleMapListModal()">Load</button>
+        <button class="btn-cyan px-3.5" @click="() => emit('save')" v-if="mapEditorStore.map">Save</button>
+        <button class="btn-cyan px-3.5" @click="() => emit('clear')" v-if="mapEditorStore.map">Clear</button>
+        <button class="btn-cyan px-3.5" @click="() => mapEditorStore.toggleActive()">Exit</button>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref } from 'vue'
-import { useZoneEditorStore } from '@/stores/zoneEditorStore'
+import { useMapEditorStore } from '@/stores/mapEditorStore'
 import { onClickOutside } from '@vueuse/core'
+import { onBeforeUnmount, onMounted, ref } from 'vue'
 
-const zoneEditorStore = useZoneEditorStore()
+const mapEditorStore = useMapEditorStore()
 
 const emit = defineEmits(['save', 'clear'])
 
@@ -99,24 +99,24 @@ let selectEraserOpen = ref(false)
 
 // drawMode
 function setDrawMode(value: string) {
-  zoneEditorStore.isTileListModalShown = value === 'tile'
-  zoneEditorStore.isObjectListModalShown = value === 'object'
+  mapEditorStore.isTileListModalShown = value === 'tile'
+  mapEditorStore.isMapObjectListModalShown = value === 'map_object'
 
-  zoneEditorStore.setDrawMode(value)
+  mapEditorStore.setDrawMode(value)
   selectPencilOpen.value = false
 }
 
 // drawMode
 function setEraserMode(value: string) {
-  zoneEditorStore.setEraserMode(value)
+  mapEditorStore.setEraserMode(value)
   selectEraserOpen.value = false
 }
 
 function handleClick(tool: string) {
   if (tool === 'settings') {
-    zoneEditorStore.toggleSettingsModal()
+    mapEditorStore.toggleSettingsModal()
   } else {
-    zoneEditorStore.setTool(tool)
+    mapEditorStore.setTool(tool)
   }
 
   selectPencilOpen.value = tool === 'pencil' ? !selectPencilOpen.value : false
@@ -125,7 +125,7 @@ function handleClick(tool: string) {
 
 function cycleToolMode(tool: 'pencil' | 'eraser') {
   const modes = ['tile', 'object', 'teleport', 'blocking tile']
-  const currentMode = tool === 'pencil' ? zoneEditorStore.drawMode : zoneEditorStore.eraserMode
+  const currentMode = tool === 'pencil' ? mapEditorStore.drawMode : mapEditorStore.eraserMode
   const currentIndex = modes.indexOf(currentMode)
   const nextIndex = (currentIndex + 1) % modes.length
   const nextMode = modes[nextIndex]
@@ -138,8 +138,8 @@ function cycleToolMode(tool: 'pencil' | 'eraser') {
 }
 
 function initKeyShortcuts(event: KeyboardEvent) {
-  // Check if zone is set
-  if (!zoneEditorStore.zone) return
+  // Check if map is set
+  if (!mapEditorStore.map) return
 
   // prevent if focused on composables
   if (document.activeElement?.tagName === 'INPUT') return
@@ -154,7 +154,7 @@ function initKeyShortcuts(event: KeyboardEvent) {
 
   if (keyActions.hasOwnProperty(event.key)) {
     const tool = keyActions[event.key]
-    if ((tool === 'pencil' || tool === 'eraser') && zoneEditorStore.tool === tool) {
+    if ((tool === 'pencil' || tool === 'eraser') && mapEditorStore.tool === tool) {
       cycleToolMode(tool)
     } else {
       handleClick(tool)

src/components/gameMaster/zoneEditor/ZoneEditor.vue

@@ -1,73 +0,0 @@
-<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 { onUnmounted, ref } from 'vue'
-import { useGameStore } from '@/stores/gameStore'
-import { useZoneEditorStore } from '@/stores/zoneEditorStore'
-import { type Zone } from '@/application/types'
-// Components
-import Toolbar from '@/components/gameMaster/zoneEditor/partials/Toolbar.vue'
-import TileList from '@/components/gameMaster/zoneEditor/partials/TileList.vue'
-import ObjectList from '@/components/gameMaster/zoneEditor/partials/ObjectList.vue'
-import ZoneSettings from '@/components/gameMaster/zoneEditor/partials/ZoneSettings.vue'
-import ZoneList from '@/components/gameMaster/zoneEditor/partials/ZoneList.vue'
-import TeleportModal from '@/components/gameMaster/zoneEditor/partials/TeleportModal.vue'
-import ZoneTiles from '@/components/gameMaster/zoneEditor/zonePartials/ZoneTiles.vue'
-import ZoneObjects from '@/components/gameMaster/zoneEditor/zonePartials/ZoneObjects.vue'
-import ZoneEventTiles from '@/components/gameMaster/zoneEditor/zonePartials/ZoneEventTiles.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/ZoneList.vue

@@ -1,61 +0,0 @@
-<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 { onMounted } from 'vue'
-import { useGameStore } from '@/stores/gameStore'
-import Modal from '@/components/utilities/Modal.vue'
-import type { Zone } from '@/application/types'
-import { useZoneEditorStore } from '@/stores/zoneEditorStore'
-import CreateZone from '@/components/gameMaster/zoneEditor/partials/CreateZone.vue'
-
-const gameStore = useGameStore()
-const zoneEditorStore = useZoneEditorStore()
-
-onMounted(async () => {
-  fetchZones()
-})
-
-function fetchZones() {
-  gameStore.connection?.emit('gm:zone_editor:zone:list', {}, (response: Zone[]) => {
-    zoneEditorStore.setZoneList(response)
-  })
-}
-
-function loadZone(id: number) {
-  gameStore.connection?.emit('gm:zone_editor:zone:request', { zoneId: id }, (response: Zone) => {
-    zoneEditorStore.setZone(response)
-  })
-  zoneEditorStore.toggleZoneListModal()
-}
-
-function deleteZone(id: number) {
-  gameStore.connection?.emit('gm:zone_editor:zone:delete', { zoneId: id }, () => {
-    fetchZones()
-  })
-}
-</script>

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

@@ -1,45 +0,0 @@
-<template>
-  <Image v-if="gameStore.getLoadedAsset(props.zoneObject.object.id)" v-bind="imageProps" />
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { Image, useScene } from 'phavuer'
-import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
-import { loadTexture } from '@/composables/gameComposable'
-import type { AssetDataT, ZoneObject } from '@/application/types'
-import { useGameStore } from '@/stores/gameStore'
-
-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

@@ -1,248 +0,0 @@
-<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 { uuidv4 } from '@/application/utilities'
-import { getTile } from '@/composables/zoneComposable'
-import { useScene } from 'phavuer'
-import { useZoneEditorStore } from '@/stores/zoneEditorStore'
-import SelectedZoneObject from '@/components/gameMaster/zoneEditor/partials/SelectedZoneObject.vue'
-import { onMounted, onUnmounted, ref, watch } from 'vue'
-import ZoneObject from '@/components/gameMaster/zoneEditor/zonePartials/ZoneObject.vue'
-import type { ZoneObject as ZoneObjectT } from '@/application/types'
-
-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

@@ -1,227 +0,0 @@
-<template>
-  <Controls :layer="tileLayer" :depth="0" />
-</template>
-
-<script setup lang="ts">
-import config from '@/application/config'
-import { useScene } from 'phavuer'
-import { useZoneEditorStore } from '@/stores/zoneEditorStore'
-import { onMounted, onUnmounted, watch } from 'vue'
-import { createTileArray, getTile, placeTile, setLayerTiles } from '@/composables/zoneComposable'
-import Controls from '@/components/utilities/Controls.vue'
-import { useGameStore } from '@/stores/gameStore'
-import type { AssetDataT } from '@/application/types'
-
-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/login/LoginForm.vue

@@ -26,10 +26,10 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
 import { login } from '@/services/authentication'
 import { useGameStore } from '@/stores/gameStore'
 import { useCookies } from '@vueuse/integrations/useCookies'
+import { onMounted, ref } from 'vue'
 
 const emit = defineEmits(['openResetPasswordModal', 'switchToRegister'])
 

src/components/login/NewPasswordForm.vue

@@ -22,10 +22,10 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
 import { newPassword } from '@/services/authentication'
 import { useGameStore } from '@/stores/gameStore'
 import { useCookies } from '@vueuse/integrations/useCookies'
+import { onMounted, ref } from 'vue'
 
 const emit = defineEmits(['switchToLogin'])
 

src/components/login/RegisterForm.vue

@@ -26,10 +26,10 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
 import { login, register } from '@/services/authentication'
 import { useGameStore } from '@/stores/gameStore'
 import { useCookies } from '@vueuse/integrations/useCookies'
+import { onMounted, ref } from 'vue'
 
 const emit = defineEmits(['switchToLogin'])
 

src/components/login/ResetPasswordModal.vue

@@ -29,10 +29,10 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import { resetPassword } from '@/services/authentication'
 import Modal from '@/components/utilities/Modal.vue'
+import { resetPassword } from '@/services/authentication'
 import { useGameStore } from '@/stores/gameStore'
+import { ref } from 'vue'
 
 const emit = defineEmits(['close'])
 

src/components/screens/Characters.vue

@@ -1,5 +1,8 @@
 <template>
   <div class="relative max-lg:h-dvh flex flex-row-reverse">
+    <div class="portrait-mode-notice hidden absolute h-[calc(100%_-_80px)] w-[calc(100%_-_80px)] left-0 top-0 bg-gray z-50 p-10 text-center">
+      <span class="text-lg">Noxious is not compatible with portrait mode on smaller screens. Please switch to landscape mode to play.</span>
+    </div>
     <div class="lg:bg-gradient-to-l bg-gradient-to-b from-gray-900 to-transparent w-full lg:w-1/2 h-[65dvh] lg:h-dvh absolute left-0 max-lg:bottom-0 lg:top-0 z-10"></div>
     <div class="bg-[url('/assets/login/login-bg.png')] opacity-20 w-full lg:w-1/2 h-[65dvh] lg:h-dvh absolute left-0 max-lg:bottom-0 lg:top-0 bg-no-repeat bg-cover bg-center grayscale"></div>
     <div class="bg-gray-900 z-20 w-full lg:w-1/2 h-[35dvh] lg:h-dvh relative"></div>
@@ -34,27 +37,23 @@
                     <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" alt="Player avatar" :src="config.server_endpoint + '/avatar/s/' + characters.find((c) => c.id === selectedCharacterId)?.characterType?.id + '/' + (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 + '/' + (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]">
-                  <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" />
-                    <span class="text-white">Male</span>
-                  </button>
-                  <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" />
-                    <span class="text-white">Female</span>
-                  </button>
-                </div>
+                <!--                <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' }">-->
+                <!--                    <img src="/assets/icons/male-icon.svg" class="w-4 h-4 m-auto" alt="Male symbol" />-->
+                <!--                    <span class="text-white">Male</span>-->
+                <!--                  </button>-->
+                <!--                  <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" />-->
+                <!--                    <span class="text-white">Female</span>-->
+                <!--                  </button>-->
+                <!--                </div>-->
               </div>
             </div>
           </div>
@@ -74,7 +73,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 + '/assets/sprites/' + hair.sprite.id + '/front.png'" alt="Hair sprite" />
+                    <img class="h-4 object-contain" :src="config.server_endpoint + '/textures/sprites/' + hair.sprite + '/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>
@@ -126,10 +125,11 @@
 
 <script setup lang="ts">
 import config from '@/application/config'
-import { useGameStore } from '@/stores/gameStore'
-import { onBeforeUnmount, ref, watch } from 'vue'
+import { type CharacterHair, type Character as CharacterT, type Map } from '@/application/types'
 import Modal from '@/components/utilities/Modal.vue'
-import { type Character as CharacterT, type CharacterHair, type Zone } from '@/application/types'
+import { CharacterHairStorage } from '@/storage/storages'
+import { useGameStore } from '@/stores/gameStore'
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 const gameStore = useGameStore()
 const isLoading = ref<boolean>(true)
@@ -148,24 +148,22 @@ setTimeout(() => {
 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
 function loginWithCharacter() {
   if (!selectedCharacterId.value) return
 
-  gameStore.connection?.emit('character:connect', {
-    characterId: selectedCharacterId.value,
-    characterHairId: selectedHairId.value
-  }, (response: { character: CharacterT, zone: Zone, characters: CharacterT[] }) => {
-    gameStore.setCharacter(response.character)
-  })
+  gameStore.connection?.emit(
+    'character:connect',
+    {
+      characterId: selectedCharacterId.value,
+      characterHairId: selectedHairId.value
+    },
+    (response: { character: CharacterT; map: Map; characters: CharacterT[] }) => {
+      gameStore.setCharacter(response.character)
+    }
+  )
 }
 
 // Create character logics
@@ -180,7 +178,12 @@ 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

@@ -1,12 +1,15 @@
 <template>
   <div class="flex justify-center items-center h-dvh relative">
+    <div class="portrait-mode-notice hidden absolute h-[calc(100%_-_80px)] w-[calc(100%_-_80px)] left-0 top-0 bg-gray z-50 p-10 text-center">
+      <span class="text-lg">Noxious is not compatible with portrait mode on smaller screens. Please switch to landscape mode to play.</span>
+    </div>
     <Game :config="gameConfig" @create="createGame">
       <Scene name="main" @preload="preloadScene" @create="createScene">
         <Menu />
         <Hud />
         <Hotkeys />
         <Clock />
-        <Zone />
+        <Map />
         <Chat />
         <ExpBar />
 
@@ -20,19 +23,18 @@
 <script setup lang="ts">
 import config from '@/application/config'
 import 'phaser'
-import { Game, Scene } from 'phavuer'
+import CharacterProfile from '@/components/game/gui/CharacterProfile.vue'
+import Chat from '@/components/game/gui/Chat.vue'
+import Clock from '@/components/game/gui/Clock.vue'
+import ExpBar from '@/components/game/gui/ExpBar.vue'
+import Hotkeys from '@/components/game/gui/Hotkeys.vue'
+import Hud from '@/components/game/gui/Hud.vue'
+import Menu from '@/components/game/gui/Menu.vue'
+import Effects from '@/components/game/map/Effects.vue'
+import Map from '@/components/game/map/Map.vue'
 import { useGameStore } from '@/stores/gameStore'
-import Menu from '@/components/gui/Menu.vue'
-import ExpBar from '@/components/gui/ExpBar.vue'
-import Hud from '@/components/gui/Hud.vue'
-import Zone from '@/components/game/zone/Zone.vue'
-import Hotkeys from '@/components/gui/Hotkeys.vue'
-import Chat from '@/components/gui/Chat.vue'
-import CharacterProfile from '@/components/gui/CharacterProfile.vue'
-import Effects from '@/components/Effects.vue'
-// import Minimap from '@/components/gui/Minimap.vue'
-import Clock from '@/components/gui/Clock.vue'
-import AwaitLoaderPlugin from 'phaser3-rex-plugins/plugins/awaitloader-plugin'
+import { Game, Scene } from 'phavuer'
+import { onBeforeUnmount } from 'vue'
 
 const gameStore = useGameStore()
 
@@ -41,22 +43,11 @@ const gameConfig = {
   width: window.innerWidth,
   height: window.innerHeight,
   type: Phaser.AUTO, // AUTO, CANVAS, WEBGL, HEADLESS
-  resolution: 5,
-  plugins: {
-    global: [
-      {
-        key: 'rexAwaitLoader',
-        plugin: AwaitLoaderPlugin,
-        start: true
-      }
-    ]
-  }
+  resolution: 5
 }
 
 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)
   })
@@ -72,12 +63,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/zone/blank_tile.png')
+  // Load the base assets into the Phaser scene
+  scene.load.image('blank_tile', '/assets/map/blank_tile.png')
   scene.load.image('waypoint', '/assets/waypoint.png')
 }
 
 function createScene(scene: Phaser.Scene) {}
+
+onBeforeUnmount(() => {})
 </script>

src/components/screens/Loading.vue

@@ -1,25 +1,60 @@
 <template>
-  <div class="flex flex-col justify-center items-center h-dvh relative">
-    <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 class="flex flex-col justify-center items-center h-dvh relative col">
+    <svg width="40" height="40" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="4" cy="12" r="3" fill="white">
+        <animate id="spinner_qFRN" begin="0;spinner_OcgL.end+0.25s" attributeName="cy" calcMode="spline" dur="0.6s" values="12;6;12" keySplines=".33,.66,.66,1;.33,0,.66,.33" />
+      </circle>
+      <circle cx="12" cy="12" r="3" fill="white">
+        <animate begin="spinner_qFRN.begin+0.1s" attributeName="cy" calcMode="spline" dur="0.6s" values="12;6;12" keySplines=".33,.66,.66,1;.33,0,.66,.33" />
+      </circle>
+      <circle cx="20" cy="12" r="3" fill="white">
+        <animate id="spinner_OcgL" begin="spinner_qFRN.begin+0.2s" attributeName="cy" calcMode="spline" dur="0.6s" values="12;6;12" keySplines=".33,.66,.66,1;.33,0,.66,.33" />
+      </circle>
+    </svg>
   </div>
 </template>
 
 <script setup lang="ts" async>
+import config from '@/application/config'
+import type { HttpResponse, MapObject } from '@/application/types'
+import type { BaseStorage } from '@/storage/baseStorage'
+import { CharacterHairStorage, CharacterTypeStorage, MapObjectStorage, MapStorage, SpriteStorage, TileStorage } from '@/storage/storages'
+// import type { Map } from '@/application/types'
 import { useGameStore } from '@/stores/gameStore'
+import { ref } from 'vue'
 
 const gameStore = useGameStore()
 
-function continueBtnClick() {
-  // Play music
-  const audio = new Audio('/assets/music/login.mp3')
-  audio.play()
+const totalItems = ref(0)
+const currentItem = ref(0)
 
-  // Set isLoaded to true
-  gameStore.game.isLoaded = true
+async function downloadAndStore<T extends { id: string }>(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) {
+    await storage.add(item)
+  }
 }
+
+const tileStorage = new TileStorage()
+const mapStorage = new MapStorage()
+const mapObjectStorage = new MapObjectStorage()
+
+Promise.all([
+  downloadAndStore('tiles', tileStorage),
+  downloadAndStore('maps', mapStorage),
+  downloadAndStore('map_objects', mapObjectStorage),
+  downloadAndStore('sprites', new SpriteStorage()),
+  downloadAndStore('character_types', new CharacterTypeStorage()),
+  downloadAndStore('character_hair', new CharacterHairStorage())
+]).then(() => {
+  gameStore.game.isLoaded = true
+})
 </script>

src/components/screens/Login.vue

@@ -9,7 +9,7 @@
         <!--        <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="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)] max-lg:hidden" alt="UI box inner" />
+          <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="UI box inner" />
 
           <!-- Login Form -->
           <LoginForm v-if="currentForm === 'login' && !doesUrlHaveToken" @openResetPasswordModal="() => (isPasswordResetFormShown = true)" @switchToRegister="currentForm = 'register'" />
@@ -26,13 +26,13 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import LoginForm from '@/components/login/LoginForm.vue'
+import NewPasswordForm from '@/components/login/NewPasswordForm.vue'
+import RegisterForm from '@/components/login/RegisterForm.vue'
+import ResetPassword from '@/components/login/ResetPasswordModal.vue'
 import { useGameStore } from '@/stores/gameStore'
 import { useCookies } from '@vueuse/integrations/useCookies'
-import LoginForm from '@/components/login/LoginForm.vue'
-import RegisterForm from '@/components/login/RegisterForm.vue'
-import NewPasswordForm from '@/components/login/NewPasswordForm.vue'
-import ResetPassword from '@/components/login/ResetPasswordModal.vue'
+import { onMounted, ref } from 'vue'
 
 const isPasswordResetFormShown = ref(false)
 const doesUrlHaveToken = ref(window.location.hash !== '')

src/components/screens/MapEditor.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="flex justify-center items-center h-dvh relative">
+    <Game :config="gameConfig" @create="createGame">
+      <Scene name="main" @preload="preloadScene" @create="createScene">
+        <MapEditor :key="JSON.stringify(`${mapEditorStore.map?.id}_${mapEditorStore.map?.createdAt}_${mapEditorStore.map?.updatedAt}`)" v-if="isLoaded" />
+        <div v-else class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-white text-3xl font-ui">Loading...</div>
+      </Scene>
+    </Game>
+  </div>
+</template>
+
+<script setup lang="ts">
+import config from '@/application/config'
+import 'phaser'
+import MapEditor from '@/components/gameMaster/mapEditor/MapEditor.vue'
+import { loadAllTilesIntoScene } from '@/composables/mapComposable'
+import { useGameStore } from '@/stores/gameStore'
+import { useMapEditorStore } from '@/stores/mapEditorStore'
+import { Game, Scene } from 'phavuer'
+import { ref } from 'vue'
+
+const gameStore = useGameStore()
+const mapEditorStore = useMapEditorStore()
+
+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
+  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/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')
+
+  await loadAllTilesIntoScene(scene)
+
+  await new Promise<void>((resolve) => {
+    scene.load.on(Phaser.Loader.Events.COMPLETE, () => {
+      resolve()
+    })
+    isLoaded.value = true
+  })
+}
+
+const createScene = async (scene: Phaser.Scene) => {}
+</script>

src/components/screens/ZoneEditor.vue

@@ -1,85 +0,0 @@
-<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 { Game, Scene } from 'phavuer'
-import { useGameStore } from '@/stores/gameStore'
-import { useZoneEditorStore } from '@/stores/zoneEditorStore'
-import ZoneEditor from '@/components/gameMaster/zoneEditor/ZoneEditor.vue'
-import AwaitLoaderPlugin from 'phaser3-rex-plugins/plugins/awaitloader-plugin'
-import { loadTexture } from '@/composables/gameComposable'
-import type { AssetDataT } from '@/application/types'
-
-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,10 +3,10 @@
 </template>
 
 <script setup lang="ts">
+import { useCameraControls } from '@/composables/useCameraControls'
+import { usePointerHandlers } from '@/composables/usePointerHandlers'
 import { Image, useScene } from 'phavuer'
 import { onBeforeUnmount, ref } from 'vue'
-import { usePointerHandlers } from '@/composables/usePointerHandlers'
-import { useCameraControls } from '@/composables/useCameraControls'
 
 // Types
 type WayPoint = { visible: boolean; x: number; y: number }

src/components/utilities/Debug.vue

@@ -0,0 +1,46 @@
+<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>

src/components/utilities/Notifications.vue

@@ -10,8 +10,8 @@
 </template>
 
 <script setup lang="ts">
-import { useGameStore } from '@/stores/gameStore'
 import Modal from '@/components/utilities/Modal.vue'
+import { useGameStore } from '@/stores/gameStore'
 import { onBeforeMount, onBeforeUnmount, onMounted, onUnmounted, watch } from 'vue'
 
 const gameStore = useGameStore()

src/composables/game/scene/loaderComposable.ts

@@ -1,34 +0,0 @@
-export function createSceneLoader(scene: Phaser.Scene) {
-  const width = scene.cameras.main.width
-  const height = scene.cameras.main.height
-
-  const progressBox = scene.add.graphics()
-  const progressBar = scene.add.graphics()
-  progressBox.fillStyle(0x222222, 0.8)
-  progressBox.fillRect(width / 2 - 180, height / 2, 320, 50)
-
-  const loadingText = scene.make.text({
-    x: width / 2,
-    y: height / 2 - 50,
-    text: 'Loading...',
-    style: {
-      font: '20px monospace',
-      // @ts-ignore
-      fill: '#ffffff'
-    }
-  })
-  loadingText.setOrigin(0.5, 0.5)
-
-  scene.load.on(Phaser.Loader.Events.PROGRESS, function (value: any) {
-    progressBar.clear()
-    progressBar.fillStyle(0x368f8b, 1)
-    progressBar.fillRect(width / 2 - 180 + 10, height / 2 + 10, 300 * value, 30)
-  })
-
-  scene.load.on(Phaser.Loader.Events.COMPLETE, function () {
-    progressBar.destroy()
-    progressBox.destroy()
-    loadingText.destroy()
-    return true
-  })
-}

src/composables/gameComposable.ts

@@ -1,96 +1,103 @@
-import type { AssetDataT, HttpResponse, Sprite, SpriteAction } from '@/application/types'
+import type { TextureData } from '@/application/types'
+import { SpriteStorage } from '@/storage/storages'
+import { TextureStorage } from '@/storage/textureStorage'
 import { useGameStore } from '@/stores/gameStore'
-import { AssetStorage } from '@/storage/assetStorage'
-import config from '@/application/config'
 
 const textureLoadingPromises = new Map<string, Promise<boolean>>()
 
-export async function loadTexture(scene: Phaser.Scene, assetData: AssetDataT): Promise<boolean> {
+export async function loadTexture(scene: Phaser.Scene, textureData: TextureData): Promise<boolean> {
   const gameStore = useGameStore()
-  const assetStorage = new AssetStorage()
+  const textureStorage = new TextureStorage()
 
   // Check if the texture is already loaded in Phaser
-  if (gameStore.game.loadedAssets.find((asset) => asset.key === assetData.key)) {
-    return Promise.resolve(true)
+  if (gameStore.game.loadedTextures.find((texture) => texture === textureData.key)) {
+    return true
   }
 
   // If there's already a loading promise for this texture, return it
-  if (textureLoadingPromises.has(assetData.key)) {
-    return await textureLoadingPromises.get(assetData.key)!
+  if (textureLoadingPromises.has(textureData.key)) {
+    return await textureLoadingPromises.get(textureData.key)!
   }
 
   // Create new loading promise
   const loadingPromise = (async () => {
     // Check if the asset is already cached
-    let asset = await assetStorage.get(assetData.key)
+    let texture = await textureStorage.get(textureData.key)
 
     // If asset is not found, download it
-    if (!asset) {
-      await assetStorage.download(assetData)
-      asset = await assetStorage.get(assetData.key)
+    if (!texture) {
+      await textureStorage.download(textureData)
+      texture = await textureStorage.get(textureData.key)
     }
 
     // If asset is found, add it to the scene
-    if (asset) {
+    if (texture) {
       return new Promise<boolean>((resolve) => {
         // Remove existing texture if it exists
-        if (scene.textures.exists(asset.key)) {
-          scene.textures.remove(asset.key)
+        if (scene.textures.exists(texture.key)) {
+          scene.textures.remove(texture.key)
         }
 
-        scene.textures.addBase64(asset.key, asset.data)
-        scene.textures.once(`addtexture-${asset.key}`, () => {
-          gameStore.game.loadedAssets.push(assetData)
-          textureLoadingPromises.delete(assetData.key) // Clean up the promise
+        scene.textures.addBase64(texture.key, texture.data)
+        scene.textures.once(`addtexture-${texture.key}`, () => {
+          gameStore.game.loadedTextures.push(textureData.key)
+          textureLoadingPromises.delete(textureData.key) // Clean up the promise
           resolve(true)
         })
       })
     }
 
-    textureLoadingPromises.delete(assetData.key) // Clean up the promise
-    return Promise.resolve(false)
+    textureLoadingPromises.delete(textureData.key) // Clean up the promise
+    return false
   })()
 
   // Store the loading promise
-  textureLoadingPromises.set(assetData.key, loadingPromise)
+  textureLoadingPromises.set(textureData.key, loadingPromise)
   return loadingPromise
 }
 
-export async function loadSpriteTextures(scene: Phaser.Scene, sprite: Sprite) {
-  if (!sprite) return
+export async function loadSpriteTextures(scene: Phaser.Scene, sprite_id: string) {
+  if (!sprite_id) return false
 
   // @TODO: Fix this
-  const sprite_actions: HttpResponse<any[]> = await fetch(config.server_endpoint + '/assets/list_sprite_actions/' + sprite?.id).then((response) => response.json())
+  const spriteStorage = new SpriteStorage()
+  const sprite = await spriteStorage.get(sprite_id)
 
-  for await (const sprite_action of sprite_actions.data ?? []) {
+  if (!sprite) {
+    console.error('Failed to load sprite:', sprite_id)
+    return false
+  }
+
+  for await (const sprite_action of sprite.spriteActions) {
+    const key = sprite.id + '-' + sprite_action.action
     await loadTexture(scene, {
-      key: sprite_action.key,
-      data: sprite_action.data,
+      key,
+      data: '/textures/sprites/' + sprite.id + '/' + sprite_action.action + '.png',
       group: sprite_action.isAnimated ? 'sprite_animations' : 'sprites',
       updatedAt: sprite_action.updatedAt,
-      originX: sprite_action.originX ?? 0,
-      originY: sprite_action.originY ?? 0,
+      originX: sprite_action.originX,
+      originY: sprite_action.originY,
       isAnimated: sprite_action.isAnimated,
       frameWidth: sprite_action.frameWidth,
       frameHeight: sprite_action.frameHeight,
       frameRate: sprite_action.frameRate
-    } as AssetDataT)
+    } as TextureData)
 
     // If the sprite is not animated, skip
     if (!sprite_action.isAnimated) continue
 
     // Check if animation already exists
-    if (scene.anims.get(sprite_action.key)) continue
+    if (scene.anims.get(key)) continue
 
     // Add the animation to the scene
-    const anim = scene.textures.get(sprite_action.key)
-    scene.textures.addSpriteSheet(sprite_action.key, anim, { frameWidth: sprite_action.frameWidth ?? 0, frameHeight: sprite_action.frameHeight ?? 0 })
+    const anim = scene.textures.get(key)
+    scene.textures.addSpriteSheet(key, anim, { frameWidth: sprite_action.frameWidth ?? 0, frameHeight: sprite_action.frameHeight ?? 0 })
     scene.anims.create({
-      key: sprite_action.key,
+      key: key,
       frameRate: sprite_action.frameRate,
-      frames: scene.anims.generateFrameNumbers(sprite_action.key, { start: 0, end: sprite_action.frameCount! - 1 }),
+      frames: scene.anims.generateFrameNumbers(key, { start: 0, end: sprite_action.frameCount! - 1 }),
       repeat: -1
     })
   }
-  return Promise.resolve(true)
+  return true
 }

src/composables/mapComposable.ts

@@ -0,0 +1,142 @@
+import config from '@/application/config'
+import type { HttpResponse, TextureData, UUID } from '@/application/types'
+import { unduplicateArray } from '@/application/utilities'
+import { loadTexture } from '@/composables/gameComposable'
+import { MapStorage, TileStorage } from '@/storage/storages'
+
+import Tilemap = Phaser.Tilemaps.Tilemap
+import TilemapLayer = Phaser.Tilemaps.TilemapLayer
+import Tileset = Phaser.Tilemaps.Tileset
+import Tile = Phaser.Tilemaps.Tile
+
+export function getTile(layer: TilemapLayer | Tilemap, positionX: number, positionY: number): Tile | null {
+  const tile = layer?.getTileAtWorldXY(positionX, positionY)
+  if (!tile) return null
+  return tile
+}
+
+export function tileToWorldXY(layer: TilemapLayer | Tilemap, positionX: number, positionY: number) {
+  const worldPoint = layer.tileToWorldXY(positionX, positionY)
+  if (!worldPoint) return { worldPositionX: 0, worldPositionY: 0 }
+
+  const worldPositionX = worldPoint.x + config.tile_size.height
+  const worldPositionY = worldPoint.y
+
+  return { worldPositionX, worldPositionY }
+}
+
+export function tileToWorldX(layer: TilemapLayer | Tilemap, positionX: number, positionY: number): number {
+  const worldPoint = layer.tileToWorldXY(positionX, positionY)
+  if (!worldPoint) return 0
+
+  return worldPoint.x + config.tile_size.width / 2
+}
+
+export function tileToWorldY(layer: TilemapLayer | Tilemap, positionX: number, positionY: number): number {
+  const worldPoint = layer.tileToWorldXY(positionX, positionY)
+  if (!worldPoint) return 0
+
+  return worldPoint.y + config.tile_size.height * 1.5
+}
+
+/**
+ * Can also be used to replace tiles
+ * @param map
+ * @param layer
+ * @param positionX
+ * @param positionY
+ * @param tileName
+ */
+export function placeTile(map: Tilemap, layer: TilemapLayer, positionX: number, positionY: number, tileName: string) {
+  let tileImg = map.getTileset(tileName) as Tileset
+  if (!tileImg) {
+    tileImg = map.getTileset('blank_tile') as Tileset
+  }
+  layer.putTileAt(tileImg.firstgid, positionX, positionY)
+}
+
+export function setLayerTiles(map: Tilemap, layer: TilemapLayer, tiles: string[][]) {
+  if (!tiles) return
+
+  tiles.forEach((row: string[], y: number) => {
+    row.forEach((tile: string, x: number) => {
+      placeTile(map, layer, x, y, tile)
+    })
+  })
+}
+
+export function createTileArray(width: number, height: number, tile: string = 'blank_tile') {
+  return Array.from({ length: height }, () => Array.from({ length: width }, () => tile))
+}
+
+export const calculateIsometricDepth = (positionX: number, positionY: number, width: number = 0, height: number = 0, isCharacter: boolean = false) => {
+  const baseDepth = positionX + positionY
+  if (isCharacter) {
+    return baseDepth // @TODO: Fix collision, this is a hack
+  }
+  return baseDepth + (width + height) / (2 * config.tile_size.width)
+}
+
+export function FlattenMapArray(tiles: string[][]) {
+  const normalArray = []
+
+  for (const row of tiles) {
+    normalArray.push(...row)
+  }
+
+  return normalArray
+}
+
+export async function loadMapTilesIntoScene(map_id: UUID, scene: Phaser.Scene) {
+  const tileStorage = new TileStorage()
+  const mapStorage = new MapStorage()
+  const map = await mapStorage.get(map_id)
+  if (!map) return
+
+  const tileArray = unduplicateArray(FlattenMapArray(map.tiles))
+  const tiles = await tileStorage.getByIds(tileArray)
+
+  // Load each tile into the scene
+  for (const tile of tiles) {
+    const textureData = {
+      key: tile.id,
+      data: '/textures/tiles/' + tile.id + '.png',
+      group: 'tiles',
+      updatedAt: tile.updatedAt
+    } as TextureData
+    await loadTexture(scene, textureData)
+  }
+}
+
+export async function loadTilesIntoScene(tileIds: string[], scene: Phaser.Scene) {
+  const tileStorage = new TileStorage()
+
+  const tiles = await tileStorage.getByIds(tileIds)
+
+  // Load each tile into the scene
+  for (const tile of tiles) {
+    const textureData = {
+      key: tile.id,
+      data: '/textures/tiles/' + tile.id + '.png',
+      group: 'tiles',
+      updatedAt: tile.updatedAt
+    } as TextureData
+    await loadTexture(scene, textureData)
+  }
+}
+
+export async function loadAllTilesIntoScene(scene: Phaser.Scene) {
+  const tileStorage = new TileStorage()
+  const tiles = await tileStorage.getAll()
+
+  // Load each tile into the scene
+  for (const tile of tiles) {
+    const textureData = {
+      key: tile.id,
+      data: '/textures/tiles/' + tile.id + '.png',
+      group: 'tiles',
+      updatedAt: tile.updatedAt
+    } as TextureData
+    await loadTexture(scene, textureData)
+  }
+}