Small change

Minor changes
#286 - Added global class for fully absolute-centering elements
2024-12-30 02:47:49 +01:00 · 2024-12-29 02:36:04 +01:00 · 2024-12-29 02:21:21 +01:00 · 2024-12-29 02:10:18 +01:00 · 2024-12-29 00:40:02 +01:00 · 2024-12-28 23:48:52 +01:00
145 changed files with 4384 additions and 2666 deletions
--- a/.env.example
+++ b/.env.example
@ -1,4 +1,4 @@
-VITE_NAME=New Quest
+VITE_NAME=Noxious
 VITE_DEVELOPMENT=true
 VITE_SERVER_ENDPOINT=http://localhost:4000
 VITE_TILE_SIZE_X=64
--- a/index.html
+++ b/index.html
@ -4,7 +4,7 @@
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <title>Sylvan Quest - Play</title>
+    <title>Noxious - Play</title>
  </head>
  <body>
    <div id="app"></div>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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"
--- a/public/assets/avatar/default/walk.png
+++ b/public/assets/avatar/default/walk.png
--- a/public/assets/fog.webp
+++ b/public/assets/fog.webp
--- a/public/assets/galaxy.png
+++ b/public/assets/galaxy.png
--- a/public/assets/icons/arrow.svg
+++ b/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>
--- a/public/assets/icons/ingameUI/chat-icon.svg
+++ b/public/assets/icons/ingameUI/chat-icon.svg
--- a/public/assets/icons/ingameUI/f1-icon.png
+++ b/public/assets/icons/ingameUI/f1-icon.png
--- a/public/assets/icons/ingameUI/f2-icon.png
+++ b/public/assets/icons/ingameUI/f2-icon.png
--- a/public/assets/icons/ingameUI/f3-icon.png
+++ b/public/assets/icons/ingameUI/f3-icon.png
--- a/public/assets/icons/ingameUI/f4-icon.png
+++ b/public/assets/icons/ingameUI/f4-icon.png
--- a/public/assets/icons/ingameUI/f5-icon.png
+++ b/public/assets/icons/ingameUI/f5-icon.png
--- a/public/assets/icons/ingameUI/f6-icon.png
+++ b/public/assets/icons/ingameUI/f6-icon.png
--- a/public/assets/icons/ingameUI/f7-icon.png
+++ b/public/assets/icons/ingameUI/f7-icon.png
--- a/public/assets/icons/ingameUI/f8-icon.png
+++ b/public/assets/icons/ingameUI/f8-icon.png
--- a/public/assets/icons/ingameUI/map-icon.svg
+++ b/public/assets/icons/ingameUI/map-icon.svg
--- a/public/assets/icons/ingameUI/menu-icon.svg
+++ b/public/assets/icons/ingameUI/menu-icon.svg
--- a/public/assets/icons/ingameUI/socials-icon.svg
+++ b/public/assets/icons/ingameUI/socials-icon.svg
--- a/public/assets/icons/male-icon.svg
+++ b/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>
--- a/public/assets/icons/modal/close-button-white.svg
+++ b/public/assets/icons/modal/close-button-white.svg
@ -1,3 +1,3 @@
-<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.91481 9.08504C7.71955 9.2803 7.40297 9.2803 7.20771 9.08504L5.55709 7.43442C5.36183 7.23916 5.04524 7.23916 4.84998 7.43442L2.99578 9.28862C2.80052 9.48389 2.48393 9.48389 2.28867 9.28863L1.00416 8.00412C0.808899 7.80885 0.808899 7.49227 1.00416 7.29701L2.85837 5.4428C3.05363 5.24754 3.05363 4.93096 2.85837 4.7357L0.914865 2.7922C0.719603 2.59693 0.719603 2.28035 0.914865 2.08509L2.07053 0.929423C2.26579 0.734161 2.58238 0.734162 2.77764 0.929424L4.72114 2.87293C4.9164 3.06819 5.23298 3.06819 5.42825 2.87293L7.297 1.00417C7.49226 0.808906 7.80885 0.808906 8.00411 1.00417L9.28862 2.28868C9.48388 2.48394 9.48388 2.80052 9.28862 2.99578L7.41986 4.86454C7.2246 5.0598 7.2246 5.37639 7.41986 5.57165L9.07048 7.22227C9.26574 7.41753 9.26574 7.73411 9.07048 7.92937L7.91481 9.08504Z" fill="white"/>
+<path d="M7.91481 9.08504C7.71955 9.2803 7.40297 9.2803 7.20771 9.08504L5.55709 7.43442C5.36183 7.23916 5.04524 7.23916 4.84998 7.43442L2.99578 9.28862C2.80052 9.48389 2.48393 9.48389 2.28867 9.28863L1.00416 8.00412C0.808899 7.80885 0.808899 7.49227 1.00416 7.29701L2.85837 5.4428C3.05363 5.24754 3.05363 4.93096 2.85837 4.7357L0.914865 2.7922C0.719603 2.59693 0.719603 2.28035 0.914865 2.08509L2.07053 0.929423C2.26579 0.734161 2.58238 0.734162 2.77764 0.929424L4.72114 2.87293C4.9164 3.06819 5.23298 3.06819 5.42825 2.87293L7.297 1.00417C7.49226 0.808906 7.80885 0.808906 8.00411 1.00417L9.28862 2.28868C9.48388 2.48394 9.48388 2.80052 9.28862 2.99578L7.41986 4.86454C7.2246 5.0598 7.2246 5.37639 7.41986 5.57165L9.07048 7.22227C9.26574 7.41753 9.26574 7.73411 9.07048 7.92937L7.91481 9.08504Z" fill="white"/>
-</svg>
+</svg>
--- a/public/assets/icons/modal/full-screen.svg
+++ b/public/assets/icons/modal/full-screen.svg
--- a/public/assets/icons/modal/increase-size-option.svg
+++ b/public/assets/icons/modal/increase-size-option.svg
--- a/public/assets/icons/modal/minimize.svg
+++ b/public/assets/icons/modal/minimize.svg
--- a/public/assets/icons/modal/modalFullscreen.svg
+++ b/public/assets/icons/modal/modalFullscreen.svg
--- a/public/assets/icons/modal/resize-icon.svg
+++ b/public/assets/icons/modal/resize-icon.svg
--- a/public/assets/icons/submit-icon.svg
+++ b/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>
--- a/public/assets/icons/treasure-chest.png
+++ b/public/assets/icons/treasure-chest.png
--- a/public/assets/icons/triangle-icon.svg
+++ b/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>
--- a/public/assets/icons/x-button-gray.svg
+++ b/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>
--- a/public/assets/avatar/default/0.png
+++ b/public/assets/avatar/default/0.png
--- a/public/assets/avatar/default/head.png
+++ b/public/assets/avatar/default/head.png
--- a/public/assets/raindrop.webp
+++ b/public/assets/raindrop.webp
--- a/public/assets/shapes/character-select-shape.svg
+++ b/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>
--- a/public/assets/shapes/hud-shape-empty.svg
+++ b/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>
--- a/public/assets/shapes/hud-shape.svg
+++ b/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>
--- a/public/assets/shapes/select-screen-bg-shape.svg
+++ b/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>
--- a/public/assets/tlogo.png
+++ b/public/assets/tlogo.png
--- a/public/assets/ui-elements/button-ui-box-textured-small.svg
+++ b/public/assets/ui-elements/button-ui-box-textured-small.svg
--- a/public/assets/ui-elements/button-ui-box-textured.svg
+++ b/public/assets/ui-elements/button-ui-box-textured.svg
--- a/public/assets/ui-elements/ui-border-4-corners-light.svg
+++ b/public/assets/ui-elements/ui-border-4-corners-light.svg
--- a/public/assets/ui-elements/character-select-ui-shape.svg
+++ b/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>
--- a/public/assets/ui-elements/ui-rect-border-4-corners.svg
+++ b/public/assets/ui-elements/ui-rect-border-4-corners.svg
--- a/public/assets/ui-elements/login-ui-box-inner.svg
+++ b/public/assets/ui-elements/login-ui-box-inner.svg
--- a/public/assets/ui-elements/login-ui-box-outer.svg
+++ b/public/assets/ui-elements/login-ui-box-outer.svg
--- a/public/assets/ui-elements/ui-box-inner.svg
+++ b/public/assets/ui-elements/ui-box-inner.svg
--- a/public/assets/ui-elements/ui-box-outer.svg
+++ b/public/assets/ui-elements/ui-box-outer.svg
--- a/public/assets/zone/tile_2.png
+++ b/public/assets/zone/tile_2.png
--- a/public/assets/zone/tiles.png
+++ b/public/assets/zone/tiles.png
--- a/public/assets/zone/wall1.png
+++ b/public/assets/zone/wall1.png
--- a/public/assets/zone/wall2.png
+++ b/public/assets/zone/wall2.png
--- a/public/assets/zone/walls.png
+++ b/public/assets/zone/walls.png
--- a/src/App.vue
+++ b/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 Login from '@/components/screens/Login.vue'
-import Characters from '@/screens/Characters.vue'
+import Characters from '@/components/screens/Characters.vue'
-import Game from '@/screens/Game.vue'
+import Game from '@/components/screens/Game.vue'
-// import Loading from '@/screens/Loading.vue'
+import ZoneEditor from '@/components/screens/ZoneEditor.vue'
-import ZoneEditor from '@/screens/ZoneEditor.vue'
+import { computed, watch } from 'vue'
 import { computed } 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>
--- a/src/application/config.ts
+++ b/src/application/config.ts
--- a/src/application/types.ts
+++ b/src/application/types.ts
@ -4,14 +4,24 @@ export type Notification = {
  message?: string
 }
-export type AssetT = {
+export type HttpResponse<T> = {
  success: boolean
  message?: string
  data?: T
 }
 export type AssetDataT = {
  key: string
-  url: string
+  data: string
  group: 'tiles' | 'objects' | 'sprites' | 'sprite_animations' | 'sound' | 'music' | 'ui' | 'font' | 'other'
  updatedAt: Date
-  frameCount?: number
+  originX?: number
  originY?: number
  isAnimated?: boolean
  frameRate?: number
  frameWidth?: number
  frameHeight?: number
  frameCount?: number
 }
 export type Tile = {
@ -29,7 +39,7 @@ export type Object = {
  originX: number
  originY: number
  isAnimated: boolean
-  frameSpeed: number
+  frameRate: number
  frameWidth: number
  frameHeight: number
  createdAt: Date
@ -41,12 +51,18 @@ export type Item = {
  id: string
  name: string
  description: string | null
  itemType: ItemType
  stackable: boolean
  rarity: ItemRarity
  spriteId: string | null
  sprite?: Sprite
  createdAt: Date
  updatedAt: Date
  characters: CharacterItem[]
 }
 export type ItemType = 'WEAPON' | 'HELMET' | 'CHEST' | 'LEGS' | 'BOOTS' | 'GLOVES' | 'RING' | 'NECKLACE'
 export type ItemRarity = 'COMMON' | 'UNCOMMON' | 'RARE' | 'EPIC' | 'LEGENDARY'
 export type Zone = {
  id: number
  name: string
@ -136,6 +152,7 @@ export type CharacterType = {
  name: string
  gender: CharacterGender
  race: CharacterRace
  isSelectable: boolean
  characters: Character[]
  spriteId?: string
  sprite?: Sprite
@ -143,6 +160,14 @@ export type CharacterType = {
  updatedAt: Date
 }
 export type CharacterHair = {
  id: number
  name: string
  sprite: Sprite
  gender: CharacterGender
  isSelectable: boolean
 }
 export type Character = {
  id: number
  userId: number
@ -157,15 +182,19 @@ export type Character = {
  positionX: number
  positionY: number
  rotation: number
  zoneId: number
  zone: Zone
  characterTypeId: number | null
  characterType: CharacterType | null
  characterHairId: number | null
  characterHair: CharacterHair | null
  zoneId: number
  zone: Zone
  chats: Chat[]
  items: CharacterItem[]
  equipment: CharacterEquipment[]
 }
-export type ExtendedCharacter = Character & {
+export type ZoneCharacter = {
  character: Character
  isMoving?: boolean
 }
@ -178,6 +207,22 @@ export type CharacterItem = {
  quantity: number
 }
 export type CharacterEquipment = {
  id: number
  slot: CharacterEquipmentSlotType
  characterItemId: number
  characterItem: CharacterItem
 }
 export enum CharacterEquipmentSlotType {
  HEAD = 'HEAD',
  BODY = 'BODY',
  ARMS = 'ARMS',
  LEGS = 'LEGS',
  NECK = 'NECK',
  RING = 'RING'
 }
 export type Sprite = {
  id: string
  name: string
@ -199,7 +244,7 @@ export type SpriteAction = {
  isLooping: boolean
  frameWidth: number
  frameHeight: number
-  frameSpeed: number
+  frameRate: number
 }
 export type Chat = {
@ -212,14 +257,21 @@ export type Chat = {
  createdAt: Date
 }
 export type ChatMessage = {
  character: Character
  message: string
 }
 export type WorldSettings = {
  date: Date
  isRainEnabled: boolean
  isFogEnabled: boolean
  fogDensity: number
 }
 export type WeatherState = {
  isRainEnabled: boolean
  rainPercentage: number
  isFogEnabled: boolean
  fogDensity: number
 }
 export type zoneLoadData = {
  zone: ZoneT
  characters: ZoneCharacter[]
 }
--- a/src/application/utilities.ts
+++ b/src/application/utilities.ts
@ -0,0 +1,25 @@
 export function uuidv4() {
  return '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, (c) => (+c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (+c / 4)))).toString(16))
 }
 export function unduplicateArray(array: any[]) {
  return [...new Set(array.flat())]
 }
 export function getDomain() {
  // Check if not localhost
  if (window.location.hostname !== 'localhost') {
    return window.location.hostname
  }
  // Check if not IP address
  if (window.location.hostname.match(/^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/)) {
    return window.location.hostname
  }
  if (window.location.hostname.split('.').length < 3) {
    return window.location.hostname
  }
  return window.location.hostname.split('.').slice(-2).join('.')
 }
--- a/src/assets/fonts/Gentium_plus.ttf
+++ b/src/assets/fonts/Gentium_plus.ttf
--- a/src/assets/scss/main.scss
+++ b/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,8 +126,9 @@ 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;
+      @apply bg-gray border-gray;
    }
  }
@ -123,6 +139,28 @@ 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 bg-gray bg-none
 }
 .hair-deselect:has(:checked) {
  img {
    @apply brightness-200;
  }
 }
 .default-border {
  @apply border border-solid border-gray-500;
 }
 .center-element {
  @apply absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2;
 }
 .text-pixel {
@ -133,6 +171,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;
--- a/src/components/Effects.vue
+++ b/src/components/Effects.vue
@ -1,110 +1,179 @@
 <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 '@/application/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)
 const zoneEffectsReady = ref(false)
-// Effect-related refs
+// Effect objects
-const lightEffect = ref<Phaser.GameObjects.Graphics | null>(null)
+const effects = {
-const rainEmitter = ref<Phaser.GameObjects.Particles.ParticleEmitter | null>(null)
+  light: ref<Phaser.GameObjects.Graphics | null>(null),
-const fogSprite = ref<Phaser.GameObjects.Sprite | 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)
+  initializeEffects(scene)
-  createRainEffect(scene)
+  setupSocketListeners()
  createFogEffect(scene)
 }
 const initializeEffects = (scene: Phaser.Scene) => {
  // Light
  effects.light.value = scene.add.graphics().setDepth(1000)
  // Rain
  effects.rain.value = scene.add
    .particles(0, 0, 'raindrop', {
      x: { min: 0, max: window.innerWidth },
      y: -50,
      quantity: 5,
      lifespan: 2000,
      speedY: { min: 300, max: 500 },
      scale: { start: 0.005, end: 0.005 },
      alpha: { start: 0.5, end: 0 },
      blendMode: 'ADD'
    })
    .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)
 }
 // Effect updates
 const updateScene = () => {
-  updateEffects()
+  const timeBasedLight = calculateLightStrength(gameStore.world.date)
-}
+  const zoneEffects = zoneStore.zone?.zoneEffects?.reduce(
    (acc, curr) => ({
      ...acc,
      [curr.effect]: curr.strength
    }),
    {}
  ) as { [key: string]: number }
-const createLightEffect = (scene: Phaser.Scene) => {
+  // Only update effects once zoneEffects are loaded
-  lightEffect.value = scene.add.graphics()
+  if (!zoneEffectsReady.value) {
-  lightEffect.value.setDepth(1000)
+    if (zoneEffects && Object.keys(zoneEffects).length) {
-}
+      zoneEffectsReady.value = true
-
+    } else {
-const createRainEffect = (scene: Phaser.Scene) => {
+      return
  rainEmitter.value = scene.add.particles(0, 0, 'raindrop', {
    x: { min: 0, max: window.innerWidth },
    y: -50,
    quantity: 5,
    lifespan: 2000,
    speedY: { min: 300, max: 500 },
    scale: { start: 0.005, end: 0.005 },
    alpha: { start: 0.5, end: 0 },
    blendMode: 'ADD'
  })
  rainEmitter.value.setDepth(900)
  rainEmitter.value.stop()
 }
 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)
 }
 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 finalEffects =
    zoneEffects && Object.keys(zoneEffects).length
      ? zoneEffects
      : {
          light: timeBasedLight,
          rain: weatherState.value.isRainEnabled ? weatherState.value.rainPercentage : 0,
          fog: weatherState.value.isFogEnabled ? weatherState.value.fogDensity * 100 : 0
        }
  applyEffects(finalEffects)
 }
-const updateLightEffect = (strength: number) => {
+const applyEffects = (effectValues: any) => {
-  if (!lightEffect.value) return
+  if (effects.light.value) {
-  const darkness = 1 - strength / 100
+    const darkness = 1 - (effectValues.light ?? 100) / 100
-  lightEffect.value.clear()
+    effects.light.value.clear().fillStyle(0x000000, darkness).fillRect(0, 0, window.innerWidth, window.innerHeight)
-  lightEffect.value.fillStyle(0x000000, darkness)
+  }
  lightEffect.value.fillRect(0, 0, window.innerWidth, window.innerHeight)
 }
-const updateRainEffect = (strength: number) => {
+  if (effects.rain.value) {
-  if (!rainEmitter.value) return
+    const strength = effectValues.rain ?? 0
-  if (strength > 0) {
+    strength > 0 ? effects.rain.value.start().setQuantity(Math.floor((strength / 100) * 10)) : effects.rain.value.stop()
-    rainEmitter.value.start()
+  }
-    rainEmitter.value.setQuantity(Math.floor((strength / 100) * 10))
+
-  } else {
+  if (effects.fog.value) {
-    rainEmitter.value.stop()
+    effects.fog.value.setAlpha((effectValues.fog ?? 0) / 100)
  }
 }
-const updateFogEffect = (strength: number) => {
+const calculateLightStrength = (time: Date): number => {
-  if (!fogSprite.value) return
+  const hour = time.getHours()
-  fogSprite.value.setAlpha(strength / 100)
+  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)
 }
-watch(() => zoneStore.zone?.zoneEffects, updateEffects, { deep: true })
+// 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,
  () => {
    zoneEffectsReady.value = false
    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>
--- a/src/components/game/character/Character.vue
+++ b/src/components/game/character/Character.vue
@ -1,29 +1,26 @@
 <template>
-  <!--  Chat bubble -->
+  <ChatBubble :zoneCharacter="props.zoneCharacter" :currentX="currentX" :currentY="currentY" />
-  <Container ref="charChatContainer" :depth="999" :x="currentX" :y="currentY">
+  <Healthbar :zoneCharacter="props.zoneCharacter" :currentX="currentX" :currentY="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 -->
  <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" />
    <!--    <CharacterChest :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 config from '@/application/config'
-import { type ExtendedCharacter } from '@/types'
+import { type Sprite as SpriteT, type ZoneCharacter } from '@/application/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, refObj, Sprite, 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'
 // import CharacterChest from '@/components/game/character/partials/CharacterChest.vue'
 enum Direction {
  POSITIVE,
@ -33,14 +30,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 +73,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 +104,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 +126,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 +138,29 @@ watch(
  }
 )
-watch(() => props.character.isMoving, updateSprite)
+watch(() => props.zoneCharacter, updateSprite)
-watch(() => props.character.rotation, 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`)
+  charContainer.value!.setName(props.zoneCharacter.character!.name)
  charChatContainer.value!.setVisible(false)
  charContainer.value!.setName(props.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.startFollow(charContainer.value as Phaser.GameObjects.Container)
-    scene.cameras.main.stopFollow()
+    // scene.cameras.main.stopFollow()
  }
-  // Set sprite
+  updatePosition(props.zoneCharacter.character.positionX, props.zoneCharacter.character.positionY, props.zoneCharacter.character.rotation)
  charSprite.value!.setTexture(charTexture.value)
  charSprite.value!.setFlipX(isFlippedX.value)
  updatePosition(props.character.positionX, props.character.positionY, props.character.rotation)
 })
 onUnmounted(() => {
--- a/src/components/game/character/partials/CharacterChest.vue
+++ b/src/components/game/character/partials/CharacterChest.vue
@ -0,0 +1,51 @@
 <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 '@/application/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 imageProps = computed(() => {
  // Get the current sprite action based on direction
  const direction = [0, 6].includes(props.zoneCharacter.character.rotation ?? 0) ? 'back' : 'front'
  const spriteAction = props.zoneCharacter.character.characterHair?.sprite?.spriteActions?.find((spriteAction) => spriteAction.action === direction)
  return {
    depth: 1,
    originX: Number(spriteAction?.originX) ?? 0,
    originY: Number(spriteAction?.originY) ?? 0,
    flipX: isFlippedX.value,
    texture: texture.value
    // y: props.zoneCharacter.isMoving ? Math.floor(Date.now() / 250) % 2 : 0
  }
 })
 loadSpriteTextures(scene, props.zoneCharacter.character.characterHair?.sprite as SpriteT)
  .then(() => {})
  .catch((error) => {
    console.error('Error loading texture:', error)
  })
 </script>
--- a/src/components/game/character/partials/CharacterHair.vue
+++ b/src/components/game/character/partials/CharacterHair.vue
@ -0,0 +1,51 @@
 <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 '@/application/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 imageProps = computed(() => {
  // Get the current sprite action based on direction
  const direction = [0, 6].includes(props.zoneCharacter.character.rotation ?? 0) ? 'back' : 'front'
  const spriteAction = props.zoneCharacter.character.characterHair?.sprite?.spriteActions?.find((spriteAction) => spriteAction.action === direction)
  return {
    depth: 1,
    originX: Number(spriteAction?.originX) ?? 0,
    originY: Number(spriteAction?.originY) ?? 0,
    flipX: isFlippedX.value,
    texture: texture.value,
    y: props.zoneCharacter.isMoving ? Math.floor(Date.now() / 250) % 2 : 0
  }
 })
 loadSpriteTextures(scene, props.zoneCharacter.character.characterHair?.sprite as SpriteT)
  .then(() => {})
  .catch((error) => {
    console.error('Error loading texture:', error)
  })
 </script>
--- a/src/components/game/character/partials/ChatBubble.vue
+++ b/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 '@/application/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>
--- a/src/components/game/character/partials/Healthbar.vue
+++ b/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 '@/application/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>
--- a/src/components/game/zone/Characters.vue
+++ b/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>
--- a/src/components/game/zone/Zone.vue
+++ b/src/components/game/zone/Zone.vue
@ -0,0 +1,50 @@
 <template>
  <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, onMounted, onBeforeMount } from 'vue'
 import { useScene } from 'phavuer'
 import { useGameStore } from '@/stores/gameStore'
 import { useZoneStore } from '@/stores/zoneStore'
 import { loadZoneTilesIntoScene } from '@/composables/zoneComposable'
 import type { Zone as ZoneT, ZoneCharacter, zoneLoadData } from '@/application/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()
 const tileMap = ref(null as Phaser.Tilemaps.Tilemap | null)
 onUnmounted(() => {
  zoneStore.reset()
  gameStore.connection!.off('zone:character:teleport')
  gameStore.connection!.off('zone:character:join')
  gameStore.connection!.off('zone:character:leave')
  gameStore.connection!.off('zone:character:move')
 })
 // Event listeners
 gameStore.connection!.on('zone:character:teleport', async (data: zoneLoadData) => {
  await loadZoneTilesIntoScene(data.zone, scene)
  zoneStore.setZone(data.zone)
  zoneStore.setCharacters(data.characters)
 })
 gameStore.connection!.on('zone:character:join', async (data: ZoneCharacter) => {
  zoneStore.addCharacter(data)
 })
 gameStore.connection!.on('zone:character:leave', (characterId: number) => {
  zoneStore.removeCharacter(characterId)
 })
 gameStore.connection!.on('zone:character:move', (data: { id: number; positionX: number; positionY: number; rotation: number; isMoving: boolean }) => {
  zoneStore.updateCharacterPosition(data)
 })
 </script>
--- a/src/components/game/zone/ZoneObjects.vue
+++ b/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()
--- a/src/components/game/zone/ZoneTiles.vue
+++ b/src/components/game/zone/ZoneTiles.vue
@ -0,0 +1,69 @@
 <template>
  <Controls :layer="tileLayer" :depth="0" />
 </template>
 <script setup lang="ts">
 import config from '@/application/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 '@/application/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>
--- a/src/components/game/zone/partials/ZoneObject.vue
+++ b/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 '@/application/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>
--- a/src/components/gameMaster/GmPanel.vue
+++ b/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>
--- a/src/components/gameMaster/GmTools.vue
+++ b/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>
--- a/src/components/gameMaster/assetManager/AssetManager.vue
+++ b/src/components/gameMaster/assetManager/AssetManager.vue
@ -1,70 +1,60 @@
 <template>
-  <div class="flex h-full w-full relative">
+  <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">
+    <div class="w-2/12 flex flex-col relative overflow-auto rounded-md default-border bg-gray p-2.5">
      <!-- Asset Categories -->
-      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'tiles' }" @click="() => (selectedCategory = 'tiles')">
+      <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group" :class="{ 'bg-cyan': selectedCategory === 'tiles' }" @click="() => (selectedCategory = 'tiles')">
-        <span :class="{ 'text-white': selectedCategory === 'tiles' }">Tiles</span>
+        <span class="group-hover:text-white" :class="{ 'text-white': selectedCategory === 'tiles' }">Tiles</span>
        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
      </a>
-      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'objects' }" @click="() => (selectedCategory = 'objects')">
+      <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group" :class="{ 'bg-cyan': selectedCategory === 'objects' }" @click="() => (selectedCategory = 'objects')">
-        <span :class="{ 'text-white': selectedCategory === 'objects' }">Objects</span>
+        <span class="group-hover:text-white" :class="{ 'text-white': selectedCategory === 'objects' }">Objects</span>
        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
      </a>
-      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'sprites' }" @click="() => (selectedCategory = 'sprites')">
+      <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group" :class="{ 'bg-cyan': selectedCategory === 'sprites' }" @click="() => (selectedCategory = 'sprites')">
-        <span :class="{ 'text-white': selectedCategory === 'sprites' }">Sprites</span>
+        <span class="group-hover:text-white" :class="{ 'text-white': selectedCategory === 'sprites' }">Sprites</span>
        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
      </a>
-      <a class="relative p-2.5 hover:cursor-pointer">
+      <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group" :class="{ 'bg-cyan': selectedCategory === 'items' }" @click="() => (selectedCategory = 'items')">
-        <span>Items</span>
+        <span class="group-hover:text-white" :class="{ 'text-white': selectedCategory === 'items' }">Items</span>
        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
      </a>
-      <a class="relative p-2.5 hover:cursor-pointer">
+      <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group">
-        <span>NPC's</span>
+        <span class="group-hover:text-white">NPC's</span>
        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
      </a>
-      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'shops' }" @click="() => (selectedCategory = 'shops')">
+      <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="{ 'text-white': selectedCategory === 'shops' }">Shops</span>
+        <span class="group-hover:text-white" :class="{ 'text-white': selectedCategory === 'shops' }">Shops</span>
        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
      </a>
-      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'characterTypes' }" @click="() => (selectedCategory = 'characterTypes')">
+      <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="{ 'text-white': selectedCategory === 'characterTypes' }">Character types</span>
+        <span class="group-hover:text-white" :class="{ 'text-white': selectedCategory === 'characterTypes' }">Character types</span>
        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
      </a>
-      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'characterHair' }" @click="() => (selectedCategory = 'characterHair')">
+      <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="{ 'text-white': selectedCategory === 'characterHair' }">Character hair</span>
+        <span class="group-hover:text-white" :class="{ 'text-white': selectedCategory === 'characterHair' }">Character hair</span>
        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
      </a>
-      <a class="relative p-2.5 hover:cursor-pointer">
+      <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group">
-        <span>Mounts</span>
+        <span class="group-hover:text-white">Mounts</span>
        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
      </a>
-      <a class="relative p-2.5 hover:cursor-pointer">
+      <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group">
-        <span>Pets</span>
+        <span class="group-hover:text-white">Pets</span>
        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
      </a>
-      <a class="relative p-2.5 hover:cursor-pointer">
+      <a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group">
-        <span>Emoticons</span>
+        <span class="group-hover:text-white">Emoticons</span>
        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
      </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">
      <TileList v-if="selectedCategory === 'tiles'" />
      <ObjectList v-if="selectedCategory === 'objects'" />
      <SpriteList v-if="selectedCategory === 'sprites'" />
      <ItemList v-if="selectedCategory === 'items'" />
      <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-7/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" />
      <ItemDetails v-if="selectedCategory === 'items' && assetManagerStore.selectedItem" />
      <CharacterTypeDetails v-if="selectedCategory === 'characterTypes' && assetManagerStore.selectedCharacterType" />
      <CharacterHairDetails v-if="selectedCategory === 'characterHair' && assetManagerStore.selectedCharacterHair" />
    </div>
  </div>
 </template>
@ -80,6 +70,10 @@ 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'
 import ItemList from '@/components/gameMaster/assetManager/partials/item/itemList.vue'
 import ItemDetails from '@/components/gameMaster/assetManager/partials/item/itemDetails.vue'
 const assetManagerStore = useAssetManagerStore()
 const selectedCategory = ref('tiles')
--- a/src/components/gameMaster/assetManager/partials/characterHair/CharacterHairDetails.vue
+++ b/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 default-border bg-gray">
      <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="isSelectable">Is selectable</label>
          <select v-model="characterIsSelectable" class="input-field" name="isSelectable">
            <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 '@/application/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 characterIsSelectable = 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
  characterIsSelectable.value = selectedCharacterHair.value.isSelectable
  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,
    isSelectable: characterIsSelectable.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
  characterIsSelectable.value = characterHair.isSelectable
  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>
--- a/src/components/gameMaster/assetManager/partials/characterHair/CharacterHairList.vue
+++ b/src/components/gameMaster/assetManager/partials/characterHair/CharacterHairList.vue
@ -0,0 +1,99 @@
 <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 default-border bg-gray" @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="invert w-8 h-8 center-element 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 '@/application/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>
--- a/src/components/gameMaster/assetManager/partials/characterType/CharacterTypeDetails.vue
+++ b/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 default-border bg-gray">
      <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>
+          <label for="isSelectable">Is selectable</label>
-          <input v-model="characterSpriteId" class="input-field" type="text" name="spriteId" placeholder="Sprite ID" />
+          <select v-model="characterIsSelectable" class="input-field" name="isSelectable">
            <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 '@/application/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 characterIsSelectable = 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
  characterIsSelectable.value = selectedCharacterType.value.isSelectable
  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,
    isSelectable: characterIsSelectable.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
  characterIsSelectable.value = characterType.isSelectable
  characterSpriteId.value = characterType.spriteId
 })
 onMounted(() => {
  if (!selectedCharacterType.value) return
  gameStore.connection?.emit('gm:sprite:list', {}, (response: Sprite[]) => {
    assetManagerStore.setSpriteList(response)
  })
 })
 onBeforeUnmount(() => {
--- a/src/components/gameMaster/assetManager/partials/characterType/CharacterTypeList.vue
+++ b/src/components/gameMaster/assetManager/partials/characterType/CharacterTypeList.vue
@ -1,27 +1,33 @@
 <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 default-border bg-gray" @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">
-      <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 class="fixed min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
-    </button>
+        <img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
      </button>
    </div>
  </div>
 </template>
@ -29,7 +35,7 @@
 import { useGameStore } from '@/stores/gameStore'
 import { onMounted, ref, computed } from 'vue'
 import { useAssetManagerStore } from '@/stores/assetManagerStore'
-import type { CharacterType } from '@/types'
+import type { CharacterType } from '@/application/types'
 import { useVirtualList } from '@vueuse/core'
 const gameStore = useGameStore()
--- a/src/components/gameMaster/assetManager/partials/item/itemDetails.vue
+++ b/src/components/gameMaster/assetManager/partials/item/itemDetails.vue
@ -0,0 +1,143 @@
 <template>
  <div class="h-full overflow-auto">
    <div class="p-2.5 block rounded-md default-border bg-gray">
      <form class="flex gap-2.5 flex-wrap" @submit.prevent="saveItem">
        <div class="form-field-full">
          <label for="name">Name</label>
          <input v-model="itemName" class="input-field" type="text" name="name" placeholder="Item Name" />
        </div>
        <div class="form-field-full">
          <label for="description">Description</label>
          <input v-model="itemDescription" class="input-field" type="text" name="description" placeholder="Item Description" />
        </div>
        <div class="form-field-full">
          <label for="itemType">Type</label>
          <select v-model="itemType" class="input-field" name="itemType">
            <option v-for="type in itemTypeOptions" :key="type" :value="type">{{ type }}</option>
          </select>
        </div>
        <div class="form-field-full">
          <label for="rarity">Rarity</label>
          <select v-model="itemRarity" class="input-field" name="rarity">
            <option v-for="rarity in rarityOptions" :key="rarity" :value="rarity">{{ rarity }}</option>
          </select>
        </div>
        <div class="form-field-full">
          <label for="stackable">Stackable</label>
          <select v-model="itemStackable" class="input-field" name="stackable">
            <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="itemSpriteId" 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="removeItem">Remove</button>
      </form>
    </div>
  </div>
 </template>
 <script setup lang="ts">
 import type { Item, ItemType, ItemRarity } from '@/application/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 selectedItem = computed(() => assetManagerStore.selectedItem)
 const itemName = ref('')
 const itemDescription = ref('')
 const itemType = ref<ItemType>('WEAPON' as ItemType)
 const itemRarity = ref<ItemRarity>('COMMON' as ItemRarity)
 const itemStackable = ref<boolean>(false)
 const itemSpriteId = ref<string | null | undefined>(null)
 const itemTypeOptions: ItemType[] = ['WEAPON', 'HELMET', 'CHEST', 'LEGS', 'BOOTS', 'GLOVES', 'RING', 'NECKLACE']
 const rarityOptions: ItemRarity[] = ['COMMON', 'UNCOMMON', 'RARE', 'EPIC', 'LEGENDARY']
 if (!selectedItem.value) {
  console.error('No item selected')
 }
 if (selectedItem.value) {
  itemName.value = selectedItem.value.name
  itemDescription.value = selectedItem.value.description || ''
  itemType.value = selectedItem.value.itemType
  itemRarity.value = selectedItem.value.rarity
  itemStackable.value = selectedItem.value.stackable
  itemSpriteId.value = selectedItem.value.spriteId
 }
 function removeItem() {
  if (!selectedItem.value) return
  gameStore.connection?.emit('gm:item:remove', { id: selectedItem.value.id }, (response: boolean) => {
    if (!response) {
      console.error('Failed to remove item')
      return
    }
    refreshItemList()
  })
 }
 function refreshItemList(unsetSelectedItem = true) {
  gameStore.connection?.emit('gm:item:list', {}, (response: Item[]) => {
    assetManagerStore.setItemList(response)
    if (unsetSelectedItem) {
      assetManagerStore.setSelectedItem(null)
    }
  })
 }
 function saveItem() {
  const itemData = {
    id: selectedItem.value!.id,
    name: itemName.value,
    description: itemDescription.value,
    itemType: itemType.value,
    rarity: itemRarity.value,
    stackable: itemStackable.value,
    spriteId: itemSpriteId.value
  }
  gameStore.connection?.emit('gm:item:update', itemData, (response: boolean) => {
    if (!response) {
      console.error('Failed to save item')
      return
    }
    refreshItemList(false)
  })
 }
 watch(selectedItem, (item: Item | null) => {
  if (!item) return
  itemName.value = item.name
  itemDescription.value = item.description || ''
  itemType.value = item.itemType
  itemRarity.value = item.rarity
  itemStackable.value = item.stackable
  itemSpriteId.value = item.spriteId
 })
 onMounted(() => {
  if (!selectedItem.value) return
  gameStore.connection?.emit('gm:sprite:list', {}, (response: Sprite[]) => {
    assetManagerStore.setSpriteList(response)
  })
 })
 onBeforeUnmount(() => {
  assetManagerStore.setSelectedItem(null)
 })
 </script>
--- a/src/components/gameMaster/assetManager/partials/item/itemList.vue
+++ b/src/components/gameMaster/assetManager/partials/item/itemList.vue
@ -0,0 +1,95 @@
 <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-item" 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-item" @click="createNewItem">
        <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 default-border bg-gray" @scroll="onScroll">
    <div v-bind="wrapperProps" ref="elementToScroll">
      <a v-for="{ data: item } in list" :key="item.id" class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group" :class="{ 'bg-cyan': assetManagerStore.selectedItem?.id === item.id }" @click="assetManagerStore.setSelectedItem(item as Item)">
        <div class="flex items-center gap-2.5">
          <span class="group-hover:text-white" :class="{ 'text-white': assetManagerStore.selectedItem?.id === item.id }">
            {{ item.name }}
            <small class="text-gray-400">({{ item.itemType }})</small>
          </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="invert w-8 h-8 center-element 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 { Item } from '@/application/types'
 import { useVirtualList } from '@vueuse/core'
 const gameStore = useGameStore()
 const assetManagerStore = useAssetManagerStore()
 const searchQuery = ref('')
 const hasScrolled = ref(false)
 const elementToScroll = ref()
 const handleSearch = () => {
  virtualList.value?.scrollTo(0)
 }
 const createNewItem = () => {
  gameStore.connection?.emit('gm:item:create', {}, (response: boolean) => {
    if (!response) {
      console.error('Failed to create new item')
      return
    }
    gameStore.connection?.emit('gm:item:list', {}, (response: Item[]) => {
      assetManagerStore.setItemList(response)
    })
  })
 }
 const filteredItems = computed(() => {
  if (!searchQuery.value) {
    return assetManagerStore.itemList
  }
  return assetManagerStore.itemList.filter((item) => item.name.toLowerCase().includes(searchQuery.value.toLowerCase()) || item.itemType.toLowerCase().includes(searchQuery.value.toLowerCase()))
 })
 const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(filteredItems, {
  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:item:list', {}, (response: Item[]) => {
    assetManagerStore.setItemList(response)
  })
 })
 </script>
--- a/src/components/gameMaster/assetManager/partials/object/ObjectDetails.vue
+++ b/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="relative p-2.5 flex flex-col items-center justify-center h-72 rounded-md default-border bg-gray">
      <div class="filler"></div>
      <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>
@ -21,19 +18,19 @@
          <input v-model="objectOriginY" class="input-field" type="number" step="any" name="origin-y" placeholder="Origin Y" />
        </div>
        <div class="form-field-full">
-          <label for="origin-x">Tags</label>
+          <label for="tags">Tags</label>
          <ChipsInput v-model="objectTags" @update:modelValue="objectTags = $event" />
        </div>
        <div class="form-field-full">
-          <label for="origin-x">Is animated</label>
+          <label for="is-animated">Is animated</label>
          <select v-model="objectIsAnimated" class="input-field" name="is-animated">
            <option :value="false">No</option>
            <option :value="true">Yes</option>
          </select>
        </div>
        <div class="form-field-full">
-          <label for="frame-speed">Frame speed</label>
+          <label for="frame-speed">Frame rate</label>
-          <input v-model="objectFrameSpeed" class="input-field" type="number" step="any" name="frame-speed" placeholder="Frame speed" />
+          <input v-model="objectFrameRate" class="input-field" type="number" step="any" name="frame-speed" placeholder="Frame rate" />
        </div>
        <div class="form-field-half">
          <label for="frame-width">Frame width</label>
@ -43,19 +40,22 @@
          <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>
-        <button class="btn-cyan px-4 py-1.5 min-w-24" type="submit">Save</button>
+        <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>
 </template>
 <script setup lang="ts">
-import type { Object } from '@/types'
+import type { Object } from '@/application/types'
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useAssetManagerStore } from '@/stores/assetManagerStore'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import { useGameStore } from '@/stores/gameStore'
-import config from '@/config'
+import config from '@/application/config'
 import ChipsInput from '@/components/forms/ChipsInput.vue'
 const gameStore = useGameStore()
@ -69,7 +69,7 @@ const objectTags = ref<string[]>([])
 const objectOriginX = ref(0)
 const objectOriginY = ref(0)
 const objectIsAnimated = ref(false)
-const objectFrameSpeed = ref(0)
+const objectFrameRate = ref(0)
 const objectFrameWidth = ref(0)
 const objectFrameHeight = ref(0)
@ -83,7 +83,7 @@ if (selectedObject.value) {
  objectOriginX.value = selectedObject.value.originX
  objectOriginY.value = selectedObject.value.originY
  objectIsAnimated.value = selectedObject.value.isAnimated
-  objectFrameSpeed.value = selectedObject.value.frameSpeed
+  objectFrameRate.value = selectedObject.value.frameRate
  objectFrameWidth.value = selectedObject.value.frameWidth
  objectFrameHeight.value = selectedObject.value.frameHeight
 }
@ -127,7 +127,7 @@ function saveObject() {
      originX: objectOriginX.value,
      originY: objectOriginY.value,
      isAnimated: objectIsAnimated.value,
-      frameSpeed: objectFrameSpeed.value,
+      frameRate: objectFrameRate.value,
      frameWidth: objectFrameWidth.value,
      frameHeight: objectFrameHeight.value
    },
@ -148,7 +148,7 @@ watch(selectedObject, (object: Object | null) => {
  objectOriginX.value = object.originX
  objectOriginY.value = object.originY
  objectIsAnimated.value = object.isAnimated
-  objectFrameSpeed.value = object.frameSpeed
+  objectFrameRate.value = object.frameRate
  objectFrameWidth.value = object.frameWidth
  objectFrameHeight.value = object.frameHeight
 })
--- a/src/components/gameMaster/assetManager/partials/object/ObjectList.vue
+++ b/src/components/gameMaster/assetManager/partials/object/ObjectList.vue
@ -1,38 +1,38 @@
 <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 default-border bg-gray" @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">
-      <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 class="fixed min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
-    </button>
+        <img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
      </button>
    </div>
  </div>
 </template>
 <script setup lang="ts">
-import config from '@/config'
+import config from '@/application/config'
 import { useGameStore } from '@/stores/gameStore'
 import { onMounted, ref, computed } from 'vue'
 import { useAssetManagerStore } from '@/stores/assetManagerStore'
-import type { Object } from '@/types'
+import type { Object } from '@/application/types'
 import { useVirtualList } from '@vueuse/core'
 const gameStore = useGameStore()
--- a/src/components/gameMaster/assetManager/partials/sprite/SpriteDetails.vue
+++ b/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="relative flex flex-col">
-      <div class="flex flex-wrap gap-2">
+      <div class="flex flex-wrap gap-2 p-2.5 rounded-md default-border bg-gray">
        <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,11 @@
        <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>
+          <button class="btn bg-indigo-500 hover:bg-indigo-600 rounded text-white px-4 py-2 flex-1 sm:flex-none" type="button" @click.prevent="copySprite">
            <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="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
            </svg>
          </button>
        </div>
      </div>
@ -51,8 +55,8 @@
              </select>
            </div>
            <div class="form-field-full" v-if="action.isAnimated">
-              <label for="frame-speed">Frame speed</label>
+              <label for="frame-speed">Frame rate</label>
-              <input v-model.number="action.frameSpeed" class="input-field" type="number" step="any" name="frame-speed" placeholder="Frame speed" />
+              <input v-model.number="action.frameRate" class="input-field" type="number" step="any" name="frame-speed" placeholder="Frame rate" />
            </div>
            <div class="form-field-full">
              <SpriteActionsInput v-model="action.sprites" />
@ -65,13 +69,13 @@
 </template>
 <script setup lang="ts">
-import type { Sprite, SpriteAction } from '@/types'
+import type { Sprite, SpriteAction } from '@/application/types'
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useAssetManagerStore } from '@/stores/assetManagerStore'
 import { useGameStore } from '@/stores/gameStore'
 import Accordion from '@/components/utilities/Accordion.vue'
 import SpriteActionsInput from '@/components/gameMaster/assetManager/partials/sprite/partials/SpriteImagesInput.vue'
-import { uuidv4 } from '@/utilities'
+import { uuidv4 } from '@/application/utilities'
 const gameStore = useGameStore()
 const assetManagerStore = useAssetManagerStore()
@ -87,7 +91,7 @@ if (!selectedSprite.value) {
 if (selectedSprite.value) {
  spriteName.value = selectedSprite.value.name
-  spriteActions.value = selectedSprite.value.spriteActions
+  spriteActions.value = sortSpriteActions(selectedSprite.value.spriteActions)
 }
 function deleteSprite() {
@ -100,6 +104,16 @@ function deleteSprite() {
  })
 }
 function copySprite() {
  gameStore.connection?.emit('gm:sprite:copy', { id: selectedSprite.value?.id }, (response: boolean) => {
    if (!response) {
      console.error('Failed to copy sprite')
      return
    }
    refreshSpriteList(false)
  })
 }
 function refreshSpriteList(unsetSelectedSprite = true) {
  gameStore.connection?.emit('gm:sprite:list', {}, (response: Sprite[]) => {
    assetManagerStore.setSpriteList(response)
@ -128,7 +142,7 @@ function saveSprite() {
          originY: action.originY,
          isAnimated: action.isAnimated,
          isLooping: action.isLooping,
-          frameSpeed: action.frameSpeed,
+          frameRate: action.frameRate,
          frameWidth: action.frameWidth,
          frameHeight: action.frameHeight
        }
@ -148,7 +162,7 @@ function addNewImage() {
  if (!selectedSprite.value) return
  const newImage: SpriteAction = {
-    id: uuidv4(), // Temporary ID, should be replaced by server-generated ID
+    id: uuidv4(),
    spriteId: selectedSprite.value.id,
    sprite: selectedSprite.value,
    action: 'new_action',
@ -157,7 +171,7 @@ function addNewImage() {
    originY: 0,
    isAnimated: false,
    isLooping: false,
-    frameSpeed: 0,
+    frameRate: 0,
    frameWidth: 0,
    frameHeight: 0
  }
@ -166,13 +180,17 @@ function addNewImage() {
    spriteActions.value = []
  }
-  spriteActions.value.push(newImage)
+  spriteActions.value = sortSpriteActions([...spriteActions.value, newImage])
 }
 function sortSpriteActions(actions: SpriteAction[]): SpriteAction[] {
  return [...actions].sort((a, b) => a.action.localeCompare(b.action))
 }
 watch(selectedSprite, (sprite: Sprite | null) => {
  if (!sprite) return
  spriteName.value = sprite.name
-  spriteActions.value = sprite.spriteActions
+  spriteActions.value = sortSpriteActions(sprite.spriteActions)
 })
 onMounted(() => {
--- a/src/components/gameMaster/assetManager/partials/sprite/SpriteList.vue
+++ b/src/components/gameMaster/assetManager/partials/sprite/SpriteList.vue
@ -1,35 +1,35 @@
 <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 default-border bg-gray" @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">
-      <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 class="fixed min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
-    </button>
+        <img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
      </button>
    </div>
  </div>
 </template>
 <script setup lang="ts">
-import config from '@/config'
+import config from '@/application/config'
 import { useGameStore } from '@/stores/gameStore'
 import { onMounted, ref, computed } from 'vue'
 import { useAssetManagerStore } from '@/stores/assetManagerStore'
 import { useVirtualList } from '@vueuse/core'
-import type { Sprite } from '@/types'
+import type { Sprite } from '@/application/types'
 const gameStore = useGameStore()
 const assetManagerStore = useAssetManagerStore()
--- a/src/components/gameMaster/assetManager/partials/sprite/partials/SpriteImagesInput.vue
+++ b/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">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <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">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        </svg>
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-      </button>
+          </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>
-    <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 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>
--- a/src/components/gameMaster/assetManager/partials/tile/TileDetails.vue
+++ b/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="relative p-2.5 flex flex-col items-center justify-center h-72 rounded-md default-border bg-gray">
      <div class="filler"></div>
      <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,19 +13,22 @@
          <label for="origin-x">Tags</label>
          <ChipsInput v-model="tileTags" @update:modelValue="tileTags = $event" />
        </div>
-        <button class="btn-cyan px-4 py-1.5 min-w-24" type="submit">Save</button>
+        <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>
 </template>
 <script setup lang="ts">
-import type { Tile } from '@/types'
+import type { Tile } from '@/application/types'
 import { computed, onBeforeUnmount, onMounted, ref, toRaw, watch } from 'vue'
 import { useAssetManagerStore } from '@/stores/assetManagerStore'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import { useGameStore } from '@/stores/gameStore'
-import config from '@/config'
+import config from '@/application/config'
 import ChipsInput from '@/components/forms/ChipsInput.vue'
 const gameStore = useGameStore()
--- a/src/components/gameMaster/assetManager/partials/tile/TileList.vue
+++ b/src/components/gameMaster/assetManager/partials/tile/TileList.vue
@ -1,38 +1,38 @@
 <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 default-border bg-gray" @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">
-      <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 class="fixed min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
-    </button>
+        <img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
      </button>
    </div>
  </div>
 </template>
 <script setup lang="ts">
-import config from '@/config'
+import config from '@/application/config'
 import { useGameStore } from '@/stores/gameStore'
 import { onMounted, ref, computed } from 'vue'
 import { useAssetManagerStore } from '@/stores/assetManagerStore'
-import type { Tile } from '@/types'
+import type { Tile } from '@/application/types'
 import { useVirtualList } from '@vueuse/core'
 const gameStore = useGameStore()
--- a/src/components/gameMaster/zoneEditor/Tiles.vue
+++ b/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>
--- a/src/components/gameMaster/zoneEditor/ZoneEditor.vue
+++ b/src/components/gameMaster/zoneEditor/ZoneEditor.vue
@ -1,9 +1,9 @@
 <template>
-  <Tiles @tilemap:create="tileMap = $event" />
+  <ZoneTiles @tileMap:create="tileMap = $event" />
-  <Objects v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
+  <ZoneObjects v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
-  <EventTiles 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 />
@ -17,8 +17,7 @@
 import { onUnmounted, ref } from 'vue'
 import { useGameStore } from '@/stores/gameStore'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
-import { type Zone } from '@/types'
+import { type Zone } from '@/application/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 ZoneTiles from '@/components/gameMaster/zoneEditor/zonePartials/ZoneTiles.vue'
-import Objects from '@/components/gameMaster/zoneEditor/Objects.vue'
+import ZoneObjects from '@/components/gameMaster/zoneEditor/zonePartials/ZoneObjects.vue'
-import EventTiles from '@/components/gameMaster/zoneEditor/EventTiles.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
--- a/src/components/gameMaster/zoneEditor/partials/CreateZone.vue
+++ b/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>
@ -40,7 +40,7 @@ import { ref } from 'vue'
 import Modal from '@/components/utilities/Modal.vue'
 import { useGameStore } from '@/stores/gameStore'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
-import type { Zone } from '@/types'
+import type { Zone } from '@/application/types'
 const gameStore = useGameStore()
 const zoneEditorStore = useZoneEditorStore()
--- a/src/components/gameMaster/zoneEditor/partials/ObjectList.vue
+++ b/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>
@ -41,24 +41,19 @@
 </template>
 <script setup lang="ts">
-import config from '@/config'
+import config from '@/application/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 '@/application/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)
--- a/src/components/gameMaster/zoneEditor/partials/SelectedZoneObject.vue
+++ b/src/components/gameMaster/zoneEditor/partials/SelectedZoneObject.vue
@ -11,7 +11,7 @@
 </template>
 <script setup lang="ts">
-import type { ZoneObject } from '@/types'
+import type { ZoneObject } from '@/application/types'
 const props = defineProps<{
  zoneObject: ZoneObject
--- a/src/components/gameMaster/zoneEditor/partials/TeleportModal.vue
+++ b/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>
@ -43,7 +43,7 @@ import { computed, onMounted, ref, watch } from 'vue'
 import Modal from '@/components/utilities/Modal.vue'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import { useGameStore } from '@/stores/gameStore'
-import type { Zone } from '@/types'
+import type { Zone } from '@/application/types'
 const showTeleportModal = computed(() => zoneEditorStore.tool === 'pencil' && zoneEditorStore.drawMode === 'teleport')
 const zoneEditorStore = useZoneEditorStore()
--- a/src/components/gameMaster/zoneEditor/partials/TileList.vue
+++ b/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)
@ -81,12 +81,12 @@
 </template>
 <script setup lang="ts">
-import config from '@/config'
+import config from '@/application/config'
 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 { Tile } from '@/types'
+import type { Tile } from '@/application/types'
 const gameStore = useGameStore()
 const isModalOpen = ref(false)
@ -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 () => {
--- a/src/components/gameMaster/zoneEditor/partials/ZoneList.vue
+++ b/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>
@ -29,7 +29,7 @@
 import { onMounted } from 'vue'
 import { useGameStore } from '@/stores/gameStore'
 import Modal from '@/components/utilities/Modal.vue'
-import type { Zone } from '@/types'
+import type { Zone } from '@/application/types'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import CreateZone from '@/components/gameMaster/zoneEditor/partials/CreateZone.vue'
--- a/src/components/gameMaster/zoneEditor/partials/ZoneSettings.vue
+++ b/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>
--- a/src/components/gameMaster/zoneEditor/zonePartials/ZoneEventTiles.vue
+++ b/src/components/gameMaster/zoneEditor/zonePartials/ZoneEventTiles.vue
@ -3,12 +3,12 @@
 </template>
 <script setup lang="ts">
-import { type ZoneEventTile, ZoneEventTileType } from '@/types'
+import { type ZoneEventTile, ZoneEventTileType } from '@/application/types'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import { Image, useScene } from 'phavuer'
 import { getTile, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
-import { uuidv4 } from '@/utilities'
+import { uuidv4 } from '@/application/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)
--- a/src/components/gameMaster/zoneEditor/zonePartials/ZoneObject.vue
+++ b/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 '@/application/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>
--- a/src/components/gameMaster/zoneEditor/zonePartials/ZoneObjects.vue
+++ b/src/components/gameMaster/zoneEditor/zonePartials/ZoneObjects.vue
@ -1,40 +1,27 @@
 <template>
-  <SelectedZoneObject v-if="selectedZoneObject" :zoneObject="selectedZoneObject" @move="moveZoneObject" @rotate="rotateZoneObject" @delete="deleteZoneObject" />
+  <SelectedZoneObject v-if="selectedZoneObject" :zoneObject="selectedZoneObject" :movingZoneObject="movingZoneObject" @move="moveZoneObject" @rotate="rotateZoneObject" @delete="deleteZoneObject" />
-  <Image v-for="object in zoneEditorStore.zone?.zoneObjects" v-bind="getImageProps(object)" @pointerup="() => (selectedZoneObject = object)" />
+  <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 { uuidv4 } from '@/application/utilities'
-import { calculateIsometricDepth, getTile, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
+import { getTile } from '@/composables/zoneComposable'
-import { Image, useScene } from 'phavuer'
+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 '@/application/types'
 const scene = useScene()
 const zoneEditorStore = useZoneEditorStore()
-const selectedZoneObject = ref<ZoneObject | null>(null)
+const selectedZoneObject = ref<ZoneObjectT | null>(null)
-const movingZoneObject = ref<ZoneObject | 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
--- a/src/components/gameMaster/zoneEditor/zonePartials/ZoneTiles.vue
+++ b/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 '@/application/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 '@/application/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>
--- a/src/components/gui/CharacterProfile.vue
+++ b/src/components/gui/CharacterProfile.vue
@ -1,115 +1,117 @@
 <template>
-  <div class="relative" v-if="gameStore.uiSettings.isCharacterProfileOpen" :style="modalStyle">
+  <div class="absolute" v-if="gameStore.uiSettings.isCharacterProfileOpen" :style="modalStyle">
-    <img src="/assets/ui-elements/profile-ui-box-outer.svg" class="absolute w-full h-full" />
+    <div class="relative">
-    <img src="/assets/ui-elements/profile-ui-box-inner.svg" class="absolute left-2 bottom-2 w-[calc(100%_-_16px)] h-[calc(100%_-_40px)]" />
+      <img src="/assets/ui-elements/profile-ui-box-outer.svg" class="absolute w-full h-full" />
-    <div @mousedown="startDrag" class="cursor-move px-5 py-2.5 flex justify-between items-center relative">
+      <img src="/assets/ui-elements/profile-ui-box-inner.svg" class="absolute left-2 bottom-2 w-[calc(100%_-_16px)] h-[calc(100%_-_40px)]" />
-      <span class="text-xs text-white font-thin">Character Profile [Alt+C]</span>
+      <div @mousedown="startDrag" class="cursor-move px-5 py-2.5 flex justify-between items-center relative">
-      <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">
+        <span class="text-xs text-white font-thin">Character Profile [Alt+C]</span>
-        <img alt="close" draggable="false" src="/assets/icons/close-button-white.svg" class="w-full h-full" />
+        <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">
-      </button>
+          <img alt="close" draggable="false" src="/assets/icons/modal/close-button-white.svg" class="w-full h-full" />
-    </div>
+        </button>
    <div class="py-4 px-6 flex flex-col gap-7 relative z-10">
      <div class="flex flex-col gap-2.5">
        <div class="flex justify-between">
          <div>
            <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]">
            <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>
        <div class="flex justify-between">
          <div class="flex flex-col gap-0.5">
            <div class="w-9 h-9 border border-solid border-gray-500 rounded-sm bg-gray relative hover:bg-gray-600">
              <span class="absolute w-full top-1/2 -translate-y-1/2 text-[6px] text-center">CROWN</span>
            </div>
            <div class="w-9 h-9 border border-solid border-gray-500 rounded-sm bg-gray relative hover:bg-gray-600">
              <span class="absolute w-full top-1/2 -translate-y-1/2 text-[6px] text-center">R-HAND</span>
            </div>
            <div class="flex gap-0.5 items-end">
              <div class="w-9 h-9 border border-solid border-gray-500 rounded-sm bg-gray relative hover:bg-gray-600">
                <span class="absolute w-full top-1/2 -translate-y-1/2 text-[6px] text-center">L-HAND</span>
              </div>
              <div class="w-6 h-6 border border-solid border-gray-500 rounded-sm bg-gray relative hover:bg-gray-600">
                <span class="absolute w-full top-1/2 -translate-y-1/2 text-[6px] text-center">RING</span>
              </div>
            </div>
          </div>
          <img src="/assets/placeholders/inventory_player.png" class="w-8 h-auto" />
          <div class="flex flex-col items-end gap-0.5">
            <div class="w-9 h-9 border border-solid border-gray-500 rounded-sm bg-gray relative hover:bg-gray-600">
              <img class="absolute w-6 h-6 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" src="/assets/icons/profile/helmet.svg" />
            </div>
            <div class="w-9 h-9 border border-solid border-gray-500 rounded-sm bg-gray relative hover:bg-gray-600">
              <img class="absolute w-6 h-6 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" src="/assets/icons/profile/chestplate.svg" />
            </div>
            <div class="flex gap-0.5 items-end">
              <div class="w-6 h-6 border border-solid border-gray-500 rounded-sm bg-gray relative hover:bg-gray-600">
                <img class="absolute w-4 h-4 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" src="/assets/icons/profile/boots.svg" />
              </div>
              <div class="w-9 h-9 border border-solid border-gray-500 rounded-sm bg-gray relative hover:bg-gray-600">
                <img class="absolute w-6 h-6 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" src="/assets/icons/profile/legs.svg" />
              </div>
            </div>
          </div>
        </div>
        <div class="flex justify-between">
          <div class="flex flex-col">
            <div class="w-[105px] h-px mb-[3px] flex justify-between">
              <div class="w-px h-full bg-gray-300"></div>
              <div class="w-[101px] h-full bg-gray-300"></div>
              <div class="w-px h-full bg-gray-300"></div>
            </div>
            <div class="flex gap-11">
              <p class="m-0 text-xs text-white tracking-wide">Health</p>
              <span class="m-0 text-xs text-white tracking-wide">+ 15</span>
            </div>
            <div class="w-[105px] h-px my-[3px] flex justify-between">
              <div class="w-px h-full bg-gray-300"></div>
              <div class="w-[101px] h-full bg-gray-300"></div>
              <div class="w-px h-full bg-gray-300"></div>
            </div>
            <div class="flex gap-11">
              <p class="m-0 text-xs text-white tracking-wide">Health</p>
              <span class="m-0 text-xs text-white tracking-wide">+ 15</span>
            </div>
            <div class="w-[105px] h-px mt-[3px] flex justify-between">
              <div class="w-px h-full bg-gray-300"></div>
              <div class="w-[101px] h-full bg-gray-300"></div>
              <div class="w-px h-full bg-gray-300"></div>
            </div>
          </div>
          <div class="flex flex-col">
            <div class="w-[105px] h-px mb-[3px] flex justify-between">
              <div class="w-px h-full bg-gray-300"></div>
              <div class="w-[101px] h-full bg-gray-300"></div>
              <div class="w-px h-full bg-gray-300"></div>
            </div>
            <div class="flex gap-11">
              <p class="m-0 text-xs text-white tracking-wide">Health</p>
              <span class="m-0 text-xs text-white tracking-wide">+ 15</span>
            </div>
            <div class="w-[105px] h-px my-[3px] flex justify-between">
              <div class="w-px h-full bg-gray-300"></div>
              <div class="w-[101px] h-full bg-gray-300"></div>
              <div class="w-px h-full bg-gray-300"></div>
            </div>
            <div class="flex gap-11">
              <p class="m-0 text-xs text-white tracking-wide">Health</p>
              <span class="m-0 text-xs text-white tracking-wide">+ 15</span>
            </div>
            <div class="w-[105px] h-px mt-[3px] flex justify-between">
              <div class="w-px h-full bg-gray-300"></div>
              <div class="w-[101px] h-full bg-gray-300"></div>
              <div class="w-px h-full bg-gray-300"></div>
            </div>
          </div>
        </div>
      </div>
-      <div class="grid grid-rows-4 grid-cols-6 gap-0.5">
+      <div class="py-4 px-6 flex flex-col gap-7 relative z-10">
-        <div v-for="n in 24" class="w-9 h-9 border border-solid border-gray-500 rounded-sm bg-gray relative hover:bg-gray-600"></div>
+        <div class="flex flex-col gap-2.5">
          <div class="flex justify-between">
            <div>
              <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/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>
          <div class="flex justify-between">
            <div class="flex flex-col gap-0.5">
              <div class="w-9 h-9 default-border rounded-sm bg-gray relative hover:bg-gray-600">
                <span class="absolute w-full top-1/2 -translate-y-1/2 text-[6px] text-center">CROWN</span>
              </div>
              <div class="w-9 h-9 default-border rounded-sm bg-gray relative hover:bg-gray-600">
                <span class="absolute w-full top-1/2 -translate-y-1/2 text-[6px] text-center">R-HAND</span>
              </div>
              <div class="flex gap-0.5 items-end">
                <div class="w-9 h-9 default-border rounded-sm bg-gray relative hover:bg-gray-600">
                  <span class="absolute w-full top-1/2 -translate-y-1/2 text-[6px] text-center">L-HAND</span>
                </div>
                <div class="w-6 h-6 default-border rounded-sm bg-gray relative hover:bg-gray-600">
                  <span class="absolute w-full top-1/2 -translate-y-1/2 text-[6px] text-center">RING</span>
                </div>
              </div>
            </div>
            <img src="/assets/placeholders/inventory_player.png" class="w-8 h-auto" />
            <div class="flex flex-col items-end gap-0.5">
              <div class="w-9 h-9 default-border rounded-sm bg-gray relative hover:bg-gray-600">
                <img class="w-6 h-6 center-element" src="/assets/icons/profile/helmet.svg" />
              </div>
              <div class="w-9 h-9 default-border rounded-sm bg-gray relative hover:bg-gray-600">
                <img class="w-6 h-6 center-element" src="/assets/icons/profile/chestplate.svg" />
              </div>
              <div class="flex gap-0.5 items-end">
                <div class="w-6 h-6 default-border rounded-sm bg-gray relative hover:bg-gray-600">
                  <img class="w-4 h-4 center-element" src="/assets/icons/profile/boots.svg" />
                </div>
                <div class="w-9 h-9 default-border rounded-sm bg-gray relative hover:bg-gray-600">
                  <img class="w-6 h-6 center-element" src="/assets/icons/profile/legs.svg" />
                </div>
              </div>
            </div>
          </div>
          <div class="flex justify-between">
            <div class="flex flex-col">
              <div class="w-[105px] h-px mb-[3px] flex justify-between">
                <div class="w-px h-full bg-gray-300"></div>
                <div class="w-[101px] h-full bg-gray-300"></div>
                <div class="w-px h-full bg-gray-300"></div>
              </div>
              <div class="flex gap-11">
                <p class="m-0 text-xs text-white tracking-wide">Health</p>
                <span class="m-0 text-xs text-white tracking-wide">+ 15</span>
              </div>
              <div class="w-[105px] h-px my-[3px] flex justify-between">
                <div class="w-px h-full bg-gray-300"></div>
                <div class="w-[101px] h-full bg-gray-300"></div>
                <div class="w-px h-full bg-gray-300"></div>
              </div>
              <div class="flex gap-11">
                <p class="m-0 text-xs text-white tracking-wide">Health</p>
                <span class="m-0 text-xs text-white tracking-wide">+ 15</span>
              </div>
              <div class="w-[105px] h-px mt-[3px] flex justify-between">
                <div class="w-px h-full bg-gray-300"></div>
                <div class="w-[101px] h-full bg-gray-300"></div>
                <div class="w-px h-full bg-gray-300"></div>
              </div>
            </div>
            <div class="flex flex-col">
              <div class="w-[105px] h-px mb-[3px] flex justify-between">
                <div class="w-px h-full bg-gray-300"></div>
                <div class="w-[101px] h-full bg-gray-300"></div>
                <div class="w-px h-full bg-gray-300"></div>
              </div>
              <div class="flex gap-11">
                <p class="m-0 text-xs text-white tracking-wide">Health</p>
                <span class="m-0 text-xs text-white tracking-wide">+ 15</span>
              </div>
              <div class="w-[105px] h-px my-[3px] flex justify-between">
                <div class="w-px h-full bg-gray-300"></div>
                <div class="w-[101px] h-full bg-gray-300"></div>
                <div class="w-px h-full bg-gray-300"></div>
              </div>
              <div class="flex gap-11">
                <p class="m-0 text-xs text-white tracking-wide">Health</p>
                <span class="m-0 text-xs text-white tracking-wide">+ 15</span>
              </div>
              <div class="w-[105px] h-px mt-[3px] flex justify-between">
                <div class="w-px h-full bg-gray-300"></div>
                <div class="w-[101px] h-full bg-gray-300"></div>
                <div class="w-px h-full bg-gray-300"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="grid grid-rows-4 grid-cols-6 gap-0.5">
          <div v-for="n in 24" class="w-9 h-9 default-border rounded-sm bg-gray relative hover:bg-gray-600"></div>
        </div>
      </div>
    </div>
  </div>
@ -168,8 +170,8 @@ function stopDrag() {
 }
 function adjustPosition() {
-  x.value = Math.max(0, Math.min(x.value, window.innerWidth - width.value))
+  x.value = Math.min(x.value, window.innerWidth - width.value)
-  y.value = Math.max(0, Math.min(y.value, window.innerHeight - height.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)
 })
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Dennis Postma	90bdf43b64	Small change	2024-12-30 02:47:49 +01:00
Dennis Postma	e9dfcf7870	Minor changes	2024-12-29 02:36:04 +01:00
Colin Kallemein	d0c08c25fd	#286 - Added global class for fully absolute-centering elements	2024-12-29 02:21:21 +01:00
Colin Kallemein	7bb7af9476	#295 + #296 - Changed login boxes and char select styling	2024-12-29 02:10:18 +01:00
Dennis Postma	e4186a1bf5	WIP zone loading	2024-12-29 00:40:02 +01:00
Dennis Postma	8c664d7774	Started working on improved connect method	2024-12-28 23:48:52 +01:00
Dennis Postma	744df2e2dc	Re-enabled vue dev tools, moved type into types.ts, added temp. logging	2024-12-28 17:27:00 +01:00
Dennis Postma	b4f9b11143	Removed console log	2024-12-27 19:04:33 +01:00
Dennis Postma	18b07d2f46	Several fixes, improvements, refactor for authentication	2024-12-27 19:00:53 +01:00
Dennis Postma	9d0f810ab3	Double field fix	2024-12-27 00:54:31 +01:00
Dennis Postma	cf3f17dfef	Disabled vue dev tools for testing purposes	2024-12-27 00:54:23 +01:00
Dennis Postma	6be1134c8c	Minor improvement	2024-12-27 00:49:57 +01:00
Dennis Postma	6dad7bc9dd	http improvements, fixed link	2024-12-27 00:48:36 +01:00
Dennis Postma	231f19a30f	Added characterChest component for chest equipment, moved some files	2024-12-27 00:27:54 +01:00
Dennis Postma	9c105d6df6	Returned data update	2024-12-26 23:55:47 +01:00
Colin Kallemein	179ceb0ca0	Cleaned up assets, added default border values to main.scss	2024-12-26 20:03:42 +01:00
Colin Kallemein	680661f07c	#258 - Put update effects in the timeout corner until zoneEffects is ready Reverted latest changes due to zoneEffects needing to fully overwrite	2024-12-25 00:40:56 +01:00
Dennis Postma	c54d2a2da8	Merge branch 'main' of ssh://gitea.directonline.io:29417/sylvan-quest/client	2024-12-24 00:54:27 +01:00
Dennis Postma	85f0fca2ae	Added copy sprite button, changed asset manager layout, updated packages	2024-12-24 00:54:20 +01:00
Colin Kallemein	420e63b724	#258 - Made it so zoneEffects only overrides defined effects instead of all	2024-12-23 23:23:16 +01:00
Colin Kallemein	5d9b4fd19a	#187 - Enter to focus chat when not focused	2024-12-22 20:56:06 +01:00
Dennis Postma	b3d68ef562	Merge branch 'main' of ssh://gitea.directonline.io:29417/sylvan-quest/client	2024-12-22 20:08:49 +01:00
Dennis Postma	baae737d6b	CRUD components for items	2024-12-22 20:08:45 +01:00
Colin Kallemein	03f8b327c5	#258 - Fixed zone effects when set in settings	2024-12-22 20:06:51 +01:00
Dennis Postma	b9a1ce5ab5	Adjusted sorting	2024-12-22 02:36:14 +01:00
Dennis Postma	1b650bd733	#16 : Show updates made to character in real time	2024-12-22 00:13:15 +01:00
Dennis Postma	b867250580	Updated name	2024-12-21 22:10:37 +01:00
Colin Kallemein	2c7a1e27be	Fixes for origin being string, styling bug hair select and wrong label tags	2024-12-21 17:48:20 +01:00
Dennis Postma	0e455f8ffc	Use originX and Y for hair	2024-12-21 03:00:09 +01:00
Dennis Postma	8005bc1318	Small fix	2024-12-21 02:29:48 +01:00
Dennis Postma	11e978121f	Renamed frame speed > frame rate	2024-12-21 02:27:47 +01:00
Dennis Postma	727ca99b73	#262 : Use frameRate is value is set in sprite settings	2024-12-21 02:20:03 +01:00
Dennis Postma	97080d7380	Better anim. timing	2024-12-21 02:09:18 +01:00
Dennis Postma	1a3a53a229	Timing for animations	2024-12-20 21:29:33 +01:00
Dennis Postma	a926de8466	Hair anim. adjustment	2024-12-20 20:36:13 +01:00
Dennis Postma	5eabb39ec8	Improved hair animation	2024-12-20 01:28:48 +01:00
Colin Kallemein	03313cb092	#259 - Changed bg options for modals, restyled GM Panel	2024-12-15 15:24:10 +01:00
Dennis Postma	d58cfa668d	More finetuning of hair positioning	2024-12-15 14:40:47 +01:00
Dennis Postma	e3e40dd083	updated packages	2024-12-13 00:47:44 +01:00
Dennis Postma	facdd2d1b4	Minor styling changes	2024-12-13 00:47:36 +01:00
Dennis Postma	7d6bd39f29	GmPanel is full screen by default now	2024-12-12 01:12:33 +01:00
Dennis Postma	608932300f	Improved proof of concept hair customisation & sprite anchor points	2024-12-12 00:42:56 +01:00
Dennis Postma	b5c1c92b04	Worked on character customisation	2024-12-10 02:22:03 +01:00
Colin Kallemein	c68b129da8	#260 - Fix Characterprofile start position	2024-12-08 19:58:43 +01:00
Colin Kallemein	963c593a1f	#260 - Add min height when no character is selected	2024-12-08 19:45:11 +01:00
Colin Kallemein	a299e22f88	#260 - added responsive styling character select	2024-12-08 19:29:07 +01:00
Dennis Postma	2007bfd7c5	Altered menu a bit	2024-12-08 00:53:07 +01:00
Dennis Postma	4cae045d0d	Effect improvement	2024-12-08 00:35:00 +01:00
Dennis Postma	1fa8b8f06e	You can now zoom in/out with key combination (shift + arrow uo/down) my 5 EUR Action gaming mouse doesnt let me scroll on MacOS 💩	2024-12-07 23:24:11 +01:00
Dennis Postma	4095184b27	updated packages	2024-12-07 22:50:36 +01:00
Dennis Postma	857d56a878	Overriding zone effects now works	2024-12-07 22:50:27 +01:00
Dennis Postma	8087f754b0	Merge branch 'feature/#245-character-hair' of ssh://gitea.directonline.io:29417/sylvan-quest/client into feature/#245-character-hair	2024-12-05 09:56:17 +01:00
Dennis Postma	1479d96162	npm update, proof of concept code for character hair	2024-12-05 09:55:20 +01:00
Colin Kallemein	606e220a9f	Slightly adjusted styling radio hair color buttons	2024-11-27 20:39:09 +01:00
Dennis Postma	6988565484	Removed redundant code	2024-11-25 00:42:07 +01:00
Dennis Postma	fbc4a3dcdb	Better typescript	2024-11-25 00:41:12 +01:00
Dennis Postma	924d5bdd13	Bug fixes and improvements to character select screen	2024-11-25 00:40:21 +01:00
Colin Kallemein	25a2fd24f3	Prep hair color radio btns, adjust styling hairstyles to make it tab friendly	2024-11-24 20:46:29 +01:00
Dennis Postma	64f5ac45dd	Removed console.log, renamed hars to characterHairs	2024-11-24 20:28:50 +01:00
Colin Kallemein	937ce939d1	Preselect hairstyle that's set on character Removed unused watch	2024-11-24 20:19:45 +01:00
Colin Kallemein	7d89364104	Fix styling conditions for radio select WIP	2024-11-24 17:15:57 +01:00
Dennis Postma	f7b8c235d8	Renamed hair > characterHair, split character logic (chat bubble, healthbar etc) into separate components for better DX	2024-11-24 15:13:11 +01:00
Colin Kallemein	89d83efca4	Mess	2024-11-23 22:55:43 +01:00
Dennis Postma	ab97e27f27	Moved game components into a new folder, working proof of concept hair customisation	2024-11-23 16:47:41 +01:00
Colin Kallemein	ee3e1b55cb	Huehue wups	2024-11-23 15:43:57 +01:00
Dennis Postma	5e109e2a39	Removed ID from radio	2024-11-23 15:39:47 +01:00
Dennis Postma	a8e50c993a	Commented out color swatch, added justify-center	2024-11-23 15:38:39 +01:00
Dennis Postma	ba8af589a7	Merge remote-tracking branch 'origin/feature/#245-character-hair' into feature/#250 # Conflicts: # src/components/screens/Characters.vue	2024-11-23 15:34:42 +01:00
Dennis Postma	301340327a	Added components to manage hair types	2024-11-23 15:29:49 +01:00
Dennis Postma	1e4c58c79e	npm update	2024-11-23 15:29:38 +01:00
Dennis Postma	f87cd063ee	Center elements in characters screen	2024-11-23 15:29:28 +01:00
Colin Kallemein	9593298389	#250 - Changed focus styling, adjusted where needed	2024-11-23 00:27:11 +01:00
Dennis Postma	ad4651844d	Updated TS types	2024-11-21 03:00:09 +01:00
Dennis Postma	3748c459f8	Merge remote-tracking branch 'origin/main' into feature/#248	2024-11-20 21:19:22 +01:00
Dennis Postma	50ea3ecdab	npm update	2024-11-20 21:19:05 +01:00
Colin Kallemein	8910390f7b	#248 - Unfocus chat input when clicking outside	2024-11-19 22:24:34 +01:00
Dennis Postma	d820490b2b	Added update logic for character types, added isEnabledForCharCreation field	2024-11-17 17:52:24 +01:00
Dennis Postma	2c96caee4f	Text white when item is active in asset manager	2024-11-17 17:00:07 +01:00
Dennis Postma	84939a7d32	Disabled texture in GM utility modals , fixed btn padding for zone delete button	2024-11-17 00:46:05 +01:00
Dennis Postma	1e3fc2b0f8	Added disableBgTexture option to modals	2024-11-17 00:39:28 +01:00
Dennis Postma	7c8b5f3e82	npm update	2024-11-16 01:21:43 +01:00
Dennis Postma	570d315bf5	Small improvements	2024-11-14 23:46:13 +01:00
Dennis Postma	7871b34c60	Don't open GM panel if focus is on any input or textarea	2024-11-14 22:28:10 +01:00
Dennis Postma	85d64f23eb	#238 : Remove hash from URL with JS instead of full redirect	2024-11-14 22:20:46 +01:00
Dennis Postma	bdb6dd0d54	#161 : Store chats into database	2024-11-14 20:42:52 +01:00
Colin Kallemein	faf887163a	Added resize event to update to particle window size when resizing	2024-11-13 21:25:54 +01:00
Dennis Postma	dd5baa530d	Removed console.log(), fixed small bug	2024-11-13 19:38:51 +01:00
Dennis Postma	d9947e29cf	Prevent loading anims more than once	2024-11-13 15:42:21 +01:00
Dennis Postma	1888521762	Fixed modal fullscreen icons, made types compatible with server changes made for #174 , npm update, npm run format, minor improvements	2024-11-13 13:22:20 +01:00
Colin Kallemein	48fef2313b	Renamed and moved assets for clarity, removed unused svg's	2024-11-08 22:03:10 +01:00
Colin Kallemein	0a99d2c430	Finished base layout of character select/create	2024-11-08 21:22:50 +01:00
Colin Kallemein	ed6f592606	WIP character select	2024-11-06 23:05:37 +01:00
Dennis Postma	46ebfaec01	npm update	2024-11-05 23:18:10 +01:00
Dennis Postma	1384f50406	npm run format	2024-11-05 23:16:47 +01:00
Dennis Postma	d71f4e7b59	#192 : Update light and other effects based on server date / weather state	2024-11-05 23:07:05 +01:00
Dennis Postma	58929290ab	#184 : Listen for weather updates from client	2024-11-05 22:46:21 +01:00
Dennis Postma	63146106c0	Moved clock pos.	2024-11-05 22:02:46 +01:00
Dennis Postma	7c5602f204	#197 : Added background image loader	2024-11-05 22:01:28 +01:00
Dennis Postma	e711e124ce	Map editor tiles improvement	2024-11-05 21:31:28 +01:00
Dennis Postma	e1b39c42ec	Several map editor improvements	2024-11-05 21:28:12 +01:00
Dennis Postma	d81c889426	Removed GM tools, added event listener for shift + G to open GM panel	2024-11-05 20:53:39 +01:00
Dennis Postma	afb0edacf6	#184 : Added clock component	2024-11-05 20:42:52 +01:00
Dennis Postma	6d7d568746	Moved login partial components	2024-11-05 20:36:00 +01:00
Dennis Postma	8df5b6eb76	#239 : Add loading indicator to password reset submit button for better UX	2024-11-05 20:21:52 +01:00
Dennis Postma	270d12821a	Renamed component, inform user when password reset mail has been sent, added comment for #238	2024-11-05 01:02:27 +01:00
Dennis Postma	9c244e980c	Cleaned component	2024-11-05 00:35:26 +01:00
Dennis Postma	25ba54c8ac	Moved ResetPassword component to correct dir	2024-11-05 00:33:28 +01:00
Dennis Postma	9c4bef864b	Updated default value	2024-11-05 00:01:36 +01:00
Dennis Postma	bdc566e30f	#236 : Fixed clear button in map editor	2024-11-04 23:44:34 +01:00
Dennis Postma	a653b61b51	Moved zone editor partials into folder	2024-11-04 23:36:19 +01:00
Dennis Postma	7b61f71fa9	#231 : Remove logic that prevents modals from being dragged outside of the view & refactor modal TS	2024-11-04 23:34:41 +01:00
Dennis Postma	42539cc73d	Fix for paint tool	2024-11-04 21:06:40 +01:00
Dennis Postma	864369860c	Typo fixes, started working on bug fix, npm update	2024-11-04 21:04:44 +01:00
Dennis Postma	89938b7f93	npm run format	2024-11-04 01:06:15 +01:00
Dennis Postma	f076661d4a	npm update	2024-11-03 22:35:22 +01:00
Dennis Postma	0b018f53a7	Merge remote-tracking branch 'origin/main' into feature/#182-reset-password	2024-11-03 22:30:45 +01:00
Colin Kallemein	32a13f0f3c	Added more whitespace under error on register form	2024-11-03 22:12:14 +01:00
Colin Kallemein	f203bf9534	Merge conflict fix	2024-11-03 22:00:29 +01:00
Colin Kallemein	67b6339ffc	FInished password reset (hopefully)	2024-11-03 21:56:19 +01:00
Dennis Postma	6233da0044	Temporarily disable sound	2024-11-03 03:26:07 +01:00
Dennis Postma	56f455a08e	TS declaration improvement, moved files	2024-11-03 01:32:37 +01:00
Dennis Postma	9d541cc46a	Merge remote-tracking branch 'origin/main' into feature/#182-reset-password # Conflicts: # src/components/screens/Characters.vue	2024-11-03 01:27:27 +01:00
Dennis Postma	adf86d369b	#216 : Added tile & object picker in map editor	2024-11-03 01:26:13 +01:00
Colin Kallemein	bbcb84ed03	Refactored screens & login forms, fixed pw reset modal, WIP new pw form	2024-11-03 00:47:02 +01:00
Dennis Postma	6f40c774ea	TS shit	2024-11-03 00:34:03 +01:00
Dennis Postma	e3b70df46f	npm update	2024-11-03 00:33:00 +01:00
Colin Kallemein	584262a59b	Merge remote-tracking branch 'origin/main' into feature/#182-reset-password # Conflicts: # src/screens/Login.vue # src/stores/gameStore.ts	2024-11-02 21:47:57 +01:00
Dennis Postma	7e4e613405	Moved music to character selection screen, disable loader	2024-11-02 16:02:43 +01:00
Dennis Postma	e2c60bfd5a	#210 : Play music on login screen	2024-11-02 14:05:37 +01:00
Dennis Postma	e38c402266	Fix button sound playing when clicked outside of buttons	2024-11-02 13:54:16 +01:00
Dennis Postma	a299d5dc55	#209 : Play sound when a button is pressed	2024-11-02 13:51:07 +01:00
Dennis Postma	43c0f0ab1e	Added vite-plugin-compression	2024-11-02 13:34:52 +01:00
Dennis Postma	ed17e7f16e	#217 : Solved duplicate texture loading issue, #215 : Finished Dexie implementation.	2024-11-02 02:20:34 +01:00
Colin Kallemein	7d723530e6	Renamed pw reset form variable	2024-11-02 01:47:23 +01:00
Dennis Postma	a3532a5940	Typo	2024-10-31 12:33:04 +01:00
Dennis Postma	74cbf3f2c8	Animations now load dynamically and are cached	2024-10-31 12:31:30 +01:00
Dennis Postma	d402744955	Map editor fixes (select & move), character sprites are now dynamically loaded and cached, moved repeated code into a composable, updated types	2024-10-30 15:27:37 +01:00
Dennis Postma	39b65b3884	npm run format	2024-10-30 10:07:22 +01:00
Dennis Postma	c62ff2efc1	Refactor assetManager, renamed assetManager to assetStorage, renamed AssetT to AssetDataT, added better error handling in authentication service, continued working on dynamic asset loading for both maps and map editor	2024-10-30 09:36:16 +01:00
Dennis Postma	08f55c9680	#190 : Cookie domain improvement	2024-10-30 07:17:07 +01:00
Colin Kallemein	1afc50ea6a	Moved reset password, adjusted modal open logic (also WIP)	2024-10-29 22:50:11 +01:00
Dennis Postma	7c259f455c	Load all tiles in zone editor	2024-10-28 23:41:26 +01:00
Colin Kallemein	be854a79b8	Added reset password modal form	2024-10-27 21:31:50 +01:00
Dennis Postma	a71890ab68	Clean	2024-10-27 21:09:19 +01:00
Dennis Postma	dc2b6b9851	WIP: updated zone manager to match with zone logic (dynamic asset/texture loading)	2024-10-27 21:04:08 +01:00
Dennis Postma	d091aabeb3	Removed onMounted()	2024-10-27 18:53:18 +01:00
Dennis Postma	c261937cf5	Typo fix	2024-10-27 18:50:30 +01:00
Dennis Postma	4aa1309797	Small cleanup	2024-10-27 18:50:13 +01:00
Dennis Postma	4f8517a50c	Proof of concept dynamic tile loading 2	2024-10-27 18:48:19 +01:00
Dennis Postma	446e049e6e	npm update, added email field	2024-10-27 17:48:04 +01:00
Dennis Postma	7db2ba322c	Minor improvements, more work on dynamic asset loading	2024-10-26 02:41:16 +02:00
Dennis Postma	70fb732051	finally some good fucking code	2024-10-26 00:15:31 +02:00
Dennis Postma	5128aa83f9	Added code comment	2024-10-25 22:25:49 +02:00
		`@ -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>
		`@ -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("#fill-color-gradient-render-1-0");"/></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>
		`@ -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>
		`@ -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>