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

src/components/screens/Characters.vue

@@ -166,10 +166,6 @@ const deletingCharacter = ref(null as CharacterT | null)
 const hairs = ref([] as CharacterHair[])
 const selectedHair = ref(null as CharacterHair | null)
 
-watch(selectedHair, (hair: CharacterHair | null) => {
-  console.log(hair)
-})
-
 // Fetch characters
 gameStore.connection?.on('character:list', (data: any) => {
   characters.value = data
@@ -194,7 +190,7 @@ function select_character() {
   deletingCharacter.value = null
   gameStore.connection?.emit('character:connect', {
     characterId: selected_character.value,
-    hairId: selectedHair.value?.id
+    characterHairId: selectedHair.value?.id
   })
   gameStore.connection?.on('character:connect', (data: CharacterT) => gameStore.setCharacter(data))
 }