From 14e001cae67592c5ea15786905aa3574df9a9e6c Mon Sep 17 00:00:00 2001
From: lq64 <lq@blackhole.local>
Date: Wed, 10 Dec 2025 15:45:56 +0100
Subject: [PATCH] feat(api): FRO-15 Join Game (#16)

Added join game functionality

Co-authored-by: LQ63 <lkhermann@web.de>
Reviewed-on: https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/pulls/16
Reviewed-by: Janis <janis-e@gmx.de>
Co-authored-by: lq64 <lq@blackhole.local>
Co-committed-by: lq64 <lq@blackhole.local>
---
 src/views/JoinGameView.vue | 32 +++++++++++++++++++++-----------
 1 file changed, 21 insertions(+), 11 deletions(-)

diff --git a/src/views/JoinGameView.vue b/src/views/JoinGameView.vue
index bebc3ba..aab8b5a 100644
--- a/src/views/JoinGameView.vue
+++ b/src/views/JoinGameView.vue
@@ -2,27 +2,37 @@
 import {ref} from "vue";
 import { useRouter } from 'vue-router';
 import {useQuasar} from "quasar";
+import axios from "axios";
 const router = useRouter();
 const lobbyCode = ref('');
 const isLoading = ref(false);
 const $q = useQuasar();
-const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
+const api = window?.__RUNTIME_CONFIG__?.API_URL;
 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'});
+  axios.post(`${api}/joinGame`, {gameId: lobbyCode.value.toString()}, {withCredentials: true}).then(response => {
+    const responseData = response.data
+    $q.notify({
+      message: `Lobby "${lobbyCode.value}" erfolgreich gefunden`,
+      color: 'green-6',
+      icon: 'check_circle',
+      position: 'top'
+    });
+    router.push("/lobby")
+  }).catch(() => {
+    $q.notify({
+      message: `Lobby "${lobbyCode.value}" nicht gefunden`,
+      color: 'red-6',
+      icon: 'cancel',
+      position: 'top'
+    })
+  }).finally(() =>
+    isLoading.value = false
+  )
 }
 </script>