lq64
3efacde49d
Added a create Game vue template without logic Co-authored-by: LQ63 <lkhermann@web.de> Reviewed-on: #5
132 lines
3.4 KiB
Vue
132 lines
3.4 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import { useQuasar } from 'quasar';
|
|
import { useRouter } from 'vue-router';
|
|
|
|
const lobbyName = ref('');
|
|
const isPublic = ref(false);
|
|
const playerAmount = ref(2);
|
|
const $q = useQuasar();
|
|
const isLoading = ref(false);
|
|
const router = useRouter();
|
|
const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
|
|
const createGameQuasar = async () => {
|
|
if (!lobbyName.value) {
|
|
$q.notify({ message: 'Lobby-Name wird benötigt', color: 'red', position: 'top', icon: 'cancel' });
|
|
return;
|
|
}
|
|
isLoading.value = true;
|
|
//TODO: Implement Logic to Create the Game and Redirect to Lobby
|
|
await delay(3000)
|
|
isLoading.value = false;
|
|
$q.notify({
|
|
message: `Lobby "${lobbyName.value}" erfolgreich erstellt!`,
|
|
color: 'green-6',
|
|
icon: 'check_circle',
|
|
position: 'top'
|
|
});
|
|
router.push({ name: 'mainmenu'});
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<q-layout>
|
|
<q-page-container>
|
|
<q-page class="flex justify-start items-center column ">
|
|
<header class="text-center q-mb-xl">
|
|
<h1 class="game-title text-white q-my-none">
|
|
KnockOutWhist
|
|
</h1>
|
|
<p
|
|
class="text-h5 text-grey-4 q-mt-md"
|
|
style="max-width: 900px; margin-left: auto; margin-right: auto;"
|
|
>
|
|
Are you ready to play? Please select a lobbyname of your choice, the amount of players you want
|
|
to play with and you are ready to go!
|
|
</p>
|
|
</header>
|
|
|
|
<div class="q-pa-md" style="width: 100%; max-width: 400px;">
|
|
|
|
<div>
|
|
<q-input
|
|
v-model="lobbyName"
|
|
label="Lobbyname"
|
|
placeholder="Lobby 1"
|
|
filled
|
|
dark
|
|
label-color="white"
|
|
color="white"
|
|
:rules="[val => !!val || 'Lobbyname is missing']"
|
|
/>
|
|
</div>
|
|
|
|
<div class="q-mb-md">
|
|
<q-toggle
|
|
v-model="isPublic"
|
|
label="public/private"
|
|
checked-icon="check"
|
|
unchecked-icon="close"
|
|
color="primary"
|
|
disable
|
|
dark
|
|
/>
|
|
</div>
|
|
|
|
<div class="q-mb-md">
|
|
<div class="text-subtitle1 q-mb-xs text-white">Players: {{ playerAmount }}</div>
|
|
|
|
<q-slider
|
|
v-model="playerAmount"
|
|
:min="2"
|
|
:max="7"
|
|
:step="1"
|
|
color="primary"
|
|
dark
|
|
/>
|
|
|
|
<div class="row justify-between q-mt-sm text-caption text-grey-4">
|
|
<span>2</span>
|
|
<span>3</span>
|
|
<span>4</span>
|
|
<span>5</span>
|
|
<span>6</span>
|
|
<span>7</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center q-mt-lg">
|
|
<q-btn
|
|
:loading="isLoading"
|
|
label="Create Game"
|
|
color="positive"
|
|
rounded
|
|
@click="createGameQuasar"
|
|
size="lg"
|
|
class="full-width"
|
|
/>
|
|
</div>
|
|
|
|
</div>
|
|
</q-page>
|
|
</q-page-container>
|
|
</q-layout>
|
|
</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>
|