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

WIP chat bubble

Browse Source
This commit is contained in:
Dennis Postma
2024-09-25 01:41:03 +02:00
parent 4a410b375f
commit 4eea9d1f2c
6 changed files with 62 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/sprites/Character.vue
View File

@ -1,9 +1,9 @@
<template>
<Container ref="charChatContainer" :depth="999" v-if="props.character" :x="currentX" :y="currentY">>
<RoundRectangle @create="createChatBubble" :origin-x="0.5" :origin-y="7.5" :fillColor="0xffffff" :width="194" :height="21" :radius="5" />
<Text @create="createChatText" :text="`This is a chat message 🤯👋`" :origin-x="0.5" :origin-y="10.9" :style="{ fontSize: 13, fontFamily: 'Arial', color: '#000' }" />
</Container>
<Container :depth="999" v-if="props.character" :x="currentX" :y="currentY">
<!-- Start chat bubble -->
<!-- <RoundRectangle :origin-x="0.5" :origin-y="7.5" :fillColor="0xffffff" :width="194" :height="21" :radius="5" />-->
<!-- <Text @create="createText" :text="`This is a chat message 🤯👋`" :origin-x="0.5" :origin-y="10.9" :style="{ fontSize: 13, fontFamily: 'Arial', color: '#000' }" />-->
<!-- End chat bubble -->
<Text @create="createText" :text="props.character.name" :origin-x="0.5" :origin-y="9" />
<RoundRectangle :origin-x="0.5" :origin-y="18.5" :fillColor="0xffffff" :width="74" :height="6" :radius="5" />
<RoundRectangle :origin-x="0.5" :origin-y="36.4" :fillColor="0x00b3b3" :width="70" :height="3" :radius="5" />
@ -15,10 +15,10 @@
</template>
<script lang="ts" setup>
import { Container, Image, refObj, refTo, RoundRectangle, Sprite, Text, useScene } from 'phavuer'
import { Container, Image, refObj, RoundRectangle, Sprite, Text, useScene } from 'phavuer'
import { type ExtendedCharacter as CharacterT } from '@/types'
import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
import { watch, computed, ref, onMounted, onUnmounted } from 'vue'
import { watch, computed, ref, onMounted, onUnmounted, type Ref } from 'vue'
import config from '@/config'
import { useGameStore } from '@/stores/gameStore'
import { useZoneStore } from '@/stores/zoneStore'
@ -29,7 +29,8 @@ enum Direction {
NOCHANGE
}
const charContainer = refObj();
const charChatContainer = refObj() as Ref<Phaser.GameObjects.Container>;
const charContainer = refObj() as Ref<Phaser.GameObjects.Container>;
interface Props {
layer: Phaser.Tilemaps.TilemapLayer
@ -158,20 +159,32 @@ const charTexture = computed(() => {
return `${spriteId}-${action}_left_up`
})
const createChatBubble = (container: Phaser.GameObjects.Container) => {
container.setName(props.character?.name + '_chatBubble')
}
const createChatText = (text: Phaser.GameObjects.Text) => {
text.setName(props.character?.name + '_chatText')
text.setFontSize(13)
text.setFontFamily('Arial')
}
const createText = (text: Phaser.GameObjects.Text) => {
text.setFontSize(13)
text.setFontFamily('Arial')
}
onMounted(() => {
/**
* @TODO: Put this at an appropriate place not in this component
*/
// Check if player is this character, then lock with camera
if (props.character && props.character.id === gameStore.character?.id) {
charChatContainer.value?.setName(props.character.name + '_chatContainer')
charChatContainer.value?.setVisible(false)
charContainer.value?.setName(props.character.name)
zoneStore.characterLoaded = true;
}
if (props.character) {
updatePosition(props.character.positionX, props.character.positionY, Direction.POSITIVE)
}