Almost finalised refactoring

src/application/types.ts

@@ -34,7 +34,7 @@ export type Tile = {
   updatedAt: Date
 }
 
-export type Object = {
+export type MapObject = {
   id: UUID
   name: string
   tags: any | null
@@ -46,7 +46,6 @@ export type Object = {
   frameHeight: number
   createdAt: Date
   updatedAt: Date
-  MapObject: PlacedMapObject[]
 }
 
 export type Item = {
@@ -56,7 +55,6 @@ export type Item = {
   itemType: ItemType
   stackable: boolean
   rarity: ItemRarity
-  spriteId: UUID | null
   sprite?: Sprite
   createdAt: Date
   updatedAt: Date
@@ -74,7 +72,7 @@ export type Map = {
   pvp: boolean
   mapEffects: MapEffect[]
   mapEventTiles: MapEventTile[]
-  mapObjects: PlacedMapObject[]
+  placedMapObjects: PlacedMapObject[]
   characters: Character[]
   chats: Chat[]
   createdAt: Date
@@ -83,7 +81,6 @@ export type Map = {
 
 export type MapEffect = {
   id: UUID
-  mapId: UUID
   map: Map
   effect: string
   strength: number
@@ -91,10 +88,8 @@ export type MapEffect = {
 
 export type PlacedMapObject = {
   id: UUID
-  mapId: UUID
   map: Map
-  objectId: UUID
+  mapObject: MapObject
-  object: Object
   depth: number
   isRotated: boolean
   positionX: number
@@ -110,7 +105,6 @@ export enum MapEventTileType {
 
 export type MapEventTile = {
   id: UUID
-  mapId: UUID
   map: Map
   type: MapEventTileType
   positionX: number
@@ -120,7 +114,6 @@ export type MapEventTile = {
 
 export type MapEventTileTeleport = {
   id: UUID
-  mapEventTileId: UUID
   mapEventTile: MapEventTile
   toMapId: UUID
   toMap: Map
@@ -155,8 +148,6 @@ export type CharacterType = {
   gender: CharacterGender
   race: CharacterRace
   isSelectable: boolean
-  characters: Character[]
-  spriteId?: string
   sprite?: Sprite
   createdAt: Date
   updatedAt: Date
@@ -165,7 +156,7 @@ export type CharacterType = {
 export type CharacterHair = {
   id: UUID
   name: string
-  sprite: Sprite
+  sprite?: Sprite
   gender: CharacterGender
   isSelectable: boolean
 }
@@ -184,9 +175,7 @@ export type Character = {
   positionX: number
   positionY: number
   rotation: number
-  characterTypeId: UUID | null
   characterType: CharacterType | null | string
-  characterHairId: UUID | null
   characterHair: CharacterHair | null
   mapId: UUID
   map: Map
@@ -202,9 +191,7 @@ export type MapCharacter = {
 
 export type CharacterItem = {
   id: UUID
-  characterId: UUID
   character: Character
-  itemId: UUID
   item: Item
   quantity: number
 }
@@ -212,7 +199,6 @@ export type CharacterItem = {
 export type CharacterEquipment = {
   id: UUID
   slot: CharacterEquipmentSlotType
-  characterItemId: UUID
   characterItem: CharacterItem
 }
 
@@ -250,9 +236,7 @@ export type SpriteAction = {
 
 export type Chat = {
   id: UUID
-  characterId: UUID
   character: Character
-  mapId: UUID
   map: Map
   message: string
   createdAt: Date

src/components/Effects.vue

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

@@ -10,7 +10,7 @@
 
 <script lang="ts" setup>
 import config from '@/application/config'
-import { type Sprite as SpriteT, type MapCharacter } from '@/application/types'
+import { type MapCharacter, type Sprite as SpriteT } 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'

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

@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts" setup>
-import type { Sprite as SpriteT, MapCharacter } from '@/application/types'
+import type { MapCharacter, Sprite as SpriteT } from '@/application/types'
 import { loadSpriteTextures } from '@/composables/gameComposable'
 import { useGameStore } from '@/stores/gameStore'
 import { Image, useScene } from 'phavuer'

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

@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts" setup>
-import type { Sprite as SpriteT, MapCharacter } from '@/application/types'
+import type { MapCharacter, Sprite as SpriteT } from '@/application/types'
 import { loadSpriteTextures } from '@/composables/gameComposable'
 import { useGameStore } from '@/stores/gameStore'
 import { Image, useScene } from 'phavuer'

src/components/game/map/Map.vue

@@ -23,28 +23,28 @@ const tileMap = ref(null as Phaser.Tilemaps.Tilemap | null)
 
 onUnmounted(() => {
   mapStore.reset()
-  gameStore.connection!.off('map:character:teleport')
+  gameStore.connection?.off('map:character:teleport')
-  gameStore.connection!.off('map:character:join')
+  gameStore.connection?.off('map:character:join')
-  gameStore.connection!.off('map:character:leave')
+  gameStore.connection?.off('map:character:leave')
-  gameStore.connection!.off('map:character:move')
+  gameStore.connection?.off('map:character:move')
 })
 
 // Event listeners
-gameStore.connection!.on('map:character:teleport', async (data: mapLoadData) => {
+gameStore.connection?.on('map:character:teleport', async (data: mapLoadData) => {
   await loadMapTilesIntoScene(data.map.id, scene)
   mapStore.setMap(data.map)
   mapStore.setCharacters(data.characters)
 })
 
-gameStore.connection!.on('map:character:join', async (data: MapCharacter) => {
+gameStore.connection?.on('map:character:join', async (data: MapCharacter) => {
   mapStore.addCharacter(data)
 })
 
-gameStore.connection!.on('map:character:leave', (characterId: number) => {
+gameStore.connection?.on('map:character:leave', (characterId: number) => {
   mapStore.removeCharacter(characterId)
 })
 
-gameStore.connection!.on('map:character:move', (data: { characterId: number; positionX: number; positionY: number; rotation: number; isMoving: boolean }) => {
+gameStore.connection?.on('map:character:move', (data: { characterId: number; positionX: number; positionY: number; rotation: number; isMoving: boolean }) => {
   mapStore.updateCharacterPosition(data)
 })
 </script>

src/components/gameMaster/assetManager/AssetManager.vue

@@ -5,8 +5,8 @@
       <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group" :class="{ 'bg-cyan': selectedCategory === 'tiles' }" @click="() => (selectedCategory = 'tiles')">
         <span class="group-hover:text-white" :class="{ 'text-white': selectedCategory === 'tiles' }">Tiles</span>
       </a>
-      <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group" :class="{ 'bg-cyan': selectedCategory === 'objects' }" @click="() => (selectedCategory = 'objects')">
+      <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group" :class="{ 'bg-cyan': selectedCategory === 'map_objects' }" @click="() => (selectedCategory = 'map_objects')">
-        <span class="group-hover:text-white" :class="{ 'text-white': selectedCategory === 'objects' }">Objects</span>
+        <span class="group-hover:text-white" :class="{ 'text-white': selectedCategory === 'map_objects' }">Map objects</span>
       </a>
       <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group" :class="{ 'bg-cyan': selectedCategory === 'sprites' }" @click="() => (selectedCategory = 'sprites')">
         <span class="group-hover:text-white" :class="{ 'text-white': selectedCategory === 'sprites' }">Sprites</span>
@@ -40,7 +40,7 @@
     <!-- Assets list -->
     <div class="overflow-auto h-full w-4/12 flex flex-col relative">
       <TileList v-if="selectedCategory === 'tiles'" />
-      <ObjectList v-if="selectedCategory === 'objects'" />
+      <MapObjectList v-if="selectedCategory === 'map_objects'" />
       <SpriteList v-if="selectedCategory === 'sprites'" />
       <ItemList v-if="selectedCategory === 'items'" />
       <CharacterTypeList v-if="selectedCategory === 'characterTypes'" />
@@ -50,7 +50,7 @@
     <!-- Asset details -->
     <div class="flex w-7/12 after:hidden flex-col relative overflow-auto">
       <TileDetails v-if="selectedCategory === 'tiles' && assetManagerStore.selectedTile" />
-      <ObjectDetails v-if="selectedCategory === 'objects' && assetManagerStore.selectedObject" />
+      <MapObjectDetails v-if="selectedCategory === 'map_objects' && assetManagerStore.selectedMapObject" />
       <SpriteDetails v-if="selectedCategory === 'sprites' && assetManagerStore.selectedSprite" />
       <ItemDetails v-if="selectedCategory === 'items' && assetManagerStore.selectedItem" />
       <CharacterTypeDetails v-if="selectedCategory === 'characterTypes' && assetManagerStore.selectedCharacterType" />
@@ -66,8 +66,8 @@ import CharacterTypeDetails from '@/components/gameMaster/assetManager/partials/
 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 MapObjectDetails from '@/components/gameMaster/assetManager/partials/mapObject/MapObjectDetails.vue'
-import ObjectList from '@/components/gameMaster/assetManager/partials/object/ObjectList.vue'
+import MapObjectList from '@/components/gameMaster/assetManager/partials/mapObject/MapObjectList.vue'
 import SpriteDetails from '@/components/gameMaster/assetManager/partials/sprite/SpriteDetails.vue'
 import SpriteList from '@/components/gameMaster/assetManager/partials/sprite/SpriteList.vue'
 import TileDetails from '@/components/gameMaster/assetManager/partials/tile/TileDetails.vue'

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

@@ -59,7 +59,7 @@ if (selectedCharacterHair.value) {
   characterName.value = selectedCharacterHair.value.name
   characterGender.value = selectedCharacterHair.value.gender
   characterIsSelectable.value = selectedCharacterHair.value.isSelectable
-  characterSpriteId.value = selectedCharacterHair.value.spriteId
+  characterSpriteId.value = selectedCharacterHair.value.sprite?.id
 }
 
 function removeCharacterHair() {
@@ -107,7 +107,7 @@ watch(selectedCharacterHair, (characterHair: CharacterHair | null) => {
   characterName.value = characterHair.name
   characterGender.value = characterHair.gender
   characterIsSelectable.value = characterHair.isSelectable
-  characterSpriteId.value = characterHair.spriteId
+  characterSpriteId.value = characterHair.sprite?.id
 })
 
 onMounted(() => {

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

@@ -93,6 +93,7 @@ function toTop() {
 
 onMounted(() => {
   gameStore.connection?.emit('gm:characterHair:list', {}, (response: CharacterHair[]) => {
+    console.log(response)
     assetManagerStore.setCharacterHairList(response)
   })
 })

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

@@ -68,7 +68,7 @@ if (selectedCharacterType.value) {
   characterGender.value = selectedCharacterType.value.gender
   characterRace.value = selectedCharacterType.value.race
   characterIsSelectable.value = selectedCharacterType.value.isSelectable
-  characterSpriteId.value = selectedCharacterType.value.spriteId
+  characterSpriteId.value = selectedCharacterType.value.sprite?.id
 }
 
 function removeCharacterType() {
@@ -118,7 +118,7 @@ watch(selectedCharacterType, (characterType: CharacterType | null) => {
   characterGender.value = characterType.gender
   characterRace.value = characterType.race
   characterIsSelectable.value = characterType.isSelectable
-  characterSpriteId.value = characterType.spriteId
+  characterSpriteId.value = characterType.sprite?.id
 })
 
 onMounted(() => {

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

@@ -93,6 +93,7 @@ function toTop() {
 
 onMounted(() => {
   gameStore.connection?.emit('gm:characterType:list', {}, (response: CharacterType[]) => {
+    console.log(response)
     assetManagerStore.setCharacterTypeList(response)
   })
 })

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

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

src/components/gameMaster/assetManager/partials/mapObject/MapObjectDetails.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="h-full overflow-auto">
+    <div class="relative p-2.5 flex flex-col items-center justify-center h-72 rounded-md default-border bg-gray">
+      <img class="max-h-56" :src="`${config.server_endpoint}/assets/map_objects/${selectedMapObject?.id}.png`" :alt="'Object ' + selectedMapObject?.id" />
+    </div>
+    <div class="mt-5 block">
+      <form class="flex gap-2.5 flex-wrap" @submit.prevent="saveObject">
+        <div class="form-field-full">
+          <label for="name">Name</label>
+          <input v-model="mapObjectName" class="input-field" type="text" name="name" placeholder="Wall #1" />
+        </div>
+        <div class="form-field-half">
+          <label for="origin-x">Origin X</label>
+          <input v-model="mapObjectOriginX" class="input-field" type="number" step="any" name="origin-x" placeholder="Origin X" />
+        </div>
+        <div class="form-field-half">
+          <label for="origin-y">Origin Y</label>
+          <input v-model="mapObjectOriginY" class="input-field" type="number" step="any" name="origin-y" placeholder="Origin Y" />
+        </div>
+        <div class="form-field-full">
+          <label for="tags">Tags</label>
+          <ChipsInput v-model="mapObjectTags" @update:modelValue="mapObjectTags = $event" />
+        </div>
+        <div class="form-field-full">
+          <label for="is-animated">Is animated</label>
+          <select v-model="mapObjectIsAnimated" class="input-field" name="is-animated">
+            <option :value="false">No</option>
+            <option :value="true">Yes</option>
+          </select>
+        </div>
+        <div class="form-field-full">
+          <label for="frame-speed">Frame rate</label>
+          <input v-model="mapObjectFrameRate" class="input-field" type="number" step="any" name="frame-speed" placeholder="Frame rate" />
+        </div>
+        <div class="form-field-half">
+          <label for="frame-width">Frame width</label>
+          <input v-model="mapObjectFrameWidth" class="input-field" type="number" step="any" name="frame-width" placeholder="Frame width" />
+        </div>
+        <div class="form-field-half">
+          <label for="frame-height">Frame height</label>
+          <input v-model="mapObjectFrameHeight" class="input-field" type="number" step="any" name="frame-height" placeholder="Frame height" />
+        </div>
+        <div class="flex gap-4">
+          <button class="btn-cyan px-4 py-1.5 min-w-24" type="submit">Save</button>
+          <button class="btn-red px-4 py-1.5 min-w-24" type="button" @click.prevent="removeObject">Delete</button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import config from '@/application/config'
+import type { MapObject } from '@/application/types'
+import ChipsInput from '@/components/forms/ChipsInput.vue'
+import { useAssetManagerStore } from '@/stores/assetManagerStore'
+import { useGameStore } from '@/stores/gameStore'
+import { useMapEditorStore } from '@/stores/mapEditorStore'
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
+const gameStore = useGameStore()
+const assetManagerStore = useAssetManagerStore()
+const mapEditorStore = useMapEditorStore()
+
+const selectedMapObject = computed(() => assetManagerStore.selectedMapObject)
+
+const mapObjectName = ref('')
+const mapObjectTags = ref<string[]>([])
+const mapObjectOriginX = ref(0)
+const mapObjectOriginY = ref(0)
+const mapObjectIsAnimated = ref(false)
+const mapObjectFrameRate = ref(0)
+const mapObjectFrameWidth = ref(0)
+const mapObjectFrameHeight = ref(0)
+
+if (!selectedMapObject.value) {
+  console.error('No map mapObject selected')
+}
+
+if (selectedMapObject.value) {
+  mapObjectName.value = selectedMapObject.value.name
+  mapObjectTags.value = selectedMapObject.value.tags
+  mapObjectOriginX.value = selectedMapObject.value.originX
+  mapObjectOriginY.value = selectedMapObject.value.originY
+  mapObjectIsAnimated.value = selectedMapObject.value.isAnimated
+  mapObjectFrameRate.value = selectedMapObject.value.frameRate
+  mapObjectFrameWidth.value = selectedMapObject.value.frameWidth
+  mapObjectFrameHeight.value = selectedMapObject.value.frameHeight
+}
+
+function removeObject() {
+  gameStore.connection?.emit('gm:mapObject:remove', { mapObject: selectedMapObject.value?.id }, (response: boolean) => {
+    if (!response) {
+      console.error('Failed to remove mapObject')
+      return
+    }
+    refreshObjectList()
+  })
+}
+
+function refreshObjectList(unsetSelectedObject = true) {
+  gameStore.connection?.emit('gm:mapObject:list', {}, (response: MapObject[]) => {
+    assetManagerStore.setMapObjectList(response)
+
+    if (unsetSelectedObject) {
+      assetManagerStore.setSelectedMapObject(null)
+    }
+
+    if (mapEditorStore.active) {
+      mapEditorStore.setMapObjectList(response)
+    }
+  })
+}
+
+function saveObject() {
+  if (!selectedMapObject.value) {
+    console.error('No mapObject selected')
+    return
+  }
+
+  gameStore.connection?.emit(
+    'gm:mapObject:update',
+    {
+      id: selectedMapObject.value.id,
+      name: mapObjectName.value,
+      tags: mapObjectTags.value,
+      originX: mapObjectOriginX.value,
+      originY: mapObjectOriginY.value,
+      isAnimated: mapObjectIsAnimated.value,
+      frameRate: mapObjectFrameRate.value,
+      frameWidth: mapObjectFrameWidth.value,
+      frameHeight: mapObjectFrameHeight.value
+    },
+    (response: boolean) => {
+      if (!response) {
+        console.error('Failed to save mapObject')
+        return
+      }
+      refreshObjectList(false)
+    }
+  )
+}
+
+watch(selectedMapObject, (mapObject: MapObject | null) => {
+  if (!mapObject) return
+  mapObjectName.value = mapObject.name
+  mapObjectTags.value = mapObject.tags
+  mapObjectOriginX.value = mapObject.originX
+  mapObjectOriginY.value = mapObject.originY
+  mapObjectIsAnimated.value = mapObject.isAnimated
+  mapObjectFrameRate.value = mapObject.frameRate
+  mapObjectFrameWidth.value = mapObject.frameWidth
+  mapObjectFrameHeight.value = mapObject.frameHeight
+})
+
+onMounted(() => {
+  if (!selectedMapObject.value) return
+})
+
+onBeforeUnmount(() => {
+  assetManagerStore.setSelectedMapObject(null)
+})
+</script>

src/components/gameMaster/assetManager/partials/mapObject/MapObjectList.vue

@@ -10,12 +10,12 @@
   </div>
   <div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
     <div v-bind="wrapperProps" ref="elementToScroll">
-      <a v-for="{ data: object } in list" :key="object.id" class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group" :class="{ 'bg-cyan': assetManagerStore.selectedObject?.id === object.id }" @click="assetManagerStore.setSelectedObject(object as Object)">
+      <a v-for="{ data: mapObject } in list" :key="mapObject.id" class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group" :class="{ 'bg-cyan': assetManagerStore.selectedMapObject?.id === mapObject.id }" @click="assetManagerStore.setSelectedMapObject(mapObject as MapObject)">
         <div class="flex items-center gap-2.5">
           <div class="h-7 w-16 max-w-16 flex justify-center">
-            <img class="h-7" :src="`${config.server_endpoint}/assets/objects/${object.id}.png`" alt="Object" />
+            <img class="h-7" :src="`${config.server_endpoint}/assets/map_objects/${mapObject.id}.png`" alt="Object" />
           </div>
-          <span :class="{ 'text-white': assetManagerStore.selectedObject?.id === object.id }">{{ object.name }}</span>
+          <span :class="{ 'text-white': assetManagerStore.selectedMapObject?.id === mapObject.id }">{{ mapObject.name }}</span>
         </div>
       </a>
     </div>
@@ -29,7 +29,7 @@
 
 <script setup lang="ts">
 import config from '@/application/config'
-import type { Object } from '@/application/types'
+import type { MapObject } from '@/application/types'
 import { useAssetManagerStore } from '@/stores/assetManagerStore'
 import { useGameStore } from '@/stores/gameStore'
 import { useVirtualList } from '@vueuse/core'
@@ -47,14 +47,15 @@ const elementToScroll = ref()
 const handleFileUpload = (e: Event) => {
   const files = (e.target as HTMLInputElement).files
   if (!files) return
-  gameStore.connection?.emit('gm:object:upload', files, (response: boolean) => {
+  gameStore.connection?.emit('gm:mapObject:upload', files, (response: boolean) => {
+    console.log(response)
     if (!response) {
       if (config.development) console.error('Failed to upload object')
       return
     }
 
-    gameStore.connection?.emit('gm:object:list', {}, (response: Object[]) => {
+    gameStore.connection?.emit('gm:mapObject:list', {}, (response: MapObject[]) => {
-      assetManagerStore.setObjectList(response)
+      assetManagerStore.setMapObjectList(response)
     })
   })
 }
@@ -66,9 +67,9 @@ const handleSearch = () => {
 
 const filteredObjects = computed(() => {
   if (!searchQuery.value) {
-    return assetManagerStore.objectList
+    return assetManagerStore.mapObjectList
   }
-  return assetManagerStore.objectList.filter((object) => object.name.toLowerCase().includes(searchQuery.value.toLowerCase()))
+  return assetManagerStore.mapObjectList.filter((object) => object.name.toLowerCase().includes(searchQuery.value.toLowerCase()))
 })
 
 const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(filteredObjects, {
@@ -92,8 +93,9 @@ function toTop() {
 }
 
 onMounted(() => {
-  gameStore.connection?.emit('gm:object:list', {}, (response: Object[]) => {
+  gameStore.connection?.emit('gm:mapObject:list', {}, (response: MapObject[]) => {
-    assetManagerStore.setObjectList(response)
+    console.log(response)
+    assetManagerStore.setMapObjectList(response)
   })
 })
 </script>

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

@@ -1,163 +0,0 @@
-<template>
-  <div class="h-full overflow-auto">
-    <div class="relative p-2.5 flex flex-col items-center justify-center h-72 rounded-md default-border bg-gray">
-      <img class="max-h-56" :src="`${config.server_endpoint}/assets/objects/${selectedObject?.id}.png`" :alt="'Object ' + selectedObject?.id" />
-    </div>
-    <div class="mt-5 block">
-      <form class="flex gap-2.5 flex-wrap" @submit.prevent="saveObject">
-        <div class="form-field-full">
-          <label for="name">Name</label>
-          <input v-model="objectName" class="input-field" type="text" name="name" placeholder="Wall #1" />
-        </div>
-        <div class="form-field-half">
-          <label for="origin-x">Origin X</label>
-          <input v-model="objectOriginX" class="input-field" type="number" step="any" name="origin-x" placeholder="Origin X" />
-        </div>
-        <div class="form-field-half">
-          <label for="origin-y">Origin Y</label>
-          <input v-model="objectOriginY" class="input-field" type="number" step="any" name="origin-y" placeholder="Origin Y" />
-        </div>
-        <div class="form-field-full">
-          <label for="tags">Tags</label>
-          <ChipsInput v-model="objectTags" @update:modelValue="objectTags = $event" />
-        </div>
-        <div class="form-field-full">
-          <label for="is-animated">Is animated</label>
-          <select v-model="objectIsAnimated" class="input-field" name="is-animated">
-            <option :value="false">No</option>
-            <option :value="true">Yes</option>
-          </select>
-        </div>
-        <div class="form-field-full">
-          <label for="frame-speed">Frame rate</label>
-          <input v-model="objectFrameRate" class="input-field" type="number" step="any" name="frame-speed" placeholder="Frame rate" />
-        </div>
-        <div class="form-field-half">
-          <label for="frame-width">Frame width</label>
-          <input v-model="objectFrameWidth" class="input-field" type="number" step="any" name="frame-width" placeholder="Frame width" />
-        </div>
-        <div class="form-field-half">
-          <label for="frame-height">Frame height</label>
-          <input v-model="objectFrameHeight" class="input-field" type="number" step="any" name="frame-height" placeholder="Frame height" />
-        </div>
-        <div class="flex gap-4">
-          <button class="btn-cyan px-4 py-1.5 min-w-24" type="submit">Save</button>
-          <button class="btn-red px-4 py-1.5 min-w-24" type="button" @click.prevent="removeObject">Delete</button>
-        </div>
-      </form>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import 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 { useMapEditorStore } from '@/stores/mapEditorStore'
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-
-const gameStore = useGameStore()
-const assetManagerStore = useAssetManagerStore()
-const mapEditorStore = useMapEditorStore()
-
-const selectedObject = computed(() => assetManagerStore.selectedObject)
-
-const objectName = ref('')
-const objectTags = ref<string[]>([])
-const objectOriginX = ref(0)
-const objectOriginY = ref(0)
-const objectIsAnimated = ref(false)
-const objectFrameRate = ref(0)
-const objectFrameWidth = ref(0)
-const objectFrameHeight = ref(0)
-
-if (!selectedObject.value) {
-  console.error('No object selected')
-}
-
-if (selectedObject.value) {
-  objectName.value = selectedObject.value.name
-  objectTags.value = selectedObject.value.tags
-  objectOriginX.value = selectedObject.value.originX
-  objectOriginY.value = selectedObject.value.originY
-  objectIsAnimated.value = selectedObject.value.isAnimated
-  objectFrameRate.value = selectedObject.value.frameRate
-  objectFrameWidth.value = selectedObject.value.frameWidth
-  objectFrameHeight.value = selectedObject.value.frameHeight
-}
-
-function removeObject() {
-  gameStore.connection?.emit('gm:object:remove', { object: selectedObject.value?.id }, (response: boolean) => {
-    if (!response) {
-      console.error('Failed to remove object')
-      return
-    }
-    refreshObjectList()
-  })
-}
-
-function refreshObjectList(unsetSelectedObject = true) {
-  gameStore.connection?.emit('gm:object:list', {}, (response: Object[]) => {
-    assetManagerStore.setObjectList(response)
-
-    if (unsetSelectedObject) {
-      assetManagerStore.setSelectedObject(null)
-    }
-
-    if (mapEditorStore.active) {
-      mapEditorStore.setObjectList(response)
-    }
-  })
-}
-
-function saveObject() {
-  if (!selectedObject.value) {
-    console.error('No object selected')
-    return
-  }
-
-  gameStore.connection?.emit(
-    'gm:object:update',
-    {
-      id: selectedObject.value.id,
-      name: objectName.value,
-      tags: objectTags.value,
-      originX: objectOriginX.value,
-      originY: objectOriginY.value,
-      isAnimated: objectIsAnimated.value,
-      frameRate: objectFrameRate.value,
-      frameWidth: objectFrameWidth.value,
-      frameHeight: objectFrameHeight.value
-    },
-    (response: boolean) => {
-      if (!response) {
-        console.error('Failed to save object')
-        return
-      }
-      refreshObjectList(false)
-    }
-  )
-}
-
-watch(selectedObject, (object: Object | null) => {
-  if (!object) return
-  objectName.value = object.name
-  objectTags.value = object.tags
-  objectOriginX.value = object.originX
-  objectOriginY.value = object.originY
-  objectIsAnimated.value = object.isAnimated
-  objectFrameRate.value = object.frameRate
-  objectFrameWidth.value = object.frameWidth
-  objectFrameHeight.value = object.frameHeight
-})
-
-onMounted(() => {
-  if (!selectedObject.value) return
-})
-
-onBeforeUnmount(() => {
-  assetManagerStore.setSelectedObject(null)
-})
-</script>

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

@@ -184,6 +184,7 @@ function addNewImage() {
 }
 
 function sortSpriteActions(actions: SpriteAction[]): SpriteAction[] {
+  if (!actions) return []
   return [...actions].sort((a, b) => a.action.localeCompare(b.action))
 }
 

src/components/gameMaster/mapEditor/MapEditor.vue

@@ -15,16 +15,16 @@
 
 <script setup lang="ts">
 import { type Map } from '@/application/types'
+import MapEventTiles from '@/components/gameMaster/mapEditor/mapPartials/MapEventTiles.vue'
+import MapObjects from '@/components/gameMaster/mapEditor/mapPartials/MapObjects.vue'
+import MapTiles from '@/components/gameMaster/mapEditor/mapPartials/MapTiles.vue'
+import MapList from '@/components/gameMaster/mapEditor/partials/MapList.vue'
+import MapSettings from '@/components/gameMaster/mapEditor/partials/MapSettings.vue'
 import ObjectList from '@/components/gameMaster/mapEditor/partials/ObjectList.vue'
 import TeleportModal from '@/components/gameMaster/mapEditor/partials/TeleportModal.vue'
 import TileList from '@/components/gameMaster/mapEditor/partials/TileList.vue'
 // Components
 import Toolbar from '@/components/gameMaster/mapEditor/partials/Toolbar.vue'
-import MapList from '@/components/gameMaster/mapEditor/partials/MapList.vue'
-import MapSettings from '@/components/gameMaster/mapEditor/partials/MapSettings.vue'
-import MapEventTiles from '@/components/gameMaster/mapEditor/mapPartials/MapEventTiles.vue'
-import MapObjects from '@/components/gameMaster/mapEditor/mapPartials/MapObjects.vue'
-import MapTiles from '@/components/gameMaster/mapEditor/mapPartials/MapTiles.vue'
 import { useGameStore } from '@/stores/gameStore'
 import { useMapEditorStore } from '@/stores/mapEditorStore'
 import { onUnmounted, ref } from 'vue'
@@ -38,7 +38,7 @@ function clear() {
   if (!mapEditorStore.map) return
 
   // Clear objects, event tiles and tiles
-  mapEditorStore.map.mapObjects = []
+  mapEditorStore.map.placedMapObjects = []
   mapEditorStore.map.mapEventTiles = []
   mapEditorStore.triggerClearTiles()
 }
@@ -55,14 +55,14 @@ function save() {
     pvp: mapEditorStore.map.pvp,
     mapEffects: mapEditorStore.map.mapEffects.map(({ id, mapId, effect, strength }) => ({ id, mapId, effect, strength })),
     mapEventTiles: mapEditorStore.map.mapEventTiles.map(({ id, mapId, type, positionX, positionY, teleport }) => ({ id, mapId, type, positionX, positionY, teleport })),
-    mapObjects: mapEditorStore.map.mapObjects.map(({ id, mapId, objectId, depth, isRotated, positionX, positionY }) => ({ id, mapId, objectId, depth, isRotated, positionX, positionY }))
+    placedMapObjects: mapEditorStore.map.placedMapObjects.map(({ id, mapId, objectId, depth, isRotated, positionX, positionY }) => ({ id, mapId, objectId, depth, isRotated, positionX, positionY }))
   }
 
   if (mapEditorStore.isSettingsModalShown) {
     mapEditorStore.toggleSettingsModal()
   }
 
-  gameStore.connection?.emit('gm:map_editor:map:update', data, (response: Map) => {
+  gameStore.connection?.emit('gm:map:update', data, (response: Map) => {
     mapEditorStore.setMap(response)
   })
 }

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

@@ -6,8 +6,8 @@
 <script setup lang="ts">
 import type { PlacedMapObject as MapObjectT } from '@/application/types'
 import { uuidv4 } from '@/application/utilities'
-import SelectedMapObject from '@/components/gameMaster/mapEditor/partials/SelectedMapObject.vue'
 import MapObject from '@/components/gameMaster/mapEditor/mapPartials/MapObject.vue'
+import SelectedMapObject from '@/components/gameMaster/mapEditor/partials/SelectedMapObject.vue'
 import { getTile } from '@/composables/mapComposable'
 import { useMapEditorStore } from '@/stores/mapEditorStore'
 import { useScene } from 'phavuer'
@@ -65,7 +65,7 @@ function pencil(pointer: Phaser.Input.Pointer) {
   }
 
   // Add new object to mapObjects
-  mapEditorStore.map.mapObjects = mapEditorStore.map.mapObjects.concat(newObject as MapObjectT)
+  mapEditorStore.map.placedMapObjects = mapEditorStore.map.placedMapObjects.concat(newObject as MapObjectT)
 }
 
 function eraser(pointer: Phaser.Input.Pointer) {
@@ -92,11 +92,11 @@ function eraser(pointer: Phaser.Input.Pointer) {
   if (!tile) return
 
   // Check if object already exists on position
-  const existingObject = mapEditorStore.map.mapObjects.find((object) => object.positionX === tile.x && object.positionY === tile.y)
+  const existingObject = mapEditorStore.map.placedMapObjects.find((object) => object.positionX === tile.x && object.positionY === tile.y)
   if (!existingObject) return
 
   // Remove existing object
-  mapEditorStore.map.mapObjects = mapEditorStore.map.mapObjects.filter((object) => object.id !== existingObject.id)
+  mapEditorStore.map.placedMapObjects = mapEditorStore.map.placedMapObjects.filter((object) => object.id !== existingObject.id)
 }
 
 function objectPicker(pointer: Phaser.Input.Pointer) {
@@ -123,7 +123,7 @@ function objectPicker(pointer: Phaser.Input.Pointer) {
   if (!tile) return
 
   // Check if object already exists on position
-  const existingObject = mapEditorStore.map.mapObjects.find((object) => object.positionX === tile.x && object.positionY === tile.y)
+  const existingObject = mapEditorStore.map.placedMapObjects.find((object) => object.positionX === tile.x && object.positionY === tile.y)
   if (!existingObject) return
 
   // Select the object
@@ -134,7 +134,7 @@ function moveMapObject(id: string) {
   // Check if map is set
   if (!mapEditorStore.map) return
 
-  movingMapObject.value = mapEditorStore.map.mapObjects.find((object) => object.id === id) as MapObjectT
+  movingMapObject.value = mapEditorStore.map.placedMapObjects.find((object) => object.id === id) as MapObjectT
 
   function handlePointerMove(pointer: Phaser.Input.Pointer) {
     if (!movingMapObject.value) return
@@ -160,7 +160,7 @@ function rotateMapObject(id: string) {
   // Check if map is set
   if (!mapEditorStore.map) return
 
-  mapEditorStore.map.mapObjects = mapEditorStore.map.mapObjects.map((object) => {
+  mapEditorStore.map.placedMapObjects = mapEditorStore.map.placedMapObjects.map((object) => {
     if (object.id === id) {
       return {
         ...object,
@@ -175,7 +175,7 @@ function deleteMapObject(id: string) {
   // Check if map is set
   if (!mapEditorStore.map) return
 
-  mapEditorStore.map.mapObjects = mapEditorStore.map.mapObjects.filter((object) => object.id !== id)
+  mapEditorStore.map.placedMapObjects = mapEditorStore.map.placedMapObjects.filter((object) => object.id !== id)
   selectedMapObject.value = null
 }
 
@@ -210,7 +210,8 @@ watch(
   (newObjects) => {
     if (!mapEditorStore.map) return
 
-    const updatedMapObjects = mapEditorStore.map.mapObjects.map((mapObject) => {
+    console.log(mapEditorStore.map.placedMapObjects)
+    const updatedMapObjects = mapEditorStore.map.placedMapObjects.map((mapObject) => {
       const updatedObject = newObjects.find((obj) => obj.id === mapObject.object.id)
       if (updatedObject) {
         return {

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

@@ -50,7 +50,7 @@ const width = ref(0)
 const height = ref(0)
 
 function submit() {
-  gameStore.connection.emit('gm:map_editor:map:create', { name: name.value, width: width.value, height: height.value }, (response: Map[]) => {
+  gameStore.connection.emit('gm:mapObject:create', { name: name.value, width: width.value, height: height.value }, (response: Map[]) => {
     mapEditorStore.setMapList(response)
   })
   mapEditorStore.toggleCreateMapModal()

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

@@ -41,20 +41,20 @@ onMounted(async () => {
 })
 
 function fetchMaps() {
-  gameStore.connection?.emit('gm:map_editor:map:list', {}, (response: Map[]) => {
+  gameStore.connection?.emit('gm:mapObject:list', {}, (response: Map[]) => {
     mapEditorStore.setMapList(response)
   })
 }
 
 function loadMap(id: number) {
-  gameStore.connection?.emit('gm:map_editor:map:request', { mapId: id }, (response: Map) => {
+  gameStore.connection?.emit('gm:mapObject:request', { mapId: id }, (response: Map) => {
     mapEditorStore.setMap(response)
   })
   mapEditorStore.toggleMapListModal()
 }
 
 function deleteMap(id: number) {
-  gameStore.connection?.emit('gm:map_editor:map:delete', { mapId: id }, () => {
+  gameStore.connection?.emit('gm:mapObject:delete', { mapId: id }, () => {
     fetchMaps()
   })
 }

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

@@ -42,7 +42,7 @@
 
 <script setup lang="ts">
 import config from '@/application/config'
-import type { Object, PlacedMapObject } from '@/application/types'
+import type { MapObject, PlacedMapObject } from '@/application/types'
 import Modal from '@/components/utilities/Modal.vue'
 import { useGameStore } from '@/stores/gameStore'
 import { useMapEditorStore } from '@/stores/mapEditorStore'
@@ -77,8 +77,8 @@ const toggleTag = (tag: string) => {
 
 onMounted(async () => {
   isModalOpen.value = true
-  gameStore.connection?.emit('gm:object:list', {}, (response: Object[]) => {
+  gameStore.connection?.emit('gm:mapObject:list', {}, (response: MapObject[]) => {
-    mapEditorStore.setObjectList(response)
+    mapEditorStore.setMapObjectList(response)
   })
 })
 </script>

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

@@ -52,7 +52,7 @@ const gameStore = useGameStore()
 onMounted(fetchMaps)
 
 function fetchMaps() {
-  gameStore.connection?.emit('gm:map_editor:map:list', {}, (response: Map[]) => {
+  gameStore.connection?.emit('gm:mapObject:list', {}, (response: Map[]) => {
     mapEditorStore.setMapList(response)
   })
 }

src/components/gui/Chat.vue

@@ -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/screens/Characters.vue

@@ -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
 
@@ -174,7 +174,7 @@ function loginWithCharacter() {
 
 // 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/MapEditor.vue

@@ -72,8 +72,9 @@ const preloadScene = async (scene: Phaser.Scene) => {
    * Then load them into the scene.
    */
   scene.load.rexAwait(async function (successCallback: any) {
-    const tiles: AssetDataT[] = await fetch(config.server_endpoint + '/assets/list_tiles').then((response) => response.json())
+    const tiles: { data: AssetDataT[] } = await fetch(config.server_endpoint + '/assets/list_tiles').then((response) => response.json())
-    for await (const tile of tiles) {
+
+    for await (const tile of tiles?.data ?? []) {
       await loadTexture(scene, tile)
     }
 

src/stores/assetManagerStore.ts

@@ -1,4 +1,4 @@
-import type { CharacterHair, CharacterType, Item, Object, Sprite, Tile } from '@/application/types'
+import type { CharacterHair, CharacterType, Item, MapObject, Sprite, Tile } from '@/application/types'
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
 
@@ -6,8 +6,8 @@ export const useAssetManagerStore = defineStore('assetManager', () => {
   const tileList = ref<Tile[]>([])
   const selectedTile = ref<Tile | null>(null)
 
-  const objectList = ref<Object[]>([])
+  const mapObjectList = ref<MapObject[]>([])
-  const selectedObject = ref<Object | null>(null)
+  const selectedMapObject = ref<MapObject | null>(null)
 
   const spriteList = ref<Sprite[]>([])
   const selectedSprite = ref<Sprite | null>(null)
@@ -29,12 +29,12 @@ export const useAssetManagerStore = defineStore('assetManager', () => {
     selectedTile.value = tile
   }
 
-  function setObjectList(objects: Object[]) {
+  function setMapObjectList(objects: MapObject[]) {
-    objectList.value = objects
+    mapObjectList.value = objects
   }
 
-  function setSelectedObject(object: Object | null) {
+  function setSelectedObject(object: MapObject | null) {
-    selectedObject.value = object
+    selectedMapObject.value = object
   }
 
   function setSpriteList(sprites: Sprite[]) {
@@ -72,8 +72,8 @@ export const useAssetManagerStore = defineStore('assetManager', () => {
   return {
     tileList,
     selectedTile,
-    objectList,
+    mapObjectList,
-    selectedObject,
+    selectedMapObject,
     spriteList,
     selectedSprite,
     characterTypeList,
@@ -84,9 +84,9 @@ export const useAssetManagerStore = defineStore('assetManager', () => {
     selectedItem,
     setTileList,
     setSelectedTile,
-    setObjectList,
+    setMapObjectList,
     setCharacterTypeList,
-    setSelectedObject,
+    setSelectedMapObject: setSelectedObject,
     setSpriteList,
     setSelectedSprite,
     setSelectedCharacterType,

src/stores/mapEditorStore.ts

@@ -1,4 +1,4 @@
-import type { Object, Tile, Map, MapEffect, PlacedMapObject } from '@/application/types'
+import type { Map, MapEffect, MapObject, PlacedMapObject, Tile } from '@/application/types'
 import { useGameStore } from '@/stores/gameStore'
 import { defineStore } from 'pinia'
 
@@ -19,11 +19,11 @@ export const useMapEditorStore = defineStore('mapEditor', {
       eraserMode: 'tile',
       mapList: [] as Map[],
       tileList: [] as Tile[],
-      objectList: [] as Object[],
+      mapObjectList: [] as MapObject[],
       selectedTile: '',
-      selectedObject: null as Object | null,
+      selectedObject: null as MapObject | null,
       isTileListModalShown: false,
-      isObjectListModalShown: false,
+      isMapObjectListModalShown: false,
       isMapListModalShown: false,
       isCreateMapModalShown: false,
       isSettingsModalShown: false,
@@ -85,13 +85,13 @@ export const useMapEditorStore = defineStore('mapEditor', {
     setTileList(tiles: Tile[]) {
       this.tileList = tiles
     },
-    setObjectList(objects: Object[]) {
+    setMapObjectList(objects: MapObject[]) {
-      this.objectList = objects
+      this.mapObjectList = objects
     },
     setSelectedTile(tile: string) {
       this.selectedTile = tile
     },
-    setSelectedObject(object: Object) {
+    setSelectedObject(object: MapObject) {
       this.selectedObject = object
     },
     toggleSettingsModal() {
@@ -118,13 +118,13 @@ export const useMapEditorStore = defineStore('mapEditor', {
       if (resetMap) this.map = null
       this.mapList = []
       this.tileList = []
-      this.objectList = []
+      this.mapObjectList = []
       this.tool = 'move'
       this.drawMode = 'tile'
       this.selectedTile = ''
       this.selectedObject = null
       this.isTileListModalShown = false
-      this.isObjectListModalShown = false
+      this.isMapObjectListModalShown = false
       this.isSettingsModalShown = false
       this.isMapListModalShown = false
       this.isCreateMapModalShown = false

src/stores/mapStore.ts

@@ -1,4 +1,4 @@
-import type { Map, MapCharacter } from '@/application/types'
+import type { Map, MapCharacter, UUID } from '@/application/types'
 import { defineStore } from 'pinia'
 
 export const useMapStore = defineStore('map', {
@@ -11,7 +11,7 @@ export const useMapStore = defineStore('map', {
   },
   getters: {
     getCharacterById: (state) => {
-      return (id: number) => state.characters.find((char) => char.character.id === id)
+      return (id: UUID) => state.characters.find((char) => char.character.id === id)
     },
     getCharacterCount: (state) => {
       return state.characters.length
@@ -34,13 +34,13 @@ export const useMapStore = defineStore('map', {
       const index = this.characters.findIndex((char) => char.character.id === updatedCharacter.character.id)
       if (index !== -1) this.characters[index] = updatedCharacter
     },
-    removeCharacter(characterId: number) {
+    removeCharacter(characterId: UUID) {
       this.characters = this.characters.filter((char) => char.character.id !== characterId)
     },
     setCharacterLoaded(loaded: boolean) {
       this.characterLoaded = loaded
     },
-    updateCharacterPosition(data: { characterId: number; positionX: number; positionY: number; rotation: number; isMoving: boolean }) {
+    updateCharacterPosition(data: { characterId: UUID; 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