feat(ui): Vue Create Game component (#5)

Added a create Game vue template without logic

Co-authored-by: LQ63 <lkhermann@web.de>
Reviewed-on: #5

src/views/CreateGame.vue

@@ -0,0 +1,131 @@
+<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>