1
0
forked from noxious/client

New login design, added basic logic for multiplayer (WIP)

This commit is contained in:
2024-05-04 00:27:55 +02:00
parent f63cc93454
commit b16863a363
18 changed files with 206 additions and 78 deletions

View File

@ -1,6 +1,6 @@
<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" />
<img src="/assets/bglogin.png" id="bg-img" alt="New Quest login background" />
<div class="content-wrapper">
<h1 class="main-title">NEW QUEST</h1>
@ -11,39 +11,32 @@
<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 class="button" @click="login">
<span>LOGIN</span>
</button>
<button class="button button-2" @click="register">
<p>REGISTER</p>
<img src="/assets/Button_2.png" />
<button class="button" @click="register">
<span>REGISTER</span>
</button>
<button class="button button-3">
<p>CREDITS</p>
<img src="/assets/Button_3.png" />
<button class="button">
<span>CREDITS</span>
</button>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import SocketioService from '@/services/socketio.service';
import { useSocketStore } from '@/stores/socket'
const socket = useSocketStore();
// const bgm = ref('bgm');
// const bgmStart = () => bgm.value.play();
@ -57,15 +50,10 @@ import SocketioService from '@/services/socketio.service';
//
// })
// on login form submit
const submit = () => {
console.log('submit');
}
const username = ref('');
const password = ref('');
function register() {
async function login() {
// check if username and password are valid
if (username.value === '' || password.value === '') {
alert('Please enter a valid username and password');
@ -73,7 +61,29 @@ function register() {
}
// send register event to server
SocketioService.socket.emit('register', username.value, password.value);
const success = await socket.login(username.value, password.value);
if (!success) {
alert('Invalid username or password');
}
}
async 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
const success = await socket.register(username.value, password.value);
if (!success) {
alert('Username already exists');
}
if (success) {
alert('User registered successfully');
}
}
</script>