From 8aaba2dee434c69e9fa0a85b12de948a61218684 Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Wed, 28 Aug 2024 20:59:43 +0200
Subject: [PATCH] Finished equipment userpanel tab + small tweaks

---
 src/components/gui/UserPanel.vue          |  2 +-
 src/components/gui/partials/Equipment.vue | 27 +++++++++++++++--------
 src/components/gui/partials/Inventory.vue |  4 ++--
 3 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/components/gui/UserPanel.vue b/src/components/gui/UserPanel.vue
index 4929b0d..b5c12a8 100644
--- a/src/components/gui/UserPanel.vue
+++ b/src/components/gui/UserPanel.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="absolute z-50 w-full h-dvh top-0 left-0 bg-black/60" v-show="gameStore.isUserPanelOpen">
-    <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 max-w-[875px] max-h-[585px] h-full w-[80%] bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-lg z-50 flex flex-col backdrop-blur-sm shadow-lg">
+    <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 max-w-[875px] max-h-[600px] h-full w-[80%] bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-lg 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-cyan-200">
         <h3 class="m-0 font-medium shrink-0">Game menu</h3>
         <div class="hidden sm:flex gap-1.5 flex-wrap">
diff --git a/src/components/gui/partials/Equipment.vue b/src/components/gui/partials/Equipment.vue
index 9b0029e..f8f935e 100644
--- a/src/components/gui/partials/Equipment.vue
+++ b/src/components/gui/partials/Equipment.vue
@@ -1,16 +1,16 @@
 <template>
     <div class="grow flex flex-col w-full h-full relative overflow-auto">
-        <div class="m-5 relative">
+        <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-4 flex-wrap max-w-[375px]">
+                <div class="flex gap-3 mt-2 flex-wrap max-w-[375px]">
                     <div class="h-full flex flex-col justify-center items-center">
                         <h3>Ethereal</h3>
-                        <img class="h-64 my-4 mx-auto" src="/assets/placeholders/inventory_player.png" />
-                        <span class="block">Level 69</span>
+                        <img class="h-60 my-2 mx-auto" src="/assets/placeholders/inventory_player.png" />
+                        <span class="block text-sm">Level 69</span>
                     </div>
                 </div>
-                <div class="flex flex-col gap-3 m-5">
+                <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-cyan-200 rounded-md aspect-square h-11 w-11 relative hover:bg-gray-200">
@@ -62,12 +62,21 @@
             </div>
             <div class="absolute -left-5 -bottom-5 w-[calc(100%_+_40px)] my-px h-px bg-cyan-200"></div>
         </div>
-        <div class="m-5">
+        <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]">
-                <div>
-
-                </div>
+                <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>
diff --git a/src/components/gui/partials/Inventory.vue b/src/components/gui/partials/Inventory.vue
index 5c550af..21a809c 100644
--- a/src/components/gui/partials/Inventory.vue
+++ b/src/components/gui/partials/Inventory.vue
@@ -1,13 +1,13 @@
 <template>
     <div class="grow flex flex-col w-full h-full relative overflow-auto">
-        <div class="m-5 relative">
+        <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-cyan-200 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-cyan-200"></div>
         </div>
-        <div class="m-5">
+        <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-cyan-200 w-12 h-12 rounded-md aspect-square shrink-0 justify-self-stretch hover:bg-gray-200"></div>