From bc7d83345fca356ffbb03d57aa7e7543bed1d021 Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Sun, 2 Jun 2024 15:55:53 +0200
Subject: [PATCH] Changed delete, added global styling

---
 public/assets/icons/trashcan.svg      |  4 +++
 src/assets/scss/_variables.scss       |  2 +-
 src/assets/scss/login.scss            |  2 --
 src/assets/scss/main.scss             | 13 +++++++++
 src/components/screens/Characters.vue | 40 +++++++++++++++++----------
 src/components/utilities/Modal.vue    |  4 ---
 6 files changed, 44 insertions(+), 21 deletions(-)
 create mode 100644 public/assets/icons/trashcan.svg

diff --git a/public/assets/icons/trashcan.svg b/public/assets/icons/trashcan.svg
new file mode 100644
index 0000000..8bcb203
--- /dev/null
+++ b/public/assets/icons/trashcan.svg
@@ -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="M18 6L17.1991 18.0129C17.129 19.065 17.0939 19.5911 16.8667 19.99C16.6666 20.3412 16.3648 20.6235 16.0011 20.7998C15.588 21 15.0607 21 14.0062 21H9.99377C8.93927 21 8.41202 21 7.99889 20.7998C7.63517 20.6235 7.33339 20.3412 7.13332 19.99C6.90607 19.5911 6.871 19.065 6.80086 18.0129L6 6M4 6H20M16 6L15.7294 5.18807C15.4671 4.40125 15.3359 4.00784 15.0927 3.71698C14.8779 3.46013 14.6021 3.26132 14.2905 3.13878C13.9376 3 13.523 3 12.6936 3H11.3064C10.477 3 10.0624 3 9.70951 3.13878C9.39792 3.26132 9.12208 3.46013 8.90729 3.71698C8.66405 4.00784 8.53292 4.40125 8.27064 5.18807L8 6M14 10V17M10 10V17" stroke="#FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss
index f999fcd..368ad97 100644
--- a/src/assets/scss/_variables.scss
+++ b/src/assets/scss/_variables.scss
@@ -4,7 +4,7 @@ $black: #000;
 $purple: #4741e6;
 $lilac: #7b76ff;
 $light-blue: #00c2ff;
-$red: #ff0000;
+$red: #d50000;
 $gray: #7f7f7f;
 $gray-2: #696969;
 $dark-gray: #454545;
diff --git a/src/assets/scss/login.scss b/src/assets/scss/login.scss
index 955855e..a6d6f88 100644
--- a/src/assets/scss/login.scss
+++ b/src/assets/scss/login.scss
@@ -84,7 +84,6 @@
 
         &:hover {
           background-color: rgba($lilac, 0.75);
-          cursor: pointer;
         }
       }
     }
@@ -107,7 +106,6 @@ p,
 a,
 li,
 label {
-  font-family: Arial, sans-serif;
   color: $white;
 }
 
diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index da1d39a..983368c 100644
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@@ -27,6 +27,19 @@ h6 {
   font-family: GentiumPlus, serif;
 }
 
+p, 
+span, 
+li, 
+a,
+button,
+label {
+  font-family: Arial, sans-serif;
+}
+
+button:hover {
+  cursor: pointer;
+}
+
 ::-webkit-scrollbar {
   display: none;
 }
diff --git a/src/components/screens/Characters.vue b/src/components/screens/Characters.vue
index 9a066a3..5645730 100644
--- a/src/components/screens/Characters.vue
+++ b/src/components/screens/Characters.vue
@@ -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;
         }
       }
     }
diff --git a/src/components/utilities/Modal.vue b/src/components/utilities/Modal.vue
index 8d27731..8c9d985 100644
--- a/src/components/utilities/Modal.vue
+++ b/src/components/utilities/Modal.vue
@@ -126,8 +126,6 @@ onUnmounted(() => {
       }
 
       &:hover {
-        cursor: pointer;
-
         &::after {
           content: '';
           position: absolute;
@@ -164,7 +162,6 @@ onUnmounted(() => {
 
       &:hover {
         background-color: rgba($lilac, 0.75);
-        cursor: pointer;
       }
     }
     .modal-form {
@@ -174,7 +171,6 @@ onUnmounted(() => {
         flex-direction: column;
         margin-bottom: 20px;
         label {
-          font-family: Arial, sans-serif;
           margin-bottom: 10px;
         }
         input {