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

Fix for chat bubble

Browse Source
This commit is contained in:
Dennis Postma 2025-02-01 15:48:42 +01:00
parent af26ca5e89
commit db426bb03e
4 changed files with 21 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
<template>
<Container ref="characterContainer" :x="currentPositionX" :y="currentPositionY">
<Container ref="characterContainer" :x="currentPositionX" :y="currentPositionY" :depth="1">
<ChatBubble :mapCharacter="props.mapCharacter" />
<HealthBar :mapCharacter="props.mapCharacter" />
<CharacterHair :mapCharacter="props.mapCharacter" />

8
src/components/game/character/partials/ChatBubble.vue
View File

@ -1,5 +1,5 @@
<template>
<Container ref="charChatContainer" :depth="999">
<Container ref="characterChatContainer" :depth="999">
<RoundRectangle @create="createChatBubble" :origin-x="0.5" :origin-y="7.5" :fillColor="0xffffff" :width="194" :height="21" :radius="20" />
<Text @create="createChatText" :style="{ fontSize: 13, fontFamily: 'Arial', color: '#000' }" />
</Container>
@ -15,7 +15,7 @@ const props = defineProps<{
}>()
const game = useGame()
const charChatContainer = refObj<Phaser.GameObjects.Container>()
const characterChatContainer = refObj<Phaser.GameObjects.Container>()
const createChatBubble = (container: Phaser.GameObjects.Container) => {
container.setName(`${props.mapCharacter.character.name}_chatBubble`)
@ -39,7 +39,7 @@ const createChatText = (text: Phaser.GameObjects.Text) => {
}
onMounted(() => {
charChatContainer.value!.setName(`${props.mapCharacter.character!.name}_chatContainer`)
charChatContainer.value!.setVisible(false)
characterChatContainer.value!.setName(`${props.mapCharacter.character!.name}_chatContainer`)
characterChatContainer.value!.setVisible(false)
})
</script>

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

@ -85,11 +85,14 @@ gameStore.connection?.on('chat:message', (data: Chat) => {
if (!mapStore.characterLoaded) return
const charChatContainer = scene.children.getByName(data.character.name + '_chatContainer') as Phaser.GameObjects.Container
if (!charChatContainer) return
const characterContainer = scene.children.getByName(data.character.name) as Phaser.GameObjects.Container
if (!characterContainer) return
const chatBubble = charChatContainer.getByName(data.character.name + '_chatBubble') as Phaser.GameObjects.Container
const chatText = charChatContainer.getByName(data.character.name + '_chatText') as Phaser.GameObjects.Text
const characterChatContainer = characterContainer.getByName(data.character.name + '_chatContainer') as Phaser.GameObjects.Container
if (!characterChatContainer) return
const chatBubble = characterChatContainer.getByName(data.character.name + '_chatBubble') as Phaser.GameObjects.Container
const chatText = characterChatContainer.getByName(data.character.name + '_chatText') as Phaser.GameObjects.Text
if (!chatText || !chatBubble) return
function calculateTextWidth(text: string, font: string, fontSize: number): number {
@ -115,24 +118,24 @@ gameStore.connection?.on('chat:message', (data: Chat) => {
// setText but with max. char limit of 90
chatText.setText(data.message.substring(0, 90))
charChatContainer.setVisible(true)
characterChatContainer.setVisible(true)
/**
* Hide chat bubble after a few seconds
*/
// Clear any existing hide timer
if (charChatContainer.getData('hideTimer')) {
clearTimeout(charChatContainer.getData('hideTimer'))
if (characterChatContainer.getData('hideTimer')) {
clearTimeout(characterChatContainer.getData('hideTimer'))
}
// Set a new hide timer
const hideTimer = setTimeout(() => {
charChatContainer.setVisible(false)
characterChatContainer.setVisible(false)
}, 3000)
// Store the timer on the container itself
charChatContainer.setData('hideTimer', hideTimer)
characterChatContainer.setData('hideTimer', hideTimer)
})
scrollToBottom()

5
src/composables/useCharacterSpriteComposable.ts
View File

@ -103,10 +103,13 @@ export function useCharacterSprite(scene: Phaser.Scene, tilemap: Phaser.Tilemaps
characterSpriteId.value = spriteId
await loadSpriteTextures(scene, spriteId)
if (characterContainer.value) {
characterContainer.value.setName(mapCharacter.character.name)
}
if (characterSprite.value) {
characterSprite.value.setTexture(charTexture.value)
characterSprite.value.setFlipX(isFlippedX.value)
characterSprite.value.setName(mapCharacter.character.name)
}
updatePosition(mapCharacter.character.positionX, mapCharacter.character.positionY, mapCharacter.character.rotation)