feat(ui): Vue

Added Join Game Component to be able to search for a game.

src/components/MainMenuBoxes.vue

@@ -14,7 +14,7 @@ const menuItems = [
     title: 'Spiel beitreten',
     description: 'Join a game by typing in the game identifier.',
     icon: 'login',
-    routeName: 'join-game',
+    routeName: 'join-Game',
     color: 'blue-9'
   },
   {

src/router/index.ts

@@ -3,6 +3,7 @@ import HomeView from '../views/HomeView.vue'
 import LoginView from '../views/LoginView.vue'
 import MainMenuView from '../views/MainMenuView.vue'
 import createGameView from '../views/CreateGame.vue'
+import joinGameView from "@/views/JoinGameView.vue";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -35,6 +36,12 @@ const router = createRouter({
       name: 'create-Game',
       component: createGameView
     },
+    {
+      path: '/join',
+      name: 'join-Game',
+      component: joinGameView
+    },
+
 
   ],
 })

src/views/JoinGameView.vue

@@ -0,0 +1,93 @@
+<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>
+  <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;"
+          >
+            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>
+      </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>