From 7d8936410474b0649da7e0d30001c779aed553ad Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Sun, 24 Nov 2024 17:15:57 +0100
Subject: [PATCH] Fix styling conditions for radio select

WIP
---
 src/assets/scss/main.scss             |  6 ++++++
 src/components/screens/Characters.vue | 21 ++++++++++-----------
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index 728a60b..ad12d69 100644
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@@ -151,6 +151,12 @@ button {
   }
 }
 
+.hair-deselect:has(:checked) {
+  img {
+    @apply brightness-200;
+  }
+}
+
 .text-pixel {
   @apply text-white font-ui drop-shadow-pixel-black;
 }
diff --git a/src/components/screens/Characters.vue b/src/components/screens/Characters.vue
index 6c5ead5..15b6c0a 100644
--- a/src/components/screens/Characters.vue
+++ b/src/components/screens/Characters.vue
@@ -70,25 +70,24 @@
                 <div class="flex gap-2 flex-wrap max-h-20 overflow-y-auto scrollbar">
 
                   <div
-                    class="relative flex justify-center items-center bg-gray border border-solid border-gray-500 w-[18px] h-[18px] p-2 rounded-sm hover:bg-gray-500 hover:border-gray-400 focus-visible:outline-none focus-visible:border-gray-300 focus-visible:bg-gray-500"
-                    :class="{
-                      'bg-cyan': hairs.length == 0,
-                    }"
+                    class="hair-deselect relative flex justify-center items-center bg-gray border border-solid border-gray-500 w-[18px] h-[18px] p-2 rounded-sm
+                    hover:bg-gray-500 hover:border-gray-400
+                    focus-visible:outline-none focus-visible:border-white focus-visible:bg-cyan
+                    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" @click="selectedHair = null" 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" 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
                     v-for="hair in hairs"
-                    class="relative flex justify-center items-center bg-gray border border-solid border-gray-500 w-[18px] h-[18px] p-2 rounded-sm hover:bg-gray-500 hover:border-gray-400 focus-visible:outline-none focus-visible:border-gray-300 focus-visible:bg-gray-500"
-                    :class="{
-                      'bg-cyan': hair.id === selectedHair?.id,
-                      'bg-gray hover:bg-gray-500': hair.id !== selectedHair?.id
-                    }"
+                    class="relative flex justify-center items-center bg-gray border border-solid border-gray-500 w-[18px] h-[18px] p-2 rounded-sm
+                    hover:bg-gray-500 hover:border-gray-400
+                    focus-visible:outline-none focus-visible:border-gray-300 focus-visible:bg-gray-500
+                    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" @click="selectedHair = hair" 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" 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>