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>