From 5ba2547c6e1ece4222e35fcb70f0ce8f9eef15af Mon Sep 17 00:00:00 2001
From: Colin Kallemein <kallemein@redkiwi.nl>
Date: Sat, 8 Jun 2024 13:41:29 +0200
Subject: [PATCH] NQ-56 center player name + extra styling healthbar

---
 src/assets/scss/_variables.scss      |  3 +--
 src/components/sprites/Character.vue | 39 +++++++++++++++++++++-------
 2 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss
index 7cdac39..27b18ae 100644
--- a/src/assets/scss/_variables.scss
+++ b/src/assets/scss/_variables.scss
@@ -10,5 +10,4 @@ $gray: #7f7f7f;
 $gray-2: #696969;
 $dark-gray: #454545;
 $light-gray: #b1b2b5;
-$turqoise: #42B883;
-$cyan: #213547;
\ No newline at end of file
+$green: #09ad19;
\ No newline at end of file
diff --git a/src/components/sprites/Character.vue b/src/components/sprites/Character.vue
index 25e97c1..5de143d 100644
--- a/src/components/sprites/Character.vue
+++ b/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'