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'