Renamed hair > characterHair, split character logic (chat bubble, healthbar etc) into separate components for better DX

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

@@ -0,0 +1,50 @@
+<template>
+  <Image v-bind="imageProps" v-if="gameStore.getLoadedAsset(props.zoneCharacter.character.characterHair?.spriteId)" ref="image" />
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { Image, refObj, useScene } from 'phavuer'
+import type { Sprite as SpriteT, ZoneCharacter } from '@/types'
+import { loadSpriteTextures } from '@/composables/gameComposable'
+import { useGameStore } from '@/stores/gameStore'
+
+const props = defineProps<{
+  zoneCharacter: ZoneCharacter
+  currentX: number
+  currentY: number
+}>()
+
+const gameStore = useGameStore()
+const scene = useScene()
+
+const image = refObj<Phaser.GameObjects.Image>()
+const isFlippedX = computed(() => [6, 4].includes(props.zoneCharacter.character.rotation ?? 0))
+
+const texture = computed(() => {
+  const { rotation, characterHair } = props.zoneCharacter.character
+  const spriteId = characterHair?.sprite?.id
+  const direction = [0, 6].includes(rotation) ? 'back' : 'front'
+
+  return `${spriteId}-${direction}`
+})
+
+const imageProps = computed(() => ({
+  depth: 1,
+  x: props.currentX,
+  y: props.currentY,
+  flipX: false,
+  texture: texture.value,
+}))
+
+loadSpriteTextures(scene, props.zoneCharacter.character.characterHair?.sprite as SpriteT)
+  .then(() => {
+    console.log(texture.value)
+    image.value!.setTexture(texture.value!)
+    image.value!.setFlipX(isFlippedX.value)
+  })
+  .catch((error) => {
+    console.error('Error loading texture:', error)
+  })
+
+</script>

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

@@ -0,0 +1,46 @@
+<template>
+  <Container ref="charChatContainer" :depth="999" :x="currentX" :y="currentY">
+    <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 { Container, refObj, RoundRectangle, Text, useGame } from 'phavuer'
+import type { ZoneCharacter } from '@/types'
+import { onMounted } from 'vue'
+
+const props = defineProps<{
+  zoneCharacter: ZoneCharacter
+  currentX: number
+  currentY: number
+}>()
+
+const game = useGame()
+const charChatContainer = refObj<Phaser.GameObjects.Container>()
+
+const createChatBubble = (container: Phaser.GameObjects.Container) => {
+  container.setName(`${props.zoneCharacter.character.name}_chatBubble`)
+}
+
+const createChatText = (text: Phaser.GameObjects.Text) => {
+  text.setName(`${props.zoneCharacter.character.name}_chatText`)
+  text.setFontSize(13)
+  text.setFontFamily('Arial')
+  text.setOrigin(0.5, 10.9)
+
+  // 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.zoneCharacter.character!.name}_chatContainer`)
+  charChatContainer.value!.setVisible(false)
+})
+</script>

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

@@ -0,0 +1,35 @@
+<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>