#323 - Added alt to all images, also removed unused templates

Templates for old user panel hadnt been removed yet

src/components/game/gui/CharacterProfile.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="absolute" v-if="gameStore.uiSettings.isCharacterProfileOpen" :style="modalStyle">
     <div class="relative">
-      <img src="/assets/ui-elements/profile-ui-box-outer.svg" class="absolute w-full h-full" />
+      <img src="/assets/ui-elements/profile-ui-box-outer.svg" class="absolute w-full h-full" alt="" />
-      <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-inner.svg" class="absolute left-2 bottom-2 w-[calc(100%_-_16px)] h-[calc(100%_-_40px)]" alt="" />
       <div @mousedown="startDrag" class="cursor-move px-5 py-2.5 flex justify-between items-center relative">
         <span class="text-xs text-white font-thin">Character Profile [Alt+C]</span>
         <button @click="gameStore.uiSettings.isCharacterProfileOpen = false" class="w-3.5 h-3.5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out">
-          <img alt="close" draggable="false" src="/assets/icons/modal/close-button-white.svg" class="w-full h-full" />
+          <img draggable="false" src="/assets/icons/modal/close-button-white.svg" class="w-full h-full" alt="Close button icon" />
         </button>
       </div>
       <div class="py-4 px-6 flex flex-col gap-7 relative z-10">
@@ -17,7 +17,7 @@
               <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" />
+              <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" alt="Plus button icon" />
             </a>
           </div>
           <div class="flex justify-between">
@@ -37,20 +37,20 @@
                 </div>
               </div>
             </div>
-            <img src="/assets/placeholders/inventory_player.png" class="w-8 h-auto" />
+            <img src="/assets/placeholders/inventory_player.png" class="w-8 h-auto" alt="Player character sprite" />
             <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" />
+                <img class="w-6 h-6 center-element" src="/assets/icons/profile/helmet.svg" alt="Helmet icon" />
               </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" />
+                <img class="w-6 h-6 center-element" src="/assets/icons/profile/chestplate.svg" alt="Chestplate icon" />
               </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" />
+                  <img class="w-4 h-4 center-element" src="/assets/icons/profile/boots.svg" alt="Boots icon" />
                 </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" />
+                  <img class="w-6 h-6 center-element" src="/assets/icons/profile/legs.svg" alt="Legs icon" />
                 </div>
               </div>
             </div>

src/components/game/gui/Chat.vue

@@ -7,7 +7,7 @@
       </div>
     </div>
     <div class="w-96 mx-auto relative">
-      <img src="/assets/icons/ingameUI/chat-icon.svg" class="absolute top-1/2 -translate-y-1/2 left-2.5 h-4 w-4 opacity-50" />
+      <img src="/assets/icons/ingameUI/chat-icon.svg" class="absolute top-1/2 -translate-y-1/2 left-2.5 h-4 w-4 opacity-50" alt="" />
       <input
         class="w-[332px] h-8 rounded-sm text-xs font-default pl-8 pr-4 py-0 bg-gray-600 border-2 border-solid border-gray-500 text-gray-300 bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-cover focus:outline-none focus:ring-0 focus:border-cyan-800"
         placeholder="Type something..."

src/components/game/gui/Menu.vue

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

src/components/game/gui/Minimap.vue

@@ -5,12 +5,12 @@
     </div>
     <div class="absolute -bottom-3 left-1/2 -translate-x-1/2 flex gap-1">
       <button class="w-6 h-6 relative p-0">
-        <img class="w-3 h-3 center-element" src="/assets/icons/plus-icon.svg" />
+        <img class="w-3 h-3 center-element" src="/assets/icons/plus-icon.svg" alt="Zoom-in button icon"/>
-        <img class="w-full h-full" src="/assets/ui-elements/button-ui-box-textured.svg" />
+        <img class="w-full h-full" src="/assets/ui-elements/button-ui-box-textured.svg" alt=""/>
       </button>
       <button class="w-6 h-6 relative p-0">
-        <img class="w-3 h-3 center-element" src="/assets/icons/minus-icon.svg" />
+        <img class="w-3 h-3 center-element" src="/assets/icons/minus-icon.svg" alt="Zoom-out button icon"/>
-        <img class="w-full h-full" src="/assets/ui-elements/button-ui-box-textured.svg" />
+        <img class="w-full h-full" src="/assets/ui-elements/button-ui-box-textured.svg" alt=""/>
       </button>
     </div>
   </div>

src/components/game/gui/UserPanel.vue

@@ -1,42 +0,0 @@
-<template>
-  <div class="absolute z-50 w-full h-dvh top-0 left-0 bg-black/60" v-show="false">
-    <div class="center-element max-w-[875px] max-h-[600px] h-full w-[80%] bg-gray border-solid border-2 border-gray-500 rounded-md z-50 flex flex-col backdrop-blur-sm shadow-lg">
-      <div class="p-2.5 flex max-sm:flex-wrap justify-between items-center gap-5 border-solid border-0 border-b border-gray-500">
-        <h3 class="m-0 font-medium shrink-0">Game menu</h3>
-        <div class="hidden sm:flex gap-1.5 flex-wrap">
-          <button @click.stop="userPanelScreen = 'inventory'" :class="{ active: userPanelScreen === 'inventory' }" class="btn-cyan py-1.5 px-4 min-w-24">Inventory</button>
-          <button @click.stop="userPanelScreen = 'equipment'" :class="{ active: userPanelScreen === 'equipment' }" class="btn-cyan py-1.5 px-4 min-w-24">Equipment</button>
-          <button @click.stop="userPanelScreen = 'characterScreen'" :class="{ active: userPanelScreen === 'characterScreen' }" class="btn-cyan py-1.5 px-4 min-w-24">Character</button>
-          <button @click.stop="userPanelScreen = 'settings'" :class="{ active: userPanelScreen === 'settings' }" class="btn-cyan py-1.5 px-4 min-w-24">Settings</button>
-        </div>
-        <div class="flex gap-2.5">
-          <button class="w-3.5 h-3.5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out">
-            <img alt="close" draggable="false" src="/assets/icons/modal/close-button-white.svg" class="w-full h-full" />
-          </button>
-        </div>
-        <div class="flex sm:hidden gap-1.5 flex-wrap">
-          <button @click.stop="userPanelScreen = 'inventory'" :class="{ active: userPanelScreen === 'inventory' }" class="btn-cyan py-1.5 px-4 min-w-24">Inventory</button>
-          <button @click.stop="userPanelScreen = 'equipment'" :class="{ active: userPanelScreen === 'equipment' }" class="btn-cyan py-1.5 px-4 min-w-24">Equipment</button>
-          <button @click.stop="userPanelScreen = 'characterScreen'" :class="{ active: userPanelScreen === 'characterScreen' }" class="btn-cyan py-1.5 px-4 min-w-24">Character</button>
-          <button @click.stop="userPanelScreen = 'settings'" :class="{ active: userPanelScreen === 'settings' }" class="btn-cyan py-1.5 px-4 min-w-24">Settings</button>
-        </div>
-      </div>
-      <Inventory v-show="userPanelScreen === 'inventory'" />
-      <Equipment v-show="userPanelScreen === 'equipment'" />
-      <CharacterScreen v-show="userPanelScreen === 'characterScreen'" />
-      <Settings v-show="userPanelScreen === 'settings'" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import CharacterScreen from '@/components/game/gui/partials/CharacterScreen.vue'
-import Equipment from '@/components/game/gui/partials/Equipment.vue'
-import Inventory from '@/components/game/gui/partials/Inventory.vue'
-import Settings from '@/components/game/gui/partials/Settings.vue'
-import { useGameStore } from '@/stores/gameStore'
-import { ref } from 'vue'
-
-const gameStore = useGameStore()
-let userPanelScreen = ref('inventory')
-</script>

src/components/game/gui/partials/CharacterScreen.vue

@@ -1,68 +0,0 @@
-<template>
-  <div class="grow flex flex-col w-full h-full relative overflow-auto">
-    <div class="m-4 relative">
-      <h4 class="font-medium text-lg max-w-[375px]">Character</h4>
-      <div class="flex justify-center flex-wrap gap-20">
-        <div class="flex gap-3 mt-2 flex-wrap max-w-[375px]">
-          <div class="h-full flex flex-col justify-center items-center">
-            <img class="h-72 my-2 mx-auto" src="/assets/placeholders/inventory_player.png" />
-          </div>
-        </div>
-        <div class="flex flex-col gap-4">
-          <div class="flex flex-col gap-3 mx-5 mt-2">
-            <h3>{{ gameStore.character?.name }}</h3>
-            <div class="flex gap-4 flex-wrap max-w-[375px]">
-              <ul class="p-0 m-0 list-none">
-                <li class="leading-6 text-lg">Class:</li>
-                <li class="leading-6 text-lg">Race:</li>
-                <li class="leading-6 text-lg">Hit Points:</li>
-                <li class="leading-6 text-lg">Mana Points:</li>
-                <li class="leading-6 text-lg">Level:</li>
-                <li class="leading-6 text-lg">Stat Points:</li>
-              </ul>
-              <ul class="p-0 m-0 list-none">
-                <li class="leading-6 text-lg min-h-6">Knight</li>
-                <li class="leading-6 text-lg min-h-6">{{ gameStore.character?.characterType?.race }}</li>
-                <li class="leading-6 text-lg min-h-6">{{ gameStore.character?.hitpoints }} <span class="text-green">(+15)</span></li>
-                <li class="leading-6 text-lg min-h-6">{{ gameStore.character?.mana }}</li>
-                <li class="leading-6 text-lg min-h-6">{{ gameStore.character?.level }}</li>
-                <li class="leading-6 text-lg min-h-6">3</li>
-              </ul>
-            </div>
-          </div>
-          <div class="flex flex-col gap-3 mx-5 mt-2">
-            <h3>Alignment</h3>
-            <div class="h-8 w-64 rounded border border-solid border-white bg-gradient-to-r from-red to-blue relative">
-              <!-- TODO: Give slider left value based on alignment (0-100), new characters start with 50 -->
-              <div class="rounded border-2 border-solid border-white h-10 w-2 absolute top-1/2 -translate-y-1/2 -translate-x-1/2" :style="{ left: gameStore.character?.alignment + '%' }"></div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="absolute -left-5 -bottom-5 w-[calc(100%_+_40px)] my-px h-px bg-gray-500"></div>
-    </div>
-    <div class="m-4">
-      <h4 class="font-medium text-lg max-w-[375px]">Character stats</h4>
-      <div class="flex gap-3 mt-4 flex-wrap max-w-[375px]">
-        <ul class="p-0 m-0 list-none">
-          <li class="leading-6">Health:</li>
-          <li class="leading-6">Defense:</li>
-          <li class="leading-6">More stats:</li>
-          <li class="leading-6">Extra stats:</li>
-        </ul>
-        <ul class="p-0 m-0 list-none text-right">
-          <li class="leading-6">100 <span class="text-green">(+15)</span></li>
-          <li class="leading-6">1000 <span class="text-green">(+500)</span></li>
-          <li class="leading-6"></li>
-          <li class="leading-6"></li>
-        </ul>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useGameStore } from '@/stores/gameStore'
-
-const gameStore = useGameStore()
-</script>

src/components/game/gui/partials/Equipment.vue

@@ -1,89 +0,0 @@
-<template>
-  <div class="grow flex flex-col w-full h-full relative overflow-auto">
-    <div class="m-4 relative">
-      <h4 class="font-medium text-lg max-w-[375px]">Equipment</h4>
-      <div class="flex justify-center items-center flex-wrap gap-20">
-        <div class="flex gap-3 mt-2 flex-wrap max-w-[375px]">
-          <div class="h-full flex flex-col justify-center items-center">
-            <h3>{{ gameStore.character?.name }}</h3>
-            <img class="h-60 my-2 mx-auto" src="/assets/placeholders/inventory_player.png" />
-            <span class="block text-sm">Level {{ gameStore.character?.level }}</span>
-          </div>
-        </div>
-        <div class="flex flex-col gap-3 mx-5 mt-2">
-          <div class="flex gap-3 justify-center">
-            <!-- Helmet -->
-            <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md aspect-square h-11 w-11 relative hover:bg-gray-200">
-              <img src="/assets/icons/inventory/helmet.svg" class="center-element w-11/12 opacity-20" />
-            </div>
-
-            <!-- Head charm -->
-            <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md aspect-square h-11 w-11 relative hover:bg-gray-200">
-              <img src="/assets/icons/inventory/head_charm.svg" class="center-element w-11/12 opacity-20" />
-            </div>
-          </div>
-
-          <div class="flex gap-3 justify-center">
-            <!-- Bracers -->
-            <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md w-11 h-[104px] relative hover:bg-gray-200">
-              <img src="/assets/icons/inventory/bracers.svg" class="center-element w-11/12 opacity-20" />
-            </div>
-
-            <!-- Chestplate -->
-            <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md aspect-square w-[104px] h-[104px] relative hover:bg-gray-200">
-              <img src="/assets/icons/inventory/chestplate.svg" class="center-element w-10/12 opacity-20" />
-            </div>
-
-            <!-- Primary Weapon -->
-            <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md w-11 h-[104px] self-stretch justify-self-stretch relative hover:bg-gray-200">
-              <img src="/assets/icons/inventory/primary_weapon.svg" class="center-element w-11/12 opacity-20" />
-            </div>
-          </div>
-
-          <div class="flex gap-3 justify-center">
-            <!-- Legs -->
-            <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md w-11 h-[104px] self-stretch justify-self-stretch relative hover:bg-gray-200">
-              <img src="/assets/icons/inventory/legs.svg" class="center-element w-11/12 opacity-20" />
-            </div>
-
-            <div class="flex flex-col gap-3">
-              <!-- Belt/pouch -->
-              <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md aspect-square h-11 w-11 self-stretch justify-self-stretch relative hover:bg-gray-200">
-                <img src="/assets/icons/inventory/pouch.svg" class="center-element w-11/12 opacity-20" />
-              </div>
-
-              <!-- Boots -->
-              <div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md aspect-square h-11 w-11 self-stretch justify-self-stretch relative hover:bg-gray-200">
-                <img src="/assets/icons/inventory/boots.svg" class="center-element w-11/12 opacity-20" />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="absolute -left-5 -bottom-5 w-[calc(100%_+_40px)] my-px h-px bg-gray-500"></div>
-    </div>
-    <div class="m-4">
-      <h4 class="font-medium text-lg max-w-[375px]">Equipment Bonus</h4>
-      <div class="flex gap-3 mt-4 flex-wrap max-w-[375px]">
-        <ul class="p-0 m-0 list-none">
-          <li class="leading-6">Health:</li>
-          <li class="leading-6">Defense:</li>
-          <li class="leading-6">More stats:</li>
-          <li class="leading-6">Extra stats:</li>
-        </ul>
-        <ul class="p-0 m-0 list-none text-right">
-          <li class="leading-6">+15</li>
-          <li class="leading-6">500</li>
-          <li class="leading-6"></li>
-          <li class="leading-6"></li>
-        </ul>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useGameStore } from '@/stores/gameStore'
-
-const gameStore = useGameStore()
-</script>

src/components/game/gui/partials/Inventory.vue

@@ -1,17 +0,0 @@
-<template>
-  <div class="grow flex flex-col w-full h-full relative overflow-auto">
-    <div class="m-4 relative">
-      <h4 class="m-auto font-medium text-lg max-w-[375px]">Inventory</h4>
-      <div class="flex gap-3 mt-4 mx-auto flex-wrap max-w-[375px]">
-        <div v-for="n in 24" class="bg-gray-300/80 border-solid border-2 border-gray-500 w-12 h-12 rounded-md aspect-square shrink-0 justify-self-stretch hover:bg-gray-200"></div>
-      </div>
-      <div class="absolute -left-5 -bottom-5 w-[calc(100%_+_40px)] my-px h-px bg-gray-500"></div>
-    </div>
-    <div class="m-4">
-      <h4 class="m-auto font-medium text-lg max-w-[375px]">Chest items</h4>
-      <div class="flex gap-3 mt-4 mx-auto flex-wrap max-w-[375px]">
-        <div v-for="n in 12" class="bg-gray-300/80 border-solid border-2 border-gray-500 w-12 h-12 rounded-md aspect-square shrink-0 justify-self-stretch hover:bg-gray-200"></div>
-      </div>
-    </div>
-  </div>
-</template>

src/components/game/gui/partials/Settings.vue

@@ -1,40 +0,0 @@
-<template>
-  <div class="flex h-full w-full relative">
-    <div class="w-2/12 flex flex-col relative">
-      <!-- Settings Categories -->
-      <div class="relative p-2.5">
-        <h3>Settings</h3>
-        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
-      </div>
-      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': settingCategory === 'character' }" @click.stop="settingCategory = 'character'">
-        <span>Character</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': settingCategory === 'account' }" @click.stop="settingCategory = 'account'">
-        <span>Account</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': settingCategory === 'audio' }" @click.stop="settingCategory = 'audio'">
-        <span>Audio</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': settingCategory === 'video' }" @click.stop="settingCategory = 'video'">
-        <span>Video</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-10/12 flex flex-col relative">
-      <CharacterSettings v-show="settingCategory == 'character'" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import CharacterSettings from '@/components/game/gui/partials/settings/CharacterSettings.vue'
-import { ref } from 'vue'
-
-let settingCategory = ref('character')
-</script>

src/components/game/gui/partials/settings/CharacterSettings.vue

@@ -1,34 +0,0 @@
-<template>
-  <div class="h-full overflow-auto">
-    <div class="relative p-2.5 flex flex-col gap-5 h-72">
-      <h3>Character details</h3>
-      <button @click="toggle" class="btn-cyan px-4 py-1.5 w-24">Edit</button>
-      <form class="flex gap-2.5 flex-wrap">
-        <div class="form-field-half max-w-[300px]">
-          <label for="name">Name</label>
-          <input class="input-field" :class="{ inactive: !editCharacter }" type="text" name="name" placeholder="Ethereal" :disabled="!editCharacter" />
-        </div>
-        <div class="form-field-half max-w-[300px] relative">
-          <label for="class">Class</label>
-          <select class="input-field" v-model="characterClass" :class="{ inactive: !editCharacter }" name="class" :disabled="!editCharacter">
-            <option value="Knight" :selected="characterClass == 'Knight'" :disabled="characterClass == 'Knight'">Knight</option>
-            <option value="Paladin" :selected="characterClass == 'Paladin'" :disabled="characterClass == 'Paladin'">Paladin</option>
-          </select>
-          <span v-if="!editCharacter" class="absolute bottom-[9px] left-[14px] text-sm text-gray-300/50">{{ characterClass }}</span>
-        </div>
-        <button v-if="editCharacter" @click="toggle" class="btn-cyan px-4 py-1.5 min-w-24" type="submit">Save</button>
-      </form>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const editCharacter = ref(false)
-const characterClass = ref('')
-
-const toggle = () => {
-  editCharacter.value = !editCharacter.value
-}
-</script>

src/components/gameMaster/mapEditor/partials/Toolbar.vue

@@ -40,7 +40,7 @@
           <div class="select" v-if="mapEditor.tool.value === 'eraser'">
             <div class="select-trigger group capitalize flex gap-3.5" :class="{ open: selectEraserOpen }">
               {{ mapEditor.drawMode.value.replace('_', ' ') }}
-              <img class="group-[.open]:rotate-180 invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/mapEditor/chevron.svg" />
+              <img class="group-[.open]:rotate-180 invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/mapEditor/chevron.svg" alt="" />
             </div>
             <div class="flex flex-col absolute bottom-full mb-5 left-1/2 -translate-x-1/2 bg-gray rounded min-w-28 border border-gray-500 border-solid text-left" v-show="selectEraserOpen">
               <span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="() => handleModeClick('tile', 'eraser')">

src/components/screens/Login.vue

@@ -8,8 +8,8 @@
       <div class="h-dvh flex items-center lg:justify-center flex-col px-8 max-lg:pt-20">
         <!--        <img src="/assets/tlogo.png" class="mb-10 w-52" alt="Noxious logo" />-->
         <div class="relative">
-          <img src="/assets/ui-elements/login-ui-box-outer.svg" class="absolute w-full h-full" alt="UI box outer" />
+          <img src="/assets/ui-elements/login-ui-box-outer.svg" class="absolute w-full h-full" alt="" />
-          <img src="/assets/ui-elements/login-ui-box-inner.svg" class="absolute left-2 top-2 w-[calc(100%_-_16px)] h-[calc(100%_-_16px)]" alt="UI box inner" />
+          <img src="/assets/ui-elements/login-ui-box-inner.svg" class="absolute left-2 top-2 w-[calc(100%_-_16px)] h-[calc(100%_-_16px)]" alt="" />
 
           <!-- Login Form -->
           <LoginForm v-if="currentForm === 'login' && !doesUrlHaveToken" @openResetPasswordModal="() => (isPasswordResetFormShown = true)" @switchToRegister="currentForm = 'register'" />