From a5019fc27a59e43e2f93465a01f2dd82e765a647 Mon Sep 17 00:00:00 2001
From: Jonas <familiehimmelberg@gmail.com>
Date: Sun, 8 Mar 2026 20:12:23 +0100
Subject: [PATCH] Add JoinMenu and join error handling

Add a new JoinMenu.vue component to provide a UI for joining existing games (emits a "join" event and offers Cancel/Join buttons). Improve UX by adding spacing to GameCreationMenu.vue header. Update OnlineMode.vue to import GameCreationMenu. In the API, send a client-side error message when adding a player fails (GameManager.cs now notifies the player's connection with "Spiel Existiert nicht!" before returning null) so users receive immediate feedback when a join attempt is invalid.
---
 API/Services/GameManager/GameManager.cs |  6 +++++-
 GUI/src/components/GameCreationMenu.vue |  2 +-
 GUI/src/components/JoinMenu.vue         | 21 +++++++++++++++++++++
 GUI/src/routes/OnlineMode.vue           |  1 +
 4 files changed, 28 insertions(+), 2 deletions(-)
 create mode 100644 GUI/src/components/JoinMenu.vue

diff --git a/API/Services/GameManager/GameManager.cs b/API/Services/GameManager/GameManager.cs
index 291c4e3..c64a9d6 100644
--- a/API/Services/GameManager/GameManager.cs
+++ b/API/Services/GameManager/GameManager.cs
@@ -21,7 +21,11 @@ public class GameManager(IGameRepository gameRepository, IHubContext<GameHubSock
         
         var success = game != null && game.State == GameState.Lobby && game.AddPlayer(player);
 
-        if (!success) return null;
+        if (!success)
+        {
+            await hubContext.Clients.Client(player.ConnectionId).SendAsync("Error", "Spiel Existiert nicht!");
+            return null;
+        }
 
         if (game.Players.Count == 2)
         {
diff --git a/GUI/src/components/GameCreationMenu.vue b/GUI/src/components/GameCreationMenu.vue
index 667d5c5..f0a49b2 100644
--- a/GUI/src/components/GameCreationMenu.vue
+++ b/GUI/src/components/GameCreationMenu.vue
@@ -17,7 +17,7 @@ function gameFieldPreset(x: number, y: number) {
 <template>
   <v-container class="d-flex align-center justify-center fill-height">
     <v-sheet width="100%" class="text-centered pa-2 w-75" rounded>
-      <h1 class="text-center">Spiel Erstellen</h1>
+      <h1 class="text-center mb-4">Spiel Erstellen</h1>
       <v-divider class="mb-4"></v-divider>
       <v-row>
         <v-col cols="12" md="6">
diff --git a/GUI/src/components/JoinMenu.vue b/GUI/src/components/JoinMenu.vue
new file mode 100644
index 0000000..3183fcb
--- /dev/null
+++ b/GUI/src/components/JoinMenu.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+defineEmits(["join"]);
+</script>
+
+<template>
+  <v-container class="d-flex align-center justify-center fill-height">
+    <v-sheet class="text-centered pa-2 w-50" rounded>
+      <h1 class="text-center mb-5">Spiel Beitreten</h1>
+      <h3 class="text-center">
+        Hier kannst du einem bestehenden Spiel beitreten, indem du den Spiel Code eingibst, die dir dein Freund gegeben hat.
+      </h3>
+      <v-divider class="mb-5 mt-5"></v-divider>
+      <div class="d-flex align-center justify-space-evenly ma-4 w-100">
+        <v-btn color="red" @click="$router.push('/')" rounded="xl"> Abbrechen </v-btn>
+        <v-btn color="primary" @click="$emit('join')" rounded="xl"> Beitreten </v-btn>
+      </div>
+    </v-sheet>
+  </v-container>
+</template>
+
+<style scoped></style>
diff --git a/GUI/src/routes/OnlineMode.vue b/GUI/src/routes/OnlineMode.vue
index ebf3c6a..7818b12 100644
--- a/GUI/src/routes/OnlineMode.vue
+++ b/GUI/src/routes/OnlineMode.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import CreateOrJoinMenu from '@/components/CreateOrJoinMenu.vue';
+import GameCreationMenu from '@/components/GameCreationMenu.vue';
 import type { GameSettings } from '@/scripts/interfaces/GameSettings';
 import { ref } from 'vue';