<template>
<!--  <audio ref="bgm" id="bgm" src="/assets/music/bgm.mp3" loop autoplay></audio>-->
  <img src="/assets/Leaf_BG_standalone.png" id="bg-img" alt="New Quest login background" />
  <div class="content-wrapper">
    <h1 class="main-title">NEW QUEST</h1>

    <div class="content-elements">
      <div class="login-form">
        <form method="post">
          <div class="form-field">
            <label for="username">Username</label>
            <input v-model="username" type="text" name="username" required>
          </div>

          <div class="form-field">
            <label for="password">Password</label>
            <input v-model="password" type="password" name="password" required>
          </div>
        </form>
      </div>

      <div class="row-buttons">
        <button class="button button-1" id="submit" @click="submit">
          <p>LOGIN</p>
          <img src="/assets/Button_1.png" />
        </button>

        <button class="button button-2" @click="register">
          <p>REGISTER</p>
          <img src="/assets/Button_2.png" />
        </button>

        <button class="button button-3">
          <p>CREDITS</p>
          <img src="/assets/Button_3.png" />
        </button>
      </div>
    </div>
    
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import SocketioService from '@/services/socketio.service';


// const bgm = ref('bgm');
// const bgmStart = () => bgm.value.play();

// onMounted(() => {
//   // check if bgm is playing already and do nothing
//   if (bgm.value.paused) {
//     window.addEventListener('click', () => bgm.value.play())
//     window.addEventListener('keydown', () => bgm.value.play())
//   }
//
// })

// on login form submit
const submit = () => {
  console.log('submit');
}

const username = ref('');
const password = ref('');

function register() {
  // check if username and password are valid
  if (username.value === '' || password.value === '') {
    alert('Please enter a valid username and password');
    return;
  }

  // send register event to server
  SocketioService.socket.emit('register', username.value, password.value);
}
</script>

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