noxious/client
3
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mess

Browse Source
This commit is contained in:
Colin Kallemein 2024-11-23 22:55:43 +01:00
parent ab97e27f27
commit 89d83efca4
1 changed files with 19 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/screens/Characters.vue
View File

@ -68,21 +68,28 @@
<div class="flex flex-col gap-3 w-full"> <div class="flex flex-col gap-3 w-full">
<span class="text-sm">Hairstyle</span> <span class="text-sm">Hairstyle</span>
<div class="flex gap-2 flex-wrap max-h-20 overflow-y-auto scrollbar"> <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" /> <div
</button> 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"
<!-- 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"
:class="{ :class="{
'bg-cyan': hair.id === selectedHair?.id, 'bg-cyan': hairs.length == 0,
'bg-gray-500 hover:bg-gray-500': hair.id !== selectedHair?.id
}" }"
> >
<img class="w-4 h-4 m-auto" :src="config.server_endpoint + '/assets/sprites/' + hair.spriteId + '/front.png'" alt="Male symbol" /> <img src="/assets/icons/x-button-gray.svg" class="w-4 h-4" alt="Empty button" />
</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> </div>
<div class="flex flex-col gap-3 w-full"> <div class="flex flex-col gap-3 w-full">