From bf8763d0304d701ff6c13dbad6bcfb1f651dfe67 Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Sun, 2 Jun 2024 00:14:52 +0200
Subject: [PATCH] Better styling selected character

---
 public/assets/icons/plus-icon.svg     |  2 +-
 src/components/screens/Characters.vue | 92 ++++++++++++++++++++++-----
 2 files changed, 77 insertions(+), 17 deletions(-)

diff --git a/public/assets/icons/plus-icon.svg b/public/assets/icons/plus-icon.svg
index 9574232..5de63f9 100644
--- a/public/assets/icons/plus-icon.svg
+++ b/public/assets/icons/plus-icon.svg
@@ -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>
\ No newline at end of file
diff --git a/src/components/screens/Characters.vue b/src/components/screens/Characters.vue
index edf67a2..190fbe7 100644
--- a/src/components/screens/Characters.vue
+++ b/src/components/screens/Characters.vue
@@ -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 {
+          &::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;
-        }
       }
     }