205 changed files with 8036 additions and 13703 deletions
--- a/.env.example
+++ b/.env.example
@ -1,6 +1,5 @@
-VITE_NAME=Noxious
-VITE_DOMAIN=localhost
-VITE_ENVIRONMENT=development
+VITE_NAME=Sylvan Quest
+VITE_DEVELOPMENT=true
 VITE_SERVER_ENDPOINT=http://localhost:4000
-VITE_TILE_SIZE_WIDTH=64
-VITE_TILE_SIZE_HEIGHT=32
+VITE_TILE_SIZE_X=64
+VITE_TILE_SIZE_Y=32
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@ -0,0 +1,13 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+  root: true,
+  extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/eslint-config-typescript', '@vue/eslint-config-prettier/skip-formatting'],
+  parserOptions: {
+    ecmaVersion: 'latest'
+  },
+  rules: {
+    'vue/multi-word-component-names': 'off'
+  }
+}
--- a/.prettierrc.json
+++ b/.prettierrc.json
@ -4,8 +4,5 @@
  "tabWidth": 2,
  "singleQuote": true,
  "printWidth": 300,
-  "trailingComma": "none",
-  "plugins": ["@ianvs/prettier-plugin-sort-imports"],
-  "importOrderParserPlugins": ["typescript", "jsx", "decorators-legacy", "classProperties"],
-  "importOrderCaseSensitive": false
+  "trailingComma": "none"
 }
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -1,6 +1,7 @@
 {
  "recommendations": [
    "Vue.volar",
+    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode"
  ]
 }
--- a/70
+++ b/70
@ -1,70 +0,0 @@
-{
-	# Global options
-	admin off # Disable admin API
-
-	# Global logging configuration
-	log {
-		output file /var/log/caddy/access.log
-		format json
-		level INFO
-	}
-}
-
-noxious.gg {
-	# Root directory for your Vue app
-	root * ./dist
-
-	# Enable compression with optimal settings
-	encode zstd gzip
-
-	# Handle SPA routing
-	try_files {path} /index.html
-
-	# Serve static files with optimizations
-	file_server
-
-	# Enhanced security headers
-	header {
-		# Existing headers with improvements
-		X-Frame-Options "SAMEORIGIN"
-		X-XSS-Protection "1; mode=block"
-		X-Content-Type-Options "nosniff"
-		Referrer-Policy "strict-origin-when-cross-origin"
-
-		# Additional security headers
-		Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"
-		Permissions-Policy "accelerometer=(), camera=(), geolocation=(), gyroscope=(), magnetometer=(), microphone=(), payment=(), usb=()"
-
-		# Remove server information
-		-Server
-	}
-
-	# Improved cache configuration for static assets
-	@static {
-		file
-		path *.js *.css *.png *.jpg *.jpeg *.gif *.ico *.svg *.woff *.woff2 *.ttf *.eot
-	}
-	header @static {
-		Cache-Control "public, max-age=31536000, immutable"
-		Vary Accept-Encoding
-	}
-
-	# Cache control for HTML files
-	@html {
-		file
-		path *.html
-	}
-	header @html {
-		Cache-Control "no-cache, must-revalidate"
-	}
-
-	# Handle errors
-	handle_errors {
-		respond "{http.error.status_code} {http.error.status_text}" {http.error.status_code}
-	}
-}
-
-# Improved redirect configuration
-www.noxious.gg {
-	redir https://noxious.gg{uri} permanent
-}
--- a/32
+++ b/32
@ -0,0 +1,32 @@
+# Build stage
+FROM node:22.4.1-alpine as builder
+WORKDIR /usr/src/app
+COPY package*.json ./
+RUN npm ci
+COPY . .
+
+# Set environment variables
+ARG VITE_NAME=${VITE_NAME}
+ENV VITE_NAME=${VITE_NAME}
+
+ARG VITE_DEVELOPMENT=${VITE_DEVELOPMENT}
+ENV VITE_DEVELOPMENT=${VITE_DEVELOPMENT}
+
+ARG VITE_SERVER_ENDPOINT=${VITE_SERVER_ENDPOINT}
+ENV VITE_SERVER_ENDPOINT=${VITE_SERVER_ENDPOINT}
+
+ARG VITE_TILE_SIZE_X=${VITE_TILE_SIZE_X}
+ENV VITE_TILE_SIZE_X=${VITE_TILE_SIZE_X}
+
+ARG VITE_TILE_SIZE_Y=${VITE_TILE_SIZE_Y}
+ENV VITE_TILE_SIZE_Y=${VITE_TILE_SIZE_Y}
+
+# Build the application
+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/4
+++ b/4
@ -0,0 +1,4 @@
+{
+	"schemaVersion": 2,
+	"dockerfilePath" :"./Dockerfile"
+}
--- a/index.html
+++ b/index.html
@ -4,7 +4,7 @@
    <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=no">
-    <title>Noxious - Play</title>
+    <title>Sylvan Quest - Play</title>
  </head>
  <body>
    <div id="app"></div>
--- 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
@ -11,36 +11,39 @@
    "test:unit": "vitest",
    "build-only": "vite build",
    "type-check": "vue-tsc --build --force",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
    "format": "prettier --write src/"
  },
  "dependencies": {
    "@vueuse/core": "^10.5.0",
    "@vueuse/integrations": "^10.5.0",
-    "axios": "^1.7.9",
-    "dexie": "^4.0.11",
-    "phaser": "^3.88.2",
-    "phaser3-rex-plugins": "^1.80.13",
-    "phavuer": "^0.16.5",
-    "pinia": "^2.3.1",
-    "sharp": "^0.33.5",
-    "socket.io-client": "^4.8.1",
+    "axios": "^1.7.7",
+    "dexie": "^4.0.8",
+    "phaser": "^3.86.0",
+    "pinia": "^2.1.6",
+    "socket.io-client": "^4.8.0",
    "universal-cookie": "^6.1.3",
-    "vite-plugin-image-optimizer": "^1.1.8",
-    "vue": "^3.5.13",
-    "zod": "^3.24.2"
+    "vue": "^3.5.12",
+    "zod": "^3.22.2"
  },
  "devDependencies": {
-    "@ianvs/prettier-plugin-sort-imports": "^4.4.0",
-    "@tauri-apps/cli": "^2.2.7",
+    "@rushstack/eslint-patch": "^1.10.3",
    "@tsconfig/node20": "^20.1.4",
    "@types/jsdom": "^21.1.7",
    "@types/node": "^20.14.11",
    "@vitejs/plugin-vue": "^5.0.5",
+    "@vue/eslint-config-prettier": "^9.0.0",
+    "@vue/eslint-config-typescript": "^13.0.0",
    "@vue/test-utils": "^2.4.6",
    "@vue/tsconfig": "^0.5.1",
    "autoprefixer": "^10.4.19",
+    "easystarjs": "^0.4.4",
+    "eslint": "^8.57.0",
+    "eslint-plugin-vue": "^9.27.0",
    "jsdom": "^24.1.1",
    "npm-run-all2": "^6.2.3",
+    "phaser3-rex-plugins": "^1.80.8",
+    "phavuer": "^0.16.1",
    "postcss": "^8.4.47",
    "prettier": "^3.3.3",
    "sass": "^1.79.4",
@ -48,6 +51,7 @@
    "typescript": "~5.6.2",
    "vite": "^5.4.9",
    "vite-plugin-compression": "^0.5.1",
+    "vite-plugin-vue-devtools": "^7.5.2",
    "vitest": "^2.0.3",
    "vue-tsc": "^1.6.5"
  }
--- a/public/assets/avatar/default/0.png
+++ b/public/assets/avatar/default/0.png
--- a/public/assets/avatar/default/head.png
+++ b/public/assets/avatar/default/head.png
--- a/public/assets/avatar/default/walk.png
+++ b/public/assets/avatar/default/walk.png
--- a/public/assets/fog.webp
+++ b/public/assets/fog.webp
--- a/public/assets/galaxy.png
+++ b/public/assets/galaxy.png
--- a/public/assets/icons/mapEditor/dropdown-chevron.svg
+++ b/public/assets/icons/mapEditor/dropdown-chevron.svg
@ -1,4 +0,0 @@
-<?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="M17 9.5L12 14.5L7 9.5" stroke="#fff" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
--- a/public/assets/icons/mapEditor/search.svg
+++ b/public/assets/icons/mapEditor/search.svg
@ -1,3 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M16.3333 17.5L11.0833 12.25C10.6667 12.5833 10.1875 12.8472 9.64583 13.0417C9.10417 13.2361 8.52778 13.3333 7.91667 13.3333C6.40278 13.3333 5.12153 12.809 4.07292 11.7604C3.02431 10.7118 2.5 9.43056 2.5 7.91667C2.5 6.40278 3.02431 5.12153 4.07292 4.07292C5.12153 3.02431 6.40278 2.5 7.91667 2.5C9.43056 2.5 10.7118 3.02431 11.7604 4.07292C12.809 5.12153 13.3333 6.40278 13.3333 7.91667C13.3333 8.52778 13.2361 9.10417 13.0417 9.64583C12.8472 10.1875 12.5833 10.6667 12.25 11.0833L17.5 16.3333L16.3333 17.5ZM7.91667 11.6667C8.95833 11.6667 9.84375 11.3021 10.5729 10.5729C11.3021 9.84375 11.6667 8.95833 11.6667 7.91667C11.6667 6.875 11.3021 5.98958 10.5729 5.26042C9.84375 4.53125 8.95833 4.16667 7.91667 4.16667C6.875 4.16667 5.98958 4.53125 5.26042 5.26042C4.53125 5.98958 4.16667 6.875 4.16667 7.91667C4.16667 8.95833 4.53125 9.84375 5.26042 10.5729C5.98958 11.3021 6.875 11.6667 7.91667 11.6667Z" fill="#808080"/>
-</svg>
--- a/public/assets/icons/mapEditor/settings.svg
+++ b/public/assets/icons/mapEditor/settings.svg
@ -1,59 +0,0 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<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"
-	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
-<g>
-	<g>
-		<path d="M490.667,405.333h-56.811C424.619,374.592,396.373,352,362.667,352s-61.931,22.592-71.189,53.333H21.333
-			C9.557,405.333,0,414.891,0,426.667S9.557,448,21.333,448h270.144c9.237,30.741,37.483,53.333,71.189,53.333
-			s61.931-22.592,71.189-53.333h56.811c11.797,0,21.333-9.557,21.333-21.333S502.464,405.333,490.667,405.333z M362.667,458.667
-			c-17.643,0-32-14.357-32-32s14.357-32,32-32s32,14.357,32,32S380.309,458.667,362.667,458.667z"/>
-	</g>
-</g>
-<g>
-	<g>
-		<path d="M490.667,64h-56.811c-9.259-30.741-37.483-53.333-71.189-53.333S300.736,33.259,291.477,64H21.333
-			C9.557,64,0,73.557,0,85.333s9.557,21.333,21.333,21.333h270.144C300.736,137.408,328.96,160,362.667,160
-			s61.931-22.592,71.189-53.333h56.811c11.797,0,21.333-9.557,21.333-21.333S502.464,64,490.667,64z M362.667,117.333
-			c-17.643,0-32-14.357-32-32c0-17.643,14.357-32,32-32s32,14.357,32,32C394.667,102.976,380.309,117.333,362.667,117.333z"/>
-	</g>
-</g>
-<g>
-	<g>
-		<path d="M490.667,234.667H220.523c-9.259-30.741-37.483-53.333-71.189-53.333s-61.931,22.592-71.189,53.333H21.333
-			C9.557,234.667,0,244.224,0,256c0,11.776,9.557,21.333,21.333,21.333h56.811c9.259,30.741,37.483,53.333,71.189,53.333
-			s61.931-22.592,71.189-53.333h270.144c11.797,0,21.333-9.557,21.333-21.333C512,244.224,502.464,234.667,490.667,234.667z
-			 M149.333,288c-17.643,0-32-14.357-32-32s14.357-32,32-32c17.643,0,32,14.357,32,32S166.976,288,149.333,288z"/>
-	</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/zoneEditor/cart.svg
+++ b/public/assets/icons/zoneEditor/cart.svg
--- a/public/assets/icons/zoneEditor/chevron.svg
+++ b/public/assets/icons/zoneEditor/chevron.svg
--- a/public/assets/icons/zoneEditor/eraser.svg
+++ b/public/assets/icons/zoneEditor/eraser.svg
--- a/public/assets/icons/zoneEditor/gear.svg
+++ b/public/assets/icons/zoneEditor/gear.svg
--- a/public/assets/icons/zoneEditor/move.svg
+++ b/public/assets/icons/zoneEditor/move.svg
--- a/public/assets/icons/zoneEditor/paint.svg
+++ b/public/assets/icons/zoneEditor/paint.svg
--- a/public/assets/icons/zoneEditor/pencil.svg
+++ b/public/assets/icons/zoneEditor/pencil.svg
--- a/public/assets/icons/zoneEditor/tiles.svg
+++ b/public/assets/icons/zoneEditor/tiles.svg
--- a/public/assets/login/login-bg.png
+++ b/public/assets/login/login-bg.png
--- a/public/assets/music/click-btn.mp3
+++ b/public/assets/music/click-btn.mp3
--- a/public/assets/music/intro.mp3
+++ b/public/assets/music/intro.mp3
--- a/public/assets/raindrop.webp
+++ b/public/assets/raindrop.webp
--- a/public/assets/sounds/attack.wav
+++ b/public/assets/sounds/attack.wav
--- a/public/assets/sounds/button-click.wav
+++ b/public/assets/sounds/button-click.wav
--- a/public/assets/sounds/connect.wav
+++ b/public/assets/sounds/connect.wav
--- a/public/assets/sounds/walk.wav
+++ b/public/assets/sounds/walk.wav
--- a/public/assets/tlogo.png
+++ b/public/assets/tlogo.png
--- a/public/assets/ui-elements/login-ui-box-inner.svg
+++ b/public/assets/ui-elements/login-ui-box-inner.svg
--- a/public/assets/ui-elements/login-ui-box-outer.svg
+++ b/public/assets/ui-elements/login-ui-box-outer.svg
--- a/public/assets/ui-elements/profile-ui-box-outer.svg
+++ b/public/assets/ui-elements/profile-ui-box-outer.svg
--- a/public/assets/zone/blank_tile.png
+++ b/public/assets/zone/blank_tile.png
--- a/public/assets/zone/bt_tile.png
+++ b/public/assets/zone/bt_tile.png
--- a/public/assets/zone/tile_2.png
+++ b/public/assets/zone/tile_2.png
--- a/public/assets/zone/tiles.png
+++ b/public/assets/zone/tiles.png
--- a/public/assets/zone/tp_tile.png
+++ b/public/assets/zone/tp_tile.png
--- a/public/assets/zone/wall1.png
+++ b/public/assets/zone/wall1.png
--- a/public/assets/zone/wall2.png
+++ b/public/assets/zone/wall2.png
--- a/public/assets/zone/walls.png
+++ b/public/assets/zone/walls.png
--- a/src-tauri/.gitignore
+++ b/src-tauri/.gitignore
@ -1,4 +0,0 @@
-# Generated by Cargo
-# will have compiled files and executables
-/target/
-/gen/schemas
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@ -1,25 +0,0 @@
-[package]
-name = "app"
-version = "0.1.0"
-description = "A Tauri App"
-authors = ["you"]
-license = ""
-repository = ""
-edition = "2021"
-rust-version = "1.77.2"
-
-# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
-
-[lib]
-name = "app_lib"
-crate-type = ["staticlib", "cdylib", "rlib"]
-
-[build-dependencies]
-tauri-build = { version = "2.0.4", features = [] }
-
-[dependencies]
-serde_json = "1.0"
-serde = { version = "1.0", features = ["derive"] }
-log = "0.4"
-tauri = { version = "2.2.4", features = [] }
-tauri-plugin-log = "2.0.0-rc"
--- a/src-tauri/build.rs
+++ b/src-tauri/build.rs
@ -1,3 +0,0 @@
-fn main() {
-  tauri_build::build()
-}
--- a/src-tauri/capabilities/default.json
+++ b/src-tauri/capabilities/default.json
@ -1,11 +0,0 @@
-{
-  "$schema": "../gen/schemas/desktop-schema.json",
-  "identifier": "default",
-  "description": "enables the default permissions",
-  "windows": [
-    "main"
-  ],
-  "permissions": [
-    "core:default"
-  ]
-}
--- a/src-tauri/icons/128x128.png
+++ b/src-tauri/icons/128x128.png
--- a/src-tauri/icons/128x128@2x.png
+++ b/src-tauri/icons/128x128@2x.png
--- a/src-tauri/icons/32x32.png
+++ b/src-tauri/icons/32x32.png
--- a/src-tauri/icons/Square107x107Logo.png
+++ b/src-tauri/icons/Square107x107Logo.png
--- a/src-tauri/icons/Square142x142Logo.png
+++ b/src-tauri/icons/Square142x142Logo.png
--- a/src-tauri/icons/Square150x150Logo.png
+++ b/src-tauri/icons/Square150x150Logo.png
--- a/src-tauri/icons/Square284x284Logo.png
+++ b/src-tauri/icons/Square284x284Logo.png
--- a/src-tauri/icons/Square30x30Logo.png
+++ b/src-tauri/icons/Square30x30Logo.png
--- a/src-tauri/icons/Square310x310Logo.png
+++ b/src-tauri/icons/Square310x310Logo.png
--- a/src-tauri/icons/Square44x44Logo.png
+++ b/src-tauri/icons/Square44x44Logo.png
--- a/src-tauri/icons/Square71x71Logo.png
+++ b/src-tauri/icons/Square71x71Logo.png
--- a/src-tauri/icons/Square89x89Logo.png
+++ b/src-tauri/icons/Square89x89Logo.png
--- a/src-tauri/icons/StoreLogo.png
+++ b/src-tauri/icons/StoreLogo.png
--- a/src-tauri/icons/icon.icns
+++ b/src-tauri/icons/icon.icns
--- a/src-tauri/icons/icon.ico
+++ b/src-tauri/icons/icon.ico
--- a/src-tauri/icons/icon.png
+++ b/src-tauri/icons/icon.png
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@ -1,16 +0,0 @@
-#[cfg_attr(mobile, tauri::mobile_entry_point)]
-pub fn run() {
-  tauri::Builder::default()
-    .setup(|app| {
-      if cfg!(debug_assertions) {
-        app.handle().plugin(
-          tauri_plugin_log::Builder::default()
-            .level(log::LevelFilter::Info)
-            .build(),
-        )?;
-      }
-      Ok(())
-    })
-    .run(tauri::generate_context!())
-    .expect("error while running tauri application");
-}
--- a/src-tauri/src/main.rs
+++ b/src-tauri/src/main.rs
@ -1,6 +0,0 @@
-// Prevents additional console window on Windows in release, DO NOT REMOVE!!
-#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
-
-fn main() {
-  app_lib::run();
-}
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@ -1,37 +0,0 @@
-{
-  "$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
-  "productName": "noxious",
-  "version": "0.1.0",
-  "identifier": "com.noxious.app",
-  "build": {
-    "frontendDist": "../dist",
-    "devUrl": "http://localhost:5173",
-    "beforeDevCommand": "npm run dev",
-    "beforeBuildCommand": "npm run build-only"
-  },
-  "app": {
-    "windows": [
-      {
-        "title": "Noxious",
-        "width": 800,
-        "height": 600,
-        "resizable": true,
-        "fullscreen": false
-      }
-    ],
-    "security": {
-      "csp": null
-    }
-  },
-  "bundle": {
-    "active": true,
-    "targets": "all",
-    "icon": [
-      "icons/32x32.png",
-      "icons/128x128.png",
-      "icons/128x128@2x.png",
-      "icons/icon.icns",
-      "icons/icon.ico"
-    ]
-  }
-}
--- a/src/App.vue
+++ b/src/App.vue
@ -1,55 +1,48 @@
 <template>
-  <Debug />
  <Notifications />
+  <BackgroundImageLoader />
  <GmPanel v-if="gameStore.character?.role === 'gm'" />
  <component :is="currentScreen" />
 </template>

 <script setup lang="ts">
+import { useGameStore } from '@/stores/gameStore'
+import { useZoneEditorStore } from '@/stores/zoneEditorStore'
+import Notifications from '@/components/utilities/Notifications.vue'
+import BackgroundImageLoader from '@/components/utilities/BackgroundImageLoader.vue'
 import GmPanel from '@/components/gameMaster/GmPanel.vue'
+import Login from '@/components/screens/Login.vue'
 import Characters from '@/components/screens/Characters.vue'
 import Game from '@/components/screens/Game.vue'
-import Loading from '@/components/screens/Loading.vue'
-import Login from '@/components/screens/Login.vue'
-import MapEditor from '@/components/screens/MapEditor.vue'
-import Debug from '@/components/utilities/Debug.vue'
-import Notifications from '@/components/utilities/Notifications.vue'
-import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
-import { useSoundComposable } from '@/composables/useSoundComposable'
-import { socketManager } from '@/managers/SocketManager'
-import { useGameStore } from '@/stores/gameStore'
+import ZoneEditor from '@/components/screens/ZoneEditor.vue'
 import { computed, watch } from 'vue'

 const gameStore = useGameStore()
-
-const mapEditor = useMapEditorComposable()
-const { playSound } = useSoundComposable()
+const zoneEditorStore = useZoneEditorStore()

 const currentScreen = computed(() => {
-  if (!gameStore.game.isLoaded) return Loading
-  if (!socketManager.connection) return Login
-  if (!socketManager.token) return Login
+  if (!gameStore.connection) return Login
+  if (!gameStore.token) return Login
  if (!gameStore.character) return Characters
-  if (mapEditor.active.value) return MapEditor
+  if (zoneEditorStore.active) return ZoneEditor
  return Game
 })

-// Watch mapEditor.active and empty gameStore.game.loadedAssets
+// Watch zoneEditorStore.active and empty gameStore.game.loadedAssets
 watch(
-  () => mapEditor.active.value,
+  () => zoneEditorStore.active,
  () => {
-    gameStore.game.loadedTextures = []
+    gameStore.game.loadedAssets = []
  }
 )

 // #209: Play sound when a button is pressed
 addEventListener('click', (event) => {
-  const classList = ['btn-cyan', 'btn-red', 'btn-indigo', 'btn-empty', 'btn-sound']
-  const target = event.target as HTMLElement
-  // console.log(target) // Uncomment to log the clicked element
-  if (classList.some((className) => target.classList.contains(className))) {
-    playSound('/assets/sounds/button-click.wav')
+  if (!(event.target instanceof HTMLButtonElement)) {
+    return
  }
+  const audio = new Audio('/assets/music/click-btn.mp3')
+  audio.play()
 })

 // Watch for "G" key press and toggle the gm panel
@ -57,9 +50,7 @@ addEventListener('keydown', (event) => {
  if (gameStore.character?.role !== 'gm') return // Only allow toggling the gm panel if the character is a gm

  // Check if no input is active or focus is on an input
-  if (event.repeat || event.isComposing || event.defaultPrevented || document.activeElement?.tagName.toUpperCase() === 'INPUT' || document.activeElement?.tagName.toUpperCase() === 'TEXTAREA') {
-    return
-  }
+  if (event.repeat || event.isComposing || event.defaultPrevented || document.activeElement?.tagName.toUpperCase() === 'INPUT' || document.activeElement?.tagName.toUpperCase() === 'TEXTAREA') return

  if (event.key === 'G') {
    gameStore.toggleGmPanel()
--- a/src/application/config.ts
+++ b/src/application/config.ts
@ -1,10 +0,0 @@
-export default {
-  name: import.meta.env.VITE_NAME,
-  domain: import.meta.env.VITE_DOMAIN,
-  environment: import.meta.env.VITE_ENVIRONMENT,
-  server_endpoint: import.meta.env.VITE_SERVER_ENDPOINT,
-  tile_size: {
-    width: Number(import.meta.env.VITE_TILE_SIZE_WIDTH),
-    height: Number(import.meta.env.VITE_TILE_SIZE_HEIGHT)
-  }
-}
--- a/src/application/enums.ts
+++ b/src/application/enums.ts
@ -1,63 +0,0 @@
-export enum Direction {
-  POSITIVE,
-  NEGATIVE,
-  UNCHANGED
-}
-
-export enum SocketEvent {
-  CONNECT_ERROR = 'connect_error',
-  RECONNECT_FAILED = 'reconnect_failed',
-  CLOSE = '52',
-  DATA = '51',
-  CHARACTER_CONNECT = '50',
-  CHARACTER_CREATE = '49',
-  CHARACTER_DELETE = '48',
-  CHARACTER_LIST = '47',
-  GM_CHARACTERHAIR_CREATE = '46',
-  GM_CHARACTERHAIR_REMOVE = '45',
-  GM_CHARACTERHAIR_LIST = '44',
-  GM_CHARACTERHAIR_UPDATE = '43',
-  GM_CHARACTERTYPE_CREATE = '42',
-  GM_CHARACTERTYPE_REMOVE = '41',
-  GM_CHARACTERTYPE_LIST = '40',
-  GM_CHARACTERTYPE_UPDATE = '39',
-  GM_ITEM_CREATE = '38',
-  GM_ITEM_REMOVE = '37',
-  GM_ITEM_LIST = '36',
-  GM_ITEM_UPDATE = '35',
-  GM_MAPOBJECT_LIST = '34',
-  GM_MAPOBJECT_REMOVE = '33',
-  GM_MAPOBJECT_UPDATE = '32',
-  GM_MAPOBJECT_UPLOAD = '31',
-  GM_SPRITE_COPY = '30',
-  GM_SPRITE_CREATE = '29',
-  GM_SPRITE_DELETE = '28',
-  GM_SPRITE_LIST = '27',
-  GM_SPRITE_UPDATE = '26',
-  GM_TILE_DELETE = '25',
-  GM_TILE_LIST = '24',
-  GM_TILE_UPDATE = '23',
-  GM_TILE_UPLOAD = '22',
-  GM_MAP_CREATE = '21',
-  GM_MAP_DELETE = '20',
-  GM_MAP_REQUEST = '19',
-  GM_MAP_UPDATE = '18',
-  MAP_CHARACTER_MOVEERROR = '17',
-  DISCONNECT = 'disconnect',
-  USER_DISCONNECT = '15',
-  LOGIN = '14',
-  LOGGED_IN = '13',
-  NOTIFICATION = '12',
-  DATE = '11',
-  FAILED = '10',
-  COMPLETED = '9',
-  CONNECTION = 'connection',
-  WEATHER = '7',
-  CHARACTER_DISCONNECT = '6',
-  MAP_CHARACTER_ATTACK = '5',
-  MAP_CHARACTER_TELEPORT = '4',
-  MAP_CHARACTER_JOIN = '3',
-  MAP_CHARACTER_LEAVE = '2',
-  MAP_CHARACTER_MOVE = '1',
-  CHAT_MESSAGE = '0'
-}
--- a/src/application/utilities.ts
+++ b/src/application/utilities.ts
@ -1,45 +0,0 @@
-import config from '@/application/config'
-import type { HttpResponse } from '@/application/types'
-import type { BaseStorage } from '@/storage/baseStorage'
-
-export function uuidv4() {
-  return '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, (c) => (+c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (+c / 4)))).toString(16))
-}
-
-export function unduplicateArray(array: any[]) {
-  const arrayToProcess = typeof array.flat === 'function' ? array.flat() : array
-  return [...new Set(arrayToProcess)]
-}
-
-export async function downloadCache<T extends { id: string; updatedAt: Date }>(endpoint: string, storage: BaseStorage<T>) {
-  const request = await fetch(`${config.server_endpoint}/cache/${endpoint}`)
-  const response = (await request.json()) as HttpResponse<T[]>
-
-  if (!response.success) {
-    console.error(`Failed to download ${endpoint}:`, response.message)
-    return
-  }
-
-  const items = response.data ?? []
-  const serverItemIds = new Set(items.map((item) => item.id))
-
-  // Remove items that don't exist on server
-  const existingItems = await storage.getAll()
-  for (const existingItem of existingItems) {
-    if (!serverItemIds.has(existingItem.id)) {
-      await storage.delete(existingItem.id)
-    }
-  }
-
-  // Update or add new items
-  for (const item of items) {
-    let overwrite = false
-    const existingItem = await storage.getById(item.id)
-
-    if (!existingItem || item.updatedAt > existingItem.updatedAt) {
-      overwrite = true
-    }
-
-    await storage.add(item, overwrite)
-  }
-}
--- a/src/assets/fonts/Gentium_plus.ttf
+++ b/src/assets/fonts/Gentium_plus.ttf
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@ -23,14 +23,6 @@ body {

  // Disable pinch zoom
  touch-action: pan-x pan-y;
-
-  // Add custom focus outline
-  *:focus-visible {
-    @apply outline-gray-300;
-    @apply outline;
-    @apply outline-offset-2;
-    @apply rounded-sm;
-  }
 }

 h1,
@ -53,7 +45,7 @@ label {

 button,
 a {
-  @apply font-medium;
+  @apply font-medium drop-shadow-20;
 }

 button,
@ -66,20 +58,13 @@ input {
    appearance: textfield;
  }
  &[type='number']::-webkit-inner-spin-button,
-  &[type='number']::-webkit-outer-spin-button,
-  &[type='radio'] {
+  &[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none;
  }
 }

 .input-field {
-  @apply px-4 py-2.5 text-base leading-5 bg-gray border border-solid border-gray-500 rounded text-gray-300 font-default;
-  &:focus-visible {
-    @apply outline-none border-cyan rounded bg-gray-900;
-  }
-  &::placeholder {
-    @apply focus-visible:text-gray-300/50;
-  }
+  @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 {
@ -88,12 +73,6 @@ input {
  }
 }

-select {
-  &.input-field {
-    @apply appearance-none bg-[url('/assets/icons/mapEditor/dropdown-chevron.svg')] bg-no-repeat bg-[calc(100%_-_10px)_center] bg-[length:20px] text-white;
-  }
-}
-
 .form-field-full {
  @apply w-full flex flex-col mb-5;
  label {
@ -120,20 +99,11 @@ button {
  }

  &.btn-red {
-    @apply bg-red-300 text-gray-50 text-base leading-5 rounded py-2.5;
+    @apply bg-red text-gray-50 text-base leading-5 rounded py-2.5;

    &.active,
    &:hover {
-      @apply bg-red-500;
-    }
-  }
-
-  &.btn-indigo {
-    @apply bg-indigo-500 text-gray-50 text-base leading-5 rounded py-2.5;
-
-    &.active,
-    &:hover {
-      @apply bg-indigo-600;
+      @apply bg-red-300;
    }
  }

@ -143,7 +113,7 @@ button {
    &.active,
    &.selected,
    &:hover {
-      @apply bg-gray border-gray;
+      @apply bg-gray-700 border-gray-700;
    }
  }

@ -160,28 +130,12 @@ button {
  }
 }

-.character.active {
-  @apply bg-gray bg-none;
-}
-
-.list-open {
-  @apply w-[calc(75%_-_40px)] max-xl:w-[calc(100%_-_360px)];
-}
-
-.hair-deselect:has(:checked) {
-  img {
-    @apply brightness-200;
+.character {
+  &.active {
+    @apply pr-px border-r-0;
  }
 }

-.default-border {
-  @apply border border-solid border-gray-500;
-}
-
-.center-element {
-  @apply absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2;
-}
-
 .text-pixel {
  @apply text-white font-ui drop-shadow-pixel-black;
 }
--- a/src/components/Effects.vue
+++ b/src/components/Effects.vue
@ -0,0 +1,218 @@
+<template>
+  <Scene name="effects" @preload="preloadScene" @create="createScene" @update="updateScene" />
+</template>
+
+<script setup lang="ts">
+import { Scene } from 'phavuer'
+import { useZoneStore } from '@/stores/zoneStore'
+import { useGameStore } from '@/stores/gameStore'
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import type { WeatherState } from '@/types'
+
+// Constants
+const SUNRISE_HOUR = 6
+const SUNSET_HOUR = 20
+const DAY_STRENGTH = 100
+const NIGHT_STRENGTH = 30
+
+// Stores
+const gameStore = useGameStore()
+const zoneStore = useZoneStore()
+
+// Scene ref
+const sceneRef = ref<Phaser.Scene | null>(null)
+
+// Effect refs
+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)
+
+// State refs
+const weatherState = ref<WeatherState>({
+  isRainEnabled: false,
+  rainPercentage: 0,
+  isFogEnabled: false,
+  fogDensity: 0
+})
+
+// Scene lifecycle methods
+const preloadScene = async (scene: Phaser.Scene) => {
+  scene.load.image('raindrop', 'assets/raindrop.png')
+  scene.load.image('fog', 'assets/fog.png')
+}
+
+const createScene = async (scene: Phaser.Scene) => {
+  sceneRef.value = scene
+  setupEffects(scene)
+  setupSocketListeners()
+}
+
+const updateScene = () => {
+  updateEffects()
+}
+
+// Effect setup
+const setupEffects = (scene: Phaser.Scene) => {
+  createLightEffect(scene)
+  createRainEffect(scene)
+  createFogEffect(scene)
+}
+
+const createLightEffect = (scene: Phaser.Scene) => {
+  lightEffect.value = scene.add.graphics()
+  lightEffect.value.setDepth(1000)
+}
+
+const createRainEffect = (scene: Phaser.Scene) => {
+  rainEmitter.value = scene.add.particles(0, 0, 'raindrop', {
+    x: { min: 0, max: window.innerWidth },
+    y: -50,
+    quantity: 5,
+    lifespan: 2000,
+    speedY: { min: 300, max: 500 },
+    scale: { start: 0.005, end: 0.005 },
+    alpha: { start: 0.5, end: 0 },
+    blendMode: 'ADD'
+  })
+  rainEmitter.value.setDepth(900)
+  rainEmitter.value.stop()
+}
+
+const createFogEffect = (scene: Phaser.Scene) => {
+  fogSprite.value = scene.add.sprite(window.innerWidth / 2, window.innerHeight / 2, 'fog')
+  fogSprite.value.setScale(2)
+  fogSprite.value.setAlpha(0)
+  fogSprite.value.setDepth(950)
+}
+
+// Lighting calculations
+const calculateLightStrength = (time: Date): number => {
+  const hour = time.getHours()
+  const minute = time.getMinutes()
+
+  let strength = DAY_STRENGTH
+
+  // Night time (10 PM - 6 AM)
+  if (hour >= SUNSET_HOUR || hour < SUNRISE_HOUR) {
+    strength = NIGHT_STRENGTH
+  }
+  // Full daylight (7 AM - 7 PM)
+  else if (hour > SUNRISE_HOUR && hour < SUNSET_HOUR - 2) {
+    strength = DAY_STRENGTH
+  }
+  // Sunrise transition (6 AM - 7 AM)
+  else if (hour === SUNRISE_HOUR) {
+    strength = NIGHT_STRENGTH + ((DAY_STRENGTH - NIGHT_STRENGTH) * minute) / 60
+  }
+  // Sunset transition (8 PM - 10 PM)
+  else if (hour >= SUNSET_HOUR - 2 && hour < SUNSET_HOUR) {
+    const totalMinutes = (hour - (SUNSET_HOUR - 2)) * 60 + minute
+    const transitionProgress = totalMinutes / 120 // 2 hours = 120 minutes
+    strength = DAY_STRENGTH - (DAY_STRENGTH - NIGHT_STRENGTH) * transitionProgress
+  }
+
+  return strength
+}
+
+// Effect updates
+const updateEffects = () => {
+  const effects = zoneStore.zone?.zoneEffects || []
+
+  if (effects.length > 0) {
+    updateZoneEffects(effects)
+  } else {
+    // Make sure we're getting the current time
+    const lightStrength = calculateLightStrength(gameStore.world.date)
+    updateLightEffect(lightStrength)
+    updateWeatherEffects()
+  }
+}
+
+const updateZoneEffects = (effects: any[]) => {
+  // Always update light based on time when zone effects are present
+  updateLightEffect(calculateLightStrength(gameStore.world.date))
+
+  effects.forEach((effect) => {
+    switch (effect.effect) {
+      case 'rain':
+        updateRainEffect(effect.strength)
+        break
+      case 'fog':
+        updateFogEffect(effect.strength)
+        break
+    }
+  })
+}
+
+const updateWeatherEffects = () => {
+  updateRainEffect(weatherState.value.isRainEnabled ? weatherState.value.rainPercentage : 0)
+  updateFogEffect(weatherState.value.isFogEnabled ? weatherState.value.fogDensity * 100 : 0)
+}
+
+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()
+  }
+}
+
+const updateFogEffect = (strength: number) => {
+  if (!fogSprite.value) return
+  fogSprite.value.setAlpha(strength / 100)
+}
+
+// Socket handlers
+const setupSocketListeners = () => {
+  // Initial weather state
+  gameStore.connection?.emit('weather', (response: WeatherState) => {
+    if (zoneStore.zone?.zoneEffects) return
+    weatherState.value = response
+    updateEffects()
+  })
+
+  // Weather updates
+  gameStore.connection?.on('weather', (data: WeatherState) => {
+    weatherState.value = data
+    updateEffects()
+  })
+
+  // Time updates
+  gameStore.connection?.on('date', () => {
+    if (zoneStore.zone?.zoneEffects) return
+    updateEffects()
+  })
+}
+
+const updateEffectWindowSize = () => {
+  if (rainEmitter.value) rainEmitter.value.updateConfig({ x: { min: 0, max: window.innerWidth } })
+  if (fogSprite.value) {
+    fogSprite.value.setX(window.innerWidth / 2)
+    fogSprite.value.setY(window.innerHeight / 2)
+  }
+}
+
+// Watchers
+watch(() => zoneStore.zone?.zoneEffects, updateEffects, { deep: true })
+
+onMounted(() => {
+  window.addEventListener('resize', updateEffectWindowSize)
+})
+
+// Cleanup
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updateEffectWindowSize)
+  if (sceneRef.value) sceneRef.value.scene.remove('effects')
+  gameStore.connection?.off('weather')
+})
+</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" @click="focusInput">
-    <div v-for="(chip, i) in internalValue" :key="i" class="flex gap-2.5 items-center bg-cyan rounded py-1 px-2" role="listitem">
+  <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 text-white">{{ chip }}</span>
-      <button type="button" class="text-xs cursor-pointer text-white font-light font-default not-italic hover:text-gray-50" @click.stop="deleteChip(i)" aria-label="Remove tag">×</button>
+      <button type="button" class="text-xs cursor-pointer text-white font-light font-default not-italic hover:text-gray-50" @click="deleteChip(i)" aria-label="Remove chip">×</button>
    </div>
-    <input ref="inputRef" class="outline-none border-none p-1 text-gray-300 min-w-[60px] flex-grow" :placeholder="placeholder" v-model.trim="currentInput" @keydown="handleKeydown" @paste="handlePaste" :maxlength="maxChipLength" aria-label="Add new tag" />
+    <input class="outline-none border-none p-1 text-gray-300" placeholder="Tag name" v-model="currentInput" @keypress.enter.prevent="addChip" @keydown.backspace="handleBackspace" />
  </div>
 </template>

@ -14,29 +14,20 @@ import type { Ref } from 'vue'

 interface Props {
  modelValue?: string[]
-  maxChips?: number
-  maxChipLength?: number
-  placeholder?: string
-  allowDuplicates?: boolean
 }

 const props = withDefaults(defineProps<Props>(), {
-  modelValue: () => [],
-  maxChips: 10,
-  maxChipLength: 20,
-  placeholder: 'Add tag',
-  allowDuplicates: false
+  modelValue: () => []
 })

 const emit = defineEmits<{
  (e: 'update:modelValue', value: string[]): void
-  (e: 'error', message: string): void
 }>()

 const currentInput: Ref<string> = ref('')
 const internalValue = ref<string[]>([])
-const inputRef = ref<HTMLInputElement | null>(null)

+// Initialize internalValue with props.modelValue
 watch(
  () => props.modelValue,
  (newValue) => {
@ -45,27 +36,9 @@ watch(
  { immediate: true }
 )

-const validateChip = (chip: string): boolean => {
-  if (!chip) {
-    return false
-  }
-
-  if (!props.allowDuplicates && internalValue.value.includes(chip)) {
-    emit('error', 'Duplicate tags are not allowed')
-    return false
-  }
-
-  if (internalValue.value.length >= props.maxChips) {
-    emit('error', `Maximum ${props.maxChips} tags allowed`)
-    return false
-  }
-
-  return true
-}
-
 const addChip = () => {
  const trimmedInput = currentInput.value.trim()
-  if (validateChip(trimmedInput)) {
+  if (trimmedInput && !internalValue.value.includes(trimmedInput)) {
    internalValue.value.push(trimmedInput)
    emit('update:modelValue', internalValue.value)
    currentInput.value = ''
@ -77,36 +50,10 @@ const deleteChip = (index: number) => {
  emit('update:modelValue', internalValue.value)
 }

-const handleKeydown = (event: KeyboardEvent) => {
-  switch (event.key) {
-    case 'Enter':
-      event.preventDefault()
-      addChip()
-      break
-    case 'Backspace':
-      if (currentInput.value === '' && internalValue.value.length > 0) {
-        deleteChip(internalValue.value.length - 1)
-      }
-      break
+const handleBackspace = (event: KeyboardEvent) => {
+  if (event.key === 'Backspace' && currentInput.value === '' && internalValue.value.length > 0) {
+    internalValue.value.pop()
+    emit('update:modelValue', internalValue.value)
  }
 }
-
-const handlePaste = (event: ClipboardEvent) => {
-  event.preventDefault()
-  const pastedText = event.clipboardData?.getData('text')
-  if (pastedText) {
-    const chips = pastedText
-      .split(/[,\n]/)
-      .map((chip) => chip.trim())
-      .filter(Boolean)
-    chips.forEach((chip) => {
-      currentInput.value = chip
-      addChip()
-    })
-  }
-}
-
-const focusInput = () => {
-  inputRef.value?.focus()
-}
 </script>
--- a/src/components/game/character/Character.vue
+++ b/src/components/game/character/Character.vue
@ -1,103 +0,0 @@
-<template>
-  <Container ref="characterContainer" :x="currentPositionX" :y="currentPositionY" :depth="isometricDepth">
-    <ChatBubble :mapCharacter="props.mapCharacter" />
-    <HealthBar :mapCharacter="props.mapCharacter" />
-    <CharacterHair :mapCharacter="props.mapCharacter" :flipX="isFlippedX" />
-    <Sprite ref="characterSprite" :flipX="isFlippedX" />
-  </Container>
-</template>
-
-<script lang="ts" setup>
-import { type MapCharacter } from '@/application/types'
-import CharacterHair from '@/components/game/character/partials/CharacterHair.vue'
-import ChatBubble from '@/components/game/character/partials/ChatBubble.vue'
-import HealthBar from '@/components/game/character/partials/HealthBar.vue'
-import { useCharacterSpriteComposable } from '@/composables/useCharacterSpriteComposable'
-import { useSoundComposable } from '@/composables/useSoundComposable'
-import { useGameStore } from '@/stores/gameStore'
-import { useMapStore } from '@/stores/mapStore'
-import { Container, Sprite, useScene } from 'phavuer'
-import { onMounted, onUnmounted, watch } from 'vue'
-
-const props = defineProps<{
-  tileMap: Phaser.Tilemaps.Tilemap
-  mapCharacter: MapCharacter
-}>()
-
-const gameStore = useGameStore()
-const mapStore = useMapStore()
-const scene = useScene()
-
-const { characterContainer, characterSprite, currentPositionX, currentPositionY, isometricDepth, isFlippedX, updatePosition, playAnimation, updateSprite, initializeSprite, cleanup } = useCharacterSpriteComposable(scene, props.tileMap, props.mapCharacter)
-const { playSound, stopSound } = useSoundComposable()
-
-const handlePositionUpdate = (newValues: any, oldValues: any) => {
-  if (!newValues) return
-
-  if (!oldValues || newValues.positionX !== oldValues.positionX || newValues.positionY !== oldValues.positionY) {
-    updatePosition(newValues.positionX, newValues.positionY)
-  }
-
-  if (newValues.isMoving !== oldValues?.isMoving || newValues.rotation !== oldValues?.rotation) {
-    updateSprite()
-  }
-}
-
-/**
- * Plays walk sound when character is moving
- */
-watch(
-  () => props.mapCharacter.isMoving,
-  (newValue) => {
-    if (newValue) {
-      playSound('/assets/sounds/walk.wav', false, true)
-    } else {
-      stopSound('/assets/sounds/walk.wav')
-    }
-  }
-)
-
-/**
- * Plays attack animation and sound when character is attacking
- */
-watch(
-  () => props.mapCharacter.isAttacking,
-  (newValue) => {
-    if (newValue) {
-      playAnimation('attack')
-      playSound('/assets/sounds/attack.wav', false, true)
-    } else {
-      stopSound('/assets/sounds/attack.wav')
-    }
-    mapStore.updateCharacterProperty(props.mapCharacter.character.id, 'isAttacking', false)
-  }
-)
-
-/**
- * Handles position updates and movement delay
- */
-watch(
-  () => ({
-    positionX: props.mapCharacter.character.positionX,
-    positionY: props.mapCharacter.character.positionY,
-    isMoving: props.mapCharacter.isMoving,
-    rotation: props.mapCharacter.character.rotation,
-    isAttacking: props.mapCharacter.isAttacking
-  }),
-  async (oldValues, newValues) => {
-    handlePositionUpdate(oldValues, newValues)
-  }
-)
-
-onMounted(async () => {
-  await initializeSprite()
-
-  if (props.mapCharacter.character.id === gameStore.character!.id) {
-    scene.cameras.main.startFollow(characterContainer.value as Phaser.GameObjects.Container)
-  }
-})
-
-onUnmounted(() => {
-  cleanup()
-})
-</script>
--- a/src/components/game/character/partials/CharacterHair.vue
+++ b/src/components/game/character/partials/CharacterHair.vue
@ -1,63 +0,0 @@
-<template>
-  <Image ref="image" v-if="hairSpriteId" />
-</template>
-
-<script lang="ts" setup>
-import type { MapCharacter, Sprite as SpriteT } from '@/application/types'
-import { loadSpriteTextures } from '@/services/textureService'
-import { CharacterHairStorage, CharacterTypeStorage, SpriteStorage } from '@/storage/storages'
-import { Image, refObj, useScene } from 'phavuer'
-import { computed, onMounted, ref, watch } from 'vue'
-
-const props = defineProps<{
-  mapCharacter: MapCharacter
-}>()
-
-const scene = useScene()
-const hairSpriteId = ref('')
-const hairSprite = ref<SpriteT | null>(null)
-const characterSpriteHeight = ref(0)
-const image = refObj<Phaser.GameObjects.Image>()
-
-const flipX = computed(() => [6, 0].includes(props.mapCharacter.character.rotation ?? 0))
-const texture = computed(() => {
-  const direction = flipX.value ? 'back' : 'front'
-
-  return `${hairSpriteId.value}-${direction}`
-})
-
-watch(
-  () => props.mapCharacter.character,
-  (newValue) => {
-    if (!image.value) return
-    image.value.setTexture(texture.value)
-  },
-  { deep: true }
-)
-
-onMounted(async () => {
-  if (!props.mapCharacter.character.characterType || !props.mapCharacter.character.characterHair) return
-
-  const characterTypeStorage = new CharacterTypeStorage()
-  const characterHairStorage = new CharacterHairStorage()
-  const spriteStorage = new SpriteStorage()
-
-  const characterType = await characterTypeStorage.getById(props.mapCharacter.character.characterType!)
-  if (!characterType) return
-  characterSpriteHeight.value = 100
-
-  hairSpriteId.value = await characterHairStorage.getSpriteId(props.mapCharacter.character.characterHair)
-  if (!hairSpriteId.value) return
-
-  hairSprite.value = await spriteStorage.getById(hairSpriteId.value)
-  if (!hairSprite.value) return
-
-  await loadSpriteTextures(scene, hairSpriteId.value)
-
-  if (!image.value) return
-
-  image.value.setOrigin(0.5, 2.15)
-  image.value.setTexture(texture.value)
-  image.value.setSize(30, 40)
-})
-</script>
--- a/src/components/game/character/partials/ChatBubble.vue
+++ b/src/components/game/character/partials/ChatBubble.vue
@ -1,45 +0,0 @@
-<template>
-  <Container ref="characterChatContainer">
-    <RoundRectangle @create="createChatBubble" :origin-x="0.5" :origin-y="7.5" :fillColor="0xffffff" :width="194" :height="21" :radius="20" />
-    <Text @create="createChatText" :style="{ fontSize: 13, fontFamily: 'Arial', color: '#000' }" />
-  </Container>
-</template>
-
-<script setup lang="ts">
-import type { MapCharacter } from '@/application/types'
-import { Container, refObj, RoundRectangle, Text, useGame } from 'phavuer'
-import { onMounted } from 'vue'
-
-const props = defineProps<{
-  mapCharacter: MapCharacter
-}>()
-
-const game = useGame()
-const characterChatContainer = refObj<Phaser.GameObjects.Container>()
-
-const createChatBubble = (container: Phaser.GameObjects.Container) => {
-  container.setName(`${props.mapCharacter.character.name}_chatBubble`)
-}
-
-const createChatText = (text: Phaser.GameObjects.Text) => {
-  text.setName(`${props.mapCharacter.character.name}_chatText`)
-  text.setFontSize(13)
-  text.setFontFamily('Arial')
-  text.setOrigin(0.5, 10.9)
-  text.setResolution(2)
-
-  // Fix text alignment on Windows and Android
-  if (game.device.os.windows || game.device.os.android) {
-    text.setOrigin(0.5, 9.75)
-
-    if (game.device.browser.firefox) {
-      text.setOrigin(0.5, 10.9)
-    }
-  }
-}
-
-onMounted(() => {
-  characterChatContainer.value!.setName(`${props.mapCharacter.character!.name}_chatContainer`)
-  characterChatContainer.value!.setVisible(false)
-})
-</script>
--- a/src/components/game/character/partials/HealthBar.vue
+++ b/src/components/game/character/partials/HealthBar.vue
@ -1,34 +0,0 @@
-<template>
-  <Container :depth="999">
-    <Text @create="createNicknameText" :text="props.mapCharacter.character.name" />
-    <RoundRectangle :origin-x="0.5" :origin-y="18.5" :fillColor="0xffffff" :width="74" :height="6" :radius="5" />
-    <RoundRectangle :origin-x="0.5" :origin-y="36.4" :fillColor="0x00b3b3" :width="70" :height="3" :radius="5" />
-  </Container>
-</template>
-
-<script setup lang="ts">
-import type { MapCharacter } from '@/application/types'
-import { Container, RoundRectangle, Text, useGame } from 'phavuer'
-
-const props = defineProps<{
-  mapCharacter: MapCharacter
-}>()
-
-const game = useGame()
-
-const createNicknameText = (text: Phaser.GameObjects.Text) => {
-  text.setFontSize(13)
-  text.setFontFamily('Arial')
-  text.setOrigin(0.5, 9)
-  text.setResolution(2)
-
-  // Fix text alignment on Windows and Android
-  if (game.device.os.windows || game.device.os.android) {
-    text.setOrigin(0.5, 8)
-
-    if (game.device.browser.firefox) {
-      text.setOrigin(0.5, 9)
-    }
-  }
-}
-</script>
--- a/src/components/game/gui/CharacterProfile.vue
+++ b/src/components/game/gui/CharacterProfile.vue
@ -1,173 +0,0 @@
-<template>
-  <div class="absolute" v-if="gameStore.uiSettings.isCharacterProfileOpen" :style="modalStyle">
-    <div class="relative">
-      <img src="/assets/ui-elements/profile-ui-box-outer.svg" class="absolute w-full h-full" alt="" />
-      <img src="/assets/ui-elements/profile-ui-box-inner.svg" class="absolute left-2 bottom-2 w-[calc(100%_-_16px)] h-[calc(100%_-_40px)]" alt="" />
-      <div @mousedown="startDrag" class="cursor-move px-5 py-2.5 flex justify-between items-center relative">
-        <span class="text-xs text-white font-thin">Character Profile [Alt+C]</span>
-        <button @click="gameStore.uiSettings.isCharacterProfileOpen = false" class="w-3.5 h-3.5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out">
-          <img draggable="false" src="/assets/icons/modal/close-button-white.svg" class="w-full h-full" alt="Close button icon" />
-        </button>
-      </div>
-      <div class="py-4 px-6 flex flex-col gap-7 relative z-10">
-        <div class="flex flex-col gap-2.5">
-          <div class="flex justify-between">
-            <div>
-              <p class="text-sm m-0 font-bold text-white tracking-wide">{{ gameStore.character?.name }}</p>
-              <span class="text-xs">{{ gameStore.character?.experience }} / 18.600XP</span>
-            </div>
-            <a class="hover:cursor-pointer bg-[url('/assets/ui-elements/button-ui-box-textured-small.svg')] bg-no-repeat block w-8 h-8 relative mx-[3px]">
-              <img class="hover:drop-shadow-default w-3.5 h-3.5 m-[9px] object-contain" draggable="false" src="/assets/icons/plus-green-icon.svg" alt="Plus button icon" />
-            </a>
-          </div>
-          <div class="flex justify-between">
-            <div class="flex flex-col gap-0.5">
-              <div class="w-9 h-9 default-border rounded-sm bg-gray relative hover:bg-gray-600">
-                <span class="absolute w-full top-1/2 -translate-y-1/2 text-[6px] text-center">CROWN</span>
-              </div>
-              <div class="w-9 h-9 default-border rounded-sm bg-gray relative hover:bg-gray-600">
-                <span class="absolute w-full top-1/2 -translate-y-1/2 text-[6px] text-center">R-HAND</span>
-              </div>
-              <div class="flex gap-0.5 items-end">
-                <div class="w-9 h-9 default-border rounded-sm bg-gray relative hover:bg-gray-600">
-                  <span class="absolute w-full top-1/2 -translate-y-1/2 text-[6px] text-center">L-HAND</span>
-                </div>
-                <div class="w-6 h-6 default-border rounded-sm bg-gray relative hover:bg-gray-600">
-                  <span class="absolute w-full top-1/2 -translate-y-1/2 text-[6px] text-center">RING</span>
-                </div>
-              </div>
-            </div>
-            <img src="/assets/placeholders/inventory_player.png" class="w-8 h-auto" alt="Player character sprite" />
-            <div class="flex flex-col items-end gap-0.5">
-              <div class="w-9 h-9 default-border rounded-sm bg-gray relative hover:bg-gray-600">
-                <img class="w-6 h-6 center-element" src="/assets/icons/profile/helmet.svg" alt="Helmet icon" />
-              </div>
-              <div class="w-9 h-9 default-border rounded-sm bg-gray relative hover:bg-gray-600">
-                <img class="w-6 h-6 center-element" src="/assets/icons/profile/chestplate.svg" alt="Chestplate icon" />
-              </div>
-              <div class="flex gap-0.5 items-end">
-                <div class="w-6 h-6 default-border rounded-sm bg-gray relative hover:bg-gray-600">
-                  <img class="w-4 h-4 center-element" src="/assets/icons/profile/boots.svg" alt="Boots icon" />
-                </div>
-                <div class="w-9 h-9 default-border rounded-sm bg-gray relative hover:bg-gray-600">
-                  <img class="w-6 h-6 center-element" src="/assets/icons/profile/legs.svg" alt="Legs icon" />
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="flex justify-between">
-            <div class="flex flex-col">
-              <div class="w-[105px] h-px mb-[3px] flex justify-between">
-                <div class="w-px h-full bg-gray-300"></div>
-                <div class="w-[101px] h-full bg-gray-300"></div>
-                <div class="w-px h-full bg-gray-300"></div>
-              </div>
-              <div class="flex gap-11">
-                <p class="m-0 text-xs text-white tracking-wide">Health</p>
-                <span class="m-0 text-xs text-white tracking-wide">+ 15</span>
-              </div>
-              <div class="w-[105px] h-px my-[3px] flex justify-between">
-                <div class="w-px h-full bg-gray-300"></div>
-                <div class="w-[101px] h-full bg-gray-300"></div>
-                <div class="w-px h-full bg-gray-300"></div>
-              </div>
-              <div class="flex gap-11">
-                <p class="m-0 text-xs text-white tracking-wide">Health</p>
-                <span class="m-0 text-xs text-white tracking-wide">+ 15</span>
-              </div>
-              <div class="w-[105px] h-px mt-[3px] flex justify-between">
-                <div class="w-px h-full bg-gray-300"></div>
-                <div class="w-[101px] h-full bg-gray-300"></div>
-                <div class="w-px h-full bg-gray-300"></div>
-              </div>
-            </div>
-
-            <div class="flex flex-col">
-              <div class="w-[105px] h-px mb-[3px] flex justify-between">
-                <div class="w-px h-full bg-gray-300"></div>
-                <div class="w-[101px] h-full bg-gray-300"></div>
-                <div class="w-px h-full bg-gray-300"></div>
-              </div>
-              <div class="flex gap-11">
-                <p class="m-0 text-xs text-white tracking-wide">Health</p>
-                <span class="m-0 text-xs text-white tracking-wide">+ 15</span>
-              </div>
-              <div class="w-[105px] h-px my-[3px] flex justify-between">
-                <div class="w-px h-full bg-gray-300"></div>
-                <div class="w-[101px] h-full bg-gray-300"></div>
-                <div class="w-px h-full bg-gray-300"></div>
-              </div>
-              <div class="flex gap-11">
-                <p class="m-0 text-xs text-white tracking-wide">Health</p>
-                <span class="m-0 text-xs text-white tracking-wide">+ 15</span>
-              </div>
-              <div class="w-[105px] h-px mt-[3px] flex justify-between">
-                <div class="w-px h-full bg-gray-300"></div>
-                <div class="w-[101px] h-full bg-gray-300"></div>
-                <div class="w-px h-full bg-gray-300"></div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="grid grid-rows-4 grid-cols-6 gap-0.5">
-          <div v-for="n in 24" class="w-9 h-9 default-border rounded-sm bg-gray relative hover:bg-gray-600"></div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useGameStore } from '@/stores/gameStore'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
-
-const gameStore = useGameStore()
-
-const width = ref(286)
-const height = ref(483)
-const x = ref(window.innerWidth / 2 - 143)
-const y = ref(window.innerHeight / 2 - 241)
-const isDragging = ref(false)
-
-const modalStyle = computed(() => ({
-  top: `${y.value}px`,
-  left: `${x.value}px`,
-  width: `${width.value}px`,
-  height: `${height.value}px`
-}))
-
-function startDrag(event: MouseEvent) {
-  isDragging.value = true
-  const startX = event.clientX - x.value
-  const startY = event.clientY - y.value
-
-  function drag(event: MouseEvent) {
-    if (!isDragging.value) return
-    x.value = event.clientX - startX
-    y.value = event.clientY - startY
-  }
-
-  function stopDrag() {
-    isDragging.value = false
-    removeEventListener('mousemove', drag)
-    removeEventListener('mouseup', stopDrag)
-  }
-
-  addEventListener('mousemove', drag)
-  addEventListener('mouseup', stopDrag)
-}
-
-function keyPress(event: KeyboardEvent) {
-  if (event.altKey && event.key === 'c') {
-    gameStore.toggleCharacterProfile()
-  }
-}
-
-onMounted(() => {
-  addEventListener('keydown', keyPress)
-})
-
-onUnmounted(() => {
-  removeEventListener('keydown', keyPress)
-})
-</script>
--- a/src/components/game/gui/Clock.vue
+++ b/src/components/game/gui/Clock.vue
@ -1,21 +0,0 @@
-<template>
-  <div class="absolute top-0 right-4 hidden lg:block" v-if="gameStore.world.date && typeof gameStore.world.date === 'object'">
-    <p class="text-white text-lg">
-      {{ useDateFormat(gameStore.world.date, 'YYYY/MM/DD HH:mm') }}
-    </p>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { SocketEvent } from '@/application/enums'
-import { socketManager } from '@/managers/SocketManager'
-import { useGameStore } from '@/stores/gameStore'
-import { useDateFormat } from '@vueuse/core'
-import { onUnmounted } from 'vue'
-
-const gameStore = useGameStore()
-
-onUnmounted(() => {
-  socketManager.off(SocketEvent.DATE)
-})
-</script>
--- a/src/components/game/map/Characters.vue
+++ b/src/components/game/map/Characters.vue
@ -1,49 +0,0 @@
-<template>
-  <Character v-for="item in mapStore.characters" :key="item.character.id" :tileMap :mapCharacter="item" />
-</template>
-
-<script setup lang="ts">
-import { SocketEvent } from '@/application/enums'
-import type { MapCharacter, UUID } from '@/application/types'
-import Character from '@/components/game/character/Character.vue'
-import { socketManager } from '@/managers/SocketManager'
-import { useGameStore } from '@/stores/gameStore'
-import { useMapStore } from '@/stores/mapStore'
-import { onUnmounted } from 'vue'
-
-const gameStore = useGameStore()
-const mapStore = useMapStore()
-
-const props = defineProps<{
-  tileMap: Phaser.Tilemaps.Tilemap
-}>()
-
-socketManager.on(SocketEvent.MAP_CHARACTER_JOIN, (data: MapCharacter) => {
-  mapStore.addCharacter(data)
-})
-
-socketManager.on(SocketEvent.MAP_CHARACTER_LEAVE, (characterId: UUID) => {
-  mapStore.removeCharacter(characterId)
-})
-
-socketManager.on(SocketEvent.MAP_CHARACTER_MOVE, ([characterId, posX, posY, rot, isMoving]: [UUID, number, number, number, boolean]) => {
-  mapStore.updateCharacterPosition([characterId, posX, posY, rot, isMoving])
-
-  if (characterId === gameStore.character?.id) {
-    gameStore.character!.positionX = posX
-    gameStore.character!.positionY = posY
-    gameStore.character!.rotation = rot
-  }
-})
-
-socketManager.on(SocketEvent.MAP_CHARACTER_ATTACK, (characterId: UUID) => {
-  mapStore.updateCharacterProperty(characterId, 'isAttacking', true)
-})
-
-onUnmounted(() => {
-  socketManager.off(SocketEvent.MAP_CHARACTER_ATTACK)
-  socketManager.off(SocketEvent.MAP_CHARACTER_MOVE)
-  socketManager.off(SocketEvent.MAP_CHARACTER_JOIN)
-  socketManager.off(SocketEvent.MAP_CHARACTER_LEAVE)
-})
-</script>
--- a/src/components/game/map/Map.vue
+++ b/src/components/game/map/Map.vue
@ -1,71 +0,0 @@
-<template>
-  <MapTiles v-if="tileMap && tileMapLayer" :tileMap :tileMapLayer />
-  <PlacedMapObjects v-if="tileMap && tileMapLayer" :tileMap :tileMapLayer />
-  <Characters v-if="tileMap && mapStore.characters" :tileMap />
-</template>
-
-<script setup lang="ts">
-import { SocketEvent } from '@/application/enums'
-import type { mapLoadData } from '@/application/types'
-import { unduplicateArray } from '@/application/utilities'
-import Characters from '@/components/game/map/Characters.vue'
-import MapTiles from '@/components/game/map/MapTiles.vue'
-import PlacedMapObjects from '@/components/game/map/PlacedMapObjects.vue'
-import { socketManager } from '@/managers/SocketManager'
-import { createTileLayer, createTileMap, loadTileTexturesFromMapTileArray } from '@/services/mapService'
-import { MapStorage } from '@/storage/storages'
-import { useGameStore } from '@/stores/gameStore'
-import { useMapStore } from '@/stores/mapStore'
-import { useScene } from 'phavuer'
-import { onMounted, onUnmounted, shallowRef, watch } from 'vue'
-
-const scene = useScene()
-
-const gameStore = useGameStore()
-const mapStore = useMapStore()
-
-const mapStorage = new MapStorage()
-
-const tileMap = shallowRef<Phaser.Tilemaps.Tilemap>()
-const tileMapLayer = shallowRef<Phaser.Tilemaps.TilemapLayer>()
-
-// Event listeners
-socketManager.on(SocketEvent.MAP_CHARACTER_TELEPORT, (data: mapLoadData) => {
-  mapStore.setMapId(data.mapId)
-  mapStore.setCharacters(data.characters)
-})
-
-async function initialize() {
-  if (!mapStore.mapId) return
-
-  const map = await mapStorage.getById(mapStore.mapId)
-  if (!map) return
-
-  await loadTileTexturesFromMapTileArray(mapStore.mapId, scene)
-
-  tileMap.value = createTileMap(scene, map)
-  tileMapLayer.value = createTileLayer(tileMap.value, unduplicateArray(map.tiles))
-}
-
-watch(
-  () => mapStore.mapId,
-  async () => {
-    await initialize()
-  }
-)
-
-onMounted(async () => {
-  if (!mapStore.mapId) return
-  await initialize()
-})
-
-onUnmounted(() => {
-  if (tileMap.value) {
-    tileMap.value.destroyLayer('tiles')
-    tileMap.value.removeAllLayers()
-    tileMap.value.destroy()
-  }
-
-  socketManager.off(SocketEvent.MAP_CHARACTER_TELEPORT)
-})
-</script>
--- a/src/components/game/map/MapTiles.vue
+++ b/src/components/game/map/MapTiles.vue
@ -1,32 +0,0 @@
-<template>
-  <Controls v-if="tileMapLayer" :layer="tileMapLayer" :depth="0" />
-</template>
-
-<script setup lang="ts">
-import Controls from '@/components/utilities/Controls.vue'
-import { loadTileTexturesFromMapTileArray, placeTiles } from '@/services/mapService'
-import { MapStorage } from '@/storage/storages'
-import { useMapStore } from '@/stores/mapStore'
-import { useScene } from 'phavuer'
-import { onMounted } from 'vue'
-
-const scene = useScene()
-const mapStore = useMapStore()
-const mapStorage = new MapStorage()
-
-const props = defineProps<{
-  tileMap: Phaser.Tilemaps.Tilemap
-  tileMapLayer: Phaser.Tilemaps.TilemapLayer
-}>()
-
-onMounted(async () => {
-  if (!mapStore.mapId) return
-
-  const map = await mapStorage.getById(mapStore.mapId)
-  if (!map) return
-
-  await loadTileTexturesFromMapTileArray(mapStore.mapId, scene)
-
-  placeTiles(props.tileMap, props.tileMapLayer, map.tiles)
-})
-</script>
--- a/src/components/game/map/PlacedMapObjects.vue
+++ b/src/components/game/map/PlacedMapObjects.vue
@ -1,31 +0,0 @@
-<template>
-  <PlacedMapObject v-for="placedMapObject in items" :tileMap :tileMapLayer :placedMapObject />
-</template>
-
-<script setup lang="ts">
-import type { PlacedMapObject as PlacedMapObjectT } from '@/application/types'
-import PlacedMapObject from '@/components/game/map/partials/PlacedMapObject.vue'
-import { MapStorage } from '@/storage/storages'
-import { useMapStore } from '@/stores/mapStore'
-import { onMounted, ref } from 'vue'
-
-import TilemapLayer = Phaser.Tilemaps.TilemapLayer
-
-defineProps<{
-  tileMap: Phaser.Tilemaps.Tilemap
-  tileMapLayer: TilemapLayer
-}>()
-
-const mapStore = useMapStore()
-const mapStorage = new MapStorage()
-const items = ref<PlacedMapObjectT[]>([])
-
-onMounted(async () => {
-  if (!mapStore.mapId) return
-
-  const map = await mapStorage.getById(mapStore.mapId)
-  if (!map) return
-
-  items.value = map.placedMapObjects
-})
-</script>
--- a/src/components/game/map/partials/ImageGroup.vue
+++ b/src/components/game/map/partials/ImageGroup.vue
@ -1,102 +0,0 @@
-<template>
-  <Zone :depth="baseDepth" :origin-x="mapObj?.originX" :origin-y="mapObj?.originY" :width="mapObj?.frameWidth" :height="mapObj?.frameHeight" :x="x" :y="y" />
-</template>
-
-<script setup lang="ts">
-import type { MapObject, PlacedMapObject } from '@/application/types'
-import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
-import { calculateIsometricDepth } from '@/services/mapService'
-import { onPreUpdate, useScene, Zone } from 'phavuer'
-import { computed, onUnmounted } from 'vue'
-
-interface Props {
-  obj?: PlacedMapObject
-  mapObj?: MapObject
-  x?: number
-  y?: number
-}
-
-const props = defineProps<Props>()
-const mapEditor = useMapEditorComposable()
-const scene = useScene()
-
-const group = scene.add.group()
-const partitionPoints = computed(() => {
-  if (!props.mapObj?.frameWidth || !props.mapObj?.depthOffsets.length) return []
-
-  const sliceCount = props.mapObj.depthOffsets.length
-  return Array.from({ length: sliceCount + 1 }, (_, i) => i * (props.mapObj!.frameWidth / sliceCount))
-})
-
-let baseDepth = 0
-
-const createImagePartition = (startX: number, endX: number, depthOffset: number): void => {
-  if (!props.mapObj?.id) return
-
-  const img = scene.add.image(0, 0, props.mapObj.id)
-  img.setOrigin(props.mapObj.originX, props.mapObj.originY)
-  img.setCrop(startX, 0, endX, props.mapObj.frameHeight)
-  img.setDepth(baseDepth + depthOffset)
-  group.add(img)
-}
-
-const updateGroupProperties = (): void => {
-  if (!props.obj || !props.x || !props.y) return
-
-  const isMoving = mapEditor.movingPlacedObject.value?.id === props.obj.id
-  const isSelected = mapEditor.selectedMapObject.value?.id === props.obj.id
-  const isPlacedSelected = mapEditor.selectedPlacedObject.value?.id === props.obj.id
-
-  baseDepth = calculateIsometricDepth(props.obj.positionX, props.obj.positionY)
-
-  group.setXY(props.x, props.y)
-  group.setAlpha(isMoving || isSelected ? 0.5 : 1)
-  group.setTint(isPlacedSelected ? 0x00ff00 : 0xffffff)
-  group.setDepth(baseDepth)
-}
-
-const updateImageProperties = (): void => {
-  const orderedImages = group.getChildren() as Phaser.GameObjects.Image[]
-
-  orderedImages.forEach((image, index) => {
-    if (!props.obj || !props.mapObj || !props.x) return
-
-    image.flipX = props.obj.isRotated
-
-    if (props.obj.isRotated) {
-      const offsetNum = props.mapObj.depthOffsets.length
-      const xOffset = props.mapObj.frameWidth / offsetNum
-      image.x = props.x + (index < offsetNum / 2 ? -xOffset : xOffset)
-      image.setDepth(baseDepth - props.mapObj.depthOffsets[index])
-    } else {
-      image.x = props.x
-      image.setDepth(baseDepth + props.mapObj.depthOffsets[index])
-    }
-  })
-}
-
-onPreUpdate(() => {
-  updateGroupProperties()
-  updateImageProperties()
-})
-
-// Initial setup
-const initializeGroup = (): void => {
-  if (!props.mapObj || !props.x || !props.y || !props.obj) return
-
-  baseDepth = calculateIsometricDepth(props.obj.positionX, props.obj.positionY)
-  group.setXY(props.x, props.y)
-  group.setOrigin(props.mapObj.originX, props.mapObj.originY)
-
-  const points = partitionPoints.value
-  for (let i = 0; i < points.length - 1; i++) {
-    createImagePartition(points[i], points[i + 1], props.mapObj.depthOffsets[i])
-  }
-}
-
-initializeGroup()
-
-onUnmounted(() => {
-  group.destroy(true, true)
-})
-</script>
--- a/src/components/game/map/partials/PlacedMapObject.vue
+++ b/src/components/game/map/partials/PlacedMapObject.vue
@ -1,70 +0,0 @@
-<template>
-  <ImageGroup v-bind="groupProps" v-if="mapObject && gameStore.isTextureLoaded(props.placedMapObject.mapObject as string)" />
-</template>
-
-<script setup lang="ts">
-import type { MapObject, PlacedMapObject } from '@/application/types'
-import ImageGroup from '@/components/game/map/partials/ImageGroup.vue'
-import { loadMapObjectTextures, tileToWorldXY } from '@/services/mapService'
-import { MapObjectStorage } from '@/storage/storages'
-import { useGameStore } from '@/stores/gameStore'
-import { useScene } from 'phavuer'
-import { computed, onMounted, ref } from 'vue'
-
-import Tilemap = Phaser.Tilemaps.Tilemap
-import TilemapLayer = Phaser.Tilemaps.TilemapLayer
-
-const props = defineProps<{
-  placedMapObject: PlacedMapObject
-  tileMap: Tilemap
-  tileMapLayer: TilemapLayer
-}>()
-
-const scene = useScene()
-
-const gameStore = useGameStore()
-
-const mapObject = ref<MapObject>()
-
-const groupProps = computed(() => ({
-  ...calculateObjectPlacement(props.placedMapObject),
-  mapObj: mapObject.value,
-  obj: props.placedMapObject
-}))
-
-async function initialize() {
-  if (!props.placedMapObject.mapObject) return
-
-  /**
-   * Check if mapObject is an string or object, if its an object we assume its a mapObject and change it to a string
-   * We do this because this component is shared with the map editor, which gets sent the mapObject as an object by the server
-   */
-  if (typeof props.placedMapObject.mapObject === 'object') {
-    // @ts-ignore
-    props.placedMapObject.mapObject = props.placedMapObject.mapObject.id
-  }
-
-  const mapObjectStorage = new MapObjectStorage()
-  const _mapObject = await mapObjectStorage.getById(props.placedMapObject.mapObject as string)
-  if (!_mapObject) return
-
-  console.log(_mapObject)
-
-  mapObject.value = _mapObject
-
-  await loadMapObjectTextures([_mapObject], scene)
-}
-
-function calculateObjectPlacement(mapObj: PlacedMapObject): { x: number; y: number } {
-  let position = tileToWorldXY(props.tileMapLayer, mapObj.positionX, mapObj.positionY)
-
-  return {
-    x: position.worldPositionX,
-    y: position.worldPositionY
-  }
-}
-
-onMounted(async () => {
-  await initialize()
-})
-</script>
--- a/src/components/gameMaster/GmPanel.vue
+++ b/src/components/gameMaster/GmPanel.vue
@ -1,12 +1,12 @@
 <template>
-  <Modal :isModalOpen="gameStore.uiSettings.isGmPanelOpen" @modal:close="() => gameStore.toggleGmPanel()" :modal-width="1000" :modal-height="650" :is-full-screen="true" :bg-style="'dark'">
+  <Modal :isModalOpen="gameStore.uiSettings.isGmPanelOpen" @modal:close="() => gameStore.toggleGmPanel()" :modal-width="1000" :modal-height="650" :can-full-screen="true" :disable-bg-texture="true">
    <template #modalHeader>
      <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>
        <button @mousedown.stop class="btn-cyan py-1.5 px-4 min-w-24">Chats</button>
        <button @mousedown.stop class="btn-cyan active py-1.5 px-4 min-w-24">Asset manager</button>
-        <button class="btn-cyan py-1.5 px-4 min-w-24" type="button" @click="mapEditor.toggleActive()">Map editor</button>
+        <button class="btn-cyan py-1.5 px-4 min-w-24" type="button" @click="() => zoneEditorStore.toggleActive()">Zone manager</button>
      </div>
    </template>
    <template #modalBody>
@ -18,14 +18,14 @@
 </template>

 <script setup lang="ts">
-import AssetManager from '@/components/gameMaster/assetManager/AssetManager.vue'
-import Modal from '@/components/utilities/Modal.vue'
-import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
-import { useGameStore } from '@/stores/gameStore'
 import { ref } from 'vue'
+import Modal from '@/components/utilities/Modal.vue'
+import AssetManager from '@/components/gameMaster/assetManager/AssetManager.vue'
+import { useGameStore } from '@/stores/gameStore'
+import { useZoneEditorStore } from '@/stores/zoneEditorStore'

-const mapEditor = useMapEditorComposable()
 const gameStore = useGameStore()
+const zoneEditorStore = useZoneEditorStore()

 let toggle = ref('asset-manager')
 </script>
--- a/src/components/gameMaster/assetManager/AssetManager.vue
+++ b/src/components/gameMaster/assetManager/AssetManager.vue
@ -1,79 +1,85 @@
 <template>
-  <div class="flex gap-4 h-[calc(100%_-_32px)] w-[calc(100%_-_32px)] relative m-4">
-    <div class="w-2/12 flex flex-col relative overflow-auto rounded-md default-border bg-gray p-2.5">
+  <div class="flex h-full w-full relative">
+    <div class="w-2/12 flex flex-col relative overflow-auto">
      <!-- Asset Categories -->
-      <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group" :class="{ 'bg-cyan': selectedCategory === 'tiles' }" @click="() => (selectedCategory = 'tiles')">
-        <span class="group-hover:text-white" :class="{ 'text-white': selectedCategory === 'tiles' }">Tiles</span>
+      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'tiles' }" @click="() => (selectedCategory = 'tiles')">
+        <span :class="{ 'text-white': selectedCategory === 'tiles' }">Tiles</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 hover:bg-cyan rounded group" :class="{ 'bg-cyan': selectedCategory === 'map_objects' }" @click="() => (selectedCategory = 'map_objects')">
-        <span class="group-hover:text-white" :class="{ 'text-white': selectedCategory === 'map_objects' }">Map objects</span>
+      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'objects' }" @click="() => (selectedCategory = 'objects')">
+        <span :class="{ 'text-white': selectedCategory === 'objects' }">Objects</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 hover:bg-cyan rounded group" :class="{ 'bg-cyan': selectedCategory === 'sprites' }" @click="() => (selectedCategory = 'sprites')">
-        <span class="group-hover:text-white" :class="{ 'text-white': selectedCategory === 'sprites' }">Sprites</span>
+      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'sprites' }" @click="() => (selectedCategory = 'sprites')">
+        <span :class="{ 'text-white': selectedCategory === 'sprites' }">Sprites</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 hover:bg-cyan rounded group" :class="{ 'bg-cyan': selectedCategory === 'items' }" @click="() => (selectedCategory = 'items')">
-        <span class="group-hover:text-white" :class="{ 'text-white': selectedCategory === 'items' }">Items</span>
+      <a class="relative p-2.5 hover:cursor-pointer">
+        <span>Items</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 hover:bg-cyan rounded group">
-        <span class="group-hover:text-white">NPC's</span>
+      <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-gray-500"></div>
      </a>
-      <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group" :class="{ 'bg-cyan/80': selectedCategory === 'shops' }" @click="() => (selectedCategory = 'shops')">
-        <span class="group-hover:text-white" :class="{ 'text-white': selectedCategory === 'shops' }">Shops</span>
+      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'shops' }" @click="() => (selectedCategory = 'shops')">
+        <span :class="{ 'text-white': selectedCategory === 'shops' }">Shops</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 hover:bg-cyan rounded group" :class="{ 'bg-cyan/80': selectedCategory === 'characterTypes' }" @click="() => (selectedCategory = 'characterTypes')">
-        <span class="group-hover:text-white" :class="{ 'text-white': selectedCategory === 'characterTypes' }">Character types</span>
+      <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 hover:bg-cyan rounded group" :class="{ 'bg-cyan/80': selectedCategory === 'characterHair' }" @click="() => (selectedCategory = 'characterHair')">
-        <span class="group-hover:text-white" :class="{ 'text-white': selectedCategory === 'characterHair' }">Character hair</span>
+      <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 hover:bg-cyan rounded group">
-        <span class="group-hover:text-white">Mounts</span>
+      <a class="relative p-2.5 hover:cursor-pointer">
+        <span>Mounts</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 hover:bg-cyan rounded group">
-        <span class="group-hover:text-white">Pets</span>
+      <a class="relative p-2.5 hover:cursor-pointer">
+        <span>Pets</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 hover:bg-cyan rounded group">
-        <span class="group-hover:text-white">Emoticons</span>
+      <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-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'" />
-      <MapObjectList v-if="selectedCategory === 'map_objects'" />
+      <ObjectList v-if="selectedCategory === 'objects'" />
      <SpriteList v-if="selectedCategory === 'sprites'" />
-      <ItemList v-if="selectedCategory === 'items'" />
      <CharacterTypeList v-if="selectedCategory === 'characterTypes'" />
-      <CharacterHairList v-if="selectedCategory === 'characterHair'" />
    </div>

+    <div class="absolute w-px bg-gray-500 h-full top-0 left-1/2"></div>
+
    <!-- Asset details -->
-    <div class="flex w-7/12 after:hidden flex-col relative overflow-auto">
+    <div class="flex w-1/2 after:hidden flex-col relative overflow-auto">
      <TileDetails v-if="selectedCategory === 'tiles' && assetManagerStore.selectedTile" />
-      <MapObjectDetails v-if="selectedCategory === 'map_objects' && assetManagerStore.selectedMapObject" />
+      <ObjectDetails v-if="selectedCategory === 'objects' && assetManagerStore.selectedObject" />
      <SpriteDetails v-if="selectedCategory === 'sprites' && assetManagerStore.selectedSprite" />
-      <ItemDetails v-if="selectedCategory === 'items' && assetManagerStore.selectedItem" />
      <CharacterTypeDetails v-if="selectedCategory === 'characterTypes' && assetManagerStore.selectedCharacterType" />
-      <CharacterHairDetails v-if="selectedCategory === 'characterHair' && assetManagerStore.selectedCharacterHair" />
    </div>
  </div>
 </template>

 <script setup lang="ts">
-import CharacterHairDetails from '@/components/gameMaster/assetManager/partials/characterHair/CharacterHairDetails.vue'
-import CharacterHairList from '@/components/gameMaster/assetManager/partials/characterHair/CharacterHairList.vue'
-import CharacterTypeDetails from '@/components/gameMaster/assetManager/partials/characterType/CharacterTypeDetails.vue'
-import CharacterTypeList from '@/components/gameMaster/assetManager/partials/characterType/CharacterTypeList.vue'
-import ItemDetails from '@/components/gameMaster/assetManager/partials/item/itemDetails.vue'
-import ItemList from '@/components/gameMaster/assetManager/partials/item/itemList.vue'
-import MapObjectDetails from '@/components/gameMaster/assetManager/partials/mapObject/MapObjectDetails.vue'
-import MapObjectList from '@/components/gameMaster/assetManager/partials/mapObject/MapObjectList.vue'
-import SpriteDetails from '@/components/gameMaster/assetManager/partials/sprite/SpriteDetails.vue'
-import SpriteList from '@/components/gameMaster/assetManager/partials/sprite/SpriteList.vue'
-import TileDetails from '@/components/gameMaster/assetManager/partials/tile/TileDetails.vue'
-import TileList from '@/components/gameMaster/assetManager/partials/tile/TileList.vue'
-import { useAssetManagerStore } from '@/stores/assetManagerStore'
 import { ref } from 'vue'
+import { useAssetManagerStore } from '@/stores/assetManagerStore'
+import TileList from '@/components/gameMaster/assetManager/partials/tile/TileList.vue'
+import TileDetails from '@/components/gameMaster/assetManager/partials/tile/TileDetails.vue'
+import ObjectList from '@/components/gameMaster/assetManager/partials/object/ObjectList.vue'
+import ObjectDetails from '@/components/gameMaster/assetManager/partials/object/ObjectDetails.vue'
+import SpriteList from '@/components/gameMaster/assetManager/partials/sprite/SpriteList.vue'
+import SpriteDetails from '@/components/gameMaster/assetManager/partials/sprite/SpriteDetails.vue'
+import CharacterTypeList from '@/components/gameMaster/assetManager/partials/characterType/CharacterTypeList.vue'
+import CharacterTypeDetails from '@/components/gameMaster/assetManager/partials/characterType/CharacterTypeDetails.vue'

 const assetManagerStore = useAssetManagerStore()
 const selectedCategory = ref('tiles')
--- a/src/components/gameMaster/assetManager/partials/characterHair/CharacterHairDetails.vue
+++ b/src/components/gameMaster/assetManager/partials/characterHair/CharacterHairDetails.vue
@ -1,147 +0,0 @@
-<template>
-  <div class="h-full overflow-auto">
-    <div class="p-2.5 block rounded-md default-border bg-gray">
-      <form class="flex gap-2.5 flex-wrap" @submit.prevent="saveCharacterHair">
-        <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-full">
-          <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-full">
-          <label for="isSelectable">Is selectable</label>
-          <select v-model="characterIsSelectable" class="input-field" name="isSelectable">
-            <option :value="false">No</option>
-            <option :value="true">Yes</option>
-          </select>
-        </div>
-        <div class="form-field-full">
-          <div class="space-x-6 flex items-center">
-            <label for="color">Color</label>
-            <input v-model="characterColor" class="input-field" type="text" name="color" placeholder="Character Hair Color" />
-            <div class="h-[38px] w-[38px] rounded" :style="{ backgroundColor: characterColor }"></div>
-          </div>
-        </div>
-        <div class="form-field-half">
-          <label for="spriteId">Sprite</label>
-          <select v-model="characterSpriteId" class="input-field" name="spriteId">
-            <option disabled selected value="">Select sprite</option>
-            <option v-for="sprite in assetManagerStore.spriteList" :key="sprite.id" :value="sprite.id">{{ sprite.name }}</option>
-          </select>
-        </div>
-        <div class="form-field-half">
-          <label>Preview</label>
-          <div v-if="characterSpriteId" class="flex flex-col">
-            <div class="p-3 pb-5 min-h-32 block rounded-md default-border bg-gray-800">
-              <div class="flex items-center justify-center p-1 h-full bg-gray-700 rounded">
-                <img :src="config.server_endpoint + '/textures/sprites/' + characterSpriteId + '/front.png'" class="max-w-[200px] max-h-[200px] object-contain" />
-              </div>
-            </div>
-          </div>
-        </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="removeCharacterHair">Remove</button>
-      </form>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import config from '@/application/config'
-import { SocketEvent } from '@/application/enums'
-import type { CharacterGender, CharacterHair, Sprite } from '@/application/types'
-import { downloadCache } from '@/application/utilities'
-import { socketManager } from '@/managers/SocketManager'
-import { CharacterHairStorage } from '@/storage/storages'
-import { useAssetManagerStore } from '@/stores/assetManagerStore'
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-
-const assetManagerStore = useAssetManagerStore()
-
-const selectedCharacterHair = computed(() => assetManagerStore.selectedCharacterHair)
-
-const characterName = ref('')
-const characterGender = ref<CharacterGender>('MALE' as CharacterGender.MALE)
-const characterColor = ref<string>('#000000')
-const characterIsSelectable = ref<boolean>(false)
-const characterSpriteId = ref<string | null | undefined>(null)
-const genderOptions: CharacterGender[] = ['MALE' as CharacterGender.MALE, 'FEMALE' as CharacterGender.FEMALE]
-
-if (selectedCharacterHair.value) {
-  characterName.value = selectedCharacterHair.value.name
-  characterGender.value = selectedCharacterHair.value.gender
-  characterColor.value = selectedCharacterHair.value.color
-  characterIsSelectable.value = selectedCharacterHair.value.isSelectable
-  characterSpriteId.value = selectedCharacterHair.value.sprite?.id
-}
-
-async function removeCharacterHair() {
-  if (!selectedCharacterHair.value) return
-
-  socketManager.emit(SocketEvent.GM_CHARACTERHAIR_REMOVE, { id: selectedCharacterHair.value.id }, async (response: boolean) => {
-    if (!response) {
-      console.error('Failed to remove character hair')
-      return
-    }
-
-    await downloadCache('character_hair', new CharacterHairStorage())
-    await refreshCharacterHairList()
-  })
-}
-
-async function refreshCharacterHairList(unsetSelectedCharacterHair = true) {
-  socketManager.emit(SocketEvent.GM_CHARACTERHAIR_LIST, {}, (response: CharacterHair[]) => {
-    assetManagerStore.setCharacterHairList(response)
-
-    if (unsetSelectedCharacterHair) {
-      assetManagerStore.setSelectedCharacterHair(null)
-    }
-  })
-}
-
-async function saveCharacterHair() {
-  const characterHairData = {
-    id: selectedCharacterHair.value!.id,
-    name: characterName.value,
-    gender: characterGender.value,
-    color: characterColor.value,
-    isSelectable: characterIsSelectable.value,
-    spriteId: characterSpriteId.value
-  }
-
-  socketManager.emit(SocketEvent.GM_CHARACTERHAIR_UPDATE, characterHairData, async (response: boolean) => {
-    if (!response) {
-      console.error('Failed to save character type')
-      return
-    }
-
-    await downloadCache('character_hair', new CharacterHairStorage())
-    await refreshCharacterHairList(false)
-  })
-}
-
-watch(selectedCharacterHair, (characterHair: CharacterHair | null) => {
-  if (!characterHair) return
-  characterName.value = characterHair.name
-  characterGender.value = characterHair.gender
-  characterColor.value = characterHair.color
-  characterIsSelectable.value = characterHair.isSelectable
-  characterSpriteId.value = characterHair.sprite?.id
-})
-
-onMounted(() => {
-  if (!selectedCharacterHair.value) return
-
-  socketManager.emit(SocketEvent.GM_SPRITE_LIST, {}, (response: Sprite[]) => {
-    assetManagerStore.setSpriteList(response)
-  })
-})
-
-onBeforeUnmount(() => {
-  assetManagerStore.setSelectedCharacterHair(null)
-})
-</script>
--- a/src/components/gameMaster/assetManager/partials/characterHair/CharacterHairList.vue
+++ b/src/components/gameMaster/assetManager/partials/characterHair/CharacterHairList.vue
@ -1,101 +0,0 @@
-<template>
-  <div class="relative mb-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.5 inline-flex items-center justify-center hover:bg-cyan-800 hover:cursor-pointer">
-      <button class="p-0 h-5" id="create-character" @click="createNewCharacterHair">
-        <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>
-  <div v-bind="containerProps" class="flex-1 overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
-    <div v-bind="wrapperProps" ref="elementToScroll" class="flex flex-col gap-2.5">
-      <a
-        v-for="{ data: characterHair } in list"
-        :key="characterHair.id"
-        class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group"
-        :class="{ 'bg-cyan': assetManagerStore.selectedCharacterHair?.id === characterHair.id }"
-        @click="assetManagerStore.setSelectedCharacterHair(characterHair as CharacterHair)"
-      >
-        <div class="flex items-center gap-2.5">
-          <span class="group-hover:text-white" :class="{ 'text-white': assetManagerStore.selectedCharacterHair?.id === characterHair.id }">{{ characterHair.name }}</span>
-        </div>
-      </a>
-    </div>
-    <div class="absolute w-12 h-12 bottom-2.5 right-2.5">
-      <button class="fixed min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
-        <img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/mapEditor/chevron.svg" alt="" />
-      </button>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { SocketEvent } from '@/application/enums'
-import type { CharacterHair } from '@/application/types'
-import { socketManager } from '@/managers/SocketManager'
-import { useAssetManagerStore } from '@/stores/assetManagerStore'
-import { useGameStore } from '@/stores/gameStore'
-import { useVirtualList } from '@vueuse/core'
-import { computed, onMounted, ref } from 'vue'
-
-const gameStore = useGameStore()
-const assetManagerStore = useAssetManagerStore()
-
-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 createNewCharacterHair = () => {
-  socketManager.emit(SocketEvent.GM_CHARACTERHAIR_CREATE, {}, (response: boolean) => {
-    if (!response) {
-      console.error('Failed to create new character type')
-      return
-    }
-
-    socketManager.emit(SocketEvent.GM_CHARACTERHAIR_LIST, {}, (response: CharacterHair[]) => {
-      assetManagerStore.setCharacterHairList(response)
-    })
-  })
-}
-
-const filteredCharacterHairs = computed(() => {
-  if (!searchQuery.value) {
-    return assetManagerStore.characterHairList
-  }
-  return assetManagerStore.characterHairList.filter((character) => character.name.toLowerCase().includes(searchQuery.value.toLowerCase()))
-})
-
-const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(filteredCharacterHairs, {
-  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(() => {
-  socketManager.emit(SocketEvent.GM_CHARACTERHAIR_LIST, {}, (response: CharacterHair[]) => {
-    assetManagerStore.setCharacterHairList(response)
-  })
-})
-</script>
--- a/src/components/gameMaster/assetManager/partials/characterType/CharacterTypeDetails.vue
+++ b/src/components/gameMaster/assetManager/partials/characterType/CharacterTypeDetails.vue
@ -1,6 +1,6 @@
 <template>
  <div class="h-full overflow-auto">
-    <div class="p-2.5 block rounded-md default-border bg-gray">
+    <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>
@ -19,8 +19,8 @@
          </select>
        </div>
        <div class="form-field-full">
-          <label for="isSelectable">Is selectable</label>
-          <select v-model="characterIsSelectable" class="input-field" name="isSelectable">
+          <label for="isEnabledForCharCreation">Is enabled for character creation</label>
+          <select v-model="characterIsEnabledForCharCreation" class="input-field" name="isEnabledForCharCreation">
            <option :value="false">No</option>
            <option :value="true">Yes</option>
          </select>
@ -40,14 +40,12 @@
 </template>

 <script setup lang="ts">
-import { SocketEvent } from '@/application/enums'
-import type { CharacterGender, CharacterRace, CharacterType, Sprite } from '@/application/types'
-import { downloadCache } from '@/application/utilities'
-import { socketManager } from '@/managers/SocketManager'
-import { CharacterTypeStorage } from '@/storage/storages'
-import { useAssetManagerStore } from '@/stores/assetManagerStore'
+import type { CharacterType, CharacterGender, CharacterRace, Sprite } 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)
@ -55,7 +53,7 @@ const selectedCharacterType = computed(() => assetManagerStore.selectedCharacter
 const characterName = ref('')
 const characterGender = ref<CharacterGender>('MALE' as CharacterGender.MALE)
 const characterRace = ref<CharacterRace>('HUMAN' as CharacterRace.HUMAN)
-const characterIsSelectable = ref<boolean>(false)
+const characterIsEnabledForCharCreation = ref<boolean>(false)
 const characterSpriteId = ref<string | null | undefined>(null)

 const genderOptions: CharacterGender[] = ['MALE' as CharacterGender.MALE, 'FEMALE' as CharacterGender.FEMALE]
@ -69,26 +67,24 @@ if (selectedCharacterType.value) {
  characterName.value = selectedCharacterType.value.name
  characterGender.value = selectedCharacterType.value.gender
  characterRace.value = selectedCharacterType.value.race
-  characterIsSelectable.value = selectedCharacterType.value.isSelectable
-  characterSpriteId.value = selectedCharacterType.value.sprite?.id
+  characterIsEnabledForCharCreation.value = selectedCharacterType.value.isEnabledForCharCreation
+  characterSpriteId.value = selectedCharacterType.value.spriteId
 }

-async function removeCharacterType() {
+function removeCharacterType() {
  if (!selectedCharacterType.value) return

-  socketManager.emit(SocketEvent.GM_CHARACTERTYPE_REMOVE, { id: selectedCharacterType.value.id }, async (response: boolean) => {
+  gameStore.connection?.emit('gm:characterType:remove', { id: selectedCharacterType.value.id }, (response: boolean) => {
    if (!response) {
      console.error('Failed to remove character type')
      return
    }
-
-    await downloadCache('character_types', new CharacterTypeStorage())
-    await refreshCharacterTypeList()
+    refreshCharacterTypeList()
  })
 }

-async function refreshCharacterTypeList(unsetSelectedCharacterType = true) {
-  socketManager.emit(SocketEvent.GM_CHARACTERTYPE_LIST, {}, (response: CharacterType[]) => {
+function refreshCharacterTypeList(unsetSelectedCharacterType = true) {
+  gameStore.connection?.emit('gm:characterType:list', {}, (response: CharacterType[]) => {
    assetManagerStore.setCharacterTypeList(response)

    if (unsetSelectedCharacterType) {
@ -97,24 +93,22 @@ async function refreshCharacterTypeList(unsetSelectedCharacterType = true) {
  })
 }

-async function saveCharacterType() {
+function saveCharacterType() {
  const characterTypeData = {
    id: selectedCharacterType.value!.id,
    name: characterName.value,
    gender: characterGender.value,
    race: characterRace.value,
-    isSelectable: characterIsSelectable.value,
+    isEnabledForCharCreation: characterIsEnabledForCharCreation.value,
    spriteId: characterSpriteId.value
  }

-  socketManager.emit(SocketEvent.GM_CHARACTERTYPE_UPDATE, characterTypeData, async (response: boolean) => {
+  gameStore.connection?.emit('gm:characterType:update', characterTypeData, (response: boolean) => {
    if (!response) {
      console.error('Failed to save character type')
      return
    }
-
-    await downloadCache('character_types', new CharacterTypeStorage())
-    await refreshCharacterTypeList(false)
+    refreshCharacterTypeList(false)
  })
 }

@ -123,14 +117,14 @@ watch(selectedCharacterType, (characterType: CharacterType | null) => {
  characterName.value = characterType.name
  characterGender.value = characterType.gender
  characterRace.value = characterType.race
-  characterIsSelectable.value = characterType.isSelectable
-  characterSpriteId.value = characterType.sprite?.id
+  characterIsEnabledForCharCreation.value = characterType.isEnabledForCharCreation
+  characterSpriteId.value = characterType.spriteId
 })

 onMounted(() => {
  if (!selectedCharacterType.value) return

-  socketManager.emit(SocketEvent.GM_SPRITE_LIST, {}, (response: Sprite[]) => {
+  gameStore.connection?.emit('gm:sprite:list', {}, (response: Sprite[]) => {
    assetManagerStore.setSpriteList(response)
  })
 })
--- a/src/components/gameMaster/assetManager/partials/characterType/CharacterTypeList.vue
+++ b/src/components/gameMaster/assetManager/partials/characterType/CharacterTypeList.vue
@ -1,44 +1,36 @@
 <template>
-  <div class="relative mb-5 flex items-center gap-x-2.5">
+  <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.5 inline-flex items-center justify-center hover:bg-cyan-800 hover:cursor-pointer">
+    <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="flex-1 overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
-    <div v-bind="wrapperProps" ref="elementToScroll" class="flex flex-col gap-2.5">
-      <a
-        v-for="{ data: characterType } in list"
-        :key="characterType.id"
-        class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group"
-        :class="{ 'bg-cyan': assetManagerStore.selectedCharacterType?.id === characterType.id }"
-        @click="assetManagerStore.setSelectedCharacterType(characterType as CharacterType)"
-      >
+  <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 class="group-hover:text-white" :class="{ 'text-white': assetManagerStore.selectedCharacterType?.id === characterType.id }">{{ characterType.name }}</span>
+          <span :class="{ 'text-white': assetManagerStore.selectedCharacterType?.id === characterType.id }">{{ characterType.name }}</span>
        </div>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
      </a>
    </div>
-    <div class="absolute w-12 h-12 bottom-2.5 right-2.5">
-      <button class="fixed min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
-        <img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/mapEditor/chevron.svg" alt="" />
-      </button>
-    </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 { SocketEvent } from '@/application/enums'
-import type { CharacterType } from '@/application/types'
-import { socketManager } from '@/managers/SocketManager'
-import { useAssetManagerStore } from '@/stores/assetManagerStore'
 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'
-import { computed, onMounted, ref } from 'vue'

 const gameStore = useGameStore()
 const assetManagerStore = useAssetManagerStore()
@ -54,13 +46,13 @@ const handleSearch = () => {
 }

 const createNewCharacterType = () => {
-  socketManager.emit(SocketEvent.GM_CHARACTERTYPE_CREATE, {}, (response: boolean) => {
+  gameStore.connection?.emit('gm:characterType:create', {}, (response: boolean) => {
    if (!response) {
      console.error('Failed to create new character type')
      return
    }

-    socketManager.emit(SocketEvent.GM_CHARACTERTYPE_LIST, {}, (response: CharacterType[]) => {
+    gameStore.connection?.emit('gm:characterType:list', {}, (response: CharacterType[]) => {
      assetManagerStore.setCharacterTypeList(response)
    })
  })
@ -94,7 +86,7 @@ function toTop() {
 }

 onMounted(() => {
-  socketManager.emit(SocketEvent.GM_CHARACTERTYPE_LIST, {}, (response: CharacterType[]) => {
+  gameStore.connection?.emit('gm:characterType:list', {}, (response: CharacterType[]) => {
    assetManagerStore.setCharacterTypeList(response)
  })
 })
--- a/src/components/gameMaster/assetManager/partials/item/itemDetails.vue
+++ b/src/components/gameMaster/assetManager/partials/item/itemDetails.vue
@ -1,145 +0,0 @@
-<template>
-  <div class="h-full overflow-auto">
-    <div class="p-2.5 block rounded-md default-border bg-gray">
-      <form class="flex gap-2.5 flex-wrap" @submit.prevent="saveItem">
-        <div class="form-field-full">
-          <label for="name">Name</label>
-          <input v-model="itemName" class="input-field" type="text" name="name" placeholder="Item Name" />
-        </div>
-        <div class="form-field-full">
-          <label for="description">Description</label>
-          <input v-model="itemDescription" class="input-field" type="text" name="description" placeholder="Item Description" />
-        </div>
-        <div class="form-field-full">
-          <label for="itemType">Type</label>
-          <select v-model="itemType" class="input-field" name="itemType">
-            <option v-for="type in itemTypeOptions" :key="type" :value="type">{{ type }}</option>
-          </select>
-        </div>
-        <div class="form-field-full">
-          <label for="rarity">Rarity</label>
-          <select v-model="itemRarity" class="input-field" name="rarity">
-            <option v-for="rarity in rarityOptions" :key="rarity" :value="rarity">{{ rarity }}</option>
-          </select>
-        </div>
-        <div class="form-field-full">
-          <label for="stackable">Stackable</label>
-          <select v-model="itemStackable" class="input-field" name="stackable">
-            <option :value="false">No</option>
-            <option :value="true">Yes</option>
-          </select>
-        </div>
-        <div class="form-field-full">
-          <label for="spriteId">Sprite</label>
-          <select v-model="itemSpriteId" class="input-field" name="spriteId">
-            <option disabled selected value="">Select sprite</option>
-            <option v-for="sprite in assetManagerStore.spriteList" :key="sprite.id" :value="sprite.id">{{ sprite.name }}</option>
-          </select>
-        </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="removeItem">Remove</button>
-      </form>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { SocketEvent } from '@/application/enums'
-import type { Item, ItemRarity, ItemType, Sprite } from '@/application/types'
-import { socketManager } from '@/managers/SocketManager'
-import { useAssetManagerStore } from '@/stores/assetManagerStore'
-import { useGameStore } from '@/stores/gameStore'
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-
-const gameStore = useGameStore()
-const assetManagerStore = useAssetManagerStore()
-
-const selectedItem = computed(() => assetManagerStore.selectedItem)
-
-const itemName = ref('')
-const itemDescription = ref('')
-const itemType = ref<ItemType>('WEAPON' as ItemType)
-const itemRarity = ref<ItemRarity>('COMMON' as ItemRarity)
-const itemStackable = ref<boolean>(false)
-const itemSpriteId = ref<string | null | undefined>(null)
-
-const itemTypeOptions: ItemType[] = ['WEAPON', 'HELMET', 'CHEST', 'LEGS', 'BOOTS', 'GLOVES', 'RING', 'NECKLACE']
-const rarityOptions: ItemRarity[] = ['COMMON', 'UNCOMMON', 'RARE', 'EPIC', 'LEGENDARY']
-
-if (!selectedItem.value) {
-  console.error('No item selected')
-}
-
-if (selectedItem.value) {
-  itemName.value = selectedItem.value.name
-  itemDescription.value = selectedItem.value.description || ''
-  itemType.value = selectedItem.value.itemType
-  itemRarity.value = selectedItem.value.rarity
-  itemStackable.value = selectedItem.value.stackable
-  itemSpriteId.value = selectedItem.value.spriteId
-}
-
-function removeItem() {
-  if (!selectedItem.value) return
-
-  socketManager.emit(SocketEvent.GM_ITEM_REMOVE, { id: selectedItem.value.id }, (response: boolean) => {
-    if (!response) {
-      console.error('Failed to remove item')
-      return
-    }
-    refreshItemList()
-  })
-}
-
-function refreshItemList(unsetSelectedItem = true) {
-  socketManager.emit(SocketEvent.GM_ITEM_LIST, {}, (response: Item[]) => {
-    assetManagerStore.setItemList(response)
-
-    if (unsetSelectedItem) {
-      assetManagerStore.setSelectedItem(null)
-    }
-  })
-}
-
-function saveItem() {
-  const itemData = {
-    id: selectedItem.value!.id,
-    name: itemName.value,
-    description: itemDescription.value,
-    itemType: itemType.value,
-    rarity: itemRarity.value,
-    stackable: itemStackable.value,
-    spriteId: itemSpriteId.value
-  }
-
-  socketManager.emit(SocketEvent.GM_ITEM_UPDATE, itemData, (response: boolean) => {
-    if (!response) {
-      console.error('Failed to save item')
-      return
-    }
-    refreshItemList(false)
-  })
-}
-
-watch(selectedItem, (item: Item | null) => {
-  if (!item) return
-  itemName.value = item.name
-  itemDescription.value = item.description || ''
-  itemType.value = item.itemType
-  itemRarity.value = item.rarity
-  itemStackable.value = item.stackable
-  itemSpriteId.value = item.spriteId
-})
-
-onMounted(() => {
-  if (!selectedItem.value) return
-
-  socketManager.emit(SocketEvent.GM_SPRITE_LIST, {}, (response: Sprite[]) => {
-    assetManagerStore.setSpriteList(response)
-  })
-})
-
-onBeforeUnmount(() => {
-  assetManagerStore.setSelectedItem(null)
-})
-</script>
--- a/src/components/gameMaster/assetManager/partials/item/itemList.vue
+++ b/src/components/gameMaster/assetManager/partials/item/itemList.vue
@ -1,97 +0,0 @@
-<template>
-  <div class="relative mb-5 flex items-center gap-x-2.5">
-    <input v-model="searchQuery" class="input-field flex-grow" placeholder="Search..." @input="handleSearch" />
-    <label for="create-item" class="bg-cyan text-white border border-solid border-white/25 rounded drop-shadow-20 p-2.5 inline-flex items-center justify-center hover:bg-cyan-800 hover:cursor-pointer">
-      <button class="p-0 h-5" id="create-item" @click="createNewItem">
-        <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>
-  <div v-bind="containerProps" class="flex-1 overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
-    <div v-bind="wrapperProps" ref="elementToScroll" class="flex flex-col gap-2.5">
-      <a v-for="{ data: item } in list" :key="item.id" class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group" :class="{ 'bg-cyan': assetManagerStore.selectedItem?.id === item.id }" @click="assetManagerStore.setSelectedItem(item as Item)">
-        <div class="flex items-center gap-2.5">
-          <span class="group-hover:text-white" :class="{ 'text-white': assetManagerStore.selectedItem?.id === item.id }">
-            {{ item.name }}
-            <small class="text-gray-400">({{ item.itemType }})</small>
-          </span>
-        </div>
-      </a>
-    </div>
-    <div class="absolute w-12 h-12 bottom-2.5 right-2.5">
-      <button class="fixed min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
-        <img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/mapEditor/chevron.svg" alt="" />
-      </button>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { SocketEvent } from '@/application/enums'
-import type { Item } from '@/application/types'
-import { socketManager } from '@/managers/SocketManager'
-import { useAssetManagerStore } from '@/stores/assetManagerStore'
-import { useGameStore } from '@/stores/gameStore'
-import { useVirtualList } from '@vueuse/core'
-import { computed, onMounted, ref } from 'vue'
-
-const gameStore = useGameStore()
-const assetManagerStore = useAssetManagerStore()
-
-const searchQuery = ref('')
-
-const hasScrolled = ref(false)
-const elementToScroll = ref()
-
-const handleSearch = () => {
-  virtualList.value?.scrollTo(0)
-}
-
-const createNewItem = () => {
-  socketManager.emit(SocketEvent.GM_ITEM_CREATE, {}, (response: boolean) => {
-    if (!response) {
-      console.error('Failed to create new item')
-      return
-    }
-
-    socketManager.emit(SocketEvent.GM_ITEM_LIST, {}, (response: Item[]) => {
-      assetManagerStore.setItemList(response)
-    })
-  })
-}
-
-const filteredItems = computed(() => {
-  if (!searchQuery.value) {
-    return assetManagerStore.itemList
-  }
-  return assetManagerStore.itemList.filter((item) => item.name.toLowerCase().includes(searchQuery.value.toLowerCase()) || item.itemType.toLowerCase().includes(searchQuery.value.toLowerCase()))
-})
-
-const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(filteredItems, {
-  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(() => {
-  socketManager.emit(SocketEvent.GM_ITEM_LIST, {}, (response: Item[]) => {
-    assetManagerStore.setItemList(response)
-  })
-})
-</script>
--- a/src/components/gameMaster/assetManager/partials/mapObject/MapObjectDetails.vue
+++ b/src/components/gameMaster/assetManager/partials/mapObject/MapObjectDetails.vue
@ -1,217 +0,0 @@
-<template>
-  <div class="h-full overflow-auto">
-    <div class="relative p-2.5 flex flex-col items-center justify-center h-72 rounded-md default-border bg-gray">
-      <div class="grid grid-cols-[160px_auto_max-content] gap-12">
-        <div>
-          <input type="checkbox" checked v-model="showOrigin" /><label>Show Origin</label>
-          <br />
-          <input type="checkbox" checked v-model="showPartitionOverlay" /><label>Show Partitions</label>
-        </div>
-        <div class="relative w-fit h-fit">
-          <img class="max-h-56" :src="`${config.server_endpoint}/textures/map_objects/${selectedMapObject?.id}.png`" :alt="'Object ' + selectedMapObject?.id" ref="imageRef" />
-          <svg ref="svg" class="absolute top-0 left-0 w-full h-full inline-block pointer-events-none">
-            <circle v-if="showOrigin && svg" r="4" :cx="mapObjectOriginX * width" :cy="mapObjectOriginY * height" stroke="white" stroke-width="2" />
-            <rect v-if="showPartitionOverlay && svg" v-for="(offset, index) in mapObjectDepthOffsets" style="opacity: 0.5" stroke="red" :x="index * (width / mapObjectDepthOffsets.length)" :width="width / mapObjectDepthOffsets.length" :y="0" :height="height" />
-          </svg>
-        </div>
-        <div>
-          <button class="btn-cyan px-4 py-1.5 min-w-24" @click="mapObjectDepthOffsets.push(0)">Add Partition</button>
-          <p>Depth Offset</p>
-          <div class="text-white grid grid-cols-[120px_80px_auto] items-baseline gap-2" v-for="(offset, index) in mapObjectDepthOffsets">
-            <input class="input-field max-h-4 mt-2" type="number" :value="offset" @change="setPartitionDepth($event, index)" />
-            <button @click="mapObjectDepthOffsets.splice(index, 1)">Remove</button>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="mt-5 block">
-      <form class="flex gap-2.5 flex-wrap" @submit.prevent="saveObject">
-        <div class="form-field-full">
-          <label for="name">Name</label>
-          <input v-model="mapObjectName" class="input-field" type="text" name="name" placeholder="Wall #1" />
-        </div>
-        <div class="form-field-half">
-          <label for="origin-x">Origin X</label>
-          <input v-model="mapObjectOriginX" class="input-field" type="number" step="any" name="origin-x" placeholder="Origin X" />
-        </div>
-        <div class="form-field-half">
-          <label for="origin-y">Origin Y</label>
-          <input v-model="mapObjectOriginY" class="input-field" type="number" step="any" name="origin-y" placeholder="Origin Y" />
-        </div>
-        <div class="form-field-full">
-          <label for="tags">Tags</label>
-          <ChipsInput v-model="mapObjectTags" @update:modelValue="mapObjectTags = $event" />
-        </div>
-        <div class="form-field-full">
-          <label for="frame-speed">Frame rate</label>
-          <input v-model="mapObjectFrameRate" class="input-field" type="number" step="any" name="frame-speed" placeholder="Frame rate" />
-        </div>
-        <div class="form-field-half">
-          <label for="frame-width">Frame width</label>
-          <input v-model="mapObjectFrameWidth" class="input-field" type="number" step="any" name="frame-width" placeholder="Frame width" />
-        </div>
-        <div class="form-field-half">
-          <label for="frame-height">Frame height</label>
-          <input v-model="mapObjectFrameHeight" class="input-field" type="number" step="any" name="frame-height" placeholder="Frame height" />
-        </div>
-        <div class="flex gap-4">
-          <button class="btn-cyan px-4 py-1.5 min-w-24" type="submit">Save</button>
-          <button class="btn-red px-4 py-1.5 min-w-24" type="button" @click.prevent="removeObject">Delete</button>
-        </div>
-      </form>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import config from '@/application/config'
-import { SocketEvent } from '@/application/enums'
-import type { MapObject } from '@/application/types'
-import { downloadCache } from '@/application/utilities'
-import ChipsInput from '@/components/forms/ChipsInput.vue'
-import { socketManager } from '@/managers/SocketManager'
-import { MapObjectStorage } from '@/storage/storages'
-import { useAssetManagerStore } from '@/stores/assetManagerStore'
-import { useElementSize } from '@vueuse/core'
-import { Rectangle } from 'phavuer'
-import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue'
-
-const assetManagerStore = useAssetManagerStore()
-
-const selectedMapObject = computed(() => assetManagerStore.selectedMapObject)
-const svg = useTemplateRef('svg')
-const { width, height } = useElementSize(svg)
-
-const mapObjectName = ref('')
-const mapObjectTags = ref<string[]>([])
-const mapObjectDepthOffsets = ref<number[]>([])
-const mapObjectOriginX = ref(0)
-const mapObjectOriginY = ref(0)
-const mapObjectFrameRate = ref(0)
-const mapObjectFrameWidth = ref(0)
-const mapObjectFrameHeight = ref(0)
-const imageRef = ref<HTMLImageElement | null>(null)
-const showOrigin = ref(true)
-const showPartitionOverlay = ref(true)
-
-if (!selectedMapObject.value) {
-  console.error('No map mapObject selected')
-}
-
-if (selectedMapObject.value) {
-  mapObjectName.value = selectedMapObject.value.name
-  mapObjectTags.value = selectedMapObject.value.tags
-  mapObjectDepthOffsets.value = selectedMapObject.value.depthOffsets
-  mapObjectOriginX.value = selectedMapObject.value.originX
-  mapObjectOriginY.value = selectedMapObject.value.originY
-  mapObjectFrameRate.value = selectedMapObject.value.frameRate
-  mapObjectFrameWidth.value = selectedMapObject.value.frameWidth
-  mapObjectFrameHeight.value = selectedMapObject.value.frameHeight
-}
-
-const setPartitionDepth = (event: any, idx: number) => (mapObjectDepthOffsets.value[idx] = Number.parseInt(event.target.value))
-
-async function removeObject() {
-  if (!selectedMapObject.value) return
-  socketManager.emit(SocketEvent.GM_MAPOBJECT_REMOVE, { mapObjectId: selectedMapObject.value.id }, async (response: boolean) => {
-    if (!response) {
-      console.error('Failed to remove mapObject')
-      return
-    }
-
-    await downloadCache('map_objects', new MapObjectStorage())
-    await refreshObjectList()
-  })
-}
-
-async function refreshObjectList(unsetSelectedMapObject = true) {
-  socketManager.emit(SocketEvent.GM_MAPOBJECT_LIST, {}, (response: MapObject[]) => {
-    assetManagerStore.setMapObjectList(response)
-
-    if (unsetSelectedMapObject) {
-      assetManagerStore.setSelectedMapObject(null)
-    }
-  })
-}
-
-async function saveObject() {
-  if (!selectedMapObject.value) {
-    console.error('No mapObject selected')
-    return
-  }
-  socketManager.emit(
-    SocketEvent.GM_MAPOBJECT_UPDATE,
-    {
-      id: selectedMapObject.value.id,
-      name: mapObjectName.value,
-      tags: mapObjectTags.value,
-      depthOffsets: mapObjectDepthOffsets.value,
-      originX: mapObjectOriginX.value,
-      originY: mapObjectOriginY.value,
-      frameRate: mapObjectFrameRate.value,
-      frameWidth: mapObjectFrameWidth.value,
-      frameHeight: mapObjectFrameHeight.value
-    },
-    async (response: boolean) => {
-      if (!response) {
-        console.error('Failed to save mapObject')
-        return
-      }
-
-      await downloadCache('map_objects', new MapObjectStorage())
-      await refreshObjectList(false)
-    }
-  )
-}
-
-watch(selectedMapObject, (mapObject: MapObject | null) => {
-  if (!mapObject) return
-  mapObjectName.value = mapObject.name
-  mapObjectTags.value = mapObject.tags
-  mapObjectDepthOffsets.value = mapObject.depthOffsets
-  mapObjectOriginX.value = mapObject.originX
-  mapObjectOriginY.value = mapObject.originY
-  mapObjectFrameRate.value = mapObject.frameRate
-  mapObjectFrameWidth.value = mapObject.frameWidth
-  mapObjectFrameHeight.value = mapObject.frameHeight
-})
-
-onMounted(() => {
-  if (!selectedMapObject.value) return
-})
-
-// function startDragging(index: number, event: MouseEvent) {
-//   isDragging.value = true
-//   draggedPointIndex.value = index
-//
-//   const moveHandler = (e: MouseEvent) => {
-//     if (!isDragging.value || !imageRef.value) return
-//     const rect = imageRef.value.getBoundingClientRect()
-//     mapObjectPivotPoints.value[draggedPointIndex.value] = {
-//       x: e.clientX - rect.left,
-//       y: e.clientY - rect.top
-//     }
-//   }
-//
-//   const upHandler = () => {
-//     isDragging.value = false
-//     draggedPointIndex.value = -1
-//     window.removeEventListener('mousemove', moveHandler)
-//     window.removeEventListener('mouseup', upHandler)
-//   }
-//
-//   window.addEventListener('mousemove', moveHandler)
-//   window.addEventListener('mouseup', upHandler)
-// }
-
-onBeforeUnmount(() => {
-  assetManagerStore.setSelectedMapObject(null)
-})
-</script>
-
-<style scoped>
-.pointer-events-none {
-  pointer-events: none;
-}
-</style>
--- a/Show More
+++ b/Show More