From c68b129da8c45e6398f21aff297be198955d9817 Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Sun, 8 Dec 2024 19:58:43 +0100
Subject: [PATCH] #260 - Fix Characterprofile start position

---
 src/components/gui/CharacterProfile.vue | 222 ++++++++++++------------
 1 file changed, 112 insertions(+), 110 deletions(-)

diff --git a/src/components/gui/CharacterProfile.vue b/src/components/gui/CharacterProfile.vue
index d3e2167..efe9992 100644
--- 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">
-    <img src="/assets/ui-elements/profile-ui-box-outer.svg" class="absolute w-full h-full" />
-    <img src="/assets/ui-elements/profile-ui-box-inner.svg" class="absolute left-2 bottom-2 w-[calc(100%_-_16px)] h-[calc(100%_-_40px)]" />
-    <div @mousedown="startDrag" class="cursor-move px-5 py-2.5 flex justify-between items-center relative">
-      <span class="text-xs text-white font-thin">Character Profile [Alt+C]</span>
-      <button @click="gameStore.uiSettings.isCharacterProfileOpen = false" class="w-3.5 h-3.5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out">
-        <img alt="close" draggable="false" src="/assets/icons/modal/close-button-white.svg" class="w-full h-full" />
-      </button>
-    </div>
-    <div class="py-4 px-6 flex flex-col gap-7 relative z-10">
-      <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 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 class="absolute" v-if="gameStore.uiSettings.isCharacterProfileOpen" :style="modalStyle">
+    <div class="relative">
+      <img src="/assets/ui-elements/profile-ui-box-outer.svg" class="absolute w-full h-full" />
+      <img src="/assets/ui-elements/profile-ui-box-inner.svg" class="absolute left-2 bottom-2 w-[calc(100%_-_16px)] h-[calc(100%_-_40px)]" />
+      <div @mousedown="startDrag" class="cursor-move px-5 py-2.5 flex justify-between items-center relative">
+        <span class="text-xs text-white font-thin">Character Profile [Alt+C]</span>
+        <button @click="gameStore.uiSettings.isCharacterProfileOpen = false" class="w-3.5 h-3.5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out">
+          <img alt="close" draggable="false" src="/assets/icons/modal/close-button-white.svg" class="w-full h-full" />
+        </button>
       </div>
-      <div class="grid grid-rows-4 grid-cols-6 gap-0.5">
-        <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="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/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 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 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>
       </div>
     </div>
   </div>