<template>

</template>

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

const gameStore = useGameStore()
</script>

<style scoped lang="scss">
.hud-wrapper {
  .hud-bg {
    mask: url('/assets/shapes/hud-image-shape.svg') center/cover no-repeat;
  }
  #hp {
    // Chrome, Safari, Edge, Opera
    &::-webkit-progress-value {
      @apply bg-red rounded-lg;
    }
    &::-webkit-progress-bar {
      @apply bg-white rounded-lg border-2 border-solid border-white;
    }
    // Firefox
    &::-moz-progress-bar {
      @apply bg-red rounded-lg border-2 border-solid border-white;
    }
  }
  #mp {
    // Chrome, Safari, Edge, Opera
    &::-webkit-progress-value {
      @apply bg-blue rounded-lg;
    }
    &::-webkit-progress-bar {
      @apply bg-white rounded-lg border-2 border-solid border-white;
    }
    // Firefox
    &::-moz-progress-bar {
      @apply bg-blue rounded-lg border-2 border-solid border-white;
    }
  }

  &.other-player {
    .hud-bg {
      mask: url('/assets/shapes/hud-image-shape-flipped.svg') center/cover no-repeat;
    }
  }
}
</style>
