82 lines
2.2 KiB
Vue
82 lines
2.2 KiB
Vue
<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> |