client/src/components/game/gui/CharacterProfile.vue

<template>
  <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" alt="" />
      <img src="/assets/ui-elements/profile-ui-box-inner.svg" class="absolute left-2 bottom-2 w-[calc(100%_-_16px)] h-[calc(100%_-_40px)]" alt="" />
      <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 draggable="false" src="/assets/icons/modal/close-button-white.svg" class="w-full h-full" alt="Close button icon" />
        </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" alt="Plus button icon" />
            </a>
          </div>
          <div class="flex justify-between">
            <div class="flex flex-col gap-0.5">
              <div class="w-9 h-9 default-border 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 default-border 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 default-border 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 default-border 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" alt="Player character sprite" />
            <div class="flex flex-col items-end gap-0.5">
              <div class="w-9 h-9 default-border rounded-sm bg-gray relative hover:bg-gray-600">
                <img class="w-6 h-6 center-element" src="/assets/icons/profile/helmet.svg" alt="Helmet icon" />
              </div>
              <div class="w-9 h-9 default-border rounded-sm bg-gray relative hover:bg-gray-600">
                <img class="w-6 h-6 center-element" src="/assets/icons/profile/chestplate.svg" alt="Chestplate icon" />
              </div>
              <div class="flex gap-0.5 items-end">
                <div class="w-6 h-6 default-border rounded-sm bg-gray relative hover:bg-gray-600">
                  <img class="w-4 h-4 center-element" src="/assets/icons/profile/boots.svg" alt="Boots icon" />
                </div>
                <div class="w-9 h-9 default-border rounded-sm bg-gray relative hover:bg-gray-600">
                  <img class="w-6 h-6 center-element" src="/assets/icons/profile/legs.svg" alt="Legs icon" />
                </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 default-border rounded-sm bg-gray relative hover:bg-gray-600"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useGameStore } from '@/stores/gameStore'
import { computed, onMounted, onUnmounted, ref } from 'vue'

const gameStore = useGameStore()

const width = ref(286)
const height = ref(483)
const x = ref(window.innerWidth / 2 - 143)
const y = ref(window.innerHeight / 2 - 241)
const isDragging = ref(false)

const modalStyle = computed(() => ({
  top: `${y.value}px`,
  left: `${x.value}px`,
  width: `${width.value}px`,
  height: `${height.value}px`
}))

function startDrag(event: MouseEvent) {
  isDragging.value = true
  const startX = event.clientX - x.value
  const startY = event.clientY - y.value

  function drag(event: MouseEvent) {
    if (!isDragging.value) return
    x.value = event.clientX - startX
    y.value = event.clientY - startY
  }

  function stopDrag() {
    isDragging.value = false
    removeEventListener('mousemove', drag)
    removeEventListener('mouseup', stopDrag)
  }

  addEventListener('mousemove', drag)
  addEventListener('mouseup', stopDrag)
}

function keyPress(event: KeyboardEvent) {
  if (event.altKey && event.key === 'c') {
    gameStore.toggleCharacterProfile()
  }
}

onMounted(() => {
  addEventListener('keydown', keyPress)
})

onUnmounted(() => {
  removeEventListener('keydown', keyPress)
})
</script>