<template>
  <div class="hud-wrapper">
    <div class="profile">
      <img draggable="false" src="/assets/avatar/default/head.png" />
    </div>
    <div class="hud">
      <div class="stats">
        <div class="player-details">
          <span class="player-name">{{ socket.getCharacter.name }}</span>
          <span class="player-lvl">lvl. {{ socket.getCharacter.level }}</span>
        </div>
        <div class="bar">
          <label for="hp">HP</label>
          <progress id="hp" :value="socket.getCharacter.hitpoints" max="100">{{ socket.getCharacter.hitpoints }}%</progress>
        </div>
        <div class="bar">
          <label for="mp">MP</label>
          <progress id="mp" :value="socket.getCharacter.mana" max="100">{{ socket.getCharacter.mana }}%</progress>
        </div>
      </div>
    </div>
  </div>
</template>

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

const socket = useSocketStore();
</script>

<style scoped lang="scss">
@import '@/assets/scss/main';

.hud-wrapper {
  position: relative;
  left: -32px;

  .hud, &::before {
    position: absolute;
    top: 32px;
    left: 32px;
    width: 245px;
    height: 75px;
    border-radius: 16px;
    z-index: 1;
  }

  .profile {
    position: absolute;
    width: 64px;
    height: 64px;
    background-color: rgba($white, 0.8);
    border-radius: 100%;
    border: 3px solid $white;
    top: 0;
    left: 0;
    z-index: 2; // Ensure profile is above hud and before
    img {
      width: 32px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }

  .hud {
    background: url('/assets/shapes/hud-shape.svg') center/cover no-repeat;
    .stats {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: end;
      justify-content: center;
      padding: 0 20px 0 50px;

      .player-details, .bar {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        span, label {
          font-size: 14px;
        }
        .player-name {
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          max-width: 125px;
        }
      }

      .player-details {
        margin-bottom: 5px;
      }

      .bar {
        progress {
          -webkit-appearance: none;
          appearance: none;
          height: 8px;
          border-radius: 8px;
          max-width: 140px;

          &#hp {
            accent-color: $red;
            // Chrome, Safari, Edge, Opera
            &::-webkit-progress-value { background: $red; border-radius: 8px; }
            &::-webkit-progress-bar { background: $white; border-radius: 8px; border: 2px solid $white; }
            // Firefox
            &::-moz-progress-bar { background: $red; border-radius: 8px; border: 2px solid $white;}
          }
          &#mp {
            accent-color: $light-blue;
            // Chrome, Safari, Edge, Opera
            &::-webkit-progress-value { background: $light-blue; border-radius: 8px; }
            &::-webkit-progress-bar { background: $white; border-radius: 8px; border: 2px solid $white;}
            // Firefox
            &::-moz-progress-bar { background: $light-blue; border-radius: 8px; border: 2px solid $white;}
          }
        }
      }
    }
  }

  &::before {
    content: '';
    background: url('/assets/clouds.png') center/cover no-repeat;
    mask: url('/assets/shapes/hud-image-shape.svg') center/cover no-repeat;
    mask-mode: luminance;
  }
}
</style>
