forked from noxious/client
98 lines
3.9 KiB
Vue
98 lines
3.9 KiB
Vue
<template>
|
|
<div class="bg-gray-300">
|
|
<div class="absolute bg-[url('/assets/shapes/select-screen-bg-shape.svg')] bg-no-repeat bg-center w-full h-full z-10 pointer-events-none"></div>
|
|
<div class="z-20 w-full h-dvh flex items-center justify-between flex-col relative">
|
|
<div class="filler"></div>
|
|
<h1 class="mt-[115px] text-center text-6xl">NEW QUEST</h1>
|
|
<form @submit.prevent="loginFunc">
|
|
<div class="my-[80px] mx-0 w-full flex flex-col gap-[24px]">
|
|
<div class="w-full grid gap-[15px]">
|
|
<div class="flex flex-col bg-white/50 rounded-[3px] border border-solid border-gray-50 sm:min-w-[500px] sm:w-unset w-full my-0 mx-auto">
|
|
<label class="text-black bg-white/50 p-1 text-sm rounded-t-[3px]" for="username">Username</label>
|
|
<input class="p-1 text-sm focus-visible:outline-none" id="username" v-model="username" type="text" name="username" required autofocus />
|
|
</div>
|
|
<div class="flex flex-col bg-white/50 rounded-[3px] border border-solid border-gray-50 sm:min-w-[500px] sm:w-unset w-full my-0 mx-auto">
|
|
<label class="text-black bg-white/50 p-1 text-sm rounded-t-[3px]" for="password">Password</label>
|
|
<input class="p-1 text-sm focus-visible:outline-none" id="password" v-model="password" type="password" name="password" required />
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-center sm:gap-[15px] gap-[8px]">
|
|
<button class="btn-cyan py-2 px-0 min-w-[100px]" type="submit"><span class="m-auto">PLAY</span></button>
|
|
<button class="btn-cyan py-2 px-0 min-w-[100px]" type="button" @click.prevent="registerFunc"><span class="m-auto">REGISTER</span></button>
|
|
<button class="btn-cyan py-2 px-0 min-w-[100px]"><span class="m-auto">CREDITS</span></button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<audio ref="bgm" id="bgm" src="/assets/music/bgm.mp3" loop autoplay></audio>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted, ref } from 'vue'
|
|
import { login, register } from '@/services/authentication'
|
|
import { useNotificationStore } from '@/stores/notifications'
|
|
import { useSocketStore } from '@/stores/socket'
|
|
import { useAssetStore } from '@/stores/assets'
|
|
|
|
const bgm = ref('bgm')
|
|
if (bgm.value.paused) {
|
|
addEventListener('click', () => bgm.value.play())
|
|
addEventListener('keydown', () => bgm.value.play())
|
|
}
|
|
|
|
const socket = useSocketStore()
|
|
const notifications = useNotificationStore()
|
|
const assetStore = useAssetStore()
|
|
const username = ref('')
|
|
const password = ref('')
|
|
|
|
// automatic login because of development
|
|
onMounted(async () => {
|
|
/**
|
|
* Fetch assets from the server
|
|
*/
|
|
if (!await assetStore.fetchAssets()) {
|
|
notifications.addNotification({ message: 'Failed to fetch assets, the server may be offline or in maintenance. Please try again later.' })
|
|
}
|
|
})
|
|
|
|
async function loginFunc() {
|
|
// check if username and password are valid
|
|
if (username.value === '' || password.value === '') {
|
|
notifications.addNotification({ message: 'Please enter a valid username and password' })
|
|
return
|
|
}
|
|
|
|
// send login event to server
|
|
const response = await login(username.value, password.value)
|
|
|
|
if (response.success === undefined) {
|
|
notifications.addNotification({ message: response.error })
|
|
return
|
|
}
|
|
|
|
socket.setToken(response.token)
|
|
await socket.initConnection()
|
|
}
|
|
|
|
async function registerFunc() {
|
|
// check if username and password are valid
|
|
if (username.value === '' || password.value === '') {
|
|
notifications.addNotification({ message: 'Please enter a valid username and password' })
|
|
return
|
|
}
|
|
|
|
// send register event to server
|
|
const response = await register(username.value, password.value)
|
|
|
|
if (response.success === undefined) {
|
|
notifications.addNotification({ message: response.error })
|
|
return
|
|
}
|
|
|
|
socket.setToken(response.token)
|
|
await socket.initConnection()
|
|
}
|
|
</script>
|