forked from noxious/client
46 lines
1.4 KiB
Vue
46 lines
1.4 KiB
Vue
<template>
|
|
<Container ref="charChatContainer" :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>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { MapCharacter } from '@/application/types'
|
|
import { Container, refObj, RoundRectangle, Text, useGame } from 'phavuer'
|
|
import { onMounted } from 'vue'
|
|
|
|
const props = defineProps<{
|
|
mapCharacter: MapCharacter
|
|
}>()
|
|
|
|
const game = useGame()
|
|
const charChatContainer = refObj<Phaser.GameObjects.Container>()
|
|
|
|
const createChatBubble = (container: Phaser.GameObjects.Container) => {
|
|
container.setName(`${props.mapCharacter.character.name}_chatBubble`)
|
|
}
|
|
|
|
const createChatText = (text: Phaser.GameObjects.Text) => {
|
|
text.setName(`${props.mapCharacter.character.name}_chatText`)
|
|
text.setFontSize(13)
|
|
text.setFontFamily('Arial')
|
|
text.setOrigin(0.5, 10.9)
|
|
text.setResolution(2)
|
|
|
|
// Fix text alignment on Windows and Android
|
|
if (game.device.os.windows || game.device.os.android) {
|
|
text.setOrigin(0.5, 9.75)
|
|
|
|
if (game.device.browser.firefox) {
|
|
text.setOrigin(0.5, 10.9)
|
|
}
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
charChatContainer.value!.setName(`${props.mapCharacter.character!.name}_chatContainer`)
|
|
charChatContainer.value!.setVisible(false)
|
|
})
|
|
</script>
|