Convert character screen to Tailwind
This commit is contained in:
parent
b0fdb816da
commit
425da73930
@ -1,38 +1,40 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="character-select-screen">
|
<div class="character-select-screen bg-gray-300 relative">
|
||||||
<div class="ui-wrapper">
|
<div class="absolute bg-[url('/assets/shapes/select-screen-bg-shape.svg')] bg-no-repeat bg-center w-full h-full"></div>
|
||||||
<div class="characters-wrapper" v-if="!isLoading">
|
<div class="ui-wrapper h-dvh flex flex-col justify-center items-center gap-[80px] px-[80px]">
|
||||||
<div v-for="character in characters" :key="character.id" class="character" :class="{ active: selected_character == character.id }">
|
<div class="filler"></div>
|
||||||
<input type="radio" :id="character.id" name="character" :value="character.id" v-model="selected_character" />
|
<div class="characters-wrapper flex justify-center flex-wrap gap-[60px] w-full max-h-[650px] overflow-auto" v-if="!isLoading">
|
||||||
<label :for="character.id">{{ character.name }}</label>
|
<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 }">
|
||||||
|
<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 -->
|
<!-- @TODO : Add a confirmation dialog -->
|
||||||
<button class="delete" @click="delete_character(character.id)">
|
<button class="delete bg-red w-[30px] h-[30px] p-[3px] rounded-full absolute right-[-15px] top-0 translate-y-[-50%] z-10 border-2 border-solid border-white hover:bg-red-100" @click="delete_character(character.id)">
|
||||||
<img draggable="false" src="/assets/icons/trashcan.svg" />
|
<img draggable="false" src="/assets/icons/trashcan.svg" />
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<div class="sprite-container">
|
<div class="sprite-container flex flex-col items-center m-auto">
|
||||||
<img draggable="false" src="/assets/avatar/default/0.png" />
|
<img class="drop-shadow-20" draggable="false" src="/assets/avatar/default/0.png" />
|
||||||
</div>
|
</div>
|
||||||
<span>Lvl. {{ character.level }}</span>
|
<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>
|
</div>
|
||||||
|
|
||||||
<div class="character new-character" v-if="characters.length < 4">
|
<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">
|
||||||
<button @click="isModalOpen = true">
|
<button class="h-full w-full py-[40px] flex flex-col justify-between" @click="isModalOpen = true">
|
||||||
<img draggable="false" src="/assets/icons/plus-icon.svg" />
|
<div class="filler"></div>
|
||||||
<span>Create new</span>
|
<img class="w-[100px] h-[100px] m-auto" draggable="false" src="/assets/icons/plus-icon.svg" />
|
||||||
|
<span class="self-center text-base absolute bottom-[20px] w-full text-center translate-y-1/2 z-10 drop-shadow-text">Create new</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-else>
|
<div v-else>
|
||||||
<div class="loading-spinner">
|
<img class="w-[80px] invert-80" src="/assets/icons/loading-icon1.svg" />
|
||||||
<img src="/assets/icons/loading-icon1.svg" />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="button-wrapper" v-if="!isLoading">
|
<div class="button-wrapper flex gap-[30px]" v-if="!isLoading">
|
||||||
<button class="btn-cyan" :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" :disabled="!selected_character" @click="select_character()">
|
||||||
PLAY
|
PLAY
|
||||||
<img draggable="false" src="/assets/icons/arrow.svg" />
|
<img class="h-[30px] drop-shadow-20" draggable="false" src="/assets/icons/arrow.svg" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -114,209 +116,27 @@ onBeforeUnmount(() => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import '@/assets/scss/main';
|
.characters-wrapper {
|
||||||
|
|
||||||
.character-select-screen {
|
|
||||||
&::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
background-image: url('/assets/shapes/select-screen-bg-shape.svg');
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: center;
|
|
||||||
background-size: 100% cover;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
background-color: $dark-gray;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.ui-wrapper {
|
|
||||||
height: 100vh;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
gap: 80px;
|
|
||||||
padding: 0 80px;
|
|
||||||
&::before {
|
|
||||||
content: '';
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading-spinner img {
|
|
||||||
width: 5rem;
|
|
||||||
// css color
|
|
||||||
filter: invert(1);
|
|
||||||
// white
|
|
||||||
filter: invert(80%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.characters-wrapper {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 60px;
|
|
||||||
width: 100%;
|
|
||||||
max-height: 650px;
|
|
||||||
overflow: auto;
|
|
||||||
|
|
||||||
.character {
|
.character {
|
||||||
margin: 15px;
|
&.active {
|
||||||
width: 170px;
|
.selected-character {
|
||||||
height: 275px;
|
@apply max-w-[170px];
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
border-radius: 20px;
|
|
||||||
position: relative;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-image: url('/assets/shapes/character-select-shape.svg');
|
|
||||||
box-shadow: 0 4px 30px rgba($black, 0.1);
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
max-width: 0;
|
|
||||||
width: 65%;
|
|
||||||
height: 3px;
|
|
||||||
background-color: $white;
|
|
||||||
border-radius: 3px;
|
|
||||||
left: 50%;
|
|
||||||
bottom: -15px;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
transition: ease-in-out max-width 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active::after {
|
|
||||||
max-width: 170px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.new-character {
|
|
||||||
background-color: rgba($light-gray, 0.5);
|
|
||||||
background-image: none;
|
|
||||||
|
|
||||||
button {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
padding: 40px 0;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
&::before {
|
|
||||||
content: '';
|
|
||||||
}
|
|
||||||
img {
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
align-self: center;
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type='radio'] {
|
|
||||||
opacity: 0;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
position: absolute;
|
|
||||||
margin: 0;
|
|
||||||
z-index: 9;
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
|
||||||
font-weight: bold;
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
top: 20px;
|
|
||||||
max-width: 130px;
|
|
||||||
transform: translateY(-50%) translateX(-50%);
|
|
||||||
text-align: center;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-shadow: 1px 1px 5px rgba($black, 0.25);
|
|
||||||
}
|
|
||||||
|
|
||||||
button.delete {
|
|
||||||
background-color: $red;
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
padding: 3px;
|
|
||||||
border-radius: 100%;
|
|
||||||
position: absolute;
|
|
||||||
right: -15px;
|
|
||||||
top: 0;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
z-index: 1;
|
|
||||||
border: 2px solid $white;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: $dark-red;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 20px;
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
transform: translateY(50%);
|
|
||||||
z-index: 1;
|
|
||||||
text-shadow: 1px 1px 5px rgba($black, 0.25);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sprite-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
margin: auto;
|
|
||||||
|
|
||||||
img {
|
|
||||||
filter: drop-shadow(0 3px 6px rgba($black, 0.25));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-wrapper {
|
|
||||||
display: flex;
|
|
||||||
gap: 30px;
|
|
||||||
|
|
||||||
button {
|
|
||||||
padding: 8px 10px 8px 30px;
|
|
||||||
min-width: 100px;
|
|
||||||
position: relative;
|
|
||||||
border-radius: 5px;
|
|
||||||
font-size: 1.25rem;
|
|
||||||
display: flex;
|
|
||||||
gap: 15px;
|
|
||||||
align-items: center;
|
|
||||||
transition: ease-in-out gap 0.2s;
|
|
||||||
|
|
||||||
span {
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
height: 30px;
|
|
||||||
filter: drop-shadow(0 4px 6px rgba($black, 0.25));
|
|
||||||
}
|
|
||||||
|
|
||||||
&:disabled {
|
|
||||||
background-color: rgba($cyan, 0.5);
|
|
||||||
cursor: not-allowed;
|
|
||||||
&:hover {
|
|
||||||
gap: 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.button-wrapper {
|
||||||
|
button {
|
||||||
|
&:disabled {
|
||||||
|
@apply bg-cyan bg-opacity-50 cursor-not-allowed;
|
||||||
|
&:hover {
|
||||||
|
@apply gap-[15px];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
@apply gap-[20px];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -11,10 +11,17 @@ export default {
|
|||||||
'30px': '30px'
|
'30px': '30px'
|
||||||
},
|
},
|
||||||
extend: {
|
extend: {
|
||||||
|
invert: {
|
||||||
|
80: '0.80'
|
||||||
|
},
|
||||||
dropShadow: {
|
dropShadow: {
|
||||||
'default': '0 3px 6px rgb(0, 0, 0)',
|
'default': '0 3px 6px rgb(0, 0, 0)',
|
||||||
|
'text': '1px 1px 5px rgba(0, 0, 0, 0.25)',
|
||||||
'20': '0 3px 6px rgba(0, 0, 0, 0.2)'
|
'20': '0 3px 6px rgba(0, 0, 0, 0.2)'
|
||||||
},
|
},
|
||||||
|
boxShadow: {
|
||||||
|
'character': '0 4px 30px rgba(0, 0, 0, 0.1)',
|
||||||
|
},
|
||||||
colors: {
|
colors: {
|
||||||
red: {
|
red: {
|
||||||
DEFAULT: '#d50000',
|
DEFAULT: '#d50000',
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user