Refactored Character.vue as preparation for attack anims.

src/components/game/character/partials/HealthBar.vue

@@ -0,0 +1,36 @@
+<template>
+  <Container :depth="999" :x="currentX" :y="currentY">
+    <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
+  currentX: number
+  currentY: number
+}>()
+
+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>