<template>
  <Container :depth="999" :x="currentX" :y="currentY">
    <Text @create="createNicknameText" :text="props.zoneCharacter.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 { Container, RoundRectangle, Text, useGame } from 'phavuer'
import type { ZoneCharacter } from '@/types'

const props = defineProps<{
  zoneCharacter: ZoneCharacter
  currentX: number
  currentY: number
}>()

const game = useGame()

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

  // 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>
