WIP Character Profile popup, cleaned up old assets

src/components/gui/CharacterProfile.vue

@@ -0,0 +1,183 @@
+<template>
+    <div class="relative" v-if="gameStore.uiSettings.isCharacterProfileOpen" :style="modalStyle">
+        <img src="/assets/profile-ui-box-outer.svg" class="absolute w-full h-full" />
+        <img src="/assets/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/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="group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-small.svg')] bg-no-repeat block w-8 h-8 relative">
+                        <img class="group-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">
+                            <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">
+                            <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">
+                                <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">
+                                <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">
+                            <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">
+                            <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-6 h-6 border border-solid border-gray-500 rounded-sm bg-gray relative">
+                                <span class="absolute w-full top-1/2 -translate-y-1/2 text-[6px] text-center">RING</span>
+                            </div>
+                            <div class="w-9 h-9 border border-solid border-gray-500 rounded-sm bg-gray relative">
+                                <span class="absolute w-full top-1/2 -translate-y-1/2 text-[6px] text-center">L-HAND</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div></div>
+            </div>
+            <div></div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref, watch, computed } from 'vue'
+import { useGameStore } from '@/stores/gameStore'
+
+const gameStore = useGameStore()
+
+let startX = 0
+let startY = 0
+let initialX = 0
+let initialY = 0
+let modalPositionX = 0
+let modalPositionY = 0
+let modalWidth = 277
+let modalHeight = 473
+
+const width = ref(modalWidth)
+const height = ref(modalHeight)
+const x = ref(0)
+const y = ref(0)
+const isDragging = ref(false)
+
+const modalStyle = computed(() => ({
+  top: `${y.value}px`,
+  left: `${x.value}px`,
+  width: `${width.value}px`,
+  height: `${height.value}px`,
+  maxWidth: '100vw',
+  maxHeight: '100vh'
+}))
+
+function startDrag(event: MouseEvent) {
+  isDragging.value = true
+  startX = event.clientX
+  startY = event.clientY
+  initialX = x.value
+  initialY = y.value
+  event.preventDefault()
+}
+
+function drag(event: MouseEvent) {
+  if (!isDragging.value) return
+  const dx = event.clientX - startX
+  const dy = event.clientY - startY
+  x.value = initialX + dx
+  y.value = initialY + dy
+  adjustPosition()
+}
+
+function stopDrag() {
+  isDragging.value = false
+}
+
+function adjustPosition() {
+  x.value = Math.max(0, Math.min(x.value, window.innerWidth - width.value))
+  y.value = Math.max(0, Math.min(y.value, window.innerHeight - height.value))
+}
+
+function initializePosition() {
+  width.value = Math.min(modalWidth, window.innerWidth)
+  height.value = Math.min(modalHeight, window.innerHeight)
+  if (modalPositionX !== 0 && modalPositionY !== 0) {
+    console.log(modalPositionX)
+    console.log(modalPositionY)
+    x.value = modalPositionX
+    y.value = modalPositionY
+  } else {
+    x.value = (window.innerWidth - width.value) / 2
+    y.value = (window.innerHeight - height.value) / 2
+  }
+}
+
+watch(
+  () => gameStore.uiSettings.isCharacterProfileOpen,
+  (value) => {
+    gameStore.uiSettings.isCharacterProfileOpen = value
+    if (value) {
+      initializePosition()
+    }
+  }
+)
+
+watch(
+  () => modalWidth,
+  (value) => {
+    width.value = Math.min(value, window.innerWidth)
+  }
+)
+
+watch(
+  () => modalHeight,
+  (value) => {
+    height.value = Math.min(value, window.innerHeight)
+  }
+)
+
+watch(
+  () => modalPositionX,
+  (value) => {
+    x.value = value
+  }
+)
+
+watch(
+  () => modalPositionY,
+  (value) => {
+    y.value = value
+  }
+)
+
+onMounted(() => {
+  window.addEventListener('mousemove', drag)
+  window.addEventListener('mouseup', stopDrag)
+  initializePosition()
+})
+
+onUnmounted(() => {
+  window.removeEventListener('mousemove', drag)
+  window.removeEventListener('mouseup', stopDrag)
+})
+</script>

src/components/gui/Menu.vue

@@ -9,7 +9,7 @@
         <img class="group-hover:drop-shadow-default w-6 h-5 mx-[9px] my-[11px] object-contain" draggable="false" src="/assets/icons/menu-icon.svg" />
       </a>
     </li>
-    <li class="menu-item group relative" @click="gameStore.toggleUserPanel">
+    <li class="menu-item group relative" @click="gameStore.toggleCharacterProfile">
       <div class="group-hover:block absolute top-1/2 left-14 -translate-y-1/2 w-20 h-6 text-center bg-gray-800 border-2 border-solid border-gray-500 rounded-3xl hidden">
         <p class="absolute w-full bottom-0 m-0 text-xs leading-6 text-white">User Profile</p>
         <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>

src/components/gui/UserPanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="absolute z-50 w-full h-dvh top-0 left-0 bg-black/60" v-show="gameStore.uiSettings.isUserPanelOpen">
+  <div class="absolute z-50 w-full h-dvh top-0 left-0 bg-black/60" v-show="false">
     <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-700 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>
@@ -10,7 +10,7 @@
           <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" @click="gameStore.toggleUserPanel">
+          <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/close-button-white.svg" class="w-full h-full" />
           </button>
         </div>

src/screens/Game.vue

@@ -11,7 +11,7 @@
           <Chat />
           <ExpBar />
 
-          <Inventory />
+          <CharacterProfile />
           <Effects />
         </div>
       </Scene>
@@ -31,7 +31,7 @@ import Hud from '@/components/gui/Hud.vue'
 import Zone from '@/components/zone/Zone.vue'
 import Hotkeys from '@/components/gui/Hotkeys.vue'
 import Chat from '@/components/gui/Chat.vue'
-import Inventory from '@/components/gui/UserPanel.vue'
+import CharacterProfile from '@/components/gui/CharacterProfile.vue'
 import Effects from '@/components/Effects.vue'
 import { loadAssets } from '@/composables/zoneComposable'
 import Minimap from '@/components/gui/Minimap.vue'

src/stores/gameStore.ts

@@ -26,7 +26,7 @@ export const useGameStore = defineStore('game', {
       },
       uiSettings: {
         isChatOpen: false,
-        isUserPanelOpen: false,
+        isCharacterProfileOpen: false,
         isGmPanelOpen: false
       }
     }
@@ -122,8 +122,8 @@ export const useGameStore = defineStore('game', {
     toggleChat() {
       this.uiSettings.isChatOpen = !this.uiSettings.isChatOpen
     },
-    toggleUserPanel() {
+    toggleCharacterProfile() {
-      this.uiSettings.isUserPanelOpen = !this.uiSettings.isUserPanelOpen
+      this.uiSettings.isCharacterProfileOpen = !this.uiSettings.isCharacterProfileOpen
     },
     initConnection() {
       this.connection = io(config.server_endpoint, {
@@ -169,7 +169,7 @@ export const useGameStore = defineStore('game', {
       this.isPlayerDraggingCamera = false
       this.gameSettings.isCameraFollowingCharacter = false
       this.uiSettings.isChatOpen = false
-      this.uiSettings.isUserPanelOpen = false
+      this.uiSettings.isCharacterProfileOpen = false
 
       this.world.date = new Date()
       this.world.isRainEnabled = false