From ba5d235da04a03b3d3bd22ae1ccaa754597dde6c Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Mon, 26 Aug 2024 23:04:48 +0200
Subject: [PATCH] Changed User panel name, created panel toggles, WIP equipment
 panel

---
 src/components/gui/Inventory.vue              | 45 -----------
 src/components/gui/Menu.vue                   |  2 +-
 src/components/gui/UserPanel.vue              | 39 ++++++++++
 src/components/gui/partials/Equipment.vue     | 74 +++++++++++++++++++
 .../{InventoryItems.vue => Inventory.vue}     |  0
 src/screens/Game.vue                          |  2 +-
 src/stores/game.ts                            |  8 +-
 7 files changed, 119 insertions(+), 51 deletions(-)
 delete mode 100644 src/components/gui/Inventory.vue
 create mode 100644 src/components/gui/UserPanel.vue
 create mode 100644 src/components/gui/partials/Equipment.vue
 rename src/components/gui/partials/{InventoryItems.vue => Inventory.vue} (100%)

diff --git a/src/components/gui/Inventory.vue b/src/components/gui/Inventory.vue
deleted file mode 100644
index f5e28b7..0000000
--- a/src/components/gui/Inventory.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-  <div class="absolute z-50 w-full h-dvh top-0 left-0 bg-black/60" v-show="gameStore.isInventoryOpen">
-    <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="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">
-          <button @mousedown.stop @click="inventoryActive" class="btn-cyan active py-1.5 px-4 min-w-24">Inventory</button>
-          <button @mousedown.stop class="btn-cyan py-1.5 px-4 min-w-24">Equipment</button>
-          <button @mousedown.stop class="btn-cyan py-1.5 px-4 min-w-24">Character</button>
-          <button @mousedown.stop class="btn-cyan py-1.5 px-4 min-w-24">Settings</button>
-        </div>
-        <div class="flex gap-2.5">
-          <button class="w-5 h-5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out" @click="gameStore.toggleInventory">
-            <img alt="close" draggable="false" src="/assets/icons/close-button-white.svg" class="w-full h-full" />
-          </button>
-        </div>
-        <div class="flex sm:hidden gap-1.5 flex-wrap">
-          <button @mousedown.stop @click="inventoryActive" class="btn-cyan active py-1.5 px-4 min-w-24">Inventory</button>
-          <button @mousedown.stop class="btn-cyan py-1.5 px-4 min-w-24">Equipment</button>
-          <button @mousedown.stop class="btn-cyan py-1.5 px-4 min-w-24">Character</button>
-          <button @mousedown.stop class="btn-cyan py-1.5 px-4 min-w-24">Settings</button>
-        </div>
-      </div>
-      <InventoryItems v-if="inventory" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import { useGameStore } from '@/stores/game';
-import InventoryItems from '@/components/gui/partials/InventoryItems.vue';
-
-const gameStore = useGameStore()
-let inventory = ref(true)
-let equipment = false
-let character = false
-let settings = false
-
-function inventoryActive() {
-  inventory.value = !inventory.value;
-  console.log(inventory.value);
-}
-
-</script>
\ No newline at end of file
diff --git a/src/components/gui/Menu.vue b/src/components/gui/Menu.vue
index 095f4ae..f68acfb 100644
--- a/src/components/gui/Menu.vue
+++ b/src/components/gui/Menu.vue
@@ -27,7 +27,7 @@
         <img class="group-hover:drop-shadow-default w-11 h-9 object-contain" draggable="false" src="/assets/icons/users.png" />
       </a>
     </li>
-    <li class="menu-item group relative" @click="gameStore.toggleInventory">
+    <li class="menu-item group relative" @click="gameStore.toggleUserPanel">
       <div class="group-hover:block absolute bottom-16 left-1/2 -translate-x-1/2 w-20 h-6 text-center bg-gray-300 border-2 border-solid border-cyan rounded-3xl hidden">
         <p class="absolute w-full bottom-0 m-0 text-xs leading-6">Inventory</p>
         <div class="group-hover:block absolute -bottom-2.5 bg-cyan h-2 w-3.5 [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 -translate-x-1/2 hidden"></div>
diff --git a/src/components/gui/UserPanel.vue b/src/components/gui/UserPanel.vue
new file mode 100644
index 0000000..4929b0d
--- /dev/null
+++ b/src/components/gui/UserPanel.vue
@@ -0,0 +1,39 @@
+<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="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">
+          <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 class="btn-cyan py-1.5 px-4 min-w-24">Character</button>
+          <button class="btn-cyan py-1.5 px-4 min-w-24">Settings</button>
+        </div>
+        <div class="flex gap-2.5">
+          <button class="w-5 h-5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out" @click="gameStore.toggleUserPanel">
+            <img alt="close" draggable="false" src="/assets/icons/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 class="btn-cyan py-1.5 px-4 min-w-24">Character</button>
+          <button class="btn-cyan py-1.5 px-4 min-w-24">Settings</button>
+        </div>
+      </div>
+      <InventoryItems v-show="userPanelScreen === 'inventory'" />
+      <InventoryEquipment v-show="userPanelScreen === 'equipment'" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useGameStore } from '@/stores/game';
+import InventoryItems from '@/components/gui/partials/Inventory.vue';
+import InventoryEquipment from '@/components/gui/partials/Equipment.vue';
+
+const gameStore = useGameStore()
+let userPanelScreen = ref('inventory')
+
+</script>
\ No newline at end of file
diff --git a/src/components/gui/partials/Equipment.vue b/src/components/gui/partials/Equipment.vue
new file mode 100644
index 0000000..9b0029e
--- /dev/null
+++ b/src/components/gui/partials/Equipment.vue
@@ -0,0 +1,74 @@
+<template>
+    <div class="grow flex flex-col w-full h-full relative overflow-auto">
+        <div class="m-5 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="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>
+                    </div>
+                </div>
+                <div class="flex flex-col gap-3 m-5">
+                    <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">
+                            <img src="/assets/icons/inventory/helmet.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
+                        </div>
+
+                        <!-- Head charm -->
+                        <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">
+                            <img src="/assets/icons/inventory/head_charm.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 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-cyan-200 rounded-md w-11 h-[104px] relative hover:bg-gray-200">
+                            <img src="/assets/icons/inventory/bracers.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
+                        </div>
+
+                        <!-- Chestplate -->
+                        <div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square w-[104px] h-[104px] relative hover:bg-gray-200">
+                            <img src="/assets/icons/inventory/chestplate.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-10/12 opacity-20" />
+                        </div>
+
+                        <!-- Primary Weapon -->
+                        <div class="bg-gray-300/80 border-solid border-2 border-cyan-200 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="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 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-cyan-200 rounded-md w-11 h-[104px] self-stretch justify-self-stretch relative hover:bg-gray-200">
+                            <img src="/assets/icons/inventory/legs.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 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-cyan-200 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="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
+                            </div>
+
+                            <!-- Boots -->
+                            <div class="bg-gray-300/80 border-solid border-2 border-cyan-200 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="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 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-cyan-200"></div>
+        </div>
+        <div class="m-5">
+            <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>
+            </div>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/src/components/gui/partials/InventoryItems.vue b/src/components/gui/partials/Inventory.vue
similarity index 100%
rename from src/components/gui/partials/InventoryItems.vue
rename to src/components/gui/partials/Inventory.vue
diff --git a/src/screens/Game.vue b/src/screens/Game.vue
index 6c4fac2..15797ba 100644
--- a/src/screens/Game.vue
+++ b/src/screens/Game.vue
@@ -50,7 +50,7 @@ import Menubar from '@/components/gui/Menu.vue'
 import GmTools from '@/components/gameMaster/GmTools.vue'
 import ZoneEditor from '@/components/gameMaster/zoneEditor/ZoneEditor.vue'
 import GmPanel from '@/components/gameMaster/GmPanel.vue'
-import Inventory from '@/components/gui/Inventory.vue'
+import Inventory from '@/components/gui/UserPanel.vue'
 
 const gameStore = useGameStore()
 const zoneEditorStore = useZoneEditorStore()
diff --git a/src/stores/game.ts b/src/stores/game.ts
index bcef088..1ae4f98 100644
--- a/src/stores/game.ts
+++ b/src/stores/game.ts
@@ -14,7 +14,7 @@ export const useGameStore = defineStore('game', {
     isGmPanelOpen: false,
     isMovingCamera: false,
     isChatOpen: false,
-    isInventoryOpen: false
+    isUserPanelOpen: false
   }),
   actions: {
     setScreen(screen: string) {
@@ -41,8 +41,8 @@ export const useGameStore = defineStore('game', {
     toggleChat() {
       this.isChatOpen = !this.isChatOpen
     },
-    toggleInventory() {
-      this.isInventoryOpen = !this.isInventoryOpen
+    toggleUserPanel() {
+      this.isUserPanelOpen = !this.isUserPanelOpen
     },
     initConnection() {
       this.connection = io(config.server_endpoint, {
@@ -77,7 +77,7 @@ export const useGameStore = defineStore('game', {
       this.isGmPanelOpen = false
       this.isMovingCamera = false
       this.isChatOpen = false
-      this.isInventoryOpen = false
+      this.isUserPanelOpen = false
 
       useCookies().remove('token')
     }