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> <template>
<Container ref="characterContainer" :x="currentPositionX" :y="currentPositionY"> <Container ref="characterContainer" :x="currentPositionX" :y="currentPositionY" :depth="1">
<ChatBubble :mapCharacter="props.mapCharacter" /> <ChatBubble :mapCharacter="props.mapCharacter" />
<HealthBar :mapCharacter="props.mapCharacter" /> <HealthBar :mapCharacter="props.mapCharacter" />
<CharacterHair :mapCharacter="props.mapCharacter" /> <CharacterHair :mapCharacter="props.mapCharacter" />

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

@ -1,5 +1,5 @@
<template> <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" /> <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' }" /> <Text @create="createChatText" :style="{ fontSize: 13, fontFamily: 'Arial', color: '#000' }" />
</Container> </Container>
@ -15,7 +15,7 @@ const props = defineProps<{
}>() }>()
const game = useGame() const game = useGame()
const charChatContainer = refObj<Phaser.GameObjects.Container>() const characterChatContainer = refObj<Phaser.GameObjects.Container>()
const createChatBubble = (container: Phaser.GameObjects.Container) => { const createChatBubble = (container: Phaser.GameObjects.Container) => {
container.setName(`${props.mapCharacter.character.name}_chatBubble`) container.setName(`${props.mapCharacter.character.name}_chatBubble`)
@ -39,7 +39,7 @@ const createChatText = (text: Phaser.GameObjects.Text) => {
} }
onMounted(() => { onMounted(() => {
charChatContainer.value!.setName(`${props.mapCharacter.character!.name}_chatContainer`) characterChatContainer.value!.setName(`${props.mapCharacter.character!.name}_chatContainer`)
charChatContainer.value!.setVisible(false) characterChatContainer.value!.setVisible(false)
}) })
</script> </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 if (!mapStore.characterLoaded) return
const charChatContainer = scene.children.getByName(data.character.name + '_chatContainer') as Phaser.GameObjects.Container const characterContainer = scene.children.getByName(data.character.name) as Phaser.GameObjects.Container
if (!charChatContainer) return if (!characterContainer) return
const chatBubble = charChatContainer.getByName(data.character.name + '_chatBubble') as Phaser.GameObjects.Container const characterChatContainer = characterContainer.getByName(data.character.name + '_chatContainer') as Phaser.GameObjects.Container
const chatText = charChatContainer.getByName(data.character.name + '_chatText') as Phaser.GameObjects.Text 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 if (!chatText || !chatBubble) return
function calculateTextWidth(text: string, font: string, fontSize: number): number { 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 // setText but with max. char limit of 90
chatText.setText(data.message.substring(0, 90)) chatText.setText(data.message.substring(0, 90))
charChatContainer.setVisible(true) characterChatContainer.setVisible(true)
/** /**
* Hide chat bubble after a few seconds * Hide chat bubble after a few seconds
*/ */
// Clear any existing hide timer // Clear any existing hide timer
if (charChatContainer.getData('hideTimer')) { if (characterChatContainer.getData('hideTimer')) {
clearTimeout(charChatContainer.getData('hideTimer')) clearTimeout(characterChatContainer.getData('hideTimer'))
} }
// Set a new hide timer // Set a new hide timer
const hideTimer = setTimeout(() => { const hideTimer = setTimeout(() => {
charChatContainer.setVisible(false) characterChatContainer.setVisible(false)
}, 3000) }, 3000)
// Store the timer on the container itself // Store the timer on the container itself
charChatContainer.setData('hideTimer', hideTimer) characterChatContainer.setData('hideTimer', hideTimer)
}) })
scrollToBottom() scrollToBottom()

5
src/composables/useCharacterSpriteComposable.ts
View File

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