NQ-56 center player name + extra styling healthbar

src/assets/scss/_variables.scss

@@ -10,5 +10,4 @@ $gray: #7f7f7f;
 $gray-2: #696969;
 $dark-gray: #454545;
 $light-gray: #b1b2b5;
-$turqoise: #42B883;
-$cyan: #213547;
+$green: #09ad19;

src/components/sprites/Character.vue

@@ -1,25 +1,44 @@
 <template>
   <Container>
-    <!-- @TODO : Text position X must be calculated based on the character name length -->
+    <Rectangle 
+      :x="props.character?.position_x"
+      :y="props.character?.position_y" 
+      :origin-x="0.5"
+      :origin-y="12"
+      :fillColor="0xFFFFFF"
+      :width="74"
+      :height="8"
+    >
+      <Rectangle
+        :x="props.character?.position_x"
+        :y="props.character?.position_y" 
+        :origin-x="0.5"
+        :origin-y="23.5"
+        :fillColor="0x09ad19"
+        :width="70"
+        :height="4"
+      />
+    </Rectangle>
     <Text
       :text="props.character?.name"
-      :x="props.character.position_x - 40"
-      :y="props.character.position_y - 80"
+      :x="props.character?.position_x"
+      :y="props.character?.position_y" 
+      :origin-x="0.5"
+      :origin-y="3.5"
       :style="{
         fontFamily: 'Helvetica, Arial',
-        color: '#42B883',
-        fontSize: '1.25rem',
-        fontStyle: 'bold',
-        strokeThickness: 8,
-        stroke: '#213547'
+        color: '#FFF',
+        fontSize: '1rem',
+        strokeThickness: 4,
+        stroke: 'red'
       }"
     />
-    <Sprite ref="sprite" :x="props.character.position_x" :y="props.character.position_y" play="walk"  />
+    <Sprite ref="sprite" :x="props.character?.position_x" :y="props.character?.position_y" play="walk"  />
   </Container>
 </template>
 
 <script lang="ts" setup>
-import { Container, Sprite, Text, useScene } from 'phavuer'
+import { Container, Rectangle, Sprite, Text, useScene } from 'phavuer'
 import { onBeforeMount, onMounted, reactive, type Ref, ref, watch } from 'vue'
 import config from '@/config'
 import { useSocketStore } from '@/stores/socket'