Worked on dynamic texture loading

MVP Dexie loader
Cookies
2024-10-25 22:17:02 +02:00 · 2024-10-21 18:35:36 +02:00 · 2024-10-21 02:15:29 +02:00 · 2024-10-21 02:08:27 +02:00 · 2024-10-20 01:10:29 +02:00 · 2024-10-19 22:36:08 +02:00
73 changed files with 2162 additions and 1396 deletions
--- a/1
+++ b/1
@ -27,5 +27,6 @@ RUN npm run build-ntc
 # Production stage
 FROM nginx:1.26.1-alpine
 COPY --from=builder /usr/src/app/dist /usr/share/nginx/html
 COPY nginx.conf /etc/nginx/conf.d/default.conf
 EXPOSE 80
 CMD ["nginx", "-g", "daemon off;"]
--- a/index.html
+++ b/index.html
@ -3,7 +3,7 @@
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Sylvan Quest - Play</title>
  </head>
  <body>
--- a/nginx.conf
+++ b/nginx.conf
@ -0,0 +1,16 @@
 server {
    listen 80;
    server_name localhost;
    root /usr/share/nginx/html;
    index index.html;
    # Redirect example
    location /discord {
        return 301 https://discord.gg/JTev3nzeDa;
    }
    # Serve static files
    location / {
        try_files $uri $uri/ /index.html;
    }
 }
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -18,11 +18,12 @@
    "@vueuse/core": "^10.5.0",
    "@vueuse/integrations": "^10.5.0",
    "axios": "^1.7.7",
-    "phaser": "^3.85.2",
+    "dexie": "^4.0.8",
    "phaser": "^3.86.0",
    "pinia": "^2.1.6",
    "socket.io-client": "^4.8.0",
    "universal-cookie": "^6.1.3",
-    "vue": "^3.5.10",
+    "vue": "^3.5.12",
    "zod": "^3.22.2"
  },
  "devDependencies": {
@ -48,8 +49,8 @@
    "sass": "^1.79.4",
    "tailwindcss": "^3.4.13",
    "typescript": "~5.6.2",
-    "vite": "^5.4.8",
+    "vite": "^5.4.9",
-    "vite-plugin-vue-devtools": "^7.4.6",
+    "vite-plugin-vue-devtools": "^7.5.2",
    "vitest": "^2.0.3",
    "vue-tsc": "^1.6.5"
  }
--- a/public/assets/icons/increase-size-option.svg
+++ b/public/assets/icons/increase-size-option.svg
@ -0,0 +1,51 @@
 <?xml version="1.0" encoding="iso-8859-1"?>
 <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 width="438.529px" height="438.529px" viewBox="0 0 438.529 438.529" style="enable-background:new 0 0 438.529 438.529;"
 	 xml:space="preserve">
 <g>
 	<g>
 		<path d="M180.156,225.828c-1.903-1.902-4.093-2.854-6.567-2.854c-2.475,0-4.665,0.951-6.567,2.854l-94.787,94.787l-41.112-41.117
 			c-3.617-3.61-7.895-5.421-12.847-5.421c-4.952,0-9.235,1.811-12.851,5.421c-3.617,3.621-5.424,7.905-5.424,12.854v127.907
 			c0,4.948,1.807,9.229,5.424,12.847c3.619,3.613,7.902,5.424,12.851,5.424h127.906c4.949,0,9.23-1.811,12.847-5.424
 			c3.615-3.617,5.424-7.898,5.424-12.847s-1.809-9.233-5.424-12.854l-41.112-41.104l94.787-94.793
 			c1.902-1.903,2.853-4.086,2.853-6.564c0-2.478-0.953-4.66-2.853-6.57L180.156,225.828z"/>
 		<path d="M433.11,5.424C429.496,1.807,425.212,0,420.263,0H292.356c-4.948,0-9.227,1.807-12.847,5.424
 			c-3.614,3.615-5.421,7.898-5.421,12.847s1.807,9.233,5.421,12.847l41.106,41.112l-94.786,94.787
 			c-1.901,1.906-2.854,4.093-2.854,6.567s0.953,4.665,2.854,6.567l32.552,32.548c1.902,1.903,4.086,2.853,6.563,2.853
 			s4.661-0.95,6.563-2.853l94.794-94.787l41.104,41.109c3.62,3.616,7.905,5.428,12.854,5.428s9.229-1.812,12.847-5.428
 			c3.614-3.614,5.421-7.898,5.421-12.847V18.268C438.53,13.315,436.734,9.04,433.11,5.424z"/>
 	</g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 </svg>
--- a/public/assets/icons/resize-icon.svg
+++ b/public/assets/icons/resize-icon.svg
@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
 <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 15L15 21M21 8L8 21" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21 15L15 21M21 8L8 21" stroke="#4d4d4d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
--- a/public/assets/music/click-btn.mp3
+++ b/public/assets/music/click-btn.mp3
--- a/public/assets/music/login.mp3
+++ b/public/assets/music/login.mp3
--- a/src/App.vue
+++ b/src/App.vue
@ -1,36 +1,33 @@
 <template>
-  <div class="overflow-hidden">
+  <Notifications />
-    <Notifications />
+  <GmTools v-if="gameStore.character?.role === 'gm'" />
-    <Login v-if="screen === 'login'" />
+  <GmPanel v-if="gameStore.character?.role === 'gm'" />
-    <!--    <Register v-if="screen === 'register'" />-->
+
-    <Characters v-if="screen === 'characters'" />
+  <component :is="currentScreen" />
    <Game v-if="screen === 'game'" />
  </div>
 </template>
 <script setup lang="ts">
 import { useGameStore } from '@/stores/gameStore'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import Notifications from '@/components/utilities/Notifications.vue'
 import GmTools from '@/components/gameMaster/GmTools.vue'
 import GmPanel from '@/components/gameMaster/GmPanel.vue'
 import Login from '@/screens/Login.vue'
 // import Register from '@/screens/Register.vue'
 import Characters from '@/screens/Characters.vue'
 import Game from '@/screens/Game.vue'
 // import Loading from '@/screens/Loading.vue'
 import ZoneEditor from '@/screens/ZoneEditor.vue'
 import { computed } from 'vue'
 const gameStore = useGameStore()
 const zoneEditorStore = useZoneEditorStore()
-const screen = computed(() => {
+const currentScreen = computed(() => {
-  if (!gameStore.connection) {
+  // if (!gameStore.isAssetsLoaded) return Loading
-    return 'login'
+  if (!gameStore.connection) return Login
-  } else if (gameStore.token && gameStore.connection) {
+  if (!gameStore.token) return Login
-    if (gameStore.character) {
+  if (!gameStore.character) return Characters
-      return 'game'
+  if (zoneEditorStore.active) return ZoneEditor
-    }
+  return Game
    return 'characters'
  }
  return 'login' // default fallback
 })
 // Disable right click
 addEventListener('contextmenu', (event) => event.preventDefault())
 </script>
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@ -12,7 +12,7 @@
 //Globals
 body {
-  @apply bg-black m-0 select-none overscroll-none overflow-hidden;
+  @apply bg-black m-0 select-none;
  -ms-overflow-style: none;
  scrollbar-width: none;
@ -20,6 +20,9 @@ body {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
  // Disable pinch zoom
  touch-action: pan-x pan-y;
 }
 h1,
@ -61,7 +64,7 @@ input {
 }
 .input-field {
-  @apply px-4 py-2.5 text-base focus-visible:outline-none bg-gray border border-solid border-gray-500 rounded text-gray-300;
+  @apply px-4 py-2.5 text-base leading-5 focus-visible:outline-none bg-gray border border-solid border-gray-500 rounded text-gray-300;
  &.inactive {
    @apply bg-gray-600/50 hover:cursor-not-allowed;
    &::placeholder {
@ -87,7 +90,7 @@ button {
  @apply text-center;
  &.btn-cyan {
-    @apply bg-cyan text-gray-50 text-base rounded py-2.5;
+    @apply bg-cyan text-gray-50 text-base leading-5 rounded py-2.5;
    &.active,
    &:hover {
@ -96,7 +99,7 @@ button {
  }
  &.btn-red {
-    @apply bg-red text-gray-50 text-base rounded py-2.5;
+    @apply bg-red text-gray-50 text-base leading-5 rounded py-2.5;
    &.active,
    &:hover {
@ -104,6 +107,15 @@ button {
    }
  }
  &.btn-empty {
    @apply text-gray-50 border-2 border-solid border-gray-500 text-base leading-5 rounded py-2.5;
    &.active,
    &:hover {
      @apply bg-gray-700 border-gray-700;
    }
  }
  &:hover {
    @apply cursor-pointer;
  }
@ -120,3 +132,12 @@ button {
 ::-webkit-scrollbar {
  @apply hidden;
 }
 canvas {
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  image-rendering: pixelated;
  position: fixed;
  left: 0;
  top: 0;
 }
--- a/src/components/Effects.vue
+++ b/src/components/Effects.vue
@ -1,28 +1,21 @@
 <template>
-  <Scene name="effects" @preload="preloadScene" @create="createScene" @update="updateScene">
+  <Scene name="effects" @preload="preloadScene" @create="createScene" @update="updateScene"> </Scene>
  </Scene>
 </template>
 <script setup lang="ts">
 import { Scene } from 'phavuer'
-import { useGameStore } from '@/stores/gameStore'
+import { useZoneStore } from '@/stores/zoneStore'
-import { useZoneEditorStore } from '@/stores/zoneEditorStore'
+import { onBeforeUnmount, ref, watch } from 'vue'
 import { onBeforeMount, onBeforeUnmount, ref } from 'vue'
-const gameStore = useGameStore()
+const zoneStore = useZoneStore()
 const zoneEditorStore = useZoneEditorStore()
 const sceneRef = ref<Phaser.Scene | null>(null)
 // Effect-related refs
-const dayNightCycle = ref<Phaser.GameObjects.Graphics | null>(null)
+const lightEffect = ref<Phaser.GameObjects.Graphics | null>(null)
 const rainEmitter = ref<Phaser.GameObjects.Particles.ParticleEmitter | null>(null)
 const fogSprite = ref<Phaser.GameObjects.Sprite | null>(null)
 // Effect parameters
 const dayNightDuration = 300000 // 5 minutes in milliseconds
 const maxDarkness = 0.7
 const preloadScene = async (scene: Phaser.Scene) => {
  scene.load.image('raindrop', 'assets/raindrop.png')
  scene.load.image('fog', 'assets/fog.png')
@ -30,28 +23,18 @@ const preloadScene = async (scene: Phaser.Scene) => {
 const createScene = async (scene: Phaser.Scene) => {
  sceneRef.value = scene
-  createDayNightCycle(scene)
+  createLightEffect(scene)
  createRainEffect(scene)
  createFogEffect(scene)
 }
-const updateScene = (scene: Phaser.Scene, time: number) => {
+const updateScene = () => {
-  updateDayNightCycle(time)
+  updateEffects()
  updateFogEffect()
 }
-const createDayNightCycle = (scene: Phaser.Scene) => {
+const createLightEffect = (scene: Phaser.Scene) => {
-  dayNightCycle.value = scene.add.graphics()
+  lightEffect.value = scene.add.graphics()
-  dayNightCycle.value.setDepth(1000)
+  lightEffect.value.setDepth(1000)
 }
 const updateDayNightCycle = (time: number) => {
  if (!dayNightCycle.value) return
  const darkness = Math.sin((time % dayNightDuration) / dayNightDuration * Math.PI) * maxDarkness
  dayNightCycle.value.clear()
  dayNightCycle.value.fillStyle(0x000000, darkness)
  dayNightCycle.value.fillRect(0, 0, window.innerWidth, window.innerHeight)
 }
 const createRainEffect = (scene: Phaser.Scene) => {
@ -66,13 +49,7 @@ const createRainEffect = (scene: Phaser.Scene) => {
    blendMode: 'ADD'
  })
  rainEmitter.value.setDepth(900)
-  toggleRain(true) // Start with rain off
+  rainEmitter.value.stop()
 }
 const toggleRain = (isRaining: boolean) => {
  if (rainEmitter.value) {
    rainEmitter.value.setVisible(isRaining)
  }
 }
 const createFogEffect = (scene: Phaser.Scene) => {
@ -82,28 +59,52 @@ const createFogEffect = (scene: Phaser.Scene) => {
  fogSprite.value.setDepth(950)
 }
-const updateFogEffect = () => {
+const updateEffects = () => {
-  if (fogSprite.value) {
+  const effects = zoneStore.zone?.zoneEffects || []
    // Example: Oscillate fog opacity
    const fogOpacity = (Math.sin(Date.now() / 5000) + 1) / 2 * 0.3
    fogSprite.value.setAlpha(fogOpacity)
  }
 }
-// Expose methods to control effects
+  effects.forEach((effect) => {
-const controlEffects = {
+    switch (effect.effect) {
-  toggleRain,
+      case 'light':
-  setFogDensity: (density: number) => {
+        updateLightEffect(effect.strength)
-    if (fogSprite.value) {
+        break
-      fogSprite.value.setAlpha(density)
+      case 'rain':
        updateRainEffect(effect.strength)
        break
      case 'fog':
        updateFogEffect(effect.strength)
        break
    }
  })
 }
 const updateLightEffect = (strength: number) => {
  if (!lightEffect.value) return
  const darkness = 1 - strength / 100
  lightEffect.value.clear()
  lightEffect.value.fillStyle(0x000000, darkness)
  lightEffect.value.fillRect(0, 0, window.innerWidth, window.innerHeight)
 }
 const updateRainEffect = (strength: number) => {
  if (!rainEmitter.value) return
  if (strength > 0) {
    rainEmitter.value.start()
    rainEmitter.value.setQuantity(Math.floor((strength / 100) * 10))
  } else {
    rainEmitter.value.stop()
  }
 }
-// Make control methods available to parent components
+const updateFogEffect = (strength: number) => {
-defineExpose(controlEffects)
+  if (!fogSprite.value) return
  fogSprite.value.setAlpha(strength / 100)
 }
 watch(() => zoneStore.zone?.zoneEffects, updateEffects, { deep: true })
 onBeforeUnmount(() => {
  if (sceneRef.value) sceneRef.value.scene.remove('effects')
 })
-</script>
+
 // @TODO : Fix resize issue
 </script>
--- a/src/components/forms/ChipsInput.vue
+++ b/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">
-      <span class="text-xs">{{ chip }}</span>
+      <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>
    </div>
-    <input class="outline-none border-none p-1" placeholder="Tag name" v-model="currentInput" @keypress.enter.prevent="addChip" @keydown.backspace="handleBackspace" />
+    <input class="outline-none border-none p-1 text-gray-300" placeholder="Tag name" v-model="currentInput" @keypress.enter.prevent="addChip" @keydown.backspace="handleBackspace" />
  </div>
 </template>
--- a/src/components/gameMaster/GmPanel.vue
+++ b/src/components/gameMaster/GmPanel.vue
@ -1,7 +1,6 @@
 <template>
  <Modal :isModalOpen="gameStore.uiSettings.isGmPanelOpen" @modal:close="() => gameStore.toggleGmPanel()" :modal-width="1000" :modal-height="650" :can-full-screen="true">
    <template #modalHeader>
      <h3 class="m-0 font-medium shrink-0 text-gray-300">GM Panel</h3>
      <div class="flex gap-1.5 flex-wrap">
        <button @mousedown.stop class="btn-cyan py-1.5 px-4 min-w-24">General</button>
        <button @mousedown.stop class="btn-cyan py-1.5 px-4 min-w-24">Users</button>
--- a/src/components/gameMaster/GmTools.vue
+++ b/src/components/gameMaster/GmTools.vue
@ -1,7 +1,7 @@
 <template>
  <Modal :isModalOpen="true" :closable="false" :is-resizable="false" :modal-width="modalWidth" :modal-height="modalHeight" :modal-position-x="posXY.x" :modal-position-y="posXY.y">
    <template #modalHeader>
-      <h3 class="m-0 font-medium shrink-0 text-gray-300">GM tools</h3>
+      <h3 class="m-0 font-medium shrink-0 text-white">GM tools</h3>
    </template>
    <template #modalBody>
      <div class="content flex flex-col gap-2.5 m-4 h-20">
@ -20,7 +20,7 @@ import { onMounted, ref } from 'vue'
 const zoneEditorStore = useZoneEditorStore()
 const gameStore = useGameStore()
 const modalWidth = ref(200)
-const modalHeight = ref(180)
+const modalHeight = ref(170)
 let posXY = ref({ x: 0, y: 0 })
--- a/src/components/gameMaster/assetManager/AssetManager.vue
+++ b/src/components/gameMaster/assetManager/AssetManager.vue
@ -1,56 +1,70 @@
 <template>
  <div class="flex h-full w-full relative">
-    <div class="w-2/12 flex flex-col relative">
+    <div class="w-2/12 flex flex-col relative overflow-auto">
      <!-- Asset Categories -->
      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'tiles' }" @click="() => (selectedCategory = 'tiles')">
-        <span>Tiles</span>
+        <span :class="{ 'text-white': selectedCategory === 'tiles' }">Tiles</span>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
      </a>
      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'objects' }" @click="() => (selectedCategory = 'objects')">
-        <span>Objects</span>
+        <span :class="{ 'text-white': selectedCategory === 'objects' }">Objects</span>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
      </a>
      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'sprites' }" @click="() => (selectedCategory = 'sprites')">
-        <span>Sprites</span>
+        <span :class="{ 'text-white': selectedCategory === 'sprites' }">Sprites</span>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
      </a>
      <a class="relative p-2.5 hover:cursor-pointer">
        <span>Items</span>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
      </a>
      <a class="relative p-2.5 hover:cursor-pointer">
        <span>NPC's</span>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
      </a>
-      <a class="relative p-2.5 hover:cursor-pointer">
+      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'shops' }" @click="() => (selectedCategory = 'shops')">
-        <span>Characters</span>
+        <span :class="{ 'text-white': selectedCategory === 'shops' }">Shops</span>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
      </a>
      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'characterTypes' }" @click="() => (selectedCategory = 'characterTypes')">
        <span :class="{ 'text-white': selectedCategory === 'characterTypes' }">Character types</span>
        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
      </a>
      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'characterHair' }" @click="() => (selectedCategory = 'characterHair')">
        <span :class="{ 'text-white': selectedCategory === 'characterHair' }">Character hair</span>
        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
      </a>
      <a class="relative p-2.5 hover:cursor-pointer">
        <span>Mounts</span>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
      </a>
      <a class="relative p-2.5 hover:cursor-pointer">
        <span>Pets</span>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
      </a>
      <a class="relative p-2.5 hover:cursor-pointer">
        <span>Emoticons</span>
        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
      </a>
    </div>
-    <div class="absolute w-px bg-cyan-200 h-full top-0 left-1/6"></div>
+    <div class="absolute w-px bg-gray-500 h-full top-0 left-1/6"></div>
    <!-- Assets list -->
    <div class="overflow-auto h-full w-4/12 flex flex-col relative">
      <TileList v-if="selectedCategory === 'tiles'" />
      <ObjectList v-if="selectedCategory === 'objects'" />
      <SpriteList v-if="selectedCategory === 'sprites'" />
      <CharacterTypeList v-if="selectedCategory === 'characterTypes'" />
    </div>
-    <div class="absolute w-px bg-cyan-200 h-full top-0 left-1/2"></div>
+    <div class="absolute w-px bg-gray-500 h-full top-0 left-1/2"></div>
    <!-- Asset details -->
    <div class="flex w-1/2 after:hidden flex-col relative overflow-auto">
      <TileDetails v-if="selectedCategory === 'tiles' && assetManagerStore.selectedTile" />
      <ObjectDetails v-if="selectedCategory === 'objects' && assetManagerStore.selectedObject" />
      <SpriteDetails v-if="selectedCategory === 'sprites' && assetManagerStore.selectedSprite" />
      <CharacterTypeDetails v-if="selectedCategory === 'characterTypes' && assetManagerStore.selectedCharacterType" />
    </div>
  </div>
 </template>
@ -64,6 +78,8 @@ import ObjectList from '@/components/gameMaster/assetManager/partials/object/Obj
 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'
 const assetManagerStore = useAssetManagerStore()
 const selectedCategory = ref('tiles')
--- a/src/components/gameMaster/assetManager/partials/characterType/CharacterTypeDetails.vue
+++ b/src/components/gameMaster/assetManager/partials/characterType/CharacterTypeDetails.vue
@ -0,0 +1,117 @@
 <template>
  <div class="h-full overflow-auto">
    <div class="m-2.5 p-2.5 block">
      <form class="flex gap-2.5 flex-wrap" @submit.prevent="saveCharacterType">
        <div class="form-field-full">
          <label for="name">Name</label>
          <input v-model="characterName" class="input-field" type="text" name="name" placeholder="Character Type Name" />
        </div>
        <div class="form-field-half">
          <label for="gender">Gender</label>
          <select v-model="characterGender" class="input-field" name="gender">
            <option v-for="gender in genderOptions" :key="gender" :value="gender">{{ gender }}</option>
          </select>
        </div>
        <div class="form-field-half">
          <label for="race">Race</label>
          <select v-model="characterRace" class="input-field" name="race">
            <option v-for="race in raceOptions" :key="race" :value="race">{{ race }}</option>
          </select>
        </div>
        <div class="form-field-full">
          <label for="spriteId">Sprite ID</label>
          <input v-model="characterSpriteId" class="input-field" type="text" name="spriteId" placeholder="Sprite ID" />
        </div>
        <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="removeCharacterType">Remove</button>
      </form>
    </div>
  </div>
 </template>
 <script setup lang="ts">
 import type { CharacterType, CharacterGender, CharacterRace } from '@/types'
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useAssetManagerStore } from '@/stores/assetManagerStore'
 import { useGameStore } from '@/stores/gameStore'
 const gameStore = useGameStore()
 const assetManagerStore = useAssetManagerStore()
 const selectedCharacterType = computed(() => assetManagerStore.selectedCharacterType)
 const characterName = ref('')
 const characterGender = ref<CharacterGender>('MALE' as CharacterGender.MALE)
 const characterRace = ref<CharacterRace>('HUMAN' as CharacterRace.HUMAN)
 const characterSpriteId = ref('')
 const genderOptions: CharacterGender[] = ['MALE' as CharacterGender.MALE, 'FEMALE' as CharacterGender.FEMALE]
 const raceOptions: CharacterRace[] = ['HUMAN' as CharacterRace.HUMAN, 'ELF' as CharacterRace.ELF, 'DWARF' as CharacterRace.DWARF, 'ORC' as CharacterRace.ORC, 'GOBLIN' as CharacterRace.GOBLIN]
 if (!selectedCharacterType.value) {
  console.error('No character type selected')
 }
 if (selectedCharacterType.value) {
  characterName.value = selectedCharacterType.value.name
  characterGender.value = selectedCharacterType.value.gender
  characterRace.value = selectedCharacterType.value.race
  characterSpriteId.value = selectedCharacterType.value.spriteId
 }
 function removeCharacterType() {
  if (!selectedCharacterType.value) return
  gameStore.connection?.emit('gm:characterType:remove', { id: selectedCharacterType.value.id }, (response: boolean) => {
    if (!response) {
      console.error('Failed to remove character type')
      return
    }
    refreshCharacterTypeList()
  })
 }
 function refreshCharacterTypeList(unsetSelectedCharacterType = true) {
  gameStore.connection?.emit('gm:characterType:list', {}, (response: CharacterType[]) => {
    assetManagerStore.setCharacterTypeList(response)
    if (unsetSelectedCharacterType) {
      assetManagerStore.setSelectedCharacterType(null)
    }
  })
 }
 function saveCharacterType() {
  const characterTypeData = {
    id: selectedCharacterType.value?.id,
    name: characterName.value,
    gender: characterGender.value,
    race: characterRace.value,
    spriteId: characterSpriteId.value
  }
  gameStore.connection?.emit('gm:characterType:update', characterTypeData, (response: boolean) => {
    if (!response) {
      console.error('Failed to save character type')
      return
    }
    refreshCharacterTypeList(false)
  })
 }
 watch(selectedCharacterType, (characterType: CharacterType | null) => {
  if (!characterType) return
  characterName.value = characterType.name
  characterGender.value = characterType.gender
  characterRace.value = characterType.race
  characterSpriteId.value = characterType.spriteId
 })
 onMounted(() => {
  if (!selectedCharacterType.value) return
 })
 onBeforeUnmount(() => {
  assetManagerStore.setSelectedCharacterType(null)
 })
 </script>
--- a/src/components/gameMaster/assetManager/partials/characterType/CharacterTypeList.vue
+++ b/src/components/gameMaster/assetManager/partials/characterType/CharacterTypeList.vue
@ -0,0 +1,93 @@
 <template>
  <div class="relative p-2.5 flex items-center gap-x-2.5">
    <input v-model="searchQuery" class="input-field flex-grow" placeholder="Search..." @input="handleSearch" />
    <label for="create-character" class="bg-cyan text-white border border-solid border-white/25 rounded drop-shadow-20 p-2 inline-flex items-center justify-center hover:bg-cyan-800 hover:cursor-pointer">
      <button class="p-0 h-5" id="create-character" @click="createNewCharacterType">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="white">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
        </svg>
      </button>
    </label>
    <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
  </div>
  <div v-bind="containerProps" class="overflow-y-auto relative" @scroll="onScroll">
    <div v-bind="wrapperProps" ref="elementToScroll">
      <a v-for="{ data: characterType } in list" :key="characterType.id" class="relative p-2.5 cursor-pointer block" :class="{ 'bg-cyan/80': assetManagerStore.selectedCharacterType?.id === characterType.id }" @click="assetManagerStore.setSelectedCharacterType(characterType as CharacterType)">
        <div class="flex items-center gap-2.5">
          <span>{{ characterType.name }}</span>
        </div>
        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
      </a>
    </div>
    <button class="left-[calc(50%_-_60px)] fixed bottom-2.5 min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
      <img class="absolute invert w-8 h-8 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
    </button>
  </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 '@/types'
 import { useVirtualList } from '@vueuse/core'
 const gameStore = useGameStore()
 const assetManagerStore = useAssetManagerStore()
 const searchQuery = ref('')
 const hasScrolled = ref(false)
 const elementToScroll = ref()
 const handleSearch = () => {
  // Trigger a re-render of the virtual list
  virtualList.value?.scrollTo(0)
 }
 const createNewCharacterType = () => {
  gameStore.connection?.emit('gm:characterType:create', {}, (response: boolean) => {
    if (!response) {
      console.error('Failed to create new character type')
      return
    }
    gameStore.connection?.emit('gm:characterType:list', {}, (response: CharacterType[]) => {
      assetManagerStore.setCharacterTypeList(response)
    })
  })
 }
 const filteredCharacterTypes = computed(() => {
  if (!searchQuery.value) {
    return assetManagerStore.characterTypeList
  }
  return assetManagerStore.characterTypeList.filter((character) => character.name.toLowerCase().includes(searchQuery.value.toLowerCase()))
 })
 const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(filteredCharacterTypes, {
  itemHeight: 48
 })
 const virtualList = ref({ scrollTo })
 const onScroll = () => {
  let scrollTop = elementToScroll.value.style.marginTop.replace('px', '')
  if (scrollTop > 80) {
    hasScrolled.value = true
  } else if (scrollTop <= 80) {
    hasScrolled.value = false
  }
 }
 function toTop() {
  virtualList.value?.scrollTo(0)
 }
 onMounted(() => {
  gameStore.connection?.emit('gm:characterType:list', {}, (response: CharacterType[]) => {
    assetManagerStore.setCharacterTypeList(response)
  })
 })
 </script>
--- a/src/components/gameMaster/assetManager/partials/object/ObjectDetails.vue
+++ b/src/components/gameMaster/assetManager/partials/object/ObjectDetails.vue
@ -4,7 +4,7 @@
      <div class="filler"></div>
      <img class="max-h-56" :src="`${config.server_endpoint}/assets/objects/${selectedObject?.id}.png`" :alt="'Object ' + selectedObject?.id" />
      <button class="btn-red px-4 py-1.5 min-w-24" type="button" @click.prevent="removeObject">Remove</button>
-      <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+      <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
    </div>
    <div class="m-2.5 p-2.5 block">
      <form class="flex gap-2.5 flex-wrap" @submit.prevent="saveObject">
--- a/src/components/gameMaster/assetManager/partials/object/ObjectList.vue
+++ b/src/components/gameMaster/assetManager/partials/object/ObjectList.vue
@ -1,13 +1,13 @@
 <template>
  <div class="relative p-2.5 flex items-center gap-x-2.5">
    <input v-model="searchQuery" class="input-field flex-grow" placeholder="Search..." @input="handleSearch" />
-    <label for="upload-asset" class="bg-cyan/50 border border-solid border-white/25 rounded drop-shadow-20 p-2 inline-flex items-center justify-center hover:bg-cyan hover:cursor-pointer">
+    <label for="upload-asset" class="bg-cyan text-white border border-solid border-white/25 rounded drop-shadow-20 p-2 inline-flex items-center justify-center hover:bg-cyan-800 hover:cursor-pointer">
      <input class="hidden" id="upload-asset" ref="objectUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
      </svg>
    </label>
-    <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+    <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
  </div>
  <div v-bind="containerProps" class="overflow-y-auto relative" @scroll="onScroll">
    <div v-bind="wrapperProps" ref="elementToScroll">
@ -18,10 +18,10 @@
          </div>
          <span>{{ object.name }}</span>
        </div>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
      </a>
    </div>
-    <button class="left-[calc(50%_-_60px)] fixed bottom-2.5 min-w-[unset] w-12 h-12 rounded-md bg-cyan/50 p-0 hover:bg-cyan" v-show="hasScrolled" @click="toTop">
+    <button class="left-[calc(50%_-_60px)] fixed bottom-2.5 min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
      <img class="absolute invert w-8 h-8 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
    </button>
  </div>
--- a/src/components/gameMaster/assetManager/partials/sprite/SpriteDetails.vue
+++ b/src/components/gameMaster/assetManager/partials/sprite/SpriteDetails.vue
@ -10,7 +10,7 @@
        <div class="w-full flex gap-2 mt-2 pb-4 relative">
          <button class="btn-cyan px-4 py-2 flex-1 sm:flex-none sm:min-w-24" type="button" @click.prevent="saveSprite">Save</button>
          <button class="btn-red px-4 py-2 flex-1 sm:flex-none sm:min-w-24" type="button" @click.prevent="deleteSprite">Delete</button>
-          <div class="w-[calc(100%_+_32px)] absolute left-[-15px] bottom-0 h-px bg-cyan-200"></div>
+          <div class="w-[calc(100%_+_32px)] absolute left-[-15px] bottom-0 h-px bg-gray-500"></div>
        </div>
      </div>
--- a/src/components/gameMaster/assetManager/partials/sprite/SpriteList.vue
+++ b/src/components/gameMaster/assetManager/partials/sprite/SpriteList.vue
@ -1,12 +1,12 @@
 <template>
  <div class="relative p-2.5 flex items-center gap-x-2.5">
    <input v-model="searchQuery" class="input-field flex-grow" placeholder="Search..." @input="handleSearch" />
-    <button @click.prevent="newButtonClickHandler" class="bg-cyan/50 border border-solid border-white/25 rounded drop-shadow-20 p-2 inline-flex items-center justify-center hover:bg-cyan hover:cursor-pointer">
+    <button @click.prevent="newButtonClickHandler" class="bg-cyan text-white border border-solid border-white/25 rounded drop-shadow-20 p-2 inline-flex items-center justify-center hover:bg-cyan-800 hover:cursor-pointer">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
      </svg>
    </button>
-    <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+    <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
  </div>
  <div v-bind="containerProps" class="overflow-y-auto relative" @scroll="onScroll">
    <div v-bind="wrapperProps" ref="elementToScroll">
@ -14,10 +14,10 @@
        <div class="flex items-center gap-2.5">
          <span>{{ sprite.name }}</span>
        </div>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
      </a>
    </div>
-    <button class="left-[calc(50%_-_60px)] fixed bottom-2.5 min-w-[unset] w-12 h-12 rounded-md bg-cyan/50 p-0 hover:bg-cyan" v-show="hasScrolled" @click="toTop">
+    <button class="left-[calc(50%_-_60px)] fixed bottom-2.5 min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
      <img class="absolute invert w-8 h-8 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
    </button>
  </div>
--- a/src/components/gameMaster/assetManager/partials/tile/TileDetails.vue
+++ b/src/components/gameMaster/assetManager/partials/tile/TileDetails.vue
@ -4,7 +4,7 @@
      <div class="filler"></div>
      <img class="max-h-72" :src="`${config.server_endpoint}/assets/tiles/${selectedTile?.id}.png`" :alt="'Tile ' + selectedTile?.id" />
      <button class="btn-red px-4 py-1.5 min-w-24" type="button" @click.prevent="deleteTile">Delete</button>
-      <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+      <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
    </div>
    <div class="m-2.5 p-2.5 block">
      <form class="flex gap-2.5 flex-wrap" @submit.prevent="saveTile">
--- a/src/components/gameMaster/assetManager/partials/tile/TileList.vue
+++ b/src/components/gameMaster/assetManager/partials/tile/TileList.vue
@ -1,13 +1,13 @@
 <template>
  <div class="relative p-2.5 flex items-center gap-x-2.5">
    <input v-model="searchQuery" class="input-field flex-grow" placeholder="Search..." @input="handleSearch" />
-    <label for="upload-asset" class="bg-cyan/50 border border-solid border-white/25 rounded drop-shadow-20 p-2 inline-flex items-center justify-center hover:bg-cyan hover:cursor-pointer">
+    <label for="upload-asset" class="bg-cyan text-white border border-solid border-white/25 rounded drop-shadow-20 p-2 inline-flex items-center justify-center hover:bg-cyan-800 hover:cursor-pointer">
      <input class="hidden" id="upload-asset" ref="tileUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
      </svg>
    </label>
-    <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+    <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
  </div>
  <div v-bind="containerProps" class="overflow-y-auto relative" @scroll="onScroll">
    <div v-bind="wrapperProps" ref="elementToScroll">
@ -18,10 +18,10 @@
          </div>
          <span>{{ tile.name }}</span>
        </div>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
      </a>
    </div>
-    <button class="left-[calc(50%_-_60px)] fixed bottom-2.5 min-w-[unset] w-12 h-12 rounded-md bg-cyan/50 p-0 hover:bg-cyan" v-show="hasScrolled" @click="toTop">
+    <button class="left-[calc(50%_-_60px)] fixed bottom-2.5 min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
      <img class="absolute invert w-8 h-8 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
    </button>
  </div>
--- a/src/components/gameMaster/zoneEditor/EventTiles.vue
+++ b/src/components/gameMaster/zoneEditor/EventTiles.vue
@ -0,0 +1,118 @@
 <template>
  <Image v-for="tile in zoneEditorStore.zone?.zoneEventTiles" v-bind="getImageProps(tile)" />
 </template>
 <script setup lang="ts">
 import { type ZoneEventTile, ZoneEventTileType } from '@/types'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import { Image, useScene } from 'phavuer'
 import { getTile, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
 import { uuidv4 } from '@/utilities'
 import { onBeforeMount, onBeforeUnmount } from 'vue'
 const scene = useScene()
 const zoneEditorStore = useZoneEditorStore()
 const props = defineProps<{
  tilemap: Phaser.Tilemaps.Tilemap
 }>()
 function getImageProps(tile: ZoneEventTile) {
  return {
    x: tileToWorldX(props.tilemap, tile.positionX, tile.positionY),
    y: tileToWorldY(props.tilemap, tile.positionX, tile.positionY),
    texture: tile.type,
    depth: 999
  }
 }
 function pencil(pointer: Phaser.Input.Pointer) {
  // Check if zone is set
  if (!zoneEditorStore.zone) return
  // Check if tool is pencil
  if (zoneEditorStore.tool !== 'pencil') return
  // Check if draw mode is blocking tile or teleport
  if (zoneEditorStore.drawMode !== 'blocking tile' && zoneEditorStore.drawMode !== 'teleport') return
  // Check if left mouse button is pressed
  if (!pointer.isDown) return
  // Check if shift is not pressed, this means we are moving the camera
  if (pointer.event.shiftKey) return
  // Check if there is a tile
  const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
  if (!tile) return
  // Check if event tile already exists on position
  const existingEventTile = zoneEditorStore.zone.zoneEventTiles.find((eventTile) => eventTile.positionX === tile.x && eventTile.positionY === tile.y)
  if (existingEventTile) return
  // If teleport, check if there is a selected zone
  if (zoneEditorStore.drawMode === 'teleport' && !zoneEditorStore.teleportSettings.toZoneId) return
  const newEventTile = {
    id: uuidv4(),
    zoneId: zoneEditorStore.zone.id,
    zone: zoneEditorStore.zone,
    type: zoneEditorStore.drawMode === 'blocking tile' ? ZoneEventTileType.BLOCK : ZoneEventTileType.TELEPORT,
    positionX: tile.x,
    positionY: tile.y,
    teleport:
      zoneEditorStore.drawMode === 'teleport'
        ? {
            toZoneId: zoneEditorStore.teleportSettings.toZoneId,
            toPositionX: zoneEditorStore.teleportSettings.toPositionX,
            toPositionY: zoneEditorStore.teleportSettings.toPositionY,
            toRotation: zoneEditorStore.teleportSettings.toRotation
          }
        : undefined
  }
  zoneEditorStore.zone.zoneEventTiles = zoneEditorStore.zone.zoneEventTiles.concat(newEventTile as ZoneEventTile)
 }
 function eraser(pointer: Phaser.Input.Pointer) {
  // Check if zone is set
  if (!zoneEditorStore.zone) return
  // Check if tool is pencil
  if (zoneEditorStore.tool !== 'eraser') return
  // Check if draw mode is blocking tile or teleport
  if (zoneEditorStore.eraserMode !== 'blocking tile' && zoneEditorStore.eraserMode !== 'teleport') return
  // Check if left mouse button is pressed
  if (!pointer.isDown) return
  // Check if shift is not pressed, this means we are moving the camera
  if (pointer.event.shiftKey) return
  // Check if there is a tile
  const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
  if (!tile) return
  // Check if event tile already exists on position
  const existingEventTile = zoneEditorStore.zone.zoneEventTiles.find((eventTile) => eventTile.positionX === tile.x && eventTile.positionY === tile.y)
  if (!existingEventTile) return
  // Remove existing event tile
  zoneEditorStore.zone.zoneEventTiles = zoneEditorStore.zone.zoneEventTiles.filter((eventTile) => eventTile.id !== existingEventTile.id)
 }
 onBeforeMount(() => {
  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)
 })
 onBeforeUnmount(() => {
  scene.input.off(Phaser.Input.Events.POINTER_DOWN, pencil)
  scene.input.off(Phaser.Input.Events.POINTER_MOVE, pencil)
  scene.input.off(Phaser.Input.Events.POINTER_DOWN, eraser)
  scene.input.off(Phaser.Input.Events.POINTER_MOVE, eraser)
 })
 </script>
--- a/src/components/gameMaster/zoneEditor/Objects.vue
+++ b/src/components/gameMaster/zoneEditor/Objects.vue
@ -0,0 +1,213 @@
 <template>
  <SelectedZoneObject v-if="selectedZoneObject" :zoneObject="selectedZoneObject" @move="moveZoneObject" @rotate="rotateZoneObject" @delete="deleteZoneObject" />
  <Image v-for="object in zoneEditorStore.zone?.zoneObjects" v-bind="getImageProps(object)" @pointerup="() => (selectedZoneObject = object)" />
 </template>
 <script setup lang="ts">
 import { uuidv4 } from '@/utilities'
 import { calculateIsometricDepth, getTile, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
 import { Image, useScene } from 'phavuer'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import type { ZoneObject } from '@/types'
 import SelectedZoneObject from '@/components/gameMaster/zoneEditor/partials/SelectedZoneObject.vue'
 import { onBeforeMount, onBeforeUnmount, ref, watch } from 'vue'
 const scene = useScene()
 const zoneEditorStore = useZoneEditorStore()
 const selectedZoneObject = ref<ZoneObject | null>(null)
 const movingZoneObject = ref<ZoneObject | null>(null)
 const props = defineProps<{
  tilemap: Phaser.Tilemaps.Tilemap
 }>()
 function getImageProps(zoneObject: ZoneObject) {
  return {
    alpha: zoneObject.id === movingZoneObject.value?.id ? 0.5 : 1,
    depth: calculateIsometricDepth(zoneObject.positionX, zoneObject.positionY, zoneObject.object.frameWidth, zoneObject.object.frameHeight),
    tint: selectedZoneObject.value?.id === zoneObject.id ? 0x00ff00 : 0xffffff,
    x: tileToWorldX(props.tilemap, zoneObject.positionX, zoneObject.positionY),
    y: tileToWorldY(props.tilemap, zoneObject.positionX, zoneObject.positionY),
    flipX: zoneObject.isRotated,
    texture: zoneObject.object.id,
    originY: Number(zoneObject.object.originX),
    originX: Number(zoneObject.object.originY)
  }
 }
 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 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 ZoneObject)
 }
 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 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 moveZoneObject(id: string) {
  // Check if zone is set
  if (!zoneEditorStore.zone) return
  movingZoneObject.value = zoneEditorStore.zone.zoneObjects.find((object) => object.id === id) as ZoneObject
  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
 }
 onBeforeMount(() => {
  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)
 })
 onBeforeUnmount(() => {
  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)
 })
 // 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>
--- a/src/components/gameMaster/zoneEditor/Tiles.vue
+++ b/src/components/gameMaster/zoneEditor/Tiles.vue
@ -0,0 +1,146 @@
 <template>
  <Controls :layer="tiles" :depth="0" />
 </template>
 <script setup lang="ts">
 import config from '@/config'
 import { useScene } from 'phavuer'
 import { useGameStore } from '@/stores/gameStore'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import { onBeforeMount, onBeforeUnmount } from 'vue'
 import { createTileArray, getTile, placeTile, setLayerTiles } from '@/composables/zoneComposable'
 import Controls from '@/components/utilities/Controls.vue'
 const emit = defineEmits(['tilemap:create'])
 const scene = useScene()
 const gameStore = useGameStore()
 const zoneEditorStore = useZoneEditorStore()
 const zoneTilemap = createTilemap()
 const tiles = createTileLayer()
 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 tilemap = new Phaser.Tilemaps.Tilemap(scene, zoneData)
  emit('tilemap:create', tilemap)
  return tilemap
 }
 function createTileLayer() {
  const tilesetImages = gameStore.assets.filter((asset) => asset.group === 'tiles').map((asset, index) => zoneTilemap.addTilesetImage(asset.key, asset.key, config.tile_size.x, config.tile_size.y, 1, 2, index + 1, { x: 0, y: -config.tile_size.y }))
  tilesetImages.push(zoneTilemap.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 = zoneTilemap.createBlankLayer('tiles', tilesetImages as any, 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(tiles, pointer.worldX, pointer.worldY)
  if (!tile) return
  // Place tile
  placeTile(zoneTilemap, tiles, tile.x, tile.y, zoneEditorStore.selectedTile.id)
  // Adjust zoneEditorStore.zone.tiles
  zoneEditorStore.zone.tiles[tile.y][tile.x] = zoneEditorStore.selectedTile.id
 }
 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 there is a tile
  const tile = getTile(tiles, pointer.worldX, pointer.worldY)
  if (!tile) return
  // Place tile
  placeTile(zoneTilemap, tiles, 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
  // Set new tileArray with selected tile
  setLayerTiles(zoneTilemap, tiles, createTileArray(zoneTilemap.width, zoneTilemap.height, zoneEditorStore.selectedTile.id))
  // Adjust zoneEditorStore.zone.tiles
  zoneEditorStore.zone.tiles = createTileArray(zoneTilemap.width, zoneTilemap.height, zoneEditorStore.selectedTile.id)
 }
 onBeforeMount(() => {
  if (!zoneEditorStore.zone?.tiles) {
    return
  }
  setLayerTiles(zoneTilemap, tiles, zoneEditorStore.zone.tiles)
  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)
 })
 onBeforeUnmount(() => {
  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)
  zoneTilemap.destroyLayer('tiles')
  zoneTilemap.removeAllLayers()
  zoneTilemap.destroy()
 })
 </script>
--- a/src/components/gameMaster/zoneEditor/ZoneEditor.vue
+++ b/src/components/gameMaster/zoneEditor/ZoneEditor.vue
@ -1,215 +1,53 @@
 <template>
-  <Toolbar :layer="tiles" @eraser="eraser" @pencil="pencil" @paint="paint" @clear="clear" @save="save" />
+  <Tiles @tilemap:create="tileMap = $event" />
-  <ZoneList v-if="zoneEditorStore.isZoneListModalShown" />
+  <Objects v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
  <EventTiles v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
-  <template v-if="zoneEditorStore.zone">
+  <Toolbar @save="save" />
    <Controls :layer="tiles as TilemapLayer" />
-    <Tiles />
+  <ZoneList />
-    <Objects />
+  <TileList />
  <ObjectList />
-    <ZoneSettings />
+  <ZoneSettings />
-    <TeleportModal v-if="shouldShowTeleportModal" />
+  <TeleportModal />
    <Container :depth="2">
      <Image v-for="object in zoneObjects" :depth="calculateIsometricDepth(object.positionX, object.positionY, 0)" :key="object.id" v-bind="getObjectImageProps(object)" @pointerup="() => setSelectedZoneObject(object)" :flipX="object.isRotated" />
    </Container>
    <Container :depth="3">
      <Image v-for="tile in zoneEventTiles" :key="tile.id" v-bind="getEventTileImageProps(tile)" />
    </Container>
    <SelectedZoneObject v-if="zoneEditorStore.selectedZoneObject" @update_depth="updateZoneObjectDepth" @delete="deleteZoneObject" @move="handleMove" @rotate="handleRotate" />
  </template>
 </template>
 <script setup lang="ts">
-import { computed, onBeforeMount, onMounted, onUnmounted, ref, watch } from 'vue'
+import { onUnmounted, ref } from 'vue'
 import { Container, Image, useScene } from 'phavuer'
 import { storeToRefs } from 'pinia'
 import { useGameStore } from '@/stores/gameStore'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
-import { calculateIsometricDepth, loadAssets, placeTile, setAllTiles, sortByIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
+import { type Zone } from '@/types'
 import { ZoneEventTileType, type ZoneObject, type ZoneEventTile, type Zone } from '@/types'
 import { uuidv4 } from '@/utilities'
 import config from '@/config'
 // Components
 import Controls from '@/components/utilities/Controls.vue'
 import Toolbar from '@/components/gameMaster/zoneEditor/partials/Toolbar.vue'
-import Tiles from '@/components/gameMaster/zoneEditor/partials/TileList.vue'
+import TileList from '@/components/gameMaster/zoneEditor/partials/TileList.vue'
-import SelectedZoneObject from '@/components/gameMaster/zoneEditor/partials/SelectedZoneObject.vue'
+import ObjectList from '@/components/gameMaster/zoneEditor/partials/ObjectList.vue'
 import ZoneSettings from '@/components/gameMaster/zoneEditor/partials/ZoneSettings.vue'
 import Objects from '@/components/gameMaster/zoneEditor/partials/ObjectList.vue'
 import ZoneList from '@/components/gameMaster/zoneEditor/partials/ZoneList.vue'
 import TeleportModal from '@/components/gameMaster/zoneEditor/partials/TeleportModal.vue'
-import Tilemap = Phaser.Tilemaps.Tilemap
+import Tiles from '@/components/gameMaster/zoneEditor/Tiles.vue'
-import TilemapLayer = Phaser.Tilemaps.TilemapLayer
+import Objects from '@/components/gameMaster/zoneEditor/Objects.vue'
 import EventTiles from '@/components/gameMaster/zoneEditor/EventTiles.vue'
 /**
 * @TODO:
 * Clean all the code in this file
 */
 const scene = useScene()
 const gameStore = useGameStore()
 const zoneEditorStore = useZoneEditorStore()
-const { objectList, zone, selectedTile, selectedObject, selectedZoneObject, eraserMode, drawMode } = storeToRefs(zoneEditorStore)
+const tileMap = ref(null as Phaser.Tilemaps.Tilemap | null)
 const zoneTilemap = createTilemap()
 const tiles = createTileLayer()
 const zoneObjects = ref<ZoneObject[]>([])
 const zoneEventTiles = ref<ZoneEventTile[]>([])
 let tileArray = createTileArray()
 const shouldShowTeleportModal = computed(() => zoneEditorStore.tool === 'pencil' && drawMode.value === 'teleport')
 function createTilemap() {
  const zoneData = new Phaser.Tilemaps.MapData({
    width: zone.value?.width ?? 10,
    height: zone.value?.height ?? 10,
    tileWidth: config.tile_size.x,
    tileHeight: config.tile_size.y,
    orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
    format: Phaser.Tilemaps.Formats.ARRAY_2D
  })
  const tilemap = new Phaser.Tilemaps.Tilemap(scene, zoneData)
  return tilemap
 }
 function createTileLayer() {
  const tilesetImages = gameStore.assets.filter((asset) => asset.group === 'tiles').map((asset, index) => zoneTilemap.addTilesetImage(asset.key, asset.key, config.tile_size.x, config.tile_size.y, 1, 2, index + 1, { x: 0, y: -config.tile_size.y }))
  tilesetImages.push(zoneTilemap.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 = zoneTilemap.createBlankLayer('tiles', tilesetImages as any, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer
  layer.setDepth(0)
  return layer
 }
 function createTileArray() {
  return Array.from({ length: zoneTilemap.height || 0 }, () => Array.from({ length: zoneTilemap.width || 0 }, () => 'blank_tile'))
 }
 function getObjectImageProps(object: ZoneObject) {
  return {
    tint: selectedZoneObject.value?.id === object.id ? 0x00ff00 : 0xffffff,
    x: tileToWorldX(zoneTilemap as any, object.positionX, object.positionY),
    y: tileToWorldY(zoneTilemap as any, object.positionX, object.positionY),
    texture: object.object.id,
    originY: Number(object.object.originX),
    originX: Number(object.object.originY)
  }
 }
 function getEventTileImageProps(tile: ZoneEventTile) {
  return {
    x: tileToWorldX(zoneTilemap as any, tile.positionX, tile.positionY),
    y: tileToWorldY(zoneTilemap as any, tile.positionX, tile.positionY),
    texture: tile.type
  }
 }
 function eraser(tile: Phaser.Tilemaps.Tile) {
  if (eraserMode.value === 'tile') {
    placeTile(zoneTilemap as Tilemap, tiles as TilemapLayer, tile.x, tile.y, 'blank_tile')
    tileArray[tile.y][tile.x] = 'blank_tile'
  } else if (eraserMode.value === 'object') {
    zoneObjects.value = zoneObjects.value.filter((object) => object.positionX !== tile.x || object.positionY !== tile.y)
  } else if (eraserMode.value === 'blocking tile' || eraserMode.value === 'teleport') {
    zoneEventTiles.value = zoneEventTiles.value.filter((eventTile) => eventTile.positionX !== tile.x || eventTile.positionY !== tile.y || (eraserMode.value === 'teleport' && eventTile.type !== ZoneEventTileType.TELEPORT))
  }
 }
 function pencil(tile: Phaser.Tilemaps.Tile) {
  if (drawMode.value === 'tile' && selectedTile.value) {
    placeTile(zoneTilemap as Tilemap, tiles as TilemapLayer, tile.x, tile.y, selectedTile.value.id)
    tileArray[tile.y][tile.x] = selectedTile.value.id
  } else if (drawMode.value === 'object' && selectedObject.value) {
    addZoneObject(tile)
  } else if (drawMode.value === 'blocking tile' || drawMode.value === 'teleport') {
    addZoneEventTile(tile)
  }
 }
 function addZoneObject(tile: Phaser.Tilemaps.Tile) {
  // Check if object already exists on position
  const existingObject = zoneObjects.value.find((object) => object.positionX === tile.x && object.positionY === tile.y)
  if (existingObject) return
  const newObject = {
    id: uuidv4(),
    zoneId: zone.value!.id,
    zone: zone.value!,
    objectId: selectedObject.value!.id,
    object: selectedObject.value!,
    depth: 0,
    isRotated: false,
    positionX: tile.x,
    positionY: tile.y
  }
  // Add new object to zoneObjects
  zoneObjects.value = zoneObjects.value.concat(newObject)
 }
 function addZoneEventTile(tile: Phaser.Tilemaps.Tile) {
  // Check if event tile already exists on position
  const existingEventTile = zoneEventTiles.value.find((eventTile) => eventTile.positionX === tile.x && eventTile.positionY === tile.y)
  if (existingEventTile) return
  const newEventTile = {
    id: uuidv4(),
    zoneId: zone.value!.id,
    zone: zone.value!,
    type: drawMode.value === 'blocking tile' ? ZoneEventTileType.BLOCK : ZoneEventTileType.TELEPORT,
    positionX: tile.x,
    positionY: tile.y,
    teleport:
      drawMode.value === 'teleport'
        ? {
            toZoneId: zoneEditorStore.teleportSettings.toZoneId,
            toPositionX: zoneEditorStore.teleportSettings.toPositionX,
            toPositionY: zoneEditorStore.teleportSettings.toPositionY,
            toRotation: zoneEditorStore.teleportSettings.toRotation
          }
        : undefined
  }
  zoneEventTiles.value = zoneEventTiles.value.concat(newEventTile as any)
 }
 function paint() {
  if (!selectedTile.value) return
  // Ensure tileArray is initialized with correct dimensions
  if (!tileArray || tileArray.length !== zoneTilemap.height) {
    tileArray = Array.from({ length: zoneTilemap.height }, () => Array.from({ length: zoneTilemap.width }, () => 'blank_tile'))
  }
  // Set all tiles in the tilemap to the selected tile's id
  for (let y = 0; y < zoneTilemap.height; y++) {
    if (!tileArray[y]) {
      tileArray[y] = Array(zoneTilemap.width).fill('blank_tile')
    }
    for (let x = 0; x < zoneTilemap.width; x++) {
      placeTile(zoneTilemap as Tilemap, tiles as TilemapLayer, x, y, selectedTile.value.id)
      tileArray[y][x] = selectedTile.value.id
    }
  }
 }
 function save() {
-  if (!zone.value) return
+  if (!zoneEditorStore.zone) return
  const data = {
-    zoneId: zone.value.id,
+    zoneId: zoneEditorStore.zone.id,
    name: zoneEditorStore.zoneSettings.name,
    width: zoneEditorStore.zoneSettings.width,
    height: zoneEditorStore.zoneSettings.height,
-    tiles: tileArray,
+    tiles: zoneEditorStore.zone.tiles,
-    pvp: zone.value.pvp,
+    pvp: zoneEditorStore.zone.pvp,
-    zoneEventTiles: zoneEventTiles.value.map(({ id, zoneId, type, positionX, positionY, teleport }) => ({ id, zoneId, type, positionX, positionY, teleport })),
+    zoneEffects: zoneEditorStore.zone.zoneEffects.map(({ id, zoneId, effect, strength }) => ({ id, zoneId, effect, strength })),
-    zoneObjects: zoneObjects.value.map(({ id, zoneId, objectId, depth, isRotated, positionX, positionY }) => ({ id, zoneId, objectId, depth, isRotated, positionX, positionY }))
+    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) {
@ -217,111 +55,11 @@ function save() {
  }
  gameStore.connection?.emit('gm:zone_editor:zone:update', data, (response: Zone) => {
    console.log('zone updated')
    zoneEditorStore.setZone(response)
  })
 }
 function clear() {
  for (let y = 0; y < zoneTilemap.height; y++) {
    if (!tileArray[y]) {
      tileArray[y] = Array(zoneTilemap.width).fill('blank_tile')
    }
    for (let x = 0; x < zoneTilemap.width; x++) {
      placeTile(zoneTilemap as Tilemap, tiles as TilemapLayer, x, y, 'blank_tile')
      tileArray[y][x] = 'blank_tile'
    }
  }
  zoneEventTiles.value = []
  zoneObjects.value = []
 }
 function updateZoneObjectDepth(depth: number) {
  zoneObjects.value = zoneObjects.value.map((object) => (object.id === selectedZoneObject.value?.id ? { ...object, depth } : object))
 }
 function deleteZoneObject(objectId: string) {
  zoneObjects.value = zoneObjects.value.filter((object) => object.id !== objectId)
 }
 function handleMove() {
  console.log('move btn clicked')
 }
 function handleRotate(objectId: string) {
  const object = zoneObjects.value.find((obj) => obj.id === objectId)
  if (object) {
    object.isRotated = !object.isRotated
  }
 }
 // watch zoneEditorStore.objectList and update originX and originY of objects in zoneObjects
 watch(
  objectList,
  (newObjects) => {
    zoneObjects.value = zoneObjects.value.map((zoneObject) => {
      const updatedObject = newObjects.find((obj) => obj.id === zoneObject.objectId)
      if (updatedObject) {
        return {
          ...zoneObject,
          object: {
            ...zoneObject.object,
            originX: updatedObject.originX,
            originY: updatedObject.originY
          }
        }
      }
      return zoneObject
    })
    // Update selectedObject if it exists
    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 }
 )
 const setSelectedZoneObject = (zoneObject: ZoneObject | null) => {
  if (!zoneObject) return
  if (zoneEditorStore.tool !== 'move') return
  zoneEditorStore.setSelectedZoneObject(zoneObject)
 }
 onBeforeMount(async () => {
  await gameStore.fetchAllZoneAssets()
  await loadAssets(scene)
  tileArray.forEach((row, y) => row.forEach((_, x) => placeTile(zoneTilemap, tiles, x, y, 'blank_tile')))
  if (zone.value?.tiles) {
    setAllTiles(zoneTilemap, tiles, zone.value.tiles)
    tileArray = zone.value.tiles.map((row) => row.map((tileId) => tileId || 'blank_tile'))
  }
  zoneEventTiles.value = zone.value?.zoneEventTiles ?? []
  zoneObjects.value = sortByIsometricDepth(zone.value?.zoneObjects ?? [])
  // Center camera
  const centerY = (zoneTilemap.height * zoneTilemap.tileHeight) / 2
  const centerX = (zoneTilemap.width * zoneTilemap.tileWidth) / 2
  scene.cameras.main.centerOn(centerX, centerY)
 })
 onUnmounted(() => {
  zoneEventTiles.value = []
  zoneObjects.value = []
  tiles?.destroy()
  zoneTilemap?.removeAllLayers()
  zoneTilemap?.destroy()
  zoneEditorStore.reset()
 })
 </script>
--- a/src/components/gameMaster/zoneEditor/partials/CreateZone.vue
+++ b/src/components/gameMaster/zoneEditor/partials/CreateZone.vue
@ -1,7 +1,7 @@
 <template>
  <Modal :isModalOpen="true" @modal:close="() => zoneEditorStore.toggleCreateZoneModal()" :modal-width="300" :modal-height="400" :is-resizable="false">
    <template #modalHeader>
-      <h3 class="m-0 font-medium shrink-0 text-gray-300">Create new zone</h3>
+      <h3 class="m-0 font-medium shrink-0 text-white">Create new zone</h3>
    </template>
    <template #modalBody>
--- a/src/components/gameMaster/zoneEditor/partials/ObjectList.vue
+++ b/src/components/gameMaster/zoneEditor/partials/ObjectList.vue
@ -1,49 +1,43 @@
 <template>
-  <Teleport to="body">
+  <Modal :isModalOpen="zoneEditorStore.isObjectListModalShown" :modal-width="645" :modal-height="260" @modal:close="() => (zoneEditorStore.isObjectListModalShown = false)">
-    <Modal :isModalOpen="zoneEditorStore.isObjectListModalShown" :modal-width="645" :modal-height="260" @modal:close="() => (zoneEditorStore.isObjectListModalShown = false)">
+    <template #modalHeader>
-      <template #modalHeader>
+      <h3 class="text-lg text-white">Objects</h3>
-        <h3 class="text-lg text-gray-300">Objects</h3>
+    </template>
-        <div class="flex">
+    <template #modalBody>
-          <div class="w-full flex gap-1.5 flex-row">
+      <div class="flex pt-4 pl-4">
-            <div>
+        <div class="w-full flex gap-1.5 flex-row">
-              <label class="mb-1.5 font-titles hidden" for="search">Search...</label>
+          <div>
-              <input @mousedown.stop class="input-field" type="text" name="search" placeholder="Search" v-model="searchQuery" />
+            <label class="mb-1.5 font-titles hidden" for="search">Search...</label>
-            </div>
+            <input @mousedown.stop class="input-field" type="text" name="search" placeholder="Search" v-model="searchQuery" />
            <!--            <div>-->
            <!--              <label class="mb-1.5 font-titles hidden" for="depth">Depth</label>-->
            <!--              <input v-model="objectDepth" @mousedown.stop class="input-field" type="number" name="depth" placeholder="Depth" />-->
            <!--            </div>-->
          </div>
        </div>
-      </template>
+      </div>
-      <template #modalBody>
+      <div class="flex flex-col h-full p-4">
-        <div class="flex flex-col h-full p-4">
+        <div class="mb-4 flex flex-wrap gap-2">
-          <div class="mb-4 flex flex-wrap gap-2">
+          <button v-for="tag in uniqueTags" :key="tag" @click="toggleTag(tag)" class="btn-cyan" :class="{ 'opacity-50': !selectedTags.includes(tag) }">
-            <button v-for="tag in uniqueTags" :key="tag" @click="toggleTag(tag)" class="btn-cyan" :class="{ 'opacity-50': !selectedTags.includes(tag) }">
+            {{ tag }}
-              {{ tag }}
+          </button>
-            </button>
+        </div>
-          </div>
+        <div class="h-full overflow-auto">
-          <div class="h-full overflow-auto">
+          <div class="flex justify-between flex-wrap gap-2.5 items-center">
-            <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="(object, index) in filteredObjects" :key="index" class="max-w-1/4 inline-block">
+              <img
-                <img
+                class="border-2 border-solid max-w-full"
-                  class="border-2 border-solid max-w-full"
+                :src="`${config.server_endpoint}/assets/objects/${object.id}.png`"
-                  :src="`${config.server_endpoint}/assets/objects/${object.id}.png`"
+                alt="Object"
-                  alt="Object"
+                @click="zoneEditorStore.setSelectedObject(object)"
-                  @click="zoneEditorStore.setSelectedObject(object)"
+                :class="{
-                  :class="{
+                  'cursor-pointer transition-all duration-300': true,
-                    'cursor-pointer transition-all duration-300': true,
+                  'border-cyan shadow-lg scale-105': zoneEditorStore.selectedObject?.id === object.id,
-                    'border-cyan shadow-lg scale-105': zoneEditorStore.selectedObject?.id === object.id,
+                  'border-transparent hover:border-gray-300': zoneEditorStore.selectedObject?.id !== object.id
-                    'border-transparent hover:border-gray-300': zoneEditorStore.selectedObject?.id !== object.id
+                }"
-                  }"
+              />
                />
              </div>
            </div>
          </div>
        </div>
-      </template>
+      </div>
-    </Modal>
+    </template>
-  </Teleport>
+  </Modal>
 </template>
 <script setup lang="ts">
--- a/src/components/gameMaster/zoneEditor/partials/SelectedZoneObject.vue
+++ b/src/components/gameMaster/zoneEditor/partials/SelectedZoneObject.vue
@ -1,10 +1,6 @@
 <template>
-  <div class="flex flex-col items-center py-5 px-3 fixed bottom-14 right-0" v-if="zoneEditorStore.selectedZoneObject">
+  <div class="flex flex-col items-center py-5 px-3 fixed bottom-14 right-0">
    <div class="self-end mt-2 flex gap-2">
      <div>
        <label class="mb-1.5 font-titles block text-sm text-gray-700 hidden" for="depth">Depth</label>
        <input v-model="objectDepth" @mousedown.stop @input="handleDepthInput" class="input-field max-w-24 px-2 py-1 border rounded" type="number" name="depth" placeholder="Depth" />
      </div>
      <button @mousedown.stop @click="handleDelete" class="btn-red py-1.5 px-4">
        <img src="/assets/icons/trashcan.svg" class="w-4 h-4" alt="Delete" />
      </button>
@ -15,38 +11,23 @@
 </template>
 <script setup lang="ts">
-import { useZoneEditorStore } from '@/stores/zoneEditorStore'
+import type { ZoneObject } from '@/types'
 import { ref, computed, watch } from 'vue'
-const emit = defineEmits(['update_depth', 'move', 'delete', 'rotate'])
+const props = defineProps<{
-const zoneEditorStore = useZoneEditorStore()
+  zoneObject: ZoneObject
 }>()
-const objectDepth = ref(zoneEditorStore.objectDepth)
+const emit = defineEmits(['move', 'rotate', 'delete'])
-watch(
+const handleMove = () => {
-  () => zoneEditorStore.selectedZoneObject,
+  emit('move', props.zoneObject.id)
  (selectedZoneObject) => {
    objectDepth.value = selectedZoneObject?.depth ?? 0
  }
 )
 const handleDepthInput = () => {
  const depth = parseFloat(objectDepth.value.toString())
  if (!isNaN(depth)) {
    emit('update_depth', depth)
  }
 }
 const handleRotate = () => {
-  emit('rotate', zoneEditorStore.selectedZoneObject?.id)
+  emit('rotate', props.zoneObject.id)
 }
 const handleMove = () => {
  emit('move')
 }
 const handleDelete = () => {
-  emit('delete', zoneEditorStore.selectedZoneObject?.id)
+  emit('delete', props.zoneObject.id)
  zoneEditorStore.setSelectedZoneObject(null)
 }
 </script>
--- a/src/components/gameMaster/zoneEditor/partials/TeleportModal.vue
+++ b/src/components/gameMaster/zoneEditor/partials/TeleportModal.vue
@ -1,9 +1,8 @@
 <template>
-  <Modal :is-modal-open="true" @modal:close="() => zoneEditorStore.setTool('move')" :modal-width="300" :modal-height="350" :is-resizable="false">
+  <Modal :is-modal-open="showTeleportModal" @modal:close="() => zoneEditorStore.setTool('move')" :modal-width="300" :modal-height="350" :is-resizable="false">
    <template #modalHeader>
-      <h3 class="m-0 font-medium shrink-0 text-gray-300">Teleport settings</h3>
+      <h3 class="m-0 font-medium shrink-0 text-white">Teleport settings</h3>
    </template>
    <template #modalBody>
      <div class="m-4">
        <form method="post" @submit.prevent="" class="inline">
@ -40,12 +39,13 @@
 </template>
 <script setup lang="ts">
-import { onMounted, ref, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import Modal from '@/components/utilities/Modal.vue'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import { useGameStore } from '@/stores/gameStore'
 import type { Zone } from '@/types'
 const showTeleportModal = computed(() => zoneEditorStore.tool === 'pencil' && zoneEditorStore.drawMode === 'teleport')
 const zoneEditorStore = useZoneEditorStore()
 const gameStore = useGameStore()
--- a/src/components/gameMaster/zoneEditor/partials/TileList.vue
+++ b/src/components/gameMaster/zoneEditor/partials/TileList.vue
@ -1,9 +1,11 @@
 <template>
-  <Teleport to="body">
+  <Modal :isModalOpen="zoneEditorStore.isTileListModalShown" :modal-width="645" :modal-height="600" @modal:close="() => (zoneEditorStore.isTileListModalShown = false)">
-    <Modal :isModalOpen="zoneEditorStore.isTileListModalShown" :modal-width="645" :modal-height="600" @modal:close="() => (zoneEditorStore.isTileListModalShown = false)">
+    <template #modalHeader>
-      <template #modalHeader>
+      <h3 class="text-lg text-white">Tiles</h3>
-        <h3 class="text-lg text-gray-300">Tiles</h3>
+    </template>
-        <div class="flex">
+    <template #modalBody>
      <div class="h-full overflow-auto" v-if="!selectedGroup">
        <div class="flex pt-4 pl-4">
          <div class="w-full flex gap-1.5 flex-row">
            <div>
              <label class="mb-1.5 font-titles hidden" for="search">Search...</label>
@ -11,8 +13,6 @@
            </div>
          </div>
        </div>
      </template>
      <template #modalBody>
        <div class="flex flex-col h-full p-4">
          <div class="mb-4 flex flex-wrap gap-2">
            <button v-for="tag in uniqueTags" :key="tag" @click="toggleTag(tag)" class="btn-cyan" :class="{ 'opacity-50': !selectedTags.includes(tag) }">
@ -21,25 +21,63 @@
          </div>
          <div class="h-[calc(100%_-_60px)] flex-grow overflow-y-auto">
            <div class="grid grid-cols-8 gap-2 justify-items-center">
-              <div v-for="tile in filteredTiles" :key="tile.id" class="flex items-center justify-center">
+              <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"
+                  class="max-w-full max-h-full border-2 border-solid cursor-pointer transition-all duration-300"
-                  :src="`${config.server_endpoint}/assets/tiles/${tile.id}.png`"
+                  :src="`${config.server_endpoint}/assets/tiles/${group.parent.id}.png`"
-                  alt="Tile"
+                  :alt="group.parent.name"
-                  @click="zoneEditorStore.setSelectedTile(tile)"
+                  @click="openGroup(group)"
                  @load="() => processTile(group.parent)"
                  :class="{
-                    'cursor-pointer transition-all duration-300': true,
+                    'border-cyan shadow-lg scale-105': isActiveTile(group.parent),
-                    'border-cyan shadow-lg scale-105': zoneEditorStore.selectedTile?.id === tile.id,
+                    'border-transparent hover:border-gray-300': !isActiveTile(group.parent)
                    'border-transparent hover:border-gray-300': zoneEditorStore.selectedTile?.id !== tile.id
                  }"
                />
                <span class="text-xs mt-1">{{ getTileCategory(group.parent) }}</span>
                <span v-if="group.children.length > 0" class="absolute top-0 right-0 bg-cyan text-white rounded-full w-5 h-5 flex items-center justify-center text-xs">
                  {{ group.children.length + 1 }}
                </span>
              </div>
            </div>
          </div>
        </div>
-      </template>
+      </div>
-    </Modal>
+      <div v-else class="h-full overflow-auto">
-  </Teleport>
+        <div class="p-4">
          <button @click="closeGroup" class="btn-cyan mb-4">Back to All Tiles</button>
          <h4 class="text-lg mb-4">{{ selectedGroup.parent.name }} Group</h4>
          <div class="grid grid-cols-8 gap-2 justify-items-center">
            <div class="flex flex-col items-center justify-center">
              <img
                class="max-w-full max-h-full border-2 border-solid cursor-pointer transition-all duration-300"
                :src="`${config.server_endpoint}/assets/tiles/${selectedGroup.parent.id}.png`"
                :alt="selectedGroup.parent.name"
                @click="selectTile(selectedGroup.parent)"
                :class="{
                  'border-cyan shadow-lg scale-105': isActiveTile(selectedGroup.parent),
                  'border-transparent hover:border-gray-300': !isActiveTile(selectedGroup.parent)
                }"
              />
              <span class="text-xs mt-1">{{ getTileCategory(selectedGroup.parent) }}</span>
            </div>
            <div v-for="childTile in selectedGroup.children" :key="childTile.id" class="flex flex-col items-center justify-center">
              <img
                class="max-w-full max-h-full border-2 border-solid cursor-pointer transition-all duration-300"
                :src="`${config.server_endpoint}/assets/tiles/${childTile.id}.png`"
                :alt="childTile.name"
                @click="selectTile(childTile)"
                :class="{
                  'border-cyan shadow-lg scale-105': isActiveTile(childTile),
                  'border-transparent hover:border-gray-300': !isActiveTile(childTile)
                }"
              />
              <span class="text-xs mt-1">{{ getTileCategory(childTile) }}</span>
            </div>
          </div>
        </div>
      </div>
    </template>
  </Modal>
 </template>
 <script setup lang="ts">
@ -55,20 +93,60 @@ const isModalOpen = ref(false)
 const zoneEditorStore = useZoneEditorStore()
 const searchQuery = ref('')
 const selectedTags = ref<string[]>([])
 const tileCategories = ref<Map<string, string>>(new Map())
 const selectedGroup = ref<{ parent: Tile; children: Tile[] } | null>(null)
 const uniqueTags = computed(() => {
  const allTags = zoneEditorStore.tileList.flatMap((tile) => tile.tags || [])
  return Array.from(new Set(allTags))
 })
-const filteredTiles = computed(() => {
+const groupedTiles = computed(() => {
-  return zoneEditorStore.tileList.filter((tile) => {
+  const groups: { parent: Tile; children: Tile[] }[] = []
  const filteredTiles = zoneEditorStore.tileList.filter((tile) => {
    const matchesSearch = !searchQuery.value || tile.name.toLowerCase().includes(searchQuery.value.toLowerCase())
    const matchesTags = selectedTags.value.length === 0 || (tile.tags && selectedTags.value.some((tag) => tile.tags.includes(tag)))
    return matchesSearch && matchesTags
  })
  filteredTiles.forEach((tile) => {
    const parentGroup = groups.find((group) => areTilesRelated(group.parent, tile))
    if (parentGroup && parentGroup.parent.id !== tile.id) {
      parentGroup.children.push(tile)
    } else {
      groups.push({ parent: tile, children: [] })
    }
  })
  return groups
 })
 const tileColorData = ref<Map<string, { r: number; g: number; b: number }>>(new Map())
 const tileEdgeData = ref<Map<string, number>>(new Map())
 function areTilesRelated(tile1: Tile, tile2: Tile): boolean {
  const colorSimilarityThreshold = 30 // Adjust this value as needed
  const edgeComplexitySimilarityThreshold = 20 // Adjust this value as needed
  const color1 = tileColorData.value.get(tile1.id)
  const color2 = tileColorData.value.get(tile2.id)
  const edge1 = tileEdgeData.value.get(tile1.id)
  const edge2 = tileEdgeData.value.get(tile2.id)
  if (!color1 || !color2 || edge1 === undefined || edge2 === undefined) {
    return false
  }
  const colorDifference = Math.sqrt(Math.pow(color1.r - color2.r, 2) + Math.pow(color1.g - color2.g, 2) + Math.pow(color1.b - color2.b, 2))
  const edgeComplexityDifference = Math.abs(edge1 - edge2)
  const namePrefix1 = tile1.name.split('_')[0]
  const namePrefix2 = tile2.name.split('_')[0]
  return colorDifference <= colorSimilarityThreshold && edgeComplexityDifference <= edgeComplexitySimilarityThreshold && namePrefix1 === namePrefix2
 }
 const toggleTag = (tag: string) => {
  if (selectedTags.value.includes(tag)) {
    selectedTags.value = selectedTags.value.filter((t) => t !== tag)
@ -77,10 +155,82 @@ const toggleTag = (tag: string) => {
  }
 }
 function processTile(tile: Tile) {
  const img = new Image()
  img.crossOrigin = 'Anonymous'
  img.onload = () => {
    const canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d')
    canvas.width = img.width
    canvas.height = img.height
    ctx!.drawImage(img, 0, 0, img.width, img.height)
    const imageData = ctx!.getImageData(0, 0, canvas.width, canvas.height)
    tileColorData.value.set(tile.id, getDominantColor(imageData))
    tileEdgeData.value.set(tile.id, getEdgeComplexity(imageData))
  }
  img.src = `${config.server_endpoint}/assets/tiles/${tile.id}.png`
 }
 function getDominantColor(imageData: ImageData) {
  let r = 0,
    g = 0,
    b = 0,
    total = 0
  for (let i = 0; i < imageData.data.length; i += 4) {
    if (imageData.data[i + 3] > 0) {
      // Only consider non-transparent pixels
      r += imageData.data[i]
      g += imageData.data[i + 1]
      b += imageData.data[i + 2]
      total++
    }
  }
  return {
    r: Math.round(r / total),
    g: Math.round(g / total),
    b: Math.round(b / total)
  }
 }
 function getEdgeComplexity(imageData: ImageData) {
  let edgePixels = 0
  for (let y = 0; y < imageData.height; y++) {
    for (let x = 0; x < imageData.width; x++) {
      const i = (y * imageData.width + x) * 4
      if (imageData.data[i + 3] > 0 && (x === 0 || y === 0 || x === imageData.width - 1 || y === imageData.height - 1 || imageData.data[i - 1] === 0 || imageData.data[i + 7] === 0)) {
        edgePixels++
      }
    }
  }
  return edgePixels
 }
 function getTileCategory(tile: Tile): string {
  return tileCategories.value.get(tile.id) || ''
 }
 function openGroup(group: { parent: Tile; children: Tile[] }) {
  selectedGroup.value = group
 }
 function closeGroup() {
  selectedGroup.value = null
 }
 function selectTile(tile: Tile) {
  zoneEditorStore.setSelectedTile(tile)
 }
 function isActiveTile(tile: Tile): boolean {
  return zoneEditorStore.selectedTile?.id === tile.id
 }
 onMounted(async () => {
  isModalOpen.value = true
  gameStore.connection?.emit('gm:tile:list', {}, (response: Tile[]) => {
    zoneEditorStore.setTileList(response)
    response.forEach((tile) => processTile(tile))
  })
 })
 </script>
--- a/src/components/gameMaster/zoneEditor/partials/Toolbar.vue
+++ b/src/components/gameMaster/zoneEditor/partials/Toolbar.vue
@ -1,34 +1,34 @@
 <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="clickOutsideElement" class="tools flex gap-2.5" v-if="zoneEditorStore.zone">
+      <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="{ 'ml-2.5': zoneEditorStore.tool !== 'move' }">(M)</span>
+          <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/move.svg" alt="Move camera" /> <span class="h-5" :class="{ 'ml-2.5': zoneEditorStore.tool !== 'move' }">(M)</span>
        </button>
        <div class="w-px bg-cyan"></div>
        <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan gap-2.5': zoneEditorStore.tool === 'pencil' }" @click="handleClick('pencil')">
-          <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/pencil.svg" alt="Pencil" /> <span :class="{ 'ml-2.5': zoneEditorStore.tool !== 'pencil' }">(P)</span>
+          <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'">
            <div class="select-trigger group capitalize flex gap-3.5" :class="{ open: selectPencilOpen }">
              {{ zoneEditorStore.drawMode }}
              <img class="group-[.open]:rotate-180 invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/zoneEditor/chevron.svg" />
            </div>
            <div class="flex flex-col absolute bottom-full mb-5 left-1/2 -translate-x-1/2 bg-gray rounded min-w-28 border border-gray-500 border-solid text-left" v-show="selectPencilOpen && zoneEditorStore.tool === 'pencil'">
-              <span class="py-2 px-2.5 relative hover:bg-cyan/50" @click="setDrawMode('tile')">
+              <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/50" @click="setDrawMode('object')">
+              <span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="setDrawMode('object')">
                Object
                <div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
              </span>
-              <span class="py-2 px-2.5 relative hover:bg-cyan/50" @click="setDrawMode('teleport')">
+              <span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="setDrawMode('teleport')">
                Teleport
                <div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
              </span>
-              <span class="py-2 px-2.5 relative hover:bg-cyan/50" @click="setDrawMode('blocking tile')">Blocking tile</span>
+              <span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="setDrawMode('blocking tile')">Blocking tile</span>
            </div>
          </div>
        </button>
@ -36,26 +36,26 @@
        <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="{ 'ml-2.5': zoneEditorStore.tool !== 'eraser' }">(E)</span>
+          <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/eraser.svg" alt="Eraser" /> <span class="h-5" :class="{ 'ml-2.5': zoneEditorStore.tool !== 'eraser' }">(E)</span>
          <div class="select" v-if="zoneEditorStore.tool === 'eraser'">
            <div class="select-trigger group capitalize flex gap-3.5" :class="{ open: selectEraserOpen }">
              {{ zoneEditorStore.eraserMode }}
              <img class="group-[.open]:rotate-180 invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/zoneEditor/chevron.svg" />
            </div>
            <div class="flex flex-col absolute 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/50" @click="setEraserMode('tile')">
+              <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/50" @click="setEraserMode('object')">
+              <span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="setEraserMode('object')">
                Object
                <div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
              </span>
-              <span class="py-2 px-2.5 relative hover:bg-cyan/50" @click="setEraserMode('teleport')">
+              <span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="setEraserMode('teleport')">
                Teleport
                <div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
              </span>
-              <span class="py-2 px-2.5 relative hover:bg-cyan/50" @click="setEraserMode('blocking tile')">Blocking tile</span>
+              <span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="setEraserMode('blocking tile')">Blocking tile</span>
            </div>
          </div>
        </button>
@ -63,12 +63,12 @@
        <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="{ 'ml-2.5': zoneEditorStore.tool !== 'paint' }">(B)</span>
+          <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/paint.svg" alt="Paint bucket" /> <span class="h-5" :class="{ 'ml-2.5': zoneEditorStore.tool !== 'paint' }">(B)</span>
        </button>
        <div class="w-px bg-cyan"></div>
-        <button class="flex justify-center items-center min-w-10 p-0 relative" @click="handleClick('settings')" v-if="zoneEditorStore.zone"><img class="invert w-5 h-5" src="/assets/icons/zoneEditor/gear.svg" alt="Zone settings" /> <span class="ml-2.5">(Z)</span></button>
+        <button class="flex justify-center items-center min-w-10 p-0 relative" @click="handleClick('settings')" v-if="zoneEditorStore.zone"><img class="invert w-5 h-5" src="/assets/icons/zoneEditor/gear.svg" alt="Zone settings" /> <span class="h-5 ml-2.5">(Z)</span></button>
      </div>
      <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">
@ -83,22 +83,15 @@
 <script setup lang="ts">
 import { onBeforeUnmount, onMounted, ref } from 'vue'
 import { useScene } from 'phavuer'
 import { getTile } from '@/composables/zoneComposable'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import { onClickOutside } from '@vueuse/core'
 import TilemapLayer = Phaser.Tilemaps.TilemapLayer
 const zoneEditorStore = useZoneEditorStore()
-const props = defineProps({
+const emit = defineEmits(['save', 'clear'])
  layer: Phaser.Tilemaps.TilemapLayer
 })
 const scene = useScene()
 const emit = defineEmits(['move', 'eraser', 'pencil', 'paint', 'save', 'clear'])
 // track when clicked outside of toolbar items
-const clickOutsideElement = ref(null)
+const toolbar = ref(null)
 // track select state
 let selectPencilOpen = ref(false)
@ -119,47 +112,6 @@ function setEraserMode(value: string) {
  selectEraserOpen.value = false
 }
 function clickTile(pointer: Phaser.Input.Pointer) {
  if (zoneEditorStore.tool !== 'eraser' && zoneEditorStore.tool !== 'pencil' && zoneEditorStore.tool !== 'paint') return
  if (pointer.event.shiftKey) return
  const px = scene.cameras.main.worldView.x + pointer.x
  const py = scene.cameras.main.worldView.y + pointer.y
  const pointer_tile = getTile(px, py, props.layer as TilemapLayer) as Phaser.Tilemaps.Tile
  if (!pointer_tile) return
  if (zoneEditorStore.tool === 'eraser') {
    emit('eraser', pointer_tile)
  }
  if (zoneEditorStore.tool === 'pencil') {
    emit('pencil', pointer_tile)
  }
  if (zoneEditorStore.tool === 'paint') {
    emit('paint', pointer_tile)
  }
 }
 function drawTiles(pointer: Phaser.Input.Pointer) {
  if (!pointer.isDown) return
  clickTile(pointer)
 }
 scene.input.on(Phaser.Input.Events.POINTER_UP, clickTile)
 scene.input.on(Phaser.Input.Events.POINTER_MOVE, drawTiles)
 onMounted(() => {
  addEventListener('keydown', initKeyShortcuts)
 })
 onBeforeUnmount(() => {
  scene.input.off(Phaser.Input.Events.POINTER_UP, clickTile)
  scene.input.off(Phaser.Input.Events.POINTER_MOVE, drawTiles)
  removeEventListener('keydown', initKeyShortcuts)
 })
 function handleClick(tool: string) {
  if (tool === 'settings') {
    zoneEditorStore.toggleSettingsModal()
@ -172,21 +124,23 @@ function handleClick(tool: string) {
 }
 function cycleToolMode(tool: 'pencil' | 'eraser') {
-  const modes = ['tile', 'object', 'teleport', 'blocking tile'];
+  const modes = ['tile', 'object', 'teleport', 'blocking tile']
-  const currentMode = tool === 'pencil' ? zoneEditorStore.drawMode : zoneEditorStore.eraserMode;
+  const currentMode = tool === 'pencil' ? zoneEditorStore.drawMode : zoneEditorStore.eraserMode
-  const currentIndex = modes.indexOf(currentMode);
+  const currentIndex = modes.indexOf(currentMode)
-  const nextIndex = (currentIndex + 1) % modes.length;
+  const nextIndex = (currentIndex + 1) % modes.length
-  const nextMode = modes[nextIndex];
+  const nextMode = modes[nextIndex]
  if (tool === 'pencil') {
-    setDrawMode(nextMode);
+    setDrawMode(nextMode)
  } else {
-    setEraserMode(nextMode);
+    setEraserMode(nextMode)
  }
 }
 function initKeyShortcuts(event: KeyboardEvent) {
  // Check if zone is set
  if (!zoneEditorStore.zone) return
  // prevent if focused on composables
  if (document.activeElement?.tagName === 'INPUT') return
@ -199,19 +153,26 @@ function initKeyShortcuts(event: KeyboardEvent) {
  }
  if (keyActions.hasOwnProperty(event.key)) {
-    const tool = keyActions[event.key];
+    const tool = keyActions[event.key]
    if ((tool === 'pencil' || tool === 'eraser') && zoneEditorStore.tool === tool) {
-      cycleToolMode(tool);
+      cycleToolMode(tool)
    } else {
-      handleClick(tool);
+      handleClick(tool)
    }
  }
 }
 onClickOutside(clickOutsideElement, handleClickOutside)
 function handleClickOutside() {
  selectPencilOpen.value = false
  selectEraserOpen.value = false
 }
 onClickOutside(toolbar, handleClickOutside)
 onMounted(() => {
  addEventListener('keydown', initKeyShortcuts)
 })
 onBeforeUnmount(() => {
  removeEventListener('keydown', initKeyShortcuts)
 })
 </script>
--- a/src/components/gameMaster/zoneEditor/partials/ZoneList.vue
+++ b/src/components/gameMaster/zoneEditor/partials/ZoneList.vue
@ -1,31 +1,28 @@
 <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">
-  <Teleport to="body">
+    <template #modalHeader>
-    <Modal @modal:close="() => zoneEditorStore.toggleZoneListModal()" :is-resizable="false" :is-modal-open="true" :modal-width="300" :modal-height="360">
+      <h3 class="text-lg text-white">Zones</h3>
-      <template #modalHeader>
+    </template>
-        <h3 class="text-lg text-gray-300">Zones</h3>
+    <template #modalBody>
-      </template>
+      <div class="my-4 mx-auto">
-      <template #modalBody>
+        <div class="text-center mb-4 px-2 flex gap-2.5">
-        <div class="my-4 mx-auto">
+          <button class="btn-cyan py-1.5 min-w-[calc(50%_-_5px)]" @click="fetchZones">Refresh</button>
-          <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="() => zoneEditorStore.toggleCreateZoneModal()">New</button>
            <button class="btn-cyan py-1.5 min-w-[calc(50%_-_5px)]" @click="fetchZones">Refresh</button>
            <button class="btn-cyan py-1.5 min-w-[calc(50%_-_5px)]" @click="() => zoneEditorStore.toggleCreateZoneModal()">New</button>
          </div>
          <div class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap" v-for="(zone, index) in zoneEditorStore.zoneList" :key="zone.id">
            <div class="absolute left-0 top-0 w-full h-px bg-cyan-200" v-if="index === 0"></div>
            <div class="flex gap-3 items-center w-full" @click="() => loadZone(zone.id)">
              <span>{{ zone.name }}</span>
              <span class="ml-auto gap-1 flex">
                <button class="btn-red py-0.5 px-2.5 z-50" @click.stop="() => deleteZone(zone.id)">X</button>
              </span>
            </div>
            <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
          </div>
        </div>
-      </template>
+        <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">
-    </Modal>
+          <div class="absolute left-0 top-0 w-full h-px bg-gray-500" v-if="index === 0"></div>
-  </Teleport>
+          <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-11 h-11 z-50" @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">
--- a/src/components/gameMaster/zoneEditor/partials/ZoneSettings.vue
+++ b/src/components/gameMaster/zoneEditor/partials/ZoneSettings.vue
@ -1,24 +1,28 @@
 <template>
  <Modal :is-modal-open="zoneEditorStore.isSettingsModalShown" @modal:close="() => zoneEditorStore.toggleSettingsModal()" :modal-width="600" :modal-height="350">
    <template #modalHeader>
-      <h3 class="m-0 font-medium shrink-0 text-gray-300">Zone settings</h3>
+      <h3 class="m-0 font-medium shrink-0 text-white">Zone settings</h3>
    </template>
    <template #modalBody>
      <div class="m-4">
-        <form method="post" @submit.prevent="" class="inline">
+        <div class="space-x-2">
-          <div class="gap-2.5 flex flex-wrap">
+          <button class="btn-cyan py-1.5 px-4" type="button" @click.prevent="screen = 'settings'">Settings</button>
          <button class="btn-cyan py-1.5 px-4" type="button" @click.prevent="screen = 'effects'">Effects</button>
        </div>
        <form method="post" @submit.prevent="" class="inline" v-if="screen === 'settings'">
          <div class="gap-2.5 flex flex-wrap mt-4">
            <div class="form-field-full">
              <label for="name">Name</label>
              <input class="input-field" v-model="name" name="name" id="name" />
            </div>
            <div class="form-field-half">
-              <label for="name">Width</label>
+              <label for="width">Width</label>
-              <input class="input-field" v-model="width" name="name" id="name" type="number" />
+              <input class="input-field" v-model="width" name="width" id="width" type="number" />
            </div>
            <div class="form-field-half">
-              <label for="name">Height</label>
+              <label for="height">Height</label>
-              <input class="input-field" v-model="height" name="name" id="name" type="number" />
+              <input class="input-field" v-model="height" name="height" id="height" type="number" />
            </div>
            <div class="form-field-full">
              <label for="pvp">PVP enabled</label>
@ -29,6 +33,14 @@
            </div>
          </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">
            <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>
          </div>
          <button class="btn-green py-1 px-2 mt-2" type="button" @click="addEffect">Add Effect</button>
        </form>
      </div>
    </template>
  </Modal>
@ -40,16 +52,19 @@ import Modal from '@/components/utilities/Modal.vue'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 const zoneEditorStore = useZoneEditorStore()
 const screen = ref('settings')
-zoneEditorStore.setZoneName(zoneEditorStore.zone.name)
+zoneEditorStore.setZoneName(zoneEditorStore.zone?.name)
-zoneEditorStore.setZoneWidth(zoneEditorStore.zone.width)
+zoneEditorStore.setZoneWidth(zoneEditorStore.zone?.width)
-zoneEditorStore.setZoneHeight(zoneEditorStore.zone.height)
+zoneEditorStore.setZoneHeight(zoneEditorStore.zone?.height)
-zoneEditorStore.setZonePvp(zoneEditorStore.zone.pvp)
+zoneEditorStore.setZonePvp(zoneEditorStore.zone?.pvp)
 zoneEditorStore.setZoneEffects(zoneEditorStore.zone?.zoneEffects)
-const name = ref(zoneEditorStore.zoneSettings.name)
+const name = ref(zoneEditorStore.zoneSettings?.name)
-const width = ref(zoneEditorStore.zoneSettings.width)
+const width = ref(zoneEditorStore.zoneSettings?.width)
-const height = ref(zoneEditorStore.zoneSettings.height)
+const height = ref(zoneEditorStore.zoneSettings?.height)
-const pvp = ref(zoneEditorStore.zoneSettings.pvp)
+const pvp = ref(zoneEditorStore.zoneSettings?.pvp)
 const zoneEffects = ref(zoneEditorStore.zoneSettings?.zoneEffects || [])
 watch(name, (value) => {
  zoneEditorStore.setZoneName(value)
@ -66,4 +81,26 @@ watch(height, (value) => {
 watch(pvp, (value) => {
  zoneEditorStore.setZonePvp(value)
 })
 watch(
  zoneEffects,
  (value) => {
    zoneEditorStore.setZoneEffects(value)
  },
  { deep: true }
 )
 const addEffect = () => {
  zoneEffects.value.push({
    id: Date.now().toString(), // Simple unique id generation
    zoneId: zoneEditorStore.zone?.id,
    zone: zoneEditorStore.zone,
    effect: '',
    strength: 1
  })
 }
 const removeEffect = (index) => {
  zoneEffects.value.splice(index, 1)
 }
 </script>
--- a/src/components/gui/Chat.vue
+++ b/src/components/gui/Chat.vue
@ -2,7 +2,7 @@
  <div class="w-full md:min-w-[350px] max-w-[750px] flex flex-col absolute left-1/2 -translate-x-1/2 bottom-5">
    <div ref="chatWindow" class="w-full overflow-auto h-32 mb-5 bg-gray rounded-md border-2 border-solid border-gray-500 text-gray-300" v-show="gameStore.uiSettings.isChatOpen">
      <div v-for="message in chats" class="flex-col py-2 items-center p-3">
-        <span class="text-ellipsis overflow-hidden whitespace-nowrap text-sm" :class="{'text-cyan-300': gameStore.character?.role == 'gm'}">{{ message.character.name }}</span>
+        <span class="text-ellipsis overflow-hidden whitespace-nowrap text-sm" :class="{ 'text-cyan-300': gameStore.character?.role == 'gm' }">{{ message.character.name }}</span>
        <p class="text-gray-50 m-0">{{ message.message }}</p>
      </div>
    </div>
--- a/src/components/gui/ExpBar.vue
+++ b/src/components/gui/ExpBar.vue
@ -1,9 +1,7 @@
-<template>
+<template></template>
 </template>
 <script setup lang="ts">
 import { useGameStore } from '@/stores/gameStore'
 const gameStore = useGameStore()
-</script>
+</script>
--- a/src/components/gui/Keybindings.vue
+++ b/src/components/gui/Keybindings.vue
@ -1,48 +1,52 @@
 <template>
-    <div class="absolute left-[300px] top-4">
+  <div class="absolute top-4 left-[300px] w-[422px]">
    <div class="flex gap-2.5">
      <div class="relative">
        <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
        <span class="z-10 text-pixel absolute top-1 left-2">F1</span>
        <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f1-icon.png')] bg-no-repeat"></div>
-    </div>
+      </div>
-    <div class="absolute left-[346px] top-4">
+      <div class="relative">
        <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
        <span class="z-10 text-pixel absolute top-1 left-2">F2</span>
        <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f2-icon.png')] bg-no-repeat"></div>
-    </div>
+      </div>
-    <div class="absolute left-[392px] top-4">
+      <div class="relative">
        <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
        <span class="z-10 text-pixel absolute top-1 left-2">F3</span>
        <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f3-icon.png')] bg-no-repeat"></div>
-    </div>
+      </div>
-    <div class="absolute left-[438px] top-4">
+      <div class="relative">
        <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
        <span class="z-10 text-pixel absolute top-1 left-2">F4</span>
        <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f4-icon.png')] bg-no-repeat"></div>
-    </div>
+      </div>
-    <div class="absolute left-[484px] top-4">
+      <div class="relative">
        <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
        <span class="z-10 text-pixel absolute top-1 left-2">F5</span>
        <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f5-icon.png')] bg-no-repeat"></div>
-    </div>
+      </div>
-    <div class="absolute left-[530px] top-4">
+      <div class="relative">
        <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
        <span class="z-10 text-pixel absolute top-1 left-2">F6</span>
        <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f6-icon.png')] bg-no-repeat"></div>
-    </div>
+      </div>
-    <div class="absolute left-[576px] top-4">
+      <div class="relative">
        <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
        <span class="z-10 text-pixel absolute top-1 left-2">F7</span>
        <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f7-icon.png')] bg-no-repeat"></div>
-    </div>
+      </div>
-    <div class="absolute left-[622px] top-4">
+      <div class="relative">
        <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
        <span class="z-10 text-pixel absolute top-1 left-2">F8</span>
        <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f8-icon.png')] bg-no-repeat"></div>
      </div>
    </div>
  </div>
 </template>
 <script setup lang="ts">
 import { useGameStore } from '@/stores/gameStore'
 const gameStore = useGameStore()
-</script>
+</script>
--- a/src/components/gui/Menu.vue
+++ b/src/components/gui/Menu.vue
@ -24,7 +24,7 @@
        <p class="absolute w-full bottom-0 m-0 text-xs leading-6 text-white">Open Chat</p>
        <div class="group-hover:block absolute -left-2 bg-gray-500 h-3.5 w-2 [clip-path:polygon(100%_0,_0_50%,_100%_100%)] top-1/2 -translate-y-1/2 hidden"></div>
      </div>
-      <a class="group-hover:bg-gray-800 group-hover:cursor-pointer border border-b-4 border-solid rounded border-gray-500 block w-[34px] h-[31px]">
+      <a class="group-hover:bg-gray-800 bg-gray-900 group-hover:cursor-pointer border border-b-4 border-solid rounded border-gray-500 block w-[34px] h-[31px]">
        <img class="group-hover:drop-shadow-default w-6 h-6 m-[5px] object-contain" draggable="false" src="/assets/icons/chat-icon.svg" />
      </a>
    </li>
@ -33,7 +33,7 @@
        <p class="absolute w-full bottom-0 m-0 text-xs leading-6 text-white">World map</p>
        <div class="group-hover:block absolute -left-2 bg-gray-500 h-3.5 w-2 [clip-path:polygon(100%_0,_0_50%,_100%_100%)] top-1/2 -translate-y-1/2 hidden"></div>
      </div>
-      <a class="group-hover:bg-gray-800 group-hover:cursor-pointer border border-b-4 border-solid rounded border-gray-500 block w-[34px] h-[31px]">
+      <a class="group-hover:bg-gray-800 bg-gray-900 group-hover:cursor-pointer border border-b-4 border-solid rounded border-gray-500 block w-[34px] h-[31px]">
        <img class="group-hover:drop-shadow-default w-6 h-6 m-[5px] object-contain" draggable="false" src="/assets/icons/map-icon.svg" />
      </a>
    </li>
@ -42,7 +42,7 @@
        <p class="absolute w-full bottom-0 m-0 text-xs leading-6 text-white">Users</p>
        <div class="group-hover:block absolute -left-2 bg-gray-500 h-3.5 w-2 [clip-path:polygon(100%_0,_0_50%,_100%_100%)] top-1/2 -translate-y-1/2 hidden"></div>
      </div>
-      <a class="group-hover:bg-gray-800 group-hover:cursor-pointer border border-b-4 border-solid rounded border-gray-500 block w-[34px] h-[31px]">
+      <a class="group-hover:bg-gray-800 bg-gray-900 group-hover:cursor-pointer border border-b-4 border-solid rounded border-gray-500 block w-[34px] h-[31px]">
        <img class="group-hover:drop-shadow-default w-6 h-6 m-[5px] object-contain" draggable="false" src="/assets/icons/socials-icon.svg" />
      </a>
    </li>
@ -53,5 +53,5 @@
 import { useGameStore } from '@/stores/gameStore'
 const gameStore = useGameStore()
-let characterLevel = gameStore.character?.level.toString().padStart(2, '0');
+let characterLevel = gameStore.character?.level.toString().padStart(2, '0')
 </script>
--- a/src/components/gui/Minimap.vue
+++ b/src/components/gui/Minimap.vue
@ -1,23 +1,23 @@
 <template>
-    <div class="absolute top-4 right-4">
+  <div class="absolute top-4 right-4 hidden lg:block">
-        <div class="w-40 h-40 rounded-full border border-solid border-gray-500 bg-[url('/assets/ui-texture.png')] bg-no-repeat">
+    <div class="w-40 h-40 rounded-full border border-solid border-gray-500 bg-[url('/assets/ui-texture.png')] bg-no-repeat">
-            <div class="w-40 h-40 rounded-full shadow-inner"></div>
+      <div class="w-40 h-40 rounded-full shadow-inner"></div>
        </div>
        <div class="absolute -bottom-3 left-1/2 -translate-x-1/2 flex gap-1">
            <button class="w-6 h-6 relative p-0">
                <img class="absolute w-3 h-3 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" src="/assets/icons/plus-icon.svg" />
                <img class="w-full h-full" src="/assets/ui-border-4-corners.svg" />
            </button>
            <button class="w-6 h-6 relative p-0">
                <img class="absolute w-3 h-3 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" src="/assets/icons/minus-icon.svg" />
                <img class="w-full h-full" src="/assets/ui-border-4-corners.svg" />
            </button>
        </div>
    </div>
    <div class="absolute -bottom-3 left-1/2 -translate-x-1/2 flex gap-1">
      <button class="w-6 h-6 relative p-0">
        <img class="absolute w-3 h-3 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" src="/assets/icons/plus-icon.svg" />
        <img class="w-full h-full" src="/assets/ui-border-4-corners.svg" />
      </button>
      <button class="w-6 h-6 relative p-0">
        <img class="absolute w-3 h-3 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" src="/assets/icons/minus-icon.svg" />
        <img class="w-full h-full" src="/assets/ui-border-4-corners.svg" />
      </button>
    </div>
  </div>
 </template>
 <script setup lang="ts">
 import { useGameStore } from '@/stores/gameStore'
 const gameStore = useGameStore()
-</script>
+</script>
--- a/src/components/gui/UserPanel.vue
+++ b/src/components/gui/UserPanel.vue
@ -1,7 +1,7 @@
 <template>
  <div class="absolute z-50 w-full h-dvh top-0 left-0 bg-black/60" v-show="gameStore.uiSettings.isUserPanelOpen">
-    <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 max-w-[875px] max-h-[600px] h-full w-[80%] bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md z-50 flex flex-col backdrop-blur-sm shadow-lg">
+    <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 max-w-[875px] max-h-[600px] h-full w-[80%] bg-gray-700 border-solid border-2 border-gray-500 rounded-md z-50 flex flex-col backdrop-blur-sm shadow-lg">
-      <div class="p-2.5 flex max-sm:flex-wrap justify-between items-center gap-5 border-solid border-0 border-b border-cyan-200">
+      <div class="p-2.5 flex max-sm:flex-wrap justify-between items-center gap-5 border-solid border-0 border-b border-gray-500">
        <h3 class="m-0 font-medium shrink-0">Game menu</h3>
        <div class="hidden sm:flex gap-1.5 flex-wrap">
          <button @click.stop="userPanelScreen = 'inventory'" :class="{ active: userPanelScreen === 'inventory' }" class="btn-cyan py-1.5 px-4 min-w-24">Inventory</button>
--- a/src/components/gui/partials/CharacterScreen.vue
+++ b/src/components/gui/partials/CharacterScreen.vue
@ -39,7 +39,7 @@
          </div>
        </div>
      </div>
-      <div class="absolute -left-5 -bottom-5 w-[calc(100%_+_40px)] my-px h-px bg-cyan-200"></div>
+      <div class="absolute -left-5 -bottom-5 w-[calc(100%_+_40px)] my-px h-px bg-gray-500"></div>
    </div>
    <div class="m-4">
      <h4 class="font-medium text-lg max-w-[375px]">Character stats</h4>
--- a/src/components/gui/partials/Equipment.vue
+++ b/src/components/gui/partials/Equipment.vue
@ -13,54 +13,54 @@
        <div class="flex flex-col gap-3 mx-5 mt-2">
          <div class="flex gap-3 justify-center">
            <!-- Helmet -->
-            <div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-11 w-11 relative hover:bg-gray-200">
+            <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md aspect-square h-11 w-11 relative hover:bg-gray-200">
              <img src="/assets/icons/inventory/helmet.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
            </div>
            <!-- Head charm -->
-            <div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-11 w-11 relative hover:bg-gray-200">
+            <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md aspect-square h-11 w-11 relative hover:bg-gray-200">
              <img src="/assets/icons/inventory/head_charm.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
            </div>
          </div>
          <div class="flex gap-3 justify-center">
            <!-- Bracers -->
-            <div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md w-11 h-[104px] relative hover:bg-gray-200">
+            <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md w-11 h-[104px] relative hover:bg-gray-200">
              <img src="/assets/icons/inventory/bracers.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
            </div>
            <!-- Chestplate -->
-            <div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square w-[104px] h-[104px] relative hover:bg-gray-200">
+            <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md aspect-square w-[104px] h-[104px] relative hover:bg-gray-200">
              <img src="/assets/icons/inventory/chestplate.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-10/12 opacity-20" />
            </div>
            <!-- Primary Weapon -->
-            <div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md w-11 h-[104px] self-stretch justify-self-stretch relative hover:bg-gray-200">
+            <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md w-11 h-[104px] self-stretch justify-self-stretch relative hover:bg-gray-200">
              <img src="/assets/icons/inventory/primary_weapon.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
            </div>
          </div>
          <div class="flex gap-3 justify-center">
            <!-- Legs -->
-            <div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md w-11 h-[104px] self-stretch justify-self-stretch relative hover:bg-gray-200">
+            <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md w-11 h-[104px] self-stretch justify-self-stretch relative hover:bg-gray-200">
              <img src="/assets/icons/inventory/legs.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
            </div>
            <div class="flex flex-col gap-3">
              <!-- Belt/pouch -->
-              <div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-11 w-11 self-stretch justify-self-stretch relative hover:bg-gray-200">
+              <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md aspect-square h-11 w-11 self-stretch justify-self-stretch relative hover:bg-gray-200">
                <img src="/assets/icons/inventory/pouch.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
              </div>
              <!-- Boots -->
-              <div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-11 w-11 self-stretch justify-self-stretch relative hover:bg-gray-200">
+              <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md aspect-square h-11 w-11 self-stretch justify-self-stretch relative hover:bg-gray-200">
                <img src="/assets/icons/inventory/boots.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
              </div>
            </div>
          </div>
        </div>
      </div>
-      <div class="absolute -left-5 -bottom-5 w-[calc(100%_+_40px)] my-px h-px bg-cyan-200"></div>
+      <div class="absolute -left-5 -bottom-5 w-[calc(100%_+_40px)] my-px h-px bg-gray-500"></div>
    </div>
    <div class="m-4">
      <h4 class="font-medium text-lg max-w-[375px]">Equipment Bonus</h4>
--- a/src/components/gui/partials/Inventory.vue
+++ b/src/components/gui/partials/Inventory.vue
@ -3,14 +3,14 @@
    <div class="m-4 relative">
      <h4 class="m-auto font-medium text-lg max-w-[375px]">Inventory</h4>
      <div class="flex gap-3 mt-4 mx-auto flex-wrap max-w-[375px]">
-        <div v-for="n in 24" class="bg-gray-300/80 border-solid border-2 border-cyan-200 w-12 h-12 rounded-md aspect-square shrink-0 justify-self-stretch hover:bg-gray-200"></div>
+        <div v-for="n in 24" class="bg-gray-300/80 border-solid border-2 border-gray-500 w-12 h-12 rounded-md aspect-square shrink-0 justify-self-stretch hover:bg-gray-200"></div>
      </div>
-      <div class="absolute -left-5 -bottom-5 w-[calc(100%_+_40px)] my-px h-px bg-cyan-200"></div>
+      <div class="absolute -left-5 -bottom-5 w-[calc(100%_+_40px)] my-px h-px bg-gray-500"></div>
    </div>
    <div class="m-4">
      <h4 class="m-auto font-medium text-lg max-w-[375px]">Chest items</h4>
      <div class="flex gap-3 mt-4 mx-auto flex-wrap max-w-[375px]">
-        <div v-for="n in 12" class="bg-gray-300/80 border-solid border-2 border-cyan-200 w-12 h-12 rounded-md aspect-square shrink-0 justify-self-stretch hover:bg-gray-200"></div>
+        <div v-for="n in 12" class="bg-gray-300/80 border-solid border-2 border-gray-500 w-12 h-12 rounded-md aspect-square shrink-0 justify-self-stretch hover:bg-gray-200"></div>
      </div>
    </div>
  </div>
--- a/src/components/gui/partials/Settings.vue
+++ b/src/components/gui/partials/Settings.vue
@ -4,26 +4,26 @@
      <!-- Settings Categories -->
      <div class="relative p-2.5">
        <h3>Settings</h3>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
      </div>
      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': settingCategory === 'character' }" @click.stop="settingCategory = 'character'">
        <span>Character</span>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
      </a>
      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': settingCategory === 'account' }" @click.stop="settingCategory = 'account'">
        <span>Account</span>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
      </a>
      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': settingCategory === 'audio' }" @click.stop="settingCategory = 'audio'">
        <span>Audio</span>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
      </a>
      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': settingCategory === 'video' }" @click.stop="settingCategory = 'video'">
        <span>Video</span>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
      </a>
    </div>
-    <div class="absolute w-px bg-cyan-200 h-full top-0 left-1/6"></div>
+    <div class="absolute w-px bg-gray-500 h-full top-0 left-1/6"></div>
    <!-- Assets list -->
    <div class="overflow-auto h-full w-10/12 flex flex-col relative">
--- a/src/components/sprites/Character.vue
+++ b/src/components/sprites/Character.vue
@ -2,11 +2,11 @@
  <!--  Chat bubble -->
  <Container ref="charChatContainer" :depth="999" :x="currentX" :y="currentY">
    <RoundRectangle @create="createChatBubble" :origin-x="0.5" :origin-y="7.5" :fillColor="0xffffff" :width="194" :height="21" :radius="20" />
-    <Text @create="createChatText" text="" :origin-x="0.5" :origin-y="10.9" :style="{ fontSize: 13, fontFamily: 'Arial', color: '#000' }" />
+    <Text @create="createChatText" :style="{ fontSize: 13, fontFamily: 'Arial', color: '#000' }" />
  </Container>
  <!--  Character name and health -->
  <Container :depth="999" :x="currentX" :y="currentY">
-    <Text @create="createText" :text="character.name" :origin-x="0.5" :origin-y="9" />
+    <Text @create="createNicknameText" :text="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>
@ -113,7 +113,7 @@ const isFlippedX = computed(() => [6, 4].includes(props.character.rotation ?? 0)
 const charTexture = computed(() => {
  const { rotation, characterType, isMoving } = props.character
-  const spriteId = characterType?.sprite.id ?? 'idle_right_down'
+  const spriteId = characterType?.sprite?.id ?? 'idle_right_down'
  const action = isMoving ? 'walk' : 'idle'
  const direction = [0, 6].includes(rotation) ? 'left_up' : 'right_down'
@ -139,20 +139,30 @@ const createChatText = (text: Phaser.GameObjects.Text) => {
  text.setName(`${props.character.name}_chatText`)
  text.setFontSize(13)
  text.setFontFamily('Arial')
  text.setOrigin(0.5, 10.9)
  // Fix text alignment on Windows and Android
  if (game.device.os.windows || game.device.os.android) {
    text.setOrigin(0.5, 9.75)
    if (game.device.browser.firefox) {
      text.setOrigin(0.5, 10.9)
    }
  }
 }
-const createText = (text: Phaser.GameObjects.Text) => {
+const createNicknameText = (text: Phaser.GameObjects.Text) => {
  text.setFontSize(13)
  text.setFontFamily('Arial')
  text.setOrigin(0.5, 9)
  // Fix text alignment on Windows and Android
  if (game.device.os.windows || game.device.os.android) {
    text.setOrigin(0.5, 8)
    if (game.device.browser.firefox) {
      text.setOrigin(0.5, 9)
    }
  }
 }
--- a/src/components/utilities/ConfirmationModal.vue
+++ b/src/components/utilities/ConfirmationModal.vue
@ -38,24 +38,20 @@ const modalOpened = ref(props.modalOpened)
 </script>
 <template>
-  <Modal :closable="false" :is-resizable="false" :isModalOpen="true" @modal:close="() => (modalOpened = !modalOpened)" :modal-width="300" :modal-height="190">
+  <Modal :closable="false" :is-resizable="false" :isModalOpen="true" @modal:close="() => (modalOpened = !modalOpened)" :modal-width="350" :modal-height="230">
    <template #modalHeader>
-      <div class="text-gray-300">
+      <slot name="modalHeader"></slot>
        <slot name="modalHeader"></slot>
      </div>
    </template>
    <template #modalBody>
-      <div class="text-gray-300 h-full">
+      <div class="h-[calc(100%_-_32px)] p-4">
-        <div class="flex h-full flex-col justify-between">
+        <div class="h-full flex flex-col justify-between">
-          <span class="p-2">
+          <slot name="modalBody"></slot>
-            <slot name="modalBody"></slot>
+          <div class="grid grid-flow-col justify-stretch gap-4">
-          </span>
+            <button class="btn-empty py-1.5 px-4 min-w-24 inline-block" @click="props.cancelFunction()">
          <div class="flex justify-between p-2">
            <button class="btn-cyan py-1.5 px-4 min-w-24 inline-block" @click="props.cancelFunction()">
              {{ props.cancelButtonText }}
            </button>
-            <button class="btn-cyan py-1.5 px-4 min-w-24 inline-block" type="submit" @click="props.confirmFunction()">
+            <button class="btn-red py-1.5 px-4 min-w-24 inline-block" type="submit" @click="props.confirmFunction()">
              {{ props.confirmButtonText }}
            </button>
          </div>
--- a/src/components/utilities/Modal.vue
+++ b/src/components/utilities/Modal.vue
@ -1,23 +1,26 @@
 <template>
  <Teleport to="body">
-    <div v-if="isModalOpenRef" class="fixed bg-gray border-solid border-2 border-gray-500 z-50 flex flex-col backdrop-blur-sm shadow-lg" :style="modalStyle">
+    <div v-if="isModalOpenRef" class="fixed border-solid border-2 border-gray-500 z-50 flex flex-col backdrop-blur-sm shadow-lg" :style="modalStyle">
-      <div @mousedown="startDrag" class="cursor-move p-2.5 flex justify-between items-center border-solid border-0 border-b border-gray-500">
+      <div @mousedown="startDrag" class="cursor-move p-2.5 flex justify-between items-center border-solid border-0 border-b border-gray-500 relative">
-        <slot name="modalHeader" />
+        <div class="rounded-t-md absolute w-full h-full top-0 left-0 bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-center bg-cover opacity-90"></div>
        <div class="relative z-10">
          <slot name="modalHeader" />
        </div>
        <div class="flex gap-2.5">
          <button @click="toggleFullScreen" class="w-5 h-5 m-0 p-0 relative hover:scale-110 transition-transform duration-300 ease-in-out" v-if="canFullScreen">
-            <img :alt="isFullScreen ? 'exit full-screen' : 'full-screen'" draggable="false" :src="isFullScreen ? '/assets/icons/minimize.svg' : '/assets/icons/full-screen.svg'" class="w-full h-full invert" />
+            <img :alt="isFullScreen ? 'exit full-screen' : 'full-screen'" draggable="false" :src="isFullScreen ? '/assets/icons/minimize.svg' : '/assets/icons/increase-size-option.svg'" class="w-3.5 h-3.5 invert" />
          </button>
          <button @click="close" v-if="closable" class="w-3.5 h-3.5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out">
            <img alt="close" draggable="false" src="/assets/icons/close-button-white.svg" class="w-full h-full" />
          </button>
        </div>
      </div>
-      <div class="overflow-hidden grow">
+      <div class="overflow-hidden grow relative">
-        <slot name="modalBody" />
+        <div class="rounded-b-md absolute w-full h-full top-0 left-0 bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-cover bg-center opacity-90"></div>
-        <img v-if="isResizable && !isFullScreen" src="/assets/icons/resize-icon.svg" alt="resize" class="absolute bottom-0 right-0 w-5 h-5 cursor-nwse-resize invert-[60%]" @mousedown="startResize" />
+        <div class="relative z-10 h-full">
-      </div>
+          <slot name="modalBody" />
-      <div v-if="$slots.modalFooter" class="px-5 min-h-12 flex justify-end gap-7.5 items-center border-solid border-t border-gray-500">
+        </div>
-        <slot name="modalFooter" />
+        <img v-if="isResizable && !isFullScreen" src="/assets/icons/resize-icon.svg" alt="resize" class="absolute z-10 bottom-0 right-0 w-5 h-5 cursor-nwse-resize" @mousedown="startResize" />
      </div>
    </div>
  </Teleport>
@ -84,7 +87,7 @@ let startHeight = 0
 let preFullScreenState = { x: 0, y: 0, width: 0, height: 0 }
 const modalStyle = computed(() => ({
-  borderRadius: isFullScreen.value ? '0' : '10px',
+  borderRadius: isFullScreen.value ? '0' : '6px',
  top: isFullScreen.value ? '0' : `${y.value}px`,
  left: isFullScreen.value ? '0' : `${x.value}px`,
  width: isFullScreen.value ? '100vw' : `${width.value}px`,
--- a/src/components/utilities/Notifications.vue
+++ b/src/components/utilities/Notifications.vue
@ -1,7 +1,7 @@
 <template>
-  <Modal v-for="notification in gameStore.getNotifications" :key="notification.id" :isModalOpen="true" @modal:close="closeNotification(notification.id)">
+  <Modal v-for="notification in gameStore.notifications" :key="notification.id" :isModalOpen="true" @modal:close="closeNotification(notification.id)">
    <template #modalHeader v-if="notification.title">
-      <h3 class="m-0 font-medium shrink-0 text-gray-300">{{ notification.title }}</h3>
+      <h3 class="m-0 font-medium shrink-0 text-white">{{ notification.title }}</h3>
    </template>
    <template #modalBody v-if="notification.message">
      <p class="m-4">{{ notification.message }}</p>
--- a/src/components/zone/Objects.vue
+++ b/src/components/zone/Objects.vue
@ -1,36 +0,0 @@
 <template>
  <Image v-for="object in zoneStore.zone?.zoneObjects" :depth="calculateIsometricDepth(object.positionX, object.positionY, object.object.frameWidth, object.object.frameHeight)" :key="object.id" v-bind="getObjectImageProps(object)" :flipX="object.isRotated" />
  <!--    <Text v-for="object in zoneStore.zone?.zoneObjects" :key="object.id" :depth="99999" :text="Math.ceil(calculateIsometricDepth(object.positionX, object.positionY, object.object.frameWidth, object.object.frameHeight))" v-bind="getObjectProps(object)" />-->
 </template>
 <script setup lang="ts">
 import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
 import { Image, Text } from 'phavuer'
 import { useZoneStore } from '@/stores/zoneStore'
 import type { ZoneObject } from '@/types'
 const zoneStore = useZoneStore()
 const props = defineProps<{
  tilemap: Phaser.Tilemaps.Tilemap
 }>()
 const getObjectProps = (object: ZoneObject) => {
  return {
    x: tileToWorldX(props.tilemap as any, object.positionX, object.positionY),
    y: tileToWorldY(props.tilemap as any, object.positionX, object.positionY),
    originY: Number(object.object.originX),
    originX: Number(object.object.originY)
  }
 }
 const getObjectImageProps = (object: ZoneObject) => {
  return {
    x: tileToWorldX(props.tilemap as any, object.positionX, object.positionY),
    y: tileToWorldY(props.tilemap as any, object.positionX, object.positionY),
    texture: object.object.id,
    originY: Number(object.object.originX),
    originX: Number(object.object.originY)
  }
 }
 </script>
--- a/src/components/zone/Zone.vue
+++ b/src/components/zone/Zone.vue
@ -1,23 +1,20 @@
 <template>
-  <Tiles :key="zoneStore.zone?.id ?? 0" @tilemap:create="tileMap = $event" />
+  <ZoneTiles :key="zoneStore.zone?.id ?? 0" @tilemap:create="tileMap = $event" />
-  <Objects v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
+  <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 { useScene } from 'phavuer'
 import { useGameStore } from '@/stores/gameStore'
 import { useZoneStore } from '@/stores/zoneStore'
-import { onBeforeMount, onBeforeUnmount, ref } from 'vue'
+import { onBeforeUnmount, ref, onBeforeMount } from 'vue'
 import type { Character as CharacterT, Zone as ZoneT, ExtendedCharacter as ExtendedCharacterT } from '@/types'
-import Tiles from '@/components/zone/Tiles.vue'
+import ZoneTiles from '@/components/zone/ZoneTiles.vue'
-import Objects from '@/components/zone/Objects.vue'
+import ZoneObjects from '@/components/zone/ZoneObjects.vue'
 import Characters from '@/components/zone/Characters.vue'
 import { loadAssets } from '@/composables/zoneComposable'
 const gameStore = useGameStore()
 const zoneStore = useZoneStore()
 const scene = useScene()
 const tileMap = ref(null as Phaser.Tilemaps.Tilemap | null)
@ -28,13 +25,6 @@ type zoneLoadData = {
 // Event listeners
 gameStore.connection!.on('zone:character:teleport', async (data: zoneLoadData) => {
  /**
   * This is the cause of the bug
   */
  // Fetch assets for new zone
  await gameStore.fetchZoneAssets(data.zone.id)
  await loadAssets(scene)
  /**
   * @TODO : Update character via global event server-side, remove this and listen for it somewhere not here
   */
@ -61,12 +51,8 @@ gameStore.connection!.on('character:move', (data: ExtendedCharacterT) => {
  zoneStore.updateCharacter(data)
 })
-onBeforeMount(() => {
+onBeforeMount(async () => {
-  gameStore.connection!.emit('zone:character:join', async (response: zoneLoadData) => {
+  gameStore!.connection!.emit('zone:character:join', async (response: zoneLoadData) => {
    // Fetch assets for new zone
    await gameStore.fetchZoneAssets(response.zone.id)
    await loadAssets(scene)
    // Set zone and characters
    zoneStore.setZone(response.zone)
    zoneStore.setCharacters(response.characters)
--- a/src/components/zone/ZoneObjects.vue
+++ b/src/components/zone/ZoneObjects.vue
@ -0,0 +1,14 @@
 <template>
  <ZoneObject v-for="zoneObject in zoneStore.zone?.zoneObjects" :tilemap="tilemap" :zoneObject />
 </template>
 <script setup lang="ts">
 import { useZoneStore } from '@/stores/zoneStore'
 import ZoneObject from '@/components/zone/partials/ZoneObject.vue'
 const zoneStore = useZoneStore()
 defineProps<{
  tilemap: Phaser.Tilemaps.Tilemap
 }>()
 </script>
--- a/src/components/zone/ZoneTiles.vue
+++ b/src/components/zone/ZoneTiles.vue
@ -7,17 +7,15 @@ import config from '@/config'
 import { useScene } from 'phavuer'
 import { useZoneStore } from '@/stores/zoneStore'
 import { onBeforeMount, onBeforeUnmount } from 'vue'
-import { placeTile, setAllTiles } from '@/composables/zoneComposable'
+import { setLayerTiles } from '@/composables/zoneComposable'
 import Controls from '@/components/utilities/Controls.vue'
 const emit = defineEmits(['tilemap:create'])
 const zoneStore = useZoneStore()
 const scene = useScene()
 const zoneTilemap = createTilemap()
 const tiles = createTileLayer()
 let tileArray = createTileArray()
 function createTilemap() {
  const zoneData = new Phaser.Tilemaps.MapData({
@ -51,17 +49,11 @@ function createTileLayer() {
  return layer
 }
 function createTileArray() {
  return Array.from({ length: zoneStore.zone?.width ?? 0 }, () => Array.from({ length: zoneStore.zone?.height ?? 0 }, () => 'blank_tile'))
 }
 onBeforeMount(() => {
-  if (zoneStore.zone?.tiles) {
+  if (!zoneStore.zone?.tiles) {
-    setAllTiles(zoneTilemap, tiles, zoneStore.zone.tiles)
+    return
    tileArray = zoneStore.zone.tiles.map((row) => row.map((tileId) => tileId || 'blank_tile'))
  } else {
    tileArray.forEach((row, y) => row.forEach((_, x) => placeTile(zoneTilemap, tiles, x, y, 'blank_tile')))
  }
  setLayerTiles(zoneTilemap, tiles, zoneStore.zone.tiles)
 })
 onBeforeUnmount(() => {
--- a/src/components/zone/partials/ZoneObject.vue
+++ b/src/components/zone/partials/ZoneObject.vue
@ -0,0 +1,63 @@
 <template>
  <Image v-if="isTextureLoaded" v-bind="imageProps" />
 </template>
 <script setup lang="ts">
 import { ref, onMounted, computed } from 'vue'
 import { Image, useScene } from 'phavuer'
 import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
 import { useAssetManager } from '@/utilities/assetManager'
 import type { ZoneObject } from '@/types'
 const props = defineProps<{
  tilemap: Phaser.Tilemaps.Tilemap
  zoneObject: ZoneObject
 }>()
 const scene = useScene()
 const assetManager = useAssetManager
 const isTextureLoaded = ref(false)
 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)
 }))
 const loadTexture = async () => {
  const textureId = props.zoneObject.object.id
  // Check if the texture is already loaded in Phaser
  if (scene.textures.exists(textureId)) {
    isTextureLoaded.value = true
    return
  }
  let assetData = await assetManager.getAsset(textureId)
  if (!assetData) {
    await assetManager.downloadAsset(textureId, `/assets/objects/${textureId}.png`, 'objects', props.zoneObject.object.updatedAt)
    assetData = await assetManager.getAsset(textureId)
  }
  if (assetData) {
    return new Promise<void>((resolve) => {
      scene.textures.addBase64(textureId, assetData.data)
      scene.textures.once(`addtexture-${textureId}`, () => {
        isTextureLoaded.value = true
        resolve()
      })
    })
  }
 }
 onMounted(() => {
  loadTexture().catch((error) => {
    console.error('Error loading texture:', error)
  })
 })
 </script>
--- a/src/composables/gameComposable.ts
+++ b/src/composables/gameComposable.ts
--- a/src/composables/pointerHandlers/useGamePointerHandlers.ts
+++ b/src/composables/pointerHandlers/useGamePointerHandlers.ts
@ -9,7 +9,7 @@ export function useGamePointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilema
  const dragThreshold = 5 // pixels
  function updateWaypoint(worldX: number, worldY: number) {
-    const pointerTile = getTile(worldX, worldY, layer)
+    const pointerTile = getTile(layer, worldX, worldY)
    if (pointerTile) {
      const worldPoint = tileToWorldXY(layer, pointerTile.x, pointerTile.y)
      waypoint.value = {
@ -46,7 +46,7 @@ export function useGamePointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilema
    const distance = Phaser.Math.Distance.Between(pointerStartPosition.value.x, pointerStartPosition.value.y, pointer.x, pointer.y)
    if (distance <= dragThreshold) {
-      const pointerTile = getTile(pointer.worldX, pointer.worldY, layer)
+      const pointerTile = getTile(layer, pointer.worldX, pointer.worldY)
      if (pointerTile) {
        gameStore.connection?.emit('character:initMove', {
          positionX: pointerTile.x,
--- a/src/composables/pointerHandlers/useZoneEditorPointerHandlers.ts
+++ b/src/composables/pointerHandlers/useZoneEditorPointerHandlers.ts
@ -11,7 +11,7 @@ export function useZoneEditorPointerHandlers(scene: Phaser.Scene, layer: Phaser.
  function updateWaypoint(pointer: Phaser.Input.Pointer) {
    const { x: px, y: py } = camera.getWorldPoint(pointer.x, pointer.y)
-    const pointerTile = getTile(px, py, layer)
+    const pointerTile = getTile(layer, px, py)
    if (pointerTile) {
      const worldPoint = tileToWorldXY(layer, pointerTile.x, pointerTile.y)
--- a/src/composables/zoneComposable.ts
+++ b/src/composables/zoneComposable.ts
@ -2,84 +2,70 @@ import config from '@/config'
 import Tilemap = Phaser.Tilemaps.Tilemap
 import TilemapLayer = Phaser.Tilemaps.TilemapLayer
 import Tileset = Phaser.Tilemaps.Tileset
-import { useGameStore } from '@/stores/gameStore'
+import Tile = Phaser.Tilemaps.Tile
-export function getTile(x: number, y: number, layer: Phaser.Tilemaps.TilemapLayer): Phaser.Tilemaps.Tile | undefined {
+export function getTile(layer: TilemapLayer | Tilemap, x: number, y: number): Tile | undefined {
-  const tile: Phaser.Tilemaps.Tile = layer.getTileAtWorldXY(x, y)
+  const tile = layer.getTileAtWorldXY(x, y)
  if (!tile) return undefined
  return tile
 }
-export function tileToWorldXY(layer: Phaser.Tilemaps.TilemapLayer, pos_x: number, pos_y: number) {
+export function tileToWorldXY(layer: TilemapLayer | Tilemap, pos_x: number, pos_y: number) {
  const worldPoint = layer.tileToWorldXY(pos_x, pos_y)
  if (!worldPoint) return { positionX: 0, positionY: 0 }
  const positionX = worldPoint.x + config.tile_size.y
  const positionY = worldPoint.y
  return { positionX, positionY }
 }
-export function tileToWorldX(layer: Phaser.Tilemaps.TilemapLayer, pos_x: number, pos_y: number): number {
+export function tileToWorldX(layer: TilemapLayer | Tilemap, pos_x: number, pos_y: number): number {
  const worldPoint = layer.tileToWorldXY(pos_x, pos_y)
  if (!worldPoint) return 0
  return worldPoint.x + config.tile_size.x / 2
 }
-export function tileToWorldY(layer: TilemapLayer, pos_x: number, pos_y: number): number {
+export function tileToWorldY(layer: TilemapLayer | Tilemap, pos_x: number, pos_y: number): number {
  const worldPoint = layer.tileToWorldXY(pos_x, pos_y)
  if (!worldPoint) return 0
  return worldPoint.y + config.tile_size.y * 1.5
 }
 /**
 * Can also be used to replace tiles
 * @param zone
 * @param layer
 * @param x
 * @param y
 * @param tileName
 */
 export function placeTile(zone: Tilemap, layer: TilemapLayer, x: number, y: number, tileName: string) {
-  const tileImg = zone.getTileset(tileName) as Tileset
+  let tileImg = zone.getTileset(tileName) as Tileset
-  if (!tileImg) return
+  if (!tileImg) {
    tileImg = zone.getTileset('blank_tile') as Tileset
  }
  layer.putTileAt(tileImg.firstgid, x, y)
 }
-export function setAllTiles(zone: Tilemap, layer: TilemapLayer, tiles: string[][]) {
+export function setLayerTiles(zone: Tilemap, layer: TilemapLayer, tiles: string[][]) {
-  tiles.forEach((row, y) => {
+  tiles.forEach((row: string[], y: number) => {
-    row.forEach((tile, x) => {
+    row.forEach((tile: string, x: number) => {
      placeTile(zone, 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 = (x: number, y: number, width: number = 0, height: number = 0, isCharacter: boolean = false) => {
  const baseDepth = x + y
  if (isCharacter) {
    return baseDepth // @TODO: Fix collision, this is a hack
  }
  // For objects, use their back bottom corner
  return baseDepth + (width + height) / (2 * config.tile_size.x)
 }
 export const sortByIsometricDepth = <T extends { positionX: number; positionY: number }>(items: T[]) => {
  return [...items].sort((a, b) => {
    return calculateIsometricDepth(a.positionX, a.positionY, 0, 0) - calculateIsometricDepth(b.positionX, b.positionY, 0, 0)
  })
 }
 export const loadAssets = (scene: Phaser.Scene): Promise<void> => {
  return new Promise((resolve) => {
    const gameStore = useGameStore()
    let addedLoad = false
    gameStore.assets.forEach((asset) => {
      if (scene.load.textureManager.exists(asset.key)) return
      addedLoad = true
      if (asset.group === 'sprite_animations') {
        scene.load.spritesheet(asset.key, config.server_endpoint + asset.url, { frameWidth: asset.frameWidth ?? 0, frameHeight: asset.frameHeight ?? 0 })
      } else {
        scene.load.image(asset.key, config.server_endpoint + asset.url)
      }
    })
    if (addedLoad) {
      scene.load.start()
      scene.load.on(Phaser.Loader.Events.COMPLETE, () => {
        resolve()
      })
    } else {
      resolve()
    }
  })
 }
--- a/src/main.ts
+++ b/src/main.ts
@ -5,7 +5,8 @@ import { createPinia } from 'pinia'
 import App from './App.vue'
 const app = createApp(App)
 const pinia = createPinia()
-app.use(createPinia())
+app.use(pinia)
 app.mount('#app')
--- a/src/screens/Characters.vue
+++ b/src/screens/Characters.vue
@ -5,14 +5,9 @@
      <div class="filler"></div>
      <div class="flex gap-14 w-full max-h-[650px] overflow-x-auto" v-if="!isLoading">
        <!-- CHARACTER LIST -->
-        <div
+        <div v-for="character in characters" :key="character.id" class="group first:ml-auto last:mr-auto m-4 w-[170px] h-[275px] flex flex-col shrink-0 relative shadow-character" :class="{ active: selected_character == character.id }">
-          v-for="character in characters"
+          <img src="/assets/ui-box-outer.svg" class="absolute w-full h-full" />
-          :key="character.id"
+          <img src="/assets/ui-box-inner.svg" class="absolute left-2 bottom-2 w-[calc(100%_-_16px)] h-[calc(100%_-_40px)]" />
          class="group first:ml-auto last:mr-auto m-4 w-[170px] h-[275px] flex flex-col shrink-0 relative shadow-character"
          :class="{ active: selected_character == character.id }"
        >
          <img src="/assets/ui-box-outer.svg" class="absolute w-full h-full max-lg:hidden" />
          <img src="/assets/ui-box-inner.svg" class="absolute left-2 bottom-2 w-[calc(100%_-_16px)] h-[calc(100%_-_40px)] max-lg:hidden" />
          <input class="opacity-0 h-full w-full absolute m-0 z-10" type="radio" :id="character.id" name="character" :value="character.id" v-model="selected_character" />
          <label class="font-bold absolute left-1/2 top-4 max-w-32 -translate-x-1/2 -translate-y-1/2 text-center text-ellipsis overflow-hidden whitespace-nowrap drop-shadow-text" :for="character.id">{{ character.name }}</label>
@ -66,21 +61,23 @@
  </div>
  <!-- CREATE CHARACTER MODAL -->
-  <Modal :isModalOpen="isModalOpen" @modal:close="isModalOpen = false">
+  <Modal :isModalOpen="isModalOpen" @modal:close="isModalOpen = false" :modal-width="430" :modal-height="275">
    <template #modalHeader>
-      <h3 class="m-0 font-medium text-gray-300">Create your character</h3>
+      <h3 class="m-0 font-medium text-white">Create your character</h3>
    </template>
    <template #modalBody>
-      <div class="m-4 character-form">
+      <div class="p-4 h-[calc(100%_-_32px)]">
-        <form method="post" @submit.prevent="create" class="inline">
+        <form method="post" @submit.prevent="create" class="h-full flex flex-col justify-between">
          <div class="form-field-full">
-            <label for="name">Name</label>
+            <label for="name" class="text-white">Nickname</label>
-            <input class="input-field max-w-64" v-model="name" name="name" id="name" />
+            <input class="input-field" v-model="name" name="name" id="name" placeholder="Enter a nickname.." />
          </div>
          <div class="grid grid-flow-col justify-stretch gap-4">
            <button type="button" class="btn-empty py-1.5 px-4 inline-block" @click.prevent="isModalOpen = false">Cancel</button>
            <button class="btn-cyan py-1.5 px-4 inline-block" type="submit">Create</button>
          </div>
          <button class="btn-cyan py-1.5 px-4 mr-5 min-w-24 inline-block" type="submit">CREATE</button>
        </form>
        <button class="btn-cyan py-1.5 px-4 min-w-24 inline-block" @click="isModalOpen = false">CANCEL</button>
      </div>
    </template>
  </Modal>
@ -88,11 +85,13 @@
  <!-- DELETE CHARACTER MODAL -->
  <ConfirmationModal v-if="deletingCharacter != null" :confirm-function="delete_character.bind(this, deletingCharacter.id)" :cancel-function="(() => (deletingCharacter = null)).bind(this)" confirm-button-text="Delete">
    <template #modalHeader>
-      <h3 class="m-0 font-medium text-gray-300">Deleting character</h3>
+      <h3 class="m-0 font-medium text-white">Delete character?</h3>
    </template>
    <template #modalBody>
-      You are about to delete <span class="font-extrabold">{{ deletingCharacter.name }}</span
+      <p class="mt-0 mb-5 text-white text-lg">
-      >, are you sure about that?
+        Do you want to permanently delete <span class="font-extrabold text-white">{{ deletingCharacter.name }}</span
        >?
      </p>
    </template>
  </ConfirmationModal>
 </template>
@ -115,13 +114,7 @@ gameStore.connection?.on('character:list', (data: any) => {
 })
 onMounted(async () => {
-  /**
+  // wait 0.75 sec
   * Fetch sprite assets from the server
   * This is done here because phaser needs it in createScene in Game.vue.
   */
  await gameStore.fetchSpriteAssets()
  // wait 0.5 sec
  setTimeout(() => {
    gameStore.connection?.emit('character:list')
    isLoading.value = false
--- a/src/screens/Game.vue
+++ b/src/screens/Game.vue
@ -1,67 +1,58 @@
 <template>
  <div class="flex justify-center items-center h-dvh relative">
-    <GmTools v-if="gameStore.character?.role === 'gm'" />
+    <Game :config="gameConfig" @create="createGame">
-    <GmPanel v-if="gameStore.character?.role === 'gm'" />
+      <Scene name="main" @preload="preloadScene" @create="createScene">
        <Menu />
        <Hud />
        <Hotkeys />
        <Minimap />
        <Zone />
        <Chat />
        <ExpBar />
-    <div v-if="!zoneEditorStore.active">
+        <Inventory />
-      <Game :config="gameConfig" @create="createGame">
+        <Effects />
-        <Scene name="main" @preload="preloadScene" @create="createScene">
+      </Scene>
-          <div v-if="isLoaded">
+    </Game>
            <Menu />
            <Hud />
            <Keybindings />
            <Minimap />
            <Zone />
            <Chat />
            <ExpBar />
            <Inventory />
            <Effects />
          </div>
        </Scene>
      </Game>
    </div>
    <div v-if="zoneEditorStore.active">
      <Game :config="gameConfig" @create="createGame">
        <Scene name="main" @preload="preloadScene" @create="createScene">
          <ZoneEditor v-if="isLoaded" :key="JSON.stringify(`${zoneEditorStore.zone?.id}_${zoneEditorStore.zone?.createdAt}_${zoneEditorStore.zone?.updatedAt}`)"  />
        </Scene>
      </Game>
    </div>
  </div>
 </template>
 <script setup lang="ts">
 import config from '@/config'
 import 'phaser'
-import { ref, onBeforeUnmount } from 'vue'
+import { onBeforeUnmount } from 'vue'
 import { Game, Scene } from 'phavuer'
 import { useGameStore } from '@/stores/gameStore'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 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/zone/Zone.vue'
-import Keybindings from '@/components/gui/Keybindings.vue'
+import Hotkeys from '@/components/gui/Hotkeys.vue'
 import Chat from '@/components/gui/Chat.vue'
 import GmTools from '@/components/gameMaster/GmTools.vue'
 import ZoneEditor from '@/components/gameMaster/zoneEditor/ZoneEditor.vue'
 import GmPanel from '@/components/gameMaster/GmPanel.vue'
 import Inventory from '@/components/gui/UserPanel.vue'
 import Effects from '@/components/Effects.vue'
 import { loadAssets } from '@/composables/zoneComposable'
 import Minimap from '@/components/gui/Minimap.vue'
-
+import AwaitLoaderPlugin from 'phaser3-rex-plugins/plugins/awaitloader-plugin'
 import { useAssetManager } from '@/utilities/assetManager'
 const gameStore = useGameStore()
-const zoneEditorStore = useZoneEditorStore()
+const assetManager = useAssetManager
 const isLoaded = ref(false)
 const gameConfig = {
-  name: 'Sylvan Quest',
+  name: config.name,
  width: window.innerWidth,
  height: window.innerHeight,
  type: Phaser.AUTO, // AUTO, CANVAS, WEBGL, HEADLESS
-  resolution: 5
+  resolution: 5,
  plugins: {
    global: [
      {
        key: 'rexAwaitLoader',
        plugin: AwaitLoaderPlugin,
        start: true
      }
    ]
  }
 }
 const createGame = (game: Phaser.Game) => {
@ -82,86 +73,49 @@ const createGame = (game: Phaser.Game) => {
  }
 }
-const preloadScene = async (scene: Phaser.Scene) => {
+function preloadScene(scene: Phaser.Scene) {
  isLoaded.value = false
  /**
   * Create loading bar
   */
  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',
      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()
    isLoaded.value = true
  })
  /**
   * 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('blank_object', '/assets/zone/blank_tile.png')
  scene.load.image('waypoint', '/assets/waypoint.png')
-  /**
+  scene.load.rexAwait(async function (successCallback) {
-   * Load the assets into the Phaser scene
+    await assetManager.getAssetsByGroup('tiles').then((assets) => {
-   */
+      assets.forEach((asset) => {
-  await loadAssets(scene)
+        if (scene.load.textureManager.exists(asset.key)) return
        scene.textures.addBase64(asset.key, asset.data)
      })
    })
    // Load objects
    await assetManager.getAssetsByGroup('objects').then((assets) => {
      assets.forEach((asset) => {
        if (scene.load.textureManager.exists(asset.key)) return
        scene.textures.addBase64(asset.key, asset.data)
      })
    })
    successCallback()
  })
 }
-const createScene = async (scene: Phaser.Scene) => {
+function createScene(scene: Phaser.Scene) {
  /**
   * Create sprite animations
   * This is done here because phaser forces us to
   */
-  gameStore.assets.forEach((asset) => {
+  assetManager.getAssetsByGroup('sprite_animations').then((assets) => {
-    if (asset.group !== 'sprite_animations') return
+    assets.forEach((asset) => {
-
+      scene.anims.create({
-    scene.anims.create({
+        key: asset.key,
-      key: asset.key,
+        frameRate: 7,
-      frameRate: 7,
+        frames: scene.anims.generateFrameNumbers(asset.key, { start: 0, end: asset.frameCount! - 1 }),
-      frames: scene.anims.generateFrameNumbers(asset.key, { start: 0, end: asset.frameCount! - 1 }),
+        repeat: -1
-      repeat: -1
+      })
    })
  })
 }
-onBeforeUnmount(() => {
+onBeforeUnmount(() => {})
  isLoaded.value = false
  gameStore.disconnectSocket()
 })
 </script>
 <style lang="scss">
 canvas {
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  image-rendering: pixelated;
 }
 </style>
--- a/src/screens/Loading.vue
+++ b/src/screens/Loading.vue
@ -0,0 +1,74 @@
 <template>
  <div class="flex flex-col justify-center items-center h-dvh relative">
    <div v-if="!isLoaded" class="w-20 h-20 rounded-full border-4 border-solid border-gray-300 border-t-transparent animate-spin"></div>
    <button v-else @click="continueBtnClick" class="w-20 h-20 rounded-full bg-gray-500 flex items-center justify-center hover:bg-gray-600 transition-colors">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 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 v-if="!isLoaded" class="text-center mt-6">
      <h1 class="text-2xl font-bold">Loading...</h1>
      <p class="text-gray-400">Please wait while we load the assets.</p>
    </div>
  </div>
 </template>
 <script setup lang="ts" async>
 import { onMounted, ref } from 'vue'
 import config from '@/config'
 import type { AssetT as ServerAsset } from '@/types'
 import { useAssetManager } from '@/utilities/assetManager'
 import { useGameStore } from '@/stores/gameStore'
 /**
 * This component downloads all assets from the server and
 * stores them in the asset manager.
 */
 const gameStore = useGameStore()
 const assetManager = useAssetManager
 const isLoaded = ref(false)
 async function getAssets() {
  return fetch(config.server_endpoint + '/assets/')
    .then((response) => {
      if (!response.ok) throw new Error('Failed to fetch assets')
      console.log(response)
      return response.json()
    })
    .catch((error) => {
      console.error('Error fetching assets:', error)
      return false
    })
 }
 async function loadAssetsIntoAssetManager(assets: ServerAsset[]): Promise<void> {
  for (const asset of assets) {
    // Check if the asset is already loaded
    const existingAsset = await assetManager.getAsset(asset.key)
    // Check if the asset needs to be updated
    if (!existingAsset || new Date(asset.updatedAt) > new Date(existingAsset.updatedAt)) {
      // Check if the asset is already loaded, if so, delete it
      if (existingAsset) {
        await assetManager.deleteAsset(asset.key)
      }
      // Add the asset to the asset manager
      await assetManager.downloadAsset(asset.key, asset.url, asset.group, asset.updatedAt, asset.frameCount, asset.frameWidth, asset.frameHeight)
    }
  }
 }
 function continueBtnClick() {
  gameStore.isAssetsLoaded = true
 }
 onMounted(async () => {
  const assets = await getAssets()
  if (assets) {
    await loadAssetsIntoAssetManager(assets)
    isLoaded.value = true
  }
 })
 </script>
--- a/src/screens/Login.vue
+++ b/src/screens/Login.vue
@ -1,7 +1,7 @@
 <template>
-  <div class="relative max-lg:h-dvh">
+  <div class="relative max-lg:h-dvh flex flex-row-reverse">
-    <div class="lg:bg-gradient-to-r bg-gradient-to-b from-gray-900 to-transparent w-full lg:w-1/2 h-[35dvh] lg:h-dvh absolute right-0 max-lg:bottom-0 lg:top-0 z-10"></div>
+    <div class="lg:bg-gradient-to-l bg-gradient-to-b from-gray-900 to-transparent w-full lg:w-1/2 h-[35dvh] 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')] w-full lg:w-1/2 h-[35dvh] lg:h-dvh absolute right-0 max-lg:bottom-0 lg:top-0 bg-no-repeat bg-cover bg-center"></div>
+    <div class="bg-[url('/assets/login/login-bg.png')] w-full lg:w-1/2 h-[35dvh] lg:h-dvh absolute left-0 max-lg:bottom-0 lg:top-0 bg-no-repeat bg-cover bg-center"></div>
    <div class="bg-gray-900 z-20 w-full lg:w-1/2 h-[65dvh] lg:h-dvh relative">
      <div class="h-dvh flex items-center lg:justify-center flex-col px-8 max-lg:pt-20">
        <img src="/assets/login/sq-logo-v1.svg" class="mb-10" />
@ -16,12 +16,12 @@
                <input class="input-field xs:min-w-[350px] min-w-64" id="username-login" v-model="username" type="text" name="username" placeholder="Username" required autofocus />
                <div class="relative">
                  <input class="input-field xs:min-w-[350px] min-w-64" id="password-login" v-model="password" :type="showPassword ? 'text' : 'password'" name="password" placeholder="Password" required />
-                  <button type="button" @click.prevent="showPassword = !showPassword" :class="{'eye-open': showPassword}" class="bg-[url('/assets/icons/eye.svg')] p-0 absolute right-3 w-4 h-3 top-1/2 -translate-y-1/2 bg-no-repeat"></button>
+                  <button type="button" @click.prevent="showPassword = !showPassword" :class="{ 'eye-open': showPassword }" class="bg-[url('/assets/icons/eye.svg')] p-0 absolute right-3 w-4 h-3 top-1/2 -translate-y-1/2 bg-no-repeat"></button>
                </div>
                <span v-if="loginError" class="text-red-200 text-xs absolute top-full mt-1">{{ loginError }}</span>
              </div>
              <button class="inline-flex self-end p-0 text-cyan-300 text-base">Forgot password?</button>
-              <button class="btn-cyan px-0 xs:w-full" type="submit">Play now</button> 
+              <button class="btn-cyan px-0 xs:w-full" type="submit">Play now</button>
              <!-- Divider shape -->
              <div class="absolute w-40 h-0.5 -bottom-8 left-1/2 -translate-x-1/2 flex justify-between">
@ -42,11 +42,11 @@
                <input class="input-field xs:min-w-[350px] min-w-64" id="username-register" v-model="username" type="text" name="username" placeholder="Username" required autofocus />
                <div class="relative">
                  <input class="input-field xs:min-w-[350px] min-w-64" id="password-register" v-model="password" :type="showPassword ? 'text' : 'password'" name="password" placeholder="Password" required />
-                  <button type="button" @click.prevent="showPassword = !showPassword" :class="{'eye-open': showPassword}" class="bg-[url('/assets/icons/eye.svg')] p-0 absolute right-3 w-4 h-3 top-1/2 -translate-y-1/2 bg-no-repeat"></button>
+                  <button type="button" @click.prevent="showPassword = !showPassword" :class="{ 'eye-open': showPassword }" class="bg-[url('/assets/icons/eye.svg')] p-0 absolute right-3 w-4 h-3 top-1/2 -translate-y-1/2 bg-no-repeat"></button>
                </div>
                <span v-if="loginError" class="text-red-200 text-xs absolute top-full mt-1">{{ loginError }}</span>
              </div>
-              <button class="btn-cyan xs:w-full" type="submit">Register now</button> 
+              <button class="btn-cyan xs:w-full" type="submit">Register now</button>
              <!-- Divider shape -->
              <div class="absolute w-40 h-0.5 -bottom-8 left-1/2 -translate-x-1/2 flex justify-between">
--- a/src/screens/ZoneEditor.vue
+++ b/src/screens/ZoneEditor.vue
@ -0,0 +1,117 @@
 <template>
  <div class="flex justify-center items-center h-dvh relative">
    <Game :config="gameConfig" @create="createGame">
      <Scene name="main" @preload="preloadScene" @create="createScene">
        <ZoneEditor v-if="isLoaded" :key="JSON.stringify(`${zoneEditorStore.zone?.id}_${zoneEditorStore.zone?.createdAt}_${zoneEditorStore.zone?.updatedAt}`)" />
      </Scene>
    </Game>
  </div>
 </template>
 <script setup lang="ts">
 import config from '@/config'
 import 'phaser'
 import { ref, onBeforeUnmount } from 'vue'
 import { Game, Scene } from 'phavuer'
 import { useGameStore } from '@/stores/gameStore'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import ZoneEditor from '@/components/gameMaster/zoneEditor/ZoneEditor.vue'
 const gameStore = useGameStore()
 const zoneEditorStore = useZoneEditorStore()
 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) => {
  isLoaded.value = false
  /**
   * Create loading bar
   */
  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',
      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()
    isLoaded.value = true
  })
  /**
   * 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')
 }
 const createScene = async (scene: Phaser.Scene) => {
  /**
   * Create sprite animations
   * This is done here because phaser forces us to
   */
  gameStore.assets.forEach((asset) => {
    if (asset.group !== 'sprite_animations') return
    scene.anims.create({
      key: asset.key,
      frameRate: 7,
      frames: scene.anims.generateFrameNumbers(asset.key, { start: 0, end: asset.frameCount! - 1 }),
      repeat: -1
    })
  })
 }
 onBeforeUnmount(() => {
  isLoaded.value = false
 })
 </script>
--- a/src/services/authentication.ts
+++ b/src/services/authentication.ts
@ -1,9 +1,8 @@
 import axios from 'axios'
 import config from '@/config'
 import { useGameStore } from '@/stores/gameStore'
 import { useCookies } from '@vueuse/integrations/useCookies'
-export async function register(username: string, password: string, gameStore = useGameStore()) {
+export async function register(username: string, password: string) {
  try {
    const response = await axios.post(`${config.server_endpoint}/register`, { username, password })
    useCookies().set('token', response.data.token as string)
@ -13,13 +12,13 @@ export async function register(username: string, password: string, gameStore = u
  }
 }
-export async function login(username: string, password: string, gameStore = useGameStore()) {
+export async function login(username: string, password: string) {
  try {
    const response = await axios.post(`${config.server_endpoint}/login`, { username, password })
    useCookies().set('token', response.data.token as string, {
      // for whole domain
      // @TODO : #190
-      domain: window.location.hostname.split('.').slice(-2).join('.')
+      // domain: window.location.hostname.split('.').slice(-2).join('.')
    })
    return { success: true, token: response.data.token }
  } catch (error: any) {
--- a/src/stores/assetManagerStore.ts
+++ b/src/stores/assetManagerStore.ts
@ -1,6 +1,6 @@
 import { ref } from 'vue'
 import { defineStore } from 'pinia'
-import type { Tile, Object, Sprite } from '@/types'
+import type { Tile, Object, Sprite, CharacterType } from '@/types'
 export const useAssetManagerStore = defineStore('assetManager', () => {
  const tileList = ref<Tile[]>([])
@ -12,6 +12,9 @@ export const useAssetManagerStore = defineStore('assetManager', () => {
  const spriteList = ref<Sprite[]>([])
  const selectedSprite = ref<Sprite | null>(null)
  const characterTypeList = ref<CharacterType[]>([])
  const selectedCharacterType = ref<CharacterType | null>(null)
  function setTileList(tiles: Tile[]) {
    tileList.value = tiles
  }
@ -36,6 +39,14 @@ export const useAssetManagerStore = defineStore('assetManager', () => {
    selectedSprite.value = sprite
  }
  function setCharacterTypeList(characterTypes: CharacterType[]) {
    characterTypeList.value = characterTypes
  }
  function setSelectedCharacterType(characterType: CharacterType | null) {
    selectedCharacterType.value = characterType
  }
  return {
    tileList,
    selectedTile,
@ -43,11 +54,15 @@ export const useAssetManagerStore = defineStore('assetManager', () => {
    selectedObject,
    spriteList,
    selectedSprite,
    characterTypeList,
    selectedCharacterType,
    setTileList,
    setSelectedTile,
    setObjectList,
    setCharacterTypeList,
    setSelectedObject,
    setSpriteList,
-    setSelectedSprite
+    setSelectedSprite,
    setSelectedCharacterType
  }
 })
--- a/src/stores/gameStore.ts
+++ b/src/stores/gameStore.ts
@ -7,9 +7,9 @@ import { useCookies } from '@vueuse/integrations/useCookies'
 export const useGameStore = defineStore('game', {
  state: () => {
    return {
      loginMessage: null as string | null,
      notifications: [] as Notification[],
-      assets: [] as Asset[],
+      isAssetsLoaded: false,
      loadedAssets: [] as string[],
      token: '' as string | null,
      connection: null as Socket | null,
      user: null as User | null,
@ -31,12 +31,6 @@ export const useGameStore = defineStore('game', {
      }
    }
  },
  getters: {
    getNotifications: (state: any) => state.notifications,
    getAssetByKey: (state) => {
      return (key: string) => state.assets.find((asset) => asset.key === key)
    }
  },
  actions: {
    addNotification(notification: Notification) {
      if (!notification.id) {
@ -47,54 +41,6 @@ export const useGameStore = defineStore('game', {
    removeNotification(id: string) {
      this.notifications = this.notifications.filter((notification: Notification) => notification.id !== id)
    },
    setAssets(assets: Asset[]) {
      this.assets = assets
    },
    addAsset(asset: Asset) {
      this.assets.push(asset)
    },
    addAssets(assets: Asset[]) {
      this.assets = this.assets.concat(assets)
    },
    async fetchSpriteAssets() {
      return fetch(config.server_endpoint + '/assets/sprites')
        .then((response) => response.json())
        .then((assets) => {
          // Only add the sprites that are not already in the store
          this.addAssets(assets.filter((asset: Asset) => !this.getAssetByKey(asset.key)))
          return true
        })
        .catch((error) => {
          console.error('Error fetching assets:', error)
          return false
        })
    },
    async fetchZoneAssets(zoneId: number) {
      return fetch(config.server_endpoint + '/assets/zone/' + zoneId)
        .then((response) => response.json())
        .then((assets) => {
          // Only add the zones that are not already in the store
          this.addAssets(assets.filter((asset: Asset) => !this.getAssetByKey(asset.key)))
          return true
        })
        .catch((error) => {
          console.error('Error fetching assets:', error)
          return false
        })
    },
    async fetchAllZoneAssets() {
      return fetch(config.server_endpoint + '/assets/zone')
        .then((response) => response.json())
        .then((assets) => {
          // Only add the zones that are not already in the store
          this.addAssets(assets.filter((asset: Asset) => !this.getAssetByKey(asset.key)))
          return true
        })
        .catch((error) => {
          console.error('Error fetching assets:', error)
          return false
        })
    },
    setToken(token: string) {
      this.token = token
    },
@ -152,15 +98,15 @@ export const useGameStore = defineStore('game', {
      })
    },
    disconnectSocket() {
-      if (this.connection) this.connection.disconnect()
+      this.connection?.disconnect()
      useCookies().remove('token', {
        // for whole domain
        // @TODO : #190
-        domain: window.location.hostname.split('.').slice(-2).join('.')
+        // domain: window.location.hostname.split('.').slice(-2).join('.')
      })
-      this.assets = []
+      this.isAssetsLoaded = false
      this.connection = null
      this.token = null
      this.user = null
--- a/src/stores/zoneEditorStore.ts
+++ b/src/stores/zoneEditorStore.ts
@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
 import { useGameStore } from '@/stores/gameStore'
-import type { Zone, Object, Tile, ZoneObject, ZoneEffects } from '@/types'
+import type { Zone, Object, Tile, ZoneEffect } from '@/types'
 export type TeleportSettings = {
  toZoneId: number
@ -22,7 +22,6 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
      objectList: [] as Object[],
      selectedTile: null as Tile | null,
      selectedObject: null as Object | null,
      selectedZoneObject: null as ZoneObject | null,
      objectDepth: 0,
      isTileListModalShown: false,
      isObjectListModalShown: false,
@ -34,7 +33,7 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
        width: 0,
        height: 0,
        pvp: false,
-        effects: [] as ZoneEffects[]
+        zoneEffects: [] as ZoneEffect[]
      },
      teleportSettings: {
        toZoneId: 0,
@ -67,9 +66,9 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
      if (!this.zone) return
      this.zone.pvp = pvp
    },
-    setZoneEffects(zoneEffects: ZoneEffects) {
+    setZoneEffects(zoneEffects: ZoneEffect[]) {
      if (!this.zone) return
-      this.zone.zoneEffects = zoneEffects
+      this.zoneSettings.zoneEffects = zoneEffects
    },
    setTool(tool: string) {
      this.tool = tool
@ -95,9 +94,6 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
    setSelectedObject(object: any) {
      this.selectedObject = object
    },
    setSelectedZoneObject(zoneObject: ZoneObject | null) {
      this.selectedZoneObject = zoneObject
    },
    setObjectDepth(depth: number) {
      this.objectDepth = depth
    },
@ -114,8 +110,8 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
    setTeleportSettings(teleportSettings: TeleportSettings) {
      this.teleportSettings = teleportSettings
    },
-    reset() {
+    reset(resetZone = false) {
-      // this.zone = null
+      if (resetZone) this.zone = null
      this.zoneList = []
      this.tileList = []
      this.objectList = []
@ -123,7 +119,6 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
      this.drawMode = 'tile'
      this.selectedTile = null
      this.selectedObject = null
      this.selectedZoneObject = null
      this.objectDepth = 0
      this.isSettingsModalShown = false
      this.isZoneListModalShown = false
--- a/src/types.ts
+++ b/src/types.ts
@ -4,10 +4,11 @@ export type Notification = {
  message?: string
 }
-export type Asset = {
+export type AssetT = {
  key: string
  url: string
  group: 'tiles' | 'objects' | 'sprites' | 'sprite_animations' | 'sound' | 'music' | 'ui' | 'font' | 'other'
  updatedAt: Date
  frameCount?: number
  frameWidth?: number
  frameHeight?: number
@ -53,7 +54,7 @@ export type Zone = {
  height: number
  tiles: any | null
  pvp: boolean
-  zoneEffects: ZoneEffects
+  zoneEffects: ZoneEffect[]
  zoneEventTiles: ZoneEventTile[]
  zoneObjects: ZoneObject[]
  characters: Character[]
@ -62,7 +63,7 @@ export type Zone = {
  updatedAt: Date
 }
-export type ZoneEffects = {
+export type ZoneEffect = {
  id: string
  zoneId: number
  zone: Zone
@ -136,8 +137,8 @@ export type CharacterType = {
  gender: CharacterGender
  race: CharacterRace
  characters: Character[]
-  spriteId: string
+  spriteId?: string
-  sprite: Sprite
+  sprite?: Sprite
  createdAt: Date
  updatedAt: Date
 }
@ -221,4 +222,4 @@ export type WorldSettings = {
  isRainEnabled: boolean
  isFogEnabled: boolean
  fogDensity: number
-}
+}
--- a/src/utilities/assetManager.ts
+++ b/src/utilities/assetManager.ts
@ -0,0 +1,72 @@
 import config from '@/config'
 import Dexie from 'dexie'
 class AssetManager extends Dexie {
  assets!: Dexie.Table<
    {
      key: string
      data: Blob
      group: string
      updatedAt: Date
      frameCount?: number
      frameWidth?: number
      frameHeight?: number
    },
    string
  >
  constructor() {
    super('Assets')
    this.version(1).stores({
      assets: 'key, group'
    })
  }
  async downloadAsset(key: string, url: string, group: string, updatedAt: Date, frameCount?: number, frameWidth?: number, frameHeight?: number) {
    try {
      const response = await fetch(config.server_endpoint + url)
      const blob = await response.blob()
      await this.assets.put({ key, data: blob, group, updatedAt, frameCount, frameWidth, frameHeight })
    } catch (error) {
      console.error(`Failed to add asset ${key}:`, error)
    }
  }
  async getAsset(key: string) {
    try {
      const asset = await this.assets.get(key)
      if (asset) {
        return {
          ...asset,
          data: URL.createObjectURL(asset.data)
        }
      }
    } catch (error) {
      console.error(`Failed to retrieve asset ${key}:`, error)
    }
    return null
  }
  async getAssetsByGroup(group: string) {
    try {
      const assets = await this.assets.where('group').equals(group).toArray()
      return assets.map((asset) => ({
        ...asset,
        data: URL.createObjectURL(asset.data)
      }))
    } catch (error) {
      console.error(`Failed to retrieve assets for group ${group}:`, error)
      return []
    }
  }
  async deleteAsset(key: string) {
    try {
      await this.assets.delete(key)
    } catch (error) {
      console.error(`Failed to delete asset ${key}:`, error)
    }
  }
 }
 export const useAssetManager = new AssetManager()
--- a/vite.config.js
+++ b/vite.config.js
@ -1,7 +1,8 @@
 import { fileURLToPath, URL } from 'node:url';
 import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
-import VueDevTools from 'vite-plugin-vue-devtools';
+import VueDevTools from 'vite-plugin-vue-devtools'
 // https://vitejs.dev/config/
 export default defineConfig({
    plugins: [
--- a/vite.config.ts
+++ b/vite.config.ts
@ -1,7 +1,6 @@
 import { fileURLToPath, URL } from 'node:url'
 import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
+import vue from '@vitejs/plugin-vue';
 import VueDevTools from 'vite-plugin-vue-devtools'
 // https://vitejs.dev/config/
@ -15,4 +14,4 @@ export default defineConfig({
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
-})
+})
Author	SHA1	Message	Date
Dennis Postma	9f50b062b0	Worked on dynamic texture loading	2024-10-25 22:17:02 +02:00
Dennis Postma	347fc0e1e8	MVP Dexie loader	2024-10-21 18:35:36 +02:00
Dennis Postma	715fe5c318	Cookies	2024-10-21 02:15:29 +02:00
Dennis Postma	df19c1094c	feature/#215-dexie-caching-implementation	2024-10-21 02:08:27 +02:00
Dennis Postma	279b9bc7a3	Reversed order of login screen (img>form)	2024-10-20 01:10:29 +02:00
Dennis Postma	6adfc727c5	return if shift is pressed for tiles, objects and event tiles (camera drag = active)	2024-10-19 22:36:08 +02:00
Colin Kallemein	1aa07daa35	Also added overflow to tile group	2024-10-19 22:25:25 +02:00
Colin Kallemein	36901782ea	Adjusted gm panel + toolbar styling, fixed tilelist overflow	2024-10-19 22:11:20 +02:00
Colin Kallemein	62f2e1124c	#211 Fixed overflow scroll in left panel not working	2024-10-19 21:27:04 +02:00
Dennis Postma	f6e1a54e74	Body view fixes?	2024-10-19 21:20:43 +02:00
Dennis Postma	6e2885cba6	Added tile sorting logic, minor improvements	2024-10-19 21:15:13 +02:00
Dennis Postma	252d9c87fd	Firefox styling fixes	2024-10-19 17:13:06 +02:00
Dennis Postma	856829b605	Possible fix for text alignment on Windows	2024-10-19 17:00:58 +02:00
Dennis Postma	a0f0b40ed3	Replaced modal resize icon, started writing components for character type management, spride field made optional	2024-10-19 02:15:48 +02:00
Dennis Postma	68222ab511	Styling fixes	2024-10-18 23:08:01 +02:00
Dennis Postma	fe804037d0	#137 : Listen for zoneEffects in effects component	2024-10-18 22:41:42 +02:00
Dennis Postma	5d288772b5	#137 : Added logic to set effects per zone in zone editor	2024-10-18 22:23:56 +02:00
Dennis Postma	3c9b92ccbd	Better func. naming	2024-10-18 19:53:02 +02:00
Dennis Postma	13cb46658f	nginx conf. test	2024-10-18 19:45:25 +02:00
Dennis Postma	222614b856	Moved GmTools and GmPanel to App.vue	2024-10-18 19:27:22 +02:00
Dennis Postma	9f10db142b	don't have ZE enabled by default	2024-10-18 19:21:06 +02:00
Dennis Postma	860fe705c6	Saving maps works again	2024-10-18 19:10:41 +02:00
Dennis Postma	352ec3fad8	Moved search input into modal	2024-10-18 17:55:58 +02:00
Dennis Postma	c7a3d74408	Removed todo comment	2024-10-18 17:47:11 +02:00
Dennis Postma	1e0da5f7cc	Removed unused imports, re-added paint func, more refactor work	2024-10-18 17:45:50 +02:00
Dennis Postma	7ce054191a	Re-added & Improved delete logics for tiles, zone objects and event tiles. Added more code comments for better DX.	2024-10-18 15:43:50 +02:00
Dennis Postma	34f547f0a6	Added deleteTile() func. to zone composable	2024-10-18 15:40:28 +02:00
Dennis Postma	14e07aa4a1	npm update	2024-10-18 15:40:14 +02:00
Dennis Postma	95dcf237cf	npm run format	2024-10-18 02:49:35 +02:00
Dennis Postma	5cc1821922	Removed unused import	2024-10-18 02:49:04 +02:00
Dennis Postma	9d774bcb18	Removed redundant code , refactor event tile code	2024-10-18 02:48:27 +02:00
Dennis Postma	c6869f47b1	Typescript improvements, added move zone object logic.	2024-10-18 02:33:51 +02:00
Dennis Postma	390b9517e0	Moved styling to main.scss as it's global	2024-10-18 00:42:15 +02:00
Dennis Postma	2497da30b7	Re-added initial-scale=1	2024-10-18 00:40:50 +02:00
Dennis Postma	66e56d3626	Renamed Keybindings > Hotkeys	2024-10-18 00:33:06 +02:00
Dennis Postma	d68ee120ab	Merge remote-tracking branch 'origin/feature/refactor-zone-editor' # Conflicts: # src/components/gui/Keybindings.vue # src/components/gui/Minimap.vue	2024-10-18 00:21:03 +02:00
Dennis Postma	aff32c33c7	npm update, mobile scroll fix, zone editor object refactor work, removed redundant div	2024-10-18 00:20:30 +02:00
Colin Kallemein	3c8744dc75	Reworked layout for keybindings, hide minimap on smaller screens	2024-10-17 23:26:25 +02:00
Dennis Postma	774871510e	Reordered func. params getTile(), npm run format, refactor zone object part in zone editor, other improvements	2024-10-17 19:26:45 +02:00
Dennis Postma	e61b705031	Smaller GmTools modal height	2024-10-17 18:41:14 +02:00
Dennis Postma	3902c611fa	Fixed placing tiles	2024-10-17 18:39:18 +02:00
Dennis Postma	3765cfe5e9	Started refactoring zone editor	2024-10-17 02:32:39 +02:00
Colin Kallemein	2fad54fd26	More styling tweaks, updated confirmation modal	2024-10-16 22:23:00 +02:00
Colin Kallemein	be3cbf77bf	Added global empty btn styling, adjusted and WIP modal styling	2024-10-16 20:47:29 +02:00
Dennis Postma	f24a498246	Re-added Vue Dev Tools. Problem fixed https://github.com/vuejs/devtools-next/issues/635	2024-10-16 18:50:38 +02:00
Dennis Postma	9686381745	Removed unused impots, use config.name instead of hardcoded name	2024-10-16 16:07:35 +02:00
Dennis Postma	e42c530685	Bug fix for toggling zoneEditor	2024-10-16 16:06:18 +02:00
Dennis Postma	e56e078042	Separated Game and ZoneEditor screens	2024-10-16 16:04:43 +02:00
Dennis Postma	13be1a38fa	Refactor App.vue	2024-10-16 16:04:29 +02:00
Dennis Postma	27e857b9a6	npm update, removed vue dev tools bc bug	2024-10-16 15:45:41 +02:00
Dennis Postma	2b2c290db0	Removed unused const.	2024-10-16 14:15:30 +02:00
Dennis Postma	245b50c1fd	Moved component attributes to properties function for more streamlined experience	2024-10-16 14:15:01 +02:00
Dennis Postma	32dc7a2963	Removed register, it's in the same screen now	2024-10-16 14:11:43 +02:00
Zaxiure	a9c2b209d9	Works partially 💩	2024-10-15 23:48:50 +02:00