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

Removed redundant field
Updated types
2025-01-02 23:34:53 +01:00 · 2025-01-01 23:01:58 +01:00 · 2025-01-01 20:59:38 +01:00 · 2025-01-01 20:46:02 +01:00 · 2025-01-01 19:05:24 +01:00 · 2025-01-01 18:16:31 +01:00
98 changed files with 2280 additions and 1649 deletions
--- a/.env.example
+++ b/.env.example
@ -1,4 +1,4 @@
-VITE_NAME=Sylvan Quest
+VITE_NAME=Noxious
 VITE_DEVELOPMENT=true
 VITE_SERVER_ENDPOINT=http://localhost:4000
 VITE_TILE_SIZE_X=64
--- a/.prettierrc.json
+++ b/.prettierrc.json
@ -4,5 +4,8 @@
  "tabWidth": 2,
  "singleQuote": true,
  "printWidth": 300,
-  "trailingComma": "none"
+  "trailingComma": "none",
  "plugins": ["@ianvs/prettier-plugin-sort-imports"],
  "importOrderParserPlugins": ["typescript", "jsx", "decorators-legacy", "classProperties"],
  "importOrderCaseSensitive": false
 }
--- 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>Sylvan Quest - Play</title>
+    <title>Noxious - Play</title>
  </head>
  <body>
    <div id="app"></div>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -27,6 +27,7 @@
    "zod": "^3.22.2"
  },
  "devDependencies": {
    "@ianvs/prettier-plugin-sort-imports": "^4.4.0",
    "@rushstack/eslint-patch": "^1.10.3",
    "@tsconfig/node20": "^20.1.4",
    "@types/jsdom": "^21.1.7",
@ -37,7 +38,6 @@
    "@vue/test-utils": "^2.4.6",
    "@vue/tsconfig": "^0.5.1",
    "autoprefixer": "^10.4.19",
    "easystarjs": "^0.4.4",
    "eslint": "^8.57.0",
    "eslint-plugin-vue": "^9.27.0",
    "jsdom": "^24.1.1",
--- 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/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/raindrop.webp
+++ b/public/assets/raindrop.webp
--- 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/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/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/App.vue
+++ b/src/App.vue
@ -6,15 +6,15 @@
 </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 Login from '@/components/screens/Login.vue'
 import ZoneEditor from '@/components/screens/ZoneEditor.vue'
 import BackgroundImageLoader from '@/components/utilities/BackgroundImageLoader.vue'
 import Notifications from '@/components/utilities/Notifications.vue'
 import { useGameStore } from '@/stores/gameStore'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import { computed, watch } from 'vue'
 const gameStore = useGameStore()
--- a/src/storage/assetStorage.ts
+++ b/src/storage/assetStorage.ts
@ -1,8 +1,8 @@
-import config from '@/config'
+import config from '@/application/config'
 import type { AssetDataT } from '@/application/types'
 import Dexie from 'dexie'
 import type { AssetDataT } from '@/types'
-export class AssetStorage {
+export class Assets {
  private db: Dexie
  constructor() {
@ -25,7 +25,19 @@ export class AssetStorage {
      const blob = await response.blob()
      // Store the asset in the database
-      await this.db.table('assets').put({ key: asset.key, data: blob, group: asset.group, updatedAt: asset.updatedAt, frameCount: asset.frameCount, frameWidth: asset.frameWidth, frameHeight: asset.frameHeight })
+      await this.db.table('assets').put({
        key: asset.key,
        data: blob,
        group: asset.group,
        updatedAt: asset.updatedAt,
        originX: asset.originX,
        originY: asset.originY,
        isAnimated: asset.isAnimated,
        frameRate: asset.frameRate,
        frameWidth: asset.frameWidth,
        frameHeight: asset.frameHeight,
        frameCount: asset.frameCount
      })
    } catch (error) {
      console.error(`Failed to add asset ${asset.key}:`, error)
    }
--- a/src/application/config.ts
+++ b/src/application/config.ts
--- a/src/application/types.ts
+++ b/src/application/types.ts
@ -1,22 +1,33 @@
 export type UUID = `${string}-${string}-${string}-${string}-${string}`
 export type Notification = {
  id?: string
  title?: string
  message?: string
 }
 export type HttpResponse<T> = {
  success: boolean
  message?: string
  data?: T
 }
 export type AssetDataT = {
  key: string
  data: string
  group: 'tiles' | 'objects' | 'sprites' | 'sprite_animations' | 'sound' | 'music' | 'ui' | 'font' | 'other'
  updatedAt: Date
  originX?: number
  originY?: number
  isAnimated?: boolean
-  frameCount?: number
+  frameRate?: number
  frameWidth?: number
  frameHeight?: number
  frameCount?: number
 }
 export type Tile = {
-  id: string
+  id: UUID
  name: string
  tags: any | null
  createdAt: Date
@ -24,13 +35,13 @@ export type Tile = {
 }
 export type Object = {
-  id: string
+  id: UUID
  name: string
  tags: any | null
  originX: number
  originY: number
  isAnimated: boolean
-  frameSpeed: number
+  frameRate: number
  frameWidth: number
  frameHeight: number
  createdAt: Date
@ -39,17 +50,23 @@ export type Object = {
 }
 export type Item = {
-  id: string
+  id: UUID
  name: string
  description: string | null
  itemType: ItemType
  stackable: boolean
  rarity: ItemRarity
  spriteId: UUID | null
  sprite?: Sprite
  createdAt: Date
  updatedAt: Date
  characters: CharacterItem[]
 }
 export type ItemType = 'WEAPON' | 'HELMET' | 'CHEST' | 'LEGS' | 'BOOTS' | 'GLOVES' | 'RING' | 'NECKLACE'
 export type ItemRarity = 'COMMON' | 'UNCOMMON' | 'RARE' | 'EPIC' | 'LEGENDARY'
 export type Zone = {
-  id: number
+  id: UUID
  name: string
  width: number
  height: number
@ -65,18 +82,18 @@ export type Zone = {
 }
 export type ZoneEffect = {
-  id: string
+  id: UUID
-  zoneId: number
+  zoneId: UUID
  zone: Zone
  effect: string
  strength: number
 }
 export type ZoneObject = {
-  id: string
+  id: UUID
-  zoneId: number
+  zoneId: UUID
  zone: Zone
-  objectId: string
+  objectId: UUID
  object: Object
  depth: number
  isRotated: boolean
@ -92,8 +109,8 @@ export enum ZoneEventTileType {
 }
 export type ZoneEventTile = {
-  id: string
+  id: UUID
-  zoneId: number
+  zoneId: UUID
  zone: Zone
  type: ZoneEventTileType
  positionX: number
@ -102,10 +119,10 @@ export type ZoneEventTile = {
 }
 export type ZoneEventTileTeleport = {
-  id: string
+  id: UUID
-  zoneEventTileId: string
+  zoneEventTileId: UUID
  zoneEventTile: ZoneEventTile
-  toZoneId: number
+  toZoneId: UUID
  toZone: Zone
  toPositionX: number
  toPositionY: number
@ -113,7 +130,7 @@ export type ZoneEventTileTeleport = {
 }
 export type User = {
-  id: number
+  id: UUID
  username: string
  password: string
  characters: Character[]
@ -133,11 +150,11 @@ export enum CharacterRace {
 }
 export type CharacterType = {
-  id: number
+  id: UUID
  name: string
  gender: CharacterGender
  race: CharacterRace
-  isEnabledForCharCreation: boolean
+  isSelectable: boolean
  characters: Character[]
  spriteId?: string
  sprite?: Sprite
@ -146,18 +163,16 @@ export type CharacterType = {
 }
 export type CharacterHair = {
-  id: number
+  id: UUID
  name: string
  spriteId: string
  sprite: Sprite
  gender: CharacterGender
-  isEnabledForCharCreation: boolean
+  isSelectable: boolean
  // @TODO: Do we need addedAt and updatedAt?
 }
 export type Character = {
-  id: number
+  id: UUID
-  userId: number
+  userId: UUID
  user: User
  name: string
  hitpoints: number
@ -169,14 +184,15 @@ export type Character = {
  positionX: number
  positionY: number
  rotation: number
-  zoneId: number
+  characterTypeId: UUID | null
  characterType: CharacterType | null | string
  characterHairId: UUID | null
  characterHair: CharacterHair | null
  zoneId: UUID
  zone: Zone
  characterTypeId: number | null
  characterType: CharacterType | null
  hairId: number | null
  hair: CharacterHair | null
  chats: Chat[]
  items: CharacterItem[]
  equipment: CharacterEquipment[]
 }
 export type ZoneCharacter = {
@ -185,16 +201,32 @@ export type ZoneCharacter = {
 }
 export type CharacterItem = {
-  id: number
+  id: UUID
-  characterId: number
+  characterId: UUID
  character: Character
-  itemId: string
+  itemId: UUID
  item: Item
  quantity: number
 }
 export type CharacterEquipment = {
  id: UUID
  slot: CharacterEquipmentSlotType
  characterItemId: UUID
  characterItem: CharacterItem
 }
 export enum CharacterEquipmentSlotType {
  HEAD = 'HEAD',
  BODY = 'BODY',
  ARMS = 'ARMS',
  LEGS = 'LEGS',
  NECK = 'NECK',
  RING = 'RING'
 }
 export type Sprite = {
-  id: string
+  id: UUID
  name: string
  createdAt: Date
  updatedAt: Date
@ -203,8 +235,7 @@ export type Sprite = {
 }
 export type SpriteAction = {
-  id: string
+  id: UUID
  spriteId: string
  sprite: Sprite
  action: string
  sprites: string[]
@ -214,14 +245,14 @@ export type SpriteAction = {
  isLooping: boolean
  frameWidth: number
  frameHeight: number
-  frameSpeed: number
+  frameRate: number
 }
 export type Chat = {
-  id: number
+  id: UUID
-  characterId: number
+  characterId: UUID
  character: Character
-  zoneId: number
+  zoneId: UUID
  zone: Zone
  message: string
  createdAt: Date
@ -240,3 +271,8 @@ export type WeatherState = {
  isFogEnabled: boolean
  fogDensity: number
 }
 export type zoneLoadData = {
  zone: Zone
  characters: ZoneCharacter[]
 }
--- a/src/application/utilities.ts
+++ b/src/application/utilities.ts
--- 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
@ -53,7 +53,7 @@ label {
 button,
 a {
-  @apply font-medium drop-shadow-20;
+  @apply font-medium;
 }
 button,
@ -67,7 +67,7 @@ input {
  }
  &[type='number']::-webkit-inner-spin-button,
  &[type='number']::-webkit-outer-spin-button,
-  &[type='radio']{
+  &[type='radio'] {
    -webkit-appearance: none;
  }
 }
@ -114,11 +114,11 @@ button {
  }
  &.btn-red {
-    @apply bg-red text-gray-50 text-base leading-5 rounded py-2.5;
+    @apply bg-red-300 text-gray-50 text-base leading-5 rounded py-2.5;
    &.active,
    &:hover {
-      @apply bg-red-300;
+      @apply bg-red-400;
    }
  }
@ -128,7 +128,7 @@ button {
    &.active,
    &.selected,
    &:hover {
-      @apply bg-gray-700 border-gray-700;
+      @apply bg-gray border-gray;
    }
  }
@ -145,12 +145,24 @@ button {
  }
 }
-.character {
+.character.active {
-  &.active {
+  @apply bg-gray bg-none;
-    @apply pr-px border-r-0;
+}
 .hair-deselect:has(:checked) {
  img {
    @apply brightness-200;
  }
 }
 .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
@ -3,31 +3,34 @@
 </template>
 <script setup lang="ts">
-import { Scene } from 'phavuer'
+import type { WeatherState } from '@/application/types'
 import { useZoneStore } from '@/stores/zoneStore'
 import { useGameStore } from '@/stores/gameStore'
 import { useZoneStore } from '@/stores/zoneStore'
 import { Scene } from 'phavuer'
 import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import type { WeatherState } from '@/types'
 // Constants
-const SUNRISE_HOUR = 6
+const LIGHT_CONFIG = {
-const SUNSET_HOUR = 20
+  SUNRISE_HOUR: 6,
-const DAY_STRENGTH = 100
+  SUNSET_HOUR: 20,
-const NIGHT_STRENGTH = 30
+  DAY_STRENGTH: 100,
  NIGHT_STRENGTH: 30
 }
-// Stores
+// Stores and refs
 const gameStore = useGameStore()
 const zoneStore = useZoneStore()
 // Scene ref
 const sceneRef = ref<Phaser.Scene | null>(null)
 const zoneEffectsReady = ref(false)
-// Effect refs
+// Effect objects
-const lightEffect = ref<Phaser.GameObjects.Graphics | null>(null)
+const effects = {
-const rainEmitter = ref<Phaser.GameObjects.Particles.ParticleEmitter | null>(null)
+  light: ref<Phaser.GameObjects.Graphics | null>(null),
-const fogSprite = ref<Phaser.GameObjects.Sprite | null>(null)
+  rain: ref<Phaser.GameObjects.Particles.ParticleEmitter | null>(null),
  fog: ref<Phaser.GameObjects.Sprite | null>(null)
 }
-// State refs
+// Weather state
 const weatherState = ref<WeatherState>({
  isRainEnabled: false,
  rainPercentage: 0,
@ -35,36 +38,25 @@ const weatherState = ref<WeatherState>({
  fogDensity: 0
 })
-// Scene lifecycle methods
+// Scene setup
-const preloadScene = async (scene: Phaser.Scene) => {
+const preloadScene = (scene: Phaser.Scene) => {
  scene.load.image('raindrop', 'assets/raindrop.png')
  scene.load.image('fog', 'assets/fog.png')
 }
-const createScene = async (scene: Phaser.Scene) => {
+const createScene = (scene: Phaser.Scene) => {
  sceneRef.value = scene
-  setupEffects(scene)
+  initializeEffects(scene)
  setupSocketListeners()
 }
-const updateScene = () => {
+const initializeEffects = (scene: Phaser.Scene) => {
-  updateEffects()
+  // Light
-}
+  effects.light.value = scene.add.graphics().setDepth(1000)
-// Effect setup
+  // Rain
-const setupEffects = (scene: Phaser.Scene) => {
+  effects.rain.value = scene.add
-  createLightEffect(scene)
+    .particles(0, 0, 'raindrop', {
  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,
@ -74,144 +66,113 @@ const createRainEffect = (scene: Phaser.Scene) => {
      alpha: { start: 0.5, end: 0 },
      blendMode: 'ADD'
    })
-  rainEmitter.value.setDepth(900)
+    .setDepth(900)
-  rainEmitter.value.stop()
+  effects.rain.value.stop()
  // Fog
  effects.fog.value = scene.add
    .sprite(window.innerWidth / 2, window.innerHeight / 2, 'fog')
    .setScale(2)
    .setAlpha(0)
    .setDepth(950)
 }
-const createFogEffect = (scene: Phaser.Scene) => {
+// Effect updates
-  fogSprite.value = scene.add.sprite(window.innerWidth / 2, window.innerHeight / 2, 'fog')
+const updateScene = () => {
-  fogSprite.value.setScale(2)
+  const timeBasedLight = calculateLightStrength(gameStore.world.date)
-  fogSprite.value.setAlpha(0)
+  const zoneEffects = zoneStore.zone?.zoneEffects?.reduce(
-  fogSprite.value.setDepth(950)
+    (acc, curr) => ({
      ...acc,
      [curr.effect]: curr.strength
    }),
    {}
  ) as { [key: string]: number }
  // Only update effects once zoneEffects are loaded
  if (!zoneEffectsReady.value) {
    if (zoneEffects && Object.keys(zoneEffects).length) {
      zoneEffectsReady.value = true
    } else {
      return
    }
  }
  const finalEffects =
    zoneEffects && Object.keys(zoneEffects).length
      ? zoneEffects
      : {
          light: timeBasedLight,
          rain: weatherState.value.isRainEnabled ? weatherState.value.rainPercentage : 0,
          fog: weatherState.value.isFogEnabled ? weatherState.value.fogDensity * 100 : 0
        }
  applyEffects(finalEffects)
 }
 const applyEffects = (effectValues: any) => {
  if (effects.light.value) {
    const darkness = 1 - (effectValues.light ?? 100) / 100
    effects.light.value.clear().fillStyle(0x000000, darkness).fillRect(0, 0, window.innerWidth, window.innerHeight)
  }
  if (effects.rain.value) {
    const strength = effectValues.rain ?? 0
    strength > 0 ? effects.rain.value.start().setQuantity(Math.floor((strength / 100) * 10)) : effects.rain.value.stop()
  }
  if (effects.fog.value) {
    effects.fog.value.setAlpha((effectValues.fog ?? 0) / 100)
  }
 }
 // Lighting calculations
 const calculateLightStrength = (time: Date): number => {
  const hour = time.getHours()
  const minute = time.getMinutes()
-  let strength = DAY_STRENGTH
+  if (hour >= LIGHT_CONFIG.SUNSET_HOUR || hour < LIGHT_CONFIG.SUNRISE_HOUR) return LIGHT_CONFIG.NIGHT_STRENGTH
-  // Night time (10 PM - 6 AM)
+  if (hour > LIGHT_CONFIG.SUNRISE_HOUR && hour < LIGHT_CONFIG.SUNSET_HOUR - 2) return LIGHT_CONFIG.DAY_STRENGTH
  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
+  if (hour === LIGHT_CONFIG.SUNRISE_HOUR) return LIGHT_CONFIG.NIGHT_STRENGTH + ((LIGHT_CONFIG.DAY_STRENGTH - LIGHT_CONFIG.NIGHT_STRENGTH) * minute) / 60
  const totalMinutes = (hour - (LIGHT_CONFIG.SUNSET_HOUR - 2)) * 60 + minute
  return LIGHT_CONFIG.DAY_STRENGTH - (LIGHT_CONFIG.DAY_STRENGTH - LIGHT_CONFIG.NIGHT_STRENGTH) * (totalMinutes / 120)
 }
-// Effect updates
+// Socket and window handlers
 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()
+    updateScene()
  })
-  // Weather updates
+  gameStore.connection!.on('weather', (data: WeatherState) => {
  gameStore.connection?.on('weather', (data: WeatherState) => {
    weatherState.value = data
-    updateEffects()
+    updateScene()
  })
-  // Time updates
+  gameStore.connection!.on('date', updateScene)
  gameStore.connection?.on('date', () => {
    if (zoneStore.zone?.zoneEffects) return
    updateEffects()
  })
 }
-const updateEffectWindowSize = () => {
+const handleResize = () => {
-  if (rainEmitter.value) rainEmitter.value.updateConfig({ x: { min: 0, max: window.innerWidth } })
+  if (effects.rain.value) effects.rain.value.updateConfig({ x: { min: 0, max: window.innerWidth } })
-  if (fogSprite.value) {
+  if (effects.fog.value) effects.fog.value.setPosition(window.innerWidth / 2, window.innerHeight / 2)
    fogSprite.value.setX(window.innerWidth / 2)
    fogSprite.value.setY(window.innerHeight / 2)
  }
 }
-// Watchers
+// Lifecycle
-watch(() => zoneStore.zone?.zoneEffects, updateEffects, { deep: true })
+watch(
  () => zoneStore.zone,
  () => {
    zoneEffectsReady.value = false
    updateScene()
  },
  { deep: true }
 )
-onMounted(() => {
+onMounted(() => window.addEventListener('resize', handleResize))
  window.addEventListener('resize', updateEffectWindowSize)
 })
 // Cleanup
 onBeforeUnmount(() => {
-  window.removeEventListener('resize', updateEffectWindowSize)
+  window.removeEventListener('resize', handleResize)
  if (sceneRef.value) sceneRef.value.scene.remove('effects')
  gameStore.connection?.off('weather')
 })
--- a/src/components/game/character/Character.vue
+++ b/src/components/game/character/Character.vue
@ -0,0 +1,192 @@
 <template>
  <ChatBubble :zoneCharacter="props.zoneCharacter" :currentX="currentX" :currentY="currentY" />
  <Healthbar :zoneCharacter="props.zoneCharacter" :currentX="currentX" :currentY="currentY" />
  <Container ref="charContainer" :depth="isometricDepth" :x="currentX" :y="currentY">
    <CharacterHair :zoneCharacter="props.zoneCharacter" :currentX="currentX" :currentY="currentY" />
    <!--    <CharacterChest :zoneCharacter="props.zoneCharacter" :currentX="currentX" :currentY="currentY" />-->
    <Sprite ref="charSprite" :origin-y="1" :flipX="isFlippedX" />
  </Container>
 </template>
 <script lang="ts" setup>
 import config from '@/application/config'
 import { type Sprite as SpriteT, type ZoneCharacter } from '@/application/types'
 import 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 { loadSpriteTextures } from '@/composables/gameComposable'
 import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
 import { useGameStore } from '@/stores/gameStore'
 import { useZoneStore } from '@/stores/zoneStore'
 import { Container, refObj, Sprite, useScene } from 'phavuer'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 // import CharacterChest from '@/components/game/character/partials/CharacterChest.vue'
 enum Direction {
  POSITIVE,
  NEGATIVE,
  UNCHANGED
 }
 const props = defineProps<{
  tilemap: Phaser.Tilemaps.Tilemap
  zoneCharacter: ZoneCharacter
 }>()
 const charContainer = refObj<Phaser.GameObjects.Container>()
 const charSprite = refObj<Phaser.GameObjects.Sprite>()
 const gameStore = useGameStore()
 const zoneStore = useZoneStore()
 const scene = useScene()
 const currentX = ref(0)
 const currentY = ref(0)
 const isometricDepth = ref(1)
 const isInitialPosition = ref(true)
 const isMoving = ref(false)
 let animationFrame: number | null = null
 const moveSpeed = 5.7
 const updateIsometricDepth = (x: number, y: number) => {
  isometricDepth.value = calculateIsometricDepth(x, y, 28, 94, true)
 }
 const stopMovement = () => {
  isMoving.value = false
  if (animationFrame) {
    cancelAnimationFrame(animationFrame)
    animationFrame = null
  }
 }
 const updatePosition = (x: number, y: number, direction: Direction) => {
  const targetX = tileToWorldX(props.tilemap, x, y)
  const targetY = tileToWorldY(props.tilemap, x, y)
  if (isInitialPosition.value) {
    currentX.value = targetX
    currentY.value = targetY
    isInitialPosition.value = false
    return
  }
  if (isMoving.value) {
    stopMovement()
  }
  const distance = Math.sqrt(Math.pow(targetX - currentX.value, 2) + Math.pow(targetY - currentY.value, 2))
  isMoving.value = true
  const startTime = performance.now()
  const startX = currentX.value
  const startY = currentY.value
  const duration = distance * moveSpeed
  if (direction === Direction.POSITIVE) {
    updateIsometricDepth(x, y)
  }
  const animate = (currentTime: number) => {
    if (!isMoving.value) return
    const elapsed = currentTime - startTime
    const progress = Math.min(elapsed / duration, 1)
    currentX.value = startX + (targetX - startX) * progress
    currentY.value = startY + (targetY - startY) * progress
    if (progress < 1) {
      animationFrame = requestAnimationFrame(animate)
    } else {
      isMoving.value = false
      if (direction === Direction.NEGATIVE) {
        updateIsometricDepth(x, y)
      }
    }
  }
  animationFrame = requestAnimationFrame(animate)
 }
 const calcDirection = (oldX: number, oldY: number, newX: number, newY: number): Direction => {
  if (newY < oldY || newX < oldX) return Direction.NEGATIVE
  if (newX > oldX || newY > oldY) return Direction.POSITIVE
  return Direction.UNCHANGED
 }
 const isFlippedX = computed(() => [6, 4].includes(props.zoneCharacter.character.rotation ?? 0))
 const charTexture = computed(() => {
  const { rotation, characterType } = props.zoneCharacter.character
  const spriteId = characterType?.sprite ?? 'idle_right_down'
  const action = props.zoneCharacter.isMoving ? 'walk' : 'idle'
  const direction = [0, 6].includes(rotation) ? 'left_up' : 'right_down'
  return `${spriteId}-${action}_${direction}`
 })
 const updateSprite = () => {
  if (props.zoneCharacter.isMoving) {
    charSprite.value!.anims.play(charTexture.value, true)
    return
  }
  charSprite.value!.anims.stop()
  charSprite.value!.setFrame(0)
  charSprite.value!.setTexture(charTexture.value)
 }
 watch(
  () => ({
    x: props.zoneCharacter.character.positionX,
    y: props.zoneCharacter.character.positionY,
    isMoving: props.zoneCharacter.isMoving,
    rotation: props.zoneCharacter.character.rotation
  }),
  (newValues, oldValues) => {
    if (!newValues) return
    if (!oldValues || newValues.x !== oldValues.x || newValues.y !== oldValues.y) {
      const direction = !oldValues ? Direction.POSITIVE : calcDirection(oldValues.x, oldValues.y, newValues.x, newValues.y)
      updatePosition(newValues.x, newValues.y, direction)
    }
    // Handle animation updates
    if (newValues.isMoving !== oldValues?.isMoving || newValues.rotation !== oldValues?.rotation) {
      updateSprite()
    }
  },
  { deep: true }
 )
 watch(() => props.zoneCharacter, updateSprite)
 loadSpriteTextures(scene, props.zoneCharacter.character.characterType?.sprite as string)
  .then(() => {
    charSprite.value!.setTexture(charTexture.value)
    charSprite.value!.setFlipX(isFlippedX.value)
  })
  .catch((error) => {
    console.error('Error loading texture:', error)
  })
 onMounted(() => {
  charContainer.value!.setName(props.zoneCharacter.character!.name)
  if (props.zoneCharacter.character.id === gameStore.character!.id) {
    zoneStore.setCharacterLoaded(true)
    // #146 : Set camera position to character, need to be improved still
    // scene.cameras.main.startFollow(charContainer.value as Phaser.GameObjects.Container)
    // scene.cameras.main.stopFollow()
  }
  updatePosition(props.zoneCharacter.character.positionX, props.zoneCharacter.character.positionY, props.zoneCharacter.character.rotation)
 })
 onUnmounted(() => {
  stopMovement()
 })
 </script>
--- a/src/components/game/character/partials/CharacterChest.vue
+++ b/src/components/game/character/partials/CharacterChest.vue
@ -0,0 +1,51 @@
 <template>
  <Image v-bind="imageProps" v-if="gameStore.getLoadedAsset(texture)" />
 </template>
 <script lang="ts" setup>
 import type { Sprite as SpriteT, ZoneCharacter } from '@/application/types'
 import { loadSpriteTextures } from '@/composables/gameComposable'
 import { useGameStore } from '@/stores/gameStore'
 import { Image, useScene } from 'phavuer'
 import { computed } from 'vue'
 const props = defineProps<{
  zoneCharacter: ZoneCharacter
  currentX: number
  currentY: number
 }>()
 const gameStore = useGameStore()
 const scene = useScene()
 const texture = computed(() => {
  const { rotation, characterHair } = props.zoneCharacter.character
  const spriteId = characterHair?.sprite?.id
  const direction = [0, 6].includes(rotation) ? 'back' : 'front'
  return `${spriteId}-${direction}`
 })
 const isFlippedX = computed(() => [6, 4].includes(props.zoneCharacter.character.rotation ?? 0))
 const imageProps = computed(() => {
  // Get the current sprite action based on direction
  const direction = [0, 6].includes(props.zoneCharacter.character.rotation ?? 0) ? 'back' : 'front'
  const spriteAction = props.zoneCharacter.character.characterHair?.sprite?.spriteActions?.find((spriteAction) => spriteAction.action === direction)
  return {
    depth: 1,
    originX: Number(spriteAction?.originX) ?? 0,
    originY: Number(spriteAction?.originY) ?? 0,
    flipX: isFlippedX.value,
    texture: texture.value
    // y: props.zoneCharacter.isMoving ? Math.floor(Date.now() / 250) % 2 : 0
  }
 })
 loadSpriteTextures(scene, props.zoneCharacter.character.characterHair?.sprite as SpriteT)
  .then(() => {})
  .catch((error) => {
    console.error('Error loading texture:', error)
  })
 </script>
--- a/src/components/game/character/partials/CharacterHair.vue
+++ b/src/components/game/character/partials/CharacterHair.vue
@ -0,0 +1,51 @@
 <template>
  <Image v-bind="imageProps" v-if="gameStore.getLoadedAsset(texture)" />
 </template>
 <script lang="ts" setup>
 import type { Sprite as SpriteT, ZoneCharacter } from '@/application/types'
 import { loadSpriteTextures } from '@/composables/gameComposable'
 import { useGameStore } from '@/stores/gameStore'
 import { Image, useScene } from 'phavuer'
 import { computed } from 'vue'
 const props = defineProps<{
  zoneCharacter: ZoneCharacter
  currentX: number
  currentY: number
 }>()
 const gameStore = useGameStore()
 const scene = useScene()
 const texture = computed(() => {
  const { rotation, characterHair } = props.zoneCharacter.character
  const spriteId = characterHair?.sprite?.id
  const direction = [0, 6].includes(rotation) ? 'back' : 'front'
  return `${spriteId}-${direction}`
 })
 const isFlippedX = computed(() => [6, 4].includes(props.zoneCharacter.character.rotation ?? 0))
 const imageProps = computed(() => {
  // Get the current sprite action based on direction
  const direction = [0, 6].includes(props.zoneCharacter.character.rotation ?? 0) ? 'back' : 'front'
  const spriteAction = props.zoneCharacter.character.characterHair?.sprite?.spriteActions?.find((spriteAction) => spriteAction.action === direction)
  return {
    depth: 1,
    originX: Number(spriteAction?.originX) ?? 0,
    originY: Number(spriteAction?.originY) ?? 0,
    flipX: isFlippedX.value,
    texture: texture.value,
    y: props.zoneCharacter.isMoving ? Math.floor(Date.now() / 250) % 2 : 0
  }
 })
 loadSpriteTextures(scene, props.zoneCharacter.character.characterHair?.sprite as SpriteT)
  .then(() => {})
  .catch((error) => {
    console.error('Error loading texture:', error)
  })
 </script>
--- a/src/components/game/character/partials/ChatBubble.vue
+++ b/src/components/game/character/partials/ChatBubble.vue
@ -0,0 +1,46 @@
 <template>
  <Container ref="charChatContainer" :depth="999" :x="currentX" :y="currentY">
    <RoundRectangle @create="createChatBubble" :origin-x="0.5" :origin-y="7.5" :fillColor="0xffffff" :width="194" :height="21" :radius="20" />
    <Text @create="createChatText" :style="{ fontSize: 13, fontFamily: 'Arial', color: '#000' }" />
  </Container>
 </template>
 <script setup lang="ts">
 import type { ZoneCharacter } from '@/application/types'
 import { Container, refObj, RoundRectangle, Text, useGame } from 'phavuer'
 import { onMounted } from 'vue'
 const props = defineProps<{
  zoneCharacter: ZoneCharacter
  currentX: number
  currentY: number
 }>()
 const game = useGame()
 const charChatContainer = refObj<Phaser.GameObjects.Container>()
 const createChatBubble = (container: Phaser.GameObjects.Container) => {
  container.setName(`${props.zoneCharacter.character.name}_chatBubble`)
 }
 const createChatText = (text: Phaser.GameObjects.Text) => {
  text.setName(`${props.zoneCharacter.character.name}_chatText`)
  text.setFontSize(13)
  text.setFontFamily('Arial')
  text.setOrigin(0.5, 10.9)
  // Fix text alignment on Windows and Android
  if (game.device.os.windows || game.device.os.android) {
    text.setOrigin(0.5, 9.75)
    if (game.device.browser.firefox) {
      text.setOrigin(0.5, 10.9)
    }
  }
 }
 onMounted(() => {
  charChatContainer.value!.setName(`${props.zoneCharacter.character!.name}_chatContainer`)
  charChatContainer.value!.setVisible(false)
 })
 </script>
--- a/src/components/game/character/partials/Healthbar.vue
+++ b/src/components/game/character/partials/Healthbar.vue
@ -0,0 +1,35 @@
 <template>
  <Container :depth="999" :x="currentX" :y="currentY">
    <Text @create="createNicknameText" :text="props.zoneCharacter.character.name" />
    <RoundRectangle :origin-x="0.5" :origin-y="18.5" :fillColor="0xffffff" :width="74" :height="6" :radius="5" />
    <RoundRectangle :origin-x="0.5" :origin-y="36.4" :fillColor="0x00b3b3" :width="70" :height="3" :radius="5" />
  </Container>
 </template>
 <script setup lang="ts">
 import type { ZoneCharacter } from '@/application/types'
 import { Container, RoundRectangle, Text, useGame } from 'phavuer'
 const props = defineProps<{
  zoneCharacter: ZoneCharacter
  currentX: number
  currentY: number
 }>()
 const game = useGame()
 const createNicknameText = (text: Phaser.GameObjects.Text) => {
  text.setFontSize(13)
  text.setFontFamily('Arial')
  text.setOrigin(0.5, 9)
  // Fix text alignment on Windows and Android
  if (game.device.os.windows || game.device.os.android) {
    text.setOrigin(0.5, 8)
    if (game.device.browser.firefox) {
      text.setOrigin(0.5, 9)
    }
  }
 }
 </script>
--- a/src/components/game/zone/Characters.vue
+++ b/src/components/game/zone/Characters.vue
@ -1,9 +1,9 @@
 <template>
-  <Character v-for="item in zoneStore.characters" :key="item.character.id" :layer="tilemap" :zoneCharacter="item" />
+  <Character v-for="item in zoneStore.characters" :key="item.character.id" :tilemap="tilemap" :zoneCharacter="item" />
 </template>
 <script setup lang="ts">
-import Character from '@/components/sprites/Character.vue'
+import Character from '@/components/game/character/Character.vue'
 import { useZoneStore } from '@/stores/zoneStore'
 const zoneStore = useZoneStore()
--- a/src/components/game/zone/Zone.vue
+++ b/src/components/game/zone/Zone.vue
@ -5,15 +5,15 @@
 </template>
 <script setup lang="ts">
-import { ref, onUnmounted } from 'vue'
+import type { ZoneCharacter, zoneLoadData } from '@/application/types'
-import { useScene } from 'phavuer'
+import Characters from '@/components/game/zone/Characters.vue'
 import ZoneObjects from '@/components/game/zone/ZoneObjects.vue'
 import ZoneTiles from '@/components/game/zone/ZoneTiles.vue'
 import { loadZoneTilesIntoScene } from '@/composables/zoneComposable'
 import { useGameStore } from '@/stores/gameStore'
 import { useZoneStore } from '@/stores/zoneStore'
-import { loadZoneTilesIntoScene } from '@/composables/zoneComposable'
+import { useScene } from 'phavuer'
-import type { Zone as ZoneT, ZoneCharacter } from '@/types'
+import { onUnmounted, ref } from 'vue'
 import ZoneTiles from '@/components/zone/ZoneTiles.vue'
 import ZoneObjects from '@/components/zone/ZoneObjects.vue'
 import Characters from '@/components/zone/Characters.vue'
 const scene = useScene()
 const gameStore = useGameStore()
@ -21,29 +21,22 @@ const zoneStore = useZoneStore()
 const tileMap = ref(null as Phaser.Tilemaps.Tilemap | null)
-type zoneLoadData = {
+onUnmounted(() => {
-  zone: ZoneT
+  zoneStore.reset()
-  characters: ZoneCharacter[]
+  gameStore.connection!.off('zone:character:teleport')
-}
+  gameStore.connection!.off('zone:character:join')
  gameStore.connection!.off('zone:character:leave')
  gameStore.connection!.off('zone:character:move')
 })
 // Event listeners
 gameStore.connection!.on('zone:character:teleport', async (data: zoneLoadData) => {
-  /**
+  await loadZoneTilesIntoScene(data.zone.id, scene)
   * @TODO : Update character via global event server-side, remove this and listen for it somewhere not here
   */
  gameStore.setCharacter({
    ...gameStore.character!,
    zoneId: data.zone.id
  })
  await loadZoneTilesIntoScene(data.zone, scene)
  zoneStore.setZone(data.zone)
  zoneStore.setCharacters(data.characters)
 })
 gameStore.connection!.on('zone:character:join', async (data: ZoneCharacter) => {
  // If data is from the current user, don't add it to the store
  if (data.character.id === gameStore.character?.id) return
  zoneStore.addCharacter(data)
 })
@ -51,22 +44,7 @@ gameStore.connection!.on('zone:character:leave', (characterId: number) => {
  zoneStore.removeCharacter(characterId)
 })
-gameStore.connection!.on('character:move', (data: ZoneCharacter) => {
+gameStore.connection!.on('zone:character:move', (data: { characterId: number; positionX: number; positionY: number; rotation: number; isMoving: boolean }) => {
-  zoneStore.updateCharacter(data)
+  zoneStore.updateCharacterPosition(data)
 })
 // Emit zone:character:join event to server and wait for response, then set zone and characters
 gameStore!.connection!.emit('zone:character:join', async (response: zoneLoadData) => {
  await loadZoneTilesIntoScene(response.zone, scene)
  zoneStore.setZone(response.zone)
  zoneStore.setCharacters(response.characters)
 })
 onUnmounted(() => {
  zoneStore.reset()
  gameStore.connection!.off('zone:character:teleport')
  gameStore.connection!.off('zone:character:join')
  gameStore.connection!.off('zone:character:leave')
  gameStore.connection!.off('character:move')
 })
 </script>
--- a/src/components/game/zone/ZoneObjects.vue
+++ b/src/components/game/zone/ZoneObjects.vue
@ -3,8 +3,8 @@
 </template>
 <script setup lang="ts">
 import ZoneObject from '@/components/game/zone/partials/ZoneObject.vue'
 import { useZoneStore } from '@/stores/zoneStore'
 import ZoneObject from '@/components/zone/partials/ZoneObject.vue'
 const zoneStore = useZoneStore()
--- a/src/components/game/zone/ZoneTiles.vue
+++ b/src/components/game/zone/ZoneTiles.vue
@ -3,13 +3,13 @@
 </template>
 <script setup lang="ts">
-import config from '@/config'
+import config from '@/application/config'
-import { useScene } from 'phavuer'
+import { unduplicateArray } from '@/application/utilities'
 import { useZoneStore } from '@/stores/zoneStore'
 import { onBeforeUnmount } from 'vue'
 import { FlattenZoneArray, setLayerTiles } from '@/composables/zoneComposable'
 import Controls from '@/components/utilities/Controls.vue'
-import { unduplicateArray } from '@/utilities'
+import { FlattenZoneArray, setLayerTiles } from '@/composables/zoneComposable'
 import { useZoneStore } from '@/stores/zoneStore'
 import { useScene } from 'phavuer'
 import { onBeforeUnmount } from 'vue'
 const emit = defineEmits(['tileMap:create'])
--- a/src/components/game/zone/partials/ZoneObject.vue
+++ b/src/components/game/zone/partials/ZoneObject.vue
@ -3,12 +3,12 @@
 </template>
 <script setup lang="ts">
-import { computed, onMounted } from 'vue'
+import type { AssetDataT, ZoneObject } from '@/application/types'
 import { Image, useScene } from 'phavuer'
 import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
 import { loadTexture } from '@/composables/gameComposable'
-import type { AssetDataT, ZoneObject } from '@/types'
+import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
 import { useGameStore } from '@/stores/gameStore'
 import { Image, useScene } from 'phavuer'
 import { computed } from 'vue'
 const props = defineProps<{
  tilemap: Phaser.Tilemaps.Tilemap
--- 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" :can-full-screen="true" :disable-bg-texture="true">
+  <Modal :isModalOpen="gameStore.uiSettings.isGmPanelOpen" @modal:close="() => gameStore.toggleGmPanel()" :modal-width="1000" :modal-height="650" :is-full-screen="true" :bg-style="'dark'">
    <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="() => zoneEditorStore.toggleActive()">Zone manager</button>
+        <button class="btn-cyan py-1.5 px-4 min-w-24" type="button" @click="() => zoneEditorStore.toggleActive()">Map editor</button>
      </div>
    </template>
    <template #modalBody>
@ -18,11 +18,11 @@
 </template>
 <script setup lang="ts">
 import { ref } from 'vue'
 import Modal from '@/components/utilities/Modal.vue'
 import AssetManager from '@/components/gameMaster/assetManager/AssetManager.vue'
 import Modal from '@/components/utilities/Modal.vue'
 import { useGameStore } from '@/stores/gameStore'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import { ref } from 'vue'
 const gameStore = useGameStore()
 const zoneEditorStore = useZoneEditorStore()
--- a/src/components/gameMaster/assetManager/AssetManager.vue
+++ b/src/components/gameMaster/assetManager/AssetManager.vue
@ -1,70 +1,58 @@
 <template>
-  <div class="flex h-full w-full relative">
+  <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">
+    <div class="w-2/12 flex flex-col relative overflow-auto rounded-md default-border bg-gray p-2.5">
      <!-- Asset Categories -->
-      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'tiles' }" @click="() => (selectedCategory = 'tiles')">
+      <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group" :class="{ 'bg-cyan': selectedCategory === 'tiles' }" @click="() => (selectedCategory = 'tiles')">
-        <span :class="{ 'text-white': selectedCategory === 'tiles' }">Tiles</span>
+        <span class="group-hover:text-white" :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" :class="{ 'bg-cyan/80': selectedCategory === 'objects' }" @click="() => (selectedCategory = 'objects')">
+      <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group" :class="{ 'bg-cyan': selectedCategory === 'objects' }" @click="() => (selectedCategory = 'objects')">
-        <span :class="{ 'text-white': selectedCategory === 'objects' }">Objects</span>
+        <span class="group-hover:text-white" :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" :class="{ 'bg-cyan/80': selectedCategory === 'sprites' }" @click="() => (selectedCategory = 'sprites')">
+      <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group" :class="{ 'bg-cyan': selectedCategory === 'sprites' }" @click="() => (selectedCategory = 'sprites')">
-        <span :class="{ 'text-white': selectedCategory === 'sprites' }">Sprites</span>
+        <span class="group-hover:text-white" :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">
+      <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group" :class="{ 'bg-cyan': selectedCategory === 'items' }" @click="() => (selectedCategory = 'items')">
-        <span>Items</span>
+        <span class="group-hover:text-white" :class="{ 'text-white': selectedCategory === 'items' }">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">
+      <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group">
-        <span>NPC's</span>
+        <span class="group-hover:text-white">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" :class="{ 'bg-cyan/80': selectedCategory === 'shops' }" @click="() => (selectedCategory = 'shops')">
+      <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="{ 'text-white': selectedCategory === 'shops' }">Shops</span>
+        <span class="group-hover:text-white" :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" :class="{ 'bg-cyan/80': selectedCategory === 'characterTypes' }" @click="() => (selectedCategory = 'characterTypes')">
+      <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="{ 'text-white': selectedCategory === 'characterTypes' }">Character types</span>
+        <span class="group-hover:text-white" :class="{ 'text-white': selectedCategory === 'characterTypes' }">Character types</span>
        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
      </a>
-      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'characterHair' }" @click="() => (selectedCategory = 'characterHair')">
+      <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="{ 'text-white': selectedCategory === 'characterHair' }">Character hair</span>
+        <span class="group-hover:text-white" :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">
+      <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group">
-        <span>Mounts</span>
+        <span class="group-hover:text-white">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">
+      <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group">
-        <span>Pets</span>
+        <span class="group-hover:text-white">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">
+      <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group">
-        <span>Emoticons</span>
+        <span class="group-hover:text-white">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'" />
      <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-1/2 after:hidden flex-col relative overflow-auto">
+    <div class="flex w-7/12 after:hidden flex-col relative overflow-auto">
      <TileDetails v-if="selectedCategory === 'tiles' && assetManagerStore.selectedTile" />
      <ObjectDetails v-if="selectedCategory === 'objects' && assetManagerStore.selectedObject" />
      <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>
@ -72,18 +60,20 @@
 </template>
 <script setup lang="ts">
 import { ref } from 'vue'
 import { useAssetManagerStore } from '@/stores/assetManagerStore'
 import TileList from '@/components/gameMaster/assetManager/partials/tile/TileList.vue'
 import TileDetails from '@/components/gameMaster/assetManager/partials/tile/TileDetails.vue'
 import ObjectList from '@/components/gameMaster/assetManager/partials/object/ObjectList.vue'
 import ObjectDetails from '@/components/gameMaster/assetManager/partials/object/ObjectDetails.vue'
 import SpriteList from '@/components/gameMaster/assetManager/partials/sprite/SpriteList.vue'
 import SpriteDetails from '@/components/gameMaster/assetManager/partials/sprite/SpriteDetails.vue'
 import CharacterTypeList from '@/components/gameMaster/assetManager/partials/characterType/CharacterTypeList.vue'
 import CharacterTypeDetails from '@/components/gameMaster/assetManager/partials/characterType/CharacterTypeDetails.vue'
 import CharacterHairList from '@/components/gameMaster/assetManager/partials/characterHair/CharacterHairList.vue'
 import CharacterHairDetails from '@/components/gameMaster/assetManager/partials/characterHair/CharacterHairDetails.vue'
 import 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 ObjectDetails from '@/components/gameMaster/assetManager/partials/object/ObjectDetails.vue'
 import ObjectList from '@/components/gameMaster/assetManager/partials/object/ObjectList.vue'
 import SpriteDetails from '@/components/gameMaster/assetManager/partials/sprite/SpriteDetails.vue'
 import SpriteList from '@/components/gameMaster/assetManager/partials/sprite/SpriteList.vue'
 import TileDetails from '@/components/gameMaster/assetManager/partials/tile/TileDetails.vue'
 import TileList from '@/components/gameMaster/assetManager/partials/tile/TileList.vue'
 import { useAssetManagerStore } from '@/stores/assetManagerStore'
 import { ref } from 'vue'
 const assetManagerStore = useAssetManagerStore()
 const selectedCategory = ref('tiles')
--- a/src/components/gameMaster/assetManager/partials/characterHair/CharacterHairDetails.vue
+++ b/src/components/gameMaster/assetManager/partials/characterHair/CharacterHairDetails.vue
@ -1,6 +1,6 @@
 <template>
  <div class="h-full overflow-auto">
-    <div class="m-2.5 p-2.5 block">
+    <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>
@ -13,8 +13,8 @@
          </select>
        </div>
        <div class="form-field-full">
-          <label for="isEnabledForCharCreation">Is enabled for character creation</label>
+          <label for="isSelectable">Is selectable</label>
-          <select v-model="characterIsEnabledForCharCreation" class="input-field" name="isEnabledForCharCreation">
+          <select v-model="characterIsSelectable" class="input-field" name="isSelectable">
            <option :value="false">No</option>
            <option :value="true">Yes</option>
          </select>
@ -34,10 +34,10 @@
 </template>
 <script setup lang="ts">
-import type { CharacterHair, CharacterGender, Sprite } from '@/types'
+import type { CharacterGender, CharacterHair, Sprite } from '@/application/types'
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useAssetManagerStore } from '@/stores/assetManagerStore'
 import { useGameStore } from '@/stores/gameStore'
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 const gameStore = useGameStore()
 const assetManagerStore = useAssetManagerStore()
@ -46,7 +46,7 @@ const selectedCharacterHair = computed(() => assetManagerStore.selectedCharacter
 const characterName = ref('')
 const characterGender = ref<CharacterGender>('MALE' as CharacterGender.MALE)
-const characterIsEnabledForCharCreation = ref<boolean>(false)
+const characterIsSelectable = ref<boolean>(false)
 const characterSpriteId = ref<string | null | undefined>(null)
 const genderOptions: CharacterGender[] = ['MALE' as CharacterGender.MALE, 'FEMALE' as CharacterGender.FEMALE]
@ -58,7 +58,7 @@ if (!selectedCharacterHair.value) {
 if (selectedCharacterHair.value) {
  characterName.value = selectedCharacterHair.value.name
  characterGender.value = selectedCharacterHair.value.gender
-  characterIsEnabledForCharCreation.value = selectedCharacterHair.value.isEnabledForCharCreation
+  characterIsSelectable.value = selectedCharacterHair.value.isSelectable
  characterSpriteId.value = selectedCharacterHair.value.spriteId
 }
@ -89,7 +89,7 @@ function saveCharacterHair() {
    id: selectedCharacterHair.value!.id,
    name: characterName.value,
    gender: characterGender.value,
-    isEnabledForCharCreation: characterIsEnabledForCharCreation.value,
+    isSelectable: characterIsSelectable.value,
    spriteId: characterSpriteId.value
  }
@ -106,7 +106,7 @@ watch(selectedCharacterHair, (characterHair: CharacterHair | null) => {
  if (!characterHair) return
  characterName.value = characterHair.name
  characterGender.value = characterHair.gender
-  characterIsEnabledForCharCreation.value = characterHair.isEnabledForCharCreation
+  characterIsSelectable.value = characterHair.isSelectable
  characterSpriteId.value = characterHair.spriteId
 })
--- a/src/components/gameMaster/assetManager/partials/characterHair/CharacterHairList.vue
+++ b/src/components/gameMaster/assetManager/partials/characterHair/CharacterHairList.vue
@ -1,36 +1,42 @@
 <template>
-  <div class="relative p-2.5 flex items-center gap-x-2.5">
+  <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 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.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 class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
  </div>
-  <div v-bind="containerProps" class="overflow-y-auto relative" @scroll="onScroll">
+  <div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
    <div v-bind="wrapperProps" ref="elementToScroll">
-      <a v-for="{ data: characterHair } in list" :key="characterHair.id" class="relative p-2.5 cursor-pointer block" :class="{ 'bg-cyan/80': assetManagerStore.selectedCharacterHair?.id === characterHair.id }" @click="assetManagerStore.setSelectedCharacterHair(characterHair as CharacterHair)">
+      <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="{ 'text-white': assetManagerStore.selectedCharacterHair?.id === characterHair.id }">{{ characterHair.name }}</span>
+          <span class="group-hover:text-white" :class="{ 'text-white': assetManagerStore.selectedCharacterHair?.id === characterHair.id }">{{ characterHair.name }}</span>
        </div>
        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
      </a>
    </div>
-    <button class="left-[calc(50%_-_60px)] fixed bottom-2.5 min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
+    <div class="absolute w-12 h-12 bottom-2.5 right-2.5">
-      <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 class="fixed min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
        <img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
      </button>
    </div>
  </div>
 </template>
 <script setup lang="ts">
-import { useGameStore } from '@/stores/gameStore'
+import type { CharacterHair } from '@/application/types'
 import { onMounted, ref, computed } from 'vue'
 import { useAssetManagerStore } from '@/stores/assetManagerStore'
-import type { CharacterHair } from '@/types'
+import { useGameStore } from '@/stores/gameStore'
 import { useVirtualList } from '@vueuse/core'
 import { computed, onMounted, ref } from 'vue'
 const gameStore = useGameStore()
 const assetManagerStore = useAssetManagerStore()
--- 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="m-2.5 p-2.5 block">
+    <div class="p-2.5 block rounded-md default-border bg-gray">
      <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="isEnabledForCharCreation">Is enabled for character creation</label>
+          <label for="isSelectable">Is selectable</label>
-          <select v-model="characterIsEnabledForCharCreation" class="input-field" name="isEnabledForCharCreation">
+          <select v-model="characterIsSelectable" class="input-field" name="isSelectable">
            <option :value="false">No</option>
            <option :value="true">Yes</option>
          </select>
@ -40,10 +40,10 @@
 </template>
 <script setup lang="ts">
-import type { CharacterType, CharacterGender, CharacterRace, Sprite } from '@/types'
+import type { CharacterGender, CharacterRace, CharacterType, Sprite } from '@/application/types'
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useAssetManagerStore } from '@/stores/assetManagerStore'
 import { useGameStore } from '@/stores/gameStore'
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 const gameStore = useGameStore()
 const assetManagerStore = useAssetManagerStore()
@ -53,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 characterIsEnabledForCharCreation = ref<boolean>(false)
+const characterIsSelectable = ref<boolean>(false)
 const characterSpriteId = ref<string | null | undefined>(null)
 const genderOptions: CharacterGender[] = ['MALE' as CharacterGender.MALE, 'FEMALE' as CharacterGender.FEMALE]
@ -67,7 +67,7 @@ if (selectedCharacterType.value) {
  characterName.value = selectedCharacterType.value.name
  characterGender.value = selectedCharacterType.value.gender
  characterRace.value = selectedCharacterType.value.race
-  characterIsEnabledForCharCreation.value = selectedCharacterType.value.isEnabledForCharCreation
+  characterIsSelectable.value = selectedCharacterType.value.isSelectable
  characterSpriteId.value = selectedCharacterType.value.spriteId
 }
@ -99,7 +99,7 @@ function saveCharacterType() {
    name: characterName.value,
    gender: characterGender.value,
    race: characterRace.value,
-    isEnabledForCharCreation: characterIsEnabledForCharCreation.value,
+    isSelectable: characterIsSelectable.value,
    spriteId: characterSpriteId.value
  }
@ -117,7 +117,7 @@ watch(selectedCharacterType, (characterType: CharacterType | null) => {
  characterName.value = characterType.name
  characterGender.value = characterType.gender
  characterRace.value = characterType.race
-  characterIsEnabledForCharCreation.value = characterType.isEnabledForCharCreation
+  characterIsSelectable.value = characterType.isSelectable
  characterSpriteId.value = characterType.spriteId
 })
--- a/src/components/gameMaster/assetManager/partials/characterType/CharacterTypeList.vue
+++ b/src/components/gameMaster/assetManager/partials/characterType/CharacterTypeList.vue
@ -1,36 +1,42 @@
 <template>
-  <div class="relative p-2.5 flex items-center gap-x-2.5">
+  <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 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.5 inline-flex items-center justify-center hover:bg-cyan-800 hover:cursor-pointer">
      <button class="p-0 h-5" id="create-character" @click="createNewCharacterType">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="white">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
        </svg>
      </button>
    </label>
    <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
  </div>
-  <div v-bind="containerProps" class="overflow-y-auto relative" @scroll="onScroll">
+  <div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
    <div v-bind="wrapperProps" ref="elementToScroll">
-      <a v-for="{ data: 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)">
+      <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 class="flex items-center gap-2.5">
-          <span :class="{ 'text-white': assetManagerStore.selectedCharacterType?.id === characterType.id }">{{ characterType.name }}</span>
+          <span class="group-hover:text-white" :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>
-    <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">
+    <div class="absolute w-12 h-12 bottom-2.5 right-2.5">
-      <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 class="fixed min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
        <img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
      </button>
    </div>
  </div>
 </template>
 <script setup lang="ts">
-import { useGameStore } from '@/stores/gameStore'
+import type { CharacterType } from '@/application/types'
 import { onMounted, ref, computed } from 'vue'
 import { useAssetManagerStore } from '@/stores/assetManagerStore'
-import type { CharacterType } from '@/types'
+import { useGameStore } from '@/stores/gameStore'
 import { useVirtualList } from '@vueuse/core'
 import { computed, onMounted, ref } from 'vue'
 const gameStore = useGameStore()
 const assetManagerStore = useAssetManagerStore()
--- a/src/components/gameMaster/assetManager/partials/item/itemDetails.vue
+++ b/src/components/gameMaster/assetManager/partials/item/itemDetails.vue
@ -0,0 +1,143 @@
 <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 type { Item, ItemRarity, ItemType } from '@/application/types'
 import { useAssetManagerStore } from '@/stores/assetManagerStore'
 import { useGameStore } from '@/stores/gameStore'
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 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
  gameStore.connection?.emit('gm:item:remove', { id: selectedItem.value.id }, (response: boolean) => {
    if (!response) {
      console.error('Failed to remove item')
      return
    }
    refreshItemList()
  })
 }
 function refreshItemList(unsetSelectedItem = true) {
  gameStore.connection?.emit('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
  }
  gameStore.connection?.emit('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
  gameStore.connection?.emit('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
@ -0,0 +1,95 @@
 <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="overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
    <div v-bind="wrapperProps" ref="elementToScroll">
      <a v-for="{ data: 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/zoneEditor/chevron.svg" alt="" />
      </button>
    </div>
  </div>
 </template>
 <script setup lang="ts">
 import type { Item } from '@/application/types'
 import { useAssetManagerStore } from '@/stores/assetManagerStore'
 import { useGameStore } from '@/stores/gameStore'
 import { useVirtualList } from '@vueuse/core'
 import { computed, onMounted, ref } from 'vue'
 const gameStore = useGameStore()
 const assetManagerStore = useAssetManagerStore()
 const searchQuery = ref('')
 const hasScrolled = ref(false)
 const elementToScroll = ref()
 const handleSearch = () => {
  virtualList.value?.scrollTo(0)
 }
 const createNewItem = () => {
  gameStore.connection?.emit('gm:item:create', {}, (response: boolean) => {
    if (!response) {
      console.error('Failed to create new item')
      return
    }
    gameStore.connection?.emit('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(() => {
  gameStore.connection?.emit('gm:item:list', {}, (response: Item[]) => {
    assetManagerStore.setItemList(response)
  })
 })
 </script>
--- a/src/components/gameMaster/assetManager/partials/object/ObjectDetails.vue
+++ b/src/components/gameMaster/assetManager/partials/object/ObjectDetails.vue
@ -1,12 +1,9 @@
 <template>
  <div class="h-full overflow-auto">
-    <div class="relative p-2.5 flex flex-col items-center justify-between h-72">
+    <div class="relative p-2.5 flex flex-col items-center justify-center h-72 rounded-md default-border bg-gray">
      <div class="filler"></div>
      <img class="max-h-56" :src="`${config.server_endpoint}/assets/objects/${selectedObject?.id}.png`" :alt="'Object ' + selectedObject?.id" />
      <button class="btn-red px-4 py-1.5 min-w-24" type="button" @click.prevent="removeObject">Remove</button>
      <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
    </div>
-    <div class="m-2.5 p-2.5 block">
+    <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>
@ -21,19 +18,19 @@
          <input v-model="objectOriginY" class="input-field" type="number" step="any" name="origin-y" placeholder="Origin Y" />
        </div>
        <div class="form-field-full">
-          <label for="origin-x">Tags</label>
+          <label for="tags">Tags</label>
          <ChipsInput v-model="objectTags" @update:modelValue="objectTags = $event" />
        </div>
        <div class="form-field-full">
-          <label for="origin-x">Is animated</label>
+          <label for="is-animated">Is animated</label>
          <select v-model="objectIsAnimated" class="input-field" name="is-animated">
            <option :value="false">No</option>
            <option :value="true">Yes</option>
          </select>
        </div>
        <div class="form-field-full">
-          <label for="frame-speed">Frame speed</label>
+          <label for="frame-speed">Frame rate</label>
-          <input v-model="objectFrameSpeed" class="input-field" type="number" step="any" name="frame-speed" placeholder="Frame speed" />
+          <input v-model="objectFrameRate" class="input-field" type="number" step="any" name="frame-speed" placeholder="Frame rate" />
        </div>
        <div class="form-field-half">
          <label for="frame-width">Frame width</label>
@ -43,20 +40,23 @@
          <label for="frame-height">Frame height</label>
          <input v-model="objectFrameHeight" class="input-field" type="number" step="any" name="frame-height" placeholder="Frame height" />
        </div>
        <div class="flex gap-4">
          <button class="btn-cyan px-4 py-1.5 min-w-24" type="submit">Save</button>
          <button class="btn-red px-4 py-1.5 min-w-24" type="button" @click.prevent="removeObject">Delete</button>
        </div>
      </form>
    </div>
  </div>
 </template>
 <script setup lang="ts">
-import type { Object } from '@/types'
+import config from '@/application/config'
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import type { Object } from '@/application/types'
 import { useAssetManagerStore } from '@/stores/assetManagerStore'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import { useGameStore } from '@/stores/gameStore'
 import config from '@/config'
 import ChipsInput from '@/components/forms/ChipsInput.vue'
 import { useAssetManagerStore } from '@/stores/assetManagerStore'
 import { useGameStore } from '@/stores/gameStore'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 const gameStore = useGameStore()
 const assetManagerStore = useAssetManagerStore()
@ -69,7 +69,7 @@ const objectTags = ref<string[]>([])
 const objectOriginX = ref(0)
 const objectOriginY = ref(0)
 const objectIsAnimated = ref(false)
-const objectFrameSpeed = ref(0)
+const objectFrameRate = ref(0)
 const objectFrameWidth = ref(0)
 const objectFrameHeight = ref(0)
@ -83,7 +83,7 @@ if (selectedObject.value) {
  objectOriginX.value = selectedObject.value.originX
  objectOriginY.value = selectedObject.value.originY
  objectIsAnimated.value = selectedObject.value.isAnimated
-  objectFrameSpeed.value = selectedObject.value.frameSpeed
+  objectFrameRate.value = selectedObject.value.frameRate
  objectFrameWidth.value = selectedObject.value.frameWidth
  objectFrameHeight.value = selectedObject.value.frameHeight
 }
@ -127,7 +127,7 @@ function saveObject() {
      originX: objectOriginX.value,
      originY: objectOriginY.value,
      isAnimated: objectIsAnimated.value,
-      frameSpeed: objectFrameSpeed.value,
+      frameRate: objectFrameRate.value,
      frameWidth: objectFrameWidth.value,
      frameHeight: objectFrameHeight.value
    },
@ -148,7 +148,7 @@ watch(selectedObject, (object: Object | null) => {
  objectOriginX.value = object.originX
  objectOriginY.value = object.originY
  objectIsAnimated.value = object.isAnimated
-  objectFrameSpeed.value = object.frameSpeed
+  objectFrameRate.value = object.frameRate
  objectFrameWidth.value = object.frameWidth
  objectFrameHeight.value = object.frameHeight
 })
--- a/src/components/gameMaster/assetManager/partials/object/ObjectList.vue
+++ b/src/components/gameMaster/assetManager/partials/object/ObjectList.vue
@ -1,39 +1,39 @@
 <template>
-  <div class="relative p-2.5 flex items-center gap-x-2.5">
+  <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="upload-asset" class="bg-cyan text-white border border-solid border-white/25 rounded drop-shadow-20 p-2 inline-flex items-center justify-center hover:bg-cyan-800 hover:cursor-pointer">
+    <label for="upload-asset" 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">
      <input class="hidden" id="upload-asset" ref="objectUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
      </svg>
    </label>
    <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
  </div>
-  <div v-bind="containerProps" class="overflow-y-auto relative" @scroll="onScroll">
+  <div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
    <div v-bind="wrapperProps" ref="elementToScroll">
-      <a v-for="{ data: object } in list" :key="object.id" class="relative p-2.5 cursor-pointer block" :class="{ 'bg-cyan/80': assetManagerStore.selectedObject?.id === object.id }" @click="assetManagerStore.setSelectedObject(object as Object)">
+      <a v-for="{ data: object } in list" :key="object.id" class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group" :class="{ 'bg-cyan': assetManagerStore.selectedObject?.id === object.id }" @click="assetManagerStore.setSelectedObject(object as Object)">
        <div class="flex items-center gap-2.5">
          <div class="h-7 w-16 max-w-16 flex justify-center">
            <img class="h-7" :src="`${config.server_endpoint}/assets/objects/${object.id}.png`" alt="Object" />
          </div>
          <span :class="{ 'text-white': assetManagerStore.selectedObject?.id === object.id }">{{ object.name }}</span>
        </div>
        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
      </a>
    </div>
-    <button class="left-[calc(50%_-_60px)] fixed bottom-2.5 min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
+    <div class="absolute w-12 h-12 bottom-2.5 right-2.5">
-      <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 class="fixed min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
        <img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
      </button>
    </div>
  </div>
 </template>
 <script setup lang="ts">
-import config from '@/config'
+import config from '@/application/config'
-import { useGameStore } from '@/stores/gameStore'
+import type { Object } from '@/application/types'
 import { onMounted, ref, computed } from 'vue'
 import { useAssetManagerStore } from '@/stores/assetManagerStore'
-import type { Object } from '@/types'
+import { useGameStore } from '@/stores/gameStore'
 import { useVirtualList } from '@vueuse/core'
 import { computed, onMounted, ref } from 'vue'
 const gameStore = useGameStore()
 const objectUploadField = ref(null)
--- a/src/components/gameMaster/assetManager/partials/sprite/SpriteDetails.vue
+++ b/src/components/gameMaster/assetManager/partials/sprite/SpriteDetails.vue
@ -1,7 +1,7 @@
 <template>
  <div class="h-full overflow-auto">
-    <div class="relative p-4 flex flex-col">
+    <div class="relative flex flex-col">
-      <div class="flex flex-wrap gap-2">
+      <div class="flex flex-wrap gap-2 p-2.5 rounded-md default-border bg-gray">
        <div class="w-full flex flex-col">
          <label class="mb-1.5 font-titles" for="name">Name</label>
          <input v-model="spriteName" class="input-field" type="text" name="name" placeholder="New sprite" />
@ -10,7 +10,11 @@
        <div class="w-full flex gap-2 mt-2 pb-4 relative">
          <button class="btn-cyan px-4 py-2 flex-1 sm:flex-none sm:min-w-24" type="button" @click.prevent="saveSprite">Save</button>
          <button class="btn-red px-4 py-2 flex-1 sm:flex-none sm:min-w-24" type="button" @click.prevent="deleteSprite">Delete</button>
-          <div class="w-[calc(100%_+_32px)] absolute left-[-15px] bottom-0 h-px bg-gray-500"></div>
+          <button class="btn bg-indigo-500 hover:bg-indigo-600 rounded text-white px-4 py-2 flex-1 sm:flex-none" type="button" @click.prevent="copySprite">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
            </svg>
          </button>
        </div>
      </div>
@ -51,8 +55,8 @@
              </select>
            </div>
            <div class="form-field-full" v-if="action.isAnimated">
-              <label for="frame-speed">Frame speed</label>
+              <label for="frame-speed">Frame rate</label>
-              <input v-model.number="action.frameSpeed" class="input-field" type="number" step="any" name="frame-speed" placeholder="Frame speed" />
+              <input v-model.number="action.frameRate" class="input-field" type="number" step="any" name="frame-speed" placeholder="Frame rate" />
            </div>
            <div class="form-field-full">
              <SpriteActionsInput v-model="action.sprites" />
@ -65,13 +69,13 @@
 </template>
 <script setup lang="ts">
-import type { Sprite, SpriteAction } from '@/types'
+import type { Sprite, SpriteAction } from '@/application/types'
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { uuidv4 } from '@/application/utilities'
 import SpriteActionsInput from '@/components/gameMaster/assetManager/partials/sprite/partials/SpriteImagesInput.vue'
 import Accordion from '@/components/utilities/Accordion.vue'
 import { useAssetManagerStore } from '@/stores/assetManagerStore'
 import { useGameStore } from '@/stores/gameStore'
-import Accordion from '@/components/utilities/Accordion.vue'
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import SpriteActionsInput from '@/components/gameMaster/assetManager/partials/sprite/partials/SpriteImagesInput.vue'
 import { uuidv4 } from '@/utilities'
 const gameStore = useGameStore()
 const assetManagerStore = useAssetManagerStore()
@ -87,7 +91,7 @@ if (!selectedSprite.value) {
 if (selectedSprite.value) {
  spriteName.value = selectedSprite.value.name
-  spriteActions.value = selectedSprite.value.spriteActions
+  spriteActions.value = sortSpriteActions(selectedSprite.value.spriteActions)
 }
 function deleteSprite() {
@ -100,6 +104,16 @@ function deleteSprite() {
  })
 }
 function copySprite() {
  gameStore.connection?.emit('gm:sprite:copy', { id: selectedSprite.value?.id }, (response: boolean) => {
    if (!response) {
      console.error('Failed to copy sprite')
      return
    }
    refreshSpriteList(false)
  })
 }
 function refreshSpriteList(unsetSelectedSprite = true) {
  gameStore.connection?.emit('gm:sprite:list', {}, (response: Sprite[]) => {
    assetManagerStore.setSpriteList(response)
@ -128,7 +142,7 @@ function saveSprite() {
          originY: action.originY,
          isAnimated: action.isAnimated,
          isLooping: action.isLooping,
-          frameSpeed: action.frameSpeed,
+          frameRate: action.frameRate,
          frameWidth: action.frameWidth,
          frameHeight: action.frameHeight
        }
@ -148,7 +162,7 @@ function addNewImage() {
  if (!selectedSprite.value) return
  const newImage: SpriteAction = {
-    id: uuidv4(), // Temporary ID, should be replaced by server-generated ID
+    id: uuidv4(),
    spriteId: selectedSprite.value.id,
    sprite: selectedSprite.value,
    action: 'new_action',
@ -157,7 +171,7 @@ function addNewImage() {
    originY: 0,
    isAnimated: false,
    isLooping: false,
-    frameSpeed: 0,
+    frameRate: 0,
    frameWidth: 0,
    frameHeight: 0
  }
@ -166,13 +180,17 @@ function addNewImage() {
    spriteActions.value = []
  }
-  spriteActions.value.push(newImage)
+  spriteActions.value = sortSpriteActions([...spriteActions.value, newImage])
 }
 function sortSpriteActions(actions: SpriteAction[]): SpriteAction[] {
  return [...actions].sort((a, b) => a.action.localeCompare(b.action))
 }
 watch(selectedSprite, (sprite: Sprite | null) => {
  if (!sprite) return
  spriteName.value = sprite.name
-  spriteActions.value = sprite.spriteActions
+  spriteActions.value = sortSpriteActions(sprite.spriteActions)
 })
 onMounted(() => {
--- a/src/components/gameMaster/assetManager/partials/sprite/SpriteList.vue
+++ b/src/components/gameMaster/assetManager/partials/sprite/SpriteList.vue
@ -1,35 +1,35 @@
 <template>
-  <div class="relative p-2.5 flex items-center gap-x-2.5">
+  <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" />
-    <button @click.prevent="newButtonClickHandler" class="bg-cyan text-white border border-solid border-white/25 rounded drop-shadow-20 p-2 inline-flex items-center justify-center hover:bg-cyan-800 hover:cursor-pointer">
+    <button @click.prevent="newButtonClickHandler" 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">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
      </svg>
    </button>
    <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
  </div>
-  <div v-bind="containerProps" class="overflow-y-auto relative" @scroll="onScroll">
+  <div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
    <div v-bind="wrapperProps" ref="elementToScroll">
-      <a v-for="{ data: sprite } in list" :key="sprite.id" class="relative p-2.5 cursor-pointer block" :class="{ 'bg-cyan/80': assetManagerStore.selectedSprite?.id === sprite.id }" @click="assetManagerStore.setSelectedSprite(sprite as Sprite)">
+      <a v-for="{ data: sprite } in list" :key="sprite.id" class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group" :class="{ 'bg-cyan': assetManagerStore.selectedSprite?.id === sprite.id }" @click="assetManagerStore.setSelectedSprite(sprite as Sprite)">
        <div class="flex items-center gap-2.5">
          <span :class="{ 'text-white': assetManagerStore.selectedSprite?.id === sprite.id }">{{ sprite.name }}</span>
        </div>
        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
      </a>
    </div>
-    <button class="left-[calc(50%_-_60px)] fixed bottom-2.5 min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
+    <div class="absolute w-12 h-12 bottom-2.5 right-2.5">
-      <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 class="fixed min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
        <img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
      </button>
    </div>
  </div>
 </template>
 <script setup lang="ts">
-import config from '@/config'
+import config from '@/application/config'
-import { useGameStore } from '@/stores/gameStore'
+import type { Sprite } from '@/application/types'
 import { onMounted, ref, computed } from 'vue'
 import { useAssetManagerStore } from '@/stores/assetManagerStore'
 import { useGameStore } from '@/stores/gameStore'
 import { useVirtualList } from '@vueuse/core'
-import type { Sprite } from '@/types'
+import { computed, onMounted, ref } from 'vue'
 const gameStore = useGameStore()
 const assetManagerStore = useAssetManagerStore()
--- a/src/components/gameMaster/assetManager/partials/sprite/partials/SpriteImagesInput.vue
+++ b/src/components/gameMaster/assetManager/partials/sprite/partials/SpriteImagesInput.vue
@ -1,14 +1,21 @@
 <template>
  <div class="flex flex-wrap gap-3">
-    <div v-for="(image, index) in modelValue" :key="index" class="h-20 w-20 p-4 bg-gray-50 bg-opacity-50 rounded text-center relative group cursor-move" draggable="true" @dragstart="dragStart($event, index)" @dragover.prevent @dragenter.prevent @drop="drop($event, index)">
+    <div v-for="(image, index) in modelValue" :key="index" class="h-20 w-20 p-4 bg-gray-300 bg-opacity-50 rounded text-center relative group cursor-move" draggable="true" @dragstart="dragStart($event, index)" @dragover.prevent @dragenter.prevent @drop="drop($event, index)">
      <img :src="image" class="max-w-full max-h-full object-contain pointer-events-none" alt="Uploaded image" />
-      <button @click.stop="deleteImage(index)" class="absolute top-1 right-1 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity" aria-label="Delete image">
+      <div class="absolute top-1 left-1 flex-row space-y-1">
        <button @click.stop="deleteImage(index)" class="bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity" aria-label="Delete image">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
        <button class="bg-blue-500 text-white rounded-full w-6 h-6 flex items-center justify-center cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity" aria-label="Scope image">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
          </svg>
        </button>
      </div>
-    <div class="h-20 w-20 p-4 bg-gray-100 bg-opacity-50 rounded justify-center items-center flex hover:cursor-pointer" @click="triggerFileInput" @drop.prevent="onDrop" @dragover.prevent>
+    </div>
    <div class="h-20 w-20 p-4 bg-gray-200 bg-opacity-50 rounded justify-center items-center flex hover:cursor-pointer" @click="triggerFileInput" @drop.prevent="onDrop" @dragover.prevent>
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 invert" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
      </svg>
--- a/src/components/gameMaster/assetManager/partials/tile/TileDetails.vue
+++ b/src/components/gameMaster/assetManager/partials/tile/TileDetails.vue
@ -1,12 +1,9 @@
 <template>
  <div class="h-full overflow-auto">
-    <div class="relative p-2.5 flex flex-col items-center justify-between h-72">
+    <div class="relative p-2.5 flex flex-col items-center justify-center h-72 rounded-md default-border bg-gray">
      <div class="filler"></div>
      <img class="max-h-72" :src="`${config.server_endpoint}/assets/tiles/${selectedTile?.id}.png`" :alt="'Tile ' + selectedTile?.id" />
      <button class="btn-red px-4 py-1.5 min-w-24" type="button" @click.prevent="deleteTile">Delete</button>
      <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
    </div>
-    <div class="m-2.5 p-2.5 block">
+    <div class="mt-5 block">
      <form class="flex gap-2.5 flex-wrap" @submit.prevent="saveTile">
        <div class="form-field-full">
          <label for="name">Name</label>
@ -16,20 +13,23 @@
          <label for="origin-x">Tags</label>
          <ChipsInput v-model="tileTags" @update:modelValue="tileTags = $event" />
        </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="deleteTile">Delete</button>
        </div>
      </form>
    </div>
  </div>
 </template>
 <script setup lang="ts">
-import type { Tile } from '@/types'
+import config from '@/application/config'
-import { computed, onBeforeUnmount, onMounted, ref, toRaw, watch } from 'vue'
+import type { Tile } from '@/application/types'
 import { useAssetManagerStore } from '@/stores/assetManagerStore'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import { useGameStore } from '@/stores/gameStore'
 import config from '@/config'
 import ChipsInput from '@/components/forms/ChipsInput.vue'
 import { useAssetManagerStore } from '@/stores/assetManagerStore'
 import { useGameStore } from '@/stores/gameStore'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import { computed, onBeforeUnmount, onMounted, ref, toRaw, watch } from 'vue'
 const gameStore = useGameStore()
 const assetManagerStore = useAssetManagerStore()
--- a/src/components/gameMaster/assetManager/partials/tile/TileList.vue
+++ b/src/components/gameMaster/assetManager/partials/tile/TileList.vue
@ -1,39 +1,39 @@
 <template>
-  <div class="relative p-2.5 flex items-center gap-x-2.5">
+  <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="upload-asset" class="bg-cyan text-white border border-solid border-white/25 rounded drop-shadow-20 p-2 inline-flex items-center justify-center hover:bg-cyan-800 hover:cursor-pointer">
+    <label for="upload-asset" class="bg-cyan text-white border border-solid border-white/25 rounded p-2.5 inline-flex items-center justify-center hover:bg-cyan-800 hover:cursor-pointer">
      <input class="hidden" id="upload-asset" ref="tileUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
      </svg>
    </label>
    <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
  </div>
-  <div v-bind="containerProps" class="overflow-y-auto relative" @scroll="onScroll">
+  <div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
    <div v-bind="wrapperProps" ref="elementToScroll">
-      <a v-for="{ data: tile } in list" :key="tile.id" class="relative p-2.5 cursor-pointer block" :class="{ 'bg-cyan/80': assetManagerStore.selectedTile?.id === tile.id }" @click="assetManagerStore.setSelectedTile(tile)">
+      <a v-for="{ data: tile } in list" :key="tile.id" class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group" :class="{ 'bg-cyan': assetManagerStore.selectedTile?.id === tile.id }" @click="assetManagerStore.setSelectedTile(tile)">
        <div class="flex items-center gap-2.5">
          <div class="h-7 w-16 max-w-16 flex justify-center">
            <img class="h-7" :src="`${config.server_endpoint}/assets/tiles/${tile.id}.png`" alt="Tile" />
          </div>
-          <span :class="{ 'text-white': assetManagerStore.selectedTile?.id === tile.id }">{{ tile.name }}</span>
+          <span class="group-hover:text-white" :class="{ 'text-white': assetManagerStore.selectedTile?.id === tile.id }">{{ tile.name }}</span>
        </div>
        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
      </a>
    </div>
-    <button class="left-[calc(50%_-_60px)] fixed bottom-2.5 min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
+    <div class="absolute w-12 h-12 bottom-2.5 right-2.5">
-      <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 class="fixed min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
        <img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
      </button>
    </div>
  </div>
 </template>
 <script setup lang="ts">
-import config from '@/config'
+import config from '@/application/config'
-import { useGameStore } from '@/stores/gameStore'
+import type { Tile } from '@/application/types'
 import { onMounted, ref, computed } from 'vue'
 import { useAssetManagerStore } from '@/stores/assetManagerStore'
-import type { Tile } from '@/types'
+import { useGameStore } from '@/stores/gameStore'
 import { useVirtualList } from '@vueuse/core'
 import { computed, onMounted, ref } from 'vue'
 const gameStore = useGameStore()
 const tileUploadField = ref(null)
--- a/src/components/gameMaster/zoneEditor/ZoneEditor.vue
+++ b/src/components/gameMaster/zoneEditor/ZoneEditor.vue
@ -14,20 +14,20 @@
 </template>
 <script setup lang="ts">
-import { onUnmounted, ref } from 'vue'
+import { type Zone } from '@/application/types'
-import { useGameStore } from '@/stores/gameStore'
+import ObjectList from '@/components/gameMaster/zoneEditor/partials/ObjectList.vue'
-import { useZoneEditorStore } from '@/stores/zoneEditorStore'
+import TeleportModal from '@/components/gameMaster/zoneEditor/partials/TeleportModal.vue'
-import { type Zone } from '@/types'
+import TileList from '@/components/gameMaster/zoneEditor/partials/TileList.vue'
 // Components
 import Toolbar from '@/components/gameMaster/zoneEditor/partials/Toolbar.vue'
 import TileList from '@/components/gameMaster/zoneEditor/partials/TileList.vue'
 import ObjectList from '@/components/gameMaster/zoneEditor/partials/ObjectList.vue'
 import ZoneSettings from '@/components/gameMaster/zoneEditor/partials/ZoneSettings.vue'
 import ZoneList from '@/components/gameMaster/zoneEditor/partials/ZoneList.vue'
-import TeleportModal from '@/components/gameMaster/zoneEditor/partials/TeleportModal.vue'
+import ZoneSettings from '@/components/gameMaster/zoneEditor/partials/ZoneSettings.vue'
 import ZoneTiles from '@/components/gameMaster/zoneEditor/zonePartials/ZoneTiles.vue'
 import ZoneObjects from '@/components/gameMaster/zoneEditor/zonePartials/ZoneObjects.vue'
 import ZoneEventTiles from '@/components/gameMaster/zoneEditor/zonePartials/ZoneEventTiles.vue'
 import ZoneObjects from '@/components/gameMaster/zoneEditor/zonePartials/ZoneObjects.vue'
 import ZoneTiles from '@/components/gameMaster/zoneEditor/zonePartials/ZoneTiles.vue'
 import { useGameStore } from '@/stores/gameStore'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import { onUnmounted, ref } from 'vue'
 const gameStore = useGameStore()
 const zoneEditorStore = useZoneEditorStore()
--- a/src/components/gameMaster/zoneEditor/partials/CreateZone.vue
+++ b/src/components/gameMaster/zoneEditor/partials/CreateZone.vue
@ -1,5 +1,5 @@
 <template>
-  <Modal :isModalOpen="true" @modal:close="() => zoneEditorStore.toggleCreateZoneModal()" :modal-width="300" :modal-height="420" :is-resizable="false" :disable-bg-texture="true">
+  <Modal :isModalOpen="true" @modal:close="() => zoneEditorStore.toggleCreateZoneModal()" :modal-width="300" :modal-height="420" :is-resizable="false" :bg-style="'none'">
    <template #modalHeader>
      <h3 class="m-0 font-medium shrink-0 text-white">Create new zone</h3>
    </template>
@ -36,11 +36,11 @@
 </template>
 <script setup lang="ts">
-import { ref } from 'vue'
+import type { Zone } from '@/application/types'
 import Modal from '@/components/utilities/Modal.vue'
 import { useGameStore } from '@/stores/gameStore'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
-import type { Zone } from '@/types'
+import { ref } from 'vue'
 const gameStore = useGameStore()
 const zoneEditorStore = useZoneEditorStore()
--- a/src/components/gameMaster/zoneEditor/partials/ObjectList.vue
+++ b/src/components/gameMaster/zoneEditor/partials/ObjectList.vue
@ -1,5 +1,5 @@
 <template>
-  <Modal :isModalOpen="zoneEditorStore.isObjectListModalShown" :modal-width="645" :modal-height="260" @modal:close="() => (zoneEditorStore.isObjectListModalShown = false)" :disable-bg-texture="true">
+  <Modal :isModalOpen="zoneEditorStore.isObjectListModalShown" :modal-width="645" :modal-height="260" @modal:close="() => (zoneEditorStore.isObjectListModalShown = false)" :bg-style="'none'">
    <template #modalHeader>
      <h3 class="text-lg text-white">Objects</h3>
    </template>
@ -41,12 +41,12 @@
 </template>
 <script setup lang="ts">
-import config from '@/config'
+import config from '@/application/config'
-import { ref, onMounted, computed } from 'vue'
+import type { Object, ZoneObject } from '@/application/types'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import { useGameStore } from '@/stores/gameStore'
 import Modal from '@/components/utilities/Modal.vue'
-import type { Object, ZoneObject } from '@/types'
+import { useGameStore } from '@/stores/gameStore'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import { computed, onMounted, ref } from 'vue'
 const gameStore = useGameStore()
 const isModalOpen = ref(false)
--- a/src/components/gameMaster/zoneEditor/partials/SelectedZoneObject.vue
+++ b/src/components/gameMaster/zoneEditor/partials/SelectedZoneObject.vue
@ -11,7 +11,7 @@
 </template>
 <script setup lang="ts">
-import type { ZoneObject } from '@/types'
+import type { ZoneObject } from '@/application/types'
 const props = defineProps<{
  zoneObject: ZoneObject
--- a/src/components/gameMaster/zoneEditor/partials/TeleportModal.vue
+++ b/src/components/gameMaster/zoneEditor/partials/TeleportModal.vue
@ -1,5 +1,5 @@
 <template>
-  <Modal :is-modal-open="showTeleportModal" @modal:close="() => zoneEditorStore.setTool('move')" :modal-width="300" :modal-height="350" :is-resizable="false" :disable-bg-texture="true">
+  <Modal :is-modal-open="showTeleportModal" @modal:close="() => zoneEditorStore.setTool('move')" :modal-width="300" :modal-height="350" :is-resizable="false" :bg-style="'none'">
    <template #modalHeader>
      <h3 class="m-0 font-medium shrink-0 text-white">Teleport settings</h3>
    </template>
@ -39,11 +39,11 @@
 </template>
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue'
+import type { Zone } from '@/application/types'
 import Modal from '@/components/utilities/Modal.vue'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import { useGameStore } from '@/stores/gameStore'
-import type { Zone } from '@/types'
+import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import { computed, onMounted, ref, watch } from 'vue'
 const showTeleportModal = computed(() => zoneEditorStore.tool === 'pencil' && zoneEditorStore.drawMode === 'teleport')
 const zoneEditorStore = useZoneEditorStore()
--- a/src/components/gameMaster/zoneEditor/partials/TileList.vue
+++ b/src/components/gameMaster/zoneEditor/partials/TileList.vue
@ -1,5 +1,5 @@
 <template>
-  <Modal :isModalOpen="zoneEditorStore.isTileListModalShown" :modal-width="645" :modal-height="600" @modal:close="() => (zoneEditorStore.isTileListModalShown = false)" :disable-bg-texture="true">
+  <Modal :isModalOpen="zoneEditorStore.isTileListModalShown" :modal-width="645" :modal-height="600" @modal:close="() => (zoneEditorStore.isTileListModalShown = false)" :bg-style="'none'">
    <template #modalHeader>
      <h3 class="text-lg text-white">Tiles</h3>
    </template>
@ -81,12 +81,12 @@
 </template>
 <script setup lang="ts">
-import config from '@/config'
+import config from '@/application/config'
-import { ref, onMounted, computed } from 'vue'
+import type { Tile } from '@/application/types'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import { useGameStore } from '@/stores/gameStore'
 import Modal from '@/components/utilities/Modal.vue'
-import type { Tile } from '@/types'
+import { useGameStore } from '@/stores/gameStore'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import { computed, onMounted, ref } from 'vue'
 const gameStore = useGameStore()
 const isModalOpen = ref(false)
--- a/src/components/gameMaster/zoneEditor/partials/Toolbar.vue
+++ b/src/components/gameMaster/zoneEditor/partials/Toolbar.vue
@ -82,9 +82,9 @@
 </template>
 <script setup lang="ts">
 import { onBeforeUnmount, onMounted, ref } from 'vue'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import { onClickOutside } from '@vueuse/core'
 import { onBeforeUnmount, onMounted, ref } from 'vue'
 const zoneEditorStore = useZoneEditorStore()
--- a/src/components/gameMaster/zoneEditor/partials/ZoneList.vue
+++ b/src/components/gameMaster/zoneEditor/partials/ZoneList.vue
@ -1,6 +1,6 @@
 <template>
  <CreateZone v-if="zoneEditorStore.isCreateZoneModalShown" />
-  <Modal :is-modal-open="zoneEditorStore.isZoneListModalShown" @modal:close="() => zoneEditorStore.toggleZoneListModal()" :is-resizable="false" :modal-width="300" :modal-height="360" :disable-bg-texture="true">
+  <Modal :is-modal-open="zoneEditorStore.isZoneListModalShown" @modal:close="() => zoneEditorStore.toggleZoneListModal()" :is-resizable="false" :modal-width="300" :modal-height="360" :bg-style="'none'">
    <template #modalHeader>
      <h3 class="text-lg text-white">Zones</h3>
    </template>
@ -26,12 +26,12 @@
 </template>
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import type { Zone } from '@/application/types'
 import { useGameStore } from '@/stores/gameStore'
 import Modal from '@/components/utilities/Modal.vue'
 import type { Zone } from '@/types'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import CreateZone from '@/components/gameMaster/zoneEditor/partials/CreateZone.vue'
 import Modal from '@/components/utilities/Modal.vue'
 import { useGameStore } from '@/stores/gameStore'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import { onMounted } from 'vue'
 const gameStore = useGameStore()
 const zoneEditorStore = useZoneEditorStore()
--- a/src/components/gameMaster/zoneEditor/partials/ZoneSettings.vue
+++ b/src/components/gameMaster/zoneEditor/partials/ZoneSettings.vue
@ -1,5 +1,5 @@
 <template>
-  <Modal :is-modal-open="zoneEditorStore.isSettingsModalShown" @modal:close="() => zoneEditorStore.toggleSettingsModal()" :modal-width="600" :modal-height="350" :disable-bg-texture="true">
+  <Modal :is-modal-open="zoneEditorStore.isSettingsModalShown" @modal:close="() => zoneEditorStore.toggleSettingsModal()" :modal-width="600" :modal-height="430" :bg-style="'none'">
    <template #modalHeader>
      <h3 class="m-0 font-medium shrink-0 text-white">Zone settings</h3>
    </template>
@ -47,9 +47,9 @@
 </template>
 <script setup>
 import { ref, watch } from 'vue'
 import Modal from '@/components/utilities/Modal.vue'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import { ref, watch } from 'vue'
 const zoneEditorStore = useZoneEditorStore()
 const screen = ref('settings')
--- a/src/components/gameMaster/zoneEditor/zonePartials/ZoneEventTiles.vue
+++ b/src/components/gameMaster/zoneEditor/zonePartials/ZoneEventTiles.vue
@ -3,11 +3,11 @@
 </template>
 <script setup lang="ts">
-import { type ZoneEventTile, ZoneEventTileType } from '@/types'
+import { ZoneEventTileType, type ZoneEventTile } from '@/application/types'
 import { uuidv4 } from '@/application/utilities'
 import { getTile, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import { Image, useScene } from 'phavuer'
 import { getTile, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
 import { uuidv4 } from '@/utilities'
 import { onMounted, onUnmounted } from 'vue'
 const scene = useScene()
--- a/src/components/gameMaster/zoneEditor/zonePartials/ZoneObject.vue
+++ b/src/components/gameMaster/zoneEditor/zonePartials/ZoneObject.vue
@ -3,12 +3,12 @@
 </template>
 <script setup lang="ts">
-import { computed } from 'vue'
+import type { AssetDataT, ZoneObject } from '@/application/types'
 import { Image, useScene } from 'phavuer'
 import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
 import { loadTexture } from '@/composables/gameComposable'
-import type { AssetDataT, ZoneObject } from '@/types'
+import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
 import { useGameStore } from '@/stores/gameStore'
 import { Image, useScene } from 'phavuer'
 import { computed } from 'vue'
 const props = defineProps<{
  tilemap: Phaser.Tilemaps.Tilemap
--- a/src/components/gameMaster/zoneEditor/zonePartials/ZoneObjects.vue
+++ b/src/components/gameMaster/zoneEditor/zonePartials/ZoneObjects.vue
@ -4,14 +4,14 @@
 </template>
 <script setup lang="ts">
-import { uuidv4 } from '@/utilities'
+import type { ZoneObject as ZoneObjectT } from '@/application/types'
-import { getTile } from '@/composables/zoneComposable'
+import { uuidv4 } from '@/application/utilities'
 import { useScene } from 'phavuer'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import SelectedZoneObject from '@/components/gameMaster/zoneEditor/partials/SelectedZoneObject.vue'
 import { onMounted, onUnmounted, ref, watch } from 'vue'
 import ZoneObject from '@/components/gameMaster/zoneEditor/zonePartials/ZoneObject.vue'
-import type { ZoneObject as ZoneObjectT } from '@/types'
+import { getTile } from '@/composables/zoneComposable'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import { useScene } from 'phavuer'
 import { onMounted, onUnmounted, ref, watch } from 'vue'
 const scene = useScene()
 const zoneEditorStore = useZoneEditorStore()
--- a/src/components/gameMaster/zoneEditor/zonePartials/ZoneTiles.vue
+++ b/src/components/gameMaster/zoneEditor/zonePartials/ZoneTiles.vue
@ -3,14 +3,14 @@
 </template>
 <script setup lang="ts">
-import config from '@/config'
+import config from '@/application/config'
-import { useScene } from 'phavuer'
+import type { AssetDataT } from '@/application/types'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import { onMounted, onUnmounted, watch } from 'vue'
 import { createTileArray, getTile, placeTile, setLayerTiles } from '@/composables/zoneComposable'
 import Controls from '@/components/utilities/Controls.vue'
 import { createTileArray, getTile, placeTile, setLayerTiles } from '@/composables/zoneComposable'
 import { useGameStore } from '@/stores/gameStore'
-import type { AssetDataT } from '@/types'
+import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import { useScene } from 'phavuer'
 import { onMounted, onUnmounted, watch } from 'vue'
 const emit = defineEmits(['tileMap:create'])
--- a/src/components/gui/CharacterProfile.vue
+++ b/src/components/gui/CharacterProfile.vue
@ -1,5 +1,6 @@
 <template>
-  <div class="relative" v-if="gameStore.uiSettings.isCharacterProfileOpen" :style="modalStyle">
+  <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" />
      <img src="/assets/ui-elements/profile-ui-box-inner.svg" class="absolute left-2 bottom-2 w-[calc(100%_-_16px)] h-[calc(100%_-_40px)]" />
      <div @mousedown="startDrag" class="cursor-move px-5 py-2.5 flex justify-between items-center relative">
@ -21,35 +22,35 @@
          </div>
          <div class="flex justify-between">
            <div class="flex flex-col gap-0.5">
-            <div class="w-9 h-9 border border-solid border-gray-500 rounded-sm bg-gray relative hover:bg-gray-600">
+              <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 border border-solid border-gray-500 rounded-sm bg-gray relative hover:bg-gray-600">
+              <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 border border-solid border-gray-500 rounded-sm bg-gray relative hover:bg-gray-600">
+                <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 border border-solid border-gray-500 rounded-sm bg-gray relative hover:bg-gray-600">
+                <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" />
            <div class="flex flex-col items-end gap-0.5">
-            <div class="w-9 h-9 border border-solid border-gray-500 rounded-sm bg-gray relative hover:bg-gray-600">
+              <div class="w-9 h-9 default-border rounded-sm bg-gray relative hover:bg-gray-600">
-              <img class="absolute w-6 h-6 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" src="/assets/icons/profile/helmet.svg" />
+                <img class="w-6 h-6 center-element" src="/assets/icons/profile/helmet.svg" />
              </div>
-            <div class="w-9 h-9 border border-solid border-gray-500 rounded-sm bg-gray relative hover:bg-gray-600">
+              <div class="w-9 h-9 default-border rounded-sm bg-gray relative hover:bg-gray-600">
-              <img class="absolute w-6 h-6 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" src="/assets/icons/profile/chestplate.svg" />
+                <img class="w-6 h-6 center-element" src="/assets/icons/profile/chestplate.svg" />
              </div>
              <div class="flex gap-0.5 items-end">
-              <div class="w-6 h-6 border border-solid border-gray-500 rounded-sm bg-gray relative hover:bg-gray-600">
+                <div class="w-6 h-6 default-border rounded-sm bg-gray relative hover:bg-gray-600">
-                <img class="absolute w-4 h-4 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" src="/assets/icons/profile/boots.svg" />
+                  <img class="w-4 h-4 center-element" src="/assets/icons/profile/boots.svg" />
                </div>
-              <div class="w-9 h-9 border border-solid border-gray-500 rounded-sm bg-gray relative hover:bg-gray-600">
+                <div class="w-9 h-9 default-border rounded-sm bg-gray relative hover:bg-gray-600">
-                <img class="absolute w-6 h-6 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" src="/assets/icons/profile/legs.svg" />
+                  <img class="w-6 h-6 center-element" src="/assets/icons/profile/legs.svg" />
                </div>
              </div>
            </div>
@ -109,15 +110,16 @@
          </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 border border-solid border-gray-500 rounded-sm bg-gray relative hover:bg-gray-600"></div>
+          <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 { onMounted, onUnmounted, ref, watch, computed } from 'vue'
 import { useGameStore } from '@/stores/gameStore'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 const gameStore = useGameStore()
--- a/src/components/gui/Chat.vue
+++ b/src/components/gui/Chat.vue
@ -21,12 +21,12 @@
 </template>
 <script setup lang="ts">
-import { onBeforeUnmount, ref, nextTick } from 'vue'
+import type { Chat } from '@/application/types'
 import { onClickOutside } from '@vueuse/core'
 import { useGameStore } from '@/stores/gameStore'
 import type { Chat } from '@/types'
 import { useZoneStore } from '@/stores/zoneStore'
 import { onClickOutside, useFocus } from '@vueuse/core'
 import { useScene } from 'phavuer'
 import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
 const scene = useScene()
 const gameStore = useGameStore()
@ -37,11 +37,19 @@ const chats = ref([] as Chat[])
 const chatWindow = ref<HTMLElement | null>(null)
 const chatInput = ref<HTMLElement | null>(null)
-onClickOutside(chatInput, event => unfocusChat(event, chatInput.value as HTMLElement))
+const { focused } = useFocus(chatInput)
 function focusChat(event: KeyboardEvent) {
  if (event.key === 'Enter' && !focused.value) {
    focused.value = true
  }
 }
 onClickOutside(chatInput, (event) => unfocusChat(event, chatInput.value as HTMLElement))
 function unfocusChat(event: Event, targetElement: HTMLElement) {
  if (!(event.target instanceof Node) || !targetElement.contains(event.target)) {
-    targetElement.blur();
+    targetElement.blur()
  }
 }
@ -71,7 +79,7 @@ const scrollToBottom = () => {
  })
 }
-gameStore.connection?.on('chat:message', (data: Chat) => {
+gameStore.connection!.on('chat:message', (data: Chat) => {
  chats.value.push(data)
  scrollToBottom()
@ -128,7 +136,12 @@ gameStore.connection?.on('chat:message', (data: Chat) => {
 })
 scrollToBottom()
 onMounted(() => {
  addEventListener('keydown', focusChat)
 })
 onBeforeUnmount(() => {
  gameStore.connection?.off('chat:message')
  removeEventListener('keydown', focusChat)
 })
 </script>
--- a/src/components/gui/Clock.vue
+++ b/src/components/gui/Clock.vue
@ -11,7 +11,7 @@ import { onUnmounted } from 'vue'
 const gameStore = useGameStore()
 // Listen for new date from socket
-gameStore.connection?.on('date', (data: Date) => {
+gameStore.connection!.on('date', (data: Date) => {
  gameStore.world.date = new Date(data)
 })
--- a/src/components/gui/Menu.vue
+++ b/src/components/gui/Menu.vue
@ -15,7 +15,7 @@
        <div class="group-hover:block absolute -left-2 bg-gray-500 h-3.5 w-2 [clip-path:polygon(100%_0,_0_50%,_100%_100%)] top-1/2 -translate-y-1/2 hidden"></div>
      </div>
      <a class="group-hover:cursor-pointer bg-[url('/assets/ui-elements/button-ui-box-textured.svg')] bg-no-repeat block w-[42px] h-[42px] relative">
-        <img class="group-hover:drop-shadow-default w-8 h-8 m-[5px] object-contain" draggable="false" src="/assets/avatar/default/head.png" />
+        <img class="group-hover:drop-shadow-default w-8 h-8 m-[5px] object-contain" draggable="false" src="/assets/placeholders/head.png" />
        <p class="absolute bottom-0 -right-1.5 m-0 max-w-4 font-ui z-10 text-white text-[12px] leading-[6px] drop-shadow-pixel"><span class="font-ui text-white text-[8px] ml-0.5">LVL</span> {{ characterLevel }}</p>
      </a>
    </li>
@ -24,7 +24,7 @@
        <p class="absolute w-full bottom-0 m-0 text-xs leading-6 text-white">Open Chat</p>
        <div class="group-hover:block absolute -left-2 bg-gray-500 h-3.5 w-2 [clip-path:polygon(100%_0,_0_50%,_100%_100%)] top-1/2 -translate-y-1/2 hidden"></div>
      </div>
-      <a class="group-hover:bg-gray-800 bg-gray-900 group-hover:cursor-pointer border border-b-4 border-solid rounded border-gray-500 block w-[34px] h-[31px]">
+      <a class="group-hover:bg-gray-800 bg-gray-900 group-hover:cursor-pointer border-2 border-solid rounded border-gray-500 block w-[34px] h-[31px]">
        <img class="group-hover:drop-shadow-default w-6 h-6 m-[5px] object-contain" draggable="false" src="/assets/icons/ingameUI/chat-icon.svg" />
      </a>
    </li>
@ -33,7 +33,7 @@
        <p class="absolute w-full bottom-0 m-0 text-xs leading-6 text-white">World map</p>
        <div class="group-hover:block absolute -left-2 bg-gray-500 h-3.5 w-2 [clip-path:polygon(100%_0,_0_50%,_100%_100%)] top-1/2 -translate-y-1/2 hidden"></div>
      </div>
-      <a class="group-hover:bg-gray-800 bg-gray-900 group-hover:cursor-pointer border border-b-4 border-solid rounded border-gray-500 block w-[34px] h-[31px]">
+      <a class="group-hover:bg-gray-800 bg-gray-900 group-hover:cursor-pointer border-2 border-solid rounded border-gray-500 block w-[34px] h-[31px]">
        <img class="group-hover:drop-shadow-default w-6 h-6 m-[5px] object-contain" draggable="false" src="/assets/icons/ingameUI/map-icon.svg" />
      </a>
    </li>
@ -42,7 +42,7 @@
        <p class="absolute w-full bottom-0 m-0 text-xs leading-6 text-white">Users</p>
        <div class="group-hover:block absolute -left-2 bg-gray-500 h-3.5 w-2 [clip-path:polygon(100%_0,_0_50%,_100%_100%)] top-1/2 -translate-y-1/2 hidden"></div>
      </div>
-      <a class="group-hover:bg-gray-800 bg-gray-900 group-hover:cursor-pointer border border-b-4 border-solid rounded border-gray-500 block w-[34px] h-[31px]">
+      <a class="group-hover:bg-gray-800 bg-gray-900 group-hover:cursor-pointer border-2 border-solid rounded border-gray-500 block w-[34px] h-[31px]">
        <img class="group-hover:drop-shadow-default w-6 h-6 m-[5px] object-contain" draggable="false" src="/assets/icons/ingameUI/socials-icon.svg" />
      </a>
    </li>
--- a/src/components/gui/Minimap.vue
+++ b/src/components/gui/Minimap.vue
@ -1,15 +1,15 @@
 <template>
  <div class="absolute top-4 right-4 hidden lg:block">
-    <div class="w-40 h-40 rounded-full border border-solid border-gray-500 bg-[url('/assets/ui-texture.png')] bg-no-repeat">
+    <div class="w-40 h-40 rounded-full default-border bg-[url('/assets/ui-texture.png')] bg-no-repeat">
      <div class="w-40 h-40 rounded-full shadow-inner"></div>
    </div>
    <div class="absolute -bottom-3 left-1/2 -translate-x-1/2 flex gap-1">
      <button class="w-6 h-6 relative p-0">
-        <img class="absolute w-3 h-3 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" src="/assets/icons/plus-icon.svg" />
+        <img class="w-3 h-3 center-element" src="/assets/icons/plus-icon.svg" />
        <img class="w-full h-full" src="/assets/ui-elements/button-ui-box-textured.svg" />
      </button>
      <button class="w-6 h-6 relative p-0">
-        <img class="absolute w-3 h-3 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" src="/assets/icons/minus-icon.svg" />
+        <img class="w-3 h-3 center-element" src="/assets/icons/minus-icon.svg" />
        <img class="w-full h-full" src="/assets/ui-elements/button-ui-box-textured.svg" />
      </button>
    </div>
--- a/src/components/gui/UserPanel.vue
+++ b/src/components/gui/UserPanel.vue
@ -1,6 +1,6 @@
 <template>
  <div class="absolute z-50 w-full h-dvh top-0 left-0 bg-black/60" v-show="false">
-    <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 max-w-[875px] max-h-[600px] h-full w-[80%] bg-gray-700 border-solid border-2 border-gray-500 rounded-md z-50 flex flex-col backdrop-blur-sm shadow-lg">
+    <div class="center-element max-w-[875px] max-h-[600px] h-full w-[80%] bg-gray border-solid border-2 border-gray-500 rounded-md z-50 flex flex-col backdrop-blur-sm shadow-lg">
      <div class="p-2.5 flex max-sm:flex-wrap justify-between items-center gap-5 border-solid border-0 border-b border-gray-500">
        <h3 class="m-0 font-medium shrink-0">Game menu</h3>
        <div class="hidden sm:flex gap-1.5 flex-wrap">
@ -30,12 +30,12 @@
 </template>
 <script setup lang="ts">
 import { ref } from 'vue'
 import { useGameStore } from '@/stores/gameStore'
 import Inventory from '@/components/gui/partials/Inventory.vue'
 import Equipment from '@/components/gui/partials/Equipment.vue'
 import CharacterScreen from '@/components/gui/partials/CharacterScreen.vue'
 import Equipment from '@/components/gui/partials/Equipment.vue'
 import Inventory from '@/components/gui/partials/Inventory.vue'
 import Settings from '@/components/gui/partials/Settings.vue'
 import { useGameStore } from '@/stores/gameStore'
 import { ref } from 'vue'
 const gameStore = useGameStore()
 let userPanelScreen = ref('inventory')
--- a/src/components/gui/partials/Equipment.vue
+++ b/src/components/gui/partials/Equipment.vue
@ -14,47 +14,47 @@
          <div class="flex gap-3 justify-center">
            <!-- Helmet -->
            <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md aspect-square h-11 w-11 relative hover:bg-gray-200">
-              <img src="/assets/icons/inventory/helmet.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
+              <img src="/assets/icons/inventory/helmet.svg" class="center-element w-11/12 opacity-20" />
            </div>
            <!-- Head charm -->
            <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md aspect-square h-11 w-11 relative hover:bg-gray-200">
-              <img src="/assets/icons/inventory/head_charm.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
+              <img src="/assets/icons/inventory/head_charm.svg" class="center-element w-11/12 opacity-20" />
            </div>
          </div>
          <div class="flex gap-3 justify-center">
            <!-- Bracers -->
            <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md w-11 h-[104px] relative hover:bg-gray-200">
-              <img src="/assets/icons/inventory/bracers.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
+              <img src="/assets/icons/inventory/bracers.svg" class="center-element w-11/12 opacity-20" />
            </div>
            <!-- Chestplate -->
            <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md aspect-square w-[104px] h-[104px] relative hover:bg-gray-200">
-              <img src="/assets/icons/inventory/chestplate.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-10/12 opacity-20" />
+              <img src="/assets/icons/inventory/chestplate.svg" class="center-element w-10/12 opacity-20" />
            </div>
            <!-- Primary Weapon -->
            <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md w-11 h-[104px] self-stretch justify-self-stretch relative hover:bg-gray-200">
-              <img src="/assets/icons/inventory/primary_weapon.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
+              <img src="/assets/icons/inventory/primary_weapon.svg" class="center-element w-11/12 opacity-20" />
            </div>
          </div>
          <div class="flex gap-3 justify-center">
            <!-- Legs -->
            <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md w-11 h-[104px] self-stretch justify-self-stretch relative hover:bg-gray-200">
-              <img src="/assets/icons/inventory/legs.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
+              <img src="/assets/icons/inventory/legs.svg" class="center-element w-11/12 opacity-20" />
            </div>
            <div class="flex flex-col gap-3">
              <!-- Belt/pouch -->
              <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md aspect-square h-11 w-11 self-stretch justify-self-stretch relative hover:bg-gray-200">
-                <img src="/assets/icons/inventory/pouch.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
+                <img src="/assets/icons/inventory/pouch.svg" class="center-element w-11/12 opacity-20" />
              </div>
              <!-- Boots -->
              <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md aspect-square h-11 w-11 self-stretch justify-self-stretch relative hover:bg-gray-200">
-                <img src="/assets/icons/inventory/boots.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
+                <img src="/assets/icons/inventory/boots.svg" class="center-element w-11/12 opacity-20" />
              </div>
            </div>
          </div>
--- a/src/components/gui/partials/Settings.vue
+++ b/src/components/gui/partials/Settings.vue
@ -33,8 +33,8 @@
 </template>
 <script setup lang="ts">
 import { ref } from 'vue'
 import CharacterSettings from '@/components/gui/partials/settings/CharacterSettings.vue'
 import { ref } from 'vue'
 let settingCategory = ref('character')
 </script>
--- a/src/components/login/LoginForm.vue
+++ b/src/components/login/LoginForm.vue
@ -1,5 +1,5 @@
 <template>
-  <form @submit.prevent="loginFunc" class="relative px-6 py-11">
+  <form @submit.prevent="submit" class="relative px-6 py-[70px]">
    <div class="flex flex-col gap-5 p-2 mb-8 relative">
      <div class="w-full grid gap-3 relative">
        <input class="input-field xs:min-w-[350px] min-w-64" id="username-login" v-model="username" type="text" name="username" placeholder="Username" required autofocus />
@ -7,7 +7,7 @@
          <input class="input-field xs:min-w-[350px] min-w-64" id="password-login" v-model="password" :type="showPassword ? 'text' : 'password'" name="password" placeholder="Password" required />
          <button type="button" @click.prevent="showPassword = !showPassword" :class="{ 'eye-open': showPassword }" class="bg-[url('/assets/icons/eye.svg')] p-0 absolute right-3 w-5 h-4 top-1/2 -translate-y-1/2 bg-no-repeat bg-center"></button>
        </div>
-        <span v-if="loginError" class="text-red-200 text-xs absolute top-full mt-1">{{ loginError }}</span>
+        <span v-if="formError" class="text-red-200 text-xs absolute top-full mt-1">{{ formError }}</span>
      </div>
      <button @click.stop="() => emit('openResetPasswordModal')" type="button" class="inline-flex self-end p-0 text-cyan-300 text-base">Forgot password?</button>
      <button class="btn-cyan px-0 xs:w-full" type="submit">Play now</button>
@ -26,17 +26,17 @@
 </template>
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 import { login } from '@/services/authentication'
 import { useGameStore } from '@/stores/gameStore'
 import { useCookies } from '@vueuse/integrations/useCookies'
 import { onMounted, ref } from 'vue'
 const emit = defineEmits(['openResetPasswordModal', 'switchToRegister'])
 const gameStore = useGameStore()
 const username = ref('')
 const password = ref('')
-const loginError = ref('')
+const formError = ref('')
 const showPassword = ref(false)
 // automatic login because of development
@ -48,10 +48,10 @@ onMounted(async () => {
  }
 })
-async function loginFunc() {
+async function submit() {
  // check if username and password are valid
  if (username.value === '' || password.value === '') {
-    loginError.value = 'Please enter a valid username and password'
+    formError.value = 'Please enter a valid username and password'
    return
  }
@ -59,7 +59,7 @@ async function loginFunc() {
  const response = await login(username.value, password.value)
  if (response.success === undefined) {
-    loginError.value = response.error
+    formError.value = response.error
    return
  }
  gameStore.setToken(response.token)
--- a/src/components/login/NewPasswordForm.vue
+++ b/src/components/login/NewPasswordForm.vue
@ -22,10 +22,10 @@
 </template>
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 import { newPassword } from '@/services/authentication'
 import { useGameStore } from '@/stores/gameStore'
 import { useCookies } from '@vueuse/integrations/useCookies'
 import { onMounted, ref } from 'vue'
 const emit = defineEmits(['switchToLogin'])
--- a/src/components/login/RegisterForm.vue
+++ b/src/components/login/RegisterForm.vue
@ -1,5 +1,5 @@
 <template>
-  <form @submit.prevent="registerFunc" class="relative px-6 py-11">
+  <form @submit.prevent="submit" class="relative px-6 py-16">
    <div class="flex flex-col gap-5 p-2 mb-8 relative">
      <div class="w-full grid gap-3 relative">
        <input class="input-field xs:min-w-[350px] min-w-64" id="username-register" v-model="username" type="text" name="username" placeholder="Username" required autofocus />
@ -8,7 +8,7 @@
          <input class="input-field xs:min-w-[350px] min-w-64" id="password-register" v-model="password" :type="showPassword ? 'text' : 'password'" name="password" placeholder="Password" required />
          <button type="button" @click.prevent="showPassword = !showPassword" :class="{ 'eye-open': showPassword }" class="bg-[url('/assets/icons/eye.svg')] p-0 absolute right-3 w-4 h-3 top-1/2 -translate-y-1/2 bg-no-repeat"></button>
        </div>
-        <span v-if="loginError" class="text-red-200 text-xs -mt-2">{{ loginError }}</span>
+        <span v-if="formError" class="text-red-200 text-xs -mt-2">{{ formError }}</span>
      </div>
      <button class="btn-cyan xs:w-full" type="submit">Register now</button>
@ -26,10 +26,10 @@
 </template>
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 import { login, register } from '@/services/authentication'
 import { useGameStore } from '@/stores/gameStore'
 import { useCookies } from '@vueuse/integrations/useCookies'
 import { onMounted, ref } from 'vue'
 const emit = defineEmits(['switchToLogin'])
@ -37,7 +37,7 @@ const gameStore = useGameStore()
 const username = ref('')
 const password = ref('')
 const email = ref('')
-const loginError = ref('')
+const formError = ref('')
 const showPassword = ref(false)
 // automatic login because of development
@ -49,34 +49,15 @@ onMounted(async () => {
  }
 })
-async function loginFunc() {
+async function submit() {
  // check if username and password are valid
  if (username.value === '' || password.value === '') {
    loginError.value = 'Please enter a valid username and password'
    return
  }
  // send login event to server
  const response = await login(username.value, password.value)
  if (response.success === undefined) {
    loginError.value = response.error
    return
  }
  gameStore.setToken(response.token)
  gameStore.initConnection()
  return true // Indicate success
 }
 async function registerFunc() {
  // check if username and password are valid
  if (username.value === '' || email.value === '' || password.value === '') {
-    loginError.value = 'Please enter a valid username, email, and password'
+    formError.value = 'Please enter a valid username, email, and password'
    return
  }
  if (email.value === '') {
-    loginError.value = 'Please enter an email'
+    formError.value = 'Please enter an email'
    return
  }
@ -84,14 +65,18 @@ async function registerFunc() {
  const response = await register(username.value, email.value, password.value)
  if (response.success === undefined) {
-    loginError.value = response.error
+    formError.value = response.error
    return
  }
-  const loginSuccess = await loginFunc()
+  const loginResponse = await login(username.value, password.value)
-  if (!loginSuccess) {
+
-    loginError.value = 'Login after registration failed. Please try logging in manually.'
+  if (!loginResponse) {
    formError.value = 'Login after registration failed. Please try logging in manually.'
    return
  }
  gameStore.setToken(loginResponse.token)
  gameStore.initConnection()
 }
 </script>
--- a/src/components/login/ResetPasswordModal.vue
+++ b/src/components/login/ResetPasswordModal.vue
@ -29,10 +29,10 @@
 </template>
 <script setup lang="ts">
 import { ref } from 'vue'
 import { resetPassword } from '@/services/authentication'
 import Modal from '@/components/utilities/Modal.vue'
 import { resetPassword } from '@/services/authentication'
 import { useGameStore } from '@/stores/gameStore'
 import { ref } from 'vue'
 const emit = defineEmits(['close'])
--- a/src/components/screens/Characters.vue
+++ b/src/components/screens/Characters.vue
@ -1,56 +1,56 @@
 <template>
  <div class="relative max-lg:h-dvh flex flex-row-reverse">
-    <div class="lg:bg-gradient-to-l bg-gradient-to-b from-gray-900 to-transparent w-full lg:w-1/2 h-[35dvh] lg:h-dvh absolute left-0 max-lg:bottom-0 lg:top-0 z-10"></div>
+    <div class="lg:bg-gradient-to-l bg-gradient-to-b from-gray-900 to-transparent w-full lg:w-1/2 h-[65dvh] lg:h-dvh absolute left-0 max-lg:bottom-0 lg:top-0 z-10"></div>
-    <div class="bg-[url('/assets/login/login-bg.png')] opacity-20 w-full lg:w-1/2 h-[35dvh] lg:h-dvh absolute left-0 max-lg:bottom-0 lg:top-0 bg-no-repeat bg-cover bg-center grayscale"></div>
+    <div class="bg-[url('/assets/login/login-bg.png')] opacity-20 w-full lg:w-1/2 h-[65dvh] lg:h-dvh absolute left-0 max-lg:bottom-0 lg:top-0 bg-no-repeat bg-cover bg-center grayscale"></div>
-    <div class="bg-gray-900 z-20 w-full lg:w-1/2 h-[65dvh] lg:h-dvh relative"></div>
+    <div class="bg-gray-900 z-20 w-full lg:w-1/2 h-[35dvh] lg:h-dvh relative"></div>
-    <div class="absolute top-8 right-0 py-[18px] pr-[15px] pl-32 bg-gradient-to-r from-transparent to-cyan-900 z-20">
+    <div class="max-lg:hidden absolute top-8 right-0 py-[18px] pr-[15px] pl-32 bg-gradient-to-r from-transparent to-cyan-900 z-20">
      <h2 class="text-white">CHARACTER SELECTION</h2>
    </div>
-    <div class="ui-wrapper h-dvh w-[calc(100%_-_80px)] sm:w-[calc(100%_-_160px)] absolute flex flex-col justify-center items-center gap-14 px-10 sm:px-20 z-30">
+    <div class="ui-wrapper h-dvh w-[calc(100%_-_80px)] sm:w-[calc(100%_-_160px)] absolute flex flex-col justify-center items-center gap-8 lg:gap-14 px-10 sm:px-20 z-30">
      <div class="filler"></div>
      <div class="w-2/3 max-w-[860px]" v-if="!isLoading">
        <div class="mb-5 flex flex-col gap-1">
          <h1 class="text-white font-bold">SELECT CHARACTER TO PLAY</h1>
          <p class="m-0">Maximum of 4 characters can be created per player</p>
        </div>
-        <div class="flex w-full h-[400px] border border-solid border-gray-500 rounded-md rounded-tl-none bg-gray">
+        <div class="flex w-full max-lg:flex-col lg:h-[400px] default-border rounded-md bg-gray">
-          <div class="w-1/3 h-full bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-cover bg-center border-0 border-r border-solid border-gray-500 rounded-bl-md relative">
+          <div class="lg:min-w-[285px] max-lg:min-h-[383px] lg:w-1/3 h-full bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-cover bg-center border-0 max-lg:border-b lg:border-r border-solid border-gray-500 max-lg:rounded-t-md lg:rounded-l-md relative">
-            <div class="absolute right-full -top-px flex gap-1 flex-col">
+            <div class="absolute right-[calc(100%_+_16px)] -top-px flex gap-2 flex-col">
-              <div v-for="character in characters" :key="character.id" class="character relative rounded-l border border-solid border-gray-500 w-9 h-[50px] bg-[url('/assets/ui-texture.png')] after:absolute after:w-full after:h-px after:bg-gray-500" :class="{ active: selected_character == character.id }">
+              <div v-for="character in characters" :key="character.id" class="character relative rounded default-border w-12 h-12 bg-[url('/assets/ui-texture.png')] after:absolute after:w-full after:h-px after:bg-gray-500" :class="{ active: selectedCharacterId === character.id }">
-                <img src="/assets/avatar/default/head.png" class="w-9 h-9 object-contain absolute top-1/2 -translate-y-1/2" alt="Player head" />
+                <img src="/assets/placeholders/head.png" class="w-9 h-9 object-contain center-element" alt="Player head" />
-                <input class="h-full w-full absolute m-0 z-10 hover:cursor-pointer focus-visible:outline-offset-0" type="radio" :id="character.id" name="character" :value="character.id" v-model="selected_character" />
+                <input class="h-full w-full absolute m-0 z-10 hover:cursor-pointer focus-visible:outline-offset-0" type="radio" name="character" :value="character.id" v-model="selectedCharacterId" />
              </div>
-              <div class="character relative rounded-l border border-solid border-gray-500 w-9 h-[50px] bg-[url('/assets/ui-texture.png')]" :class="{ active: characters.length == 0 }" v-if="characters.length < 4">
+              <div class="character relative rounded default-border w-12 h-12 bg-[url('/assets/ui-texture.png')]" :class="{ active: characters.length == 0 }" v-if="characters.length < 4">
-                <button class="p-0 h-full w-full flex flex-col justify-between focus-visible:outline-offset-0" @click="isModalOpen = true">
+                <button class="p-0 h-full w-full flex flex-col justify-between focus-visible:outline-offset-0" @click="isCreateNewCharacterModalOpen = true">
-                  <img class="w-6 h-6 object-contain absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2" draggable="false" src="/assets/icons/plus-icon.svg" />
+                  <img class="w-6 h-6 object-contain center-element" draggable="false" src="/assets/icons/plus-icon.svg" />
                </button>
              </div>
            </div>
-            <div class="py-6 px-8 h-[calc(100%_-_48px)] flex flex-col items-center gap-6" v-if="selected_character">
+            <div class="py-6 px-8 h-[calc(100%_-_48px)] flex flex-col items-center gap-6 justify-center" v-if="selectedCharacterId">
-              <input class="input-field w-[158px]" type="text" name="name" :placeholder="characters.find((c) => c.id == selected_character)?.name" />
+              <input class="input-field w-[158px]" type="text" name="name" :placeholder="characters.find((c) => c.id == selectedCharacterId)?.name" />
              <div class="flex flex-col gap-4 items-center">
                <div class="flex flex-col gap-3">
-                  <div class="character-frame w-[190px] h-52 bg-no-repeat bg-center flex items-center justify-between">
+                  <div class="bg-[url('/assets/ui-elements/character-select-ui-shape.svg')] w-[190px] h-52 bg-no-repeat bg-center flex items-center justify-between">
                    <button class="ml-6 w-4 h-8 p-0">
                      <img src="/assets/icons/triangle-icon.svg" class="w-3 h-3.5 m-auto" alt="Arrow left" />
                    </button>
-                    <img class="w-12 object-contain mb-3.5" src="/assets/avatar/default/0.png" alt="Player avatar" />
+                    <img class="w-24 object-contain mb-3.5" alt="Player avatar" :src="config.server_endpoint + '/avatar/s/' + characters.find((c) => c.id === selectedCharacterId)?.characterType?.id + '/' + (selectedHairId ?? 'default')" />
                    <button class="mr-6 w-4 h-8 p-0">
                      <img src="/assets/icons/triangle-icon.svg" class="w-3 h-3.5 -scale-x-100" alt="Arrow right" />
                    </button>
                  </div>
-                  <div class="flex justify-between w-[190px]">
+                  <!--                  <div class="flex justify-between w-[190px]">-->
-                    <!-- TODO: replace with color swatches -->
+                  <!--                    &lt;!&ndash; TODO: replace with color swatches &ndash;&gt;-->
-                    <button v-for="n in 9" class="w-4 h-4 rounded-sm bg-white"></button>
+                  <!--                    <button v-for="n in 9" class="w-4 h-4 rounded-sm bg-white"></button>-->
-                  </div>
+                  <!--                  </div>-->
                </div>
                <!-- TODO: update gender on (selected) character -->
                <div class="flex justify-between w-[190px]">
-                  <button class="btn-empty flex gap-2" :class="{ selected: characters.find((c) => c.id == selected_character)?.characterType?.gender === 'MALE' }">
+                  <button class="btn-empty flex gap-2" :class="{ selected: characters.find((c) => c.id == selectedCharacterId)?.characterType?.gender === 'MALE' }">
                    <img src="/assets/icons/male-icon.svg" class="w-4 h-4 m-auto" alt="Male symbol" />
                    <span class="text-white">Male</span>
                  </button>
-                  <button class="btn-empty flex gap-2" :class="{ selected: characters.find((c) => c.id == selected_character)?.characterType?.gender === 'FEMALE' }">
+                  <button class="btn-empty flex gap-2" :class="{ selected: characters.find((c) => c.id == selectedCharacterId)?.characterType?.gender === 'FEMALE' }">
                    <img src="/assets/icons/male-icon.svg" class="w-4 h-4 m-auto" alt="Male symbol" />
                    <span class="text-white">Female</span>
                  </button>
@ -58,23 +58,32 @@
              </div>
            </div>
          </div>
-          <div class="w-2/3 h-full bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-cover bg-center rounded-r-md">
+          <div class="flex-1 lg:w-2/3 max-lg:min-h-[212px] h-full bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-cover bg-center max-lg:rounded-bl-md rounded-r-md">
-            <div class="py-6 px-8 h-[calc(100%_-_48px)] flex flex-col items-center gap-10" v-if="selected_character">
+            <div class="py-6 px-8 h-[calc(100%_-_48px)] flex flex-col items-center gap-10" v-if="selectedCharacterId">
              <div class="flex flex-col gap-3 w-full">
                <span class="text-sm">Hairstyle</span>
                <div class="flex gap-2 flex-wrap max-h-20 overflow-y-auto scrollbar">
-                  <button class="bg-gray border border-solid border-gray-500 min-w-9 max-w-9 min-h-9 max-h-9 p-2 rounded-sm hover:bg-gray-500 hover:border-gray-400 focus-visible:outline-none focus-visible:border-gray-300 focus-visible:bg-gray-500">
+                  <div
-                    <img src="/assets/icons/x-button-gray.svg" class="w-4 h-4 m-auto" alt="Male symbol" />
+                    class="hair-deselect relative flex justify-center items-center bg-gray default-border w-[18px] h-[18px] p-2 rounded-sm hover:bg-gray-500 hover:border-gray-400 focus-visible:outline-none focus-visible:border-white focus-visible:bg-cyan has-[:checked]:bg-cyan has-[:checked]:border-transparent"
-                  </button>
+                  >
-                  <!-- TODO: replace with hairstyles -->
+                    <img src="/assets/icons/x-button-gray.svg" class="w-4 h-4" alt="Empty button" />
-                  <button v-for="n in 30" class="bg-gray border border-solid border-gray-500 min-w-9 max-w-9 min-h-9 max-h-9 p-2 rounded-sm hover:bg-gray-500 hover:border-gray-400 focus-visible:outline-none focus-visible:border-gray-300 focus-visible:bg-gray-500"></button>
+                    <input type="radio" name="hair" :value="null" v-model="selectedHairId" class="h-full w-full absolute left-0 top-0 m-0 z-10 hover:cursor-pointer focus-visible:outline-offset-0 focus-visible:outline-white" />
                  </div>
                  <!-- TODO #255: make radio button so we can set a value, do the same with swatches -->
                  <div
                    v-for="hair in characterHairs"
                    class="relative flex justify-center items-center bg-gray default-border w-[18px] h-[18px] p-2 rounded-sm hover:bg-gray-500 hover:border-gray-400 focus-visible:outline-none focus-visible:border-gray-300 focus-visible:bg-gray-500 has-[:checked]:bg-cyan has-[:checked]:border-transparent"
                  >
                    <img class="h-4 object-contain" :src="config.server_endpoint + '/assets/sprites/' + hair.sprite.id + '/front.png'" alt="Hair sprite" />
                    <input type="radio" name="hair" :value="hair.id" v-model="selectedHairId" class="h-full w-full absolute left-0 top-0 m-0 z-10 hover:cursor-pointer focus-visible:outline-offset-0 focus-visible:outline-white" />
                  </div>
                </div>
              </div>
              <div class="flex flex-col gap-3 w-full">
                <span class="text-sm">Hair color</span>
                <div class="flex gap-2 flex-wrap">
-                  <!-- TODO: replace with hairstyles -->
+                  <!-- TODO: replace with hair colors -->
-                  <button v-for="n in 10" class="bg-white w-6 h-6 rounded-sm"></button>
+                  <input type="radio" name="hair-color" v-for="n in 10" class="bg-red w-6 h-6 m-0 rounded-sm hover:cursor-pointer checked:outline checked:outline-1 checked:outline-white" />
                </div>
              </div>
            </div>
@ -85,101 +94,99 @@
        <img class="w-20 invert-80" src="/assets/icons/loading-icon1.svg" />
      </div>
-      <div class="button-wrapper flex self-center justify-end gap-4 max-w-[860px] w-full" v-if="!isLoading">
+      <div class="w-2/3 button-wrapper flex self-center justify-center lg:justify-end gap-4 max-w-[860px]" v-if="!isLoading">
        <button class="btn-empty min-w-48" @click.stop="gameStore.disconnectSocket()">Back</button>
-        <button class="btn-cyan min-w-48 disabled:bg-cyan-800 disabled:cursor-not-allowed" :disabled="!selected_character" @click="select_character()">Play now</button>
+        <button class="btn-cyan min-w-48 disabled:bg-cyan-800 disabled:cursor-not-allowed" :disabled="!selectedCharacterId" @click="loginWithCharacter()">Play now</button>
      </div>
    </div>
  </div>
  <!-- CREATE CHARACTER MODAL -->
-  <Modal :isModalOpen="isModalOpen" @modal:close="isModalOpen = false" :modal-width="430" :modal-height="275">
+  <Modal :isModalOpen="isCreateNewCharacterModalOpen" @modal:close="isCreateNewCharacterModalOpen = false" :modal-width="430" :modal-height="275">
    <template #modalHeader>
      <h3 class="m-0 font-medium text-white">Create your character</h3>
    </template>
    <template #modalBody>
      <div class="p-4 h-[calc(100%_-_32px)]">
-        <form method="post" @submit.prevent="create" class="h-full flex flex-col justify-between">
+        <form method="post" @submit.prevent="createCharacter" class="h-full flex flex-col justify-between">
          <div class="form-field-full">
            <label for="name" class="text-white">Nickname</label>
-            <input class="input-field" v-model="name" name="name" id="name" placeholder="Enter a nickname.." />
+            <input class="input-field" v-model="newCharacterName" name="name" id="name" placeholder="Enter a nickname..." />
          </div>
          <div class="grid grid-flow-col justify-stretch gap-4">
-            <button type="button" class="btn-empty py-1.5 px-4 inline-block" @click.prevent="isModalOpen = false">Cancel</button>
+            <button type="button" class="btn-empty py-1.5 px-4 inline-block" @click.prevent="isCreateNewCharacterModalOpen = false">Cancel</button>
            <button class="btn-cyan py-1.5 px-4 inline-block" type="submit">Create</button>
          </div>
        </form>
      </div>
    </template>
  </Modal>
  <!-- DELETE CHARACTER MODAL -->
  <ConfirmationModal v-if="deletingCharacter != null" :confirm-function="delete_character.bind(this, deletingCharacter.id)" :cancel-function="(() => (deletingCharacter = null)).bind(this)" confirm-button-text="Delete">
    <template #modalHeader>
      <h3 class="m-0 font-medium text-white">Delete character?</h3>
    </template>
    <template #modalBody>
      <p class="mt-0 mb-5 text-white text-lg">
        Do you want to permanently delete <span class="font-extrabold text-white">{{ deletingCharacter.name }}</span
        >?
      </p>
    </template>
  </ConfirmationModal>
 </template>
 <script setup lang="ts">
-import { useGameStore } from '@/stores/gameStore'
+import config from '@/application/config'
-import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { type CharacterHair, type Character as CharacterT, type Zone } from '@/application/types'
 import Modal from '@/components/utilities/Modal.vue'
-import { type Character as CharacterT } from '@/types'
+import { useGameStore } from '@/stores/gameStore'
-import ConfirmationModal from '@/components/utilities/ConfirmationModal.vue'
+import { onBeforeUnmount, ref, watch } from 'vue'
 const gameStore = useGameStore()
-const isLoading = ref(true)
+const isLoading = ref<boolean>(true)
-const characters = ref([] as CharacterT[])
+const characters = ref<CharacterT[]>([])
-const deletingCharacter = ref(null as CharacterT | null)
+const selectedCharacterId = ref<number | null>(null)
 const isCreateNewCharacterModalOpen = ref<boolean>(false)
 const newCharacterName = ref<string>('')
 const characterHairs = ref<CharacterHair[]>([])
 const selectedHairId = ref<number | null>(null)
 // Fetch characters
-gameStore.connection?.on('character:list', (data: any) => {
+setTimeout(() => {
  characters.value = data
 })
 onMounted(async () => {
  // wait 0.75 sec
  setTimeout(() => {
  gameStore.connection?.emit('character:list')
 }, 750)
 gameStore.connection!.on('character:list', (data: any) => {
  characters.value = data
  isLoading.value = false
-  }, 750)
+
  // Fetch hairs
  // @TODO: This is hacky, we should have a better way to do this
  gameStore.connection?.emit('character:hair:list', {}, (data: CharacterHair[]) => {
    characterHairs.value = data
  })
 })
 // Select character logics
-const selected_character = ref(null)
+function loginWithCharacter() {
-function select_character() {
+  if (!selectedCharacterId.value) return
  if (!selected_character.value) return
  deletingCharacter.value = null
  gameStore.connection?.emit('character:connect', { characterId: selected_character.value })
  gameStore.connection?.on('character:connect', (data: CharacterT) => gameStore.setCharacter(data))
 }
-// Delete character logics
+  gameStore.connection?.emit(
-function delete_character(characterId: number) {
+    'character:connect',
-  if (!characterId) return
+    {
-  deletingCharacter.value = null
+      characterId: selectedCharacterId.value,
-  gameStore.connection?.emit('character:delete', { characterId: characterId })
+      characterHairId: selectedHairId.value
    },
    (response: { character: CharacterT; zone: Zone; characters: CharacterT[] }) => {
      gameStore.setCharacter(response.character)
    }
  )
 }
 // Create character logics
-const isModalOpen = ref(false)
+function createCharacter() {
-const name = ref('')
+  gameStore.connection!.on('character:create:success', (data: CharacterT) => {
 function create() {
  gameStore.connection?.on('character:create:success', (data: CharacterT) => {
    gameStore.setCharacter(data)
-    isModalOpen.value = false
+    isCreateNewCharacterModalOpen.value = false
  })
-  gameStore.connection?.emit('character:create', { name: name.value })
+  gameStore.connection?.emit('character:create', { name: newCharacterName.value })
 }
 // Watch changes for selected character and update hairs
 watch(selectedCharacterId, (characterId) => {
  if (!characterId) return
  selectedHairId.value = characters.value.find((c) => c.id == characterId)?.characterHairId ?? null
 })
 onBeforeUnmount(() => {
  gameStore.connection?.off('character:list')
  gameStore.connection?.off('character:connect')
--- a/src/components/screens/Game.vue
+++ b/src/components/screens/Game.vue
@ -18,21 +18,21 @@
 </template>
 <script setup lang="ts">
-import config from '@/config'
+import config from '@/application/config'
 import 'phaser'
 import { Game, Scene } from 'phavuer'
 import { useGameStore } from '@/stores/gameStore'
 import Menu from '@/components/gui/Menu.vue'
 import ExpBar from '@/components/gui/ExpBar.vue'
 import Hud from '@/components/gui/Hud.vue'
 import Zone from '@/components/zone/Zone.vue'
 import Hotkeys from '@/components/gui/Hotkeys.vue'
 import Chat from '@/components/gui/Chat.vue'
 import CharacterProfile from '@/components/gui/CharacterProfile.vue'
 import Effects from '@/components/Effects.vue'
 import Zone from '@/components/game/zone/Zone.vue'
 import CharacterProfile from '@/components/gui/CharacterProfile.vue'
 import Chat from '@/components/gui/Chat.vue'
 // import Minimap from '@/components/gui/Minimap.vue'
 import Clock from '@/components/gui/Clock.vue'
 import ExpBar from '@/components/gui/ExpBar.vue'
 import Hotkeys from '@/components/gui/Hotkeys.vue'
 import Hud from '@/components/gui/Hud.vue'
 import Menu from '@/components/gui/Menu.vue'
 import { useGameStore } from '@/stores/gameStore'
 import AwaitLoaderPlugin from 'phaser3-rex-plugins/plugins/awaitloader-plugin'
 import { Game, Scene } from 'phavuer'
 const gameStore = useGameStore()
--- a/src/components/screens/Login.vue
+++ b/src/components/screens/Login.vue
@ -6,7 +6,7 @@
    <div class="bg-[url('/assets/login/login-bg.png')] w-full lg:w-1/2 h-[35dvh] lg:h-dvh absolute left-0 max-lg:bottom-0 lg:top-0 bg-no-repeat bg-cover bg-center"></div>
    <div class="bg-gray-900 z-20 w-full lg:w-1/2 h-[65dvh] lg:h-dvh relative">
      <div class="h-dvh flex items-center lg:justify-center flex-col px-8 max-lg:pt-20">
-        <img src="/assets/login/sq-logo-v1.svg" class="mb-10" alt="Sylvan Quest logo" />
+        <!--        <img src="/assets/tlogo.png" class="mb-10 w-52" alt="Noxious logo" />-->
        <div class="relative">
          <img src="/assets/ui-elements/login-ui-box-outer.svg" class="absolute w-full h-full" alt="UI box outer" />
          <img src="/assets/ui-elements/login-ui-box-inner.svg" class="absolute left-2 top-2 w-[calc(100%_-_16px)] h-[calc(100%_-_16px)] max-lg:hidden" alt="UI box inner" />
@ -26,13 +26,13 @@
 </template>
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import LoginForm from '@/components/login/LoginForm.vue'
 import NewPasswordForm from '@/components/login/NewPasswordForm.vue'
 import RegisterForm from '@/components/login/RegisterForm.vue'
 import ResetPassword from '@/components/login/ResetPasswordModal.vue'
 import { useGameStore } from '@/stores/gameStore'
 import { useCookies } from '@vueuse/integrations/useCookies'
-import LoginForm from '@/components/login/LoginForm.vue'
+import { onMounted, ref } from 'vue'
 import RegisterForm from '@/components/login/RegisterForm.vue'
 import NewPasswordForm from '@/components/login/NewPasswordForm.vue'
 import ResetPassword from '@/components/login/ResetPasswordModal.vue'
 const isPasswordResetFormShown = ref(false)
 const doesUrlHaveToken = ref(window.location.hash !== '')
--- a/src/components/screens/ZoneEditor.vue
+++ b/src/components/screens/ZoneEditor.vue
@ -9,15 +9,15 @@
 </template>
 <script setup lang="ts">
-import config from '@/config'
+import config from '@/application/config'
 import 'phaser'
-import { Game, Scene } from 'phavuer'
+import type { AssetDataT } from '@/application/types'
 import ZoneEditor from '@/components/gameMaster/zoneEditor/ZoneEditor.vue'
 import { loadTexture } from '@/composables/gameComposable'
 import { useGameStore } from '@/stores/gameStore'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import ZoneEditor from '@/components/gameMaster/zoneEditor/ZoneEditor.vue'
 import AwaitLoaderPlugin from 'phaser3-rex-plugins/plugins/awaitloader-plugin'
-import { loadTexture } from '@/composables/gameComposable'
+import { Game, Scene } from 'phavuer'
 import type { AssetDataT } from '@/types'
 const gameStore = useGameStore()
 const zoneEditorStore = useZoneEditorStore()
--- a/src/components/sprites/Character.vue
+++ b/src/components/sprites/Character.vue
@ -1,212 +0,0 @@
 <template>
  <!--  Chat bubble -->
  <Container ref="charChatContainer" :depth="999" :x="currentX" :y="currentY">
    <RoundRectangle @create="createChatBubble" :origin-x="0.5" :origin-y="7.5" :fillColor="0xffffff" :width="194" :height="21" :radius="20" />
    <Text @create="createChatText" :style="{ fontSize: 13, fontFamily: 'Arial', color: '#000' }" />
  </Container>
  <!--  Character name and health -->
  <Container :depth="999" :x="currentX" :y="currentY">
    <Text @create="createNicknameText" :text="props.zoneCharacter.character.name" />
    <RoundRectangle :origin-x="0.5" :origin-y="18.5" :fillColor="0xffffff" :width="74" :height="6" :radius="5" />
    <RoundRectangle :origin-x="0.5" :origin-y="36.4" :fillColor="0x00b3b3" :width="70" :height="3" :radius="5" />
  </Container>
  <!--  Character sprite -->
  <Container ref="charContainer" :depth="isometricDepth" :x="currentX" :y="currentY">
    <Sprite ref="charSprite" :origin-y="1" :flipX="isFlippedX" :flipY="false" />
  </Container>
 </template>
 <script lang="ts" setup>
 import config from '@/config'
 import { type Sprite as SpriteT, type ZoneCharacter } from '@/types'
 import { useGameStore } from '@/stores/gameStore'
 import { useZoneStore } from '@/stores/zoneStore'
 import { watch, computed, ref, onMounted, onUnmounted } from 'vue'
 import { Container, refObj, RoundRectangle, Sprite, Text, useGame, useScene } from 'phavuer'
 import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
 import { loadSpriteTextures } from '@/composables/gameComposable'
 enum Direction {
  POSITIVE,
  NEGATIVE,
  UNCHANGED
 }
 const props = defineProps<{
  layer: Phaser.Tilemaps.TilemapLayer
  zoneCharacter: ZoneCharacter
 }>()
 const charChatContainer = refObj<Phaser.GameObjects.Container>()
 const charContainer = refObj<Phaser.GameObjects.Container>()
 const charSprite = refObj<Phaser.GameObjects.Sprite>()
 const game = useGame()
 const gameStore = useGameStore()
 const zoneStore = useZoneStore()
 const scene = useScene()
 const currentX = ref(0)
 const currentY = ref(0)
 const isometricDepth = ref(1)
 const isInitialPosition = ref(true)
 const tween = ref<Phaser.Tweens.Tween | null>(null)
 const updateIsometricDepth = (x: number, y: number) => {
  isometricDepth.value = calculateIsometricDepth(x, y, 28, 94, true)
 }
 const updatePosition = (x: number, y: number, direction: Direction) => {
  const targetX = tileToWorldX(props.layer, x, y)
  const targetY = tileToWorldY(props.layer, x, y)
  if (isInitialPosition.value) {
    currentX.value = targetX
    currentY.value = targetY
    isInitialPosition.value = false
    return
  }
  if (tween.value?.isPlaying()) {
    tween.value.stop()
  }
  const distance = Math.sqrt(Math.pow(targetX - currentX.value, 2) + Math.pow(targetY - currentY.value, 2))
  if (distance >= config.tile_size.x / 1.1) {
    currentX.value = targetX
    currentY.value = targetY
    return
  }
  const duration = distance * 6
  tween.value = props.layer.scene.tweens.add({
    targets: { x: currentX.value, y: currentY.value },
    x: targetX,
    y: targetY,
    duration,
    ease: 'Linear',
    onStart: () => {
      if (direction === Direction.POSITIVE) {
        updateIsometricDepth(x, y)
      }
    },
    onUpdate: (tween) => {
      currentX.value = tween.targets[0].x
      currentY.value = tween.targets[0].y
    },
    onComplete: () => {
      if (direction === Direction.NEGATIVE) {
        updateIsometricDepth(x, y)
      }
    }
  })
 }
 const calcDirection = (oldX: number, oldY: number, newX: number, newY: number): Direction => {
  if (newY < oldY || newX < oldX) return Direction.NEGATIVE
  if (newX > oldX || newY > oldY) return Direction.POSITIVE
  return Direction.UNCHANGED
 }
 const isFlippedX = computed(() => [6, 4].includes(props.zoneCharacter.character.rotation ?? 0))
 const charTexture = computed(() => {
  const { rotation, characterType } = props.zoneCharacter.character
  const spriteId = characterType?.sprite?.id ?? 'idle_right_down'
  const action = props.zoneCharacter.isMoving ? 'walk' : 'idle'
  const direction = [0, 6].includes(rotation) ? 'left_up' : 'right_down'
  return `${spriteId}-${action}_${direction}`
 })
 const updateSprite = () => {
  if (props.zoneCharacter.isMoving) {
    charSprite.value!.anims.play(charTexture.value, true)
    return
  }
  charSprite.value!.anims.stop()
  charSprite.value!.setFrame(0)
  charSprite.value!.setTexture(charTexture.value)
 }
 const createChatBubble = (container: Phaser.GameObjects.Container) => {
  container.setName(`${props.zoneCharacter.character.name}_chatBubble`)
 }
 const createChatText = (text: Phaser.GameObjects.Text) => {
  text.setName(`${props.zoneCharacter.character.name}_chatText`)
  text.setFontSize(13)
  text.setFontFamily('Arial')
  text.setOrigin(0.5, 10.9)
  // Fix text alignment on Windows and Android
  if (game.device.os.windows || game.device.os.android) {
    text.setOrigin(0.5, 9.75)
    if (game.device.browser.firefox) {
      text.setOrigin(0.5, 10.9)
    }
  }
 }
 const createNicknameText = (text: Phaser.GameObjects.Text) => {
  text.setFontSize(13)
  text.setFontFamily('Arial')
  text.setOrigin(0.5, 9)
  // Fix text alignment on Windows and Android
  if (game.device.os.windows || game.device.os.android) {
    text.setOrigin(0.5, 8)
    if (game.device.browser.firefox) {
      text.setOrigin(0.5, 9)
    }
  }
 }
 watch(
  () => props.zoneCharacter.character,
  (newChar, oldChar) => {
    if (!newChar) return
    if (!oldChar || newChar.positionX !== oldChar.positionX || newChar.positionY !== oldChar.positionY) {
      const direction = !oldChar ? Direction.POSITIVE : calcDirection(oldChar.positionX, oldChar.positionY, newChar.positionX, newChar.positionY)
      updatePosition(newChar.positionX, newChar.positionY, direction)
    }
  }
 )
 watch(() => props.zoneCharacter, updateSprite)
 loadSpriteTextures(scene, props.zoneCharacter.character.characterType?.sprite as SpriteT)
  .then(() => {
    charSprite.value!.setTexture(charTexture.value)
    charSprite.value!.setFlipX(isFlippedX.value)
  })
  .catch((error) => {
    console.error('Error loading texture:', error)
  })
 onMounted(() => {
  charChatContainer.value!.setName(`${props.zoneCharacter.character!.name}_chatContainer`)
  charChatContainer.value!.setVisible(false)
  charContainer.value!.setName(props.zoneCharacter.character!.name)
  if (props.zoneCharacter.character.id === gameStore.character!.id) {
    zoneStore.setCharacterLoaded(true)
    // #146 : Set camera position to character, need to be improved still
    scene.cameras.main.startFollow(charContainer.value as Phaser.GameObjects.Container)
    scene.cameras.main.stopFollow()
  }
  updatePosition(props.zoneCharacter.character.positionX, props.zoneCharacter.character.positionY, props.zoneCharacter.character.rotation)
 })
 onUnmounted(() => {
  tween.value?.stop()
 })
 </script>
--- a/src/components/utilities/Accordion.vue
+++ b/src/components/utilities/Accordion.vue
@ -1,6 +1,6 @@
 <template>
  <div class="mb-4 flex flex-col gap-3">
-    <div @click="toggle" class="p-3 bg-gray-200 bg-opacity-50 rounded hover:bg-gray-300 text-white font-default cursor-pointer">
+    <div @click="toggle" class="p-3 bg-gray-300 bg-opacity-50 rounded hover:bg-gray-400 text-white font-default cursor-pointer">
      <slot name="header" />
    </div>
    <transition enter-active-class="transition-all duration-300 ease-in-out" leave-active-class="transition-all duration-300 ease-in-out" enter-from-class="opacity-0 max-h-0" enter-to-class="opacity-100 max-h-96" leave-from-class="opacity-100 max-h-96" leave-to-class="opacity-0 max-h-0">
--- a/src/components/utilities/Controls.vue
+++ b/src/components/utilities/Controls.vue
@ -3,19 +3,56 @@
 </template>
 <script setup lang="ts">
 import { useCameraControls } from '@/composables/useCameraControls'
 import { usePointerHandlers } from '@/composables/usePointerHandlers'
 import { Image, useScene } from 'phavuer'
 import { onBeforeUnmount, ref } from 'vue'
 import { usePointerHandlers } from '@/composables/usePointerHandlers'
 import { useCameraControls } from '@/composables/useCameraControls'
 // Types
 type WayPoint = { visible: boolean; x: number; y: number }
 // Props
 const props = defineProps<{ layer: Phaser.Tilemaps.TilemapLayer }>()
 // Constants
 const ZOOM_SETTINGS = {
  WHEEL_FACTOR: 0.005,
  KEY_FACTOR: 0.3,
  MIN: 1,
  MAX: 3
 } as const
 // Setup
 const scene = useScene()
-
+const waypoint = ref<WayPoint>({ visible: false, x: 0, y: 0 })
 const waypoint = ref({ visible: false, x: 0, y: 0 })
 const { camera } = useCameraControls(scene)
 const { setupPointerHandlers, cleanupPointerHandlers } = usePointerHandlers(scene, props.layer, waypoint, camera)
 // Handlers
 function handleScrollZoom(pointer: Phaser.Input.Pointer) {
  if (!(pointer.event instanceof WheelEvent && pointer.event.shiftKey)) return
  const zoomLevel = Phaser.Math.Clamp(camera.zoom - pointer.event.deltaY * ZOOM_SETTINGS.WHEEL_FACTOR, ZOOM_SETTINGS.MIN, ZOOM_SETTINGS.MAX)
  camera.setZoom(zoomLevel)
 }
 function handleKeyComboZoom(event: { keyCodes: number[] }) {
  const deltaY = event.keyCodes[1] === 38 ? 1 : -1 // 38 is Up, 40 is Down
  const zoomLevel = Phaser.Math.Clamp(camera.zoom + deltaY * ZOOM_SETTINGS.KEY_FACTOR, ZOOM_SETTINGS.MIN, ZOOM_SETTINGS.MAX)
  camera.setZoom(zoomLevel)
 }
 // Event setup
 setupPointerHandlers()
-onBeforeUnmount(cleanupPointerHandlers)
+scene.input.keyboard?.createCombo([16, 38], { resetOnMatch: true }) // Shift + Up
 scene.input.keyboard?.createCombo([16, 40], { resetOnMatch: true }) // Shift + Down
 scene.input.keyboard?.on('keycombomatch', handleKeyComboZoom)
 scene.input.on(Phaser.Input.Events.POINTER_WHEEL, handleScrollZoom)
 // Cleanup
 onBeforeUnmount(() => {
  cleanupPointerHandlers()
  scene.input.keyboard?.off('keycombomatch')
  scene.input.off(Phaser.Input.Events.POINTER_WHEEL, handleScrollZoom)
 })
 </script>
--- a/src/components/utilities/Modal.vue
+++ b/src/components/utilities/Modal.vue
@ -5,8 +5,8 @@
      <div @mousedown="startDrag" class="cursor-move p-2.5 flex justify-between items-center border-solid border-0 border-b border-gray-500 relative">
        <div
          :class="{
-            'bg-[url(/assets/ui-texture.png)] bg-no-repeat bg-center bg-cover opacity-90': !disableBgTexture,
+            'bg-[url(/assets/ui-texture.png)] bg-no-repeat bg-center bg-cover opacity-90': bgStyle === 'textured',
-            'bg-gray-700': disableBgTexture
+            'bg-gray': bgStyle !== 'textured'
          }"
          class="rounded-t absolute w-full h-full top-0 left-0"
        />
@ -27,8 +27,9 @@
      <div class="overflow-hidden grow relative">
        <div
          :class="{
-            'bg-[url(/assets/ui-texture.png)] bg-no-repeat bg-center bg-cover opacity-90': !disableBgTexture,
+            'bg-[url(/assets/ui-texture.png)] bg-no-repeat bg-center bg-cover opacity-90': bgStyle === 'textured',
-            'bg-gray-700': disableBgTexture
+            'bg-gray-800': bgStyle === 'dark',
            'bg-gray': bgStyle === 'none'
          }"
          class="rounded-b absolute w-full h-full top-0 left-0"
        />
@ -48,12 +49,13 @@ interface ModalProps {
  isModalOpen: boolean
  closable?: boolean
  isResizable?: boolean
  isFullScreen?: boolean
  canFullScreen?: boolean
  modalPositionX?: number
  modalPositionY?: number
  modalWidth?: number
  modalHeight?: number
-  disableBgTexture?: boolean
+  bgStyle?: string
 }
 interface Position {
@ -67,12 +69,13 @@ const props = withDefaults(defineProps<ModalProps>(), {
  isModalOpen: false,
  closable: true,
  isResizable: true,
  isFullScreen: false,
  canFullScreen: false,
  modalPositionX: 0,
  modalPositionY: 0,
  modalWidth: 500,
  modalHeight: 280,
-  disableBgTexture: false
+  bgStyle: 'textured'
 })
 const emit = defineEmits<{
@ -87,7 +90,7 @@ const x = ref(0)
 const y = ref(0)
 const isResizing = ref(false)
 const isDragging = ref(false)
-const isFullScreen = ref(false)
+const isFullScreen = ref(props.isFullScreen)
 const minDimensions = {
  width: 200,
--- a/src/components/utilities/Notifications.vue
+++ b/src/components/utilities/Notifications.vue
@ -10,8 +10,8 @@
 </template>
 <script setup lang="ts">
 import { useGameStore } from '@/stores/gameStore'
 import Modal from '@/components/utilities/Modal.vue'
 import { useGameStore } from '@/stores/gameStore'
 import { onBeforeMount, onBeforeUnmount, onMounted, onUnmounted, watch } from 'vue'
 const gameStore = useGameStore()
--- a/src/composables/gameComposable.ts
+++ b/src/composables/gameComposable.ts
@ -1,13 +1,13 @@
-import type { AssetDataT, Sprite } from '@/types'
+import { Assets } from '@/application/assets'
 import config from '@/application/config'
 import type { AssetDataT, HttpResponse, Sprite, SpriteAction } from '@/application/types'
 import { useGameStore } from '@/stores/gameStore'
 import { AssetStorage } from '@/storage/assetStorage'
 import config from '@/config'
 const textureLoadingPromises = new Map<string, Promise<boolean>>()
 export async function loadTexture(scene: Phaser.Scene, assetData: AssetDataT): Promise<boolean> {
  const gameStore = useGameStore()
-  const assetStorage = new AssetStorage()
+  const assetStorage = new Assets()
  // Check if the texture is already loaded in Phaser
  if (gameStore.game.loadedAssets.find((asset) => asset.key === assetData.key)) {
@ -56,17 +56,24 @@ export async function loadTexture(scene: Phaser.Scene, assetData: AssetDataT): P
  return loadingPromise
 }
-export async function loadSpriteTextures(scene: Phaser.Scene, sprite: Sprite) {
+export async function loadSpriteTextures(scene: Phaser.Scene, sprite_id: string) {
-  const sprite_actions = await fetch(config.server_endpoint + '/assets/list_sprite_actions/' + sprite?.id).then((response) => response.json())
+  if (!sprite_id) return
-  for await (const sprite_action of sprite_actions) {
+
  // @TODO: Fix this
  const sprite_actions: HttpResponse<any[]> = await fetch(config.server_endpoint + '/assets/list_sprite_actions/' + sprite_id).then((response) => response.json())
  for await (const sprite_action of sprite_actions.data ?? []) {
    await loadTexture(scene, {
      key: sprite_action.key,
      data: sprite_action.data,
      group: sprite_action.isAnimated ? 'sprite_animations' : 'sprites',
      updatedAt: sprite_action.updatedAt,
-      frameCount: sprite_action.frameCount,
+      originX: sprite_action.originX ?? 0,
      originY: sprite_action.originY ?? 0,
      isAnimated: sprite_action.isAnimated,
      frameWidth: sprite_action.frameWidth,
-      frameHeight: sprite_action.frameHeight
+      frameHeight: sprite_action.frameHeight,
      frameRate: sprite_action.frameRate
    } as AssetDataT)
    // If the sprite is not animated, skip
@ -80,7 +87,7 @@ export async function loadSpriteTextures(scene: Phaser.Scene, sprite: Sprite) {
    scene.textures.addSpriteSheet(sprite_action.key, anim, { frameWidth: sprite_action.frameWidth ?? 0, frameHeight: sprite_action.frameHeight ?? 0 })
    scene.anims.create({
      key: sprite_action.key,
-      frameRate: 7,
+      frameRate: sprite_action.frameRate,
      frames: scene.anims.generateFrameNumbers(sprite_action.key, { start: 0, end: sprite_action.frameCount! - 1 }),
      repeat: -1
    })
--- a/src/composables/pointerHandlers/useGamePointerHandlers.ts
+++ b/src/composables/pointerHandlers/useGamePointerHandlers.ts
@ -1,7 +1,7 @@
-import { type Ref, ref } from 'vue'
+import config from '@/application/config'
 import { getTile, tileToWorldXY } from '@/composables/zoneComposable'
 import { useGameStore } from '@/stores/gameStore'
-import config from '@/config'
+import { ref, type Ref } from 'vue'
 export function useGamePointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilemaps.TilemapLayer, waypoint: Ref<{ visible: boolean; x: number; y: number }>, camera: Phaser.Cameras.Scene2D.Camera) {
  const gameStore = useGameStore()
@ -48,7 +48,7 @@ export function useGamePointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilema
    if (distance <= dragThreshold) {
      const pointerTile = getTile(layer, pointer.worldX, pointer.worldY)
      if (pointerTile) {
-        gameStore.connection?.emit('character:move', {
+        gameStore.connection?.emit('zone:character:move', {
          positionX: pointerTile.x,
          positionY: pointerTile.y
        })
@ -58,27 +58,16 @@ export function useGamePointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilema
    gameStore.setPlayerDraggingCamera(false)
  }
  function handleZoom(pointer: Phaser.Input.Pointer) {
    if (pointer.event instanceof WheelEvent && pointer.event.shiftKey) {
      const deltaY = pointer.event.deltaY
      let zoomLevel = camera.zoom - deltaY * 0.005
      zoomLevel = Phaser.Math.Clamp(zoomLevel, 1, 3)
      camera.setZoom(zoomLevel)
    }
  }
  const setupPointerHandlers = () => {
    scene.input.on(Phaser.Input.Events.POINTER_DOWN, handlePointerDown)
    scene.input.on(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
    scene.input.on(Phaser.Input.Events.POINTER_UP, handlePointerUp)
    scene.input.on(Phaser.Input.Events.POINTER_WHEEL, handleZoom)
  }
  const cleanupPointerHandlers = () => {
    scene.input.off(Phaser.Input.Events.POINTER_DOWN, handlePointerDown)
    scene.input.off(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
    scene.input.off(Phaser.Input.Events.POINTER_UP, handlePointerUp)
    scene.input.off(Phaser.Input.Events.POINTER_WHEEL, handleZoom)
  }
  return { setupPointerHandlers, cleanupPointerHandlers }
--- a/src/composables/pointerHandlers/useZoneEditorPointerHandlers.ts
+++ b/src/composables/pointerHandlers/useZoneEditorPointerHandlers.ts
@ -1,8 +1,8 @@
-import { computed, type Ref } from 'vue'
+import config from '@/application/config'
 import { getTile, tileToWorldXY } from '@/composables/zoneComposable'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import { useGameStore } from '@/stores/gameStore'
-import config from '@/config'
+import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import { computed, type Ref } from 'vue'
 export function useZoneEditorPointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilemaps.TilemapLayer, waypoint: Ref<{ visible: boolean; x: number; y: number }>, camera: Phaser.Cameras.Scene2D.Camera) {
  const gameStore = useGameStore()
@ -43,7 +43,7 @@ export function useZoneEditorPointerHandlers(scene: Phaser.Scene, layer: Phaser.
  function handleZoom(pointer: Phaser.Input.Pointer) {
    if (pointer.event instanceof WheelEvent && pointer.event.shiftKey) {
      const deltaY = pointer.event.deltaY
-      let zoomLevel = camera.zoom - deltaY * 0.005
+      const zoomLevel = camera.zoom - deltaY * 0.005
      if (zoomLevel > 0 && zoomLevel < 3) {
        camera.setZoom(zoomLevel)
      }
--- a/src/composables/usePointerHandlers.ts
+++ b/src/composables/usePointerHandlers.ts
@ -1,5 +1,5 @@
 import { computed, type Ref, watch } from 'vue'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import { computed, watch, type Ref } from 'vue'
 import { useGamePointerHandlers } from './pointerHandlers/useGamePointerHandlers'
 import { useZoneEditorPointerHandlers } from './pointerHandlers/useZoneEditorPointerHandlers'
--- a/src/composables/zoneComposable.ts
+++ b/src/composables/zoneComposable.ts
@ -1,10 +1,11 @@
-import config from '@/config'
+import config from '@/application/config'
 import type { AssetDataT, HttpResponse, Zone as ZoneT } from '@/application/types'
 import { loadTexture } from '@/composables/gameComposable'
 import Tilemap = Phaser.Tilemaps.Tilemap
 import TilemapLayer = Phaser.Tilemaps.TilemapLayer
 import Tileset = Phaser.Tilemaps.Tileset
 import Tile = Phaser.Tilemaps.Tile
 import type { AssetDataT, Zone as ZoneT } from '@/types'
 import { loadTexture } from '@/composables/gameComposable'
 export function getTile(layer: TilemapLayer | Tilemap, x: number, y: number): Tile | undefined {
  const tile = layer.getTileAtWorldXY(x, y)
@ -47,7 +48,6 @@ export function tileToWorldY(layer: TilemapLayer | Tilemap, pos_x: number, pos_y
 export function placeTile(zone: Tilemap, layer: TilemapLayer, x: number, y: number, tileName: string) {
  let tileImg = zone.getTileset(tileName) as Tileset
  if (!tileImg) {
    console.log('tile not found:', tileName)
    tileImg = zone.getTileset('blank_tile') as Tileset
  }
  layer.putTileAt(tileImg.firstgid, x, y)
@ -85,12 +85,12 @@ export function FlattenZoneArray(tiles: string[][]) {
  return normalArray
 }
-export async function loadZoneTilesIntoScene(zone: ZoneT, scene: Phaser.Scene) {
+export async function loadZoneTilesIntoScene(zone_id: number, scene: Phaser.Scene) {
  // Fetch the list of tiles from the server
-  const tileArray: AssetDataT[] = await fetch(config.server_endpoint + '/assets/list_tiles/' + zone.id).then((response) => response.json())
+  const tileArray: HttpResponse<AssetDataT[]> = await fetch(config.server_endpoint + '/assets/list_tiles/' + zone_id).then((response) => response.json())
  // Load each tile into the scene
-  for (const tile of tileArray) {
+  for (const tile of tileArray.data ?? []) {
    await loadTexture(scene, tile)
  }
 }
--- a/src/main.ts
+++ b/src/main.ts
@ -1,7 +1,6 @@
 import './assets/scss/main.scss'
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import { createApp } from 'vue'
 import App from './App.vue'
 const app = createApp(App)
--- a/src/services/authentication.ts
+++ b/src/services/authentication.ts
@ -1,13 +1,15 @@
-import axios from 'axios'
+import config from '@/application/config'
-import config from '@/config'
+import { getDomain } from '@/application/utilities'
 import { useCookies } from '@vueuse/integrations/useCookies'
-import { getDomain } from '@/utilities'
+import axios from 'axios'
 export async function register(username: string, email: string, password: string) {
  try {
    const response = await axios.post(`${config.server_endpoint}/register`, { username, email, password })
-    useCookies().set('token', response.data.token as string)
+    if (response.status === 200) {
-    return { success: true, token: response.data.token }
+      return { success: true }
    }
    return { error: response.data.message }
  } catch (error: any) {
    if (typeof error.response?.data === 'undefined') {
      return { error: 'Could not connect to server' }
@ -19,10 +21,10 @@ export async function register(username: string, email: string, password: string
 export async function login(username: string, password: string) {
  try {
    const response = await axios.post(`${config.server_endpoint}/login`, { username, password })
-    useCookies().set('token', response.data.token as string, {
+    useCookies().set('token', response.data.data.token as string, {
      domain: getDomain()
    })
-    return { success: true, token: response.data.token }
+    return { success: true, token: response.data.data.token }
  } catch (error: any) {
    if (typeof error.response?.data === 'undefined') {
      return { error: 'Could not connect to server' }
@ -34,7 +36,7 @@ export async function login(username: string, password: string) {
 export async function resetPassword(email: string) {
  try {
    const response = await axios.post(`${config.server_endpoint}/reset-password`, { email })
-    return { success: true, token: response.data.token }
+    return { success: true, token: response.data.data.token }
  } catch (error: any) {
    if (typeof error.response?.data === 'undefined') {
      return { error: 'Could not connect to server' }
@ -46,7 +48,7 @@ export async function resetPassword(email: string) {
 export async function newPassword(urlToken: string, password: string) {
  try {
    const response = await axios.post(`${config.server_endpoint}/new-password`, { urlToken, password })
-    return { success: true, token: response.data.token }
+    return { success: true, token: response.data.data.token }
  } catch (error: any) {
    if (typeof error.response?.data === 'undefined') {
      return { error: 'Could not connect to server' }
--- a/src/stores/assetManagerStore.ts
+++ b/src/stores/assetManagerStore.ts
@ -1,6 +1,6 @@
-import { ref } from 'vue'
+import type { CharacterHair, CharacterType, Item, Object, Sprite, Tile } from '@/application/types'
 import { defineStore } from 'pinia'
-import type { Tile, Object, Sprite, CharacterType, CharacterHair } from '@/types'
+import { ref } from 'vue'
 export const useAssetManagerStore = defineStore('assetManager', () => {
  const tileList = ref<Tile[]>([])
@ -18,6 +18,9 @@ export const useAssetManagerStore = defineStore('assetManager', () => {
  const characterHairList = ref<CharacterHair[]>([])
  const selectedCharacterHair = ref<CharacterHair | null>(null)
  const itemList = ref<Item[]>([])
  const selectedItem = ref<Item | null>(null)
  function setTileList(tiles: Tile[]) {
    tileList.value = tiles
  }
@ -58,6 +61,14 @@ export const useAssetManagerStore = defineStore('assetManager', () => {
    selectedCharacterHair.value = characterHair
  }
  function setItemList(items: Item[]) {
    itemList.value = items
  }
  function setSelectedItem(item: Item | null) {
    selectedItem.value = item
  }
  return {
    tileList,
    selectedTile,
@ -69,6 +80,8 @@ export const useAssetManagerStore = defineStore('assetManager', () => {
    selectedCharacterType,
    characterHairList,
    selectedCharacterHair,
    itemList,
    selectedItem,
    setTileList,
    setSelectedTile,
    setObjectList,
@ -78,6 +91,8 @@ export const useAssetManagerStore = defineStore('assetManager', () => {
    setSelectedSprite,
    setSelectedCharacterType,
    setCharacterHairList,
-    setSelectedCharacterHair
+    setSelectedCharacterHair,
    setItemList,
    setSelectedItem
  }
 })
--- a/src/stores/gameStore.ts
+++ b/src/stores/gameStore.ts
@ -1,9 +1,9 @@
 import config from '@/application/config'
 import type { AssetDataT, Character, Notification, User, WorldSettings } from '@/application/types'
 import { getDomain } from '@/application/utilities'
 import { useCookies } from '@vueuse/integrations/useCookies'
 import { defineStore } from 'pinia'
 import { io, Socket } from 'socket.io-client'
 import type { AssetDataT, Character, Notification, User, WorldSettings } from '@/types'
 import config from '@/config'
 import { useCookies } from '@vueuse/integrations/useCookies'
 import { getDomain } from '@/utilities'
 export const useGameStore = defineStore('game', {
  state: () => {
@ -38,7 +38,10 @@ export const useGameStore = defineStore('game', {
      return state.game.loadedAssets
    },
    getLoadedAsset: (state) => {
-      return (key: string) => state.game.loadedAssets.find((asset) => asset.key === key)
+      return (key: string | undefined) => {
        if (!key) return null
        return state.game.loadedAssets.find((asset) => asset.key === key)
      }
    },
    getLoadedAssetsByGroup: (state) => {
      return (group: string) => state.game.loadedAssets.filter((asset) => asset.group === group)
--- a/src/stores/zoneEditorStore.ts
+++ b/src/stores/zoneEditorStore.ts
@ -1,6 +1,6 @@
-import { defineStore } from 'pinia'
+import type { Object, Tile, Zone, ZoneEffect, ZoneObject } from '@/application/types'
 import { useGameStore } from '@/stores/gameStore'
-import type { Zone, Object, Tile, ZoneEffect, ZoneObject } from '@/types'
+import { defineStore } from 'pinia'
 export type TeleportSettings = {
  toZoneId: number
--- a/src/stores/zoneStore.ts
+++ b/src/stores/zoneStore.ts
@ -1,5 +1,5 @@
 import type { Zone, ZoneCharacter } from '@/application/types'
 import { defineStore } from 'pinia'
 import type { ZoneCharacter, Zone } from '@/types'
 export const useZoneStore = defineStore('zone', {
  state: () => {
@ -40,6 +40,15 @@ export const useZoneStore = defineStore('zone', {
    setCharacterLoaded(loaded: boolean) {
      this.characterLoaded = loaded
    },
    updateCharacterPosition(data: { characterId: number; positionX: number; positionY: number; rotation: number; isMoving: boolean }) {
      const character = this.characters.find((char) => char.character.id === data.characterId)
      if (character) {
        character.character.positionX = data.positionX
        character.character.positionY = data.positionY
        character.character.rotation = data.rotation
        character.isMoving = data.isMoving
      }
    },
    reset() {
      this.zone = null
      this.characters = []
--- a/vite.config.js
+++ b/vite.config.js
@ -2,12 +2,14 @@ import { fileURLToPath, URL } from 'node:url';
 import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import VueDevTools from 'vite-plugin-vue-devtools'
 import viteCompression from 'vite-plugin-compression'
 // https://vitejs.dev/config/
 export default defineConfig({
    plugins: [
        vue(),
        VueDevTools(),
        viteCompression()
    ],
    resolve: {
        alias: {
Author	SHA1	Message	Date
Colin Kallemein	c1360899e1	#263 - Updated character movement to pure ts (WIP)	2025-01-02 23:34:53 +01:00
Dennis Postma	63758e67b3	Removed redundant field	2025-01-01 23:01:58 +01:00
Dennis Postma	b51aa29bd8	Updated types	2025-01-01 20:59:38 +01:00
Dennis Postma	f9bfbdf735	Renamed property for better consistency	2025-01-01 20:46:02 +01:00
Dennis Postma	2abce7a7e7	Sorted imports	2025-01-01 19:05:24 +01:00
Dennis Postma	6ec9f8a7bc	Loading char. texture works again	2025-01-01 18:16:31 +01:00
Dennis Postma	8191a039c9	Walking works again but needs to be improved	2025-01-01 17:50:07 +01:00
Dennis Postma	540425ca44	Minor change	2025-01-01 04:48:57 +01:00
Dennis Postma	1c2e642fe3	Typo	2025-01-01 02:59:26 +01:00
Dennis Postma	8355c83dc8	Renamed class	2024-12-31 16:15:28 +01:00
Dennis Postma	5fcb336835	Moved file	2024-12-30 17:44:56 +01:00
Dennis Postma	90bdf43b64	Small change	2024-12-30 02:47:49 +01:00
Dennis Postma	e9dfcf7870	Minor changes	2024-12-29 02:36:04 +01:00
Colin Kallemein	d0c08c25fd	#286 - Added global class for fully absolute-centering elements	2024-12-29 02:21:21 +01:00
Colin Kallemein	7bb7af9476	#295 + #296 - Changed login boxes and char select styling	2024-12-29 02:10:18 +01:00
Dennis Postma	e4186a1bf5	WIP zone loading	2024-12-29 00:40:02 +01:00
Dennis Postma	8c664d7774	Started working on improved connect method	2024-12-28 23:48:52 +01:00
Dennis Postma	744df2e2dc	Re-enabled vue dev tools, moved type into types.ts, added temp. logging	2024-12-28 17:27:00 +01:00
Dennis Postma	b4f9b11143	Removed console log	2024-12-27 19:04:33 +01:00
Dennis Postma	18b07d2f46	Several fixes, improvements, refactor for authentication	2024-12-27 19:00:53 +01:00
Dennis Postma	9d0f810ab3	Double field fix	2024-12-27 00:54:31 +01:00
Dennis Postma	cf3f17dfef	Disabled vue dev tools for testing purposes	2024-12-27 00:54:23 +01:00
Dennis Postma	6be1134c8c	Minor improvement	2024-12-27 00:49:57 +01:00
Dennis Postma	6dad7bc9dd	http improvements, fixed link	2024-12-27 00:48:36 +01:00
Dennis Postma	231f19a30f	Added characterChest component for chest equipment, moved some files	2024-12-27 00:27:54 +01:00
Dennis Postma	9c105d6df6	Returned data update	2024-12-26 23:55:47 +01:00
Colin Kallemein	179ceb0ca0	Cleaned up assets, added default border values to main.scss	2024-12-26 20:03:42 +01:00
Colin Kallemein	680661f07c	#258 - Put update effects in the timeout corner until zoneEffects is ready Reverted latest changes due to zoneEffects needing to fully overwrite	2024-12-25 00:40:56 +01:00
Dennis Postma	c54d2a2da8	Merge branch 'main' of ssh://gitea.directonline.io:29417/sylvan-quest/client	2024-12-24 00:54:27 +01:00
Dennis Postma	85f0fca2ae	Added copy sprite button, changed asset manager layout, updated packages	2024-12-24 00:54:20 +01:00
Colin Kallemein	420e63b724	#258 - Made it so zoneEffects only overrides defined effects instead of all	2024-12-23 23:23:16 +01:00
Colin Kallemein	5d9b4fd19a	#187 - Enter to focus chat when not focused	2024-12-22 20:56:06 +01:00
Dennis Postma	b3d68ef562	Merge branch 'main' of ssh://gitea.directonline.io:29417/sylvan-quest/client	2024-12-22 20:08:49 +01:00
Dennis Postma	baae737d6b	CRUD components for items	2024-12-22 20:08:45 +01:00
Colin Kallemein	03f8b327c5	#258 - Fixed zone effects when set in settings	2024-12-22 20:06:51 +01:00
Dennis Postma	b9a1ce5ab5	Adjusted sorting	2024-12-22 02:36:14 +01:00
Dennis Postma	1b650bd733	#16 : Show updates made to character in real time	2024-12-22 00:13:15 +01:00
Dennis Postma	b867250580	Updated name	2024-12-21 22:10:37 +01:00
Colin Kallemein	2c7a1e27be	Fixes for origin being string, styling bug hair select and wrong label tags	2024-12-21 17:48:20 +01:00
Dennis Postma	0e455f8ffc	Use originX and Y for hair	2024-12-21 03:00:09 +01:00
Dennis Postma	8005bc1318	Small fix	2024-12-21 02:29:48 +01:00
Dennis Postma	11e978121f	Renamed frame speed > frame rate	2024-12-21 02:27:47 +01:00
Dennis Postma	727ca99b73	#262 : Use frameRate is value is set in sprite settings	2024-12-21 02:20:03 +01:00
Dennis Postma	97080d7380	Better anim. timing	2024-12-21 02:09:18 +01:00
Dennis Postma	1a3a53a229	Timing for animations	2024-12-20 21:29:33 +01:00
Dennis Postma	a926de8466	Hair anim. adjustment	2024-12-20 20:36:13 +01:00
Dennis Postma	5eabb39ec8	Improved hair animation	2024-12-20 01:28:48 +01:00
Colin Kallemein	03313cb092	#259 - Changed bg options for modals, restyled GM Panel	2024-12-15 15:24:10 +01:00
Dennis Postma	d58cfa668d	More finetuning of hair positioning	2024-12-15 14:40:47 +01:00
Dennis Postma	e3e40dd083	updated packages	2024-12-13 00:47:44 +01:00
Dennis Postma	facdd2d1b4	Minor styling changes	2024-12-13 00:47:36 +01:00
Dennis Postma	7d6bd39f29	GmPanel is full screen by default now	2024-12-12 01:12:33 +01:00
Dennis Postma	608932300f	Improved proof of concept hair customisation & sprite anchor points	2024-12-12 00:42:56 +01:00
Dennis Postma	b5c1c92b04	Worked on character customisation	2024-12-10 02:22:03 +01:00
Colin Kallemein	c68b129da8	#260 - Fix Characterprofile start position	2024-12-08 19:58:43 +01:00
Colin Kallemein	963c593a1f	#260 - Add min height when no character is selected	2024-12-08 19:45:11 +01:00
Colin Kallemein	a299e22f88	#260 - added responsive styling character select	2024-12-08 19:29:07 +01:00
Dennis Postma	2007bfd7c5	Altered menu a bit	2024-12-08 00:53:07 +01:00
Dennis Postma	4cae045d0d	Effect improvement	2024-12-08 00:35:00 +01:00
Dennis Postma	1fa8b8f06e	You can now zoom in/out with key combination (shift + arrow uo/down) my 5 EUR Action gaming mouse doesnt let me scroll on MacOS 💩	2024-12-07 23:24:11 +01:00
Dennis Postma	4095184b27	updated packages	2024-12-07 22:50:36 +01:00
Dennis Postma	857d56a878	Overriding zone effects now works	2024-12-07 22:50:27 +01:00
Dennis Postma	8087f754b0	Merge branch 'feature/#245-character-hair' of ssh://gitea.directonline.io:29417/sylvan-quest/client into feature/#245-character-hair	2024-12-05 09:56:17 +01:00
Dennis Postma	1479d96162	npm update, proof of concept code for character hair	2024-12-05 09:55:20 +01:00
Colin Kallemein	606e220a9f	Slightly adjusted styling radio hair color buttons	2024-11-27 20:39:09 +01:00
Dennis Postma	6988565484	Removed redundant code	2024-11-25 00:42:07 +01:00
Dennis Postma	fbc4a3dcdb	Better typescript	2024-11-25 00:41:12 +01:00
Dennis Postma	924d5bdd13	Bug fixes and improvements to character select screen	2024-11-25 00:40:21 +01:00
Colin Kallemein	25a2fd24f3	Prep hair color radio btns, adjust styling hairstyles to make it tab friendly	2024-11-24 20:46:29 +01:00
Dennis Postma	64f5ac45dd	Removed console.log, renamed hars to characterHairs	2024-11-24 20:28:50 +01:00
Colin Kallemein	937ce939d1	Preselect hairstyle that's set on character Removed unused watch	2024-11-24 20:19:45 +01:00
Colin Kallemein	7d89364104	Fix styling conditions for radio select WIP	2024-11-24 17:15:57 +01:00
Dennis Postma	f7b8c235d8	Renamed hair > characterHair, split character logic (chat bubble, healthbar etc) into separate components for better DX	2024-11-24 15:13:11 +01:00
Colin Kallemein	89d83efca4	Mess	2024-11-23 22:55:43 +01:00
Dennis Postma	ab97e27f27	Moved game components into a new folder, working proof of concept hair customisation	2024-11-23 16:47:41 +01:00
Colin Kallemein	ee3e1b55cb	Huehue wups	2024-11-23 15:43:57 +01:00
Dennis Postma	5e109e2a39	Removed ID from radio	2024-11-23 15:39:47 +01:00
Dennis Postma	a8e50c993a	Commented out color swatch, added justify-center	2024-11-23 15:38:39 +01:00