<template>
  <div class="absolute top-4 right-4 hidden lg:block">
    <div class="w-40 h-40 rounded-full default-border bg-[url('/assets/ui-texture.png')] bg-no-repeat">
      <div class="w-40 h-40 rounded-full shadow-inner"></div>
    </div>
    <div class="absolute -bottom-3 left-1/2 -translate-x-1/2 flex gap-1">
      <button class="w-6 h-6 relative p-0">
        <img class="w-3 h-3 center-element" src="/assets/icons/plus-icon.svg" alt="Zoom-in button icon" />
        <img class="w-full h-full" src="/assets/ui-elements/button-ui-box-textured.svg" alt="" />
      </button>
      <button class="w-6 h-6 relative p-0">
        <img class="w-3 h-3 center-element" src="/assets/icons/minus-icon.svg" alt="Zoom-out button icon" />
        <img class="w-full h-full" src="/assets/ui-elements/button-ui-box-textured.svg" alt="" />
      </button>
    </div>
  </div>
</template>

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

const gameStore = useGameStore()
</script>
