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

Pseudo hell

Browse Source
This commit is contained in:
Colin Kallemein 2024-07-07 01:35:26 +02:00
parent ff2f890cb6
commit a2c39dada1
1 changed files with 3 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/screens/Characters.vue
View File

@ -4,7 +4,7 @@
<div class="ui-wrapper h-dvh flex flex-col justify-center items-center gap-[80px] px-[80px]">
<div class="filler"></div>
<div class="flex justify-center flex-wrap gap-[60px] w-full max-h-[650px] overflow-auto" v-if="!isLoading">
<div v-for="character in characters" :key="character.id" class="character m-[15px] w-[170px] h-[275px] flex flex-col rounded-[20px] relative bg-[url('/assets/shapes/character-select-shape.svg')] bg-no-repeat shadow-character" :class="{ active: selected_character == character.id }">
<div v-for="character in characters" :key="character.id" class="group m-[15px] w-[170px] h-[275px] flex flex-col rounded-[20px] relative bg-[url('/assets/shapes/character-select-shape.svg')] bg-no-repeat shadow-character" :class="{ active: selected_character == character.id }">
<input class="opacity-0 h-full w-full absolute m-0 z-10" type="radio" :id="character.id" name="character" :value="character.id" v-model="selected_character" />
<label class="font-bold absolute left-1/2 top-[20px] max-w-[130px] translate-x-[-50%] translate-y-[-50%] text-center text-ellipsis overflow-hidden whitespace-nowrap drop-shadow-text" :for="character.id">{{ character.name }}</label>
<!-- @TODO : Add a confirmation dialog -->
@ -16,7 +16,7 @@
<img class="drop-shadow-20" draggable="false" src="/assets/avatar/default/0.png" />
</div>
<span class="absolute bottom-[20px] w-full text-center translate-y-1/2 z-10 drop-shadow-text">Lvl. {{ character.level }}</span>
<div class="selected-character absolute max-w-0 w-[65%] h-[3px] bg-white rounded-[3px] left-1/2 bottom-[-15px] translate-x-[-50%] transition-all ease-in-out duration-300"></div>
<div class="selected-character group-[.active]:max-w-[170px] absolute max-w-0 w-[65%] h-[3px] bg-white rounded-[3px] left-1/2 bottom-[-15px] translate-x-[-50%] transition-all ease-in-out duration-300"></div>
</div>
<div class="character new-character m-[15px] w-[170px] h-[275px] flex flex-col rounded-[20px] relative bg-gray-50 bg-opacity-50 bg-no-repeat shadow-character" v-if="characters.length < 4">
@ -32,7 +32,7 @@
</div>
<div class="button-wrapper flex gap-[30px]" v-if="!isLoading">
<button class="btn-cyan py-2 pr-2.5 pl-[30px] min-w-[100px] relative rounded text-xl flex gap-[15px] items-center transition-all ease-in-out duration-200" :disabled="!selected_character" @click="select_character()">
<button class="btn-cyan py-2 pr-2.5 pl-[30px] min-w-[100px] relative rounded text-xl flex gap-[15px] items-center transition-all ease-in-out duration-200 hover:gap-[20px] disabled:bg-cyan disabled:hover:bg-opacity-50 disabled:bg-opacity-50 disabled:cursor-not-allowed disabled:hover:gap-[15px]" :disabled="!selected_character" @click="select_character()">
PLAY
<img class="h-[30px] drop-shadow-20" draggable="false" src="/assets/icons/arrow.svg" />
</button>
@ -114,28 +114,3 @@ onBeforeUnmount(() => {
socket.connection.off('character:create:success')
})
</script>
<style lang="scss">
.character {
&.active {
.selected-character {
@apply max-w-[170px];
}
}
}
.button-wrapper {
button {
&:disabled {
@apply bg-cyan bg-opacity-50 cursor-not-allowed;
&:hover {
@apply gap-[15px];
}
}
&:hover {
@apply gap-[20px];
}
}
}
</style>