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

Merge remote-tracking branch 'origin/main' into feature/depth-sort-fix

Browse Source
This commit is contained in:
Dennis Postma
2025-03-03 21:53:39 +01:00
parent 84f8db5e10 2495e14ece
commit 87c04b6de5
71 changed files with 6202 additions and 463 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,8 +2,8 @@
<Container ref="characterContainer" :x="currentPositionX" :y="currentPositionY" :depth="isometricDepth">
<ChatBubble :mapCharacter="props.mapCharacter" />
<HealthBar :mapCharacter="props.mapCharacter" />
<CharacterHair :mapCharacter="props.mapCharacter" />
<Sprite ref="characterSprite" :origin-y="1" :flipX="isFlippedX" />
<CharacterHair :mapCharacter="props.mapCharacter" :flipX="isFlippedX" />
<Sprite ref="characterSprite" :flipX="isFlippedX" />
</Container>
</template>
@ -84,13 +84,14 @@ watch(
rotation: props.mapCharacter.character.rotation,
isAttacking: props.mapCharacter.isAttacking
}),
(oldValues, newValues) => {
async (oldValues, newValues) => {
handlePositionUpdate(oldValues, newValues)
}
)
onMounted(async () => {
await initializeSprite()
if (props.mapCharacter.character.id === gameStore.character!.id) {
scene.cameras.main.startFollow(characterContainer.value as Phaser.GameObjects.Container)
}

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

@ -1,54 +1,63 @@
<template>
<Image v-bind="imageProps" v-if="gameStore.isTextureLoaded(texture)" />
<Image ref="image" v-if="hairSpriteId" />
</template>
<script lang="ts" setup>
import type { MapCharacter, Sprite as SpriteT } from '@/application/types'
import { loadSpriteTextures } from '@/services/textureService'
import { CharacterHairStorage, CharacterTypeStorage, SpriteStorage } from '@/storage/storages'
import { useGameStore } from '@/stores/gameStore'
import { Image, useScene } from 'phavuer'
import { computed, onMounted, ref } from 'vue'
import { Image, refObj, useScene } from 'phavuer'
import { computed, onMounted, ref, watch } from 'vue'
const props = defineProps<{
mapCharacter: MapCharacter
}>()
const gameStore = useGameStore()
const scene = useScene()
const hairSpriteId = ref('')
const sprite = ref<SpriteT | null>(null)
const hairSprite = ref<SpriteT | null>(null)
const characterSpriteHeight = ref(0)
const image = refObj<Phaser.GameObjects.Image>()
const flipX = computed(() => [6, 0].includes(props.mapCharacter.character.rotation ?? 0))
const texture = computed(() => {
const { rotation } = props.mapCharacter.character
const direction = [0, 6].includes(rotation) ? 'back' : 'front'
const direction = flipX.value ? 'back' : 'front'
return `${hairSpriteId.value}-${direction}`
})
const isFlippedX = computed(() => [6, 4].includes(props.mapCharacter.character.rotation ?? 0))
const imageProps = computed(() => {
const direction = [0, 6].includes(props.mapCharacter.character.rotation ?? 0) ? 'back' : 'front'
const spriteAction = sprite.value?.spriteActions?.find((spriteAction) => spriteAction.action === direction)
return {
depth: 9999,
originX: Number(spriteAction?.originX) ?? 0,
originY: Number(spriteAction?.originY) ?? 0,
flipX: isFlippedX.value,
texture: texture.value
}
})
watch(
() => props.mapCharacter.character,
(newValue) => {
if (!image.value) return
image.value.setTexture(texture.value)
},
{ deep: true }
)
onMounted(async () => {
const characterHairStorage = new CharacterHairStorage()
const spriteId = await characterHairStorage.getSpriteId(props.mapCharacter.character.characterHair!)
if (!spriteId) return
if (!props.mapCharacter.character.characterType || !props.mapCharacter.character.characterHair) return
hairSpriteId.value = spriteId
const characterTypeStorage = new CharacterTypeStorage()
const characterHairStorage = new CharacterHairStorage()
const spriteStorage = new SpriteStorage()
sprite.value = await spriteStorage.getById(spriteId)
await loadSpriteTextures(scene, spriteId)
const characterType = await characterTypeStorage.getById(props.mapCharacter.character.characterType!)
if (!characterType) return
characterSpriteHeight.value = 100
hairSpriteId.value = await characterHairStorage.getSpriteId(props.mapCharacter.character.characterHair)
if (!hairSpriteId.value) return
hairSprite.value = await spriteStorage.getById(hairSpriteId.value)
if (!hairSprite.value) return
await loadSpriteTextures(scene, hairSpriteId.value)
if (!image.value) return
image.value.setOrigin(0.5, 2.15)
image.value.setTexture(texture.value)
image.value.setSize(30, 40)
})
</script>

8
src/components/game/gui/Chat.vue
View File

@ -22,6 +22,7 @@
<script setup lang="ts">
import { SocketEvent } from '@/application/enums'
import { socketManager } from '@/managers/SocketManager'
import { useGameStore } from '@/stores/gameStore'
import { useMapStore } from '@/stores/mapStore'
import { onClickOutside, useFocus } from '@vueuse/core'
@ -30,7 +31,6 @@ import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
const scene = useScene()
const gameStore = useGameStore()
const mapStore = useMapStore()
const message = ref('')
const chats = ref<{ character: string; message: string }[]>([])
@ -55,7 +55,7 @@ function unfocusChat(event: Event, targetElement: HTMLElement) {
const sendMessage = () => {
if (!message.value.trim()) return
gameStore.connection?.emit(SocketEvent.CHAT_MESSAGE, { message: message.value }, (response: boolean) => {})
socketManager.emit(SocketEvent.CHAT_MESSAGE, { message: message.value }, (response: boolean) => {})
message.value = ''
}
@ -79,7 +79,7 @@ const scrollToBottom = () => {
})
}
gameStore.connection?.on(SocketEvent.CHAT_MESSAGE, (data: { character: string; message: string }) => {
socketManager.on(SocketEvent.CHAT_MESSAGE, (data: { character: string; message: string }) => {
if (!data.character || !data.message) return
chats.value.push({ character: data.character, message: data.message })
@ -153,7 +153,7 @@ onMounted(() => {
})
onBeforeUnmount(() => {
gameStore.connection?.off(SocketEvent.CHAT_MESSAGE)
socketManager.off(SocketEvent.CHAT_MESSAGE)
removeEventListener('keydown', focusChat)
})
</script>

3
src/components/game/gui/Clock.vue
View File

@ -8,6 +8,7 @@
<script setup lang="ts">
import { SocketEvent } from '@/application/enums'
import { socketManager } from '@/managers/SocketManager'
import { useGameStore } from '@/stores/gameStore'
import { useDateFormat } from '@vueuse/core'
import { onUnmounted } from 'vue'
@ -15,6 +16,6 @@ import { onUnmounted } from 'vue'
const gameStore = useGameStore()
onUnmounted(() => {
gameStore.connection?.off(SocketEvent.DATE)
socketManager.off(SocketEvent.DATE)
})
</script>

29
src/components/game/map/Characters.vue
View File

@ -6,6 +6,7 @@
import { SocketEvent } from '@/application/enums'
import type { MapCharacter, UUID } from '@/application/types'
import Character from '@/components/game/character/Character.vue'
import { socketManager } from '@/managers/SocketManager'
import { useGameStore } from '@/stores/gameStore'
import { useMapStore } from '@/stores/mapStore'
import { onUnmounted } from 'vue'
@ -17,32 +18,32 @@ const props = defineProps<{
tileMap: Phaser.Tilemaps.Tilemap
}>()
gameStore.connection?.on(SocketEvent.MAP_CHARACTER_JOIN, (data: MapCharacter) => {
socketManager.on(SocketEvent.MAP_CHARACTER_JOIN, (data: MapCharacter) => {
mapStore.addCharacter(data)
})
gameStore.connection?.on(SocketEvent.MAP_CHARACTER_LEAVE, (characterId: UUID) => {
socketManager.on(SocketEvent.MAP_CHARACTER_LEAVE, (characterId: UUID) => {
mapStore.removeCharacter(characterId)
})
gameStore.connection?.on(SocketEvent.MAP_CHARACTER_MOVE, (data: { characterId: UUID; positionX: number; positionY: number; rotation: number; isMoving: boolean }) => {
mapStore.updateCharacterPosition(data)
// @TODO: Replace with universal class, composable or store
if (data.characterId === gameStore.character?.id) {
gameStore.character!.positionX = data.positionX
gameStore.character!.positionY = data.positionY
gameStore.character!.rotation = data.rotation
socketManager.on(SocketEvent.MAP_CHARACTER_MOVE, ([characterId, posX, posY, rot, isMoving]: [UUID, number, number, number, boolean]) => {
mapStore.updateCharacterPosition([characterId, posX, posY, rot, isMoving])
if (characterId === gameStore.character?.id) {
gameStore.character!.positionX = posX
gameStore.character!.positionY = posY
gameStore.character!.rotation = rot
}
})
gameStore.connection?.on(SocketEvent.MAP_CHARACTER_ATTACK, (characterId: UUID) => {
socketManager.on(SocketEvent.MAP_CHARACTER_ATTACK, (characterId: UUID) => {
mapStore.updateCharacterProperty(characterId, 'isAttacking', true)
})
onUnmounted(() => {
gameStore.connection?.off(SocketEvent.MAP_CHARACTER_ATTACK)
gameStore.connection?.off(SocketEvent.MAP_CHARACTER_MOVE)
gameStore.connection?.off(SocketEvent.MAP_CHARACTER_JOIN)
gameStore.connection?.off(SocketEvent.MAP_CHARACTER_LEAVE)
socketManager.off(SocketEvent.MAP_CHARACTER_ATTACK)
socketManager.off(SocketEvent.MAP_CHARACTER_MOVE)
socketManager.off(SocketEvent.MAP_CHARACTER_JOIN)
socketManager.off(SocketEvent.MAP_CHARACTER_LEAVE)
})
</script>

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

@ -11,6 +11,7 @@ import { unduplicateArray } from '@/application/utilities'
import Characters from '@/components/game/map/Characters.vue'
import MapTiles from '@/components/game/map/MapTiles.vue'
import PlacedMapObjects from '@/components/game/map/PlacedMapObjects.vue'
import { socketManager } from '@/managers/SocketManager'
import { createTileLayer, createTileMap, loadTileTexturesFromMapTileArray } from '@/services/mapService'
import { MapStorage } from '@/storage/storages'
import { useGameStore } from '@/stores/gameStore'
@ -29,7 +30,7 @@ const tileMap = shallowRef<Phaser.Tilemaps.Tilemap>()
const tileMapLayer = shallowRef<Phaser.Tilemaps.TilemapLayer>()
// Event listeners
gameStore.connection?.on(SocketEvent.MAP_CHARACTER_TELEPORT, (data: mapLoadData) => {
socketManager.on(SocketEvent.MAP_CHARACTER_TELEPORT, (data: mapLoadData) => {
mapStore.setMapId(data.mapId)
mapStore.setCharacters(data.characters)
})
@ -65,6 +66,6 @@ onUnmounted(() => {
tileMap.value.destroy()
}
gameStore.connection?.off(SocketEvent.MAP_CHARACTER_TELEPORT)
socketManager.off(SocketEvent.MAP_CHARACTER_TELEPORT)
})
</script>

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

@ -20,12 +20,29 @@
</select>
</div>
<div class="form-field-full">
<div class="space-x-6 flex items-center">
<label for="color">Color</label>
<input v-model="characterColor" class="input-field" type="text" name="color" placeholder="Character Hair Color" />
<div class="h-[38px] w-[38px] rounded" :style="{ backgroundColor: characterColor }"></div>
</div>
</div>
<div class="form-field-half">
<label for="spriteId">Sprite</label>
<select v-model="characterSpriteId" class="input-field" name="spriteId">
<option disabled selected value="">Select sprite</option>
<option v-for="sprite in assetManagerStore.spriteList" :key="sprite.id" :value="sprite.id">{{ sprite.name }}</option>
</select>
</div>
<div class="form-field-half">
<label>Preview</label>
<div v-if="characterSpriteId" class="flex flex-col">
<div class="p-3 pb-5 min-h-32 block rounded-md default-border bg-gray-800">
<div class="flex items-center justify-center p-1 h-full bg-gray-700 rounded">
<img :src="config.server_endpoint + '/textures/sprites/' + characterSpriteId + '/front.png'" class="max-w-[200px] max-h-[200px] object-contain" />
</div>
</div>
</div>
</div>
<button class="btn-cyan px-4 py-1.5 min-w-24" type="submit">Save</button>
<button class="btn-red px-4 py-1.5 min-w-24" type="button" @click.prevent="removeCharacterHair">Remove</button>
</form>
@ -34,49 +51,50 @@
</template>
<script setup lang="ts">
import config from '@/application/config'
import { SocketEvent } from '@/application/enums'
import type { CharacterGender, CharacterHair, Sprite } from '@/application/types'
import { downloadCache } from '@/application/utilities'
import { socketManager } from '@/managers/SocketManager'
import { CharacterHairStorage } from '@/storage/storages'
import { useAssetManagerStore } from '@/stores/assetManagerStore'
import { useGameStore } from '@/stores/gameStore'
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
const gameStore = useGameStore()
const assetManagerStore = useAssetManagerStore()
const selectedCharacterHair = computed(() => assetManagerStore.selectedCharacterHair)
const characterName = ref('')
const characterGender = ref<CharacterGender>('MALE' as CharacterGender.MALE)
const characterColor = ref<string>('#000000')
const characterIsSelectable = ref<boolean>(false)
const characterSpriteId = ref<string | null | undefined>(null)
const genderOptions: CharacterGender[] = ['MALE' as CharacterGender.MALE, 'FEMALE' as CharacterGender.FEMALE]
if (!selectedCharacterHair.value) {
console.error('No character hair selected')
}
if (selectedCharacterHair.value) {
characterName.value = selectedCharacterHair.value.name
characterGender.value = selectedCharacterHair.value.gender
characterColor.value = selectedCharacterHair.value.color
characterIsSelectable.value = selectedCharacterHair.value.isSelectable
characterSpriteId.value = selectedCharacterHair.value.sprite?.id
}
function removeCharacterHair() {
async function removeCharacterHair() {
if (!selectedCharacterHair.value) return
gameStore.connection?.emit(SocketEvent.GM_CHARACTERHAIR_REMOVE, { id: selectedCharacterHair.value.id }, (response: boolean) => {
socketManager.emit(SocketEvent.GM_CHARACTERHAIR_REMOVE, { id: selectedCharacterHair.value.id }, async (response: boolean) => {
if (!response) {
console.error('Failed to remove character hair')
return
}
refreshCharacterHairList()
await downloadCache('character_hair', new CharacterHairStorage())
await refreshCharacterHairList()
})
}
function refreshCharacterHairList(unsetSelectedCharacterHair = true) {
gameStore.connection?.emit(SocketEvent.GM_CHARACTERHAIR_LIST, {}, (response: CharacterHair[]) => {
async function refreshCharacterHairList(unsetSelectedCharacterHair = true) {
socketManager.emit(SocketEvent.GM_CHARACTERHAIR_LIST, {}, (response: CharacterHair[]) => {
assetManagerStore.setCharacterHairList(response)
if (unsetSelectedCharacterHair) {
@ -85,21 +103,24 @@ function refreshCharacterHairList(unsetSelectedCharacterHair = true) {
})
}
function saveCharacterHair() {
async function saveCharacterHair() {
const characterHairData = {
id: selectedCharacterHair.value!.id,
name: characterName.value,
gender: characterGender.value,
color: characterColor.value,
isSelectable: characterIsSelectable.value,
spriteId: characterSpriteId.value
}
gameStore.connection?.emit(SocketEvent.GM_CHARACTERHAIR_UPDATE, characterHairData, (response: boolean) => {
socketManager.emit(SocketEvent.GM_CHARACTERHAIR_UPDATE, characterHairData, async (response: boolean) => {
if (!response) {
console.error('Failed to save character type')
return
}
refreshCharacterHairList(false)
await downloadCache('character_hair', new CharacterHairStorage())
await refreshCharacterHairList(false)
})
}
@ -107,6 +128,7 @@ watch(selectedCharacterHair, (characterHair: CharacterHair | null) => {
if (!characterHair) return
characterName.value = characterHair.name
characterGender.value = characterHair.gender
characterColor.value = characterHair.color
characterIsSelectable.value = characterHair.isSelectable
characterSpriteId.value = characterHair.sprite?.id
})
@ -114,7 +136,7 @@ watch(selectedCharacterHair, (characterHair: CharacterHair | null) => {
onMounted(() => {
if (!selectedCharacterHair.value) return
gameStore.connection?.emit(SocketEvent.GM_SPRITE_LIST, {}, (response: Sprite[]) => {
socketManager.emit(SocketEvent.GM_SPRITE_LIST, {}, (response: Sprite[]) => {
assetManagerStore.setSpriteList(response)
})
})

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

@ -34,6 +34,7 @@
<script setup lang="ts">
import { SocketEvent } from '@/application/enums'
import type { CharacterHair } from '@/application/types'
import { socketManager } from '@/managers/SocketManager'
import { useAssetManagerStore } from '@/stores/assetManagerStore'
import { useGameStore } from '@/stores/gameStore'
import { useVirtualList } from '@vueuse/core'
@ -53,13 +54,13 @@ const handleSearch = () => {
}
const createNewCharacterHair = () => {
gameStore.connection?.emit(SocketEvent.GM_CHARACTERHAIR_CREATE, {}, (response: boolean) => {
socketManager.emit(SocketEvent.GM_CHARACTERHAIR_CREATE, {}, (response: boolean) => {
if (!response) {
console.error('Failed to create new character type')
return
}
gameStore.connection?.emit(SocketEvent.GM_CHARACTERHAIR_LIST, {}, (response: CharacterHair[]) => {
socketManager.emit(SocketEvent.GM_CHARACTERHAIR_LIST, {}, (response: CharacterHair[]) => {
assetManagerStore.setCharacterHairList(response)
})
})
@ -93,7 +94,7 @@ function toTop() {
}
onMounted(() => {
gameStore.connection?.emit(SocketEvent.GM_CHARACTERHAIR_LIST, {}, (response: CharacterHair[]) => {
socketManager.emit(SocketEvent.GM_CHARACTERHAIR_LIST, {}, (response: CharacterHair[]) => {
assetManagerStore.setCharacterHairList(response)
})
})

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

@ -42,11 +42,12 @@
<script setup lang="ts">
import { SocketEvent } from '@/application/enums'
import type { CharacterGender, CharacterRace, CharacterType, Sprite } from '@/application/types'
import { downloadCache } from '@/application/utilities'
import { socketManager } from '@/managers/SocketManager'
import { CharacterTypeStorage } from '@/storage/storages'
import { useAssetManagerStore } from '@/stores/assetManagerStore'
import { useGameStore } from '@/stores/gameStore'
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
const gameStore = useGameStore()
const assetManagerStore = useAssetManagerStore()
const selectedCharacterType = computed(() => assetManagerStore.selectedCharacterType)
@ -72,20 +73,22 @@ if (selectedCharacterType.value) {
characterSpriteId.value = selectedCharacterType.value.sprite?.id
}
function removeCharacterType() {
async function removeCharacterType() {
if (!selectedCharacterType.value) return
gameStore.connection?.emit(SocketEvent.GM_CHARACTERTYPE_REMOVE, { id: selectedCharacterType.value.id }, (response: boolean) => {
socketManager.emit(SocketEvent.GM_CHARACTERTYPE_REMOVE, { id: selectedCharacterType.value.id }, async (response: boolean) => {
if (!response) {
console.error('Failed to remove character type')
return
}
refreshCharacterTypeList()
await downloadCache('character_types', new CharacterTypeStorage())
await refreshCharacterTypeList()
})
}
function refreshCharacterTypeList(unsetSelectedCharacterType = true) {
gameStore.connection?.emit(SocketEvent.GM_CHARACTERTYPE_LIST, {}, (response: CharacterType[]) => {
async function refreshCharacterTypeList(unsetSelectedCharacterType = true) {
socketManager.emit(SocketEvent.GM_CHARACTERTYPE_LIST, {}, (response: CharacterType[]) => {
assetManagerStore.setCharacterTypeList(response)
if (unsetSelectedCharacterType) {
@ -94,7 +97,7 @@ function refreshCharacterTypeList(unsetSelectedCharacterType = true) {
})
}
function saveCharacterType() {
async function saveCharacterType() {
const characterTypeData = {
id: selectedCharacterType.value!.id,
name: characterName.value,
@ -104,12 +107,14 @@ function saveCharacterType() {
spriteId: characterSpriteId.value
}
gameStore.connection?.emit(SocketEvent.GM_CHARACTERTYPE_UPDATE, characterTypeData, (response: boolean) => {
socketManager.emit(SocketEvent.GM_CHARACTERTYPE_UPDATE, characterTypeData, async (response: boolean) => {
if (!response) {
console.error('Failed to save character type')
return
}
refreshCharacterTypeList(false)
await downloadCache('character_types', new CharacterTypeStorage())
await refreshCharacterTypeList(false)
})
}
@ -125,7 +130,7 @@ watch(selectedCharacterType, (characterType: CharacterType | null) => {
onMounted(() => {
if (!selectedCharacterType.value) return
gameStore.connection?.emit(SocketEvent.GM_SPRITE_LIST, {}, (response: Sprite[]) => {
socketManager.emit(SocketEvent.GM_SPRITE_LIST, {}, (response: Sprite[]) => {
assetManagerStore.setSpriteList(response)
})
})

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

@ -34,6 +34,7 @@
<script setup lang="ts">
import { SocketEvent } from '@/application/enums'
import type { CharacterType } from '@/application/types'
import { socketManager } from '@/managers/SocketManager'
import { useAssetManagerStore } from '@/stores/assetManagerStore'
import { useGameStore } from '@/stores/gameStore'
import { useVirtualList } from '@vueuse/core'
@ -53,13 +54,13 @@ const handleSearch = () => {
}
const createNewCharacterType = () => {
gameStore.connection?.emit(SocketEvent.GM_CHARACTERTYPE_CREATE, {}, (response: boolean) => {
socketManager.emit(SocketEvent.GM_CHARACTERTYPE_CREATE, {}, (response: boolean) => {
if (!response) {
console.error('Failed to create new character type')
return
}
gameStore.connection?.emit(SocketEvent.GM_CHARACTERTYPE_LIST, {}, (response: CharacterType[]) => {
socketManager.emit(SocketEvent.GM_CHARACTERTYPE_LIST, {}, (response: CharacterType[]) => {
assetManagerStore.setCharacterTypeList(response)
})
})
@ -93,7 +94,7 @@ function toTop() {
}
onMounted(() => {
gameStore.connection?.emit(SocketEvent.GM_CHARACTERTYPE_LIST, {}, (response: CharacterType[]) => {
socketManager.emit(SocketEvent.GM_CHARACTERTYPE_LIST, {}, (response: CharacterType[]) => {
assetManagerStore.setCharacterTypeList(response)
})
})

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

@ -46,6 +46,7 @@
<script setup lang="ts">
import { SocketEvent } from '@/application/enums'
import type { Item, ItemRarity, ItemType, Sprite } from '@/application/types'
import { socketManager } from '@/managers/SocketManager'
import { useAssetManagerStore } from '@/stores/assetManagerStore'
import { useGameStore } from '@/stores/gameStore'
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
@ -81,7 +82,7 @@ if (selectedItem.value) {
function removeItem() {
if (!selectedItem.value) return
gameStore.connection?.emit(SocketEvent.GM_ITEM_REMOVE, { id: selectedItem.value.id }, (response: boolean) => {
socketManager.emit(SocketEvent.GM_ITEM_REMOVE, { id: selectedItem.value.id }, (response: boolean) => {
if (!response) {
console.error('Failed to remove item')
return
@ -91,7 +92,7 @@ function removeItem() {
}
function refreshItemList(unsetSelectedItem = true) {
gameStore.connection?.emit(SocketEvent.GM_ITEM_LIST, {}, (response: Item[]) => {
socketManager.emit(SocketEvent.GM_ITEM_LIST, {}, (response: Item[]) => {
assetManagerStore.setItemList(response)
if (unsetSelectedItem) {
@ -111,7 +112,7 @@ function saveItem() {
spriteId: itemSpriteId.value
}
gameStore.connection?.emit(SocketEvent.GM_ITEM_UPDATE, itemData, (response: boolean) => {
socketManager.emit(SocketEvent.GM_ITEM_UPDATE, itemData, (response: boolean) => {
if (!response) {
console.error('Failed to save item')
return
@ -133,7 +134,7 @@ watch(selectedItem, (item: Item | null) => {
onMounted(() => {
if (!selectedItem.value) return
gameStore.connection?.emit(SocketEvent.GM_SPRITE_LIST, {}, (response: Sprite[]) => {
socketManager.emit(SocketEvent.GM_SPRITE_LIST, {}, (response: Sprite[]) => {
assetManagerStore.setSpriteList(response)
})
})

7
src/components/gameMaster/assetManager/partials/item/itemList.vue
View File

@ -31,6 +31,7 @@
<script setup lang="ts">
import { SocketEvent } from '@/application/enums'
import type { Item } from '@/application/types'
import { socketManager } from '@/managers/SocketManager'
import { useAssetManagerStore } from '@/stores/assetManagerStore'
import { useGameStore } from '@/stores/gameStore'
import { useVirtualList } from '@vueuse/core'
@ -49,13 +50,13 @@ const handleSearch = () => {
}
const createNewItem = () => {
gameStore.connection?.emit(SocketEvent.GM_ITEM_CREATE, {}, (response: boolean) => {
socketManager.emit(SocketEvent.GM_ITEM_CREATE, {}, (response: boolean) => {
if (!response) {
console.error('Failed to create new item')
return
}
gameStore.connection?.emit(SocketEvent.GM_ITEM_LIST, {}, (response: Item[]) => {
socketManager.emit(SocketEvent.GM_ITEM_LIST, {}, (response: Item[]) => {
assetManagerStore.setItemList(response)
})
})
@ -89,7 +90,7 @@ function toTop() {
}
onMounted(() => {
gameStore.connection?.emit(SocketEvent.GM_ITEM_LIST, {}, (response: Item[]) => {
socketManager.emit(SocketEvent.GM_ITEM_LIST, {}, (response: Item[]) => {
assetManagerStore.setItemList(response)
})
})

28
src/components/gameMaster/assetManager/partials/mapObject/MapObjectDetails.vue
View File

@ -59,12 +59,13 @@
import config from '@/application/config'
import { SocketEvent } from '@/application/enums'
import type { MapObject } from '@/application/types'
import { downloadCache } from '@/application/utilities'
import ChipsInput from '@/components/forms/ChipsInput.vue'
import { socketManager } from '@/managers/SocketManager'
import { MapObjectStorage } from '@/storage/storages'
import { useAssetManagerStore } from '@/stores/assetManagerStore'
import { useGameStore } from '@/stores/gameStore'
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
const gameStore = useGameStore()
const assetManagerStore = useAssetManagerStore()
const selectedMapObject = computed(() => assetManagerStore.selectedMapObject)
@ -96,18 +97,21 @@ if (selectedMapObject.value) {
mapObjectFrameHeight.value = selectedMapObject.value.frameHeight
}
function removeObject() {
gameStore.connection?.emit(SocketEvent.GM_MAPOBJECT_REMOVE, { mapObject: selectedMapObject.value?.id }, (response: boolean) => {
async function removeObject() {
if (!selectedMapObject.value) return
socketManager.emit(SocketEvent.GM_MAPOBJECT_REMOVE, { mapObjectId: selectedMapObject.value.id }, async (response: boolean) => {
if (!response) {
console.error('Failed to remove mapObject')
return
}
refreshObjectList()
await downloadCache('map_objects', new MapObjectStorage())
await refreshObjectList()
})
}
function refreshObjectList(unsetSelectedMapObject = true) {
gameStore.connection?.emit(SocketEvent.GM_MAPOBJECT_LIST, {}, (response: MapObject[]) => {
async function refreshObjectList(unsetSelectedMapObject = true) {
socketManager.emit(SocketEvent.GM_MAPOBJECT_LIST, {}, (response: MapObject[]) => {
assetManagerStore.setMapObjectList(response)
if (unsetSelectedMapObject) {
@ -116,13 +120,13 @@ function refreshObjectList(unsetSelectedMapObject = true) {
})
}
function saveObject() {
async function saveObject() {
if (!selectedMapObject.value) {
console.error('No mapObject selected')
return
}
gameStore.connection?.emit(
socketManager.emit(
SocketEvent.GM_MAPOBJECT_UPDATE,
{
id: selectedMapObject.value.id,
@ -135,12 +139,14 @@ function saveObject() {
frameWidth: mapObjectFrameWidth.value,
frameHeight: mapObjectFrameHeight.value
},
(response: boolean) => {
async (response: boolean) => {
if (!response) {
console.error('Failed to save mapObject')
return
}
refreshObjectList(false)
await downloadCache('map_objects', new MapObjectStorage())
await refreshObjectList(false)
}
)
}

7
src/components/gameMaster/assetManager/partials/mapObject/MapObjectList.vue
View File

@ -31,6 +31,7 @@
import config from '@/application/config'
import { SocketEvent } from '@/application/enums'
import type { MapObject } from '@/application/types'
import { socketManager } from '@/managers/SocketManager'
import { useAssetManagerStore } from '@/stores/assetManagerStore'
import { useGameStore } from '@/stores/gameStore'
import { useVirtualList } from '@vueuse/core'
@ -48,13 +49,13 @@ const elementToScroll = ref()
const handleFileUpload = (e: Event) => {
const files = (e.target as HTMLInputElement).files
if (!files) return
gameStore.connection?.emit(SocketEvent.GM_MAPOBJECT_UPLOAD, files, (response: boolean) => {
socketManager.emit(SocketEvent.GM_MAPOBJECT_UPLOAD, files, (response: boolean) => {
if (!response) {
if (config.environment === 'development') console.error('Failed to upload map object')
return
}
gameStore.connection?.emit(SocketEvent.GM_MAPOBJECT_LIST, {}, (response: MapObject[]) => {
socketManager.emit(SocketEvent.GM_MAPOBJECT_LIST, {}, (response: MapObject[]) => {
assetManagerStore.setMapObjectList(response)
})
})
@ -93,7 +94,7 @@ function toTop() {
}
onMounted(() => {
gameStore.connection?.emit(SocketEvent.GM_MAPOBJECT_LIST, {}, (response: MapObject[]) => {
socketManager.emit(SocketEvent.GM_MAPOBJECT_LIST, {}, (response: MapObject[]) => {
assetManagerStore.setMapObjectList(response)
})
})

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

@ -7,6 +7,15 @@
<input v-model="spriteName" class="input-field" type="text" name="name" placeholder="New sprite" />
</div>
<div class="form-field-half">
<label class="mb-1.5 font-titles" for="name">Width override</label>
<input v-model="spriteWidth" class="input-field" type="number" name="width" />
</div>
<div class="form-field-half">
<label class="mb-1.5 font-titles" for="name">Height override</label>
<input v-model="spriteHeight" class="input-field" type="number" name="height" />
</div>
<div class="w-full flex gap-2 mt-2 pb-4 relative">
<button class="btn-cyan px-4 py-2 flex-1 sm:flex-none sm:min-w-24" type="button" @click.prevent="saveSprite">Save</button>
<button class="btn-red px-4 py-2 flex-1 sm:flex-none sm:min-w-24" type="button" @click.prevent="deleteSprite">Delete</button>
@ -69,21 +78,23 @@
<script setup lang="ts">
import { SocketEvent } from '@/application/enums'
import type { Sprite, SpriteAction, UUID } from '@/application/types'
import { uuidv4 } from '@/application/utilities'
import type { Sprite, SpriteAction } from '@/application/types'
import { downloadCache, uuidv4 } from '@/application/utilities'
import SpriteActionsInput from '@/components/gameMaster/assetManager/partials/sprite/partials/SpriteImagesInput.vue'
import SpritePreview from '@/components/gameMaster/assetManager/partials/sprite/partials/SpritePreview.vue'
import Accordion from '@/components/utilities/Accordion.vue'
import { socketManager } from '@/managers/SocketManager'
import { SpriteStorage } from '@/storage/storages'
import { useAssetManagerStore } from '@/stores/assetManagerStore'
import { useGameStore } from '@/stores/gameStore'
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
const gameStore = useGameStore()
const assetManagerStore = useAssetManagerStore()
const selectedSprite = computed(() => assetManagerStore.selectedSprite)
const spriteName = ref('')
const spriteWidth = ref(0)
const spriteHeight = ref(0)
const spriteActions = ref<SpriteAction[]>([])
const isModalOpen = ref(false)
const selectedAction = ref<SpriteAction | null>(null)
@ -94,31 +105,37 @@ if (!selectedSprite.value) {
if (selectedSprite.value) {
spriteName.value = selectedSprite.value.name
spriteWidth.value = selectedSprite.value.width
spriteHeight.value = selectedSprite.value.height
spriteActions.value = sortSpriteActions(selectedSprite.value.spriteActions)
}
function deleteSprite() {
gameStore.connection?.emit(SocketEvent.GM_SPRITE_DELETE, { id: selectedSprite.value?.id }, (response: boolean) => {
async function deleteSprite() {
socketManager.emit(SocketEvent.GM_SPRITE_DELETE, { id: selectedSprite.value?.id }, async (response: boolean) => {
if (!response) {
console.error('Failed to delete sprite')
return
}
refreshSpriteList()
await downloadCache('sprites', new SpriteStorage())
await refreshSpriteList()
})
}
function copySprite() {
gameStore.connection?.emit(SocketEvent.GM_SPRITE_COPY, { id: selectedSprite.value?.id }, (response: boolean) => {
async function copySprite() {
socketManager.emit(SocketEvent.GM_SPRITE_COPY, { id: selectedSprite.value?.id }, async (response: boolean) => {
if (!response) {
console.error('Failed to copy sprite')
return
}
refreshSpriteList(false)
await downloadCache('sprites', new SpriteStorage())
await refreshSpriteList(false)
})
}
function refreshSpriteList(unsetSelectedSprite = true) {
gameStore.connection?.emit(SocketEvent.GM_SPRITE_LIST, {}, (response: Sprite[]) => {
async function refreshSpriteList(unsetSelectedSprite = true) {
socketManager.emit(SocketEvent.GM_SPRITE_LIST, {}, (response: Sprite[]) => {
assetManagerStore.setSpriteList(response)
if (unsetSelectedSprite) {
@ -127,7 +144,7 @@ function refreshSpriteList(unsetSelectedSprite = true) {
})
}
function saveSprite() {
async function saveSprite() {
if (!selectedSprite.value) {
console.error('No sprite selected')
return
@ -136,6 +153,8 @@ function saveSprite() {
const updatedSprite = {
id: selectedSprite.value.id,
name: spriteName.value,
width: spriteWidth.value,
height: spriteHeight.value,
spriteActions:
spriteActions.value?.map((action) => {
return {
@ -150,12 +169,14 @@ function saveSprite() {
}) ?? []
}
gameStore.connection?.emit(SocketEvent.GM_SPRITE_UPDATE, updatedSprite, (response: boolean) => {
socketManager.emit(SocketEvent.GM_SPRITE_UPDATE, updatedSprite, async (response: boolean) => {
if (!response) {
console.error('Failed to save sprite')
return
}
refreshSpriteList(false)
await downloadCache('sprites', new SpriteStorage())
await refreshSpriteList(false)
})
}
@ -211,6 +232,8 @@ function handleTempOffsetChange(action: SpriteAction, index: number, offset: { x
watch(selectedSprite, (sprite: Sprite | null) => {
if (!sprite) return
spriteName.value = sprite.name
spriteWidth.value = sprite.width
spriteHeight.value = sprite.height
spriteActions.value = sortSpriteActions(sprite.spriteActions)
})

7
src/components/gameMaster/assetManager/partials/sprite/SpriteList.vue
View File

@ -27,6 +27,7 @@
import config from '@/application/config'
import { SocketEvent } from '@/application/enums'
import type { Sprite } from '@/application/types'
import { socketManager } from '@/managers/SocketManager'
import { useAssetManagerStore } from '@/stores/assetManagerStore'
import { useGameStore } from '@/stores/gameStore'
import { useVirtualList } from '@vueuse/core'
@ -41,13 +42,13 @@ const hasScrolled = ref(false)
const elementToScroll = ref()
function newButtonClickHandler() {
gameStore.connection?.emit(SocketEvent.GM_SPRITE_CREATE, {}, (response: boolean) => {
socketManager.emit(SocketEvent.GM_SPRITE_CREATE, {}, (response: boolean) => {
if (!response) {
if (config.environment === 'development') console.error('Failed to create new sprite')
return
}
gameStore.connection?.emit(SocketEvent.GM_SPRITE_LIST, {}, (response: Sprite[]) => {
socketManager.emit(SocketEvent.GM_SPRITE_LIST, {}, (response: Sprite[]) => {
assetManagerStore.setSpriteList(response)
})
})
@ -86,7 +87,7 @@ function toTop() {
}
onMounted(() => {
gameStore.connection?.emit(SocketEvent.GM_SPRITE_LIST, {}, (response: Sprite[]) => {
socketManager.emit(SocketEvent.GM_SPRITE_LIST, {}, (response: Sprite[]) => {
assetManagerStore.setSpriteList(response)
})
})

28
src/components/gameMaster/assetManager/partials/tile/TileDetails.vue
View File

@ -26,15 +26,14 @@
import config from '@/application/config'
import { SocketEvent } from '@/application/enums'
import type { Tile } from '@/application/types'
import { downloadCache } from '@/application/utilities'
import ChipsInput from '@/components/forms/ChipsInput.vue'
import { socketManager } from '@/managers/SocketManager'
import { TileStorage } from '@/storage/storages'
import { useAssetManagerStore } from '@/stores/assetManagerStore'
import { useGameStore } from '@/stores/gameStore'
import { computed, onBeforeUnmount, onMounted, ref, toRaw, watch } from 'vue'
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
const gameStore = useGameStore()
const assetManagerStore = useAssetManagerStore()
const tileStorage = new TileStorage()
const selectedTile = computed(() => assetManagerStore.selectedTile)
@ -57,18 +56,19 @@ watch(selectedTile, (tile: Tile | null) => {
})
async function deleteTile() {
gameStore.connection?.emit(SocketEvent.GM_TILE_DELETE, { id: selectedTile.value?.id }, async (response: boolean) => {
socketManager.emit(SocketEvent.GM_TILE_DELETE, { id: selectedTile.value?.id }, async (response: boolean) => {
if (!response) {
console.error('Failed to delete tile')
return
}
await tileStorage.delete(selectedTile.value!.id)
refreshTileList()
await downloadCache('tiles', new TileStorage())
await refreshTileList()
})
}
function refreshTileList(unsetSelectedTile = true) {
gameStore.connection?.emit(SocketEvent.GM_TILE_LIST, {}, (response: Tile[]) => {
async function refreshTileList(unsetSelectedTile = true) {
socketManager.emit(SocketEvent.GM_TILE_LIST, {}, (response: Tile[]) => {
assetManagerStore.setTileList(response)
if (unsetSelectedTile) {
@ -77,25 +77,27 @@ function refreshTileList(unsetSelectedTile = true) {
})
}
function saveTile() {
async function saveTile() {
if (!selectedTile.value) {
console.error('No tile selected')
return
}
gameStore.connection?.emit(
socketManager.emit(
'gm:tile:update',
{
id: selectedTile.value.id,
name: tileName.value,
tags: tileTags.value
},
(response: boolean) => {
async (response: boolean) => {
if (!response) {
console.error('Failed to save tile')
return
}
refreshTileList(false)
await downloadCache('tiles', new TileStorage())
await refreshTileList(false)
}
)
}

7
src/components/gameMaster/assetManager/partials/tile/TileList.vue
View File

@ -31,6 +31,7 @@
import config from '@/application/config'
import { SocketEvent } from '@/application/enums'
import type { Tile } from '@/application/types'
import { socketManager } from '@/managers/SocketManager'
import { useAssetManagerStore } from '@/stores/assetManagerStore'
import { useGameStore } from '@/stores/gameStore'
import { useVirtualList } from '@vueuse/core'
@ -48,13 +49,13 @@ const elementToScroll = ref()
const handleFileUpload = (e: Event) => {
const files = (e.target as HTMLInputElement).files
if (!files) return
gameStore.connection?.emit(SocketEvent.GM_TILE_UPLOAD, files, (response: boolean) => {
socketManager.emit(SocketEvent.GM_TILE_UPLOAD, files, (response: boolean) => {
if (!response) {
if (config.environment === 'development') console.error('Failed to upload tile')
return
}
gameStore.connection?.emit(SocketEvent.GM_TILE_LIST, {}, (response: Tile[]) => {
socketManager.emit(SocketEvent.GM_TILE_LIST, {}, (response: Tile[]) => {
assetManagerStore.setTileList(response)
})
})
@ -93,7 +94,7 @@ function toTop() {
}
onMounted(() => {
gameStore.connection?.emit(SocketEvent.GM_TILE_LIST, {}, (response: Tile[]) => {
socketManager.emit(SocketEvent.GM_TILE_LIST, {}, (response: Tile[]) => {
assetManagerStore.setTileList(response)
})
})

5
src/components/gameMaster/mapEditor/Map.vue
View File

@ -10,9 +10,9 @@ import MapEventTiles from '@/components/gameMaster/mapEditor/mapPartials/MapEven
import MapTiles from '@/components/gameMaster/mapEditor/mapPartials/MapTiles.vue'
import PlacedMapObjects from '@/components/gameMaster/mapEditor/mapPartials/PlacedMapObjects.vue'
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
import { cloneArray, createTileArray, createTileLayer, createTileMap, placeTiles } from '@/services/mapService'
import { cloneArray, createTileLayer, createTileMap, placeTiles } from '@/services/mapService'
import { TileStorage } from '@/storage/storages'
import { useManualRefHistory, useRefHistory } from '@vueuse/core'
import { useRefHistory } from '@vueuse/core'
import { useScene } from 'phavuer'
import { onBeforeUnmount, onMounted, onUnmounted, ref, shallowRef, useTemplateRef, watch } from 'vue'
@ -58,6 +58,7 @@ watch(
mapTiles.value!.clearTiles()
eventTiles.value!.clearTiles()
mapEditor.currentMap.value.placedMapObjects = []
mapEditor.currentMap.value.mapEventTiles = []
updateAndCommit(mapEditor.currentMap.value)
mapEditor.resetClearTilesFlag()
}

7
src/components/gameMaster/mapEditor/mapPartials/MapEventTiles.vue
View File

@ -88,20 +88,17 @@ function pencil(pointer: Phaser.Input.Pointer, map: MapT) {
if (existingEventTile) return
// If teleport, check if there is a selected map
if (mapEditor.drawMode.value === 'teleport' && !mapEditor.teleportSettings.value.toMapId) return
console.log(mapEditor.teleportSettings.value.toMapId)
if (mapEditor.drawMode.value === 'teleport' && !mapEditor.teleportSettings.value.toMap) return
const newEventTile = {
id: uuidv4() as UUID,
map: map.id,
type: mapEditor.drawMode.value === 'blocking tile' ? MapEventTileType.BLOCK : MapEventTileType.TELEPORT,
positionX: tile.x,
positionY: tile.y,
teleport:
mapEditor.drawMode.value === 'teleport'
? {
toMapId: mapEditor.teleportSettings.value.toMapId,
toMap: mapEditor.teleportSettings.value.toMap,
toPositionX: mapEditor.teleportSettings.value.toPositionX,
toPositionY: mapEditor.teleportSettings.value.toPositionY,
toRotation: mapEditor.teleportSettings.value.toRotation

2
src/components/gameMaster/mapEditor/mapPartials/PlacedMapObjects.vue
View File

@ -129,7 +129,7 @@ function moveMapObject(id: string, map: MapT) {
const tile = getTile(props.tileMap, pointer.worldX, pointer.worldY)
if (!tile) return
console.log(id)
map.placedMapObjects.map((placed) => {
if (placed.id === id) {
placed.positionX = tile.x

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

@ -39,6 +39,7 @@ import { SocketEvent } from '@/application/enums'
import type { Map } from '@/application/types'
import Modal from '@/components/utilities/Modal.vue'
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
import { socketManager } from '@/managers/SocketManager'
import { MapStorage } from '@/storage/storages'
import { useGameStore } from '@/stores/gameStore'
import { ref, useTemplateRef } from 'vue'
@ -57,7 +58,7 @@ const pvp = ref(false)
defineExpose({ open: () => modalRef.value?.open() })
async function submit() {
gameStore.connection?.emit(SocketEvent.GM_MAP_CREATE, { name: name.value, width: width.value, height: height.value }, async (response: Map | false) => {
socketManager.emit(SocketEvent.GM_MAP_CREATE, { name: name.value, width: width.value, height: height.value }, async (response: Map | false) => {
if (!response) {
return
}

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

@ -1,17 +1,15 @@
<template>
<Modal ref="modalRef" :is-resizable="false" :modal-width="300" :modal-height="360" bg-style="none">
<template #modalHeader>
<h3 class="text-lg text-white">Maps</h3>
<div class="flex items-center">
<button class="btn-cyan w-7 h-7 font-normal flex items-center justify-center" @click="createMapModal?.open">+</button>
<h3 class="text-lg text-white ml-2">Maps</h3>
</div>
</template>
<template #modalBody>
<div class="my-4 mx-auto h-full">
<div class="text-center mb-4 px-2 flex gap-2.5">
<button class="btn-cyan py-1.5 min-w-[calc(50%_-_5px)]" @click="fetchMaps">Refresh</button>
<button class="btn-cyan py-1.5 min-w-[calc(50%_-_5px)]" @click="createMapModal?.open">New</button>
</div>
<div class="overflow-y-auto h-[calc(100%-20px)]">
<div class="mx-auto h-full">
<div class="overflow-y-auto h-[calc(100%)]">
<div class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap" v-for="(map, index) in mapList" :key="map.id">
<div class="absolute left-0 top-0 w-full h-px bg-gray-500" v-if="index === 0"></div>
<div class="flex gap-3 items-center w-full" @click="() => loadMap(map.id)">
<span>{{ map.name }}</span>
<span class="ml-auto gap-1 flex">
@ -24,7 +22,6 @@
</div>
</template>
</Modal>
<CreateMap ref="createMapModal" @create="fetchMaps" />
</template>
@ -34,6 +31,7 @@ import type { Map } from '@/application/types'
import CreateMap from '@/components/gameMaster/mapEditor/partials/CreateMap.vue'
import Modal from '@/components/utilities/Modal.vue'
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
import { socketManager } from '@/managers/SocketManager'
import { MapStorage } from '@/storage/storages'
import { useGameStore } from '@/stores/gameStore'
import { onMounted, ref, useTemplateRef } from 'vue'
@ -61,14 +59,14 @@ async function fetchMaps() {
}
function loadMap(id: string) {
gameStore.connection?.emit(SocketEvent.GM_MAP_REQUEST, { mapId: id }, (response: Map) => {
socketManager.emit(SocketEvent.GM_MAP_REQUEST, { mapId: id }, (response: Map) => {
mapEditor.loadMap(response)
})
modalRef.value?.close()
}
async function deleteMap(id: string) {
gameStore.connection?.emit(SocketEvent.GM_MAP_DELETE, { mapId: id }, async (response: boolean) => {
socketManager.emit(SocketEvent.GM_MAP_DELETE, { mapId: id }, async (response: boolean) => {
if (!response) {
gameStore.addNotification({
title: 'Error',

3
src/components/gameMaster/mapEditor/partials/SelectedPlacedMapObject.vue
View File

@ -45,6 +45,7 @@ import { SocketEvent } from '@/application/enums'
import type { MapObject, Map as MapT, PlacedMapObject } from '@/application/types'
import Modal from '@/components/utilities/Modal.vue'
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
import { socketManager } from '@/managers/SocketManager'
import { MapObjectStorage } from '@/storage/storages'
import { useGameStore } from '@/stores/gameStore'
import { onMounted, ref } from 'vue'
@ -81,7 +82,7 @@ const handleDelete = () => {
async function handleUpdate() {
if (!mapObject.value) return
gameStore.connection?.emit(
socketManager.emit(
SocketEvent.GM_MAPOBJECT_UPDATE,
{
id: props.placedMapObject.mapObject as string,

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

@ -26,7 +26,7 @@
</div>
<div class="form-field-full">
<label for="toMap">Map to teleport to</label>
<select v-model="toMapId" class="input-field" name="toMap" id="toMap">
<select v-model="toMap" class="input-field" name="toMap" id="toMap">
<option :value="null">Select map</option>
<option v-for="map in mapList" :key="map.id" :value="map.id">{{ map.name }}</option>
</select>
@ -55,7 +55,7 @@ defineExpose({
open: () => modalRef.value?.open()
})
const { toPositionX, toPositionY, toRotation, toMapId } = useRefTeleportSettings()
const { toPositionX, toPositionY, toRotation, toMap } = useRefTeleportSettings()
function useRefTeleportSettings() {
const settings = mapEditor.teleportSettings.value
@ -63,18 +63,18 @@ function useRefTeleportSettings() {
toPositionX: ref(settings.toPositionX),
toPositionY: ref(settings.toPositionY),
toRotation: ref(settings.toRotation),
toMapId: ref(settings.toMapId)
toMap: ref(settings.toMap)
}
}
watch([toPositionX, toPositionY, toRotation, toMapId], updateTeleportSettings)
watch([toPositionX, toPositionY, toRotation, toMap], updateTeleportSettings)
function updateTeleportSettings() {
mapEditor.setTeleportSettings({
toPositionX: toPositionX.value,
toPositionY: toPositionY.value,
toRotation: toRotation.value,
toMapId: toMapId.value
toMap: toMap.value
})
}

3
src/components/gameMaster/mapEditor/partials/Toolbar.vue
View File

@ -117,7 +117,7 @@ const selectPencilOpen = ref(false)
const selectEraserOpen = ref(false)
const isContinuousDrawingEnabled = ref<Boolean>(false)
const isShowPlacedMapObjectPreviewEnabled = ref<Boolean>(mapEditor.isPlacedMapObjectPreviewEnabled.value)
const listOpen = computed(() => mapEditor.tool.value === 'pencil' && (mapEditor.drawMode.value === 'tile' || mapEditor.drawMode.value === 'map_object'))
const listOpen = computed(() => (mapEditor.tool.value === 'pencil' && (mapEditor.drawMode.value === 'tile' || mapEditor.drawMode.value === 'map_object')) || mapEditor.tool.value === 'paint')
// drawMode
function setDrawMode(value: string) {
@ -148,6 +148,7 @@ function handleModeClick(mode: string, type: 'pencil' | 'eraser') {
function handleClick(tool: string) {
mapEditor.setTool(tool)
if (tool === 'paint') mapEditor.setDrawMode('tile')
selectPencilOpen.value = tool === 'pencil' ? !selectPencilOpen.value : false
selectEraserOpen.value = tool === 'eraser' ? !selectEraserOpen.value : false
if (mapEditor.drawMode.value === 'teleport') emit('open-teleport')

3
src/components/login/LoginForm.vue
View File

@ -26,6 +26,7 @@
</template>
<script setup lang="ts">
import { socketManager } from '@/managers/SocketManager'
import { login } from '@/services/authenticationService'
import { useGameStore } from '@/stores/gameStore'
import { useCookies } from '@vueuse/integrations/useCookies'
@ -53,7 +54,7 @@ async function submit() {
formError.value = response.error
return
}
gameStore.setToken(response.token)
socketManager.setToken(response.token)
gameStore.initConnection()
return true // Indicate success
}

3
src/components/login/RegisterForm.vue
View File

@ -26,6 +26,7 @@
</template>
<script setup lang="ts">
import { socketManager } from '@/managers/SocketManager'
import { login, register } from '@/services/authenticationService'
import { useGameStore } from '@/stores/gameStore'
import { useCookies } from '@vueuse/integrations/useCookies'
@ -67,7 +68,7 @@ async function submit() {
return
}
gameStore.setToken(loginResponse.token)
socketManager.setToken(loginResponse.token)
gameStore.initConnection()
}
</script>

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

@ -10,8 +10,9 @@
<div class="filler"></div>
<div class="w-2/3 max-w-[860px]" v-if="!isLoading">
<div class="mb-5 flex flex-col gap-1">
<h1 class="text-white font-bold">SELECT CHARACTER TO PLAY</h1>
<p class="m-0">Maximum of 4 characters can be created per player</p>
<h1 class="text-white font-bold">{{ isCreatingCharacter ? 'CREATE CHARACTER' : 'SELECT CHARACTER TO PLAY' }}</h1>
<p class="m-0" v-if="!isCreatingCharacter">Maximum of 4 characters can be created per player</p>
<p class="m-0" v-if="isCreatingCharacter">Customize your new character</p>
</div>
<div class="flex w-full max-lg:flex-col lg:h-[400px] default-border rounded-md bg-gray">
<div class="lg:min-w-[285px] max-lg:min-h-[383px] lg:w-1/3 h-full bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-cover bg-center border-0 max-lg:border-b lg:border-r border-solid border-gray-500 max-lg:rounded-t-md lg:rounded-l-md relative">
@ -20,66 +21,93 @@
<img src="/assets/placeholders/head.png" class="w-9 h-9 object-contain center-element" alt="Player head" />
<input class="h-full w-full absolute m-0 z-10 hover:cursor-pointer focus-visible:outline-offset-0 btn-sound" type="radio" name="character" :value="character.id" v-model="selectedCharacterId" />
</div>
<div class="character relative rounded default-border w-12 h-12 bg-[url('/assets/ui-texture.png')]" :class="{ active: characters.length == 0 }" v-if="characters.length < 4">
<button class="p-0 h-full w-full flex flex-col justify-between focus-visible:outline-offset-0 btn-sound" @click="isCreateNewCharacterModalOpen = true">
<img class="w-6 h-6 object-contain center-element btn-sound" draggable="false" src="/assets/icons/plus-icon.svg" />
<div class="character relative rounded default-border w-12 h-12 bg-[url('/assets/ui-texture.png')]" :class="{ active: isCreatingCharacter }" v-if="characters.length < characterCreationSettings.maxCharacters">
<button class="p-0 h-full w-full flex flex-col justify-between focus-visible:outline-offset-0 btn-sound" @click="startCharacterCreation">
<img class="w-6 h-6 object-contain center-element btn-sound" draggable="false" src="/assets/icons/plus-icon.svg" alt="Add character" />
</button>
</div>
</div>
<div class="py-6 px-8 h-[calc(100%_-_48px)] flex flex-col items-center gap-6 justify-center" v-if="selectedCharacterId">
<input class="input-field w-[158px]" type="text" name="name" :placeholder="characters.find((c) => c.id == selectedCharacterId)?.name" />
<div class="flex flex-col gap-4 items-center">
<div class="flex flex-col gap-3">
<div class="bg-[url('/assets/ui-elements/character-select-ui-shape.svg')] w-[190px] h-52 bg-no-repeat bg-center flex items-center justify-between">
<div class="py-6 px-8 h-[calc(100%_-_48px)] flex flex-col items-center gap-6 justify-center">
<template v-if="selectedCharacterId && !isCreatingCharacter">
<input class="input-field w-[158px]" type="text" name="name" :placeholder="characters.find((c) => c.id == selectedCharacterId)?.name" v-model="newNickname" />
<div class="flex flex-col gap-4 items-center">
<div class="flex flex-col gap-3">
<div class="bg-[url('/assets/ui-elements/character-select-ui-shape.svg')] w-[190px] h-52 bg-no-repeat bg-center flex items-center justify-between">
<button class="ml-6 w-4 h-8 p-0">
<img src="/assets/icons/triangle-icon.svg" class="w-3 h-3.5 m-auto" alt="Arrow left" />
</button>
<img class="w-24 object-contain mb-3.5 max-h-[70%]" alt="Player avatar" :src="config.server_endpoint + '/avatar/s/' + characters.find((c) => c.id === selectedCharacterId)?.characterType + '/' + (selectedHairId ?? 'default')" />
<button class="mr-6 w-4 h-8 p-0">
<img src="/assets/icons/triangle-icon.svg" class="w-3 h-3.5 -scale-x-100" alt="Arrow right" />
</button>
</div>
</div>
</div>
</template>
<template v-if="isCreatingCharacter">
<div class="flex flex-col gap-4 items-center">
<input class="input-field" v-model="newCharacterName" name="name" id="name" placeholder="Enter a nickname..." />
<div class="bg-[url('/assets/ui-elements/character-select-ui-shape.svg')] w-[190px] h-52 bg-no-repeat bg-center flex items-center justify-center">
<button class="ml-6 w-4 h-8 p-0">
<img src="/assets/icons/triangle-icon.svg" class="w-3 h-3.5 m-auto" alt="Arrow left" />
</button>
<img class="w-24 object-contain mb-3.5 max-h-[70%]" alt="Player avatar" :src="config.server_endpoint + '/avatar/s/' + characters.find((c) => c.id === selectedCharacterId)?.characterType + '/' + (selectedHairId ?? 'default')" />
<img class="w-24 object-contain mb-3.5 max-h-[70%]" alt="Player avatar" :src="config.server_endpoint + '/avatar/s/' + defaultCharacterTypeId + '/' + (selectedHairId ?? 'default')" />
<button class="mr-6 w-4 h-8 p-0">
<img src="/assets/icons/triangle-icon.svg" class="w-3 h-3.5 -scale-x-100" alt="Arrow right" />
</button>
</div>
<div class="flex justify-between w-[190px]">
<button class="btn-empty flex gap-2" :class="{ selected: selectedGender === 'MALE' }" @click="selectedGender = 'MALE'">
<img src="/assets/icons/male-icon.svg" class="w-4 h-4 m-auto" alt="Male symbol" />
<span class="text-white">Male</span>
</button>
<button class="btn-empty flex gap-2" :class="{ selected: selectedGender === 'FEMALE' }" @click="selectedGender = 'FEMALE'">
<img src="/assets/icons/male-icon.svg" class="w-4 h-4 m-auto" alt="Female symbol" />
<span class="text-white">Female</span>
</button>
</div>
</div>
<!-- TODO: update gender on (selected) character -->
<!-- <div class="flex justify-between w-[190px]">-->
<!-- <button class="btn-empty flex gap-2" :class="{ selected: characters.find((c) => c.id == selectedCharacterId)?.characterType?.gender === 'MALE' }">-->
<!-- <img src="/assets/icons/male-icon.svg" class="w-4 h-4 m-auto" alt="Male symbol" />-->
<!-- <span class="text-white">Male</span>-->
<!-- </button>-->
<!-- <button class="btn-empty flex gap-2" :class="{ selected: characters.find((c) => c.id == selectedCharacterId)?.characterType?.gender === 'FEMALE' }">-->
<!-- <img src="/assets/icons/male-icon.svg" class="w-4 h-4 m-auto" alt="Male symbol" />-->
<!-- <span class="text-white">Female</span>-->
<!-- </button>-->
<!-- </div>-->
</div>
</template>
</div>
</div>
<div class="flex-1 lg:w-2/3 max-lg:min-h-[212px] h-full bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-cover bg-center max-lg:rounded-bl-md rounded-r-md">
<div class="py-6 px-8 h-[calc(100%_-_48px)] flex flex-col items-center gap-10" v-if="selectedCharacterId">
<div class="py-6 px-8 h-[calc(100%_-_48px)] flex flex-col items-center gap-10" v-if="selectedCharacterId || isCreatingCharacter">
<div class="flex flex-col gap-3 w-full">
<span class="text-sm">Hairstyle</span>
<div class="flex gap-2 flex-wrap max-h-20 overflow-y-auto scrollbar">
<span class="text-sm">Hair color</span>
<div class="flex gap-2 flex-wrap">
<div
class="hair-deselect relative flex justify-center items-center bg-gray default-border w-[18px] h-[18px] p-2 rounded-sm hover:bg-gray-500 hover:border-gray-400 focus-visible:outline-none focus-visible:border-white focus-visible:bg-cyan has-[:checked]:bg-cyan has-[:checked]:border-transparent"
>
<img src="/assets/icons/x-button-gray.svg" class="w-4 h-4" alt="Empty button" />
<input type="radio" name="hair" :value="null" v-model="selectedHairId" class="h-full w-full absolute left-0 top-0 m-0 z-10 hover:cursor-pointer focus-visible:outline-offset-0 focus-visible:outline-white" />
<input type="radio" name="hair-color" :value="null" v-model="selectedHairColor" class="h-full w-full absolute left-0 top-0 m-0 z-10 hover:cursor-pointer focus-visible:outline-offset-0 focus-visible:outline-white" />
</div>
<!-- TODO #255: make radio button so we can set a value, do the same with swatches -->
<div
v-for="hair in characterHairs"
class="relative flex justify-center items-center bg-gray default-border w-[18px] h-[18px] p-2 rounded-sm hover:bg-gray-500 hover:border-gray-400 focus-visible:outline-none focus-visible:border-gray-300 focus-visible:bg-gray-500 has-[:checked]:bg-cyan has-[:checked]:border-transparent"
v-for="color in uniqueHairColors"
class="relative flex justify-center items-center default-border w-[18px] h-[18px] p-2 rounded-sm hover:bg-gray-500 hover:border-gray-400 focus-visible:outline-none focus-visible:border-gray-300 focus-visible:bg-gray-500 has-[:checked]:bg-cyan has-[:checked]:border-transparent"
>
<img class="h-4 object-contain" :src="config.server_endpoint + '/textures/sprites/' + hair.sprite + '/front.png'" alt="Hair sprite" />
<input type="radio" name="hair" :value="hair.id" v-model="selectedHairId" class="h-full w-full absolute left-0 top-0 m-0 z-10 hover:cursor-pointer focus-visible:outline-offset-0 focus-visible:outline-white" />
<div class="w-full h-full rounded-sm" :style="getHairColorStyle(color)"></div>
<input type="radio" name="hair-color" :value="color" v-model="selectedHairColor" class="h-full w-full absolute left-0 top-0 m-0 z-10 hover:cursor-pointer focus-visible:outline-offset-0 focus-visible:outline-white" />
</div>
</div>
</div>
<div class="flex flex-col gap-3 w-full">
<span class="text-sm">Hair color</span>
<span class="text-sm">Hairstyle</span>
<div class="flex gap-2 flex-wrap">
<!-- TODO: replace with hair colors -->
<input type="radio" name="hair-color" v-for="n in 10" class="bg-red w-6 h-6 m-0 rounded-sm hover:cursor-pointer checked:outline checked:outline-1 checked:outline-white" />
<div
class="hair-deselect relative flex justify-center items-center bg-gray default-border w-[18px] h-[18px] p-2 rounded-sm hover:bg-gray-500 hover:border-gray-400 focus-visible:outline-none focus-visible:border-white focus-visible:bg-cyan has-[:checked]:bg-cyan has-[:checked]:border-transparent"
>
<img src="/assets/icons/x-button-gray.svg" class="w-4 h-4" alt="Empty button" />
<input type="radio" name="hair" :value="null" v-model="selectedHairId" class="h-full w-full absolute left-0 top-0 m-0 z-10 hover:cursor-pointer focus-visible:outline-offset-0 focus-visible:outline-white" />
</div>
<div
v-for="hair in filteredHairs"
class="relative flex justify-center items-center bg-gray default-border w-[18px] h-[18px] p-2 rounded-sm hover:bg-gray-500 hover:border-gray-400 focus-visible:outline-none focus-visible:border-gray-300 focus-visible:bg-gray-500 has-[:checked]:bg-cyan has-[:checked]:border-transparent overflow-hidden"
>
<div class="absolute inset-0 flex items-center justify-center">
<img class="h-16 object-contain scale-[1] mt-8 origin-center" :src="config.server_endpoint + '/textures/sprites/' + hair.sprite + '/front.png'" alt="Hair sprite" />
</div>
<input type="radio" name="hair" :value="hair.id" v-model="selectedHairId" class="h-full w-full absolute left-0 top-0 m-0 z-10 hover:cursor-pointer focus-visible:outline-offset-0 focus-visible:outline-white" />
</div>
</div>
</div>
</div>
@ -89,77 +117,102 @@
<div v-else>
<img class="w-20 invert-80" src="/assets/icons/loading-icon1.svg" alt="Loading" />
</div>
<div class="w-2/3 button-wrapper flex self-center justify-center lg:justify-end gap-4 max-w-[860px]" v-if="!isLoading">
<button class="btn-empty min-w-48" @click.stop="gameStore.disconnectSocket()">Back</button>
<button class="btn-cyan min-w-48 disabled:bg-cyan-800 disabled:cursor-not-allowed" :disabled="!selectedCharacterId" @click="loginWithCharacter()">Play now</button>
<template v-if="!isCreatingCharacter">
<button class="btn-empty min-w-48" @click.stop="gameStore.disconnectSocket()">Back</button>
<button class="btn-cyan min-w-48 disabled:bg-cyan-800 disabled:cursor-not-allowed" :disabled="!selectedCharacterId" @click="loginWithCharacter()">Play now</button>
</template>
<template v-else>
<button class="btn-empty min-w-48" @click="cancelCharacterCreation">Cancel</button>
<button class="btn-cyan min-w-48" @click="createCharacter">Create</button>
</template>
</div>
</div>
</div>
<!-- CREATE CHARACTER MODAL -->
<Modal :isModalOpen="isCreateNewCharacterModalOpen" @modal:close="isCreateNewCharacterModalOpen = false" :modal-width="430" :modal-height="275">
<template #modalHeader>
<h3 class="m-0 font-medium text-white">Create your character</h3>
</template>
<template #modalBody>
<div class="p-4 h-[calc(100%_-_32px)]">
<form method="post" @submit.prevent="createCharacter" class="h-full flex flex-col justify-between">
<div class="form-field-full">
<label for="name" class="text-white">Nickname</label>
<input class="input-field" v-model="newCharacterName" name="name" id="name" placeholder="Enter a nickname..." />
</div>
<div class="grid grid-flow-col justify-stretch gap-4">
<button type="button" class="btn-empty py-1.5 px-4 inline-block" @click.prevent="isCreateNewCharacterModalOpen = false">Cancel</button>
<button class="btn-cyan py-1.5 px-4 inline-block" type="submit">Create</button>
</div>
</form>
</div>
</template>
</Modal>
</template>
<script setup lang="ts">
import config from '@/application/config'
import { SocketEvent } from '@/application/enums'
import { type CharacterHair, type Character as CharacterT, type Map } from '@/application/types'
import Modal from '@/components/utilities/Modal.vue'
import { useSoundComposable } from '@/composables/useSoundComposable'
import { CharacterHairStorage } from '@/storage/storages'
import { socketManager } from '@/managers/SocketManager'
import { CharacterHairStorage, CharacterTypeStorage } from '@/storage/storages'
import { useGameStore } from '@/stores/gameStore'
import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
const characterCreationSettings = {
maxCharacters: 4,
minNameLength: 3,
maxNameLength: 20,
defaultGender: 'MALE' as const
}
const { playSound } = useSoundComposable()
const gameStore = useGameStore()
const isLoading = ref<boolean>(true)
const characters = ref<CharacterT[]>([])
const selectedCharacterId = ref<string | null>(null)
const isCreateNewCharacterModalOpen = ref<boolean>(false)
const newNickname = ref<string>('')
const newCharacterName = ref<string>('')
const characterHairs = ref<CharacterHair[]>([])
const selectedHairId = ref<string | null>(null)
const defaultCharacterTypeId = ref<string>('')
const isCreatingCharacter = ref<boolean>(false)
const selectedGender = ref()
const selectedHairColor = ref<string | null>(null)
const uniqueHairColors = computed(() => {
return [...new Set(characterHairs.value.map((hair) => hair.color))]
})
const filteredHairs = computed(() => {
if (!selectedHairColor.value) return characterHairs.value
return characterHairs.value.filter((hair) => hair.color === selectedHairColor.value)
})
function getHairColorStyle(color: string | null) {
return {
backgroundColor: color,
border: selectedHairColor.value === color ? '1px solid white' : '1px solid rgba(255, 255, 255, 0.2)'
}
}
function startCharacterCreation() {
isCreatingCharacter.value = true
selectedCharacterId.value = null
newCharacterName.value = ''
selectedHairId.value = null
selectedHairColor.value = null
selectedGender.value = characterCreationSettings.defaultGender
}
function cancelCharacterCreation() {
isCreatingCharacter.value = false
newCharacterName.value = ''
selectedHairId.value = null
selectedHairColor.value = null
}
// Fetch characters
setTimeout(() => {
console.log(SocketEvent.CHARACTER_LIST)
gameStore.connection?.emit(SocketEvent.CHARACTER_LIST)
socketManager.emit(SocketEvent.CHARACTER_LIST)
}, 750)
gameStore.connection?.on(SocketEvent.CHARACTER_LIST, (data: any) => {
socketManager.on(SocketEvent.CHARACTER_LIST, (data: any) => {
characters.value = data
isLoading.value = false
})
// Select character logics
function loginWithCharacter() {
if (!selectedCharacterId.value) return
gameStore.connection?.emit(
socketManager.emit(
SocketEvent.CHARACTER_CONNECT,
{
characterId: selectedCharacterId.value,
characterHairId: selectedHairId.value
characterHairId: selectedHairId.value,
newNickname: newNickname.value
},
(response: { character: CharacterT; map: Map; characters: CharacterT[] }) => {
gameStore.setCharacter(response.character)
@ -169,27 +222,51 @@ function loginWithCharacter() {
// Create character logics
function createCharacter() {
gameStore.connection?.emit(SocketEvent.CHARACTER_CREATE, { name: newCharacterName.value }, (success: boolean) => {
if (success) return
isCreateNewCharacterModalOpen.value = false
})
if (newCharacterName.value.length < characterCreationSettings.minNameLength || newCharacterName.value.length > characterCreationSettings.maxNameLength) {
return
}
socketManager.emit(
SocketEvent.CHARACTER_CREATE,
{
name: newCharacterName.value,
gender: selectedGender.value,
hairId: selectedHairId.value
},
(success: boolean) => {
if (success) {
cancelCharacterCreation()
socketManager.emit(SocketEvent.CHARACTER_LIST)
}
}
)
}
// Watch changes for selected character and update hairs
watch(selectedCharacterId, (characterId) => {
if (!characterId) return
newNickname.value = ''
isCreatingCharacter.value = false
selectedHairId.value = characters.value.find((c) => c.id == characterId)?.characterHair ?? null
})
onMounted(async () => {
playSound('/assets/music/intro.mp3')
await playSound('/assets/music/intro.mp3')
const characterHairStorage = new CharacterHairStorage()
const characterTypeStorage = new CharacterTypeStorage()
characterHairs.value = await characterHairStorage.getAll()
// Get the first available character type for preview
const types = await characterTypeStorage.getAll()
const defaultType = types.find((type) => type.isSelectable)
if (defaultType) {
defaultCharacterTypeId.value = defaultType.id
}
})
onBeforeUnmount(() => {
gameStore.connection?.off(SocketEvent.CHARACTER_LIST)
gameStore.connection?.off(SocketEvent.CHARACTER_CONNECT)
gameStore.connection?.off(SocketEvent.CHARACTER_CREATE)
socketManager.off(SocketEvent.CHARACTER_LIST)
socketManager.off(SocketEvent.CHARACTER_CONNECT)
socketManager.off(SocketEvent.CHARACTER_CREATE)
})
</script>

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

@ -20,8 +20,10 @@
<script setup lang="ts">
import config from '@/application/config'
import { SocketEvent } from '@/application/enums'
import { socketManager } from '@/managers/SocketManager'
import 'phaser'
import type { Map as MapT } from '@/application/types'
import { downloadCache } from '@/application/utilities'
import Map from '@/components/gameMaster/mapEditor/Map.vue'
import MapList from '@/components/gameMaster/mapEditor/partials/MapList.vue'
import MapObjectList from '@/components/gameMaster/mapEditor/partials/MapObjectList.vue'
@ -32,13 +34,10 @@ import Toolbar from '@/components/gameMaster/mapEditor/partials/Toolbar.vue'
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
import { loadAllTileTextures } from '@/services/mapService'
import { MapStorage } from '@/storage/storages'
import { useGameStore } from '@/stores/gameStore'
import { Game, Scene } from 'phavuer'
import { ref, useTemplateRef } from 'vue'
import { ref, toRaw, useTemplateRef } from 'vue'
const mapStorage = new MapStorage()
const mapEditor = useMapEditorComposable()
const gameStore = useGameStore()
const mapModal = useTemplateRef('mapModal')
const mapSettingsModal = useTemplateRef('mapSettingsModal')
@ -83,18 +82,18 @@ const preloadScene = async (scene: Phaser.Scene) => {
})
}
function save() {
const currentMap = mapEditor.currentMap.value
async function save() {
const currentMap = toRaw(mapEditor.currentMap.value)
if (!currentMap) return
const data = {
...currentMap,
mapId: currentMap.id
}
console.log(data)
gameStore.connection?.emit(SocketEvent.GM_MAP_UPDATE, data, (response: MapT) => {
mapStorage.update(response.id, response)
socketManager.emit(SocketEvent.GM_MAP_UPDATE, data, async (response: MapT) => {
if (!response.id) return
await downloadCache('maps', new MapStorage())
})
}

5
src/components/utilities/Debug.vue
View File

@ -1,6 +1,7 @@
<template></template>
<script setup lang="ts">
import { socketManager } from '@/managers/SocketManager'
import { login } from '@/services/authenticationService'
import { CharacterHairStorage, CharacterTypeStorage, MapObjectStorage, MapStorage, SoundStorage, SpriteStorage, TileStorage } from '@/storage/storages'
import { TextureStorage } from '@/storage/textureStorage'
@ -41,13 +42,13 @@ async function handleKeyPress(event: KeyboardEvent) {
}
if (currentString.includes('11')) {
if (gameStore.token) return
if (socketManager.token) return
const response = await login('root', 'password')
if (response.success === undefined) {
return
}
gameStore.setToken(response.token)
socketManager.setToken(response.token)
gameStore.initConnection()
}

9
src/components/utilities/Notifications.vue
View File

@ -12,8 +12,9 @@
<script setup lang="ts">
import { SocketEvent } from '@/application/enums'
import Modal from '@/components/utilities/Modal.vue'
import { socketManager } from '@/managers/SocketManager'
import { useGameStore } from '@/stores/gameStore'
import { onBeforeMount, onBeforeUnmount, onMounted, onUnmounted, watch } from 'vue'
import { onMounted, onUnmounted, watch } from 'vue'
const gameStore = useGameStore()
@ -36,13 +37,13 @@ function setupNotificationListener(connection: any) {
}
onMounted(() => {
const connection = gameStore.connection
const connection = socketManager.connection
if (connection) {
setupNotificationListener(connection)
} else {
// Watch for changes in the socket connection
watch(
() => gameStore.connection,
() => socketManager.connection,
(newConnection) => {
if (newConnection) setupNotificationListener(newConnection)
}
@ -51,7 +52,7 @@ onMounted(() => {
})
onUnmounted(() => {
const connection = gameStore.connection
const connection = socketManager.connection
if (connection) {
connection.off(SocketEvent.NOTIFICATION)
}