forked from noxious/client
49 lines
1.6 KiB
Vue
49 lines
1.6 KiB
Vue
<template>
|
|
<Character v-for="item in mapStore.characters" :key="item.character.id" :tileMap :mapCharacter="item" />
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { SocketEvent } from '@/application/enums'
|
|
import type { MapCharacter, UUID } from '@/application/types'
|
|
import Character from '@/components/game/character/Character.vue'
|
|
import { useGameStore } from '@/stores/gameStore'
|
|
import { useMapStore } from '@/stores/mapStore'
|
|
import { onUnmounted } from 'vue'
|
|
|
|
const gameStore = useGameStore()
|
|
const mapStore = useMapStore()
|
|
|
|
const props = defineProps<{
|
|
tileMap: Phaser.Tilemaps.Tilemap
|
|
}>()
|
|
|
|
gameStore.connection?.on(SocketEvent.MAP_CHARACTER_JOIN, (data: MapCharacter) => {
|
|
mapStore.addCharacter(data)
|
|
})
|
|
|
|
gameStore.connection?.on(SocketEvent.MAP_CHARACTER_LEAVE, (characterId: UUID) => {
|
|
mapStore.removeCharacter(characterId)
|
|
})
|
|
|
|
gameStore.connection?.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) => {
|
|
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)
|
|
})
|
|
</script>
|