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

Better styling selected character

Browse Source
This commit is contained in:
Colin Kallemein 2024-06-02 00:14:52 +02:00
parent f62e81efad
commit bf8763d030
2 changed files with 77 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/assets/icons/plus-icon.svg
View File

@ -1,4 +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="M4 12H20M12 4V20" stroke="#7B76FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4 12H20M12 4V20" stroke="rgba(255, 255, 255, 0.8)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 308 B

After

Width:  |  Height:  |  Size: 325 B

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

@ -2,24 +2,25 @@
<div class="character-select-screen">
<div class="ui-wrapper">
<div class="characters-wrapper">
<div v-for="character in characters" :key="character.id" class="character">
<div v-for="character in characters" :key="character.id" class="character" :class="{active: selected_character == character.id}">
<input type="radio" :id="character.id" name="character" :value="character.id" v-model="selected_character" />
<label :for="character.id">
{{ character.name }}
<label :for="character.id">{{ character.name }}</label>
<div class="sprite-container">
<img src="/assets/avatar/default/base_right_down.png" />
</label>
</div>
<span>Lvl. </span>
</div>
<div class="character new-character">
<button @click="isModalOpen = true">
<img src="/assets/icons/plus-icon.svg" />
Create new
<span>Create new</span>
</button>
</div>
</div>
<div class="buttons-wrapper">
<button @click="select_character()">Play</button>
<button @click="isModalOpen = true">Create New</button>
<button v-if="selected_character" @click="select_character()">Play</button>
<!-- @TODO : Add a confirmation dialog -->
<button v-if="selected_character" @click="delete_character()">Delete</button>
</div>
@ -30,6 +31,7 @@
<template #modal-header>
<h2 class="modal-title">Create your character</h2>
</template>
<template #modal-body>
<form method="post" @submit.prevent="create" class="modal-form">
<div class="form-fields">
@ -120,13 +122,40 @@ function create() {
border-radius: 20px;
position: relative;
&.active {
background: rgba($light-gray, 0.8);
}
&.new-character {
background-color: rgba($light-gray, 0.5);
button {
background-color: transparent;
border: none;
}
height: 100%;
padding: 40px 0;
display: flex;
flex-direction: column;
justify-content: space-between;
text-align: center;
&::before {
content: '';
}
img {
width: 100px;
height: 100px;
margin: auto;
}
span {
align-self: center;
color: $white;
font-size: 16px;
}
&:hover {
cursor: pointer;
}
}
&::before, &::after {
display: none;
}
}
@ -134,30 +163,61 @@ function create() {
&::before {
content: '';
position: absolute;
top: 0;
width: 100%;
height: 40px;
background-color: rgba($purple, 0.6);
border-radius: 20px 20px 0 0;
}
&::after {
content: '';
position: absolute;
bottom: 0;
width: 100%;
height: 40px;
background-color: rgba($purple, 0.6);
border-radius: 0 0 20px 20px;
}
// hide the radio buttons
input[type="radio"] {
display: none;
opacity: 0;
height: 100%;
width: 100%;
position: absolute;
}
label {
position: absolute;
top: 20px;
width: 100%;
text-align: center;
transform: translateY(-50%);
font-family: Arial, sans-serif;
color: $white;
font-weight: bold;
}
span {
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
transform: translateY(50%);
font-family: Arial, sans-serif;
color: $white;
z-index: 1;
}
// img under the label
label {
.sprite-container {
display: flex;
flex-direction: column;
align-items: center;
margin: auto;
}
// for selected radio, give bg color
input[type="radio"]:checked + label {
background: rgba($purple, 0.6);
padding: 5px;
}
}
}