From 65b011982ab93367ab71360ec129d20ab208a074 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Tue, 18 Feb 2025 18:02:50 +0100
Subject: [PATCH] Check if hair is set before executing logic

---
 src/components/game/character/partials/CharacterHair.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/game/character/partials/CharacterHair.vue b/src/components/game/character/partials/CharacterHair.vue
index 1c31f98..01ac5af 100644
--- a/src/components/game/character/partials/CharacterHair.vue
+++ b/src/components/game/character/partials/CharacterHair.vue
@@ -1,11 +1,11 @@
 <template>
-  <Image v-bind="imageProps" v-if="gameStore.isTextureLoaded(texture)" />
+  <Image v-bind="imageProps" v-if="hairSpriteId && gameStore.isTextureLoaded(texture)" />
 </template>
 
 <script lang="ts" setup>
 import type { MapCharacter, Sprite as SpriteT } from '@/application/types'
 import { loadSpriteTextures } from '@/services/textureService'
-import { CharacterHairStorage, CharacterTypeStorage, SpriteStorage } from '@/storage/storages'
+import { CharacterHairStorage, SpriteStorage } from '@/storage/storages'
 import { useGameStore } from '@/stores/gameStore'
 import { Image, useScene } from 'phavuer'
 import { computed, onMounted, ref } from 'vue'
@@ -42,13 +42,16 @@ const imageProps = computed(() => {
 })
 
 onMounted(async () => {
+  if (!props.mapCharacter.character.characterHair) return
+
   const characterHairStorage = new CharacterHairStorage()
-  const spriteId = await characterHairStorage.getSpriteId(props.mapCharacter.character.characterHair!)
+  const spriteId = await characterHairStorage.getSpriteId(props.mapCharacter.character.characterHair)
   if (!spriteId) return
 
   hairSpriteId.value = spriteId
   const spriteStorage = new SpriteStorage()
   sprite.value = await spriteStorage.getById(spriteId)
+
   await loadSpriteTextures(scene, spriteId)
 })
 </script>