From 89d83efca4c6d20c9b55b67a247760880790b104 Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Sat, 23 Nov 2024 22:55:43 +0100
Subject: [PATCH] Mess

---
 src/components/screens/Characters.vue | 31 ++++++++++++++++-----------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/components/screens/Characters.vue b/src/components/screens/Characters.vue
index 4f95445..48c1264 100644
--- a/src/components/screens/Characters.vue
+++ b/src/components/screens/Characters.vue
@@ -68,21 +68,28 @@
               <div class="flex flex-col gap-3 w-full">
                 <span class="text-sm">Hairstyle</span>
                 <div class="flex gap-2 flex-wrap max-h-20 overflow-y-auto scrollbar">
-                  <button class="bg-gray border border-solid border-gray-500 min-w-9 max-w-9 min-h-9 max-h-9 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">
-                    <img src="/assets/icons/x-button-gray.svg" class="w-4 h-4 m-auto" alt="Male symbol" />
-                  </button>
-                  <!-- TODO #255: make radio button so we can set a value, do the same with swatches -->
-                  <button
-                    v-for="hair in hairs"
-                    class="border border-solid border-gray-500 min-w-9 max-w-9 min-h-9 max-h-9 p-2 rounded-sm hover:border-gray-400 focus-visible:outline-none focus-visible:border-gray-300 focus-visible:bg-gray-500"
-                    @click="selectedHair = hair"
+
+                  <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': hair.id === selectedHair?.id,
-                      'bg-gray-500 hover:bg-gray-500': hair.id !== selectedHair?.id
+                      'bg-cyan': hairs.length == 0,
                     }"
                   >
-                    <img class="w-4 h-4 m-auto" :src="config.server_endpoint + '/assets/sprites/' + hair.spriteId + '/front.png'" alt="Male symbol" />
-                  </button>
+                    <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" />
+                  </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
+                    }"
+                  >
+                    <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" />
+                  </div>
                 </div>
               </div>
               <div class="flex flex-col gap-3 w-full">