Hair anim. adjustment

my 5 EUR Action gaming mouse doesnt let me scroll on MacOS 💩

.env.example

@@ -1,4 +1,4 @@
-VITE_NAME=New Quest
+VITE_NAME=Sylvan Quest
 VITE_DEVELOPMENT=true
 VITE_SERVER_ENDPOINT=http://localhost:4000
 VITE_TILE_SIZE_X=64

package.json

@@ -50,6 +50,7 @@
     "tailwindcss": "^3.4.13",
     "typescript": "~5.6.2",
     "vite": "^5.4.9",
+    "vite-plugin-compression": "^0.5.1",
     "vite-plugin-vue-devtools": "^7.5.2",
     "vitest": "^2.0.3",
     "vue-tsc": "^1.6.5"

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/male-icon.svg

@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_598_541)">
+<path d="M10.0327 5.69111L12.3905 3.33333H9.33333V2H14.6667V7.33333H13.3333V4.27614L10.9755 6.63392C11.6183 7.47513 12 8.52633 12 9.66667C12 12.4281 9.7614 14.6667 7 14.6667C4.23857 14.6667 2 12.4281 2 9.66667C2 6.90527 4.23857 4.66667 7 4.66667C8.14033 4.66667 9.19153 5.04843 10.0327 5.69111ZM7 13.3333C9.02507 13.3333 10.6667 11.6917 10.6667 9.66667C10.6667 7.6416 9.02507 6 7 6C4.97495 6 3.33333 7.6416 3.33333 9.66667C3.33333 11.6917 4.97495 13.3333 7 13.3333Z" fill="#999999"/>
+</g>
+<defs>
+<clipPath id="clip0_598_541">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</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>

src/App.vue

@@ -1,8 +1,7 @@
 <template>
   <Notifications />
-  <GmTools v-if="gameStore.character?.role === 'gm'" />
+  <BackgroundImageLoader />
   <GmPanel v-if="gameStore.character?.role === 'gm'" />
-
   <component :is="currentScreen" />
 </template>
 
@@ -10,24 +9,51 @@
 import { useGameStore } from '@/stores/gameStore'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import Notifications from '@/components/utilities/Notifications.vue'
-import GmTools from '@/components/gameMaster/GmTools.vue'
+import BackgroundImageLoader from '@/components/utilities/BackgroundImageLoader.vue'
 import GmPanel from '@/components/gameMaster/GmPanel.vue'
-import Login from '@/screens/Login.vue'
-import Characters from '@/screens/Characters.vue'
-import Game from '@/screens/Game.vue'
-// import Loading from '@/screens/Loading.vue'
-import ZoneEditor from '@/screens/ZoneEditor.vue'
-import { computed } from 'vue'
+import Login from '@/components/screens/Login.vue'
+import Characters from '@/components/screens/Characters.vue'
+import Game from '@/components/screens/Game.vue'
+import ZoneEditor from '@/components/screens/ZoneEditor.vue'
+import { computed, watch } from 'vue'
 
 const gameStore = useGameStore()
 const zoneEditorStore = useZoneEditorStore()
 
 const currentScreen = computed(() => {
-  // if (!gameStore.isAssetsLoaded) return Loading
   if (!gameStore.connection) return Login
   if (!gameStore.token) return Login
   if (!gameStore.character) return Characters
   if (zoneEditorStore.active) return ZoneEditor
   return Game
 })
+
+// Watch zoneEditorStore.active and empty gameStore.game.loadedAssets
+watch(
+  () => zoneEditorStore.active,
+  () => {
+    gameStore.game.loadedAssets = []
+  }
+)
+
+// #209: Play sound when a button is pressed
+addEventListener('click', (event) => {
+  if (!(event.target instanceof HTMLButtonElement)) {
+    return
+  }
+  const audio = new Audio('/assets/music/click-btn.mp3')
+  audio.play()
+})
+
+// Watch for "G" key press and toggle the gm panel
+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 or focus is on an input
+  if (event.repeat || event.isComposing || event.defaultPrevented || document.activeElement?.tagName.toUpperCase() === 'INPUT' || document.activeElement?.tagName.toUpperCase() === 'TEXTAREA') return
+
+  if (event.key === 'G') {
+    gameStore.toggleGmPanel()
+  }
+})
 </script>

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,
@@ -45,7 +53,7 @@ label {
 
 button,
 a {
-  @apply font-medium drop-shadow-20;
+  @apply font-medium;
 }
 
 button,
@@ -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 {
@@ -99,11 +114,11 @@ button {
   }
 
   &.btn-red {
-    @apply bg-red text-gray-50 text-base leading-5 rounded py-2.5;
+    @apply bg-red-300 text-gray-50 text-base leading-5 rounded py-2.5;
 
     &.active,
     &:hover {
-      @apply bg-red-300;
+      @apply bg-red-400;
     }
   }
 
@@ -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,22 @@ 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 {
+  &.active {
+    @apply pr-px border-r-0;
+  }
+}
+
+.hair-deselect:has(:checked) {
+  img {
+    @apply brightness-200;
+  }
 }
 
 .text-pixel {
@@ -133,6 +165,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

@@ -1,44 +1,60 @@
 <template>
-  <Scene name="effects" @preload="preloadScene" @create="createScene" @update="updateScene"> </Scene>
+  <Scene name="effects" @preload="preloadScene" @create="createScene" @update="updateScene" />
 </template>
 
 <script setup lang="ts">
 import { Scene } from 'phavuer'
 import { useZoneStore } from '@/stores/zoneStore'
-import { onBeforeUnmount, ref, watch } from 'vue'
+import { useGameStore } from '@/stores/gameStore'
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import type { WeatherState } from '@/types'
 
+// Constants
+const LIGHT_CONFIG = {
+  SUNRISE_HOUR: 6,
+  SUNSET_HOUR: 20,
+  DAY_STRENGTH: 100,
+  NIGHT_STRENGTH: 30
+}
+
+// Stores and refs
+const gameStore = useGameStore()
 const zoneStore = useZoneStore()
-
 const sceneRef = ref<Phaser.Scene | null>(null)
 
-// Effect-related refs
-const lightEffect = ref<Phaser.GameObjects.Graphics | null>(null)
-const rainEmitter = ref<Phaser.GameObjects.Particles.ParticleEmitter | null>(null)
-const fogSprite = ref<Phaser.GameObjects.Sprite | null>(null)
+// Effect objects
+const effects = {
+  light: ref<Phaser.GameObjects.Graphics | null>(null),
+  rain: ref<Phaser.GameObjects.Particles.ParticleEmitter | null>(null),
+  fog: ref<Phaser.GameObjects.Sprite | null>(null)
+}
 
-const preloadScene = async (scene: Phaser.Scene) => {
+// Weather state
+const weatherState = ref<WeatherState>({
+  isRainEnabled: false,
+  rainPercentage: 0,
+  isFogEnabled: false,
+  fogDensity: 0
+})
+
+// Scene setup
+const preloadScene = (scene: Phaser.Scene) => {
   scene.load.image('raindrop', 'assets/raindrop.png')
   scene.load.image('fog', 'assets/fog.png')
 }
 
-const createScene = async (scene: Phaser.Scene) => {
+const createScene = (scene: Phaser.Scene) => {
   sceneRef.value = scene
-  createLightEffect(scene)
-  createRainEffect(scene)
-  createFogEffect(scene)
+  initializeEffects(scene)
+  setupSocketListeners()
 }
 
-const updateScene = () => {
-  updateEffects()
-}
+const initializeEffects = (scene: Phaser.Scene) => {
+  // Light
+  effects.light.value = scene.add.graphics().setDepth(1000)
 
-const createLightEffect = (scene: Phaser.Scene) => {
-  lightEffect.value = scene.add.graphics()
-  lightEffect.value.setDepth(1000)
-}
-
-const createRainEffect = (scene: Phaser.Scene) => {
-  rainEmitter.value = scene.add.particles(0, 0, 'raindrop', {
+  // Rain
+  effects.rain.value = scene.add.particles(0, 0, 'raindrop', {
     x: { min: 0, max: window.innerWidth },
     y: -50,
     quantity: 5,
@@ -47,64 +63,101 @@ const createRainEffect = (scene: Phaser.Scene) => {
     scale: { start: 0.005, end: 0.005 },
     alpha: { start: 0.5, end: 0 },
     blendMode: 'ADD'
-  })
-  rainEmitter.value.setDepth(900)
-  rainEmitter.value.stop()
+  }).setDepth(900)
+  effects.rain.value.stop()
+
+  // Fog
+  effects.fog.value = scene.add.sprite(window.innerWidth / 2, window.innerHeight / 2, 'fog')
+    .setScale(2)
+    .setAlpha(0)
+    .setDepth(950)
 }
 
-const createFogEffect = (scene: Phaser.Scene) => {
-  fogSprite.value = scene.add.sprite(window.innerWidth / 2, window.innerHeight / 2, 'fog')
-  fogSprite.value.setScale(2)
-  fogSprite.value.setAlpha(0)
-  fogSprite.value.setDepth(950)
-}
+// Effect updates
+const updateScene = () => {
+  const timeBasedLight = calculateLightStrength(gameStore.world.date)
+  const zoneEffects = zoneStore.zone?.zoneEffects as Array<{ effect: string, strength: number }>
 
-const updateEffects = () => {
-  const effects = zoneStore.zone?.zoneEffects || []
-
-  effects.forEach((effect) => {
-    switch (effect.effect) {
-      case 'light':
-        updateLightEffect(effect.strength)
-        break
-      case 'rain':
-        updateRainEffect(effect.strength)
-        break
-      case 'fog':
-        updateFogEffect(effect.strength)
-        break
-    }
-  })
-}
-
-const updateLightEffect = (strength: number) => {
-  if (!lightEffect.value) return
-  const darkness = 1 - strength / 100
-  lightEffect.value.clear()
-  lightEffect.value.fillStyle(0x000000, darkness)
-  lightEffect.value.fillRect(0, 0, window.innerWidth, window.innerHeight)
-}
-
-const updateRainEffect = (strength: number) => {
-  if (!rainEmitter.value) return
-  if (strength > 0) {
-    rainEmitter.value.start()
-    rainEmitter.value.setQuantity(Math.floor((strength / 100) * 10))
+  if (zoneEffects?.length) {
+    applyEffects(zoneEffects)
   } else {
-    rainEmitter.value.stop()
+    applyEffects({
+      light: timeBasedLight,
+      rain: weatherState.value.isRainEnabled ? weatherState.value.rainPercentage : 0,
+      fog: weatherState.value.isFogEnabled ? weatherState.value.fogDensity * 100 : 0
+    })
   }
 }
 
-const updateFogEffect = (strength: number) => {
-  if (!fogSprite.value) return
-  fogSprite.value.setAlpha(strength / 100)
+const applyEffects = (effectValues: any) => {
+  if (effects.light.value) {
+    const darkness = 1 - (effectValues.light ?? 100) / 100
+    effects.light.value.clear()
+      .fillStyle(0x000000, darkness)
+      .fillRect(0, 0, window.innerWidth, window.innerHeight)
   }
 
-watch(() => zoneStore.zone?.zoneEffects, updateEffects, { deep: true })
+  if (effects.rain.value) {
+    const strength = effectValues.rain ?? 0
+    strength > 0
+      ? effects.rain.value.start().setQuantity(Math.floor((strength / 100) * 10))
+      : effects.rain.value.stop()
+  }
+
+  if (effects.fog.value) {
+    effects.fog.value.setAlpha((effectValues.fog ?? 0) / 100)
+  }
+}
+
+const calculateLightStrength = (time: Date): number => {
+  const hour = time.getHours()
+  const minute = time.getMinutes()
+
+  if (hour >= LIGHT_CONFIG.SUNSET_HOUR || hour < LIGHT_CONFIG.SUNRISE_HOUR)
+    return LIGHT_CONFIG.NIGHT_STRENGTH
+
+  if (hour > LIGHT_CONFIG.SUNRISE_HOUR && hour < LIGHT_CONFIG.SUNSET_HOUR - 2)
+    return LIGHT_CONFIG.DAY_STRENGTH
+
+  if (hour === LIGHT_CONFIG.SUNRISE_HOUR)
+    return LIGHT_CONFIG.NIGHT_STRENGTH +
+      ((LIGHT_CONFIG.DAY_STRENGTH - LIGHT_CONFIG.NIGHT_STRENGTH) * minute) / 60
+
+  const totalMinutes = (hour - (LIGHT_CONFIG.SUNSET_HOUR - 2)) * 60 + minute
+  return LIGHT_CONFIG.DAY_STRENGTH -
+    (LIGHT_CONFIG.DAY_STRENGTH - LIGHT_CONFIG.NIGHT_STRENGTH) * (totalMinutes / 120)
+}
+
+// Socket and window handlers
+const setupSocketListeners = () => {
+  gameStore.connection?.emit('weather', (response: WeatherState) => {
+    weatherState.value = response
+    updateScene()
+  })
+
+  gameStore.connection?.on('weather', (data: WeatherState) => {
+    weatherState.value = data
+    updateScene()
+  })
+
+  gameStore.connection?.on('date', updateScene)
+}
+
+const handleResize = () => {
+  if (effects.rain.value)
+    effects.rain.value.updateConfig({ x: { min: 0, max: window.innerWidth } })
+  if (effects.fog.value)
+    effects.fog.value.setPosition(window.innerWidth / 2, window.innerHeight / 2)
+}
+
+// Lifecycle
+watch(() => zoneStore.zone?.zoneEffects, updateScene, { deep: true })
+
+onMounted(() => window.addEventListener('resize', handleResize))
 
 onBeforeUnmount(() => {
+  window.removeEventListener('resize', handleResize)
   if (sceneRef.value) sceneRef.value.scene.remove('effects')
+  gameStore.connection?.off('weather')
 })
-
-// @TODO : Fix resize issue
 </script>

src/components/game/character/Character.vue

@@ -1,29 +1,24 @@
 <template>
-  <!--  Chat bubble -->
-  <Container ref="charChatContainer" :depth="999" :x="currentX" :y="currentY">
-    <RoundRectangle @create="createChatBubble" :origin-x="0.5" :origin-y="7.5" :fillColor="0xffffff" :width="194" :height="21" :radius="20" />
-    <Text @create="createChatText" :style="{ fontSize: 13, fontFamily: 'Arial', color: '#000' }" />
-  </Container>
-  <!--  Character name and health -->
-  <Container :depth="999" :x="currentX" :y="currentY">
-    <Text @create="createNicknameText" :text="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>
-  <!--  Character sprite -->
+  <ChatBubble :zoneCharacter="props.zoneCharacter" :currentX="currentX" :currentY="currentY" />
+  <Healthbar :zoneCharacter="props.zoneCharacter" :currentX="currentX" :currentY="currentY" />
   <Container ref="charContainer" :depth="isometricDepth" :x="currentX" :y="currentY">
-    <Sprite ref="charSprite" :origin-y="1" :flipX="isFlippedX" :flipY="false" />
+    <CharacterHair :zoneCharacter="props.zoneCharacter" :currentX="currentX" :currentY="currentY" />
+    <Sprite ref="charSprite" :origin-y="1" :flipX="isFlippedX" />
   </Container>
 </template>
 
 <script lang="ts" setup>
 import config from '@/config'
-import { type ExtendedCharacter } 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'
-import { Container, refObj, RoundRectangle, Sprite, Text, useGame, useScene } from 'phavuer'
+import { Container, Image, refObj, RoundRectangle, Sprite, Text, useGame, useScene } from 'phavuer'
 import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
+import { loadSpriteTextures } from '@/composables/gameComposable'
+import ChatBubble from '@/components/game/character/partials/ChatBubble.vue'
+import Healthbar from '@/components/game/character/partials/Healthbar.vue'
+import CharacterHair from '@/components/game/character/partials/CharacterHair.vue'
 
 enum Direction {
   POSITIVE,
@@ -33,14 +28,12 @@ enum Direction {
 
 const props = defineProps<{
   layer: Phaser.Tilemaps.TilemapLayer
-  character: ExtendedCharacter
+  zoneCharacter: ZoneCharacter
 }>()
 
-const charChatContainer = refObj<Phaser.GameObjects.Container>()
 const charContainer = refObj<Phaser.GameObjects.Container>()
 const charSprite = refObj<Phaser.GameObjects.Sprite>()
 
-const game = useGame()
 const gameStore = useGameStore()
 const zoneStore = useZoneStore()
 const scene = useScene()
@@ -78,7 +71,7 @@ const updatePosition = (x: number, y: number, direction: Direction) => {
     return
   }
 
-  const duration = distance * 6
+  const duration = distance * 5.7
 
   tween.value = props.layer.scene.tweens.add({
     targets: { x: currentX.value, y: currentY.value },
@@ -109,19 +102,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
   }
@@ -131,43 +124,8 @@ const updateSprite = () => {
   charSprite.value!.setTexture(charTexture.value)
 }
 
-const createChatBubble = (container: Phaser.GameObjects.Container) => {
-  container.setName(`${props.character.name}_chatBubble`)
-}
-
-const createChatText = (text: Phaser.GameObjects.Text) => {
-  text.setName(`${props.character.name}_chatText`)
-  text.setFontSize(13)
-  text.setFontFamily('Arial')
-  text.setOrigin(0.5, 10.9)
-
-  // Fix text alignment on Windows and Android
-  if (game.device.os.windows || game.device.os.android) {
-    text.setOrigin(0.5, 9.75)
-
-    if (game.device.browser.firefox) {
-      text.setOrigin(0.5, 10.9)
-    }
-  }
-}
-
-const createNicknameText = (text: Phaser.GameObjects.Text) => {
-  text.setFontSize(13)
-  text.setFontFamily('Arial')
-  text.setOrigin(0.5, 9)
-
-  // Fix text alignment on Windows and Android
-  if (game.device.os.windows || game.device.os.android) {
-    text.setOrigin(0.5, 8)
-
-    if (game.device.browser.firefox) {
-      text.setOrigin(0.5, 9)
-    }
-  }
-}
-
 watch(
-  () => props.character,
+  () => props.zoneCharacter.character,
   (newChar, oldChar) => {
     if (!newChar) return
 
@@ -178,27 +136,29 @@ watch(
   }
 )
 
-watch(() => props.character.isMoving, updateSprite)
-watch(() => props.character.rotation, updateSprite)
+watch(() => props.zoneCharacter, updateSprite)
+
+loadSpriteTextures(scene, props.zoneCharacter.character.characterType?.sprite as SpriteT)
+  .then(() => {
+    charSprite.value!.setTexture(charTexture.value)
+    charSprite.value!.setFlipX(isFlippedX.value)
+  })
+  .catch((error) => {
+    console.error('Error loading texture:', error)
+  })
 
 onMounted(() => {
-  charChatContainer.value!.setName(`${props.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
     scene.cameras.main.startFollow(charContainer.value as Phaser.GameObjects.Container)
-    scene.cameras.main.stopFollow()
+    // scene.cameras.main.stopFollow()
   }
 
-  // Set sprite
-  charSprite.value!.setTexture(charTexture.value)
-  charSprite.value!.setFlipX(isFlippedX.value)
-
-  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/game/character/partials/CharacterHair.vue

@@ -0,0 +1,47 @@
+<template>
+  <Image v-bind="imageProps" v-if="gameStore.getLoadedAsset(texture)" />
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { Image, useScene } from 'phavuer'
+import type { Sprite as SpriteT, ZoneCharacter } from '@/types'
+import { loadSpriteTextures } from '@/composables/gameComposable'
+import { useGameStore } from '@/stores/gameStore'
+
+const props = defineProps<{
+  zoneCharacter: ZoneCharacter
+  currentX: number
+  currentY: number
+}>()
+
+const gameStore = useGameStore()
+const scene = useScene()
+
+const texture = computed(() => {
+  const { rotation, characterHair } = props.zoneCharacter.character
+  const spriteId = characterHair?.sprite?.id
+  const direction = [0, 6].includes(rotation) ? 'back' : 'front'
+
+  return `${spriteId}-${direction}`
+})
+
+const isFlippedX = computed(() => [6, 4].includes(props.zoneCharacter.character.rotation ?? 0))
+
+const ANIMATION_MS = 500 // Animation duration in milliseconds
+const imageProps = computed(() => ({
+  depth: 1,
+  originY: [0, 6].includes(props.zoneCharacter.character.rotation ?? 0) ? 4.30 : 5.30,
+  flipX: isFlippedX.value,
+  texture: texture.value,
+  y: props.zoneCharacter.isMoving ? (scene.time.now % ANIMATION_MS < (ANIMATION_MS / 2) ? 0.5 : -0.5) : 0,
+  x: props.zoneCharacter.isMoving ? (scene.time.now % ANIMATION_MS < (ANIMATION_MS / 2) ? -0.5 : 0.5) : 0,
+}))
+
+
+loadSpriteTextures(scene, props.zoneCharacter.character.characterHair?.sprite as SpriteT)
+  .then(() => {})
+  .catch((error) => {
+    console.error('Error loading texture:', error)
+  })
+</script>

src/components/game/character/partials/ChatBubble.vue

@@ -0,0 +1,46 @@
+<template>
+  <Container ref="charChatContainer" :depth="999" :x="currentX" :y="currentY">
+    <RoundRectangle @create="createChatBubble" :origin-x="0.5" :origin-y="7.5" :fillColor="0xffffff" :width="194" :height="21" :radius="20" />
+    <Text @create="createChatText" :style="{ fontSize: 13, fontFamily: 'Arial', color: '#000' }" />
+  </Container>
+</template>
+
+<script setup lang="ts">
+import { Container, refObj, RoundRectangle, Text, useGame } from 'phavuer'
+import type { ZoneCharacter } from '@/types'
+import { onMounted } from 'vue'
+
+const props = defineProps<{
+  zoneCharacter: ZoneCharacter
+  currentX: number
+  currentY: number
+}>()
+
+const game = useGame()
+const charChatContainer = refObj<Phaser.GameObjects.Container>()
+
+const createChatBubble = (container: Phaser.GameObjects.Container) => {
+  container.setName(`${props.zoneCharacter.character.name}_chatBubble`)
+}
+
+const createChatText = (text: Phaser.GameObjects.Text) => {
+  text.setName(`${props.zoneCharacter.character.name}_chatText`)
+  text.setFontSize(13)
+  text.setFontFamily('Arial')
+  text.setOrigin(0.5, 10.9)
+
+  // Fix text alignment on Windows and Android
+  if (game.device.os.windows || game.device.os.android) {
+    text.setOrigin(0.5, 9.75)
+
+    if (game.device.browser.firefox) {
+      text.setOrigin(0.5, 10.9)
+    }
+  }
+}
+
+onMounted(() => {
+  charChatContainer.value!.setName(`${props.zoneCharacter.character!.name}_chatContainer`)
+  charChatContainer.value!.setVisible(false)
+})
+</script>

src/components/game/character/partials/Healthbar.vue

@@ -0,0 +1,35 @@
+<template>
+  <Container :depth="999" :x="currentX" :y="currentY">
+    <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>
+</template>
+
+<script setup lang="ts">
+import { Container, RoundRectangle, Text, useGame } from 'phavuer'
+import type { ZoneCharacter } from '@/types'
+
+const props = defineProps<{
+  zoneCharacter: ZoneCharacter
+  currentX: number
+  currentY: number
+}>()
+
+const game = useGame()
+
+const createNicknameText = (text: Phaser.GameObjects.Text) => {
+  text.setFontSize(13)
+  text.setFontFamily('Arial')
+  text.setOrigin(0.5, 9)
+
+  // Fix text alignment on Windows and Android
+  if (game.device.os.windows || game.device.os.android) {
+    text.setOrigin(0.5, 8)
+
+    if (game.device.browser.firefox) {
+      text.setOrigin(0.5, 9)
+    }
+  }
+}
+</script>

src/components/game/zone/Characters.vue

@@ -0,0 +1,14 @@
+<template>
+  <Character v-for="item in zoneStore.characters" :key="item.character.id" :layer="tilemap" :zoneCharacter="item" />
+</template>
+
+<script setup lang="ts">
+import Character from '@/components/game/character/Character.vue'
+import { useZoneStore } from '@/stores/zoneStore'
+
+const zoneStore = useZoneStore()
+
+const props = defineProps<{
+  tilemap: Phaser.Tilemaps.Tilemap
+}>()
+</script>

src/components/game/zone/Zone.vue

@@ -1,18 +1,21 @@
 <template>
-  <ZoneTiles :key="zoneStore.zone?.id ?? 0" @tilemap:create="tileMap = $event" />
+  <ZoneTiles :key="zoneStore.zone?.id ?? 0" @tileMap:create="tileMap = $event" />
   <ZoneObjects v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
   <Characters v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
 </template>
 
 <script setup lang="ts">
+import { ref, onUnmounted } from 'vue'
+import { useScene } from 'phavuer'
 import { useGameStore } from '@/stores/gameStore'
 import { useZoneStore } from '@/stores/zoneStore'
-import { onBeforeUnmount, ref, onBeforeMount } from 'vue'
-import type { Character as CharacterT, Zone as ZoneT, ExtendedCharacter as ExtendedCharacterT } from '@/types'
-import ZoneTiles from '@/components/zone/ZoneTiles.vue'
-import ZoneObjects from '@/components/zone/ZoneObjects.vue'
-import Characters from '@/components/zone/Characters.vue'
+import { loadZoneTilesIntoScene } from '@/composables/zoneComposable'
+import type { Zone as ZoneT, ZoneCharacter } from '@/types'
+import ZoneTiles from '@/components/game/zone/ZoneTiles.vue'
+import ZoneObjects from '@/components/game/zone/ZoneObjects.vue'
+import Characters from '@/components/game/zone/Characters.vue'
 
+const scene = useScene()
 const gameStore = useGameStore()
 const zoneStore = useZoneStore()
 
@@ -20,7 +23,7 @@ const tileMap = ref(null as Phaser.Tilemaps.Tilemap | null)
 
 type zoneLoadData = {
   zone: ZoneT
-  characters: CharacterT[]
+  characters: ZoneCharacter[]
 }
 
 // Event listeners
@@ -33,33 +36,33 @@ gameStore.connection!.on('zone:character:teleport', async (data: zoneLoadData) =
     zoneId: data.zone.id
   })
 
+  await loadZoneTilesIntoScene(data.zone, scene)
   zoneStore.setZone(data.zone)
   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) => {
-  zoneStore.removeCharacter(character_id)
+gameStore.connection!.on('zone:character:leave', (characterId: number) => {
+  zoneStore.removeCharacter(characterId)
 })
 
-gameStore.connection!.on('character:move', (data: ExtendedCharacterT) => {
+gameStore.connection!.on('character:move', (data: ZoneCharacter) => {
   zoneStore.updateCharacter(data)
 })
 
-onBeforeMount(async () => {
+// Emit zone:character:join event to server and wait for response, then set zone and characters
 gameStore!.connection!.emit('zone:character:join', async (response: zoneLoadData) => {
-    // Set zone and characters
+  await loadZoneTilesIntoScene(response.zone, scene)
   zoneStore.setZone(response.zone)
   zoneStore.setCharacters(response.characters)
 })
-})
 
-onBeforeUnmount(() => {
+onUnmounted(() => {
   zoneStore.reset()
   gameStore.connection!.off('zone:character:teleport')
   gameStore.connection!.off('zone:character:join')

src/components/game/zone/ZoneObjects.vue

@@ -4,7 +4,7 @@
 
 <script setup lang="ts">
 import { useZoneStore } from '@/stores/zoneStore'
-import ZoneObject from '@/components/zone/partials/ZoneObject.vue'
+import ZoneObject from '@/components/game/zone/partials/ZoneObject.vue'
 
 const zoneStore = useZoneStore()
 

src/components/game/zone/ZoneTiles.vue

@@ -0,0 +1,69 @@
+<template>
+  <Controls :layer="tileLayer" :depth="0" />
+</template>
+
+<script setup lang="ts">
+import config from '@/config'
+import { useScene } from 'phavuer'
+import { useZoneStore } from '@/stores/zoneStore'
+import { onBeforeUnmount } from 'vue'
+import { FlattenZoneArray, setLayerTiles } from '@/composables/zoneComposable'
+import Controls from '@/components/utilities/Controls.vue'
+import { unduplicateArray } from '@/utilities'
+
+const emit = defineEmits(['tileMap:create'])
+
+const scene = useScene()
+const zoneStore = useZoneStore()
+const tileMap = createTileMap()
+const tileLayer = createTileLayer()
+
+/**
+ * A Tilemap is a container for Tilemap data.
+ * This isn't a display object, rather, it holds data about the map and allows you to add tilesets and tilemap layers to it.
+ * A map can have one or more tilemap layers, which are the display objects that actually render the tiles.
+ */
+function createTileMap() {
+  const zoneData = new Phaser.Tilemaps.MapData({
+    width: zoneStore.zone?.width,
+    height: zoneStore.zone?.height,
+    tileWidth: config.tile_size.x,
+    tileHeight: config.tile_size.y,
+    orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
+    format: Phaser.Tilemaps.Formats.ARRAY_2D
+  })
+
+  const newTileMap = new Phaser.Tilemaps.Tilemap(scene, zoneData)
+  emit('tileMap:create', newTileMap)
+
+  return newTileMap
+}
+
+/**
+ * A Tileset is a combination of a single image containing the tiles and a container for data about each tile.
+ */
+function createTileLayer() {
+  const tilesArray = unduplicateArray(FlattenZoneArray(zoneStore.zone?.tiles ?? []))
+
+  const tilesetImages = Array.from(tilesArray).map((tile: any, index: number) => {
+    return tileMap.addTilesetImage(tile, tile, config.tile_size.x, config.tile_size.y, 1, 2, index + 1, { x: 0, y: -config.tile_size.y })
+  }) as any
+
+  // Add blank tile
+  tilesetImages.push(tileMap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 1, 2, 0, { x: 0, y: -config.tile_size.y }))
+  const layer = tileMap.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer
+
+  layer.setDepth(0)
+  layer.setCullPadding(2, 2)
+
+  return layer
+}
+
+setLayerTiles(tileMap, tileLayer, zoneStore.zone?.tiles)
+
+onBeforeUnmount(() => {
+  tileMap.destroyLayer('tiles')
+  tileMap.removeAllLayers()
+  tileMap.destroy()
+})
+</script>

src/components/game/zone/partials/ZoneObject.vue

@@ -0,0 +1,41 @@
+<template>
+  <Image v-if="gameStore.getLoadedAsset(props.zoneObject.object.id)" v-bind="imageProps" />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Image, useScene } from 'phavuer'
+import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
+import { loadTexture } from '@/composables/gameComposable'
+import type { AssetDataT, ZoneObject } from '@/types'
+import { useGameStore } from '@/stores/gameStore'
+
+const props = defineProps<{
+  tilemap: Phaser.Tilemaps.Tilemap
+  zoneObject: ZoneObject
+}>()
+
+const gameStore = useGameStore()
+const scene = useScene()
+
+const imageProps = computed(() => ({
+  depth: calculateIsometricDepth(props.zoneObject.positionX, props.zoneObject.positionY, props.zoneObject.object.frameWidth, props.zoneObject.object.frameHeight),
+  x: tileToWorldX(props.tilemap, props.zoneObject.positionX, props.zoneObject.positionY),
+  y: tileToWorldY(props.tilemap, props.zoneObject.positionX, props.zoneObject.positionY),
+  flipX: props.zoneObject.isRotated,
+  texture: props.zoneObject.object.id,
+  originY: Number(props.zoneObject.object.originX),
+  originX: Number(props.zoneObject.object.originY)
+}))
+
+loadTexture(scene, {
+  key: props.zoneObject.object.id,
+  data: '/assets/objects/' + props.zoneObject.object.id + '.png',
+  group: 'objects',
+  updatedAt: props.zoneObject.object.updatedAt,
+  frameWidth: props.zoneObject.object.frameWidth,
+  frameHeight: props.zoneObject.object.frameHeight
+} as AssetDataT).catch((error) => {
+  console.error('Error loading texture:', error)
+})
+</script>

src/components/gameMaster/GmPanel.vue

@@ -1,11 +1,12 @@
 <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" :is-full-screen="true" :bg-style="'dark'">
     <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>
         <button @mousedown.stop class="btn-cyan py-1.5 px-4 min-w-24">Users</button>
         <button @mousedown.stop class="btn-cyan py-1.5 px-4 min-w-24">Chats</button>
         <button @mousedown.stop class="btn-cyan active py-1.5 px-4 min-w-24">Asset manager</button>
+        <button class="btn-cyan py-1.5 px-4 min-w-24" type="button" @click="() => zoneEditorStore.toggleActive()">Map editor</button>
       </div>
     </template>
     <template #modalBody>
@@ -21,8 +22,10 @@ import { ref } from 'vue'
 import Modal from '@/components/utilities/Modal.vue'
 import AssetManager from '@/components/gameMaster/assetManager/AssetManager.vue'
 import { useGameStore } from '@/stores/gameStore'
+import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 
 const gameStore = useGameStore()
+const zoneEditorStore = useZoneEditorStore()
 
 let toggle = ref('asset-manager')
 </script>

src/components/gameMaster/GmTools.vue

@@ -1,44 +0,0 @@
-<template>
-  <Modal :isModalOpen="true" :closable="false" :is-resizable="false" :modal-width="modalWidth" :modal-height="modalHeight" :modal-position-x="posXY.x" :modal-position-y="posXY.y">
-    <template #modalHeader>
-      <h3 class="m-0 font-medium shrink-0 text-white">GM tools</h3>
-    </template>
-    <template #modalBody>
-      <div class="content flex flex-col gap-2.5 m-4 h-20">
-        <button class="btn-cyan py-1.5 px-4 w-full" type="button" @click="gameStore.toggleGmPanel()">Toggle GM panel</button>
-        <button class="btn-cyan py-1.5 px-4 w-full" type="button" @click="() => zoneEditorStore.toggleActive()">Zone manager</button>
-      </div>
-    </template>
-  </Modal>
-</template>
-<script setup lang="ts">
-import Modal from '@/components/utilities/Modal.vue'
-import { useZoneEditorStore } from '@/stores/zoneEditorStore'
-import { useGameStore } from '@/stores/gameStore'
-import { onMounted, ref } from 'vue'
-
-const zoneEditorStore = useZoneEditorStore()
-const gameStore = useGameStore()
-const modalWidth = ref(200)
-const modalHeight = ref(170)
-
-let posXY = ref({ x: 0, y: 0 })
-
-onMounted(() => {
-  window.addEventListener('resize', () => {
-    posXY.value = customPositionGmPanel(modalWidth.value)
-  })
-})
-
-const customPositionGmPanel = (modalWidth: number) => {
-  const padding = 25
-  const width = window.innerWidth
-
-  const x = width - (modalWidth + 4) - 25
-  const y = padding
-
-  return { x, y }
-}
-
-posXY.value = customPositionGmPanel(modalWidth.value)
-</script>

src/components/gameMaster/assetManager/AssetManager.vue

@@ -1,53 +1,41 @@
 <template>
-  <div class="flex h-full w-full relative">
-    <div class="w-2/12 flex flex-col relative overflow-auto">
+  <div class="flex gap-4 h-[calc(100%_-_32px)] w-[calc(100%_-_32px)] relative m-4">
+    <div class="w-2/12 flex flex-col relative overflow-auto rounded-md border border-solid border-gray-500 bg-gray-700 p-2.5">
       <!-- Asset Categories -->
-      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'tiles' }" @click="() => (selectedCategory = 'tiles')">
-        <span :class="{ 'text-white': selectedCategory === 'tiles' }">Tiles</span>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
+      <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group" :class="{ 'bg-cyan': selectedCategory === 'tiles' }" @click="() => (selectedCategory = 'tiles')">
+        <span class="group-hover:text-white" :class="{ 'text-white': selectedCategory === 'tiles' }">Tiles</span>
       </a>
-      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'objects' }" @click="() => (selectedCategory = 'objects')">
-        <span :class="{ 'text-white': selectedCategory === 'objects' }">Objects</span>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
+      <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group" :class="{ 'bg-cyan': selectedCategory === 'objects' }" @click="() => (selectedCategory = 'objects')">
+        <span class="group-hover:text-white" :class="{ 'text-white': selectedCategory === 'objects' }">Objects</span>
       </a>
-      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'sprites' }" @click="() => (selectedCategory = 'sprites')">
-        <span :class="{ 'text-white': selectedCategory === 'sprites' }">Sprites</span>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
+      <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group" :class="{ 'bg-cyan': selectedCategory === 'sprites' }" @click="() => (selectedCategory = 'sprites')">
+        <span class="group-hover:text-white" :class="{ 'text-white': selectedCategory === 'sprites' }">Sprites</span>
       </a>
-      <a class="relative p-2.5 hover:cursor-pointer">
-        <span>Items</span>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
+      <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group">
+        <span class="group-hover:text-white">Items</span>
       </a>
-      <a class="relative p-2.5 hover:cursor-pointer">
-        <span>NPC's</span>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
+      <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group">
+        <span class="group-hover:text-white">NPC's</span>
       </a>
-      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'shops' }" @click="() => (selectedCategory = 'shops')">
-        <span :class="{ 'text-white': selectedCategory === 'shops' }">Shops</span>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
+      <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group" :class="{ 'bg-cyan/80': selectedCategory === 'shops' }" @click="() => (selectedCategory = 'shops')">
+        <span class="group-hover:text-white" :class="{ 'text-white': selectedCategory === 'shops' }">Shops</span>
       </a>
-      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'characterTypes' }" @click="() => (selectedCategory = 'characterTypes')">
-        <span :class="{ 'text-white': selectedCategory === 'characterTypes' }">Character types</span>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
+      <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group" :class="{ 'bg-cyan/80': selectedCategory === 'characterTypes' }" @click="() => (selectedCategory = 'characterTypes')">
+        <span class="group-hover:text-white" :class="{ 'text-white': selectedCategory === 'characterTypes' }">Character types</span>
       </a>
-      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'characterHair' }" @click="() => (selectedCategory = 'characterHair')">
-        <span :class="{ 'text-white': selectedCategory === 'characterHair' }">Character hair</span>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
+      <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group" :class="{ 'bg-cyan/80': selectedCategory === 'characterHair' }" @click="() => (selectedCategory = 'characterHair')">
+        <span class="group-hover:text-white" :class="{ 'text-white': selectedCategory === 'characterHair' }">Character hair</span>
       </a>
-      <a class="relative p-2.5 hover:cursor-pointer">
-        <span>Mounts</span>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
+      <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group">
+        <span class="group-hover:text-white">Mounts</span>
       </a>
-      <a class="relative p-2.5 hover:cursor-pointer">
-        <span>Pets</span>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
+      <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group">
+        <span class="group-hover:text-white">Pets</span>
       </a>
-      <a class="relative p-2.5 hover:cursor-pointer">
-        <span>Emoticons</span>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
+      <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group">
+        <span class="group-hover:text-white">Emoticons</span>
       </a>
     </div>
-    <div class="absolute w-px bg-gray-500 h-full top-0 left-1/6"></div>
 
     <!-- Assets list -->
     <div class="overflow-auto h-full w-4/12 flex flex-col relative">
@@ -55,16 +43,16 @@
       <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>
-
     <!-- Asset details -->
-    <div class="flex w-1/2 after:hidden flex-col relative overflow-auto">
+    <div class="flex w-4/12 after:hidden flex-col relative overflow-auto">
       <TileDetails v-if="selectedCategory === 'tiles' && assetManagerStore.selectedTile" />
       <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 +68,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="p-2.5 block rounded-md border border-solid border-gray-500 bg-gray-700">
+      <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 mb-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.5 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>
+  <div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md border border-solid border-gray-500 bg-gray-700" @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 rounded hover:bg-cyan group" :class="{ 'bg-cyan': assetManagerStore.selectedCharacterHair?.id === characterHair.id }" @click="assetManagerStore.setSelectedCharacterHair(characterHair as CharacterHair)">
+        <div class="flex items-center gap-2.5">
+          <span class="group-hover:text-white" :class="{ 'text-white': assetManagerStore.selectedCharacterHair?.id === characterHair.id }">{{ characterHair.name }}</span>
+        </div>
+      </a>
+    </div>
+    <div class="absolute w-12 h-12 bottom-2.5 right-2.5">
+      <button class="fixed 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>
+  </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

@@ -1,6 +1,6 @@
 <template>
   <div class="h-full overflow-auto">
-    <div class="m-2.5 p-2.5 block">
+    <div class="p-2.5 block rounded-md border border-solid border-gray-500 bg-gray-700">
       <form class="flex gap-2.5 flex-wrap" @submit.prevent="saveCharacterType">
         <div class="form-field-full">
           <label for="name">Name</label>
@@ -19,8 +19,18 @@
           </select>
         </div>
         <div class="form-field-full">
-          <label for="spriteId">Sprite ID</label>
-          <input v-model="characterSpriteId" class="input-field" type="text" name="spriteId" placeholder="Sprite ID" />
+          <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="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

@@ -1,28 +1,28 @@
 <template>
-  <div class="relative p-2.5 flex items-center gap-x-2.5">
+  <div class="relative mb-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">
+    <label for="create-character" class="bg-cyan text-white border border-solid border-white/25 rounded drop-shadow-20 p-2.5 inline-flex items-center justify-center hover:bg-cyan-800 hover:cursor-pointer">
       <button class="p-0 h-5" id="create-character" @click="createNewCharacterType">
         <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="containerProps" class="overflow-y-auto relative p-2.5 rounded-md border border-solid border-gray-500 bg-gray-700" @scroll="onScroll">
     <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)">
+      <a v-for="{ data: characterType } in list" :key="characterType.id" class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group" :class="{ 'bg-cyan': 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="group-hover:text-white" :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>
     </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">
+    <div class="absolute w-12 h-12 bottom-2.5 right-2.5">
+      <button class="fixed 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>
+  </div>
 </template>
 
 <script setup lang="ts">

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

@@ -1,12 +1,9 @@
 <template>
   <div class="h-full overflow-auto">
-    <div class="relative p-2.5 flex flex-col items-center justify-between h-72">
-      <div class="filler"></div>
+    <div class="relative p-2.5 flex flex-col items-center justify-center h-72 rounded-md border border-solid border-gray-500 bg-gray-700">
       <img class="max-h-56" :src="`${config.server_endpoint}/assets/objects/${selectedObject?.id}.png`" :alt="'Object ' + selectedObject?.id" />
-      <button class="btn-red px-4 py-1.5 min-w-24" type="button" @click.prevent="removeObject">Remove</button>
-      <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
     </div>
-    <div class="m-2.5 p-2.5 block">
+    <div class="mt-5 block">
       <form class="flex gap-2.5 flex-wrap" @submit.prevent="saveObject">
         <div class="form-field-full">
           <label for="name">Name</label>
@@ -43,7 +40,10 @@
           <label for="frame-height">Frame height</label>
           <input v-model="objectFrameHeight" class="input-field" type="number" step="any" name="frame-height" placeholder="Frame height" />
         </div>
+        <div class="flex gap-4">
           <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="removeObject">Delete</button>
+        </div>
       </form>
     </div>
   </div>

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

@@ -1,30 +1,30 @@
 <template>
-  <div class="relative p-2.5 flex items-center gap-x-2.5">
+  <div class="relative mb-5 flex items-center gap-x-2.5">
     <input v-model="searchQuery" class="input-field flex-grow" placeholder="Search..." @input="handleSearch" />
-    <label for="upload-asset" 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">
+    <label for="upload-asset" class="bg-cyan text-white border border-solid border-white/25 rounded drop-shadow-20 p-2.5 inline-flex items-center justify-center hover:bg-cyan-800 hover:cursor-pointer">
       <input class="hidden" id="upload-asset" ref="objectUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
       <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
       </svg>
     </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="containerProps" class="overflow-y-auto relative p-2.5 rounded-md border border-solid border-gray-500 bg-gray-700" @scroll="onScroll">
     <div v-bind="wrapperProps" ref="elementToScroll">
-      <a v-for="{ data: object } in list" :key="object.id" class="relative p-2.5 cursor-pointer block" :class="{ 'bg-cyan/80': assetManagerStore.selectedObject?.id === object.id }" @click="assetManagerStore.setSelectedObject(object as Object)">
+      <a v-for="{ data: object } in list" :key="object.id" class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group" :class="{ 'bg-cyan': assetManagerStore.selectedObject?.id === object.id }" @click="assetManagerStore.setSelectedObject(object as Object)">
         <div class="flex items-center gap-2.5">
           <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>
     </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">
+    <div class="absolute w-12 h-12 bottom-2.5 right-2.5">
+      <button class="fixed 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>
+  </div>
 </template>
 
 <script setup lang="ts">

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

@@ -1,7 +1,7 @@
 <template>
   <div class="h-full overflow-auto">
-    <div class="relative p-4 flex flex-col">
-      <div class="flex flex-wrap gap-2">
+    <div class="relative flex flex-col">
+      <div class="flex flex-wrap gap-2 p-2.5 rounded-md border border-solid border-gray-500 bg-gray-700">
         <div class="w-full flex flex-col">
           <label class="mb-1.5 font-titles" for="name">Name</label>
           <input v-model="spriteName" class="input-field" type="text" name="name" placeholder="New sprite" />
@@ -10,7 +10,6 @@
         <div class="w-full flex gap-2 mt-2 pb-4 relative">
           <button class="btn-cyan px-4 py-2 flex-1 sm:flex-none sm:min-w-24" type="button" @click.prevent="saveSprite">Save</button>
           <button class="btn-red px-4 py-2 flex-1 sm:flex-none sm:min-w-24" type="button" @click.prevent="deleteSprite">Delete</button>
-          <div class="w-[calc(100%_+_32px)] absolute left-[-15px] bottom-0 h-px bg-gray-500"></div>
         </div>
       </div>
 

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

@@ -1,26 +1,26 @@
 <template>
-  <div class="relative p-2.5 flex items-center gap-x-2.5">
+  <div class="relative mb-5 flex items-center gap-x-2.5">
     <input v-model="searchQuery" class="input-field flex-grow" placeholder="Search..." @input="handleSearch" />
-    <button @click.prevent="newButtonClickHandler" 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 @click.prevent="newButtonClickHandler" class="bg-cyan text-white border border-solid border-white/25 rounded drop-shadow-20 p-2.5 inline-flex items-center justify-center hover:bg-cyan-800 hover:cursor-pointer">
       <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
       </svg>
     </button>
-    <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="containerProps" class="overflow-y-auto relative p-2.5 rounded-md border border-solid border-gray-500 bg-gray-700" @scroll="onScroll">
     <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)">
+      <a v-for="{ data: sprite } in list" :key="sprite.id" class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group" :class="{ 'bg-cyan': 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>
     </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">
+    <div class="absolute w-12 h-12 bottom-2.5 right-2.5">
+      <button class="fixed 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>
+  </div>
 </template>
 
 <script setup lang="ts">

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

@@ -1,14 +1,21 @@
 <template>
   <div class="flex flex-wrap gap-3">
-    <div v-for="(image, index) in modelValue" :key="index" class="h-20 w-20 p-4 bg-gray-50 bg-opacity-50 rounded text-center relative group cursor-move" draggable="true" @dragstart="dragStart($event, index)" @dragover.prevent @dragenter.prevent @drop="drop($event, index)">
+    <div v-for="(image, index) in modelValue" :key="index" class="h-20 w-20 p-4 bg-gray-300 bg-opacity-50 rounded text-center relative group cursor-move" draggable="true" @dragstart="dragStart($event, index)" @dragover.prevent @dragenter.prevent @drop="drop($event, index)">
       <img :src="image" class="max-w-full max-h-full object-contain pointer-events-none" alt="Uploaded image" />
-      <button @click.stop="deleteImage(index)" class="absolute top-1 right-1 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity" aria-label="Delete image">
+      <div class="absolute top-1 left-1 flex-row space-y-1">
+        <button @click.stop="deleteImage(index)" class="bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity" aria-label="Delete image">
           <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
           </svg>
         </button>
+        <button class="bg-blue-500 text-white rounded-full w-6 h-6 flex items-center justify-center cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity" aria-label="Scope image">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+          </svg>
+        </button>
       </div>
-    <div class="h-20 w-20 p-4 bg-gray-100 bg-opacity-50 rounded justify-center items-center flex hover:cursor-pointer" @click="triggerFileInput" @drop.prevent="onDrop" @dragover.prevent>
+    </div>
+    <div class="h-20 w-20 p-4 bg-gray-200 bg-opacity-50 rounded justify-center items-center flex hover:cursor-pointer" @click="triggerFileInput" @drop.prevent="onDrop" @dragover.prevent>
       <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 invert" fill="none" viewBox="0 0 24 24" stroke="currentColor">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
       </svg>

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

@@ -1,12 +1,9 @@
 <template>
   <div class="h-full overflow-auto">
-    <div class="relative p-2.5 flex flex-col items-center justify-between h-72">
-      <div class="filler"></div>
+    <div class="relative p-2.5 flex flex-col items-center justify-center h-72 rounded-md border border-solid border-gray-500 bg-gray-700">
       <img class="max-h-72" :src="`${config.server_endpoint}/assets/tiles/${selectedTile?.id}.png`" :alt="'Tile ' + selectedTile?.id" />
-      <button class="btn-red px-4 py-1.5 min-w-24" type="button" @click.prevent="deleteTile">Delete</button>
-      <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
     </div>
-    <div class="m-2.5 p-2.5 block">
+    <div class="mt-5 block">
       <form class="flex gap-2.5 flex-wrap" @submit.prevent="saveTile">
         <div class="form-field-full">
           <label for="name">Name</label>
@@ -16,7 +13,10 @@
           <label for="origin-x">Tags</label>
           <ChipsInput v-model="tileTags" @update:modelValue="tileTags = $event" />
         </div>
+        <div class="flex gap-4">
           <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="deleteTile">Delete</button>
+        </div>
       </form>
     </div>
   </div>

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

@@ -1,30 +1,30 @@
 <template>
-  <div class="relative p-2.5 flex items-center gap-x-2.5">
+  <div class="relative mb-5 flex items-center gap-x-2.5">
     <input v-model="searchQuery" class="input-field flex-grow" placeholder="Search..." @input="handleSearch" />
-    <label for="upload-asset" 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">
+    <label for="upload-asset" class="bg-cyan text-white border border-solid border-white/25 rounded p-2.5 inline-flex items-center justify-center hover:bg-cyan-800 hover:cursor-pointer">
       <input class="hidden" id="upload-asset" ref="tileUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
       <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
       </svg>
     </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="containerProps" class="overflow-y-auto relative p-2.5 rounded-md border border-solid border-gray-500 bg-gray-700" @scroll="onScroll">
     <div v-bind="wrapperProps" ref="elementToScroll">
-      <a v-for="{ data: tile } in list" :key="tile.id" class="relative p-2.5 cursor-pointer block" :class="{ 'bg-cyan/80': assetManagerStore.selectedTile?.id === tile.id }" @click="assetManagerStore.setSelectedTile(tile)">
+      <a v-for="{ data: tile } in list" :key="tile.id" class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group" :class="{ 'bg-cyan': assetManagerStore.selectedTile?.id === tile.id }" @click="assetManagerStore.setSelectedTile(tile)">
         <div class="flex items-center gap-2.5">
           <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="group-hover:text-white" :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>
     </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">
+    <div class="absolute w-12 h-12 bottom-2.5 right-2.5">
+      <button class="fixed 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>
+  </div>
 </template>
 
 <script setup lang="ts">

src/components/gameMaster/zoneEditor/Tiles.vue

@@ -1,146 +0,0 @@
-<template>
-  <Controls :layer="tiles" :depth="0" />
-</template>
-
-<script setup lang="ts">
-import config from '@/config'
-import { useScene } from 'phavuer'
-import { useGameStore } from '@/stores/gameStore'
-import { useZoneEditorStore } from '@/stores/zoneEditorStore'
-import { onBeforeMount, onBeforeUnmount } from 'vue'
-import { createTileArray, getTile, placeTile, setLayerTiles } from '@/composables/zoneComposable'
-import Controls from '@/components/utilities/Controls.vue'
-
-const emit = defineEmits(['tilemap:create'])
-
-const scene = useScene()
-const gameStore = useGameStore()
-const zoneEditorStore = useZoneEditorStore()
-
-const zoneTilemap = createTilemap()
-const tiles = createTileLayer()
-
-function createTilemap() {
-  const zoneData = new Phaser.Tilemaps.MapData({
-    width: zoneEditorStore.zone?.width,
-    height: zoneEditorStore.zone?.height,
-    tileWidth: config.tile_size.x,
-    tileHeight: config.tile_size.y,
-    orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
-    format: Phaser.Tilemaps.Formats.ARRAY_2D
-  })
-  const tilemap = new Phaser.Tilemaps.Tilemap(scene, zoneData)
-  emit('tilemap:create', tilemap)
-  return tilemap
-}
-
-function createTileLayer() {
-  const tilesetImages = gameStore.assets.filter((asset) => asset.group === 'tiles').map((asset, index) => zoneTilemap.addTilesetImage(asset.key, asset.key, config.tile_size.x, config.tile_size.y, 1, 2, index + 1, { x: 0, y: -config.tile_size.y }))
-  tilesetImages.push(zoneTilemap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 1, 2, 0, { x: 0, y: -config.tile_size.y }))
-
-  const layer = zoneTilemap.createBlankLayer('tiles', tilesetImages as any, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer
-
-  layer.setDepth(0)
-  layer.setCullPadding(2, 2)
-
-  return layer
-}
-
-function pencil(pointer: Phaser.Input.Pointer) {
-  // Check if zone is set
-  if (!zoneEditorStore.zone) return
-
-  // Check if tool is pencil
-  if (zoneEditorStore.tool !== 'pencil') return
-
-  // Check if draw mode is tile
-  if (zoneEditorStore.drawMode !== 'tile') return
-
-  // Check if there is a selected tile
-  if (!zoneEditorStore.selectedTile) return
-
-  // Check if left mouse button is pressed
-  if (!pointer.isDown) return
-
-  // Check if shift is not pressed, this means we are moving the camera
-  if (pointer.event.shiftKey) return
-
-  // Check if there is a tile
-  const tile = getTile(tiles, pointer.worldX, pointer.worldY)
-  if (!tile) return
-
-  // Place tile
-  placeTile(zoneTilemap, tiles, tile.x, tile.y, zoneEditorStore.selectedTile.id)
-
-  // Adjust zoneEditorStore.zone.tiles
-  zoneEditorStore.zone.tiles[tile.y][tile.x] = zoneEditorStore.selectedTile.id
-}
-
-function eraser(pointer: Phaser.Input.Pointer) {
-  // Check if zone is set
-  if (!zoneEditorStore.zone) return
-
-  // Check if tool is pencil
-  if (zoneEditorStore.tool !== 'eraser') return
-
-  // Check if draw mode is tile
-  if (zoneEditorStore.eraserMode !== 'tile') return
-
-  // Check if left mouse button is pressed
-  if (!pointer.isDown) return
-
-  // Check if shift is not pressed, this means we are moving the camera
-  if (pointer.event.shiftKey) return
-
-  // Check if there is a tile
-  const tile = getTile(tiles, pointer.worldX, pointer.worldY)
-  if (!tile) return
-
-  // Place tile
-  placeTile(zoneTilemap, tiles, tile.x, tile.y, 'blank_tile')
-
-  // Adjust zoneEditorStore.zone.tiles
-  zoneEditorStore.zone.tiles[tile.y][tile.x] = 'blank_tile'
-}
-
-function paint(pointer: Phaser.Input.Pointer) {
-  // Check if zone is set
-  if (!zoneEditorStore.zone) return
-
-  // Check if tool is pencil
-  if (zoneEditorStore.tool !== 'paint') return
-
-  // Check if there is a selected tile
-  if (!zoneEditorStore.selectedTile) return
-
-  // Check if left mouse button is pressed
-  if (!pointer.isDown) return
-
-  // Set new tileArray with selected tile
-  setLayerTiles(zoneTilemap, tiles, createTileArray(zoneTilemap.width, zoneTilemap.height, zoneEditorStore.selectedTile.id))
-
-  // Adjust zoneEditorStore.zone.tiles
-  zoneEditorStore.zone.tiles = createTileArray(zoneTilemap.width, zoneTilemap.height, zoneEditorStore.selectedTile.id)
-}
-
-onBeforeMount(() => {
-  if (!zoneEditorStore.zone?.tiles) {
-    return
-  }
-  setLayerTiles(zoneTilemap, tiles, zoneEditorStore.zone.tiles)
-
-  scene.input.on(Phaser.Input.Events.POINTER_MOVE, pencil)
-  scene.input.on(Phaser.Input.Events.POINTER_MOVE, eraser)
-  scene.input.on(Phaser.Input.Events.POINTER_DOWN, paint)
-})
-
-onBeforeUnmount(() => {
-  scene.input.off(Phaser.Input.Events.POINTER_MOVE, pencil)
-  scene.input.off(Phaser.Input.Events.POINTER_MOVE, eraser)
-  scene.input.off(Phaser.Input.Events.POINTER_DOWN, paint)
-
-  zoneTilemap.destroyLayer('tiles')
-  zoneTilemap.removeAllLayers()
-  zoneTilemap.destroy()
-})
-</script>

src/components/gameMaster/zoneEditor/ZoneEditor.vue

@@ -1,9 +1,9 @@
 <template>
-  <Tiles @tilemap:create="tileMap = $event" />
-  <Objects v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
-  <EventTiles v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
+  <ZoneTiles @tileMap:create="tileMap = $event" />
+  <ZoneObjects v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
+  <ZoneEventTiles v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
 
-  <Toolbar @save="save" />
+  <Toolbar @save="save" @clear="clear" />
 
   <ZoneList />
   <TileList />
@@ -18,7 +18,6 @@ import { onUnmounted, ref } from 'vue'
 import { useGameStore } from '@/stores/gameStore'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import { type Zone } from '@/types'
-
 // Components
 import Toolbar from '@/components/gameMaster/zoneEditor/partials/Toolbar.vue'
 import TileList from '@/components/gameMaster/zoneEditor/partials/TileList.vue'
@@ -26,15 +25,24 @@ import ObjectList from '@/components/gameMaster/zoneEditor/partials/ObjectList.v
 import ZoneSettings from '@/components/gameMaster/zoneEditor/partials/ZoneSettings.vue'
 import ZoneList from '@/components/gameMaster/zoneEditor/partials/ZoneList.vue'
 import TeleportModal from '@/components/gameMaster/zoneEditor/partials/TeleportModal.vue'
-import Tiles from '@/components/gameMaster/zoneEditor/Tiles.vue'
-import Objects from '@/components/gameMaster/zoneEditor/Objects.vue'
-import EventTiles from '@/components/gameMaster/zoneEditor/EventTiles.vue'
+import ZoneTiles from '@/components/gameMaster/zoneEditor/zonePartials/ZoneTiles.vue'
+import ZoneObjects from '@/components/gameMaster/zoneEditor/zonePartials/ZoneObjects.vue'
+import ZoneEventTiles from '@/components/gameMaster/zoneEditor/zonePartials/ZoneEventTiles.vue'
 
 const gameStore = useGameStore()
 const zoneEditorStore = useZoneEditorStore()
 
 const tileMap = ref(null as Phaser.Tilemaps.Tilemap | null)
 
+function clear() {
+  if (!zoneEditorStore.zone) return
+
+  // Clear objects, event tiles and tiles
+  zoneEditorStore.zone.zoneObjects = []
+  zoneEditorStore.zone.zoneEventTiles = []
+  zoneEditorStore.triggerClearTiles()
+}
+
 function save() {
   if (!zoneEditorStore.zone) return
 

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" :bg-style="'none'">
     <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)" :bg-style="'none'">
     <template #modalHeader>
       <h3 class="text-lg text-white">Objects</h3>
     </template>
@@ -42,23 +42,18 @@
 
 <script setup lang="ts">
 import config from '@/config'
-import { ref, onMounted, computed, watch } from 'vue'
+import { ref, onMounted, computed } from 'vue'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import { useGameStore } from '@/stores/gameStore'
 import Modal from '@/components/utilities/Modal.vue'
-import type { Object } from '@/types'
+import type { Object, ZoneObject } from '@/types'
 
 const gameStore = useGameStore()
 const isModalOpen = ref(false)
 const zoneEditorStore = useZoneEditorStore()
 const searchQuery = ref('')
-// const objectDepth = ref(0)
 const selectedTags = ref<string[]>([])
 
-// watch(objectDepth, (depth) => {
-//   zoneEditorStore.setObjectDepth(depth)
-// })
-
 const uniqueTags = computed(() => {
   const allTags = zoneEditorStore.objectList.flatMap((obj) => obj.tags || [])
   return Array.from(new Set(allTags))
@@ -81,8 +76,6 @@ const toggleTag = (tag: string) => {
 }
 
 onMounted(async () => {
-  zoneEditorStore.setObjectDepth(0)
-
   isModalOpen.value = true
   gameStore.connection?.emit('gm:object:list', {}, (response: Object[]) => {
     zoneEditorStore.setObjectList(response)

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" :bg-style="'none'">
     <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)" :bg-style="'none'">
     <template #modalHeader>
       <h3 class="text-lg text-white">Tiles</h3>
     </template>
@@ -52,7 +52,7 @@
                 class="max-w-full max-h-full border-2 border-solid cursor-pointer transition-all duration-300"
                 :src="`${config.server_endpoint}/assets/tiles/${selectedGroup.parent.id}.png`"
                 :alt="selectedGroup.parent.name"
-                @click="selectTile(selectedGroup.parent)"
+                @click="selectTile(selectedGroup.parent.id)"
                 :class="{
                   'border-cyan shadow-lg scale-105': isActiveTile(selectedGroup.parent),
                   'border-transparent hover:border-gray-300': !isActiveTile(selectedGroup.parent)
@@ -65,7 +65,7 @@
                 class="max-w-full max-h-full border-2 border-solid cursor-pointer transition-all duration-300"
                 :src="`${config.server_endpoint}/assets/tiles/${childTile.id}.png`"
                 :alt="childTile.name"
-                @click="selectTile(childTile)"
+                @click="selectTile(childTile.id)"
                 :class="{
                   'border-cyan shadow-lg scale-105': isActiveTile(childTile),
                   'border-transparent hover:border-gray-300': !isActiveTile(childTile)
@@ -218,12 +218,12 @@ function closeGroup() {
   selectedGroup.value = null
 }
 
-function selectTile(tile: Tile) {
+function selectTile(tile: string) {
   zoneEditorStore.setSelectedTile(tile)
 }
 
 function isActiveTile(tile: Tile): boolean {
-  return zoneEditorStore.selectedTile?.id === tile.id
+  return zoneEditorStore.selectedTile === tile.id
 }
 
 onMounted(async () => {

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" :bg-style="'none'">
     <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="430" :bg-style="'none'">
     <template #modalHeader>
       <h3 class="m-0 font-medium shrink-0 text-white">Zone settings</h3>
     </template>

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

@@ -8,7 +8,7 @@ import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import { Image, useScene } from 'phavuer'
 import { getTile, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
 import { uuidv4 } from '@/utilities'
-import { onBeforeMount, onBeforeUnmount } from 'vue'
+import { onMounted, onUnmounted } from 'vue'
 
 const scene = useScene()
 const zoneEditorStore = useZoneEditorStore()
@@ -102,14 +102,14 @@ function eraser(pointer: Phaser.Input.Pointer) {
   zoneEditorStore.zone.zoneEventTiles = zoneEditorStore.zone.zoneEventTiles.filter((eventTile) => eventTile.id !== existingEventTile.id)
 }
 
-onBeforeMount(() => {
+onMounted(() => {
   scene.input.on(Phaser.Input.Events.POINTER_DOWN, pencil)
   scene.input.on(Phaser.Input.Events.POINTER_MOVE, pencil)
   scene.input.on(Phaser.Input.Events.POINTER_DOWN, eraser)
   scene.input.on(Phaser.Input.Events.POINTER_MOVE, eraser)
 })
 
-onBeforeUnmount(() => {
+onUnmounted(() => {
   scene.input.off(Phaser.Input.Events.POINTER_DOWN, pencil)
   scene.input.off(Phaser.Input.Events.POINTER_MOVE, pencil)
   scene.input.off(Phaser.Input.Events.POINTER_DOWN, eraser)

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

@@ -0,0 +1,45 @@
+<template>
+  <Image v-if="gameStore.getLoadedAsset(props.zoneObject.object.id)" v-bind="imageProps" />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Image, useScene } from 'phavuer'
+import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
+import { loadTexture } from '@/composables/gameComposable'
+import type { AssetDataT, ZoneObject } from '@/types'
+import { useGameStore } from '@/stores/gameStore'
+
+const props = defineProps<{
+  tilemap: Phaser.Tilemaps.Tilemap
+  zoneObject: ZoneObject
+  selectedZoneObject: ZoneObject | null
+  movingZoneObject: ZoneObject | null
+}>()
+
+const gameStore = useGameStore()
+const scene = useScene()
+
+const imageProps = computed(() => ({
+  alpha: props.movingZoneObject?.id === props.zoneObject.id ? 0.5 : 1,
+  tint: props.selectedZoneObject?.id === props.zoneObject.id ? 0x00ff00 : 0xffffff,
+  depth: calculateIsometricDepth(props.zoneObject.positionX, props.zoneObject.positionY, props.zoneObject.object.frameWidth, props.zoneObject.object.frameHeight),
+  x: tileToWorldX(props.tilemap, props.zoneObject.positionX, props.zoneObject.positionY),
+  y: tileToWorldY(props.tilemap, props.zoneObject.positionX, props.zoneObject.positionY),
+  flipX: props.zoneObject.isRotated,
+  texture: props.zoneObject.object.id,
+  originY: Number(props.zoneObject.object.originX),
+  originX: Number(props.zoneObject.object.originY)
+}))
+
+loadTexture(scene, {
+  key: props.zoneObject.object.id,
+  data: '/assets/objects/' + props.zoneObject.object.id + '.png',
+  group: 'objects',
+  updatedAt: props.zoneObject.object.updatedAt,
+  frameWidth: props.zoneObject.object.frameWidth,
+  frameHeight: props.zoneObject.object.frameHeight
+} as AssetDataT).catch((error) => {
+  console.error('Error loading texture:', error)
+})
+</script>

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

@@ -1,40 +1,27 @@
 <template>
-  <SelectedZoneObject v-if="selectedZoneObject" :zoneObject="selectedZoneObject" @move="moveZoneObject" @rotate="rotateZoneObject" @delete="deleteZoneObject" />
-  <Image v-for="object in zoneEditorStore.zone?.zoneObjects" v-bind="getImageProps(object)" @pointerup="() => (selectedZoneObject = object)" />
+  <SelectedZoneObject v-if="selectedZoneObject" :zoneObject="selectedZoneObject" :movingZoneObject="movingZoneObject" @move="moveZoneObject" @rotate="rotateZoneObject" @delete="deleteZoneObject" />
+  <ZoneObject v-for="zoneObject in zoneEditorStore.zone?.zoneObjects" :tilemap="tilemap" :zoneObject :selectedZoneObject :movingZoneObject @pointerup="clickZoneObject(zoneObject)" />
 </template>
 
 <script setup lang="ts">
 import { uuidv4 } from '@/utilities'
-import { calculateIsometricDepth, getTile, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
-import { Image, useScene } from 'phavuer'
+import { getTile } from '@/composables/zoneComposable'
+import { useScene } from 'phavuer'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
-import type { ZoneObject } from '@/types'
 import SelectedZoneObject from '@/components/gameMaster/zoneEditor/partials/SelectedZoneObject.vue'
-import { onBeforeMount, onBeforeUnmount, ref, watch } from 'vue'
+import { onMounted, onUnmounted, ref, watch } from 'vue'
+import ZoneObject from '@/components/gameMaster/zoneEditor/zonePartials/ZoneObject.vue'
+import type { ZoneObject as ZoneObjectT } from '@/types'
 
 const scene = useScene()
 const zoneEditorStore = useZoneEditorStore()
-const selectedZoneObject = ref<ZoneObject | null>(null)
-const movingZoneObject = ref<ZoneObject | null>(null)
+const selectedZoneObject = ref<ZoneObjectT | null>(null)
+const movingZoneObject = ref<ZoneObjectT | null>(null)
 
 const props = defineProps<{
   tilemap: Phaser.Tilemaps.Tilemap
 }>()
 
-function getImageProps(zoneObject: ZoneObject) {
-  return {
-    alpha: zoneObject.id === movingZoneObject.value?.id ? 0.5 : 1,
-    depth: calculateIsometricDepth(zoneObject.positionX, zoneObject.positionY, zoneObject.object.frameWidth, zoneObject.object.frameHeight),
-    tint: selectedZoneObject.value?.id === zoneObject.id ? 0x00ff00 : 0xffffff,
-    x: tileToWorldX(props.tilemap, zoneObject.positionX, zoneObject.positionY),
-    y: tileToWorldY(props.tilemap, zoneObject.positionX, zoneObject.positionY),
-    flipX: zoneObject.isRotated,
-    texture: zoneObject.object.id,
-    originY: Number(zoneObject.object.originX),
-    originX: Number(zoneObject.object.originY)
-  }
-}
-
 function pencil(pointer: Phaser.Input.Pointer) {
   // Check if zone is set
   if (!zoneEditorStore.zone) return
@@ -54,6 +41,9 @@ function pencil(pointer: Phaser.Input.Pointer) {
   // Check if shift is not pressed, this means we are moving the camera
   if (pointer.event.shiftKey) return
 
+  // Check if alt is pressed, this means we are selecting the object
+  if (pointer.event.altKey) return
+
   // Check if there is a tile
   const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
   if (!tile) return
@@ -75,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) {
@@ -94,6 +84,9 @@ function eraser(pointer: Phaser.Input.Pointer) {
   // Check if shift is not pressed, this means we are moving the camera
   if (pointer.event.shiftKey) return
 
+  // Check if alt is pressed, this means we are selecting the object
+  if (pointer.event.altKey) return
+
   // Check if there is a tile
   const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
   if (!tile) return
@@ -106,11 +99,42 @@ function eraser(pointer: Phaser.Input.Pointer) {
   zoneEditorStore.zone.zoneObjects = zoneEditorStore.zone.zoneObjects.filter((object) => object.id !== existingObject.id)
 }
 
+function objectPicker(pointer: Phaser.Input.Pointer) {
+  // Check if zone is set
+  if (!zoneEditorStore.zone) return
+
+  // Check if tool is pencil
+  if (zoneEditorStore.tool !== 'pencil') return
+
+  // Check if draw mode is object
+  if (zoneEditorStore.drawMode !== 'object') return
+
+  // Check if left mouse button is pressed
+  if (!pointer.isDown) return
+
+  // Check if shift is not pressed, this means we are moving the camera
+  if (pointer.event.shiftKey) return
+
+  // If alt is not pressed, return
+  if (!pointer.event.altKey) return
+
+  // Check if there is a tile
+  const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
+  if (!tile) return
+
+  // Check if object already exists on position
+  const existingObject = zoneEditorStore.zone.zoneObjects.find((object) => object.positionX === tile.x && object.positionY === tile.y)
+  if (!existingObject) return
+
+  // Select the object
+  zoneEditorStore.setSelectedObject(existingObject)
+}
+
 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
@@ -155,18 +179,29 @@ function deleteZoneObject(id: string) {
   selectedZoneObject.value = null
 }
 
-onBeforeMount(() => {
+function clickZoneObject(zoneObject: ZoneObjectT) {
+  selectedZoneObject.value = zoneObject
+
+  // If alt is pressed, select the object
+  if (scene.input.activePointer.event.altKey) {
+    zoneEditorStore.setSelectedObject(zoneObject.object)
+  }
+}
+
+onMounted(() => {
   scene.input.on(Phaser.Input.Events.POINTER_DOWN, pencil)
   scene.input.on(Phaser.Input.Events.POINTER_MOVE, pencil)
   scene.input.on(Phaser.Input.Events.POINTER_DOWN, eraser)
   scene.input.on(Phaser.Input.Events.POINTER_MOVE, eraser)
+  scene.input.on(Phaser.Input.Events.POINTER_DOWN, objectPicker)
 })
 
-onBeforeUnmount(() => {
+onUnmounted(() => {
   scene.input.off(Phaser.Input.Events.POINTER_DOWN, pencil)
   scene.input.off(Phaser.Input.Events.POINTER_MOVE, pencil)
   scene.input.off(Phaser.Input.Events.POINTER_DOWN, eraser)
   scene.input.off(Phaser.Input.Events.POINTER_MOVE, eraser)
+  scene.input.off(Phaser.Input.Events.POINTER_DOWN, objectPicker)
 })
 
 // watch zoneEditorStore.objectList and update originX and originY of objects in zoneObjects

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

@@ -0,0 +1,227 @@
+<template>
+  <Controls :layer="tileLayer" :depth="0" />
+</template>
+
+<script setup lang="ts">
+import config from '@/config'
+import { useScene } from 'phavuer'
+import { useZoneEditorStore } from '@/stores/zoneEditorStore'
+import { onMounted, onUnmounted, watch } from 'vue'
+import { createTileArray, getTile, placeTile, setLayerTiles } from '@/composables/zoneComposable'
+import Controls from '@/components/utilities/Controls.vue'
+import { useGameStore } from '@/stores/gameStore'
+import type { AssetDataT } from '@/types'
+
+const emit = defineEmits(['tileMap:create'])
+
+const scene = useScene()
+const gameStore = useGameStore()
+const zoneEditorStore = useZoneEditorStore()
+const tileMap = createTileMap()
+const tileLayer = createTileLayer()
+
+/**
+ * A Tilemap is a container for Tilemap data.
+ * This isn't a display object, rather, it holds data about the map and allows you to add tilesets and tilemap layers to it.
+ * A map can have one or more tilemap layers, which are the display objects that actually render the tiles.
+ */
+function createTileMap() {
+  const zoneData = new Phaser.Tilemaps.MapData({
+    width: zoneEditorStore.zone?.width,
+    height: zoneEditorStore.zone?.height,
+    tileWidth: config.tile_size.x,
+    tileHeight: config.tile_size.y,
+    orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
+    format: Phaser.Tilemaps.Formats.ARRAY_2D
+  })
+
+  const newTileMap = new Phaser.Tilemaps.Tilemap(scene, zoneData)
+  emit('tileMap:create', newTileMap)
+
+  return newTileMap
+}
+
+/**
+ * A Tileset is a combination of a single image containing the tiles and a container for data about each tile.
+ */
+function createTileLayer() {
+  const tilesArray = gameStore.getLoadedAssetsByGroup('tiles')
+
+  const tilesetImages = Array.from(tilesArray).map((tile: AssetDataT, index: number) => {
+    return tileMap.addTilesetImage(tile.key, tile.key, config.tile_size.x, config.tile_size.y, 1, 2, index + 1, { x: 0, y: -config.tile_size.y })
+  }) as any
+
+  // Add blank tile
+  tilesetImages.push(tileMap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 1, 2, 0, { x: 0, y: -config.tile_size.y }))
+  const layer = tileMap.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer
+
+  layer.setDepth(0)
+  layer.setCullPadding(2, 2)
+
+  return layer
+}
+
+function pencil(pointer: Phaser.Input.Pointer) {
+  // Check if zone is set
+  if (!zoneEditorStore.zone) return
+
+  // Check if tool is pencil
+  if (zoneEditorStore.tool !== 'pencil') return
+
+  // Check if draw mode is tile
+  if (zoneEditorStore.drawMode !== 'tile') return
+
+  // Check if there is a selected tile
+  if (!zoneEditorStore.selectedTile) return
+
+  // Check if left mouse button is pressed
+  if (!pointer.isDown) return
+
+  // Check if shift is not pressed, this means we are moving the camera
+  if (pointer.event.shiftKey) return
+
+  // Check if there is a tile
+  const tile = getTile(tileLayer, pointer.worldX, pointer.worldY)
+  if (!tile) return
+
+  // Place tile
+  placeTile(tileMap, tileLayer, tile.x, tile.y, zoneEditorStore.selectedTile)
+
+  // Adjust zoneEditorStore.zone.tiles
+  zoneEditorStore.zone.tiles[tile.y][tile.x] = zoneEditorStore.selectedTile
+}
+
+function eraser(pointer: Phaser.Input.Pointer) {
+  // Check if zone is set
+  if (!zoneEditorStore.zone) return
+
+  // Check if tool is pencil
+  if (zoneEditorStore.tool !== 'eraser') return
+
+  // Check if draw mode is tile
+  if (zoneEditorStore.eraserMode !== 'tile') return
+
+  // Check if left mouse button is pressed
+  if (!pointer.isDown) return
+
+  // Check if shift is not pressed, this means we are moving the camera
+  if (pointer.event.shiftKey) return
+
+  // Check if alt is pressed
+  if (pointer.event.altKey) return
+
+  // Check if there is a tile
+  const tile = getTile(tileLayer, pointer.worldX, pointer.worldY)
+  if (!tile) return
+
+  // Place tile
+  placeTile(tileMap, tileLayer, tile.x, tile.y, 'blank_tile')
+
+  // Adjust zoneEditorStore.zone.tiles
+  zoneEditorStore.zone.tiles[tile.y][tile.x] = 'blank_tile'
+}
+
+function paint(pointer: Phaser.Input.Pointer) {
+  // Check if zone is set
+  if (!zoneEditorStore.zone) return
+
+  // Check if tool is pencil
+  if (zoneEditorStore.tool !== 'paint') return
+
+  // Check if there is a selected tile
+  if (!zoneEditorStore.selectedTile) return
+
+  // Check if left mouse button is pressed
+  if (!pointer.isDown) return
+
+  // Check if shift is not pressed, this means we are moving the camera
+  if (pointer.event.shiftKey) return
+
+  // Check if alt is pressed
+  if (pointer.event.altKey) return
+
+  // Set new tileArray with selected tile
+  setLayerTiles(tileMap, tileLayer, createTileArray(tileMap.width, tileMap.height, zoneEditorStore.selectedTile))
+
+  // Adjust zoneEditorStore.zone.tiles
+  zoneEditorStore.zone.tiles = createTileArray(tileMap.width, tileMap.height, zoneEditorStore.selectedTile)
+}
+
+// When alt is pressed, and the pointer is down, select the tile that the pointer is over
+function tilePicker(pointer: Phaser.Input.Pointer) {
+  // Check if zone is set
+  if (!zoneEditorStore.zone) return
+
+  // Check if tool is pencil
+  if (zoneEditorStore.tool !== 'pencil') return
+
+  // Check if draw mode is tile
+  if (zoneEditorStore.drawMode !== 'tile') return
+
+  // Check if left mouse button is pressed
+  if (!pointer.isDown) return
+
+  // Check if shift is not pressed, this means we are moving the camera
+  if (pointer.event.shiftKey) return
+
+  // Check if alt is pressed
+  if (!pointer.event.altKey) return
+
+  // Check if there is a tile
+  const tile = getTile(tileLayer, pointer.worldX, pointer.worldY)
+  if (!tile) return
+
+  // Select the tile
+  zoneEditorStore.setSelectedTile(zoneEditorStore.zone.tiles[tile.y][tile.x])
+}
+
+watch(
+  () => zoneEditorStore.shouldClearTiles,
+  (shouldClear) => {
+    if (shouldClear && zoneEditorStore.zone) {
+      const blankTiles = createTileArray(tileMap.width, tileMap.height, 'blank_tile')
+      setLayerTiles(tileMap, tileLayer, blankTiles)
+      zoneEditorStore.zone.tiles = blankTiles
+      zoneEditorStore.resetClearTilesFlag()
+    }
+  }
+)
+
+onMounted(() => {
+  if (!zoneEditorStore.zone?.tiles) {
+    return
+  }
+
+  // First fill the entire map with blank tiles using current zone dimensions
+  const blankTiles = createTileArray(zoneEditorStore.zone.width, zoneEditorStore.zone.height, 'blank_tile')
+
+  // Then overlay the zone tiles, but only within the current zone dimensions
+  const zoneTiles = zoneEditorStore.zone.tiles
+  for (let y = 0; y < zoneEditorStore.zone.height; y++) {
+    for (let x = 0; x < zoneEditorStore.zone.width; x++) {
+      // Only copy if the source tiles array has this position
+      if (zoneTiles[y] && zoneTiles[y][x] !== undefined) {
+        blankTiles[y][x] = zoneTiles[y][x]
+      }
+    }
+  }
+
+  setLayerTiles(tileMap, tileLayer, blankTiles)
+
+  scene.input.on(Phaser.Input.Events.POINTER_MOVE, pencil)
+  scene.input.on(Phaser.Input.Events.POINTER_MOVE, eraser)
+  scene.input.on(Phaser.Input.Events.POINTER_DOWN, paint)
+  scene.input.on(Phaser.Input.Events.POINTER_DOWN, tilePicker)
+})
+
+onUnmounted(() => {
+  scene.input.off(Phaser.Input.Events.POINTER_MOVE, pencil)
+  scene.input.off(Phaser.Input.Events.POINTER_MOVE, eraser)
+  scene.input.off(Phaser.Input.Events.POINTER_DOWN, paint)
+  scene.input.off(Phaser.Input.Events.POINTER_DOWN, tilePicker)
+
+  tileMap.destroyLayer('tiles')
+  tileMap.removeAllLayers()
+  tileMap.destroy()
+})
+</script>

src/components/gui/CharacterProfile.vue

@@ -1,11 +1,12 @@
 <template>
-  <div class="relative" v-if="gameStore.uiSettings.isCharacterProfileOpen" :style="modalStyle">
+  <div class="absolute" v-if="gameStore.uiSettings.isCharacterProfileOpen" :style="modalStyle">
+    <div class="relative">
       <img src="/assets/ui-elements/profile-ui-box-outer.svg" class="absolute w-full h-full" />
       <img src="/assets/ui-elements/profile-ui-box-inner.svg" class="absolute left-2 bottom-2 w-[calc(100%_-_16px)] h-[calc(100%_-_40px)]" />
       <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 +16,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>
@@ -113,6 +114,7 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -168,8 +170,8 @@ function stopDrag() {
 }
 
 function adjustPosition() {
-  x.value = Math.max(0, Math.min(x.value, window.innerWidth - width.value))
-  y.value = Math.max(0, Math.min(y.value, window.innerHeight - height.value))
+  x.value = Math.min(x.value, window.innerWidth - width.value)
+  y.value = Math.min(y.value, window.innerHeight - height.value)
 }
 
 function initializePosition() {
@@ -236,6 +238,7 @@ onMounted(() => {
 })
 
 onUnmounted(() => {
+  removeEventListener('keydown', keyPress)
   removeEventListener('mousemove', drag)
   removeEventListener('mouseup', stopDrag)
 })

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/Clock.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="absolute top-0 right-4 hidden lg:block">
+    <p class="text-white text-lg">{{ gameStore.world.date.toLocaleString() }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useGameStore } from '@/stores/gameStore'
+import { onUnmounted } from 'vue'
+
+const gameStore = useGameStore()
+
+// Listen for new date from socket
+gameStore.connection?.on('date', (data: Date) => {
+  gameStore.world.date = new Date(data)
+})
+
+onUnmounted(() => {
+  gameStore.connection?.off('date')
+})
+</script>

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">
-        <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" />
+      <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/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>
@@ -24,8 +24,8 @@
         <p class="absolute w-full bottom-0 m-0 text-xs leading-6 text-white">Open Chat</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: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" />
+      <a class="group-hover:bg-gray-800 bg-gray-900 group-hover:cursor-pointer border-2 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/ingameUI/chat-icon.svg" />
       </a>
     </li>
     <li class="menu-item group relative">
@@ -33,8 +33,8 @@
         <p class="absolute w-full bottom-0 m-0 text-xs leading-6 text-white">World map</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: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" />
+      <a class="group-hover:bg-gray-800 bg-gray-900 group-hover:cursor-pointer border-2 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/ingameUI/map-icon.svg" />
       </a>
     </li>
     <li class="menu-item group relative">
@@ -42,8 +42,8 @@
         <p class="absolute w-full bottom-0 m-0 text-xs leading-6 text-white">Users</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: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" />
+      <a class="group-hover:bg-gray-800 bg-gray-900 group-hover:cursor-pointer border-2 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/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

@@ -0,0 +1,69 @@
+<template>
+  <form @submit.prevent="loginFunc" class="relative px-6 py-11">
+    <div class="flex flex-col gap-5 p-2 mb-8 relative">
+      <div class="w-full grid gap-3 relative">
+        <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-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>
+      <button @click.stop="() => emit('openResetPasswordModal')" type="button" class="inline-flex self-end p-0 text-cyan-300 text-base">Forgot password?</button>
+      <button class="btn-cyan px-0 xs:w-full" type="submit">Play now</button>
+
+      <!-- Divider shape -->
+      <div class="absolute w-40 h-0.5 -bottom-8 left-1/2 -translate-x-1/2 flex justify-between">
+        <div class="w-0.5 h-full bg-gray-300"></div>
+        <div class="w-36 h-full bg-gray-300"></div>
+        <div class="w-0.5 h-full bg-gray-300"></div>
+      </div>
+    </div>
+    <div class="pt-8">
+      <p class="m-0 text-center">Don't have an account? <button class="text-cyan-300 text-base p-0" @click.prevent="() => emit('switchToRegister')">Sign up</button></p>
+    </div>
+  </form>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { login } from '@/services/authentication'
+import { useGameStore } from '@/stores/gameStore'
+import { useCookies } from '@vueuse/integrations/useCookies'
+
+const emit = defineEmits(['openResetPasswordModal', 'switchToRegister'])
+
+const gameStore = useGameStore()
+const username = ref('')
+const password = ref('')
+const loginError = ref('')
+const showPassword = ref(false)
+
+// automatic login because of development
+onMounted(async () => {
+  const token = useCookies().get('token')
+  if (token) {
+    gameStore.setToken(token)
+    gameStore.initConnection()
+  }
+})
+
+async function loginFunc() {
+  // check if username and password are valid
+  if (username.value === '' || password.value === '') {
+    loginError.value = 'Please enter a valid username and password'
+    return
+  }
+
+  // send login event to server
+  const response = await login(username.value, password.value)
+
+  if (response.success === undefined) {
+    loginError.value = response.error
+    return
+  }
+  gameStore.setToken(response.token)
+  gameStore.initConnection()
+  return true // Indicate success
+}
+</script>

src/components/login/NewPasswordForm.vue

@@ -0,0 +1,76 @@
+<template>
+  <form @submit.prevent="newPasswordFunc" class="relative px-6 py-11">
+    <div class="flex flex-col gap-5 p-2 mb-8 relative">
+      <div class="w-full grid gap-3 relative">
+        <input class="input-field xs:min-w-[350px] min-w-64" id="password-register" 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>
+        <span v-if="newPasswordError" class="text-red-200 text-xs absolute top-full mt-1">{{ newPasswordError }}</span>
+      </div>
+      <button class="btn-cyan xs:w-full" type="submit">Change password</button>
+
+      <!-- Divider shape -->
+      <div class="absolute w-40 h-0.5 -bottom-8 left-1/2 -translate-x-1/2 flex justify-between">
+        <div class="w-0.5 h-full bg-gray-300"></div>
+        <div class="w-36 h-full bg-gray-300"></div>
+        <div class="w-0.5 h-full bg-gray-300"></div>
+      </div>
+    </div>
+    <div class="pt-8">
+      <p class="m-0 text-center"><button class="text-cyan-300 text-base p-0" @click.prevent="cancelNewPassword">Back to login</button></p>
+    </div>
+  </form>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { newPassword } from '@/services/authentication'
+import { useGameStore } from '@/stores/gameStore'
+import { useCookies } from '@vueuse/integrations/useCookies'
+
+const emit = defineEmits(['switchToLogin'])
+
+const gameStore = useGameStore()
+const password = ref('')
+const newPasswordError = ref('')
+const showPassword = ref(false)
+
+// automatic login because of development
+onMounted(async () => {
+  const token = useCookies().get('token')
+  if (token) {
+    gameStore.setToken(token)
+    gameStore.initConnection()
+  }
+})
+
+async function newPasswordFunc() {
+  // check if username and password are valid
+  if (password.value === '') {
+    newPasswordError.value = 'Please enter a password'
+    return
+  }
+
+  const urlToken = window.location.hash.split('#')[1]
+
+  // send new password event to server along with the token
+  const response = await newPassword(urlToken, password.value)
+
+  if (response.success === undefined) {
+    newPasswordError.value = response.error
+    return
+  }
+
+  gameStore.addNotification({
+    title: 'Success',
+    message: 'Password changed successfully'
+  })
+
+  window.history.replaceState(null, '', window.location.pathname)
+  emit('switchToLogin')
+}
+
+function cancelNewPassword() {
+  window.history.replaceState(null, '', windowlocation.pathname)
+  emit('switchToLogin')
+}
+</script>

src/components/login/RegisterForm.vue

@@ -0,0 +1,97 @@
+<template>
+  <form @submit.prevent="registerFunc" class="relative px-6 py-11">
+    <div class="flex flex-col gap-5 p-2 mb-8 relative">
+      <div class="w-full grid gap-3 relative">
+        <input class="input-field xs:min-w-[350px] min-w-64" id="username-register" v-model="username" type="text" name="username" placeholder="Username" required autofocus />
+        <input class="input-field xs:min-w-[350px] min-w-64" id="email-register" v-model="email" type="email" name="email" placeholder="Email" required />
+        <div class="relative">
+          <input class="input-field xs:min-w-[350px] min-w-64" id="password-register" 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>
+        </div>
+        <span v-if="loginError" class="text-red-200 text-xs -mt-2">{{ loginError }}</span>
+      </div>
+      <button class="btn-cyan xs:w-full" type="submit">Register now</button>
+
+      <!-- Divider shape -->
+      <div class="absolute w-40 h-0.5 -bottom-8 left-1/2 -translate-x-1/2 flex justify-between">
+        <div class="w-0.5 h-full bg-gray-300"></div>
+        <div class="w-36 h-full bg-gray-300"></div>
+        <div class="w-0.5 h-full bg-gray-300"></div>
+      </div>
+    </div>
+    <div class="pt-8">
+      <p class="m-0 text-center">Already have an account? <button class="text-cyan-300 text-base p-0" @click.prevent="() => emit('switchToLogin')">Log in</button></p>
+    </div>
+  </form>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { login, register } from '@/services/authentication'
+import { useGameStore } from '@/stores/gameStore'
+import { useCookies } from '@vueuse/integrations/useCookies'
+
+const emit = defineEmits(['switchToLogin'])
+
+const gameStore = useGameStore()
+const username = ref('')
+const password = ref('')
+const email = ref('')
+const loginError = ref('')
+const showPassword = ref(false)
+
+// automatic login because of development
+onMounted(async () => {
+  const token = useCookies().get('token')
+  if (token) {
+    gameStore.setToken(token)
+    gameStore.initConnection()
+  }
+})
+
+async function loginFunc() {
+  // check if username and password are valid
+  if (username.value === '' || password.value === '') {
+    loginError.value = 'Please enter a valid username and password'
+    return
+  }
+
+  // send login event to server
+  const response = await login(username.value, password.value)
+
+  if (response.success === undefined) {
+    loginError.value = response.error
+    return
+  }
+  gameStore.setToken(response.token)
+  gameStore.initConnection()
+  return true // Indicate success
+}
+
+async function registerFunc() {
+  // check if username and password are valid
+  if (username.value === '' || email.value === '' || password.value === '') {
+    loginError.value = 'Please enter a valid username, email, and password'
+    return
+  }
+
+  if (email.value === '') {
+    loginError.value = 'Please enter an email'
+    return
+  }
+
+  // send register event to server
+  const response = await register(username.value, email.value, password.value)
+
+  if (response.success === undefined) {
+    loginError.value = response.error
+    return
+  }
+
+  const loginSuccess = await loginFunc()
+  if (!loginSuccess) {
+    loginError.value = 'Login after registration failed. Please try logging in manually.'
+    return
+  }
+}
+</script>

src/components/login/ResetPasswordModal.vue

@@ -0,0 +1,71 @@
+<template>
+  <Modal :isModalOpen="true" :modal-width="400" :modal-height="300" :is-resizable="false" @modal:close="() => emit('close')">
+    <template #modalHeader>
+      <h3 class="m-0 font-medium shrink-0 text-white">Reset Password</h3>
+    </template>
+
+    <template #modalBody>
+      <div class="h-[calc(100%_-_32px)] p-4">
+        <form class="h-full flex flex-col justify-between" @submit.prevent="resetPasswordFunc">
+          <div class="flex flex-col relative">
+            <p>Fill in your email to receive a password reset request.</p>
+            <input type="email" name="email" class="input-field" v-model="email" placeholder="E-mail" />
+            <span v-if="resetPasswordError" class="text-red-200 text-xs absolute top-full mt-1">{{ resetPasswordError }}</span>
+          </div>
+          <div class="grid grid-flow-col justify-stretch gap-4">
+            <button class="btn-empty py-1.5 px-4 min-w-24 inline-block" @click.stop="() => emit('close')">Cancel</button>
+            <button class="btn-cyan py-1.5 px-4 min-w-24 inline-flex items-center justify-center" type="submit">
+              <svg v-if="isLoading" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 animate-spin mr-2" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              </svg>
+              Send mail
+            </button>
+          </div>
+        </form>
+      </div>
+    </template>
+  </Modal>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { resetPassword } from '@/services/authentication'
+import Modal from '@/components/utilities/Modal.vue'
+import { useGameStore } from '@/stores/gameStore'
+
+const emit = defineEmits(['close'])
+
+const gameStore = useGameStore()
+const isLoading = ref(false)
+const email = ref('')
+const resetPasswordError = ref('')
+
+async function resetPasswordFunc() {
+  // check if email is valid
+  if (email.value === '') {
+    resetPasswordError.value = 'Please enter an email'
+    return
+  }
+
+  isLoading.value = true
+
+  // send reset password event to server
+  const response = await resetPassword(email.value)
+
+  if (response.success === undefined) {
+    resetPasswordError.value = response.error
+    isLoading.value = false
+    return
+  }
+
+  gameStore.addNotification({
+    title: 'Success',
+    message: 'Password reset email sent'
+  })
+
+  isLoading.value = false
+
+  emit('close')
+}
+</script>

src/components/screens/Characters.vue

@@ -0,0 +1,217 @@
+<template>
+  <div class="relative max-lg:h-dvh flex flex-row-reverse">
+    <div class="lg:bg-gradient-to-l bg-gradient-to-b from-gray-900 to-transparent w-full lg:w-1/2 h-[65dvh] lg:h-dvh absolute left-0 max-lg:bottom-0 lg:top-0 z-10"></div>
+    <div class="bg-[url('/assets/login/login-bg.png')] opacity-20 w-full lg:w-1/2 h-[65dvh] lg:h-dvh absolute left-0 max-lg:bottom-0 lg:top-0 bg-no-repeat bg-cover bg-center grayscale"></div>
+    <div class="bg-gray-900 z-20 w-full lg:w-1/2 h-[35dvh] lg:h-dvh relative"></div>
+    <div class="max-lg:hidden absolute top-8 right-0 py-[18px] pr-[15px] pl-32 bg-gradient-to-r from-transparent to-cyan-900 z-20">
+      <h2 class="text-white">CHARACTER SELECTION</h2>
+    </div>
+    <div class="ui-wrapper h-dvh w-[calc(100%_-_80px)] sm:w-[calc(100%_-_160px)] absolute flex flex-col justify-center items-center gap-8 lg:gap-14 px-10 sm:px-20 z-30">
+      <div class="filler"></div>
+      <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 created per player</p>
+        </div>
+        <div class="flex w-full max-lg:flex-col lg:h-[400px] border border-solid border-gray-500 rounded-md rounded-tl-none bg-gray">
+          <div class="lg:min-w-[285px] max-lg:min-h-[383px] lg:w-1/3 h-full bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-cover bg-center border-0 max-lg:border-b lg:border-r border-solid border-gray-500 max-lg:rounded-tr-md lg: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')] after:absolute after:w-full after:h-px after:bg-gray-500"
+                :class="{ active: selectedCharacterId == 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="h-full w-full absolute m-0 z-10 hover:cursor-pointer focus-visible:outline-offset-0" type="radio" name="character" :value="character.id" v-model="selectedCharacterId" />
+              </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">
+                <button class="p-0 h-full w-full flex flex-col justify-between focus-visible:outline-offset-0" @click="isCreateNewCharacterModalOpen = 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 justify-center" v-if="selectedCharacterId">
+              <input class="input-field w-[158px]" type="text" name="name" :placeholder="characters.find((c) => c.id == selectedCharacterId)?.name" />
+              <div class="flex flex-col gap-4 items-center">
+                <div class="flex flex-col gap-3">
+                  <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]">-->
+                  <!--                    &lt;!&ndash; TODO: replace with color swatches &ndash;&gt;-->
+                  <!--                    <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" :class="{ selected: characters.find((c) => c.id == selectedCharacterId)?.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" :class="{ selected: characters.find((c) => c.id == selectedCharacterId)?.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>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="flex-1 lg:w-2/3 max-lg:min-h-[212px] h-full bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-cover bg-center max-lg:rounded-bl-md rounded-r-md">
+            <div class="py-6 px-8 h-[calc(100%_-_48px)] flex flex-col items-center gap-10" v-if="selectedCharacterId">
+              <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">
+                  <div
+                    class="hair-deselect relative flex justify-center items-center bg-gray border border-solid border-gray-500 w-[18px] h-[18px] p-2 rounded-sm hover:bg-gray-500 hover:border-gray-400 focus-visible:outline-none focus-visible:border-white focus-visible:bg-cyan has-[:checked]:bg-cyan has-[:checked]:border-transparent"
+                  >
+                    <img src="/assets/icons/x-button-gray.svg" class="w-4 h-4" alt="Empty button" />
+                    <input type="radio" name="hair" :value="null" v-model="selectedHairId" class="h-full w-full absolute left-0 top-0 m-0 z-10 hover:cursor-pointer focus-visible:outline-offset-0 focus-visible:outline-white" />
+                  </div>
+                  <!-- TODO #255: make radio button so we can set a value, do the same with swatches -->
+                  <div
+                    v-for="hair in characterHairs"
+                    class="relative flex justify-center items-center bg-gray border border-solid border-gray-500 w-[18px] h-[18px] 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 has-[:checked]:bg-cyan has-[:checked]:border-transparent"
+                  >
+                    <img class="w-4 h-4" :src="config.server_endpoint + '/assets/sprites/' + hair.spriteId + '/front.png'" alt="Hair sprite" />
+                    <input type="radio" name="hair" :value="hair.id" v-model="selectedHairId" class="h-full w-full absolute left-0 top-0 m-0 z-10 hover:cursor-pointer focus-visible:outline-offset-0 focus-visible:outline-white" />
+                  </div>
+                </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 hair colors -->
+                  <input type="radio" name="hair-color" v-for="n in 10" class="bg-red w-6 h-6 m-0 rounded-sm hover:cursor-pointer checked:outline checked:outline-1 checked:outline-white" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-else>
+        <img class="w-20 invert-80" src="/assets/icons/loading-icon1.svg" />
+      </div>
+
+      <div class="w-2/3 button-wrapper flex self-center justify-center lg:justify-end gap-4 max-w-[860px]" v-if="!isLoading">
+        <button class="btn-empty min-w-48" @click.stop="gameStore.disconnectSocket()">Back</button>
+        <button class="btn-cyan min-w-48 disabled:bg-cyan-800 disabled:cursor-not-allowed" :disabled="!selectedCharacterId" @click="loginWithCharacter()">Play now</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- CREATE CHARACTER MODAL -->
+  <Modal :isModalOpen="isCreateNewCharacterModalOpen" @modal:close="isCreateNewCharacterModalOpen = false" :modal-width="430" :modal-height="275">
+    <template #modalHeader>
+      <h3 class="m-0 font-medium text-white">Create your character</h3>
+    </template>
+
+    <template #modalBody>
+      <div class="p-4 h-[calc(100%_-_32px)]">
+        <form method="post" @submit.prevent="createCharacter" class="h-full flex flex-col justify-between">
+          <div class="form-field-full">
+            <label for="name" class="text-white">Nickname</label>
+            <input class="input-field" v-model="newCharacterName" name="name" id="name" placeholder="Enter a nickname..." />
+          </div>
+          <div class="grid grid-flow-col justify-stretch gap-4">
+            <button type="button" class="btn-empty py-1.5 px-4 inline-block" @click.prevent="isCreateNewCharacterModalOpen = false">Cancel</button>
+            <button class="btn-cyan py-1.5 px-4 inline-block" type="submit">Create</button>
+          </div>
+        </form>
+      </div>
+    </template>
+  </Modal>
+
+  <!-- DELETE CHARACTER MODAL -->
+  <ConfirmationModal v-if="deletingCharacter != null" :confirm-function="deleteCharacter.bind(this, deletingCharacter.id)" :cancel-function="(() => (deletingCharacter = null)).bind(this)" confirm-button-text="Delete">
+    <template #modalHeader>
+      <h3 class="m-0 font-medium text-white">Delete character?</h3>
+    </template>
+    <template #modalBody>
+      <p class="mt-0 mb-5 text-white text-lg">
+        Do you want to permanently delete <span class="font-extrabold text-white">{{ deletingCharacter.name }}</span
+        >?
+      </p>
+    </template>
+  </ConfirmationModal>
+</template>
+
+<script setup lang="ts">
+import config from '@/config'
+import { useGameStore } from '@/stores/gameStore'
+import { onBeforeUnmount, ref, watch } from 'vue'
+import Modal from '@/components/utilities/Modal.vue'
+import { type Character as CharacterT, type CharacterHair } from '@/types'
+import ConfirmationModal from '@/components/utilities/ConfirmationModal.vue'
+
+const gameStore = useGameStore()
+const isLoading = ref<boolean>(true)
+const characters = ref<CharacterT[]>([])
+const deletingCharacter = ref(null as CharacterT | null)
+const selectedCharacterId = ref<number | null>(null)
+const isCreateNewCharacterModalOpen = ref<boolean>(false)
+const newCharacterName = ref<string>('')
+const characterHairs = ref<CharacterHair[]>([])
+const selectedHairId = ref<number | null>(null)
+
+// Fetch characters
+setTimeout(() => {
+  gameStore.connection?.emit('character:list')
+}, 750)
+
+gameStore.connection?.on('character:list', (data: any) => {
+  characters.value = data
+  isLoading.value = false
+
+  // Fetch hairs
+  // @TODO: This is hacky, we should have a better way to do this
+  gameStore.connection?.emit('character:hair:list', {}, (data: CharacterHair[]) => {
+    characterHairs.value = data
+  })
+})
+
+// Select character logics
+function loginWithCharacter() {
+  if (!selectedCharacterId.value) return
+
+  gameStore.connection?.emit('character:connect', {
+    characterId: selectedCharacterId.value,
+    characterHairId: selectedHairId.value
+  })
+  gameStore.connection?.on('character:connect', (data: CharacterT) => gameStore.setCharacter(data))
+}
+
+// Delete character logics
+function deleteCharacter(characterId: number) {
+  if (!characterId) return
+  deletingCharacter.value = null
+  gameStore.connection?.emit('character:delete', { characterId: characterId })
+}
+
+// Create character logics
+function createCharacter() {
+  gameStore.connection?.on('character:create:success', (data: CharacterT) => {
+    gameStore.setCharacter(data)
+    isCreateNewCharacterModalOpen.value = false
+  })
+  gameStore.connection?.emit('character:create', { name: newCharacterName.value })
+}
+
+// Watch changes for selected character and update hairs
+watch(selectedCharacterId, (characterId) => {
+  if (!characterId) return
+  selectedHairId.value = characters.value.find((c) => c.id == characterId)?.characterHairId ?? null
+})
+
+onBeforeUnmount(() => {
+  gameStore.connection?.off('character:list')
+  gameStore.connection?.off('character:connect')
+  gameStore.connection?.off('character:create:success')
+})
+</script>

src/components/screens/Game.vue

@@ -5,7 +5,7 @@
         <Menu />
         <Hud />
         <Hotkeys />
-        <Minimap />
+        <Clock />
         <Zone />
         <Chat />
         <ExpBar />
@@ -25,17 +25,16 @@ import { useGameStore } from '@/stores/gameStore'
 import Menu from '@/components/gui/Menu.vue'
 import ExpBar from '@/components/gui/ExpBar.vue'
 import Hud from '@/components/gui/Hud.vue'
-import Zone from '@/components/zone/Zone.vue'
+import Zone from '@/components/game/zone/Zone.vue'
 import Hotkeys from '@/components/gui/Hotkeys.vue'
 import Chat from '@/components/gui/Chat.vue'
 import CharacterProfile from '@/components/gui/CharacterProfile.vue'
 import Effects from '@/components/Effects.vue'
-import Minimap from '@/components/gui/Minimap.vue'
+// import Minimap from '@/components/gui/Minimap.vue'
+import Clock from '@/components/gui/Clock.vue'
 import AwaitLoaderPlugin from 'phaser3-rex-plugins/plugins/awaitloader-plugin'
-import { useAssetManager } from '@/utilities/assetManager'
 
 const gameStore = useGameStore()
-const assetManager = useAssetManager
 
 const gameConfig = {
   name: config.name,
@@ -78,41 +77,7 @@ function preloadScene(scene: Phaser.Scene) {
    */
   scene.load.image('blank_tile', '/assets/zone/blank_tile.png')
   scene.load.image('waypoint', '/assets/waypoint.png')
-
-  scene.load.rexAwait(async function (successCallback) {
-    await assetManager.getAssetsByGroup('tiles').then((assets) => {
-      assets.forEach((asset) => {
-        if (scene.load.textureManager.exists(asset.key)) return
-        scene.textures.addBase64(asset.key, asset.data)
-      })
-    })
-
-    // Load objects
-    await assetManager.getAssetsByGroup('objects').then((assets) => {
-      assets.forEach((asset) => {
-        if (scene.load.textureManager.exists(asset.key)) return
-        scene.textures.addBase64(asset.key, asset.data)
-      })
-    })
-
-    successCallback()
-  })
 }
 
-function createScene(scene: Phaser.Scene) {
-  /**
-   * Create sprite animations
-   * This is done here because phaser forces us to
-   */
-  assetManager.getAssetsByGroup('sprite_animations').then((assets) => {
-    assets.forEach((asset) => {
-      scene.anims.create({
-        key: asset.key,
-        frameRate: 7,
-        frames: scene.anims.generateFrameNumbers(asset.key, { start: 0, end: asset.frameCount! - 1 }),
-        repeat: -1
-      })
-    })
-  })
-}
+function createScene(scene: Phaser.Scene) {}
 </script>

src/components/screens/Loading.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="flex flex-col justify-center items-center h-dvh relative">
+    <button @click="continueBtnClick" class="w-32 h-12 rounded-full bg-gray-500 flex items-center justify-between px-4 hover:bg-gray-600 transition-colors">
+      <span class="text-white text-lg flex-1 text-center">Play</span>
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+      </svg>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts" async>
+import { useGameStore } from '@/stores/gameStore'
+
+const gameStore = useGameStore()
+
+function continueBtnClick() {
+  // Play music
+  const audio = new Audio('/assets/music/login.mp3')
+  audio.play()
+
+  // Set isLoaded to true
+  gameStore.game.isLoaded = true
+}
+</script>

src/components/screens/Login.vue

@@ -0,0 +1,56 @@
+<template>
+  <!-- @TODO this must be shown over the login screen -->
+  <div class="relative max-lg:h-dvh flex flex-row-reverse">
+    <ResetPassword :isModalOpen="isPasswordResetFormShown" @close="() => (isPasswordResetFormShown = false)" />
+    <div class="lg:bg-gradient-to-l bg-gradient-to-b from-gray-900 to-transparent w-full lg:w-1/2 h-[35dvh] lg:h-dvh absolute left-0 max-lg:bottom-0 lg:top-0 z-10"></div>
+    <div class="bg-[url('/assets/login/login-bg.png')] w-full lg:w-1/2 h-[35dvh] lg:h-dvh absolute left-0 max-lg:bottom-0 lg:top-0 bg-no-repeat bg-cover bg-center"></div>
+    <div class="bg-gray-900 z-20 w-full lg:w-1/2 h-[65dvh] lg:h-dvh relative">
+      <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/login-ui-box-outer.svg" class="absolute w-full h-full" alt="UI box outer" />
+          <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="switchToLogin" />
+
+          <!-- New Password Form -->
+          <NewPasswordForm v-if="doesUrlHaveToken" @switchToLogin="switchToLogin" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { useGameStore } from '@/stores/gameStore'
+import { useCookies } from '@vueuse/integrations/useCookies'
+import LoginForm from '@/components/login/LoginForm.vue'
+import RegisterForm from '@/components/login/RegisterForm.vue'
+import NewPasswordForm from '@/components/login/NewPasswordForm.vue'
+import ResetPassword from '@/components/login/ResetPasswordModal.vue'
+
+const isPasswordResetFormShown = ref(false)
+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')
+  if (token) {
+    gameStore.setToken(token)
+    gameStore.initConnection()
+  }
+})
+</script>

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 v-if="isLoaded" :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>
@@ -11,22 +11,32 @@
 <script setup lang="ts">
 import config from '@/config'
 import 'phaser'
-import { ref, onBeforeUnmount } from 'vue'
 import { Game, Scene } from 'phavuer'
 import { useGameStore } from '@/stores/gameStore'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import ZoneEditor from '@/components/gameMaster/zoneEditor/ZoneEditor.vue'
+import AwaitLoaderPlugin from 'phaser3-rex-plugins/plugins/awaitloader-plugin'
+import { loadTexture } from '@/composables/gameComposable'
+import type { AssetDataT } from '@/types'
 
 const gameStore = useGameStore()
 const zoneEditorStore = useZoneEditorStore()
-const isLoaded = ref(false)
 
 const gameConfig = {
   name: config.name,
   width: window.innerWidth,
   height: window.innerHeight,
   type: Phaser.AUTO, // AUTO, CANVAS, WEBGL, HEADLESS
-  resolution: 5
+  resolution: 5,
+  plugins: {
+    global: [
+      {
+        key: 'rexAwaitLoader',
+        plugin: AwaitLoaderPlugin,
+        start: true
+      }
+    ]
+  }
 }
 
 const createGame = (game: Phaser.Game) => {
@@ -48,43 +58,6 @@ const createGame = (game: Phaser.Game) => {
 }
 
 const preloadScene = async (scene: Phaser.Scene) => {
-  isLoaded.value = false
-
-  /**
-   * Create loading bar
-   */
-  const width = scene.cameras.main.width
-  const height = scene.cameras.main.height
-
-  const progressBox = scene.add.graphics()
-  const progressBar = scene.add.graphics()
-  progressBox.fillStyle(0x222222, 0.8)
-  progressBox.fillRect(width / 2 - 180, height / 2, 320, 50)
-
-  const loadingText = scene.make.text({
-    x: width / 2,
-    y: height / 2 - 50,
-    text: 'Loading...',
-    style: {
-      font: '20px monospace',
-      fill: '#ffffff'
-    }
-  })
-  loadingText.setOrigin(0.5, 0.5)
-
-  scene.load.on(Phaser.Loader.Events.PROGRESS, function (value: any) {
-    progressBar.clear()
-    progressBar.fillStyle(0x368f8b, 1)
-    progressBar.fillRect(width / 2 - 180 + 10, height / 2 + 10, 300 * value, 30)
-  })
-
-  scene.load.on(Phaser.Loader.Events.COMPLETE, function () {
-    progressBar.destroy()
-    progressBox.destroy()
-    loadingText.destroy()
-    isLoaded.value = true
-  })
-
   /**
    * Load the base assets into the Phaser scene
    */
@@ -92,26 +65,21 @@ const preloadScene = async (scene: Phaser.Scene) => {
   scene.load.image('TELEPORT', '/assets/zone/tp_tile.png')
   scene.load.image('blank_tile', '/assets/zone/blank_tile.png')
   scene.load.image('waypoint', '/assets/waypoint.png')
-}
 
-const createScene = async (scene: Phaser.Scene) => {
   /**
-   * Create sprite animations
-   * This is done here because phaser forces us to
+   * Because Phaser can't load tiles after the scene with map in it is created,
+   * we need to load and cache all the tiles first.
+   * Then load them into the scene.
    */
-  gameStore.assets.forEach((asset) => {
-    if (asset.group !== 'sprite_animations') return
+  scene.load.rexAwait(async function (successCallback: any) {
+    const tiles: AssetDataT[] = await fetch(config.server_endpoint + '/assets/list_tiles').then((response) => response.json())
+    for await (const tile of tiles) {
+      await loadTexture(scene, tile)
+    }
 
-    scene.anims.create({
-      key: asset.key,
-      frameRate: 7,
-      frames: scene.anims.generateFrameNumbers(asset.key, { start: 0, end: asset.frameCount! - 1 }),
-      repeat: -1
-    })
+    successCallback()
   })
 }
 
-onBeforeUnmount(() => {
-  isLoaded.value = false
-})
+const createScene = async (scene: Phaser.Scene) => {}
 </script>

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-300 bg-opacity-50 rounded hover:bg-gray-400 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

@@ -0,0 +1,23 @@
+<template>
+  <div style="display: none">
+    <img v-for="(url, index) in imageUrls" :key="index" :src="url" alt="" @load="handleImageLoad(index)" @error="handleImageError(index)" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// Internal array of images to preload
+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())
+
+const handleImageLoad = (index: number) => {
+  loadedImages.value.add(index)
+  console.log(`Image ${index} loaded:`, imageUrls.value[index])
+}
+
+const handleImageError = (index: number) => {
+  console.log(`Image ${index} failed to load:`, imageUrls.value[index])
+}
+</script>

src/components/utilities/Controls.vue

@@ -8,14 +8,59 @@ import { onBeforeUnmount, ref } from 'vue'
 import { usePointerHandlers } from '@/composables/usePointerHandlers'
 import { useCameraControls } from '@/composables/useCameraControls'
 
+// Types
+type WayPoint = { visible: boolean; x: number; y: number }
+
+// Props
 const props = defineProps<{ layer: Phaser.Tilemaps.TilemapLayer }>()
+
+// Constants
+const ZOOM_SETTINGS = {
+  WHEEL_FACTOR: 0.005,
+  KEY_FACTOR: 0.3,
+  MIN: 1,
+  MAX: 3
+} as const
+
+// Setup
 const scene = useScene()
-
-const waypoint = ref({ visible: false, x: 0, y: 0 })
-
+const waypoint = ref<WayPoint>({ visible: false, x: 0, y: 0 })
 const { camera } = useCameraControls(scene)
 const { setupPointerHandlers, cleanupPointerHandlers } = usePointerHandlers(scene, props.layer, waypoint, camera)
 
+// Handlers
+function handleScrollZoom(pointer: Phaser.Input.Pointer) {
+  if (!(pointer.event instanceof WheelEvent && pointer.event.shiftKey)) return
+
+  const zoomLevel = Phaser.Math.Clamp(
+    camera.zoom - pointer.event.deltaY * ZOOM_SETTINGS.WHEEL_FACTOR,
+    ZOOM_SETTINGS.MIN,
+    ZOOM_SETTINGS.MAX
+  )
+  camera.setZoom(zoomLevel)
+}
+
+function handleKeyComboZoom(event: { keyCodes: number[] }) {
+  const deltaY = event.keyCodes[1] === 38 ? 1 : -1 // 38 is Up, 40 is Down
+  const zoomLevel = Phaser.Math.Clamp(
+    camera.zoom + deltaY * ZOOM_SETTINGS.KEY_FACTOR,
+    ZOOM_SETTINGS.MIN,
+    ZOOM_SETTINGS.MAX
+  )
+  camera.setZoom(zoomLevel)
+}
+
+// Event setup
 setupPointerHandlers()
-onBeforeUnmount(cleanupPointerHandlers)
+scene.input.keyboard?.createCombo([16, 38], { resetOnMatch: true }) // Shift + Up
+scene.input.keyboard?.createCombo([16, 40], { resetOnMatch: true }) // Shift + Down
+scene.input.keyboard?.on('keycombomatch', handleKeyComboZoom)
+scene.input.on(Phaser.Input.Events.POINTER_WHEEL, handleScrollZoom)
+
+// Cleanup
+onBeforeUnmount(() => {
+  cleanupPointerHandlers()
+  scene.input.keyboard?.off('keycombomatch')
+  scene.input.off(Phaser.Input.Events.POINTER_WHEEL, handleScrollZoom)
+})
 </script>

src/components/utilities/Modal.vue

@@ -1,245 +1,233 @@
 <template>
   <Teleport to="body">
     <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-md 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>
+        <div
+          :class="{
+            'bg-[url(/assets/ui-texture.png)] bg-no-repeat bg-center bg-cover opacity-90': bgStyle === 'textured',
+            'bg-gray-700': bgStyle !== 'textured'
+          }"
+          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 @click="toggleFullScreen" class="w-5 h-5 m-0 p-0 relative hover:scale-110 transition-transform duration-300 ease-in-out" v-if="canFullScreen">
-            <img :alt="isFullScreen ? 'exit full-screen' : 'full-screen'" draggable="false" :src="isFullScreen ? '/assets/icons/minimize.svg' : '/assets/icons/increase-size-option.svg'" class="w-3.5 h-3.5 invert" />
+          <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/modal/minimize.svg' : '/assets/icons/modal/increase-size-option.svg'" class="w-3.5 h-3.5 invert" draggable="false" />
           </button>
-          <button @click="close" v-if="closable" 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" />
+          <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/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-md 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>
+        <div
+          :class="{
+            'bg-[url(/assets/ui-texture.png)] bg-no-repeat bg-center bg-cover opacity-90': bgStyle === 'textured',
+            'bg-gray-800': bgStyle === 'dark',
+            'bg-gray-700': bgStyle === 'none'
+          }"
+          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>
 </template>
 
 <script setup lang="ts">
-import { defineEmits, onMounted, onUnmounted, ref, watch, computed } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 
-const props = defineProps({
-  isModalOpen: {
-    type: Boolean,
-    default: false
-  },
-  closable: {
-    type: Boolean,
-    default: true
-  },
-  isResizable: {
-    type: Boolean,
-    default: true
-  },
-  canFullScreen: {
-    type: Boolean,
-    default: false
-  },
-  modalPositionX: {
-    type: Number,
-    default: 0
-  },
-  modalPositionY: {
-    type: Number,
-    default: 0
-  },
-  modalWidth: {
-    type: Number,
-    default: 500
-  },
-  modalHeight: {
-    type: Number,
-    default: 280
+interface ModalProps {
+  isModalOpen: boolean
+  closable?: boolean
+  isResizable?: boolean
+  isFullScreen?: boolean
+  canFullScreen?: boolean
+  modalPositionX?: number
+  modalPositionY?: number
+  modalWidth?: number
+  modalHeight?: number
+  bgStyle?: string
 }
+
+interface Position {
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+const props = withDefaults(defineProps<ModalProps>(), {
+  isModalOpen: false,
+  closable: true,
+  isResizable: true,
+  isFullScreen: false,
+  canFullScreen: false,
+  modalPositionX: 0,
+  modalPositionY: 0,
+  modalWidth: 500,
+  modalHeight: 280,
+  bgStyle: 'textured'
 })
 
-const isModalOpenRef = ref(props.isModalOpen)
-const emit = defineEmits(['modal:close', 'character:create'])
+const emit = defineEmits<{
+  'modal:close': []
+  'character:create': []
+}>()
 
+const isModalOpenRef = ref(props.isModalOpen)
 const width = ref(props.modalWidth)
 const height = ref(props.modalHeight)
 const x = ref(0)
 const y = ref(0)
-
-const minWidth = ref(200)
-const minHeight = ref(100)
 const isResizing = ref(false)
 const isDragging = ref(false)
-const isFullScreen = ref(false)
+const isFullScreen = ref(props.isFullScreen)
 
-let startX = 0
-let startY = 0
-let initialX = 0
-let initialY = 0
-let startWidth = 0
-let startHeight = 0
-let preFullScreenState = { x: 0, y: 0, width: 0, height: 0 }
+const minDimensions = {
+  width: 200,
+  height: 100
+}
+
+let dragState = {
+  startX: 0,
+  startY: 0,
+  initialX: 0,
+  initialY: 0,
+  startWidth: 0,
+  startHeight: 0
+}
+
+let preFullScreenState: Position = { x: 0, y: 0, width: 0, height: 0 }
 
 const modalStyle = computed(() => ({
   borderRadius: isFullScreen.value ? '0' : '6px',
   top: isFullScreen.value ? '0' : `${y.value}px`,
   left: isFullScreen.value ? '0' : `${x.value}px`,
   width: isFullScreen.value ? '100vw' : `${width.value}px`,
-  height: isFullScreen.value ? '100vh' : `${height.value}px`,
-  maxWidth: '100vw',
-  maxHeight: '100vh'
+  height: isFullScreen.value ? '100vh' : `${height.value}px`
 }))
 
-function close() {
-  emit('modal:close')
-}
-
 function startResize(event: MouseEvent) {
   if (isFullScreen.value) return
   isResizing.value = true
-  startWidth = width.value - event.clientX
-  startHeight = height.value - event.clientY
+  dragState.startWidth = width.value - event.clientX
+  dragState.startHeight = height.value - event.clientY
   event.preventDefault()
 }
 
 function resizeModal(event: MouseEvent) {
   if (!isResizing.value || isFullScreen.value) return
-  const newWidth = Math.min(startWidth + event.clientX, window.innerWidth)
-  const newHeight = Math.min(startHeight + event.clientY, window.innerHeight)
-  width.value = Math.max(newWidth, minWidth.value)
-  height.value = Math.max(newHeight, minHeight.value)
-  adjustPosition()
-}
-
-function stopResize() {
-  isResizing.value = false
+  width.value = Math.max(dragState.startWidth + event.clientX, minDimensions.width)
+  height.value = Math.max(dragState.startHeight + event.clientY, minDimensions.height)
 }
 
 function startDrag(event: MouseEvent) {
   if (isFullScreen.value) return
   isDragging.value = true
-  startX = event.clientX
-  startY = event.clientY
-  initialX = x.value
-  initialY = y.value
+  dragState = {
+    startX: event.clientX,
+    startY: event.clientY,
+    initialX: x.value,
+    initialY: y.value,
+    startWidth: width.value,
+    startHeight: height.value
+  }
   event.preventDefault()
 }
 
 function drag(event: MouseEvent) {
   if (!isDragging.value || isFullScreen.value) return
-  const dx = event.clientX - startX
-  const dy = event.clientY - startY
-  x.value = initialX + dx
-  y.value = initialY + dy
-  adjustPosition()
-}
-
-function stopDrag() {
-  isDragging.value = false
-}
-
-function adjustPosition() {
-  if (isFullScreen.value) return
-  x.value = Math.max(0, Math.min(x.value, window.innerWidth - width.value))
-  y.value = Math.max(0, Math.min(y.value, window.innerHeight - height.value))
-}
-
-function handleResize() {
-  if (isFullScreen.value) return
-  width.value = Math.min(width.value, window.innerWidth)
-  height.value = Math.min(height.value, window.innerHeight)
-  adjustPosition()
-}
-
-function initializePosition() {
-  width.value = Math.min(props.modalWidth, window.innerWidth)
-  height.value = Math.min(props.modalHeight, window.innerHeight)
-  if (props.modalPositionX !== 0 && props.modalPositionY !== 0) {
-    x.value = props.modalPositionX
-    y.value = props.modalPositionY
-  } else {
-    x.value = (window.innerWidth - width.value) / 2
-    y.value = (window.innerHeight - height.value) / 2
-  }
+  x.value = dragState.initialX + (event.clientX - dragState.startX)
+  y.value = dragState.initialY + (event.clientY - dragState.startY)
 }
 
 function toggleFullScreen() {
   if (isFullScreen.value) {
-    // Exit full-screen
-    x.value = preFullScreenState.x
-    y.value = preFullScreenState.y
-    width.value = preFullScreenState.width
-    height.value = preFullScreenState.height
-    isFullScreen.value = false
+    Object.assign({ x, y, width, height }, preFullScreenState)
   } else {
-    // Enter full-screen
     preFullScreenState = { x: x.value, y: y.value, width: width.value, height: height.value }
-    isFullScreen.value = true
   }
+  isFullScreen.value = !isFullScreen.value
 }
 
+function initializePosition() {
+  width.value = props.modalWidth
+  height.value = props.modalHeight
+  x.value = props.modalPositionX || (window.innerWidth - width.value) / 2
+  y.value = props.modalPositionY || (window.innerHeight - height.value) / 2
+}
+
+// Watchers
 watch(
   () => props.isModalOpen,
   (value) => {
     isModalOpenRef.value = value
-    if (value) {
-      initializePosition()
-    }
+    if (value) initializePosition()
   }
 )
 
 watch(
   () => props.modalWidth,
-  (value) => {
-    width.value = Math.min(value, window.innerWidth)
-  }
+  (value) => (width.value = value)
 )
-
 watch(
   () => props.modalHeight,
-  (value) => {
-    height.value = Math.min(value, window.innerHeight)
-  }
+  (value) => (height.value = value)
 )
-
 watch(
   () => props.modalPositionX,
-  (value) => {
-    x.value = value
-  }
+  (value) => (x.value = value)
 )
-
 watch(
   () => props.modalPositionY,
-  (value) => {
-    y.value = value
-  }
+  (value) => (y.value = value)
 )
 
+// Lifecycle hooks
 onMounted(() => {
-  window.addEventListener('mousemove', drag)
-  window.addEventListener('mouseup', stopDrag)
-  window.addEventListener('mousemove', resizeModal)
-  window.addEventListener('mouseup', stopResize)
-  if (props.modalPositionX !== 0 && props.modalPositionY !== 0) {
-    window.addEventListener('resize', handleResize)
+  const handlers: Record<string, EventListener[]> = {
+    mousemove: [(e: Event) => drag(e as MouseEvent), (e: Event) => resizeModal(e as MouseEvent)],
+    mouseup: [
+      () => {
+        isDragging.value = false
+      },
+      () => {
+        isResizing.value = false
       }
+    ]
+  }
+
+  Object.entries(handlers).forEach(([event, fns]) => {
+    fns.forEach((fn) => window.addEventListener(event, fn))
+  })
+
   initializePosition()
 })
 
 onUnmounted(() => {
-  window.removeEventListener('mousemove', drag)
-  window.removeEventListener('mouseup', stopDrag)
-  window.removeEventListener('mousemove', resizeModal)
-  window.removeEventListener('mouseup', stopResize)
-  if (props.modalPositionX !== 0 && props.modalPositionY !== 0) {
-    window.removeEventListener('resize', handleResize)
+  const handlers: Record<string, EventListener[]> = {
+    mousemove: [(e: Event) => drag(e as MouseEvent), (e: Event) => resizeModal(e as MouseEvent)],
+    mouseup: [
+      () => {
+        isDragging.value = false
+      },
+      () => {
+        isResizing.value = false
       }
+    ]
+  }
+
+  Object.entries(handlers).forEach(([event, fns]) => {
+    fns.forEach((fn) => window.removeEventListener(event, fn))
+  })
 })
 </script>

src/components/utilities/Notifications.vue

@@ -12,7 +12,7 @@
 <script setup lang="ts">
 import { useGameStore } from '@/stores/gameStore'
 import Modal from '@/components/utilities/Modal.vue'
-import { onBeforeMount, onBeforeUnmount, watch } from 'vue'
+import { onBeforeMount, onBeforeUnmount, onMounted, onUnmounted, watch } from 'vue'
 
 const gameStore = useGameStore()
 
@@ -34,7 +34,7 @@ function setupNotificationListener(connection: any) {
   })
 }
 
-onBeforeMount(() => {
+onMounted(() => {
   const connection = gameStore.connection
   if (connection) {
     setupNotificationListener(connection)
@@ -49,7 +49,7 @@ onBeforeMount(() => {
   }
 })
 
-onBeforeUnmount(() => {
+onUnmounted(() => {
   const connection = gameStore.connection
   if (connection) {
     connection.off('notification')

src/components/zone/Characters.vue

@@ -1,15 +0,0 @@
-<template>
-  <Character v-for="item in zoneStore.characters" :key="item.id" :layer="tilemap" :character="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()
-
-const props = defineProps<{
-  tilemap: Phaser.Tilemaps.Tilemap
-}>()
-</script>

src/components/zone/ZoneTiles.vue

@@ -1,64 +0,0 @@
-<template>
-  <Controls :layer="tiles" :depth="0" />
-</template>
-
-<script setup lang="ts">
-import config from '@/config'
-import { useScene } from 'phavuer'
-import { useZoneStore } from '@/stores/zoneStore'
-import { onBeforeMount, onBeforeUnmount } from 'vue'
-import { setLayerTiles } from '@/composables/zoneComposable'
-import Controls from '@/components/utilities/Controls.vue'
-
-const emit = defineEmits(['tilemap:create'])
-
-const zoneStore = useZoneStore()
-const scene = useScene()
-const zoneTilemap = createTilemap()
-const tiles = createTileLayer()
-
-function createTilemap() {
-  const zoneData = new Phaser.Tilemaps.MapData({
-    width: zoneStore.zone?.width,
-    height: zoneStore.zone?.height,
-    tileWidth: config.tile_size.x,
-    tileHeight: config.tile_size.y,
-    orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
-    format: Phaser.Tilemaps.Formats.ARRAY_2D
-  })
-  const tilemap = new Phaser.Tilemaps.Tilemap(scene, zoneData)
-  emit('tilemap:create', tilemap)
-  return tilemap
-}
-
-function createTileLayer() {
-  const tilesFromZone = zoneStore.zone?.tiles || []
-  const uniqueTiles = new Set(tilesFromZone.flat().filter(Boolean))
-
-  const tilesetImages = Array.from(uniqueTiles).map((tile, index) => {
-    return zoneTilemap.addTilesetImage(tile, tile, config.tile_size.x, config.tile_size.y, 1, 2, index + 1, { x: 0, y: -config.tile_size.y })
-  }) as any
-
-  // Add blank tile
-  tilesetImages.push(zoneTilemap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 1, 2, 0, { x: 0, y: -config.tile_size.y }))
-  const layer = zoneTilemap.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer
-
-  layer.setDepth(0)
-  layer.setCullPadding(2, 2)
-
-  return layer
-}
-
-onBeforeMount(() => {
-  if (!zoneStore.zone?.tiles) {
-    return
-  }
-  setLayerTiles(zoneTilemap, tiles, zoneStore.zone.tiles)
-})
-
-onBeforeUnmount(() => {
-  zoneTilemap.destroyLayer('tiles')
-  zoneTilemap.removeAllLayers()
-  zoneTilemap.destroy()
-})
-</script>