imshvc/noxious_client
1
0
Fork 0
forked from noxious/client
Code Pull Requests Activity

Finished base layout of character select/create

Browse Source
This commit is contained in:
Colin Kallemein
2024-11-08 21:22:50 +01:00
parent ed6f592606
commit 0a99d2c430
6 changed files with 79 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/assets/scss/main.scss
View File

@ -111,6 +111,7 @@ button {
@apply text-gray-50 border-2 border-solid border-gray-500 text-base leading-5 rounded py-2.5;
&.active,
&.selected,
&:hover {
@apply bg-gray-700 border-gray-700;
}
@ -123,6 +124,10 @@ button {
&.eye-open {
@apply bg-[url('/assets/icons/eye-closed.svg')] w-5 h-4 right-2.5;
}
&.selected {
@apply bg-gray-500 border-gray-400
}
}
.character {
@ -139,6 +144,15 @@ button {
@apply hidden;
}
.scrollbar {
&::-webkit-scrollbar {
@apply block w-0.5 bg-gray-300 rounded-sm;
}
&::-webkit-scrollbar-thumb {
@apply bg-gray-175;
}
}
canvas {
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-crisp-edges;

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

@ -30,20 +30,27 @@
<input class="input-field w-[158px]" type="text" name="name" :placeholder="characters.find(c => c.id == selected_character)?.name" />
<div class="flex flex-col gap-4 items-center">
<div class="flex flex-col gap-3">
<div class="bg-[url('/assets/ui-elements/ui-border-2-corners-bottom.svg')] w-[190px] h-52 bg-no-repeat bg-center flex items-center justify-center">
<div class="bg-[url('/assets/ui-elements/character-select-ui-shape.svg')] w-[190px] h-52 bg-no-repeat bg-center flex items-center justify-between">
<button class="ml-6 w-4 h-8 p-0">
<img src="/assets/icons/triangle-icon.svg" class="w-3 h-3.5 m-auto" alt="Arrow left" />
</button>
<img class="w-12 object-contain mb-3.5" src="/assets/avatar/default/0.png" alt="Player avatar"/>
<button class="mr-6 w-4 h-8 p-0">
<img src="/assets/icons/triangle-icon.svg" class="w-3 h-3.5 -scale-x-100" alt="Arrow right" />
</button>
</div>
<div class="flex justify-between w-[190px]">
<!-- TODO: replace with color swatches -->
<div v-for="n in 9" class="w-4 h-4 rounded-sm bg-white"></div>
<button v-for="n in 9" class="w-4 h-4 rounded-sm bg-white"></button>
</div>
</div>
<!-- TODO: update gender on (selected) character -->
<div class="flex justify-between w-[190px]">
<button class="btn-empty flex gap-2">
<button class="btn-empty flex gap-2" :class="{'selected': characters.find(c => c.id == selected_character)?.characterType?.gender === 'MALE'}">
<img src="/assets/icons/male-icon.svg" class="w-4 h-4 m-auto" alt="Male symbol" />
<span class="text-white">Male</span>
</button>
<button class="btn-empty flex gap-2">
<button class="btn-empty flex gap-2" :class="{'selected': characters.find(c => c.id == selected_character)?.characterType?.gender === 'FEMALE'}">
<img src="/assets/icons/male-icon.svg" class="w-4 h-4 m-auto" alt="Male symbol" />
<span class="text-white">Female</span>
</button>
@ -51,7 +58,29 @@
</div>
</div>
</div>
<div class="w-2/3 h-full bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-cover bg-center rounded-r-md"></div>
<div class="w-2/3 h-full bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-cover bg-center rounded-r-md">
<div class="py-6 px-8 h-[calc(100%_-_48px)] flex flex-col items-center gap-10" v-if="selected_character">
<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">
<img src="/assets/icons/x-button-gray.svg" class="w-4 h-4 m-auto" alt="Male symbol" />
</button>
<!-- TODO: replace with hairstyles -->
<button v-for="n in 30" 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">
</button>
</div>
</div>
<div class="flex flex-col gap-3 w-full">
<span class="text-sm">Hair color</span>
<div class="flex gap-2 flex-wrap">
<!-- TODO: replace with hairstyles -->
<button v-for="n in 10" class="bg-white w-6 h-6 rounded-sm"></button>
</div>
</div>
</div>
</div>
</div>
</div>
<div v-else>