noxious/client
3
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Almost finalised refactoring

Browse Source
This commit is contained in:
Dennis Postma 2025-01-03 14:35:08 +01:00
parent 145143cdc5
commit 700bd57e67
29 changed files with 264 additions and 273 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/application/types.ts
View File

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

4
src/components/Effects.vue
View File

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

2
src/components/game/character/Character.vue
View File

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

2
src/components/game/character/partials/CharacterChest.vue
View File

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

2
src/components/game/character/partials/CharacterHair.vue
View File

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

16
src/components/game/map/Map.vue
View File

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

12
src/components/gameMaster/assetManager/AssetManager.vue
View File

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

4
src/components/gameMaster/assetManager/partials/characterHair/CharacterHairDetails.vue
View File

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

1
src/components/gameMaster/assetManager/partials/characterHair/CharacterHairList.vue
View File

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

4
src/components/gameMaster/assetManager/partials/characterType/CharacterTypeDetails.vue
View File

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

1
src/components/gameMaster/assetManager/partials/characterType/CharacterTypeList.vue
View File

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

2
src/components/gameMaster/assetManager/partials/item/itemDetails.vue
View File

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

163
src/components/gameMaster/assetManager/partials/mapObject/MapObjectDetails.vue Normal file
View File

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

24
src/components/gameMaster/assetManager/partials/object/ObjectList.vue → src/components/gameMaster/assetManager/partials/mapObject/MapObjectList.vue
View File

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

163
src/components/gameMaster/assetManager/partials/object/ObjectDetails.vue
View File

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

1
src/components/gameMaster/assetManager/partials/sprite/SpriteDetails.vue
View File

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

16
src/components/gameMaster/mapEditor/MapEditor.vue
View File

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

19
src/components/gameMaster/mapEditor/mapPartials/MapObjects.vue
View File

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

2
src/components/gameMaster/mapEditor/partials/CreateMap.vue
View File

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

6
src/components/gameMaster/mapEditor/partials/MapList.vue
View File

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

6
src/components/gameMaster/mapEditor/partials/ObjectList.vue
View File

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

2
src/components/gameMaster/mapEditor/partials/TeleportModal.vue
View File

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

2
src/components/gui/Chat.vue
View File

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

2
src/components/gui/Clock.vue
View File

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

4
src/components/screens/Characters.vue
View File

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

5
src/components/screens/MapEditor.vue
View File

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

22
src/stores/assetManagerStore.ts
View File

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

18
src/stores/mapEditorStore.ts
View File

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

8
src/stores/mapStore.ts
View File

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