From 252d9c87fd7ed27008989b9d79b4203228d289bd Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Sat, 19 Oct 2024 17:13:06 +0200
Subject: [PATCH] Firefox styling fixes

---
 src/components/sprites/Character.vue | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/sprites/Character.vue b/src/components/sprites/Character.vue
index 2ebbb45..272e074 100644
--- a/src/components/sprites/Character.vue
+++ b/src/components/sprites/Character.vue
@@ -1,12 +1,12 @@
 <template>
   <!--  Chat bubble -->
   <Container ref="charChatContainer" :depth="999" :x="currentX" :y="currentY">
-    <RoundRectangle @create="createChatBubble" :origin-x="0.5" :origin-y="7.5" :fillColor="0xffffff" :width="194" :hHAeight="21" :radius="20" />
+    <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>
   <!--  Character name and health -->
   <Container :depth="999" :x="currentX" :y="currentY">
-    <Text @create="createText" :text="character.name" />
+    <Text @create="createNicknameText" :text="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>
@@ -144,10 +144,14 @@ const createChatText = (text: Phaser.GameObjects.Text) => {
   // 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)
+    }
   }
 }
 
-const createText = (text: Phaser.GameObjects.Text) => {
+const createNicknameText = (text: Phaser.GameObjects.Text) => {
   text.setFontSize(13)
   text.setFontFamily('Arial')
   text.setOrigin(0.5, 9)
@@ -155,6 +159,10 @@ const createText = (text: Phaser.GameObjects.Text) => {
   // 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)
+    }
   }
 }