forked from noxious/client
added cutout shape to char select
This commit is contained in:
parent
b995d1f8c1
commit
e97febd5c1
4
public/assets/icons/arrow.svg
Normal file
4
public/assets/icons/arrow.svg
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M6 12H18M18 12L13 7M18 12L13 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 320 B |
1
public/assets/shapes/character-select-header-shape.svg
Normal file
1
public/assets/shapes/character-select-header-shape.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg width="170" xmlns="http://www.w3.org/2000/svg" height="40" id="screenshot-2ec5776a-76a9-8039-8004-71e1627cda51" viewBox="0 0 170 40" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-2ec5776a-76a9-8039-8004-71e1627cda51"><g class="fills" id="fills-2ec5776a-76a9-8039-8004-71e1627cda51"><path d="M170.000,22.776L170.000,40.000L0.000,40.000L0.000,20.000C0.000,8.962,8.962,0.000,20.000,0.000L147.224,0.000C147.076,0.979,147.000,1.980,147.000,3.000C147.000,14.038,155.962,23.000,167.000,23.000C168.020,23.000,169.021,22.924,170.000,22.776Z" style="fill: rgb(71, 65, 230); fill-opacity: 0.6;"/></g></g></svg>
|
||||||
|
After Width: | Height: | Size: 640 B |
@ -0,0 +1 @@
|
|||||||
|
<svg width="170" xmlns="http://www.w3.org/2000/svg" height="275" id="screenshot-2ec5776a-76a9-8039-8004-71e29b2b325b" viewBox="0 0 170 275" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-2ec5776a-76a9-8039-8004-71e29b2b325b"><g class="fills" id="fills-2ec5776a-76a9-8039-8004-71e29b2b325b"><path d="M170.000,23.599L170.000,255.000C170.000,266.038,161.038,275.000,150.000,275.000L20.000,275.000C8.962,275.000,0.000,266.038,0.000,255.000L0.000,20.000C0.000,8.962,8.962,0.000,20.000,0.000L146.401,0.000C146.138,1.293,146.000,2.630,146.000,4.000C146.000,15.038,154.962,24.000,166.000,24.000C167.370,24.000,168.707,23.862,170.000,23.599Z" style="fill: rgb(177, 178, 181); fill-opacity: 0.8;"/></g><g id="strokes-2ec5776a-76a9-8039-8004-71e29b2b325b" class="strokes"><g class="inner-stroke-shape"><defs><clipPath id="inner-stroke-render-1-2ec5776a-76a9-8039-8004-71e29b2b325b-0"><use href="#stroke-shape-render-1-2ec5776a-76a9-8039-8004-71e29b2b325b-0"/></clipPath><path d="M170.000,23.599L170.000,255.000C170.000,266.038,161.038,275.000,150.000,275.000L20.000,275.000C8.962,275.000,0.000,266.038,0.000,255.000L0.000,20.000C0.000,8.962,8.962,0.000,20.000,0.000L146.401,0.000C146.138,1.293,146.000,2.630,146.000,4.000C146.000,15.038,154.962,24.000,166.000,24.000C167.370,24.000,168.707,23.862,170.000,23.599Z" id="stroke-shape-render-1-2ec5776a-76a9-8039-8004-71e29b2b325b-0" style="fill: none; stroke-width: 4; stroke: rgb(177, 178, 181); stroke-opacity: 1;"/></defs><use href="#stroke-shape-render-1-2ec5776a-76a9-8039-8004-71e29b2b325b-0" clip-path="url('#inner-stroke-render-1-2ec5776a-76a9-8039-8004-71e29b2b325b-0')"/></g></g></g></svg>
|
||||||
|
After Width: | Height: | Size: 1.6 KiB |
1
public/assets/shapes/character-select-shape.svg
Normal file
1
public/assets/shapes/character-select-shape.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg width="170" xmlns="http://www.w3.org/2000/svg" height="275" id="screenshot-2ec5776a-76a9-8039-8004-71df57dfd568" viewBox="0 0 170 275" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-2ec5776a-76a9-8039-8004-71df57dfd568"><g class="fills" id="fills-2ec5776a-76a9-8039-8004-71df57dfd568"><path d="M170.000,23.599L170.000,255.000C170.000,266.038,161.038,275.000,150.000,275.000L20.000,275.000C8.962,275.000,0.000,266.038,0.000,255.000L0.000,20.000C0.000,8.962,8.962,0.000,20.000,0.000L146.401,0.000C146.138,1.293,146.000,2.630,146.000,4.000C146.000,15.038,154.962,24.000,166.000,24.000C167.370,24.000,168.707,23.862,170.000,23.599Z" style="fill: rgb(255, 255, 255); fill-opacity: 0.8;"/></g><g id="strokes-2ec5776a-76a9-8039-8004-71df57dfd568" class="strokes"><g class="inner-stroke-shape"><defs><clipPath id="inner-stroke-render-1-2ec5776a-76a9-8039-8004-71df57dfd568-0"><use href="#stroke-shape-render-1-2ec5776a-76a9-8039-8004-71df57dfd568-0"/></clipPath><path d="M170.000,23.599L170.000,255.000C170.000,266.038,161.038,275.000,150.000,275.000L20.000,275.000C8.962,275.000,0.000,266.038,0.000,255.000L0.000,20.000C0.000,8.962,8.962,0.000,20.000,0.000L146.401,0.000C146.138,1.293,146.000,2.630,146.000,4.000C146.000,15.038,154.962,24.000,166.000,24.000C167.370,24.000,168.707,23.862,170.000,23.599Z" id="stroke-shape-render-1-2ec5776a-76a9-8039-8004-71df57dfd568-0" style="fill: none; stroke-width: 4; stroke: rgb(255, 255, 255); stroke-opacity: 1;"/></defs><use href="#stroke-shape-render-1-2ec5776a-76a9-8039-8004-71df57dfd568-0" clip-path="url('#inner-stroke-render-1-2ec5776a-76a9-8039-8004-71df57dfd568-0')"/></g></g></g></svg>
|
||||||
|
After Width: | Height: | Size: 1.6 KiB |
@ -24,8 +24,11 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="buttons-wrapper">
|
<div class="button-wrapper">
|
||||||
<button v-if="selected_character" @click="select_character()">Play</button>
|
<button v-if="selected_character" @click="select_character()">
|
||||||
|
Play
|
||||||
|
<img src="/assets/icons/arrow.svg">
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -117,21 +120,24 @@ function create() {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
.character {
|
.character {
|
||||||
width: 150px;
|
width: 170px;
|
||||||
height: 250px;
|
height: 275px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
background-color: rgba($white, 0.8);
|
background-image: url('/assets/shapes/character-select-shape-unselected.svg');
|
||||||
outline: 1px solid $white;
|
background-repeat: no-repeat;
|
||||||
|
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
background: rgba($light-gray, 0.8);
|
background-image: url('/assets/shapes/character-select-shape.svg');
|
||||||
}
|
}
|
||||||
|
|
||||||
&.new-character {
|
&.new-character {
|
||||||
background-color: rgba($light-gray, 0.5);
|
background-color: rgba($light-gray, 0.5);
|
||||||
|
background-image: none;
|
||||||
|
|
||||||
button {
|
button {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border: none;
|
border: none;
|
||||||
@ -168,7 +174,8 @@ function create() {
|
|||||||
top: 0;
|
top: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 40px;
|
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;
|
border-radius: 20px 20px 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -188,6 +195,7 @@ function create() {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
label {
|
label {
|
||||||
@ -209,7 +217,7 @@ function create() {
|
|||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
right: -10px;
|
right: -10px;
|
||||||
top: 0;
|
top: 5px;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
||||||
@ -238,11 +246,11 @@ function create() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.buttons-wrapper {
|
.button-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 30px;
|
gap: 30px;
|
||||||
button {
|
button {
|
||||||
padding: 10px 16px;
|
padding: 8px 10px 8px 20px;
|
||||||
min-width: 6.25rem;
|
min-width: 6.25rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -251,12 +259,20 @@ function create() {
|
|||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
color: $white;
|
color: $white;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
color: $white;
|
color: $white;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
height: 35px;
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: rgba($lilac, 0.75);
|
background-color: rgba($lilac, 0.75);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -90,8 +90,9 @@ onUnmounted(() => {
|
|||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 30%;
|
max-width: 500px;
|
||||||
height: 40%;
|
min-width: 350px;
|
||||||
|
min-height: 300px;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
background-color: rgba($white, 0.8);
|
background-color: rgba($white, 0.8);
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user