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

.prettierrc.json

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

package-lock.json

@@ -20,6 +20,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",
@@ -30,7 +31,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",
@@ -571,16 +571,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/traverse/node_modules/globals": {
-      "version": "11.12.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
-      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/@babel/types": {
       "version": "7.26.3",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.3.tgz",
@@ -1049,6 +1039,22 @@
         "concat-map": "0.0.1"
       }
     },
+    "node_modules/@eslint/eslintrc/node_modules/globals": {
+      "version": "13.24.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
+      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "type-fest": "^0.20.2"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@eslint/eslintrc/node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -1134,6 +1140,29 @@
       "dev": true,
       "license": "BSD-3-Clause"
     },
+    "node_modules/@ianvs/prettier-plugin-sort-imports": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/@ianvs/prettier-plugin-sort-imports/-/prettier-plugin-sort-imports-4.4.0.tgz",
+      "integrity": "sha512-f4/e+/ANGk3tHuwRW0uh2YuBR50I4h1ZjGQ+5uD8sWfinHTivQsnieR5cz24t8M6Vx4rYvZ5v/IEKZhYpzQm9Q==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@babel/generator": "^7.26.2",
+        "@babel/parser": "^7.26.2",
+        "@babel/traverse": "^7.25.9",
+        "@babel/types": "^7.26.0",
+        "semver": "^7.5.2"
+      },
+      "peerDependencies": {
+        "@vue/compiler-sfc": "2.7.x || 3.x",
+        "prettier": "2 || 3"
+      },
+      "peerDependenciesMeta": {
+        "@vue/compiler-sfc": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -1987,9 +2016,9 @@
       }
     },
     "node_modules/@types/node": {
-      "version": "20.17.10",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.10.tgz",
-      "integrity": "sha512-/jrvh5h6NXhEauFFexRin69nA0uHJ5gwk4iDivp/DeoEua3uwCUto6PC86IpRITBOs4+6i2I56K5x5b6WYGXHA==",
+      "version": "20.17.11",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.11.tgz",
+      "integrity": "sha512-Ept5glCK35R8yeyIeYlRIZtX6SLRyqMhOFTgj5SOkMpLTdw3SEHI9fHx60xaUZ+V1aJxQJODE+7/j5ocZydYTg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3548,16 +3577,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/easystarjs": {
-      "version": "0.4.4",
-      "resolved": "https://registry.npmjs.org/easystarjs/-/easystarjs-0.4.4.tgz",
-      "integrity": "sha512-ZSt0TkB8xuIXRIrKsM3jkmk1/cZUtyvf0DqOXf6wuKq9slx9UA5kkLtiaWhtmOQFJFKdabbvXwk6RO0znghArQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "heap": "0.2.6"
-      }
-    },
     "node_modules/editorconfig": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-1.0.4.tgz",
@@ -3882,6 +3901,22 @@
         "eslint": "^6.2.0 || ^7.0.0 || ^8.0.0 || ^9.0.0"
       }
     },
+    "node_modules/eslint-plugin-vue/node_modules/globals": {
+      "version": "13.24.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
+      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "type-fest": "^0.20.2"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/eslint-scope": {
       "version": "7.2.2",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
@@ -3923,6 +3958,22 @@
         "concat-map": "0.0.1"
       }
     },
+    "node_modules/eslint/node_modules/globals": {
+      "version": "13.24.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
+      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "type-fest": "^0.20.2"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/eslint/node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -4392,19 +4443,13 @@
       }
     },
     "node_modules/globals": {
-      "version": "13.24.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
-      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
+      "version": "11.12.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "type-fest": "^0.20.2"
-      },
       "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "node": ">=4"
       }
     },
     "node_modules/globby": {
@@ -4507,12 +4552,6 @@
         "he": "bin/he"
       }
     },
-    "node_modules/heap": {
-      "version": "0.2.6",
-      "resolved": "https://registry.npmjs.org/heap/-/heap-0.2.6.tgz",
-      "integrity": "sha512-MzzWcnfB1e4EG2vHi3dXHoBupmuXNZzx6pY6HldVS55JKKBoq3xOyzfSaZRkJp37HIhEYC78knabHff3zc4dQQ==",
-      "dev": true
-    },
     "node_modules/hookable": {
       "version": "5.5.3",
       "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
@@ -7975,9 +8014,9 @@
       "license": "ISC"
     },
     "node_modules/yaml": {
-      "version": "2.6.1",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.6.1.tgz",
-      "integrity": "sha512-7r0XPzioN/Q9kXBro/XPnA6kznR73DHq+GXh5ON7ZozRO6aMjbmiBuKste2wslTFkC5d1dw0GooOCepZXJ2SAg==",
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.7.0.tgz",
+      "integrity": "sha512-+hSoy/QHluxmC9kCIJyL/uyFmLmc+e5CFR5Wa+bpIhIj85LVb9ZH2nVnqrHoSvKogwODv0ClqZkmiSSaIH5LTA==",
       "dev": true,
       "license": "ISC",
       "bin": {

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",

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()

src/application/assets.ts

@@ -1,8 +1,8 @@
 import config from '@/application/config'
-import Dexie from 'dexie'
 import type { AssetDataT } from '@/application/types'
+import Dexie from 'dexie'
 
-export class AssetStorage {
+export class Assets {
   private db: Dexie
 
   constructor() {

src/application/types.ts

@@ -1,3 +1,5 @@
+export type UUID = `${string}-${string}-${string}-${string}-${string}`
+
 export type Notification = {
   id?: string
   title?: string
@@ -25,7 +27,7 @@ export type AssetDataT = {
 }
 
 export type Tile = {
-  id: string
+  id: UUID
   name: string
   tags: any | null
   createdAt: Date
@@ -33,7 +35,7 @@ export type Tile = {
 }
 
 export type Object = {
-  id: string
+  id: UUID
   name: string
   tags: any | null
   originX: number
@@ -48,13 +50,13 @@ export type Object = {
 }
 
 export type Item = {
-  id: string
+  id: UUID
   name: string
   description: string | null
   itemType: ItemType
   stackable: boolean
   rarity: ItemRarity
-  spriteId: string | null
+  spriteId: UUID | null
   sprite?: Sprite
   createdAt: Date
   updatedAt: Date
@@ -64,7 +66,7 @@ export type ItemType = 'WEAPON' | 'HELMET' | 'CHEST' | 'LEGS' | 'BOOTS' | 'GLOVE
 export type ItemRarity = 'COMMON' | 'UNCOMMON' | 'RARE' | 'EPIC' | 'LEGENDARY'
 
 export type Zone = {
-  id: number
+  id: UUID
   name: string
   width: number
   height: number
@@ -80,18 +82,18 @@ export type Zone = {
 }
 
 export type ZoneEffect = {
-  id: string
-  zoneId: number
+  id: UUID
+  zoneId: UUID
   zone: Zone
   effect: string
   strength: number
 }
 
 export type ZoneObject = {
-  id: string
-  zoneId: number
+  id: UUID
+  zoneId: UUID
   zone: Zone
-  objectId: string
+  objectId: UUID
   object: Object
   depth: number
   isRotated: boolean
@@ -107,8 +109,8 @@ export enum ZoneEventTileType {
 }
 
 export type ZoneEventTile = {
-  id: string
-  zoneId: number
+  id: UUID
+  zoneId: UUID
   zone: Zone
   type: ZoneEventTileType
   positionX: number
@@ -117,10 +119,10 @@ export type ZoneEventTile = {
 }
 
 export type ZoneEventTileTeleport = {
-  id: string
-  zoneEventTileId: string
+  id: UUID
+  zoneEventTileId: UUID
   zoneEventTile: ZoneEventTile
-  toZoneId: number
+  toZoneId: UUID
   toZone: Zone
   toPositionX: number
   toPositionY: number
@@ -128,7 +130,7 @@ export type ZoneEventTileTeleport = {
 }
 
 export type User = {
-  id: number
+  id: UUID
   username: string
   password: string
   characters: Character[]
@@ -148,7 +150,7 @@ export enum CharacterRace {
 }
 
 export type CharacterType = {
-  id: number
+  id: UUID
   name: string
   gender: CharacterGender
   race: CharacterRace
@@ -161,7 +163,7 @@ export type CharacterType = {
 }
 
 export type CharacterHair = {
-  id: number
+  id: UUID
   name: string
   sprite: Sprite
   gender: CharacterGender
@@ -169,8 +171,8 @@ export type CharacterHair = {
 }
 
 export type Character = {
-  id: number
-  userId: number
+  id: UUID
+  userId: UUID
   user: User
   name: string
   hitpoints: number
@@ -182,11 +184,11 @@ export type Character = {
   positionX: number
   positionY: number
   rotation: number
-  characterTypeId: number | null
-  characterType: CharacterType | null
-  characterHairId: number | null
+  characterTypeId: UUID | null
+  characterType: CharacterType | null | string
+  characterHairId: UUID | null
   characterHair: CharacterHair | null
-  zoneId: number
+  zoneId: UUID
   zone: Zone
   chats: Chat[]
   items: CharacterItem[]
@@ -199,18 +201,18 @@ export type ZoneCharacter = {
 }
 
 export type CharacterItem = {
-  id: number
-  characterId: number
+  id: UUID
+  characterId: UUID
   character: Character
-  itemId: string
+  itemId: UUID
   item: Item
   quantity: number
 }
 
 export type CharacterEquipment = {
-  id: number
+  id: UUID
   slot: CharacterEquipmentSlotType
-  characterItemId: number
+  characterItemId: UUID
   characterItem: CharacterItem
 }
 
@@ -224,7 +226,7 @@ export enum CharacterEquipmentSlotType {
 }
 
 export type Sprite = {
-  id: string
+  id: UUID
   name: string
   createdAt: Date
   updatedAt: Date
@@ -233,8 +235,7 @@ export type Sprite = {
 }
 
 export type SpriteAction = {
-  id: string
-  spriteId: string
+  id: UUID
   sprite: Sprite
   action: string
   sprites: string[]
@@ -248,10 +249,10 @@ export type SpriteAction = {
 }
 
 export type Chat = {
-  id: number
-  characterId: number
+  id: UUID
+  characterId: UUID
   character: Character
-  zoneId: number
+  zoneId: UUID
   zone: Zone
   message: string
   createdAt: Date
@@ -272,6 +273,6 @@ export type WeatherState = {
 }
 
 export type zoneLoadData = {
-  zone: ZoneT
+  zone: Zone
   characters: ZoneCharacter[]
 }

src/assets/scss/main.scss

@@ -146,7 +146,7 @@ button {
 }
 
 .character.active {
-  @apply bg-gray bg-none
+  @apply bg-gray bg-none;
 }
 
 .hair-deselect:has(:checked) {

src/components/Effects.vue

@@ -3,11 +3,11 @@
 </template>
 
 <script setup lang="ts">
-import { Scene } from 'phavuer'
-import { useZoneStore } from '@/stores/zoneStore'
-import { useGameStore } from '@/stores/gameStore'
-import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import type { WeatherState } from '@/application/types'
+import { useGameStore } from '@/stores/gameStore'
+import { useZoneStore } from '@/stores/zoneStore'
+import { Scene } from 'phavuer'
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 // Constants
 const LIGHT_CONFIG = {
@@ -146,12 +146,12 @@ const setupSocketListeners = () => {
     updateScene()
   })
 
-  gameStore.connection?.on('weather', (data: WeatherState) => {
+  gameStore.connection!.on('weather', (data: WeatherState) => {
     weatherState.value = data
     updateScene()
   })
 
-  gameStore.connection?.on('date', updateScene)
+  gameStore.connection!.on('date', updateScene)
 }
 
 const handleResize = () => {

src/components/game/character/Character.vue

@@ -11,15 +11,16 @@
 <script lang="ts" setup>
 import config from '@/application/config'
 import { type Sprite as SpriteT, type ZoneCharacter } from '@/application/types'
-import { useGameStore } from '@/stores/gameStore'
-import { useZoneStore } from '@/stores/zoneStore'
-import { watch, computed, ref, onMounted, onUnmounted } from 'vue'
-import { Container, refObj, Sprite, useScene } from 'phavuer'
-import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
-import { loadSpriteTextures } from '@/composables/gameComposable'
+import 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 CharacterHair from '@/components/game/character/partials/CharacterHair.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 {
@@ -29,7 +30,7 @@ enum Direction {
 }
 
 const props = defineProps<{
-  layer: Phaser.Tilemaps.TilemapLayer
+  tilemap: Phaser.Tilemaps.Tilemap
   zoneCharacter: ZoneCharacter
 }>()
 
@@ -44,15 +45,25 @@ 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 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.layer, x, y)
-  const targetY = tileToWorldY(props.layer, x, y)
+  const targetX = tileToWorldX(props.tilemap, x, y)
+  const targetY = tileToWorldY(props.tilemap, x, y)
 
   if (isInitialPosition.value) {
     currentX.value = targetX
@@ -61,41 +72,42 @@ const updatePosition = (x: number, y: number, direction: Direction) => {
     return
   }
 
-  if (tween.value?.isPlaying()) {
-    tween.value.stop()
+  if (isMoving.value) {
+    stopMovement()
   }
 
   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
-  }
+  isMoving.value = true
+  const startTime = performance.now()
+  const startX = currentX.value
+  const startY = currentY.value
+  const duration = distance * moveSpeed
 
-  const duration = distance * 5.7
-
-  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: () => {
+
+  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 => {
@@ -108,7 +120,7 @@ const isFlippedX = computed(() => [6, 4].includes(props.zoneCharacter.character.
 
 const charTexture = computed(() => {
   const { rotation, characterType } = props.zoneCharacter.character
-  const spriteId = characterType?.sprite?.id ?? 'idle_right_down'
+  const spriteId = characterType?.sprite ?? 'idle_right_down'
   const action = props.zoneCharacter.isMoving ? 'walk' : 'idle'
   const direction = [0, 6].includes(rotation) ? 'left_up' : 'right_down'
 
@@ -127,20 +139,31 @@ const updateSprite = () => {
 }
 
 watch(
-  () => props.zoneCharacter.character,
-  (newChar, oldChar) => {
-    if (!newChar) return
+  () => ({
+    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 (!oldChar || newChar.positionX !== oldChar.positionX || newChar.positionY !== oldChar.positionY) {
-      const direction = !oldChar ? Direction.POSITIVE : calcDirection(oldChar.positionX, oldChar.positionY, newChar.positionX, newChar.positionY)
-      updatePosition(newChar.positionX, newChar.positionY, direction)
+    if (!oldValues || newValues.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 SpriteT)
+loadSpriteTextures(scene, props.zoneCharacter.character.characterType?.sprite as string)
   .then(() => {
     charSprite.value!.setTexture(charTexture.value)
     charSprite.value!.setFlipX(isFlippedX.value)
@@ -164,6 +187,6 @@ onMounted(() => {
 })
 
 onUnmounted(() => {
-  tween.value?.stop()
+  stopMovement()
 })
 </script>

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

@@ -3,11 +3,11 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
-import { Image, useScene } from 'phavuer'
 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

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

@@ -3,11 +3,11 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
-import { Image, useScene } from 'phavuer'
 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

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

@@ -6,8 +6,8 @@
 </template>
 
 <script setup lang="ts">
-import { Container, refObj, RoundRectangle, Text, useGame } from 'phavuer'
 import type { ZoneCharacter } from '@/application/types'
+import { Container, refObj, RoundRectangle, Text, useGame } from 'phavuer'
 import { onMounted } from 'vue'
 
 const props = defineProps<{

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

@@ -7,8 +7,8 @@
 </template>
 
 <script setup lang="ts">
-import { Container, RoundRectangle, Text, useGame } from 'phavuer'
 import type { ZoneCharacter } from '@/application/types'
+import { Container, RoundRectangle, Text, useGame } from 'phavuer'
 
 const props = defineProps<{
   zoneCharacter: ZoneCharacter

src/components/game/zone/Characters.vue

@@ -1,5 +1,5 @@
 <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">

src/components/game/zone/Zone.vue

@@ -5,15 +5,15 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onUnmounted, onMounted, onBeforeMount } from 'vue'
-import { useScene } from 'phavuer'
+import type { ZoneCharacter, zoneLoadData } from '@/application/types'
+import Characters from '@/components/game/zone/Characters.vue'
+import ZoneObjects from '@/components/game/zone/ZoneObjects.vue'
+import ZoneTiles from '@/components/game/zone/ZoneTiles.vue'
+import { loadZoneTilesIntoScene } from '@/composables/zoneComposable'
 import { useGameStore } from '@/stores/gameStore'
 import { useZoneStore } from '@/stores/zoneStore'
-import { loadZoneTilesIntoScene } from '@/composables/zoneComposable'
-import type { Zone as ZoneT, ZoneCharacter, zoneLoadData } from '@/application/types'
-import ZoneTiles from '@/components/game/zone/ZoneTiles.vue'
-import ZoneObjects from '@/components/game/zone/ZoneObjects.vue'
-import Characters from '@/components/game/zone/Characters.vue'
+import { useScene } from 'phavuer'
+import { onUnmounted, ref } from 'vue'
 
 const scene = useScene()
 const gameStore = useGameStore()
@@ -31,7 +31,7 @@ onUnmounted(() => {
 
 // Event listeners
 gameStore.connection!.on('zone:character:teleport', async (data: zoneLoadData) => {
-  await loadZoneTilesIntoScene(data.zone, scene)
+  await loadZoneTilesIntoScene(data.zone.id, scene)
   zoneStore.setZone(data.zone)
   zoneStore.setCharacters(data.characters)
 })
@@ -44,7 +44,7 @@ gameStore.connection!.on('zone:character:leave', (characterId: number) => {
   zoneStore.removeCharacter(characterId)
 })
 
-gameStore.connection!.on('zone:character:move', (data: { id: number; positionX: number; positionY: number; rotation: number; isMoving: boolean }) => {
+gameStore.connection!.on('zone:character:move', (data: { characterId: number; positionX: number; positionY: number; rotation: number; isMoving: boolean }) => {
   zoneStore.updateCharacterPosition(data)
 })
 </script>

src/components/game/zone/ZoneObjects.vue

@@ -3,8 +3,8 @@
 </template>
 
 <script setup lang="ts">
-import { useZoneStore } from '@/stores/zoneStore'
 import ZoneObject from '@/components/game/zone/partials/ZoneObject.vue'
+import { useZoneStore } from '@/stores/zoneStore'
 
 const zoneStore = useZoneStore()
 

src/components/game/zone/ZoneTiles.vue

@@ -4,12 +4,12 @@
 
 <script setup lang="ts">
 import config from '@/application/config'
-import { useScene } from 'phavuer'
-import { useZoneStore } from '@/stores/zoneStore'
-import { onBeforeUnmount } from 'vue'
-import { FlattenZoneArray, setLayerTiles } from '@/composables/zoneComposable'
-import Controls from '@/components/utilities/Controls.vue'
 import { unduplicateArray } from '@/application/utilities'
+import Controls from '@/components/utilities/Controls.vue'
+import { FlattenZoneArray, setLayerTiles } from '@/composables/zoneComposable'
+import { useZoneStore } from '@/stores/zoneStore'
+import { useScene } from 'phavuer'
+import { onBeforeUnmount } from 'vue'
 
 const emit = defineEmits(['tileMap:create'])
 

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

@@ -3,12 +3,12 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-import { Image, useScene } from 'phavuer'
-import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
-import { loadTexture } from '@/composables/gameComposable'
 import type { AssetDataT, ZoneObject } from '@/application/types'
+import { loadTexture } from '@/composables/gameComposable'
+import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
 import { useGameStore } from '@/stores/gameStore'
+import { Image, useScene } from 'phavuer'
+import { computed } from 'vue'
 
 const props = defineProps<{
   tilemap: Phaser.Tilemaps.Tilemap

src/components/gameMaster/GmPanel.vue

@@ -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()

src/components/gameMaster/assetManager/AssetManager.vue

@@ -60,20 +60,20 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import { useAssetManagerStore } from '@/stores/assetManagerStore'
-import TileList from '@/components/gameMaster/assetManager/partials/tile/TileList.vue'
-import TileDetails from '@/components/gameMaster/assetManager/partials/tile/TileDetails.vue'
-import ObjectList from '@/components/gameMaster/assetManager/partials/object/ObjectList.vue'
-import ObjectDetails from '@/components/gameMaster/assetManager/partials/object/ObjectDetails.vue'
-import SpriteList from '@/components/gameMaster/assetManager/partials/sprite/SpriteList.vue'
-import SpriteDetails from '@/components/gameMaster/assetManager/partials/sprite/SpriteDetails.vue'
-import CharacterTypeList from '@/components/gameMaster/assetManager/partials/characterType/CharacterTypeList.vue'
-import CharacterTypeDetails from '@/components/gameMaster/assetManager/partials/characterType/CharacterTypeDetails.vue'
-import CharacterHairList from '@/components/gameMaster/assetManager/partials/characterHair/CharacterHairList.vue'
 import CharacterHairDetails from '@/components/gameMaster/assetManager/partials/characterHair/CharacterHairDetails.vue'
-import ItemList from '@/components/gameMaster/assetManager/partials/item/itemList.vue'
+import CharacterHairList from '@/components/gameMaster/assetManager/partials/characterHair/CharacterHairList.vue'
+import CharacterTypeDetails from '@/components/gameMaster/assetManager/partials/characterType/CharacterTypeDetails.vue'
+import CharacterTypeList from '@/components/gameMaster/assetManager/partials/characterType/CharacterTypeList.vue'
 import ItemDetails from '@/components/gameMaster/assetManager/partials/item/itemDetails.vue'
+import ItemList from '@/components/gameMaster/assetManager/partials/item/itemList.vue'
+import 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')

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

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

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

@@ -32,11 +32,11 @@
 </template>
 
 <script setup lang="ts">
-import { useGameStore } from '@/stores/gameStore'
-import { onMounted, ref, computed } from 'vue'
-import { useAssetManagerStore } from '@/stores/assetManagerStore'
 import type { CharacterHair } from '@/application/types'
+import { useAssetManagerStore } from '@/stores/assetManagerStore'
+import { useGameStore } from '@/stores/gameStore'
 import { useVirtualList } from '@vueuse/core'
+import { computed, onMounted, ref } from 'vue'
 
 const gameStore = useGameStore()
 const assetManagerStore = useAssetManagerStore()

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

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

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

@@ -32,11 +32,11 @@
 </template>
 
 <script setup lang="ts">
-import { useGameStore } from '@/stores/gameStore'
-import { onMounted, ref, computed } from 'vue'
-import { useAssetManagerStore } from '@/stores/assetManagerStore'
 import type { CharacterType } from '@/application/types'
+import { useAssetManagerStore } from '@/stores/assetManagerStore'
+import { useGameStore } from '@/stores/gameStore'
 import { useVirtualList } from '@vueuse/core'
+import { computed, onMounted, ref } from 'vue'
 
 const gameStore = useGameStore()
 const assetManagerStore = useAssetManagerStore()

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

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

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

@@ -29,11 +29,11 @@
 </template>
 
 <script setup lang="ts">
-import { useGameStore } from '@/stores/gameStore'
-import { onMounted, ref, computed } from 'vue'
-import { useAssetManagerStore } from '@/stores/assetManagerStore'
 import type { Item } from '@/application/types'
+import { useAssetManagerStore } from '@/stores/assetManagerStore'
+import { useGameStore } from '@/stores/gameStore'
 import { useVirtualList } from '@vueuse/core'
+import { computed, onMounted, ref } from 'vue'
 
 const gameStore = useGameStore()
 const assetManagerStore = useAssetManagerStore()

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

@@ -50,13 +50,13 @@
 </template>
 
 <script setup lang="ts">
-import type { Object } from '@/application/types'
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { useAssetManagerStore } from '@/stores/assetManagerStore'
-import { useZoneEditorStore } from '@/stores/zoneEditorStore'
-import { useGameStore } from '@/stores/gameStore'
 import config from '@/application/config'
+import type { Object } from '@/application/types'
 import ChipsInput from '@/components/forms/ChipsInput.vue'
+import { useAssetManagerStore } from '@/stores/assetManagerStore'
+import { useGameStore } from '@/stores/gameStore'
+import { useZoneEditorStore } from '@/stores/zoneEditorStore'
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 const gameStore = useGameStore()
 const assetManagerStore = useAssetManagerStore()

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

@@ -29,11 +29,11 @@
 
 <script setup lang="ts">
 import config from '@/application/config'
-import { useGameStore } from '@/stores/gameStore'
-import { onMounted, ref, computed } from 'vue'
-import { useAssetManagerStore } from '@/stores/assetManagerStore'
 import type { Object } 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 objectUploadField = ref(null)

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

@@ -70,12 +70,12 @@
 
 <script setup lang="ts">
 import type { Sprite, SpriteAction } from '@/application/types'
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { uuidv4 } from '@/application/utilities'
+import SpriteActionsInput from '@/components/gameMaster/assetManager/partials/sprite/partials/SpriteImagesInput.vue'
+import Accordion from '@/components/utilities/Accordion.vue'
 import { useAssetManagerStore } from '@/stores/assetManagerStore'
 import { useGameStore } from '@/stores/gameStore'
-import Accordion from '@/components/utilities/Accordion.vue'
-import SpriteActionsInput from '@/components/gameMaster/assetManager/partials/sprite/partials/SpriteImagesInput.vue'
-import { uuidv4 } from '@/application/utilities'
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 const gameStore = useGameStore()
 const assetManagerStore = useAssetManagerStore()

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

@@ -25,11 +25,11 @@
 
 <script setup lang="ts">
 import config from '@/application/config'
-import { useGameStore } from '@/stores/gameStore'
-import { onMounted, ref, computed } from 'vue'
-import { useAssetManagerStore } from '@/stores/assetManagerStore'
-import { useVirtualList } from '@vueuse/core'
 import type { Sprite } from '@/application/types'
+import { useAssetManagerStore } from '@/stores/assetManagerStore'
+import { useGameStore } from '@/stores/gameStore'
+import { useVirtualList } from '@vueuse/core'
+import { computed, onMounted, ref } from 'vue'
 
 const gameStore = useGameStore()
 const assetManagerStore = useAssetManagerStore()

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

@@ -23,13 +23,13 @@
 </template>
 
 <script setup lang="ts">
-import type { Tile } from '@/application/types'
-import { computed, onBeforeUnmount, onMounted, ref, toRaw, watch } from 'vue'
-import { useAssetManagerStore } from '@/stores/assetManagerStore'
-import { useZoneEditorStore } from '@/stores/zoneEditorStore'
-import { useGameStore } from '@/stores/gameStore'
 import config from '@/application/config'
+import type { Tile } from '@/application/types'
 import ChipsInput from '@/components/forms/ChipsInput.vue'
+import { useAssetManagerStore } from '@/stores/assetManagerStore'
+import { useGameStore } from '@/stores/gameStore'
+import { useZoneEditorStore } from '@/stores/zoneEditorStore'
+import { computed, onBeforeUnmount, onMounted, ref, toRaw, watch } from 'vue'
 
 const gameStore = useGameStore()
 const assetManagerStore = useAssetManagerStore()

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

@@ -29,11 +29,11 @@
 
 <script setup lang="ts">
 import config from '@/application/config'
-import { useGameStore } from '@/stores/gameStore'
-import { onMounted, ref, computed } from 'vue'
-import { useAssetManagerStore } from '@/stores/assetManagerStore'
 import type { Tile } from '@/application/types'
+import { useAssetManagerStore } from '@/stores/assetManagerStore'
+import { useGameStore } from '@/stores/gameStore'
 import { useVirtualList } from '@vueuse/core'
+import { computed, onMounted, ref } from 'vue'
 
 const gameStore = useGameStore()
 const tileUploadField = ref(null)

src/components/gameMaster/zoneEditor/ZoneEditor.vue

@@ -14,20 +14,20 @@
 </template>
 
 <script setup lang="ts">
-import { onUnmounted, ref } from 'vue'
-import { useGameStore } from '@/stores/gameStore'
-import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import { type Zone } from '@/application/types'
+import ObjectList from '@/components/gameMaster/zoneEditor/partials/ObjectList.vue'
+import TeleportModal from '@/components/gameMaster/zoneEditor/partials/TeleportModal.vue'
+import TileList from '@/components/gameMaster/zoneEditor/partials/TileList.vue'
 // Components
 import Toolbar from '@/components/gameMaster/zoneEditor/partials/Toolbar.vue'
-import TileList from '@/components/gameMaster/zoneEditor/partials/TileList.vue'
-import ObjectList from '@/components/gameMaster/zoneEditor/partials/ObjectList.vue'
-import ZoneSettings from '@/components/gameMaster/zoneEditor/partials/ZoneSettings.vue'
 import ZoneList from '@/components/gameMaster/zoneEditor/partials/ZoneList.vue'
-import TeleportModal from '@/components/gameMaster/zoneEditor/partials/TeleportModal.vue'
-import ZoneTiles from '@/components/gameMaster/zoneEditor/zonePartials/ZoneTiles.vue'
-import ZoneObjects from '@/components/gameMaster/zoneEditor/zonePartials/ZoneObjects.vue'
+import ZoneSettings from '@/components/gameMaster/zoneEditor/partials/ZoneSettings.vue'
 import ZoneEventTiles from '@/components/gameMaster/zoneEditor/zonePartials/ZoneEventTiles.vue'
+import ZoneObjects from '@/components/gameMaster/zoneEditor/zonePartials/ZoneObjects.vue'
+import ZoneTiles from '@/components/gameMaster/zoneEditor/zonePartials/ZoneTiles.vue'
+import { useGameStore } from '@/stores/gameStore'
+import { useZoneEditorStore } from '@/stores/zoneEditorStore'
+import { onUnmounted, ref } from 'vue'
 
 const gameStore = useGameStore()
 const zoneEditorStore = useZoneEditorStore()

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

@@ -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 '@/application/types'
+import { ref } from 'vue'
 
 const gameStore = useGameStore()
 const zoneEditorStore = useZoneEditorStore()

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

@@ -42,11 +42,11 @@
 
 <script setup lang="ts">
 import config from '@/application/config'
-import { ref, onMounted, computed } from 'vue'
-import { useZoneEditorStore } from '@/stores/zoneEditorStore'
-import { useGameStore } from '@/stores/gameStore'
-import Modal from '@/components/utilities/Modal.vue'
 import type { Object, ZoneObject } from '@/application/types'
+import Modal from '@/components/utilities/Modal.vue'
+import { useGameStore } from '@/stores/gameStore'
+import { useZoneEditorStore } from '@/stores/zoneEditorStore'
+import { computed, onMounted, ref } from 'vue'
 
 const gameStore = useGameStore()
 const isModalOpen = ref(false)

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

@@ -39,11 +39,11 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue'
-import Modal from '@/components/utilities/Modal.vue'
-import { useZoneEditorStore } from '@/stores/zoneEditorStore'
-import { useGameStore } from '@/stores/gameStore'
 import type { Zone } from '@/application/types'
+import Modal from '@/components/utilities/Modal.vue'
+import { useGameStore } from '@/stores/gameStore'
+import { useZoneEditorStore } from '@/stores/zoneEditorStore'
+import { computed, onMounted, ref, watch } from 'vue'
 
 const showTeleportModal = computed(() => zoneEditorStore.tool === 'pencil' && zoneEditorStore.drawMode === 'teleport')
 const zoneEditorStore = useZoneEditorStore()

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

@@ -82,11 +82,11 @@
 
 <script setup lang="ts">
 import config from '@/application/config'
-import { ref, onMounted, computed } from 'vue'
-import { useZoneEditorStore } from '@/stores/zoneEditorStore'
-import { useGameStore } from '@/stores/gameStore'
-import Modal from '@/components/utilities/Modal.vue'
 import type { Tile } from '@/application/types'
+import Modal from '@/components/utilities/Modal.vue'
+import { useGameStore } from '@/stores/gameStore'
+import { useZoneEditorStore } from '@/stores/zoneEditorStore'
+import { computed, onMounted, ref } from 'vue'
 
 const gameStore = useGameStore()
 const isModalOpen = ref(false)

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()
 

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

@@ -26,12 +26,12 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
-import { useGameStore } from '@/stores/gameStore'
-import Modal from '@/components/utilities/Modal.vue'
 import type { Zone } from '@/application/types'
-import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import CreateZone from '@/components/gameMaster/zoneEditor/partials/CreateZone.vue'
+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()

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

@@ -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')

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

@@ -3,11 +3,11 @@
 </template>
 
 <script setup lang="ts">
-import { type ZoneEventTile, ZoneEventTileType } from '@/application/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 '@/application/utilities'
 import { onMounted, onUnmounted } from 'vue'
 
 const scene = useScene()

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

@@ -3,12 +3,12 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-import { Image, useScene } from 'phavuer'
-import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
-import { loadTexture } from '@/composables/gameComposable'
 import type { AssetDataT, ZoneObject } from '@/application/types'
+import { loadTexture } from '@/composables/gameComposable'
+import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
 import { useGameStore } from '@/stores/gameStore'
+import { Image, useScene } from 'phavuer'
+import { computed } from 'vue'
 
 const props = defineProps<{
   tilemap: Phaser.Tilemaps.Tilemap

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

@@ -4,14 +4,14 @@
 </template>
 
 <script setup lang="ts">
-import { uuidv4 } from '@/application/utilities'
-import { getTile } from '@/composables/zoneComposable'
-import { useScene } from 'phavuer'
-import { useZoneEditorStore } from '@/stores/zoneEditorStore'
-import SelectedZoneObject from '@/components/gameMaster/zoneEditor/partials/SelectedZoneObject.vue'
-import { onMounted, onUnmounted, ref, watch } from 'vue'
-import ZoneObject from '@/components/gameMaster/zoneEditor/zonePartials/ZoneObject.vue'
 import type { ZoneObject as ZoneObjectT } from '@/application/types'
+import { uuidv4 } from '@/application/utilities'
+import SelectedZoneObject from '@/components/gameMaster/zoneEditor/partials/SelectedZoneObject.vue'
+import ZoneObject from '@/components/gameMaster/zoneEditor/zonePartials/ZoneObject.vue'
+import { getTile } from '@/composables/zoneComposable'
+import { useZoneEditorStore } from '@/stores/zoneEditorStore'
+import { useScene } from 'phavuer'
+import { onMounted, onUnmounted, ref, watch } from 'vue'
 
 const scene = useScene()
 const zoneEditorStore = useZoneEditorStore()

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

@@ -4,13 +4,13 @@
 
 <script setup lang="ts">
 import config from '@/application/config'
-import { useScene } from 'phavuer'
-import { useZoneEditorStore } from '@/stores/zoneEditorStore'
-import { onMounted, onUnmounted, watch } from 'vue'
-import { createTileArray, getTile, placeTile, setLayerTiles } from '@/composables/zoneComposable'
-import Controls from '@/components/utilities/Controls.vue'
-import { useGameStore } from '@/stores/gameStore'
 import type { AssetDataT } from '@/application/types'
+import Controls from '@/components/utilities/Controls.vue'
+import { createTileArray, getTile, placeTile, setLayerTiles } from '@/composables/zoneComposable'
+import { useGameStore } from '@/stores/gameStore'
+import { useZoneEditorStore } from '@/stores/zoneEditorStore'
+import { useScene } from 'phavuer'
+import { onMounted, onUnmounted, watch } from 'vue'
 
 const emit = defineEmits(['tileMap:create'])
 

src/components/gui/CharacterProfile.vue

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

src/components/gui/Chat.vue

@@ -21,12 +21,12 @@
 </template>
 
 <script setup lang="ts">
-import { onBeforeUnmount, ref, nextTick, onMounted } from 'vue'
-import { onClickOutside, useFocus } from '@vueuse/core'
-import { useGameStore } from '@/stores/gameStore'
 import type { Chat } from '@/application/types'
+import { useGameStore } from '@/stores/gameStore'
 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()
@@ -79,7 +79,7 @@ const scrollToBottom = () => {
   })
 }
 
-gameStore.connection?.on('chat:message', (data: Chat) => {
+gameStore.connection!.on('chat:message', (data: Chat) => {
   chats.value.push(data)
   scrollToBottom()
 

src/components/gui/Clock.vue

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

src/components/gui/UserPanel.vue

@@ -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')

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>

src/components/login/LoginForm.vue

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

src/components/login/NewPasswordForm.vue

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

src/components/login/RegisterForm.vue

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

src/components/login/ResetPasswordModal.vue

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

src/components/screens/Characters.vue

@@ -126,10 +126,10 @@
 
 <script setup lang="ts">
 import config from '@/application/config'
+import { type CharacterHair, type Character as CharacterT, type Zone } from '@/application/types'
+import Modal from '@/components/utilities/Modal.vue'
 import { useGameStore } from '@/stores/gameStore'
 import { onBeforeUnmount, ref, watch } from 'vue'
-import Modal from '@/components/utilities/Modal.vue'
-import { type Character as CharacterT, type CharacterHair, type Zone } from '@/application/types'
 
 const gameStore = useGameStore()
 const isLoading = ref<boolean>(true)
@@ -145,7 +145,7 @@ setTimeout(() => {
   gameStore.connection?.emit('character:list')
 }, 750)
 
-gameStore.connection?.on('character:list', (data: any) => {
+gameStore.connection!.on('character:list', (data: any) => {
   characters.value = data
   isLoading.value = false
 
@@ -160,17 +160,21 @@ gameStore.connection?.on('character:list', (data: any) => {
 function loginWithCharacter() {
   if (!selectedCharacterId.value) return
 
-  gameStore.connection?.emit('character:connect', {
+  gameStore.connection?.emit(
+    'character:connect',
+    {
       characterId: selectedCharacterId.value,
       characterHairId: selectedHairId.value
-  }, (response: { character: CharacterT, zone: Zone, characters: CharacterT[] }) => {
+    },
+    (response: { character: CharacterT; zone: Zone; characters: CharacterT[] }) => {
       gameStore.setCharacter(response.character)
-  })
+    }
+  )
 }
 
 // Create character logics
 function createCharacter() {
-  gameStore.connection?.on('character:create:success', (data: CharacterT) => {
+  gameStore.connection!.on('character:create:success', (data: CharacterT) => {
     gameStore.setCharacter(data)
     isCreateNewCharacterModalOpen.value = false
   })

src/components/screens/Game.vue

@@ -20,19 +20,19 @@
 <script setup lang="ts">
 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/game/zone/Zone.vue'
-import Hotkeys from '@/components/gui/Hotkeys.vue'
-import Chat from '@/components/gui/Chat.vue'
-import CharacterProfile from '@/components/gui/CharacterProfile.vue'
 import Effects from '@/components/Effects.vue'
+import 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()
 

src/components/screens/Login.vue

@@ -26,13 +26,13 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import LoginForm from '@/components/login/LoginForm.vue'
+import NewPasswordForm from '@/components/login/NewPasswordForm.vue'
+import RegisterForm from '@/components/login/RegisterForm.vue'
+import ResetPassword from '@/components/login/ResetPasswordModal.vue'
 import { useGameStore } from '@/stores/gameStore'
 import { useCookies } from '@vueuse/integrations/useCookies'
-import LoginForm from '@/components/login/LoginForm.vue'
-import RegisterForm from '@/components/login/RegisterForm.vue'
-import NewPasswordForm from '@/components/login/NewPasswordForm.vue'
-import ResetPassword from '@/components/login/ResetPasswordModal.vue'
+import { onMounted, ref } from 'vue'
 
 const isPasswordResetFormShown = ref(false)
 const doesUrlHaveToken = ref(window.location.hash !== '')

src/components/screens/ZoneEditor.vue

@@ -11,13 +11,13 @@
 <script setup lang="ts">
 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 type { AssetDataT } from '@/application/types'
+import { Game, Scene } from 'phavuer'
 
 const gameStore = useGameStore()
 const zoneEditorStore = useZoneEditorStore()

src/components/utilities/Controls.vue

@@ -3,10 +3,10 @@
 </template>
 
 <script setup lang="ts">
+import { useCameraControls } from '@/composables/useCameraControls'
+import { usePointerHandlers } from '@/composables/usePointerHandlers'
 import { Image, useScene } from 'phavuer'
 import { onBeforeUnmount, ref } from 'vue'
-import { usePointerHandlers } from '@/composables/usePointerHandlers'
-import { useCameraControls } from '@/composables/useCameraControls'
 
 // Types
 type WayPoint = { visible: boolean; x: number; y: number }

src/components/utilities/Notifications.vue

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

src/composables/gameComposable.ts

@@ -1,13 +1,13 @@
+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 '@/application/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,11 +56,11 @@ export async function loadTexture(scene: Phaser.Scene, assetData: AssetDataT): P
   return loadingPromise
 }
 
-export async function loadSpriteTextures(scene: Phaser.Scene, sprite: Sprite) {
-  if (!sprite) return
+export async function loadSpriteTextures(scene: Phaser.Scene, sprite_id: string) {
+  if (!sprite_id) return
 
   // @TODO: Fix this
-  const sprite_actions: HttpResponse<any[]> = await fetch(config.server_endpoint + '/assets/list_sprite_actions/' + sprite?.id).then((response) => response.json())
+  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, {

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 '@/application/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()

src/composables/pointerHandlers/useZoneEditorPointerHandlers.ts

@@ -1,8 +1,8 @@
-import { computed, type Ref } from 'vue'
-import { getTile, tileToWorldXY } from '@/composables/zoneComposable'
-import { useZoneEditorStore } from '@/stores/zoneEditorStore'
-import { useGameStore } from '@/stores/gameStore'
 import config from '@/application/config'
+import { getTile, tileToWorldXY } from '@/composables/zoneComposable'
+import { useGameStore } from '@/stores/gameStore'
+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)
       }

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'
 

src/composables/zoneComposable.ts

@@ -1,10 +1,11 @@
 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, HttpResponse, Zone as ZoneT } from '@/application/types'
-import { loadTexture } from '@/composables/gameComposable'
 
 export function getTile(layer: TilemapLayer | Tilemap, x: number, y: number): Tile | undefined {
   const tile = layer.getTileAtWorldXY(x, y)

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)

src/services/authentication.ts

@@ -1,7 +1,7 @@
-import axios from 'axios'
 import config from '@/application/config'
-import { useCookies } from '@vueuse/integrations/useCookies'
 import { getDomain } from '@/application/utilities'
+import { useCookies } from '@vueuse/integrations/useCookies'
+import axios from 'axios'
 
 export async function register(username: string, email: string, password: string) {
   try {

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, Item } from '@/application/types'
+import { ref } from 'vue'
 
 export const useAssetManagerStore = defineStore('assetManager', () => {
   const tileList = ref<Tile[]>([])

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 '@/application/types'
-import config from '@/application/config'
-import { useCookies } from '@vueuse/integrations/useCookies'
-import { getDomain } from '@/application/utilities'
 
 export const useGameStore = defineStore('game', {
   state: () => {

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 '@/application/types'
+import { defineStore } from 'pinia'
 
 export type TeleportSettings = {
   toZoneId: number

src/stores/zoneStore.ts

@@ -1,5 +1,5 @@
+import type { Zone, ZoneCharacter } from '@/application/types'
 import { defineStore } from 'pinia'
-import type { ZoneCharacter, Zone } from '@/application/types'
 
 export const useZoneStore = defineStore('zone', {
   state: () => {
@@ -40,8 +40,8 @@ export const useZoneStore = defineStore('zone', {
     setCharacterLoaded(loaded: boolean) {
       this.characterLoaded = loaded
     },
-    updateCharacterPosition(data: { id: number; positionX: number; positionY: number; rotation: number; isMoving: boolean }) {
-      const character = this.characters.find((char) => char.character.id === data.id)
+    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