lq64
bb6355d9ed
Started with Lobby Component Co-authored-by: LQ63 <lkhermann@web.de> Co-authored-by: Janis <janis-e@gmx.de> Reviewed-on: #21 Reviewed-by: Janis <janis-e@gmx.de> Co-authored-by: lq64 <lq@blackhole.local> Co-committed-by: lq64 <lq@blackhole.local>
127 lines
3.3 KiB
Vue
127 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import { useQuasar } from 'quasar';
|
|
import { useRouter } from 'vue-router';
|
|
import axios from "axios";
|
|
|
|
const api = window?.__RUNTIME_CONFIG__?.API_URL;
|
|
const lobbyName = ref('');
|
|
const isPublic = ref(false);
|
|
const playerAmount = ref(2);
|
|
const $q = useQuasar();
|
|
const isLoading = ref(false);
|
|
const router = useRouter();
|
|
const createGameQuasar = async () => {
|
|
if (!lobbyName.value) {
|
|
$q.notify({ message: 'Lobby-Name wird benötigt', color: 'red', position: 'top', icon: 'cancel' });
|
|
return;
|
|
}
|
|
isLoading.value = true;
|
|
axios.post(`${api}/createGame`, {lobbyname: lobbyName.value, playeramount: playerAmount.value.toString()}, {withCredentials: true}).then((response) => {
|
|
const responseData = response.data
|
|
console.log("Response" + responseData.status)
|
|
$q.notify({
|
|
message: `Lobby "${lobbyName.value}" erfolgreich erstellt mit gameId ${responseData.gameId}!`,
|
|
color: 'green-6',
|
|
icon: 'check_circle',
|
|
position: 'top'
|
|
});
|
|
router.replace("/game")
|
|
}).catch((err) => {
|
|
console.log("ERROR:" + err)
|
|
}).finally(() =>
|
|
isLoading.value = false
|
|
)
|
|
}
|
|
</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;"
|
|
>
|
|
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>
|
|
</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>
|