Merge remote-tracking branch 'origin/feature/#245-character-hair' into feature/#250

# Conflicts:
#	src/components/screens/Characters.vue

public/assets/icons/arrow.svg

@@ -1,4 +0,0 @@
-<?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="M11 16L15 12M15 12L11 8M15 12H3M4.51555 17C6.13007 19.412 8.87958 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C8.87958 3 6.13007 4.58803 4.51555 7" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

public/assets/icons/submit-icon.svg

@@ -1 +0,0 @@
-<svg width="48" xmlns="http://www.w3.org/2000/svg" height="48" id="screenshot-e9346f42-72c8-800c-8004-507b356b7f18" viewBox="0 0 48 48" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-e9346f42-72c8-800c-8004-507b356b7f18" width="1em" height="1em" rx="0" ry="0" style="fill: rgb(0, 0, 0);"><g id="shape-e9346f42-72c8-800c-8004-507b356b7f1b"><defs style="fill: rgb(0, 0, 0);"/></g><g id="shape-e9346f42-72c8-800c-8004-507b356b7f1c"><defs><mask width="1.2" height="1.2" x="-0.1" id="render-3-ipSEnterKey0" data-old-y="-0.1" data-old-width="1.2" data-old-x="-0.1" y="-0.1" data-old-height="1.2"><g class="svg-mask-wrapper" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"><path fill="#fff" stroke="#fff" d="M44 44V4H24v16H4v24z"/><path stroke="#000" d="m21 28l-4 4l4 4"/><path stroke="#000" d="M34 23v9H17"/></g></g></mask></defs><g class="fills" id="fills-e9346f42-72c8-800c-8004-507b356b7f1c"><path d="M0.000,0.000L48.000,0.000L48.000,48.000L0.000,48.000ZZ" mask="url(#render-3-ipSEnterKey0)" style="fill: #696969; fill-opacity: 1;"/></g></g></g></svg>

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/shapes/character-select-shape.svg

@@ -1 +0,0 @@
-<svg width="170" xmlns="http://www.w3.org/2000/svg" height="275" id="screenshot-c7008730-586b-8052-8004-79a2f5807f5c" viewBox="0 0 170 275" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-c7008730-586b-8052-8004-79a2f5807f5c"><defs><linearGradient id="fill-color-gradient-render-1-0" x1="0.4238862507773219" y1="0.26897966364321624" x2="0.7513711107948178" y2="0.9146156628521559" gradientTransform=""><stop offset="0" stop-color="#ffffff" stop-opacity="0.4"/><stop offset="1" stop-color="#ffffff" stop-opacity="0"/></linearGradient><pattern patternUnits="userSpaceOnUse" x="0" y="0" width="170" height="275" patternTransform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" id="fill-0-render-1"><g><rect width="170" height="275" style="fill: url(&quot;#fill-color-gradient-render-1-0&quot;);"/></g></pattern></defs><g class="fills" id="fills-c7008730-586b-8052-8004-79a2f5807f5c"><path d="M170.000,20.000L170.000,255.000C170.000,266.038,161.038,275.000,150.000,275.000L20.000,275.000C8.962,275.000,0.000,266.038,0.000,255.000L0.000,20.000C0.000,8.962,8.962,0.000,20.000,0.000L150.000,0.000C150.000,0.000,150.000,0.000,150.000,0.000C150.000,11.038,158.962,20.000,170.000,20.000Z" fill="url(#fill-0-render-1)"/></g><g id="strokes-c7008730-586b-8052-8004-79a2f5807f5c" class="strokes"><g class="inner-stroke-shape"><defs><clipPath id="inner-stroke-render-1-c7008730-586b-8052-8004-79a2f5807f5c-0"><use href="#stroke-shape-render-1-c7008730-586b-8052-8004-79a2f5807f5c-0"/></clipPath><path d="M170.000,20.000L170.000,255.000C170.000,266.038,161.038,275.000,150.000,275.000L20.000,275.000C8.962,275.000,0.000,266.038,0.000,255.000L0.000,20.000C0.000,8.962,8.962,0.000,20.000,0.000L150.000,0.000C150.000,0.000,150.000,0.000,150.000,0.000C150.000,11.038,158.962,20.000,170.000,20.000Z" id="stroke-shape-render-1-c7008730-586b-8052-8004-79a2f5807f5c-0" style="fill: none; stroke-width: 4; stroke: rgb(255, 255, 255); stroke-opacity: 1;"/></defs><use href="#stroke-shape-render-1-c7008730-586b-8052-8004-79a2f5807f5c-0" clip-path="url('#inner-stroke-render-1-c7008730-586b-8052-8004-79a2f5807f5c-0')"/></g></g></g></svg>

public/assets/shapes/hud-shape-empty.svg

@@ -1 +0,0 @@
-<svg width="290" xmlns="http://www.w3.org/2000/svg" height="87" id="screenshot-e9942e24-155b-8096-8004-7eaff9882cd6" viewBox="0 0 290 87" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-e9942e24-155b-8096-8004-7eaff9882cd6"><g class="fills" id="fills-e9942e24-155b-8096-8004-7eaff9882cd6"><path d="M3.485,8.722C7.089,3.457,13.144,0.000,20.000,0.000L270.000,0.000C281.038,0.000,290.000,8.962,290.000,20.000L290.000,67.000C290.000,78.038,281.038,87.000,270.000,87.000L20.000,87.000C13.166,87.000,7.128,83.565,3.520,78.329C21.157,76.589,35.000,61.648,35.000,43.500C35.000,25.390,21.216,10.475,3.485,8.722ZM0.000,67.000L0.000,20.000"/></g><g id="strokes-e9942e24-155b-8096-8004-7eaff9882cd6" class="strokes"><g class="inner-stroke-shape"><defs><clipPath id="inner-stroke-render-1-e9942e24-155b-8096-8004-7eaff9882cd6-0"><use href="#stroke-shape-render-1-e9942e24-155b-8096-8004-7eaff9882cd6-0"/></clipPath><path d="M3.485,8.722C7.089,3.457,13.144,0.000,20.000,0.000L270.000,0.000C281.038,0.000,290.000,8.962,290.000,20.000L290.000,67.000C290.000,78.038,281.038,87.000,270.000,87.000L20.000,87.000C13.166,87.000,7.128,83.565,3.520,78.329C21.157,76.589,35.000,61.648,35.000,43.500C35.000,25.390,21.216,10.475,3.485,8.722ZM0.000,67.000L0.000,20.000" id="stroke-shape-render-1-e9942e24-155b-8096-8004-7eaff9882cd6-0" style="fill: none; stroke-width: 6; stroke: rgb(77 77 77); stroke-opacity: 1;"/></defs><use href="#stroke-shape-render-1-e9942e24-155b-8096-8004-7eaff9882cd6-0" clip-path="url('#inner-stroke-render-1-e9942e24-155b-8096-8004-7eaff9882cd6-0')"/></g></g></g></svg>

public/assets/shapes/hud-shape.svg

@@ -1 +0,0 @@
-<svg width="290" xmlns="http://www.w3.org/2000/svg" height="87" id="screenshot-e9942e24-155b-8096-8004-7eaff9882cd6" viewBox="0 0 290 87" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-e9942e24-155b-8096-8004-7eaff9882cd6"><g class="fills" id="fills-e9942e24-155b-8096-8004-7eaff9882cd6"><path d="M3.485,8.722C7.089,3.457,13.144,0.000,20.000,0.000L270.000,0.000C281.038,0.000,290.000,8.962,290.000,20.000L290.000,67.000C290.000,78.038,281.038,87.000,270.000,87.000L20.000,87.000C13.166,87.000,7.128,83.565,3.520,78.329C21.157,76.589,35.000,61.648,35.000,43.500C35.000,25.390,21.216,10.475,3.485,8.722ZM0.000,67.000L0.000,20.000" style="fill: rgb(127, 127, 127); fill-opacity: 0.7;"/></g><g id="strokes-e9942e24-155b-8096-8004-7eaff9882cd6" class="strokes"><g class="inner-stroke-shape"><defs><clipPath id="inner-stroke-render-1-e9942e24-155b-8096-8004-7eaff9882cd6-0"><use href="#stroke-shape-render-1-e9942e24-155b-8096-8004-7eaff9882cd6-0"/></clipPath><path d="M3.485,8.722C7.089,3.457,13.144,0.000,20.000,0.000L270.000,0.000C281.038,0.000,290.000,8.962,290.000,20.000L290.000,67.000C290.000,78.038,281.038,87.000,270.000,87.000L20.000,87.000C13.166,87.000,7.128,83.565,3.520,78.329C21.157,76.589,35.000,61.648,35.000,43.500C35.000,25.390,21.216,10.475,3.485,8.722ZM0.000,67.000L0.000,20.000" id="stroke-shape-render-1-e9942e24-155b-8096-8004-7eaff9882cd6-0" style="fill: none; stroke-width: 6; stroke: rgb(255, 255, 255); stroke-opacity: 1;"/></defs><use href="#stroke-shape-render-1-e9942e24-155b-8096-8004-7eaff9882cd6-0" clip-path="url('#inner-stroke-render-1-e9942e24-155b-8096-8004-7eaff9882cd6-0')"/></g></g></g></svg>

public/assets/shapes/select-screen-bg-shape.svg

@@ -1 +0,0 @@
-<svg width="1508.086" xmlns="http://www.w3.org/2000/svg" height="1511.251" id="screenshot-0d120e2a-8725-8061-8004-79728483f7ea" viewBox="-201.784 -208.012 1508.086 1511.251" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-0d120e2a-8725-8061-8004-79728483f7ea" width="800px" height="800px" rx="0" ry="0" style="opacity: 0.3; fill: rgb(0, 0, 0);"><g id="shape-0d120e2a-8725-8061-8004-79728484b3fe"><g class="fills" id="fills-0d120e2a-8725-8061-8004-79728484b3fe"><path d="M1190.359,745.690L1043.367,575.945L1133.504,630.603C1099.180,585.722,1047.978,532.622,975.722,469.519L780.783,401.898L896.468,404.538C851.234,371.382,797.068,339.090,738.130,311.073L601.350,337.338L689.349,289.039C627.425,263.088,562.143,241.922,497.713,229.160C430.172,215.674,363.453,211.534,303.512,221.641L314.753,151.382C271.664,177.012,239.130,209.992,214.226,251.017L204.390,177.710C166.181,212.950,148.095,250.172,143.131,301.343C69.092,307.974,-2.300,327.925,-73.861,347.005L-63.628,384.898C361.675,238.903,753.109,407.667,987.467,615.054L960.305,643.506C749.259,458.743,490.332,358.712,193.406,380.541C209.110,415.226,228.858,447.126,251.288,474.785L371.998,430.671L277.417,504.449C294.635,521.771,312.591,536.670,331.111,548.765L396.081,470.998L358.366,564.253C377.625,573.924,397.183,580.217,416.674,582.837C534.164,599.232,652.310,618.566,782.785,703.535L773.618,601.955L831.163,737.792C852.261,754.489,876.370,771.191,897.168,782.701L861.169,684.190L960.409,811.519C976.589,817.512,992.991,822.477,1008.953,826.486C1066.083,840.287,1120.015,842.594,1157.256,819.002C1175.975,807.393,1189.205,786.963,1190.791,762.853C1191.080,756.933,1190.907,750.762,1190.359,745.690ZZ" style="fill: rgb(13 109 105);"/></g></g></g></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/App.vue

@@ -49,8 +49,8 @@ addEventListener('click', (event) => {
 addEventListener('keydown', (event) => {
   if (gameStore.character?.role !== 'gm') return // Only allow toggling the gm panel if the character is a gm
 
-  // Check if no input is active
+  // Check if no input is active or focus is on an input
-  if (event.repeat || event.isComposing || event.defaultPrevented) return
+  if (event.repeat || event.isComposing || event.defaultPrevented || document.activeElement?.tagName.toUpperCase() === 'INPUT' || document.activeElement?.tagName.toUpperCase() === 'TEXTAREA') return
 
   if (event.key === 'G') {
     gameStore.toggleGmPanel()

src/assets/scss/main.scss

@@ -23,6 +23,14 @@ body {
 
   // Disable pinch zoom
   touch-action: pan-x pan-y;
+
+  // Add custom focus outline
+  *:focus-visible {
+    @apply outline-gray-300;
+    @apply outline;
+    @apply outline-offset-2;
+    @apply rounded-sm;
+  }
 }
 
 h1,
@@ -58,13 +66,20 @@ input {
     appearance: textfield;
   }
   &[type='number']::-webkit-inner-spin-button,
-  &[type='number']::-webkit-outer-spin-button {
+  &[type='number']::-webkit-outer-spin-button,
+  &[type='radio']{
     -webkit-appearance: none;
   }
 }
 
 .input-field {
-  @apply px-4 py-2.5 text-base leading-5 focus-visible:outline-none bg-gray border border-solid border-gray-500 rounded text-gray-300;
+  @apply px-4 py-2.5 text-base leading-5 bg-gray border border-solid border-gray-500 rounded text-gray-300;
+  &:focus-visible {
+    @apply outline-none border-cyan rounded bg-gray-900;
+  }
+  &::placeholder {
+    @apply focus-visible:text-gray-300/50;
+  }
   &.inactive {
     @apply bg-gray-600/50 hover:cursor-not-allowed;
     &::placeholder {
@@ -111,6 +126,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 +139,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 +159,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/Effects.vue

@@ -6,7 +6,7 @@
 import { Scene } from 'phavuer'
 import { useZoneStore } from '@/stores/zoneStore'
 import { useGameStore } from '@/stores/gameStore'
-import { onBeforeUnmount, ref, watch } from 'vue'
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import type { WeatherState } from '@/types'
 
 // Constants
@@ -194,11 +194,24 @@ const setupSocketListeners = () => {
   })
 }
 
+const updateEffectWindowSize = () => {
+  if (rainEmitter.value) rainEmitter.value.updateConfig({ x: { min: 0, max: window.innerWidth } })
+  if (fogSprite.value) {
+    fogSprite.value.setX(window.innerWidth / 2)
+    fogSprite.value.setY(window.innerHeight / 2)
+  }
+}
+
 // Watchers
 watch(() => zoneStore.zone?.zoneEffects, updateEffects, { deep: true })
 
+onMounted(() => {
+  window.addEventListener('resize', updateEffectWindowSize)
+})
+
 // Cleanup
 onBeforeUnmount(() => {
+  window.removeEventListener('resize', updateEffectWindowSize)
   if (sceneRef.value) sceneRef.value.scene.remove('effects')
   gameStore.connection?.off('weather')
 })

src/components/gameMaster/GmPanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <Modal :isModalOpen="gameStore.uiSettings.isGmPanelOpen" @modal:close="() => gameStore.toggleGmPanel()" :modal-width="1000" :modal-height="650" :can-full-screen="true">
+  <Modal :isModalOpen="gameStore.uiSettings.isGmPanelOpen" @modal:close="() => gameStore.toggleGmPanel()" :modal-width="1000" :modal-height="650" :can-full-screen="true" :disable-bg-texture="true">
     <template #modalHeader>
       <div class="flex gap-1.5 flex-wrap">
         <button @mousedown.stop class="btn-cyan py-1.5 px-4 min-w-24">General</button>

src/components/gameMaster/assetManager/AssetManager.vue

@@ -55,6 +55,7 @@
       <ObjectList v-if="selectedCategory === 'objects'" />
       <SpriteList v-if="selectedCategory === 'sprites'" />
       <CharacterTypeList v-if="selectedCategory === 'characterTypes'" />
+      <CharacterHairList v-if="selectedCategory === 'characterHair'" />
     </div>
 
     <div class="absolute w-px bg-gray-500 h-full top-0 left-1/2"></div>
@@ -65,6 +66,7 @@
       <ObjectDetails v-if="selectedCategory === 'objects' && assetManagerStore.selectedObject" />
       <SpriteDetails v-if="selectedCategory === 'sprites' && assetManagerStore.selectedSprite" />
       <CharacterTypeDetails v-if="selectedCategory === 'characterTypes' && assetManagerStore.selectedCharacterType" />
+      <CharacterHairDetails v-if="selectedCategory === 'characterHair' && assetManagerStore.selectedCharacterHair" />
     </div>
   </div>
 </template>
@@ -80,6 +82,8 @@ import SpriteList from '@/components/gameMaster/assetManager/partials/sprite/Spr
 import SpriteDetails from '@/components/gameMaster/assetManager/partials/sprite/SpriteDetails.vue'
 import CharacterTypeList from '@/components/gameMaster/assetManager/partials/characterType/CharacterTypeList.vue'
 import CharacterTypeDetails from '@/components/gameMaster/assetManager/partials/characterType/CharacterTypeDetails.vue'
+import CharacterHairList from '@/components/gameMaster/assetManager/partials/characterHair/CharacterHairList.vue'
+import CharacterHairDetails from '@/components/gameMaster/assetManager/partials/characterHair/CharacterHairDetails.vue'
 
 const assetManagerStore = useAssetManagerStore()
 const selectedCategory = ref('tiles')

src/components/gameMaster/assetManager/partials/characterHair/CharacterHairDetails.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="h-full overflow-auto">
+    <div class="m-2.5 p-2.5 block">
+      <form class="flex gap-2.5 flex-wrap" @submit.prevent="saveCharacterHair">
+        <div class="form-field-full">
+          <label for="name">Name</label>
+          <input v-model="characterName" class="input-field" type="text" name="name" placeholder="Character Type Name" />
+        </div>
+        <div class="form-field-full">
+          <label for="gender">Gender</label>
+          <select v-model="characterGender" class="input-field" name="gender">
+            <option v-for="gender in genderOptions" :key="gender" :value="gender">{{ gender }}</option>
+          </select>
+        </div>
+        <div class="form-field-full">
+          <label for="isEnabledForCharCreation">Is enabled for character creation</label>
+          <select v-model="characterIsEnabledForCharCreation" class="input-field" name="isEnabledForCharCreation">
+            <option :value="false">No</option>
+            <option :value="true">Yes</option>
+          </select>
+        </div>
+        <div class="form-field-full">
+          <label for="spriteId">Sprite</label>
+          <select v-model="characterSpriteId" class="input-field" name="spriteId">
+            <option disabled selected value="">Select sprite</option>
+            <option v-for="sprite in assetManagerStore.spriteList" :key="sprite.id" :value="sprite.id">{{ sprite.name }}</option>
+          </select>
+        </div>
+        <button class="btn-cyan px-4 py-1.5 min-w-24" type="submit">Save</button>
+        <button class="btn-red px-4 py-1.5 min-w-24" type="button" @click.prevent="removeCharacterHair">Remove</button>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { CharacterHair, CharacterGender, Sprite } from '@/types'
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { useAssetManagerStore } from '@/stores/assetManagerStore'
+import { useGameStore } from '@/stores/gameStore'
+
+const gameStore = useGameStore()
+const assetManagerStore = useAssetManagerStore()
+
+const selectedCharacterHair = computed(() => assetManagerStore.selectedCharacterHair)
+
+const characterName = ref('')
+const characterGender = ref<CharacterGender>('MALE' as CharacterGender.MALE)
+const characterIsEnabledForCharCreation = ref<boolean>(false)
+const characterSpriteId = ref<string | null | undefined>(null)
+
+const genderOptions: CharacterGender[] = ['MALE' as CharacterGender.MALE, 'FEMALE' as CharacterGender.FEMALE]
+
+if (!selectedCharacterHair.value) {
+  console.error('No character hair selected')
+}
+
+if (selectedCharacterHair.value) {
+  characterName.value = selectedCharacterHair.value.name
+  characterGender.value = selectedCharacterHair.value.gender
+  characterIsEnabledForCharCreation.value = selectedCharacterHair.value.isEnabledForCharCreation
+  characterSpriteId.value = selectedCharacterHair.value.spriteId
+}
+
+function removeCharacterHair() {
+  if (!selectedCharacterHair.value) return
+
+  gameStore.connection?.emit('gm:characterHair:remove', { id: selectedCharacterHair.value.id }, (response: boolean) => {
+    if (!response) {
+      console.error('Failed to remove character hair')
+      return
+    }
+    refreshCharacterHairList()
+  })
+}
+
+function refreshCharacterHairList(unsetSelectedCharacterHair = true) {
+  gameStore.connection?.emit('gm:characterHair:list', {}, (response: CharacterHair[]) => {
+    assetManagerStore.setCharacterHairList(response)
+
+    if (unsetSelectedCharacterHair) {
+      assetManagerStore.setSelectedCharacterHair(null)
+    }
+  })
+}
+
+function saveCharacterHair() {
+  const characterHairData = {
+    id: selectedCharacterHair.value!.id,
+    name: characterName.value,
+    gender: characterGender.value,
+    isEnabledForCharCreation: characterIsEnabledForCharCreation.value,
+    spriteId: characterSpriteId.value
+  }
+
+  gameStore.connection?.emit('gm:characterHair:update', characterHairData, (response: boolean) => {
+    if (!response) {
+      console.error('Failed to save character type')
+      return
+    }
+    refreshCharacterHairList(false)
+  })
+}
+
+watch(selectedCharacterHair, (characterHair: CharacterHair | null) => {
+  if (!characterHair) return
+  characterName.value = characterHair.name
+  characterGender.value = characterHair.gender
+  characterIsEnabledForCharCreation.value = characterHair.isEnabledForCharCreation
+  characterSpriteId.value = characterHair.spriteId
+})
+
+onMounted(() => {
+  if (!selectedCharacterHair.value) return
+
+  gameStore.connection?.emit('gm:sprite:list', {}, (response: Sprite[]) => {
+    assetManagerStore.setSpriteList(response)
+  })
+})
+
+onBeforeUnmount(() => {
+  assetManagerStore.setSelectedCharacterHair(null)
+})
+</script>

src/components/gameMaster/assetManager/partials/characterHair/CharacterHairList.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="relative p-2.5 flex items-center gap-x-2.5">
+    <input v-model="searchQuery" class="input-field flex-grow" placeholder="Search..." @input="handleSearch" />
+    <label for="create-character" class="bg-cyan text-white border border-solid border-white/25 rounded drop-shadow-20 p-2 inline-flex items-center justify-center hover:bg-cyan-800 hover:cursor-pointer">
+      <button class="p-0 h-5" id="create-character" @click="createNewCharacterHair">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="white">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+        </svg>
+      </button>
+    </label>
+    <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
+  </div>
+  <div v-bind="containerProps" class="overflow-y-auto relative" @scroll="onScroll">
+    <div v-bind="wrapperProps" ref="elementToScroll">
+      <a v-for="{ data: characterHair } in list" :key="characterHair.id" class="relative p-2.5 cursor-pointer block" :class="{ 'bg-cyan/80': assetManagerStore.selectedCharacterHair?.id === characterHair.id }" @click="assetManagerStore.setSelectedCharacterHair(characterHair as CharacterHair)">
+        <div class="flex items-center gap-2.5">
+          <span :class="{ 'text-white': assetManagerStore.selectedCharacterHair?.id === characterHair.id }">{{ characterHair.name }}</span>
+        </div>
+        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
+      </a>
+    </div>
+    <button class="left-[calc(50%_-_60px)] fixed bottom-2.5 min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
+      <img class="absolute invert w-8 h-8 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useGameStore } from '@/stores/gameStore'
+import { onMounted, ref, computed } from 'vue'
+import { useAssetManagerStore } from '@/stores/assetManagerStore'
+import type { CharacterHair } from '@/types'
+import { useVirtualList } from '@vueuse/core'
+
+const gameStore = useGameStore()
+const assetManagerStore = useAssetManagerStore()
+
+const searchQuery = ref('')
+
+const hasScrolled = ref(false)
+const elementToScroll = ref()
+
+const handleSearch = () => {
+  // Trigger a re-render of the virtual list
+  virtualList.value?.scrollTo(0)
+}
+
+const createNewCharacterHair = () => {
+  gameStore.connection?.emit('gm:characterHair:create', {}, (response: boolean) => {
+    if (!response) {
+      console.error('Failed to create new character type')
+      return
+    }
+
+    gameStore.connection?.emit('gm:characterHair:list', {}, (response: CharacterHair[]) => {
+      assetManagerStore.setCharacterHairList(response)
+    })
+  })
+}
+
+const filteredCharacterHairs = computed(() => {
+  if (!searchQuery.value) {
+    return assetManagerStore.characterHairList
+  }
+  return assetManagerStore.characterHairList.filter((character) => character.name.toLowerCase().includes(searchQuery.value.toLowerCase()))
+})
+
+const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(filteredCharacterHairs, {
+  itemHeight: 48
+})
+
+const virtualList = ref({ scrollTo })
+
+const onScroll = () => {
+  let scrollTop = elementToScroll.value.style.marginTop.replace('px', '')
+
+  if (scrollTop > 80) {
+    hasScrolled.value = true
+  } else if (scrollTop <= 80) {
+    hasScrolled.value = false
+  }
+}
+
+function toTop() {
+  virtualList.value?.scrollTo(0)
+}
+
+onMounted(() => {
+  gameStore.connection?.emit('gm:characterHair:list', {}, (response: CharacterHair[]) => {
+    assetManagerStore.setCharacterHairList(response)
+  })
+})
+</script>

src/components/gameMaster/assetManager/partials/characterType/CharacterTypeDetails.vue

@@ -19,8 +19,18 @@
           </select>
         </div>
         <div class="form-field-full">
-          <label for="spriteId">Sprite ID</label>
+          <label for="isEnabledForCharCreation">Is enabled for character creation</label>
-          <input v-model="characterSpriteId" class="input-field" type="text" name="spriteId" placeholder="Sprite ID" />
+          <select v-model="characterIsEnabledForCharCreation" class="input-field" name="isEnabledForCharCreation">
+            <option :value="false">No</option>
+            <option :value="true">Yes</option>
+          </select>
+        </div>
+        <div class="form-field-full">
+          <label for="spriteId">Sprite</label>
+          <select v-model="characterSpriteId" class="input-field" name="spriteId">
+            <option disabled selected value="">Select sprite</option>
+            <option v-for="sprite in assetManagerStore.spriteList" :key="sprite.id" :value="sprite.id">{{ sprite.name }}</option>
+          </select>
         </div>
         <button class="btn-cyan px-4 py-1.5 min-w-24" type="submit">Save</button>
         <button class="btn-red px-4 py-1.5 min-w-24" type="button" @click.prevent="removeCharacterType">Remove</button>
@@ -30,7 +40,7 @@
 </template>
 
 <script setup lang="ts">
-import type { CharacterType, CharacterGender, CharacterRace } from '@/types'
+import type { CharacterType, CharacterGender, CharacterRace, Sprite } from '@/types'
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useAssetManagerStore } from '@/stores/assetManagerStore'
 import { useGameStore } from '@/stores/gameStore'
@@ -43,7 +53,8 @@ const selectedCharacterType = computed(() => assetManagerStore.selectedCharacter
 const characterName = ref('')
 const characterGender = ref<CharacterGender>('MALE' as CharacterGender.MALE)
 const characterRace = ref<CharacterRace>('HUMAN' as CharacterRace.HUMAN)
-const characterSpriteId = ref('')
+const characterIsEnabledForCharCreation = ref<boolean>(false)
+const characterSpriteId = ref<string | null | undefined>(null)
 
 const genderOptions: CharacterGender[] = ['MALE' as CharacterGender.MALE, 'FEMALE' as CharacterGender.FEMALE]
 const raceOptions: CharacterRace[] = ['HUMAN' as CharacterRace.HUMAN, 'ELF' as CharacterRace.ELF, 'DWARF' as CharacterRace.DWARF, 'ORC' as CharacterRace.ORC, 'GOBLIN' as CharacterRace.GOBLIN]
@@ -56,6 +67,7 @@ if (selectedCharacterType.value) {
   characterName.value = selectedCharacterType.value.name
   characterGender.value = selectedCharacterType.value.gender
   characterRace.value = selectedCharacterType.value.race
+  characterIsEnabledForCharCreation.value = selectedCharacterType.value.isEnabledForCharCreation
   characterSpriteId.value = selectedCharacterType.value.spriteId
 }
 
@@ -83,10 +95,11 @@ function refreshCharacterTypeList(unsetSelectedCharacterType = true) {
 
 function saveCharacterType() {
   const characterTypeData = {
-    id: selectedCharacterType.value?.id,
+    id: selectedCharacterType.value!.id,
     name: characterName.value,
     gender: characterGender.value,
     race: characterRace.value,
+    isEnabledForCharCreation: characterIsEnabledForCharCreation.value,
     spriteId: characterSpriteId.value
   }
 
@@ -104,11 +117,16 @@ watch(selectedCharacterType, (characterType: CharacterType | null) => {
   characterName.value = characterType.name
   characterGender.value = characterType.gender
   characterRace.value = characterType.race
+  characterIsEnabledForCharCreation.value = characterType.isEnabledForCharCreation
   characterSpriteId.value = characterType.spriteId
 })
 
 onMounted(() => {
   if (!selectedCharacterType.value) return
+
+  gameStore.connection?.emit('gm:sprite:list', {}, (response: Sprite[]) => {
+    assetManagerStore.setSpriteList(response)
+  })
 })
 
 onBeforeUnmount(() => {

src/components/gameMaster/assetManager/partials/characterType/CharacterTypeList.vue

@@ -14,7 +14,7 @@
     <div v-bind="wrapperProps" ref="elementToScroll">
       <a v-for="{ data: characterType } in list" :key="characterType.id" class="relative p-2.5 cursor-pointer block" :class="{ 'bg-cyan/80': assetManagerStore.selectedCharacterType?.id === characterType.id }" @click="assetManagerStore.setSelectedCharacterType(characterType as CharacterType)">
         <div class="flex items-center gap-2.5">
-          <span>{{ characterType.name }}</span>
+          <span :class="{ 'text-white': assetManagerStore.selectedCharacterType?.id === characterType.id }">{{ characterType.name }}</span>
         </div>
         <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
       </a>

src/components/gameMaster/assetManager/partials/object/ObjectList.vue

@@ -16,7 +16,7 @@
           <div class="h-7 w-16 max-w-16 flex justify-center">
             <img class="h-7" :src="`${config.server_endpoint}/assets/objects/${object.id}.png`" alt="Object" />
           </div>
-          <span>{{ object.name }}</span>
+          <span :class="{ 'text-white': assetManagerStore.selectedObject?.id === object.id }">{{ object.name }}</span>
         </div>
         <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
       </a>

src/components/gameMaster/assetManager/partials/sprite/SpriteList.vue

@@ -12,7 +12,7 @@
     <div v-bind="wrapperProps" ref="elementToScroll">
       <a v-for="{ data: sprite } in list" :key="sprite.id" class="relative p-2.5 cursor-pointer block" :class="{ 'bg-cyan/80': assetManagerStore.selectedSprite?.id === sprite.id }" @click="assetManagerStore.setSelectedSprite(sprite as Sprite)">
         <div class="flex items-center gap-2.5">
-          <span>{{ sprite.name }}</span>
+          <span :class="{ 'text-white': assetManagerStore.selectedSprite?.id === sprite.id }">{{ sprite.name }}</span>
         </div>
         <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
       </a>

src/components/gameMaster/assetManager/partials/tile/TileList.vue

@@ -16,7 +16,7 @@
           <div class="h-7 w-16 max-w-16 flex justify-center">
             <img class="h-7" :src="`${config.server_endpoint}/assets/tiles/${tile.id}.png`" alt="Tile" />
           </div>
-          <span>{{ tile.name }}</span>
+          <span :class="{ 'text-white': assetManagerStore.selectedTile?.id === tile.id }">{{ tile.name }}</span>
         </div>
         <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
       </a>

src/components/gameMaster/zoneEditor/ZoneEditor.vue

@@ -31,7 +31,6 @@ import ZoneEventTiles from '@/components/gameMaster/zoneEditor/zonePartials/Zone
 
 const gameStore = useGameStore()
 const zoneEditorStore = useZoneEditorStore()
-console.log(zoneEditorStore.zone)
 
 const tileMap = ref(null as Phaser.Tilemaps.Tilemap | null)
 
@@ -64,7 +63,6 @@ function save() {
   }
 
   gameStore.connection?.emit('gm:zone_editor:zone:update', data, (response: Zone) => {
-    console.log(response.updatedAt)
     zoneEditorStore.setZone(response)
   })
 }

src/components/gameMaster/zoneEditor/partials/CreateZone.vue

@@ -1,5 +1,5 @@
 <template>
-  <Modal :isModalOpen="true" @modal:close="() => zoneEditorStore.toggleCreateZoneModal()" :modal-width="300" :modal-height="400" :is-resizable="false">
+  <Modal :isModalOpen="true" @modal:close="() => zoneEditorStore.toggleCreateZoneModal()" :modal-width="300" :modal-height="420" :is-resizable="false" :disable-bg-texture="true">
     <template #modalHeader>
       <h3 class="m-0 font-medium shrink-0 text-white">Create new zone</h3>
     </template>

src/components/gameMaster/zoneEditor/partials/ObjectList.vue

@@ -1,5 +1,5 @@
 <template>
-  <Modal :isModalOpen="zoneEditorStore.isObjectListModalShown" :modal-width="645" :modal-height="260" @modal:close="() => (zoneEditorStore.isObjectListModalShown = false)">
+  <Modal :isModalOpen="zoneEditorStore.isObjectListModalShown" :modal-width="645" :modal-height="260" @modal:close="() => (zoneEditorStore.isObjectListModalShown = false)" :disable-bg-texture="true">
     <template #modalHeader>
       <h3 class="text-lg text-white">Objects</h3>
     </template>

src/components/gameMaster/zoneEditor/partials/TeleportModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <Modal :is-modal-open="showTeleportModal" @modal:close="() => zoneEditorStore.setTool('move')" :modal-width="300" :modal-height="350" :is-resizable="false">
+  <Modal :is-modal-open="showTeleportModal" @modal:close="() => zoneEditorStore.setTool('move')" :modal-width="300" :modal-height="350" :is-resizable="false" :disable-bg-texture="true">
     <template #modalHeader>
       <h3 class="m-0 font-medium shrink-0 text-white">Teleport settings</h3>
     </template>

src/components/gameMaster/zoneEditor/partials/TileList.vue

@@ -1,5 +1,5 @@
 <template>
-  <Modal :isModalOpen="zoneEditorStore.isTileListModalShown" :modal-width="645" :modal-height="600" @modal:close="() => (zoneEditorStore.isTileListModalShown = false)">
+  <Modal :isModalOpen="zoneEditorStore.isTileListModalShown" :modal-width="645" :modal-height="600" @modal:close="() => (zoneEditorStore.isTileListModalShown = false)" :disable-bg-texture="true">
     <template #modalHeader>
       <h3 class="text-lg text-white">Tiles</h3>
     </template>

src/components/gameMaster/zoneEditor/partials/ZoneList.vue

@@ -1,6 +1,6 @@
 <template>
   <CreateZone v-if="zoneEditorStore.isCreateZoneModalShown" />
-  <Modal :is-modal-open="zoneEditorStore.isZoneListModalShown" @modal:close="() => zoneEditorStore.toggleZoneListModal()" :is-resizable="false" :modal-width="300" :modal-height="360">
+  <Modal :is-modal-open="zoneEditorStore.isZoneListModalShown" @modal:close="() => zoneEditorStore.toggleZoneListModal()" :is-resizable="false" :modal-width="300" :modal-height="360" :disable-bg-texture="true">
     <template #modalHeader>
       <h3 class="text-lg text-white">Zones</h3>
     </template>
@@ -15,7 +15,7 @@
           <div class="flex gap-3 items-center w-full" @click="() => loadZone(zone.id)">
             <span>{{ zone.name }}</span>
             <span class="ml-auto gap-1 flex">
-              <button class="btn-red w-11 h-11 z-50" @click.stop="() => deleteZone(zone.id)">X</button>
+              <button class="btn-red w-7 h-7 z-50 flex items-center justify-center" @click.stop="() => deleteZone(zone.id)">x</button>
             </span>
           </div>
           <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>

src/components/gameMaster/zoneEditor/partials/ZoneSettings.vue

@@ -1,5 +1,5 @@
 <template>
-  <Modal :is-modal-open="zoneEditorStore.isSettingsModalShown" @modal:close="() => zoneEditorStore.toggleSettingsModal()" :modal-width="600" :modal-height="350">
+  <Modal :is-modal-open="zoneEditorStore.isSettingsModalShown" @modal:close="() => zoneEditorStore.toggleSettingsModal()" :modal-width="600" :modal-height="350" :disable-bg-texture="true">
     <template #modalHeader>
       <h3 class="m-0 font-medium shrink-0 text-white">Zone settings</h3>
     </template>

src/components/gameMaster/zoneEditor/zonePartials/ZoneObjects.vue

@@ -56,7 +56,7 @@ function pencil(pointer: Phaser.Input.Pointer) {
     id: uuidv4(),
     zoneId: zoneEditorStore.zone.id,
     zone: zoneEditorStore.zone,
-    objectId: zoneEditorStore.selectedObject,
+    objectId: zoneEditorStore.selectedObject.id,
     object: zoneEditorStore.selectedObject,
     depth: 0,
     isRotated: false,
@@ -65,7 +65,7 @@ function pencil(pointer: Phaser.Input.Pointer) {
   }
 
   // Add new object to zoneObjects
-  zoneEditorStore.zone.zoneObjects = zoneEditorStore.zone.zoneObjects.concat(newObject as ZoneObject)
+  zoneEditorStore.zone.zoneObjects = zoneEditorStore.zone.zoneObjects.concat(newObject as ZoneObjectT)
 }
 
 function eraser(pointer: Phaser.Input.Pointer) {
@@ -134,7 +134,7 @@ function moveZoneObject(id: string) {
   // Check if zone is set
   if (!zoneEditorStore.zone) return
 
-  movingZoneObject.value = zoneEditorStore.zone.zoneObjects.find((object) => object.id === id) as ZoneObject
+  movingZoneObject.value = zoneEditorStore.zone.zoneObjects.find((object) => object.id === id) as ZoneObjectT
 
   function handlePointerMove(pointer: Phaser.Input.Pointer) {
     if (!movingZoneObject.value) return

src/components/gui/CharacterProfile.vue

@@ -5,7 +5,7 @@
     <div @mousedown="startDrag" class="cursor-move px-5 py-2.5 flex justify-between items-center relative">
       <span class="text-xs text-white font-thin">Character Profile [Alt+C]</span>
       <button @click="gameStore.uiSettings.isCharacterProfileOpen = false" class="w-3.5 h-3.5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out">
-        <img alt="close" draggable="false" src="/assets/icons/close-button-white.svg" class="w-full h-full" />
+        <img alt="close" draggable="false" src="/assets/icons/modal/close-button-white.svg" class="w-full h-full" />
       </button>
     </div>
     <div class="py-4 px-6 flex flex-col gap-7 relative z-10">
@@ -15,7 +15,7 @@
             <p class="text-sm m-0 font-bold text-white tracking-wide">{{ gameStore.character?.name }}</p>
             <span class="text-xs">{{ gameStore.character?.experience }} / 18.600XP</span>
           </div>
-          <a class="hover:cursor-pointer bg-[url('/assets/ui-elements/ui-border-4-corners-small.svg')] bg-no-repeat block w-8 h-8 relative mx-[3px]">
+          <a class="hover:cursor-pointer bg-[url('/assets/ui-elements/button-ui-box-textured-small.svg')] bg-no-repeat block w-8 h-8 relative mx-[3px]">
             <img class="hover:drop-shadow-default w-3.5 h-3.5 m-[9px] object-contain" draggable="false" src="/assets/icons/plus-green-icon.svg" />
           </a>
         </div>

src/components/gui/Chat.vue

@@ -7,22 +7,24 @@
       </div>
     </div>
     <div class="w-96 mx-auto relative">
-      <img src="/assets/icons/chat-icon.svg" class="absolute top-1/2 -translate-y-1/2 left-2.5 h-4 w-4 opacity-50" />
+      <img src="/assets/icons/ingameUI/chat-icon.svg" class="absolute top-1/2 -translate-y-1/2 left-2.5 h-4 w-4 opacity-50" />
       <input
         class="w-[332px] h-8 rounded-sm text-xs font-default pl-8 pr-4 py-0 bg-gray-600 border-2 border-solid border-gray-500 text-gray-300 bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-cover focus:outline-none focus:ring-0 focus:border-cyan-800"
         placeholder="Type something..."
         v-model="message"
         @keypress="handleKeyPress"
         @submit="handleSubmit"
+        ref="chatInput"
       />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref, nextTick } from 'vue'
+import { onBeforeUnmount, ref, nextTick } from 'vue'
+import { onClickOutside } from '@vueuse/core'
 import { useGameStore } from '@/stores/gameStore'
-import type { Character, ChatMessage } from '@/types'
+import type { Chat } from '@/types'
 import { useZoneStore } from '@/stores/zoneStore'
 import { useScene } from 'phavuer'
 
@@ -31,12 +33,21 @@ const gameStore = useGameStore()
 const zoneStore = useZoneStore()
 
 const message = ref('')
-const chats = ref([] as ChatMessage[])
+const chats = ref([] as Chat[])
 const chatWindow = ref<HTMLElement | null>(null)
+const chatInput = ref<HTMLElement | null>(null)
+
+onClickOutside(chatInput, event => unfocusChat(event, chatInput.value as HTMLElement))
+
+function unfocusChat(event: Event, targetElement: HTMLElement) {
+  if (!(event.target instanceof Node) || !targetElement.contains(event.target)) {
+    targetElement.blur();
+  }
+}
 
 const sendMessage = () => {
   if (!message.value.trim()) return
-  gameStore.connection?.emit('chat:send_message', { message: message.value }, (response: boolean) => {})
+  gameStore.connection?.emit('chat:message', { message: message.value }, (response: boolean) => {})
   message.value = ''
 }
 
@@ -60,7 +71,7 @@ const scrollToBottom = () => {
   })
 }
 
-gameStore.connection?.on('chat:message', (data: ChatMessage) => {
+gameStore.connection?.on('chat:message', (data: Chat) => {
   chats.value.push(data)
   scrollToBottom()
 

src/components/gui/Hotkeys.vue

@@ -2,44 +2,44 @@
   <div class="absolute top-4 left-[300px] w-[422px]">
     <div class="flex gap-2.5">
       <div class="relative">
-        <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-elements/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
+        <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-elements/button-ui-frame-empty.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
         <span class="z-10 text-pixel absolute top-1 left-2">F1</span>
-        <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f1-icon.png')] bg-no-repeat"></div>
+        <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/ingameUI/f1-icon.png')] bg-no-repeat"></div>
       </div>
       <div class="relative">
-        <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-elements/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
+        <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-elements/button-ui-frame-empty.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
         <span class="z-10 text-pixel absolute top-1 left-2">F2</span>
-        <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f2-icon.png')] bg-no-repeat"></div>
+        <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/ingameUI/f2-icon.png')] bg-no-repeat"></div>
       </div>
       <div class="relative">
-        <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-elements/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
+        <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-elements/button-ui-frame-empty.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
         <span class="z-10 text-pixel absolute top-1 left-2">F3</span>
-        <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f3-icon.png')] bg-no-repeat"></div>
+        <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/ingameUI/f3-icon.png')] bg-no-repeat"></div>
       </div>
       <div class="relative">
-        <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-elements/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
+        <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-elements/button-ui-frame-empty.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
         <span class="z-10 text-pixel absolute top-1 left-2">F4</span>
-        <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f4-icon.png')] bg-no-repeat"></div>
+        <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/ingameUI/f4-icon.png')] bg-no-repeat"></div>
       </div>
       <div class="relative">
-        <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-elements/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
+        <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-elements/button-ui-frame-empty.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
         <span class="z-10 text-pixel absolute top-1 left-2">F5</span>
-        <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f5-icon.png')] bg-no-repeat"></div>
+        <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/ingameUI/f5-icon.png')] bg-no-repeat"></div>
       </div>
       <div class="relative">
-        <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-elements/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
+        <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-elements/button-ui-frame-empty.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
         <span class="z-10 text-pixel absolute top-1 left-2">F6</span>
-        <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f6-icon.png')] bg-no-repeat"></div>
+        <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/ingameUI/f6-icon.png')] bg-no-repeat"></div>
       </div>
       <div class="relative">
-        <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-elements/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
+        <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-elements/button-ui-frame-empty.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
         <span class="z-10 text-pixel absolute top-1 left-2">F7</span>
-        <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f7-icon.png')] bg-no-repeat"></div>
+        <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/ingameUI/f7-icon.png')] bg-no-repeat"></div>
       </div>
       <div class="relative">
-        <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-elements/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
+        <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-elements/button-ui-frame-empty.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
         <span class="z-10 text-pixel absolute top-1 left-2">F8</span>
-        <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f8-icon.png')] bg-no-repeat"></div>
+        <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/ingameUI/f8-icon.png')] bg-no-repeat"></div>
       </div>
     </div>
   </div>

src/components/gui/Hud.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="absolute left-[66px] top-4 bg-[url('/assets/ui-elements/ui-rect-border-4-corners.svg')] bg-no-repeat px-4 py-2 w-[181px] h-[26px] flex flex-col justify-between">
+  <div class="absolute left-[66px] top-4 bg-[url('/assets/ui-elements/hud-ui-box.svg')] bg-no-repeat px-4 py-2 w-[181px] h-[26px] flex flex-col justify-between">
     <div class="w-full flex items-center gap-2">
       <label class="text-xs leading-3 text-pixel" for="hp">HP</label>
       <progress class="h-2 rounded-sm w-full max-w-44 appearance-none accent-green" id="hp" :value="gameStore.character?.hitpoints" max="100">{{ gameStore.character?.hitpoints }}%</progress>

src/components/gui/Menu.vue

@@ -5,8 +5,8 @@
         <p class="absolute w-full bottom-0 m-0 text-xs leading-6 text-white">Open menu</p>
         <div class="group-hover:block absolute -left-2 bg-gray-500 h-3.5 w-2 [clip-path:polygon(100%_0,_0_50%,_100%_100%)] top-1/2 -translate-y-1/2 hidden"></div>
       </div>
-      <a class="group-hover:cursor-pointer bg-[url('/assets/ui-elements/ui-border-4-corners.svg')] bg-no-repeat block w-[42px] h-[42px] relative">
+      <a class="group-hover:cursor-pointer bg-[url('/assets/ui-elements/button-ui-box-textured.svg')] bg-no-repeat block w-[42px] h-[42px] relative">
-        <img class="group-hover:drop-shadow-default w-6 h-5 mx-[9px] my-[11px] object-contain" draggable="false" src="/assets/icons/menu-icon.svg" />
+        <img class="group-hover:drop-shadow-default w-6 h-5 mx-[9px] my-[11px] object-contain" draggable="false" src="/assets/icons/ingameUI/menu-icon.svg" />
       </a>
     </li>
     <li class="menu-item group relative" @click="gameStore.toggleCharacterProfile">
@@ -14,7 +14,7 @@
         <p class="absolute w-full bottom-0 m-0 text-xs leading-6 text-white">User Profile</p>
         <div class="group-hover:block absolute -left-2 bg-gray-500 h-3.5 w-2 [clip-path:polygon(100%_0,_0_50%,_100%_100%)] top-1/2 -translate-y-1/2 hidden"></div>
       </div>
-      <a class="group-hover:cursor-pointer bg-[url('/assets/ui-elements/ui-border-4-corners.svg')] bg-no-repeat block w-[42px] h-[42px] relative">
+      <a class="group-hover:cursor-pointer bg-[url('/assets/ui-elements/button-ui-box-textured.svg')] bg-no-repeat block w-[42px] h-[42px] relative">
         <img class="group-hover:drop-shadow-default w-8 h-8 m-[5px] object-contain" draggable="false" src="/assets/avatar/default/head.png" />
         <p class="absolute bottom-0 -right-1.5 m-0 max-w-4 font-ui z-10 text-white text-[12px] leading-[6px] drop-shadow-pixel"><span class="font-ui text-white text-[8px] ml-0.5">LVL</span> {{ characterLevel }}</p>
       </a>
@@ -25,7 +25,7 @@
         <div class="group-hover:block absolute -left-2 bg-gray-500 h-3.5 w-2 [clip-path:polygon(100%_0,_0_50%,_100%_100%)] top-1/2 -translate-y-1/2 hidden"></div>
       </div>
       <a class="group-hover:bg-gray-800 bg-gray-900 group-hover:cursor-pointer border border-b-4 border-solid rounded border-gray-500 block w-[34px] h-[31px]">
-        <img class="group-hover:drop-shadow-default w-6 h-6 m-[5px] object-contain" draggable="false" src="/assets/icons/chat-icon.svg" />
+        <img class="group-hover:drop-shadow-default w-6 h-6 m-[5px] object-contain" draggable="false" src="/assets/icons/ingameUI/chat-icon.svg" />
       </a>
     </li>
     <li class="menu-item group relative">
@@ -34,7 +34,7 @@
         <div class="group-hover:block absolute -left-2 bg-gray-500 h-3.5 w-2 [clip-path:polygon(100%_0,_0_50%,_100%_100%)] top-1/2 -translate-y-1/2 hidden"></div>
       </div>
       <a class="group-hover:bg-gray-800 bg-gray-900 group-hover:cursor-pointer border border-b-4 border-solid rounded border-gray-500 block w-[34px] h-[31px]">
-        <img class="group-hover:drop-shadow-default w-6 h-6 m-[5px] object-contain" draggable="false" src="/assets/icons/map-icon.svg" />
+        <img class="group-hover:drop-shadow-default w-6 h-6 m-[5px] object-contain" draggable="false" src="/assets/icons/ingameUI/map-icon.svg" />
       </a>
     </li>
     <li class="menu-item group relative">
@@ -43,7 +43,7 @@
         <div class="group-hover:block absolute -left-2 bg-gray-500 h-3.5 w-2 [clip-path:polygon(100%_0,_0_50%,_100%_100%)] top-1/2 -translate-y-1/2 hidden"></div>
       </div>
       <a class="group-hover:bg-gray-800 bg-gray-900 group-hover:cursor-pointer border border-b-4 border-solid rounded border-gray-500 block w-[34px] h-[31px]">
-        <img class="group-hover:drop-shadow-default w-6 h-6 m-[5px] object-contain" draggable="false" src="/assets/icons/socials-icon.svg" />
+        <img class="group-hover:drop-shadow-default w-6 h-6 m-[5px] object-contain" draggable="false" src="/assets/icons/ingameUI/socials-icon.svg" />
       </a>
     </li>
   </ul>

src/components/gui/Minimap.vue

@@ -6,11 +6,11 @@
     <div class="absolute -bottom-3 left-1/2 -translate-x-1/2 flex gap-1">
       <button class="w-6 h-6 relative p-0">
         <img class="absolute w-3 h-3 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" src="/assets/icons/plus-icon.svg" />
-        <img class="w-full h-full" src="/assets/ui-elements/ui-border-4-corners.svg" />
+        <img class="w-full h-full" src="/assets/ui-elements/button-ui-box-textured.svg" />
       </button>
       <button class="w-6 h-6 relative p-0">
         <img class="absolute w-3 h-3 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" src="/assets/icons/minus-icon.svg" />
-        <img class="w-full h-full" src="/assets/ui-elements/ui-border-4-corners.svg" />
+        <img class="w-full h-full" src="/assets/ui-elements/button-ui-box-textured.svg" />
       </button>
     </div>
   </div>

src/components/gui/UserPanel.vue

@@ -11,7 +11,7 @@
         </div>
         <div class="flex gap-2.5">
           <button class="w-3.5 h-3.5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out">
-            <img alt="close" draggable="false" src="/assets/icons/close-button-white.svg" class="w-full h-full" />
+            <img alt="close" draggable="false" src="/assets/icons/modal/close-button-white.svg" class="w-full h-full" />
           </button>
         </div>
         <div class="flex sm:hidden gap-1.5 flex-wrap">

src/components/login/LoginForm.vue

@@ -5,7 +5,7 @@
         <input class="input-field xs:min-w-[350px] min-w-64" id="username-login" v-model="username" type="text" name="username" placeholder="Username" required autofocus />
         <div class="relative">
           <input class="input-field xs:min-w-[350px] min-w-64" id="password-login" v-model="password" :type="showPassword ? 'text' : 'password'" name="password" placeholder="Password" required />
-          <button type="button" @click.prevent="showPassword = !showPassword" :class="{ 'eye-open': showPassword }" class="bg-[url('/assets/icons/eye.svg')] p-0 absolute right-3 w-4 h-3 top-1/2 -translate-y-1/2 bg-no-repeat"></button>
+          <button type="button" @click.prevent="showPassword = !showPassword" :class="{ 'eye-open': showPassword }" class="bg-[url('/assets/icons/eye.svg')] p-0 absolute right-3 w-5 h-4 top-1/2 -translate-y-1/2 bg-no-repeat bg-center"></button>
         </div>
         <span v-if="loginError" class="text-red-200 text-xs absolute top-full mt-1">{{ loginError }}</span>
       </div>

src/components/login/NewPasswordForm.vue

@@ -60,18 +60,17 @@ async function newPasswordFunc() {
     return
   }
 
-  /**
-   * @TODO: #238, this wont work if we redirect to the login page
-   * Find a way to just "close" this screen instead of redirecting
-   */
   gameStore.addNotification({
     title: 'Success',
     message: 'Password changed successfully'
   })
-  window.location.href = '/'
+
+  window.history.replaceState(null, '', window.location.pathname)
+  emit('switchToLogin')
 }
 
 function cancelNewPassword() {
-  window.location.href = '/'
+  window.history.replaceState(null, '', windowlocation.pathname)
+  emit('switchToLogin')
 }
 </script>

src/components/screens/Characters.vue

@@ -11,39 +11,46 @@
       <div class="w-2/3 max-w-[860px]" v-if="!isLoading">
         <div class="mb-5 flex flex-col gap-1">
           <h1 class="text-white font-bold">SELECT CHARACTER TO PLAY</h1>
-          <p class="m-0">Maximum of 4 characters can be selected per player</p>
+          <p class="m-0">Maximum of 4 characters can be created per player</p>
         </div>
         <div class="flex w-full h-[400px] border border-solid border-gray-500 rounded-md rounded-tl-none bg-gray">
           <div class="w-1/3 h-full bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-cover bg-center border-0 border-r border-solid border-gray-500 rounded-bl-md relative">
             <div class="absolute right-full -top-px flex gap-1 flex-col">
-              <div v-for="character in characters" :key="character.id" class="character relative rounded-l border border-solid border-gray-500 w-9 h-[50px] bg-[url('/assets/ui-texture.png')]" :class="{ 'active': selected_character == character.id }">
+              <div v-for="character in characters" :key="character.id" class="character relative rounded-l border border-solid border-gray-500 w-9 h-[50px] bg-[url('/assets/ui-texture.png')] after:absolute after:w-full after:h-px after:bg-gray-500" :class="{ active: selected_character == character.id }">
                 <img src="/assets/avatar/default/head.png" class="w-9 h-9 object-contain absolute top-1/2 -translate-y-1/2" alt="Player head" />
-                <input class="opacity-0 h-full w-full absolute m-0 z-10 hover:cursor-pointer" type="radio" :id="character.id" name="character" :value="character.id" v-model="selected_character" />
+                <input class="h-full w-full absolute m-0 z-10 hover:cursor-pointer focus-visible:outline-offset-0" type="radio" :id="character.id" name="character" :value="character.id" v-model="selected_character" />
               </div>
-              <div class="character relative rounded-l border border-solid border-gray-500 w-9 h-[50px] bg-[url('/assets/ui-texture.png')]" :class="{'active': characters.length == 0}" v-if="characters.length < 4">
+              <div class="character relative rounded-l border border-solid border-gray-500 w-9 h-[50px] bg-[url('/assets/ui-texture.png')]" :class="{ active: characters.length == 0 }" v-if="characters.length < 4">
-                <button class="p-0 h-full w-full flex flex-col justify-between" @click="isModalOpen = true">
+                <button class="p-0 h-full w-full flex flex-col justify-between focus-visible:outline-offset-0" @click="isModalOpen = true">
                   <img class="w-6 h-6 object-contain absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2" draggable="false" src="/assets/icons/plus-icon.svg" />
                 </button>
               </div>
             </div>
             <div class="py-6 px-8 h-[calc(100%_-_48px)] flex flex-col items-center gap-6" v-if="selected_character">
-              <input class="input-field w-[158px]" type="text" name="name" :placeholder="characters.find(c => c.id == selected_character)?.name" />
+              <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="character-frame w-[190px] h-52 bg-no-repeat bg-center flex items-center justify-between">
-                    <img class="w-12 object-contain mb-3.5" src="/assets/avatar/default/0.png" alt="Player avatar"/>
+                    <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,27 @@
               </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 focus-visible:outline-none focus-visible:border-gray-300 focus-visible:bg-gray-500">
+                    <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 focus-visible:outline-none focus-visible:border-gray-300 focus-visible:bg-gray-500"></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>
@@ -59,19 +86,8 @@
       </div>
 
       <div class="button-wrapper flex self-center justify-end gap-4 max-w-[860px] w-full" v-if="!isLoading">
-        <button
+        <button class="btn-empty min-w-48" @click.stop="gameStore.disconnectSocket()">Back</button>
-          class="btn-empty min-w-48"
+        <button class="btn-cyan min-w-48 disabled:bg-cyan-800 disabled:cursor-not-allowed" :disabled="!selected_character" @click="select_character()">Play now</button>
-          @click.stop="gameStore.disconnectSocket()"
-        >
-          Back
-        </button>
-        <button
-          class="btn-cyan min-w-48 disabled:bg-cyan-800 disabled:cursor-not-allowed"
-          :disabled="!selected_character"
-          @click="select_character()"
-        >
-          Play now
-        </button>
       </div>
     </div>
   </div>
@@ -142,15 +158,15 @@ const selected_character = ref(null)
 function select_character() {
   if (!selected_character.value) return
   deletingCharacter.value = null
-  gameStore.connection?.emit('character:connect', { character_id: selected_character.value })
+  gameStore.connection?.emit('character:connect', { characterId: selected_character.value })
   gameStore.connection?.on('character:connect', (data: CharacterT) => gameStore.setCharacter(data))
 }
 
 // Delete character logics
-function delete_character(character_id: number) {
+function delete_character(characterId: number) {
-  if (!character_id) return
+  if (!characterId) return
   deletingCharacter.value = null
-  gameStore.connection?.emit('character:delete', { character_id: character_id })
+  gameStore.connection?.emit('character:delete', { characterId: characterId })
 }
 
 // Create character logics

src/components/screens/Login.vue

@@ -8,17 +8,17 @@
       <div class="h-dvh flex items-center lg:justify-center flex-col px-8 max-lg:pt-20">
         <img src="/assets/login/sq-logo-v1.svg" class="mb-10" alt="Sylvan Quest logo" />
         <div class="relative">
-          <img src="/assets/ui-elements/ui-box-outer.svg" class="absolute w-full h-full" alt="UI box outer" />
+          <img src="/assets/ui-elements/login-ui-box-outer.svg" class="absolute w-full h-full" alt="UI box outer" />
-          <img src="/assets/ui-elements/ui-box-inner.svg" class="absolute left-2 top-2 w-[calc(100%_-_16px)] h-[calc(100%_-_16px)] max-lg:hidden" alt="UI box inner" />
+          <img src="/assets/ui-elements/login-ui-box-inner.svg" class="absolute left-2 top-2 w-[calc(100%_-_16px)] h-[calc(100%_-_16px)] max-lg:hidden" alt="UI box inner" />
 
           <!-- Login Form -->
           <LoginForm v-if="currentForm === 'login' && !doesUrlHaveToken" @openResetPasswordModal="() => (isPasswordResetFormShown = true)" @switchToRegister="currentForm = 'register'" />
 
           <!-- Register Form -->
-          <RegisterForm v-if="currentForm === 'register' && !doesUrlHaveToken" @switchToLogin="currentForm = 'login'" />
+          <RegisterForm v-if="currentForm === 'register' && !doesUrlHaveToken" @switchToLogin="switchToLogin" />
 
           <!-- New Password Form -->
-          <NewPasswordForm v-if="doesUrlHaveToken" @switchToLogin="currentForm = 'login'" />
+          <NewPasswordForm v-if="doesUrlHaveToken" @switchToLogin="switchToLogin" />
         </div>
       </div>
     </div>
@@ -35,11 +35,16 @@ import NewPasswordForm from '@/components/login/NewPasswordForm.vue'
 import ResetPassword from '@/components/login/ResetPasswordModal.vue'
 
 const isPasswordResetFormShown = ref(false)
-const doesUrlHaveToken = window.location.hash.includes('#')
+const doesUrlHaveToken = ref(window.location.hash !== '')
 
 const gameStore = useGameStore()
 const currentForm = ref('login')
 
+function switchToLogin() {
+  currentForm.value = 'login'
+  doesUrlHaveToken.value = false
+}
+
 // automatic login because of development
 onMounted(async () => {
   const token = useCookies().get('token')

src/components/screens/ZoneEditor.vue

@@ -2,7 +2,7 @@
   <div class="flex justify-center items-center h-dvh relative">
     <Game :config="gameConfig" @create="createGame">
       <Scene name="main" @preload="preloadScene" @create="createScene">
-        <ZoneEditor :key="JSON.stringify(`${zoneEditorStore.zone?.id}_${zoneEditorStore.zone?.createdAt}_${zoneEditorStore.zone?.updatedAt}`)" />
+        <ZoneEditor :key="JSON.stringify(`${zoneEditorStore.zone?.id}_${zoneEditorStore.zone?.createdAt}_${zoneEditorStore.zone?.updatedAt ?? ''}`)" />
       </Scene>
     </Game>
   </div>

src/components/sprites/Character.vue

@@ -6,7 +6,7 @@
   </Container>
   <!--  Character name and health -->
   <Container :depth="999" :x="currentX" :y="currentY">
-    <Text @create="createNicknameText" :text="character.name" />
+    <Text @create="createNicknameText" :text="props.zoneCharacter.character.name" />
     <RoundRectangle :origin-x="0.5" :origin-y="18.5" :fillColor="0xffffff" :width="74" :height="6" :radius="5" />
     <RoundRectangle :origin-x="0.5" :origin-y="36.4" :fillColor="0x00b3b3" :width="70" :height="3" :radius="5" />
   </Container>
@@ -18,7 +18,7 @@
 
 <script lang="ts" setup>
 import config from '@/config'
-import { type ExtendedCharacter, type Sprite as SpriteT } from '@/types'
+import { type Sprite as SpriteT, type ZoneCharacter } from '@/types'
 import { useGameStore } from '@/stores/gameStore'
 import { useZoneStore } from '@/stores/zoneStore'
 import { watch, computed, ref, onMounted, onUnmounted } from 'vue'
@@ -34,7 +34,7 @@ enum Direction {
 
 const props = defineProps<{
   layer: Phaser.Tilemaps.TilemapLayer
-  character: ExtendedCharacter
+  zoneCharacter: ZoneCharacter
 }>()
 
 const charChatContainer = refObj<Phaser.GameObjects.Container>()
@@ -110,19 +110,19 @@ const calcDirection = (oldX: number, oldY: number, newX: number, newY: number):
   return Direction.UNCHANGED
 }
 
-const isFlippedX = computed(() => [6, 4].includes(props.character.rotation ?? 0))
+const isFlippedX = computed(() => [6, 4].includes(props.zoneCharacter.character.rotation ?? 0))
 
 const charTexture = computed(() => {
-  const { rotation, characterType, isMoving } = props.character
+  const { rotation, characterType } = props.zoneCharacter.character
   const spriteId = characterType?.sprite?.id ?? 'idle_right_down'
-  const action = isMoving ? 'walk' : 'idle'
+  const action = props.zoneCharacter.isMoving ? 'walk' : 'idle'
   const direction = [0, 6].includes(rotation) ? 'left_up' : 'right_down'
 
   return `${spriteId}-${action}_${direction}`
 })
 
 const updateSprite = () => {
-  if (props.character.isMoving) {
+  if (props.zoneCharacter.isMoving) {
     charSprite.value!.anims.play(charTexture.value, true)
     return
   }
@@ -133,11 +133,11 @@ const updateSprite = () => {
 }
 
 const createChatBubble = (container: Phaser.GameObjects.Container) => {
-  container.setName(`${props.character.name}_chatBubble`)
+  container.setName(`${props.zoneCharacter.character.name}_chatBubble`)
 }
 
 const createChatText = (text: Phaser.GameObjects.Text) => {
-  text.setName(`${props.character.name}_chatText`)
+  text.setName(`${props.zoneCharacter.character.name}_chatText`)
   text.setFontSize(13)
   text.setFontFamily('Arial')
   text.setOrigin(0.5, 10.9)
@@ -168,7 +168,7 @@ const createNicknameText = (text: Phaser.GameObjects.Text) => {
 }
 
 watch(
-  () => props.character,
+  () => props.zoneCharacter.character,
   (newChar, oldChar) => {
     if (!newChar) return
 
@@ -179,10 +179,9 @@ watch(
   }
 )
 
-watch(() => props.character.isMoving, updateSprite)
+watch(() => props.zoneCharacter, updateSprite)
-watch(() => props.character.rotation, updateSprite)
 
-loadSpriteTextures(scene, props.character.characterType?.sprite as SpriteT)
+loadSpriteTextures(scene, props.zoneCharacter.character.characterType?.sprite as SpriteT)
   .then(() => {
     charSprite.value!.setTexture(charTexture.value)
     charSprite.value!.setFlipX(isFlippedX.value)
@@ -192,11 +191,11 @@ loadSpriteTextures(scene, props.character.characterType?.sprite as SpriteT)
   })
 
 onMounted(() => {
-  charChatContainer.value!.setName(`${props.character!.name}_chatContainer`)
+  charChatContainer.value!.setName(`${props.zoneCharacter.character!.name}_chatContainer`)
   charChatContainer.value!.setVisible(false)
-  charContainer.value!.setName(props.character!.name)
+  charContainer.value!.setName(props.zoneCharacter.character!.name)
 
-  if (props.character.id === gameStore.character!.id) {
+  if (props.zoneCharacter.character.id === gameStore.character!.id) {
     zoneStore.setCharacterLoaded(true)
 
     // #146 : Set camera position to character, need to be improved still
@@ -204,7 +203,7 @@ onMounted(() => {
     scene.cameras.main.stopFollow()
   }
 
-  updatePosition(props.character.positionX, props.character.positionY, props.character.rotation)
+  updatePosition(props.zoneCharacter.character.positionX, props.zoneCharacter.character.positionY, props.zoneCharacter.character.rotation)
 })
 
 onUnmounted(() => {

src/components/utilities/Accordion.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="mb-4 flex flex-col gap-3">
-    <div @click="toggle" class="p-3 bg-gray-100 bg-opacity-50 rounded hover:bg-gray-200 text-white font-default cursor-pointer">
+    <div @click="toggle" class="p-3 bg-gray-200 bg-opacity-50 rounded hover:bg-gray-300 text-white font-default cursor-pointer">
       <slot name="header" />
     </div>
     <transition enter-active-class="transition-all duration-300 ease-in-out" leave-active-class="transition-all duration-300 ease-in-out" enter-from-class="opacity-0 max-h-0" enter-to-class="opacity-100 max-h-96" leave-from-class="opacity-100 max-h-96" leave-to-class="opacity-0 max-h-0">

src/components/utilities/BackgroundImageLoader.vue

@@ -8,7 +8,7 @@
 import { ref } from 'vue'
 
 // Internal array of images to preload
-const imageUrls = ref<string[]>(['/assets/ui-elements/ui-border-4-corners.svg', '/assets/ui-elements/ui-border-4-corners-light.svg', '/assets/ui-elements/ui-border-4-corners-small.svg'])
+const imageUrls = ref<string[]>(['/assets/ui-elements/button-ui-box-textured.svg', '/assets/ui-elements/button-ui-frame-empty.svg', '/assets/ui-elements/button-ui-box-textured-small.svg'])
 
 const loadedImages = ref<Set<number>>(new Set())
 

src/components/utilities/Modal.vue

@@ -3,27 +3,39 @@
     <div v-if="isModalOpenRef" class="fixed border-solid border-2 border-gray-500 z-50 flex flex-col backdrop-blur-sm shadow-lg" :style="modalStyle">
       <!-- Header -->
       <div @mousedown="startDrag" class="cursor-move p-2.5 flex justify-between items-center border-solid border-0 border-b border-gray-500 relative">
-        <div class="rounded-t absolute w-full h-full top-0 left-0 bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-center bg-cover opacity-90" />
+        <div
+          :class="{
+            'bg-[url(/assets/ui-texture.png)] bg-no-repeat bg-center bg-cover opacity-90': !disableBgTexture,
+            'bg-gray-700': disableBgTexture
+          }"
+          class="rounded-t absolute w-full h-full top-0 left-0"
+        />
         <div class="relative z-10">
           <slot name="modalHeader" />
         </div>
         <div class="flex gap-2.5">
           <button v-if="canFullScreen" @click="toggleFullScreen" class="w-5 h-5 m-0 p-0 relative hover:scale-110 transition-transform duration-300 ease-in-out">
-            <img :alt="isFullScreen ? 'exit full-screen' : 'full-screen'" :src="isFullScreen ? '/assets/icons/minimize.svg' : '/assets/icons/increase-size-option.svg'" class="w-3.5 h-3.5 invert" draggable="false" />
+            <img :alt="isFullScreen ? 'exit full-screen' : 'full-screen'" :src="isFullScreen ? '/assets/icons/modal/minimize.svg' : '/assets/icons/modal/increase-size-option.svg'" class="w-3.5 h-3.5 invert" draggable="false" />
           </button>
           <button v-if="closable" @click="emit('modal:close')" class="w-3.5 h-3.5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out">
-            <img alt="close" src="/assets/icons/close-button-white.svg" class="w-full h-full" draggable="false" />
+            <img alt="close" src="/assets/icons/modal/close-button-white.svg" class="w-full h-full" draggable="false" />
           </button>
         </div>
       </div>
 
       <!-- Body -->
       <div class="overflow-hidden grow relative">
-        <div class="rounded-b absolute w-full h-full top-0 left-0 bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-cover bg-center opacity-90" />
+        <div
+          :class="{
+            'bg-[url(/assets/ui-texture.png)] bg-no-repeat bg-center bg-cover opacity-90': !disableBgTexture,
+            'bg-gray-700': disableBgTexture
+          }"
+          class="rounded-b absolute w-full h-full top-0 left-0"
+        />
         <div class="relative z-10 h-full">
           <slot name="modalBody" />
         </div>
-        <img v-if="isResizable && !isFullScreen" src="/assets/icons/resize-icon.svg" alt="resize" class="absolute z-10 bottom-0 right-0 w-5 h-5 cursor-nwse-resize" @mousedown="startResize" />
+        <img v-if="isResizable && !isFullScreen" src="/assets/icons/modal/resize-icon.svg" alt="resize" class="absolute z-10 bottom-0 right-0 w-5 h-5 cursor-nwse-resize" @mousedown="startResize" />
       </div>
     </div>
   </Teleport>
@@ -41,6 +53,7 @@ interface ModalProps {
   modalPositionY?: number
   modalWidth?: number
   modalHeight?: number
+  disableBgTexture?: boolean
 }
 
 interface Position {
@@ -58,7 +71,8 @@ const props = withDefaults(defineProps<ModalProps>(), {
   modalPositionX: 0,
   modalPositionY: 0,
   modalWidth: 500,
-  modalHeight: 280
+  modalHeight: 280,
+  disableBgTexture: false
 })
 
 const emit = defineEmits<{

src/components/zone/Characters.vue

@@ -1,11 +1,10 @@
 <template>
-  <Character v-for="item in zoneStore.characters" :key="item.id" :layer="tilemap" :character="item" />
+  <Character v-for="item in zoneStore.characters" :key="item.character.id" :layer="tilemap" :zoneCharacter="item" />
 </template>
 
 <script setup lang="ts">
 import Character from '@/components/sprites/Character.vue'
 import { useZoneStore } from '@/stores/zoneStore'
-import { calculateIsometricDepth } from '@/composables/zoneComposable'
 
 const zoneStore = useZoneStore()
 

src/components/zone/Zone.vue

@@ -10,7 +10,7 @@ import { useScene } from 'phavuer'
 import { useGameStore } from '@/stores/gameStore'
 import { useZoneStore } from '@/stores/zoneStore'
 import { loadZoneTilesIntoScene } from '@/composables/zoneComposable'
-import type { Character as CharacterT, Zone as ZoneT, ExtendedCharacter as ExtendedCharacterT } from '@/types'
+import type { Zone as ZoneT, ZoneCharacter } from '@/types'
 import ZoneTiles from '@/components/zone/ZoneTiles.vue'
 import ZoneObjects from '@/components/zone/ZoneObjects.vue'
 import Characters from '@/components/zone/Characters.vue'
@@ -23,7 +23,7 @@ const tileMap = ref(null as Phaser.Tilemaps.Tilemap | null)
 
 type zoneLoadData = {
   zone: ZoneT
-  characters: CharacterT[]
+  characters: ZoneCharacter[]
 }
 
 // Event listeners
@@ -41,17 +41,17 @@ gameStore.connection!.on('zone:character:teleport', async (data: zoneLoadData) =
   zoneStore.setCharacters(data.characters)
 })
 
-gameStore.connection!.on('zone:character:join', async (data: ExtendedCharacterT) => {
+gameStore.connection!.on('zone:character:join', async (data: ZoneCharacter) => {
   // If data is from the current user, don't add it to the store
-  if (data.id === gameStore.character?.id) return
+  if (data.character.id === gameStore.character?.id) return
   zoneStore.addCharacter(data)
 })
 
-gameStore.connection!.on('zone:character:leave', (character_id: number) => {
+gameStore.connection!.on('zone:character:leave', (characterId: number) => {
-  zoneStore.removeCharacter(character_id)
+  zoneStore.removeCharacter(characterId)
 })
 
-gameStore.connection!.on('character:move', (data: ExtendedCharacterT) => {
+gameStore.connection!.on('character:move', (data: ZoneCharacter) => {
   zoneStore.updateCharacter(data)
 })
 

src/composables/gameComposable.ts

@@ -72,6 +72,9 @@ export async function loadSpriteTextures(scene: Phaser.Scene, sprite: Sprite) {
     // If the sprite is not animated, skip
     if (!sprite_action.isAnimated) continue
 
+    // Check if animation already exists
+    if (scene.anims.get(sprite_action.key)) continue
+
     // Add the animation to the scene
     const anim = scene.textures.get(sprite_action.key)
     scene.textures.addSpriteSheet(sprite_action.key, anim, { frameWidth: sprite_action.frameWidth ?? 0, frameHeight: sprite_action.frameHeight ?? 0 })

src/composables/pointerHandlers/useGamePointerHandlers.ts

@@ -48,7 +48,7 @@ export function useGamePointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilema
     if (distance <= dragThreshold) {
       const pointerTile = getTile(layer, pointer.worldX, pointer.worldY)
       if (pointerTile) {
-        gameStore.connection?.emit('character:initMove', {
+        gameStore.connection?.emit('character:move', {
           positionX: pointerTile.x,
           positionY: pointerTile.y
         })

src/services/authentication.ts

@@ -9,7 +9,7 @@ export async function register(username: string, email: string, password: string
     useCookies().set('token', response.data.token as string)
     return { success: true, token: response.data.token }
   } catch (error: any) {
-    if (typeof error.response.data === 'undefined') {
+    if (typeof error.response?.data === 'undefined') {
       return { error: 'Could not connect to server' }
     }
     return { error: error.response.data.message }
@@ -24,6 +24,9 @@ export async function login(username: string, password: string) {
     })
     return { success: true, token: response.data.token }
   } catch (error: any) {
+    if (typeof error.response?.data === 'undefined') {
+      return { error: 'Could not connect to server' }
+    }
     return { error: error.response.data.message }
   }
 }
@@ -33,7 +36,7 @@ export async function resetPassword(email: string) {
     const response = await axios.post(`${config.server_endpoint}/reset-password`, { email })
     return { success: true, token: response.data.token }
   } catch (error: any) {
-    if (typeof error.response.data === 'undefined') {
+    if (typeof error.response?.data === 'undefined') {
       return { error: 'Could not connect to server' }
     }
     return { error: error.response.data.message }
@@ -45,7 +48,7 @@ export async function newPassword(urlToken: string, password: string) {
     const response = await axios.post(`${config.server_endpoint}/new-password`, { urlToken, password })
     return { success: true, token: response.data.token }
   } catch (error: any) {
-    if (typeof error.response.data === 'undefined') {
+    if (typeof error.response?.data === 'undefined') {
       return { error: 'Could not connect to server' }
     }
     return { error: error.response.data.message }

src/stores/assetManagerStore.ts

@@ -1,6 +1,6 @@
 import { ref } from 'vue'
 import { defineStore } from 'pinia'
-import type { Tile, Object, Sprite, CharacterType } from '@/types'
+import type { Tile, Object, Sprite, CharacterType, CharacterHair } from '@/types'
 
 export const useAssetManagerStore = defineStore('assetManager', () => {
   const tileList = ref<Tile[]>([])
@@ -15,6 +15,9 @@ export const useAssetManagerStore = defineStore('assetManager', () => {
   const characterTypeList = ref<CharacterType[]>([])
   const selectedCharacterType = ref<CharacterType | null>(null)
 
+  const characterHairList = ref<CharacterHair[]>([])
+  const selectedCharacterHair = ref<CharacterHair | null>(null)
+
   function setTileList(tiles: Tile[]) {
     tileList.value = tiles
   }
@@ -47,6 +50,14 @@ export const useAssetManagerStore = defineStore('assetManager', () => {
     selectedCharacterType.value = characterType
   }
 
+  function setCharacterHairList(characterHair: CharacterHair[]) {
+    characterHairList.value = characterHair
+  }
+
+  function setSelectedCharacterHair(characterHair: CharacterHair | null) {
+    selectedCharacterHair.value = characterHair
+  }
+
   return {
     tileList,
     selectedTile,
@@ -56,6 +67,8 @@ export const useAssetManagerStore = defineStore('assetManager', () => {
     selectedSprite,
     characterTypeList,
     selectedCharacterType,
+    characterHairList,
+    selectedCharacterHair,
     setTileList,
     setSelectedTile,
     setObjectList,
@@ -63,6 +76,8 @@ export const useAssetManagerStore = defineStore('assetManager', () => {
     setSelectedObject,
     setSpriteList,
     setSelectedSprite,
-    setSelectedCharacterType
+    setSelectedCharacterType,
+    setCharacterHairList,
+    setSelectedCharacterHair
   }
 })

src/stores/zoneStore.ts

@@ -1,17 +1,17 @@
 import { defineStore } from 'pinia'
-import type { ExtendedCharacter, Zone } from '@/types'
+import type { ZoneCharacter, Zone } from '@/types'
 
 export const useZoneStore = defineStore('zone', {
   state: () => {
     return {
       zone: null as Zone | null,
-      characters: [] as ExtendedCharacter[],
+      characters: [] as ZoneCharacter[],
       characterLoaded: false
     }
   },
   getters: {
     getCharacterById: (state) => {
-      return (id: number) => state.characters.find((char) => char.id === id)
+      return (id: number) => state.characters.find((char) => char.character.id === id)
     },
     getCharacterCount: (state) => {
       return state.characters.length
@@ -24,20 +24,18 @@ export const useZoneStore = defineStore('zone', {
     setZone(zone: Zone | null) {
       this.zone = zone
     },
-    setCharacters(characters: ExtendedCharacter[]) {
+    setCharacters(characters: ZoneCharacter[]) {
       this.characters = characters
     },
-    addCharacter(character: ExtendedCharacter) {
+    addCharacter(character: ZoneCharacter) {
       this.characters.push(character)
     },
-    updateCharacter(updatedCharacter: ExtendedCharacter) {
+    updateCharacter(updatedCharacter: ZoneCharacter) {
-      const index = this.characters.findIndex((char) => char.id === updatedCharacter.id)
+      const index = this.characters.findIndex((char) => char.character.id === updatedCharacter.character.id)
-      if (index !== -1) {
+      if (index !== -1) this.characters[index] = updatedCharacter
-        this.characters[index] = { ...this.characters[index], ...updatedCharacter }
-      }
     },
-    removeCharacter(character_id: number) {
+    removeCharacter(characterId: number) {
-      this.characters = this.characters.filter((char) => char.id !== character_id)
+      this.characters = this.characters.filter((char) => char.character.id !== characterId)
     },
     setCharacterLoaded(loaded: boolean) {
       this.characterLoaded = loaded

src/types.ts

@@ -137,6 +137,7 @@ export type CharacterType = {
   name: string
   gender: CharacterGender
   race: CharacterRace
+  isEnabledForCharCreation: boolean
   characters: Character[]
   spriteId?: string
   sprite?: Sprite
@@ -144,6 +145,16 @@ export type CharacterType = {
   updatedAt: Date
 }
 
+export type CharacterHair = {
+  id: number
+  name: string
+  spriteId: string
+  sprite: Sprite
+  gender: CharacterGender
+  isEnabledForCharCreation: boolean
+  // @TODO: Do we need addedAt and updatedAt?
+}
+
 export type Character = {
   id: number
   userId: number
@@ -162,11 +173,14 @@ export type Character = {
   zone: Zone
   characterTypeId: number | null
   characterType: CharacterType | null
+  hairId: number | null
+  hair: CharacterHair | null
   chats: Chat[]
   items: CharacterItem[]
 }
 
-export type ExtendedCharacter = Character & {
+export type ZoneCharacter = {
+  character: Character
   isMoving?: boolean
 }
 
@@ -213,11 +227,6 @@ export type Chat = {
   createdAt: Date
 }
 
-export type ChatMessage = {
-  character: Character
-  message: string
-}
-
 export type WorldSettings = {
   date: Date
   isRainEnabled: boolean