Finished base layout of character select/create

public/assets/icons/triangle-icon.svg

@@ -0,0 +1,3 @@
+<svg width="13" height="16" viewBox="0 0 13 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.00044 7.42339L12.0005 1.07252C12.3193 0.888385 12.7271 0.997653 12.9111 1.31652C12.9697 1.41785 13.0005 1.53285 13.0005 1.64985L13.0005 14.3516C13.0005 14.7198 12.702 15.0182 12.3338 15.0182C12.2167 15.0182 12.1018 14.9874 12.0005 14.9289L1.00044 8.57805C0.681573 8.39399 0.572326 7.98625 0.756419 7.66739C0.814932 7.56605 0.899092 7.48185 1.00044 7.42339Z" fill="#4D4D4D"/>
+</svg>

public/assets/icons/x-button-gray.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.5859 10.0001L0.792969 2.20718L2.20718 0.792969L10.0001 8.58582L17.793 0.792969L19.2072 2.20718L11.4143 10.0001L19.2072 17.7929L17.793 19.2072L10.0001 11.4143L2.20718 19.2072L0.792969 17.7929L8.5859 10.0001Z" fill="#999999"/>
+</svg>

public/assets/ui-elements/character-select-ui-shape.svg

@@ -0,0 +1,25 @@
+<svg width="190" height="202" viewBox="0 0 190 202" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 8H8V0C7.40741 4.14815 4.14815 7.40741 0 8Z" fill="#1A1A1A"/>
+<path d="M7.55 0V0C7.55 4.16975 4.16975 7.55 0 7.55V7.55" stroke="#4D4D4D"/>
+<mask id="path-3-inside-1_632_705" fill="white">
+<path d="M0 8H8V194H0V8Z"/>
+</mask>
+<path d="M0 8H8V194H0V8Z" fill="#1A1A1A"/>
+<path d="M1 194V8H-1V194H1Z" fill="#4D4D4D" mask="url(#path-3-inside-1_632_705)"/>
+<path d="M0 194H8V202C7.40741 197.852 4.14815 194.593 0 194Z" fill="#1A1A1A"/>
+<path d="M7.55 202V202C7.55 197.83 4.16975 194.45 0 194.45V194.45" stroke="#4D4D4D"/>
+<mask id="path-7-inside-2_632_705" fill="white">
+<path d="M8 0H182V202H8V0Z"/>
+</mask>
+<path d="M8 0H182V202H8V0Z" fill="#1A1A1A"/>
+<path d="M8 1H182V-1H8V1ZM182 201H8V203H182V201Z" fill="#4D4D4D" mask="url(#path-7-inside-2_632_705)"/>
+<path d="M190 8H182V0C182.593 4.14815 185.852 7.40741 190 8Z" fill="#1A1A1A"/>
+<path d="M182.45 0V0C182.45 4.16975 185.83 7.55 190 7.55V7.55" stroke="#4D4D4D"/>
+<mask id="path-11-inside-3_632_705" fill="white">
+<path d="M190 8H182V194H190V8Z"/>
+</mask>
+<path d="M190 8H182V194H190V8Z" fill="#1A1A1A"/>
+<path d="M189 194V8H191V194H189Z" fill="#4D4D4D" mask="url(#path-11-inside-3_632_705)"/>
+<path d="M190 194H182V202C182.593 197.852 185.852 194.593 190 194Z" fill="#1A1A1A"/>
+<path d="M182.45 202V202C182.45 197.83 185.83 194.45 190 194.45V194.45" stroke="#4D4D4D"/>
+</svg>

public/assets/ui-elements/ui-border-2-corners-bottom.svg

@@ -1,18 +0,0 @@
-<svg width="190" height="202" viewBox="0 0 190 202" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_i_598_514)">
-<path d="M0 3.60002C0 1.61179 1.61177 0 3.6 0H186.4C188.388 0 190 1.61177 190 3.6V193.658C190 195.646 188.388 197.258 186.4 197.258H184.894C183.584 197.258 182.523 198.32 182.523 199.629C182.523 200.938 181.461 202 180.152 202H9.84847C8.53901 202 7.47748 200.938 7.47748 199.629C7.47748 198.32 6.41596 197.258 5.1065 197.258H3.6C1.61178 197.258 0 195.646 0 193.658V3.60002Z" fill="#181818"/>
-</g>
-<path d="M0.3 3.60002C0.3 1.77747 1.77746 0.3 3.6 0.3H186.4C188.223 0.3 189.7 1.77746 189.7 3.6V193.658C189.7 195.481 188.223 196.958 186.4 196.958H184.894C183.418 196.958 182.223 198.154 182.223 199.629C182.223 200.773 181.295 201.7 180.152 201.7H9.84847C8.7047 201.7 7.77748 200.773 7.77748 199.629C7.77748 198.154 6.58164 196.958 5.1065 196.958H3.6C1.77746 196.958 0.3 195.481 0.3 193.658V3.60002Z" stroke="#454442" stroke-width="0.6"/>
-<defs>
-<filter id="filter0_i_598_514" x="0" y="0" width="190" height="204.4" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="2.4"/>
-<feGaussianBlur stdDeviation="2.34"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.13 0"/>
-<feBlend mode="normal" in2="shape" result="effect1_innerShadow_598_514"/>
-</filter>
-</defs>
-</svg>

src/assets/scss/main.scss

@@ -111,6 +111,7 @@ button {
     @apply text-gray-50 border-2 border-solid border-gray-500 text-base leading-5 rounded py-2.5;
 
     &.active,
+    &.selected,
     &:hover {
       @apply bg-gray-700 border-gray-700;
     }
@@ -123,6 +124,10 @@ button {
   &.eye-open {
     @apply bg-[url('/assets/icons/eye-closed.svg')] w-5 h-4 right-2.5;
   }
+
+  &.selected {
+    @apply bg-gray-500 border-gray-400
+  }
 }
 
 .character {
@@ -139,6 +144,15 @@ button {
   @apply hidden;
 }
 
+.scrollbar {
+  &::-webkit-scrollbar {
+    @apply block w-0.5 bg-gray-300 rounded-sm;
+  }
+  &::-webkit-scrollbar-thumb {
+    @apply bg-gray-175;
+  }
+}
+
 canvas {
   image-rendering: -moz-crisp-edges;
   image-rendering: -webkit-crisp-edges;

src/components/screens/Characters.vue

@@ -30,20 +30,27 @@
               <input class="input-field w-[158px]" type="text" name="name" :placeholder="characters.find(c => c.id == selected_character)?.name" />
               <div class="flex flex-col gap-4 items-center">
                 <div class="flex flex-col gap-3">
-                  <div class="bg-[url('/assets/ui-elements/ui-border-2-corners-bottom.svg')] w-[190px] h-52 bg-no-repeat bg-center flex items-center justify-center">
+                  <div class="bg-[url('/assets/ui-elements/character-select-ui-shape.svg')] w-[190px] h-52 bg-no-repeat bg-center flex items-center justify-between">
+                    <button class="ml-6 w-4 h-8 p-0">
+                      <img src="/assets/icons/triangle-icon.svg" class="w-3 h-3.5 m-auto" alt="Arrow left" />
+                    </button>
                     <img class="w-12 object-contain mb-3.5" src="/assets/avatar/default/0.png" alt="Player avatar"/>
+                    <button class="mr-6 w-4 h-8 p-0">
+                      <img src="/assets/icons/triangle-icon.svg" class="w-3 h-3.5 -scale-x-100" alt="Arrow right" />
+                    </button>
                   </div>
                   <div class="flex justify-between w-[190px]">
                     <!-- TODO: replace with color swatches -->
-                    <div v-for="n in 9" class="w-4 h-4 rounded-sm bg-white"></div>
+                    <button v-for="n in 9" class="w-4 h-4 rounded-sm bg-white"></button>
                   </div>
                 </div>
+                <!-- TODO: update gender on (selected) character -->
                 <div class="flex justify-between w-[190px]">
-                  <button class="btn-empty flex gap-2">
+                  <button class="btn-empty flex gap-2" :class="{'selected': characters.find(c => c.id == selected_character)?.characterType?.gender === 'MALE'}">
                     <img src="/assets/icons/male-icon.svg" class="w-4 h-4 m-auto" alt="Male symbol" />
                     <span class="text-white">Male</span>
                   </button>
-                  <button class="btn-empty flex gap-2">
+                  <button class="btn-empty flex gap-2" :class="{'selected': characters.find(c => c.id == selected_character)?.characterType?.gender === 'FEMALE'}">
                     <img src="/assets/icons/male-icon.svg" class="w-4 h-4 m-auto" alt="Male symbol" />
                     <span class="text-white">Female</span>
                   </button>
@@ -51,7 +58,29 @@
               </div>
             </div>
           </div>
-          <div class="w-2/3 h-full bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-cover bg-center rounded-r-md"></div>
+          <div class="w-2/3 h-full bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-cover bg-center rounded-r-md">
+            <div class="py-6 px-8 h-[calc(100%_-_48px)] flex flex-col items-center gap-10" v-if="selected_character">
+              <div class="flex flex-col gap-3 w-full">
+                <span class="text-sm">Hairstyle</span>
+                <div class="flex gap-2 flex-wrap max-h-20 overflow-y-auto scrollbar">
+                  <button class="bg-gray border border-solid border-gray-500 min-w-9 max-w-9 min-h-9 max-h-9 p-2 rounded-sm hover:bg-gray-500 hover:border-gray-400">
+                    <img src="/assets/icons/x-button-gray.svg" class="w-4 h-4 m-auto" alt="Male symbol" />
+                  </button>
+                  <!-- TODO: replace with hairstyles -->
+                  <button v-for="n in 30" class="bg-gray border border-solid border-gray-500 min-w-9 max-w-9 min-h-9 max-h-9 p-2 rounded-sm hover:bg-gray-500 hover:border-gray-400">
+
+                  </button>
+                </div>
+              </div>
+              <div class="flex flex-col gap-3 w-full">
+                <span class="text-sm">Hair color</span>
+                <div class="flex gap-2 flex-wrap">
+                  <!-- TODO: replace with hairstyles -->
+                  <button v-for="n in 10" class="bg-white w-6 h-6 rounded-sm"></button>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
       <div v-else>