<template>
  <Container :depth="999">
    <Text @create="createNicknameText" :text="props.mapCharacter.character.name" />
    <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" />
  </Container>
</template>

<script setup lang="ts">
import type { MapCharacter } from '@/application/types'
import { Container, RoundRectangle, Text, useGame } from 'phavuer'

const props = defineProps<{
  mapCharacter: MapCharacter
}>()

const game = useGame()

const createNicknameText = (text: Phaser.GameObjects.Text) => {
  text.setFontSize(13)
  text.setFontFamily('Arial')
  text.setOrigin(0.5, 9)
  text.setResolution(2)

  // Fix text alignment on Windows and Android
  if (game.device.os.windows || game.device.os.android) {
    text.setOrigin(0.5, 8)

    if (game.device.browser.firefox) {
      text.setOrigin(0.5, 9)
    }
  }
}
</script>
