lq64
adbe2be534
Added a Rule Component and changed MainMenu Structure Co-authored-by: LQ63 <lkhermann@web.de> Reviewed-on: #11 Reviewed-by: Janis <janis-e@gmx.de> Co-authored-by: lq64 <lq@blackhole.local> Co-committed-by: lq64 <lq@blackhole.local>
85 lines
2.1 KiB
Vue
85 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import {ref} from "vue";
|
|
import { useRouter } from 'vue-router';
|
|
import {useQuasar} from "quasar";
|
|
const router = useRouter();
|
|
const lobbyCode = ref('');
|
|
const isLoading = ref(false);
|
|
const $q = useQuasar();
|
|
const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
|
|
const startGameQuasar = async() => {
|
|
if (!lobbyCode.value) {
|
|
$q.notify({ message: 'Lobby-Name wird benötigt', color: 'red', position: 'top', icon: 'cancel' });
|
|
return;
|
|
}
|
|
isLoading.value = true;
|
|
//TODO: Implement Logic to Start the Game and Redirect to Ingame
|
|
await delay(3000)
|
|
isLoading.value = false;
|
|
$q.notify({
|
|
message: `Lobby "${lobbyCode.value}" erfolgreich gefunden`,
|
|
color: 'green-6',
|
|
icon: 'check_circle',
|
|
position: 'top'
|
|
});
|
|
router.push({ name: 'mainmenu'});
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<header class="text-center q-mb-xl">
|
|
<p
|
|
class="text-h5 text-grey-4 q-mt-md"
|
|
style="max-width: 900px; margin-left: auto; margin-right: auto;"
|
|
>
|
|
Enter the Lobbycode below to join your friend's game and you are ready to go!
|
|
</p>
|
|
</header>
|
|
|
|
<div class="q-pa-md" style="width: 100%; max-width: 400px;">
|
|
|
|
<div>
|
|
<q-input
|
|
v-model="lobbyCode"
|
|
label="Lobbycode"
|
|
placeholder="123abc"
|
|
filled
|
|
dark
|
|
label-color="white"
|
|
color="white"
|
|
:rules="[val => !!val || 'Lobbycode is missing']"
|
|
/>
|
|
</div>
|
|
|
|
<div class="text-center q-mt-lg">
|
|
<q-btn
|
|
:loading="isLoading"
|
|
label="Join Game"
|
|
color="positive"
|
|
rounded
|
|
@click="startGameQuasar"
|
|
size="lg"
|
|
class="full-width"
|
|
/>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.game-title {
|
|
font-family: serif;
|
|
|
|
|
|
font-size: 5rem;
|
|
font-weight: 900;
|
|
letter-spacing: 3px;
|
|
color: #FFD700;
|
|
|
|
text-shadow:
|
|
2px 2px 0px #000000,
|
|
4px 4px 0px #8B4513,
|
|
6px 6px 12px rgba(0, 0, 0, 0.9);
|
|
}
|
|
</style>
|