sos

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">
+    <li class="menu-item group relative" @click="gameStore.toggleInventory">
       <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>

src/components/utilities/inventory/Inventory.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="absolute z-50 w-full h-dvh top-0 left-0 bg-black/60">
+  <div class="absolute z-50 w-full h-dvh top-0 left-0 bg-black/60" v-show="gameStore.isInventoryOpen">
     <div class="flex flex-col gap-8 m-10 h-[calc(100%_-_5rem)]">
       <div class="flex gap-8 items-stretch justify-center grow max-h-[650px]">
         <div class="md:block hidden w-[30%] max-w-[350px] bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-lg backdrop-blur-sm shadow-lg">
@@ -148,3 +148,11 @@
     </div>
   </div>
 </template>
+
+<script lang="ts">
+import { useGameStore } from '@/stores/game'
+
+const gameStore = useGameStore()
+
+
+</script>

src/screens/Game.vue

@@ -2,7 +2,7 @@
   <div class="flex justify-center items-center h-dvh p-8 relative">
     <GmTools v-if="isLoaded && gameStore.character?.role === 'gm'" />
     <GmPanel v-if="isLoaded && gameStore.character?.role === 'gm'" />
-    <!--    <Inventory />-->
+    <Inventory />
 
     <div v-if="!zoneEditorStore.active">
       <Game :config="gameConfig" @create="createGame">
@@ -51,7 +51,7 @@ import Menubar from '@/components/gui/Menu.vue'
 import GmTools from '@/components/utilities/GmTools.vue'
 import ZoneEditor from '@/components/utilities/zoneEditor/ZoneEditor.vue'
 import GmPanel from '@/components/utilities/GmPanel.vue'
-// import Inventory from '@/components/utilities/inventory/Inventory.vue'
+import Inventory from '@/components/utilities/inventory/Inventory.vue'
 
 const gameStore = useGameStore()
 const zoneStore = useZoneStore()

src/stores/game.ts

@@ -13,7 +13,8 @@ export const useGameStore = defineStore('game', {
     character: null as Character | null,
     isGmPanelOpen: false,
     isMovingCamera: false,
-    isChatOpen: false
+    isChatOpen: false,
+    isInventoryOpen: false
   }),
   actions: {
     setScreen(screen: string) {
@@ -40,6 +41,9 @@ export const useGameStore = defineStore('game', {
     toggleChat() {
       this.isChatOpen = !this.isChatOpen
     },
+    toggleInventory() {
+      this.isInventoryOpen = !this.isInventoryOpen
+    },
     initConnection() {
       this.connection = io(config.server_endpoint, {
         secure: !config.development,
@@ -73,6 +77,7 @@ export const useGameStore = defineStore('game', {
       this.isGmPanelOpen = false
       this.isMovingCamera = false
       this.isChatOpen = false
+      this.isInventoryOpen = false
 
       useCookies().remove('token')
     }