From 937ce939d13ea36522147b45d25715c343ed4b07 Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Sun, 24 Nov 2024 20:19:45 +0100
Subject: [PATCH] Preselect hairstyle that's set on character

Removed unused watch
---
 src/components/screens/Characters.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/screens/Characters.vue b/src/components/screens/Characters.vue
index 15b6c0a..21239d3 100644
--- a/src/components/screens/Characters.vue
+++ b/src/components/screens/Characters.vue
@@ -76,7 +76,7 @@
                     has-[:checked]:bg-cyan has-[:checked]:border-white"
                   >
                     <img src="/assets/icons/x-button-gray.svg" class="w-4 h-4" alt="Empty button" />
-                    <input type="radio" name="hair" :value="null" v-model="selectedHair" class="h-full w-full absolute left-0 top-0 m-0 z-10 hover:cursor-pointer focus-visible:outline-offset-0" />
+                    <input type="radio" name="hair" :value="null" v-model="selectedHair" :checked="characters.find((c) => c.id == selected_character)?.characterHairId === null" class="h-full w-full absolute left-0 top-0 m-0 z-10 hover:cursor-pointer focus-visible:outline-offset-0" />
                   </div>
                   <!-- TODO #255: make radio button so we can set a value, do the same with swatches -->
                   <div
@@ -87,7 +87,7 @@
                     has-[:checked]:bg-cyan has-[:checked]:border-white"
                   >
                     <img class="w-4 h-4" :src="config.server_endpoint + '/assets/sprites/' + hair.spriteId + '/front.png'" alt="Hair sprite" />
-                    <input type="radio" name="hair" :value="hair" v-model="selectedHair" class="h-full w-full absolute left-0 top-0 m-0 z-10 hover:cursor-pointer focus-visible:outline-offset-0" />
+                    <input type="radio" name="hair" :value="hair" v-model="selectedHair" :checked="characters.find((c) => c.id == selected_character)?.characterHairId == hair.id" class="h-full w-full absolute left-0 top-0 m-0 z-10 hover:cursor-pointer focus-visible:outline-offset-0" />
                   </div>
                 </div>
               </div>
@@ -152,7 +152,7 @@
 <script setup lang="ts">
 import config from '@/config'
 import { useGameStore } from '@/stores/gameStore'
-import { onBeforeUnmount, ref, watch } from 'vue'
+import { onBeforeUnmount, ref } from 'vue'
 import Modal from '@/components/utilities/Modal.vue'
 import { type Character as CharacterT, type CharacterHair } from '@/types'
 import ConfirmationModal from '@/components/utilities/ConfirmationModal.vue'