<template>
  <div class="flex flex-col justify-center items-center h-dvh relative">
    <button @click="continueBtnClick" class="w-32 h-12 rounded-full bg-gray-500 flex items-center justify-between px-4 hover:bg-gray-600 transition-colors">
      <span class="text-white text-lg flex-1 text-center">Play</span>
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
      </svg>
    </button>
  </div>
</template>

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

const gameStore = useGameStore()

function continueBtnClick() {
  // Play music
  const audio = new Audio('/assets/music/login.mp3')
  audio.play()

  // Set isLoaded to true
  gameStore.game.isLoaded = true
}
</script>
