<template>
  <div class="absolute left-[66px] top-4 bg-[url('/assets/ui-elements/hud-ui-box.svg')] bg-no-repeat px-4 py-2 w-[181px] h-[26px] flex flex-col justify-between">
    <div class="w-full flex items-center gap-2">
      <label class="text-xs leading-3 text-pixel" for="hp">HP</label>
      <progress class="h-2 rounded-sm w-full max-w-44 appearance-none accent-green" id="hp" :value="gameStore.character?.hitpoints" max="100">{{ gameStore.character?.hitpoints }}%</progress>
      <span class="text-xs leading-3 text-pixel">{{ gameStore.character?.hitpoints }}%</span>
    </div>
    <div class="w-full flex items-center gap-2">
      <label class="text-xs leading-3 text-pixel" for="sp">SP</label>
      <progress class="h-2 rounded-sm w-full max-w-44 appearance-none accent-blue" id="sp" :value="gameStore.character?.mana" max="100">{{ gameStore.character?.mana }}%</progress>
      <span class="text-xs leading-3 text-pixel">{{ gameStore.character?.mana }}%</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useGameStore } from '@/stores/gameStore'

const gameStore = useGameStore()
</script>

<style scoped lang="scss">
#hp {
  // Chrome, Safari, Edge, Opera
  &::-webkit-progress-value {
    @apply bg-gradient-to-r from-green from-75% to-green-200 rounded-sm;
  }
  &::-webkit-progress-bar {
    @apply bg-white rounded-sm border border-solid border-black;
  }
  // Firefox
  &::-moz-progress-bar {
    @apply bg-gradient-to-r from-green from-75% to-green-200 rounded-sm border border-solid border-black;
  }
}
#sp {
  // Chrome, Safari, Edge, Opera
  &::-webkit-progress-value {
    @apply bg-gradient-to-r from-blue from-75% to-blue-200 rounded-sm;
  }
  &::-webkit-progress-bar {
    @apply bg-white rounded-sm border border-solid border-black;
  }
  // Firefox
  &::-moz-progress-bar {
    @apply bg-gradient-to-r from-blue from-75% to-blue-200 rounded-sm border border-solid border-black;
  }
}
</style>
