diff --git a/src/application/types.ts b/src/application/types.ts index 2ea2bce..5f337f8 100644 --- a/src/application/types.ts +++ b/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 - object: Object + mapObject: MapObject 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 diff --git a/src/components/Effects.vue b/src/components/Effects.vue index 610e406..ab90819 100644 --- a/src/components/Effects.vue +++ b/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 = () => { diff --git a/src/components/game/character/Character.vue b/src/components/game/character/Character.vue index 2fda954..9a88243 100644 --- a/src/components/game/character/Character.vue +++ b/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' diff --git a/src/components/game/character/partials/CharacterChest.vue b/src/components/game/character/partials/CharacterChest.vue index 53a8568..46ed337 100644 --- a/src/components/game/character/partials/CharacterChest.vue +++ b/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' diff --git a/src/components/game/character/partials/CharacterHair.vue b/src/components/game/character/partials/CharacterHair.vue index a842ce3..23a651c 100644 --- a/src/components/game/character/partials/CharacterHair.vue +++ b/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' diff --git a/src/components/game/map/Map.vue b/src/components/game/map/Map.vue index 55c806d..2cc1579 100644 --- a/src/components/game/map/Map.vue +++ b/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:join') - gameStore.connection!.off('map:character:leave') - gameStore.connection!.off('map:character:move') + gameStore.connection?.off('map:character:teleport') + gameStore.connection?.off('map:character:join') + gameStore.connection?.off('map:character:leave') + 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> diff --git a/src/components/gameMaster/assetManager/AssetManager.vue b/src/components/gameMaster/assetManager/AssetManager.vue index ab08a13..fc7c2bc 100644 --- a/src/components/gameMaster/assetManager/AssetManager.vue +++ b/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')"> - <span class="group-hover:text-white" :class="{ 'text-white': selectedCategory === 'objects' }">Objects</span> + <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group" :class="{ 'bg-cyan': selectedCategory === 'map_objects' }" @click="() => (selectedCategory = 'map_objects')"> + <span class="group-hover:text-white" :class="{ 'text-white': selectedCategory === 'map_objects' }">Map objects</span> </a> <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 ObjectList from '@/components/gameMaster/assetManager/partials/object/ObjectList.vue' +import MapObjectDetails from '@/components/gameMaster/assetManager/partials/mapObject/MapObjectDetails.vue' +import MapObjectList from '@/components/gameMaster/assetManager/partials/mapObject/MapObjectList.vue' import SpriteDetails from '@/components/gameMaster/assetManager/partials/sprite/SpriteDetails.vue' import SpriteList from '@/components/gameMaster/assetManager/partials/sprite/SpriteList.vue' import TileDetails from '@/components/gameMaster/assetManager/partials/tile/TileDetails.vue' diff --git a/src/components/gameMaster/assetManager/partials/characterHair/CharacterHairDetails.vue b/src/components/gameMaster/assetManager/partials/characterHair/CharacterHairDetails.vue index 0d6de91..71f5501 100644 --- a/src/components/gameMaster/assetManager/partials/characterHair/CharacterHairDetails.vue +++ b/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(() => { diff --git a/src/components/gameMaster/assetManager/partials/characterHair/CharacterHairList.vue b/src/components/gameMaster/assetManager/partials/characterHair/CharacterHairList.vue index d2df36f..e675c4a 100644 --- a/src/components/gameMaster/assetManager/partials/characterHair/CharacterHairList.vue +++ b/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) }) }) diff --git a/src/components/gameMaster/assetManager/partials/characterType/CharacterTypeDetails.vue b/src/components/gameMaster/assetManager/partials/characterType/CharacterTypeDetails.vue index ed02aef..11a4155 100644 --- a/src/components/gameMaster/assetManager/partials/characterType/CharacterTypeDetails.vue +++ b/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(() => { diff --git a/src/components/gameMaster/assetManager/partials/characterType/CharacterTypeList.vue b/src/components/gameMaster/assetManager/partials/characterType/CharacterTypeList.vue index c75f0b5..0555677 100644 --- a/src/components/gameMaster/assetManager/partials/characterType/CharacterTypeList.vue +++ b/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) }) }) diff --git a/src/components/gameMaster/assetManager/partials/item/itemDetails.vue b/src/components/gameMaster/assetManager/partials/item/itemDetails.vue index f8b0408..35db9b3 100644 --- a/src/components/gameMaster/assetManager/partials/item/itemDetails.vue +++ b/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' diff --git a/src/components/gameMaster/assetManager/partials/mapObject/MapObjectDetails.vue b/src/components/gameMaster/assetManager/partials/mapObject/MapObjectDetails.vue new file mode 100644 index 0000000..1d3320d --- /dev/null +++ b/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> diff --git a/src/components/gameMaster/assetManager/partials/object/ObjectList.vue b/src/components/gameMaster/assetManager/partials/mapObject/MapObjectList.vue similarity index 74% rename from src/components/gameMaster/assetManager/partials/object/ObjectList.vue rename to src/components/gameMaster/assetManager/partials/mapObject/MapObjectList.vue index 3cee279..3b6748c 100644 --- a/src/components/gameMaster/assetManager/partials/object/ObjectList.vue +++ b/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[]) => { - assetManagerStore.setObjectList(response) + gameStore.connection?.emit('gm:mapObject:list', {}, (response: MapObject[]) => { + 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[]) => { - assetManagerStore.setObjectList(response) + gameStore.connection?.emit('gm:mapObject:list', {}, (response: MapObject[]) => { + console.log(response) + assetManagerStore.setMapObjectList(response) }) }) </script> diff --git a/src/components/gameMaster/assetManager/partials/object/ObjectDetails.vue b/src/components/gameMaster/assetManager/partials/object/ObjectDetails.vue deleted file mode 100644 index 3fa181c..0000000 --- a/src/components/gameMaster/assetManager/partials/object/ObjectDetails.vue +++ /dev/null @@ -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> diff --git a/src/components/gameMaster/assetManager/partials/sprite/SpriteDetails.vue b/src/components/gameMaster/assetManager/partials/sprite/SpriteDetails.vue index f0cea3f..f11d55a 100644 --- a/src/components/gameMaster/assetManager/partials/sprite/SpriteDetails.vue +++ b/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)) } diff --git a/src/components/gameMaster/mapEditor/MapEditor.vue b/src/components/gameMaster/mapEditor/MapEditor.vue index e274cfe..5e90323 100644 --- a/src/components/gameMaster/mapEditor/MapEditor.vue +++ b/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) }) } diff --git a/src/components/gameMaster/mapEditor/mapPartials/MapObjects.vue b/src/components/gameMaster/mapEditor/mapPartials/MapObjects.vue index ba9475e..53785cb 100644 --- a/src/components/gameMaster/mapEditor/mapPartials/MapObjects.vue +++ b/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 { diff --git a/src/components/gameMaster/mapEditor/partials/CreateMap.vue b/src/components/gameMaster/mapEditor/partials/CreateMap.vue index fdcd601..73cf9e8 100644 --- a/src/components/gameMaster/mapEditor/partials/CreateMap.vue +++ b/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() diff --git a/src/components/gameMaster/mapEditor/partials/MapList.vue b/src/components/gameMaster/mapEditor/partials/MapList.vue index 367d3b8..1f6546a 100644 --- a/src/components/gameMaster/mapEditor/partials/MapList.vue +++ b/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() }) } diff --git a/src/components/gameMaster/mapEditor/partials/ObjectList.vue b/src/components/gameMaster/mapEditor/partials/ObjectList.vue index 8378a5a..1eb83cc 100644 --- a/src/components/gameMaster/mapEditor/partials/ObjectList.vue +++ b/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[]) => { - mapEditorStore.setObjectList(response) + gameStore.connection?.emit('gm:mapObject:list', {}, (response: MapObject[]) => { + mapEditorStore.setMapObjectList(response) }) }) </script> diff --git a/src/components/gameMaster/mapEditor/partials/TeleportModal.vue b/src/components/gameMaster/mapEditor/partials/TeleportModal.vue index a8f6846..5a0906b 100644 --- a/src/components/gameMaster/mapEditor/partials/TeleportModal.vue +++ b/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) }) } diff --git a/src/components/gui/Chat.vue b/src/components/gui/Chat.vue index 41dc82d..83de408 100644 --- a/src/components/gui/Chat.vue +++ b/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() diff --git a/src/components/gui/Clock.vue b/src/components/gui/Clock.vue index e3ed41d..cebb827 100644 --- a/src/components/gui/Clock.vue +++ b/src/components/gui/Clock.vue @@ -11,7 +11,7 @@ import { onUnmounted } from 'vue' const gameStore = useGameStore() // Listen for new date from socket -gameStore.connection!.on('date', (data: Date) => { +gameStore.connection?.on('date', (data: Date) => { gameStore.world.date = new Date(data) }) diff --git a/src/components/screens/Characters.vue b/src/components/screens/Characters.vue index 741b663..36fe0a5 100644 --- a/src/components/screens/Characters.vue +++ b/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 }) diff --git a/src/components/screens/MapEditor.vue b/src/components/screens/MapEditor.vue index 0f8bc1c..6c22b62 100644 --- a/src/components/screens/MapEditor.vue +++ b/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()) - for await (const tile of tiles) { + const tiles: { data: AssetDataT[] } = await fetch(config.server_endpoint + '/assets/list_tiles').then((response) => response.json()) + + for await (const tile of tiles?.data ?? []) { await loadTexture(scene, tile) } diff --git a/src/stores/assetManagerStore.ts b/src/stores/assetManagerStore.ts index eda0180..edcd128 100644 --- a/src/stores/assetManagerStore.ts +++ b/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 selectedObject = ref<Object | null>(null) + const mapObjectList = ref<MapObject[]>([]) + 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[]) { - objectList.value = objects + function setMapObjectList(objects: MapObject[]) { + mapObjectList.value = objects } - function setSelectedObject(object: Object | null) { - selectedObject.value = object + function setSelectedObject(object: MapObject | null) { + selectedMapObject.value = object } function setSpriteList(sprites: Sprite[]) { @@ -72,8 +72,8 @@ export const useAssetManagerStore = defineStore('assetManager', () => { return { tileList, selectedTile, - objectList, - selectedObject, + mapObjectList, + 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, diff --git a/src/stores/mapEditorStore.ts b/src/stores/mapEditorStore.ts index def8757..85dfd4b 100644 --- a/src/stores/mapEditorStore.ts +++ b/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[]) { - this.objectList = objects + setMapObjectList(objects: MapObject[]) { + 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 diff --git a/src/stores/mapStore.ts b/src/stores/mapStore.ts index d3abf10..c03206a 100644 --- a/src/stores/mapStore.ts +++ b/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