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

Changed delete, added global styling

Browse Source
This commit is contained in:
Colin Kallemein
2024-06-02 15:55:53 +02:00
parent a478a02530
commit bc7d83345f
6 changed files with 44 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,6 +5,11 @@
<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>
<!-- @TODO : Add a confirmation dialog -->
<button class="delete" @click="delete_character(character.id)">
<img src="/assets/icons/trashcan.svg">
</button>
<div class="sprite-container">
<img src="/assets/avatar/default/base_right_down.png" />
</div>
@ -21,8 +26,6 @@
<div class="buttons-wrapper">
<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>
</div>
</div>
@ -73,9 +76,9 @@ function select_character() {
}
// Delete character logics
function delete_character() {
if (!selected_character.value) return
socket.getConnection.emit('character:delete', { character_id: selected_character.value })
function delete_character(character_id) {
if (!character_id) return
socket.getConnection.emit('character:delete', { character_id: character_id })
}
// Create character logics
@ -131,6 +134,7 @@ function create() {
background-color: transparent;
border: none;
height: 100%;
width: 100%;
padding: 40px 0;
display: flex;
flex-direction: column;
@ -149,9 +153,6 @@ function create() {
color: $white;
font-size: 16px;
}
&:hover {
cursor: pointer;
}
}
&::before,
&::after {
@ -188,14 +189,27 @@ function create() {
}
label {
color: $white;
font-weight: bold;
position: absolute;
top: 20px;
width: 100%;
text-align: center;
transform: translateY(-50%);
font-family: Arial, sans-serif;
color: $white;
font-weight: bold;
text-align: center;
}
button.delete {
background-color: $red;
border: none;
width: 30px;
height: 30px;
padding: 5px;
border-radius: 100%;
z-index: 1;
right: -5px;
top: 0;
transform: translateY(-50%);
position: absolute;
}
span {
@ -204,7 +218,6 @@ function create() {
width: 100%;
text-align: center;
transform: translateY(50%);
font-family: Arial, sans-serif;
color: $white;
z-index: 1;
}
@ -239,7 +252,6 @@ function create() {
&:hover {
background-color: rgba($lilac, 0.75);
cursor: pointer;
}
}
}