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

added cutout shape to char select

Browse Source
This commit is contained in:
Colin Kallemein
2024-06-02 21:54:17 +02:00
parent b995d1f8c1
commit e97febd5c1
6 changed files with 37 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -24,8 +24,11 @@
</div>
</div>
<div class="buttons-wrapper">
<button v-if="selected_character" @click="select_character()">Play</button>
<div class="button-wrapper">
<button v-if="selected_character" @click="select_character()">
Play
<img src="/assets/icons/arrow.svg">
</button>
</div>
</div>
</div>
@ -117,21 +120,24 @@ function create() {
width: 100%;
.character {
width: 150px;
height: 250px;
width: 170px;
height: 275px;
display: flex;
flex-direction: column;
background-color: rgba($white, 0.8);
outline: 1px solid $white;
background-image: url('/assets/shapes/character-select-shape-unselected.svg');
background-repeat: no-repeat;
border-radius: 20px;
position: relative;
&.active {
background: rgba($light-gray, 0.8);
background-image: url('/assets/shapes/character-select-shape.svg');
}
&.new-character {
background-color: rgba($light-gray, 0.5);
background-image: none;
button {
background-color: transparent;
border: none;
@ -168,7 +174,8 @@ function create() {
top: 0;
width: 100%;
height: 40px;
background-color: rgba($purple, 0.6);
background-image: url('/assets/shapes/character-select-header-shape.svg');
background-repeat: no-repeat;
border-radius: 20px 20px 0 0;
}
@ -188,6 +195,7 @@ function create() {
height: 100%;
width: 100%;
position: absolute;
margin: 0;
}
label {
@ -209,7 +217,7 @@ function create() {
border-radius: 100%;
z-index: 1;
right: -10px;
top: 0;
top: 5px;
transform: translateY(-50%);
position: absolute;
@ -238,11 +246,11 @@ function create() {
}
}
.buttons-wrapper {
.button-wrapper {
display: flex;
gap: 30px;
button {
padding: 10px 16px;
padding: 8px 10px 8px 20px;
min-width: 6.25rem;
text-align: center;
position: relative;
@ -251,12 +259,20 @@ function create() {
border-radius: 5px;
color: $white;
font-size: 18px;
display: flex;
gap: 10px;
align-items: center;
span {
color: $white;
margin: auto;
}
img {
height: 35px;
opacity: 0.3;
}
&:hover {
background-color: rgba($lilac, 0.75);
}

5
src/components/utilities/Modal.vue
View File

@ -90,8 +90,9 @@ onUnmounted(() => {
position: fixed;
top: 0;
left: 0;
width: 30%;
height: 40%;
max-width: 500px;
min-width: 350px;
min-height: 300px;
border-radius: 20px;
background-color: rgba($white, 0.8);
z-index: 999;