From acae815a2abee4ed7270aba580cd2529d67dde72 Mon Sep 17 00:00:00 2001
From: Jonas <familiehimmelberg@gmail.com>
Date: Sun, 8 Mar 2026 20:53:04 +0100
Subject: [PATCH] Wire up online game creation and show UI message

Add game creation lifecycle hooks and UI feedback for online games.

- OnlineGame: add onGameCreated and onGameJoinedFailed callbacks, wire player.onGameCreated to set gameId and invoke onGameCreated, and implement createGame to connect and create a game on the player connection. Small cleanup in drop().
- GameSettings: add optional message field to carry informational text to the UI.
- OnlineMode.vue: register handlers for onGameStateChanged, onGameEnded and onGameCreated to update the reactive state and transition to the end/waiting states; update createGame to call OnlineGame.createGame; adjust component rendering logic to include WaitingForOpponent state.
- GameCreationMenu.vue: hide form controls when a settings.message exists and display the message instead; minor layout class adjustments.

These changes enable creating a game, propagating the generated game code to the UI, and showing a message to the user while waiting for opponents.
---
 GUI/src/components/GameCreationMenu.vue       |  5 +++--
 GUI/src/routes/OnlineMode.vue                 | 21 ++++++++++++++++---
 GUI/src/scripts/interfaces/GameSettings.ts    |  1 +
 .../scripts/logic/onlineMode/OnlineGame.ts    | 14 ++++++++++++-
 4 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/GUI/src/components/GameCreationMenu.vue b/GUI/src/components/GameCreationMenu.vue
index f0a49b2..3091442 100644
--- a/GUI/src/components/GameCreationMenu.vue
+++ b/GUI/src/components/GameCreationMenu.vue
@@ -19,7 +19,7 @@ function gameFieldPreset(x: number, y: number) {
     <v-sheet width="100%" class="text-centered pa-2 w-75" rounded>
       <h1 class="text-center mb-4">Spiel Erstellen</h1>
       <v-divider class="mb-4"></v-divider>
-      <v-row>
+      <v-row class="d-flex align-center justify-space-evenly ma-4 w-100" v-if="!settingsProp.message">
         <v-col cols="12" md="6">
           <h2 class="settingsCat">Spieler</h2>
           <v-text-field
@@ -60,10 +60,11 @@ function gameFieldPreset(x: number, y: number) {
           />
         </v-col>
       </v-row>
-      <div class="d-flex align-center justify-space-evenly ma-4 w-100">
+      <div class="d-flex align-center justify-space-evenly ma-4 w-100" v-if="!settingsProp.message">
         <v-btn color="red" @click="$router.push('/')" rounded="xl"> Abbrechen </v-btn>
         <v-btn color="primary" @click="$emit('createGame')" rounded="xl"> Spiel Starten </v-btn>
       </div>
+      <h2 v-else class="text-center">{{ settingsProp.message }}</h2>
     </v-sheet>
   </v-container>
 </template>
diff --git a/GUI/src/routes/OnlineMode.vue b/GUI/src/routes/OnlineMode.vue
index fde9a19..4cfabbf 100644
--- a/GUI/src/routes/OnlineMode.vue
+++ b/GUI/src/routes/OnlineMode.vue
@@ -33,7 +33,22 @@ const gameField = ref<number[][]>([]);
 const currentSelectionIndex = ref<number | null>(null);
 const gameEndedInformation = ref<GameEnded | null>(null);
 
-async function createGame() {}
+game.value.onGameStateChanged = (gameState) => {
+  gameField.value = gameState?.currentField ?? [];
+};
+
+game.value.onGameEnded = (gameEndedInfo) => {
+  gameEndedInformation.value = gameEndedInfo;
+  currentState.value = CurrentState.EndScreen;
+};
+
+game.value.onGameCreated = (gameCode: string) => {
+  settings.value.message = `Das Spiel ist erstellt, deine Freund kann über folgendem Code Beitreten: ${gameCode}`;
+};
+
+async function createGame() {
+    await game.value.createGame(settings.value);
+}
 
 async function tryToJoin() {}
 </script>
@@ -48,12 +63,12 @@ async function tryToJoin() {}
   <GameCreationMenu
     v-model:settings="settings"
     @create-game="createGame()"
-    v-if="currentState === CurrentState.CreatingGame"
+    v-else-if="currentState === CurrentState.CreatingGame || currentState === CurrentState.WaitingForOpponent"
   />
 
   <GameJoinMenu
     :joinGameObject="joiningModel"
-    v-if="currentState === CurrentState.JoiningGame"
+    v-else-if="currentState === CurrentState.JoiningGame"
     @join="tryToJoin()"
   />
 
diff --git a/GUI/src/scripts/interfaces/GameSettings.ts b/GUI/src/scripts/interfaces/GameSettings.ts
index 46b6898..1d6b5b6 100644
--- a/GUI/src/scripts/interfaces/GameSettings.ts
+++ b/GUI/src/scripts/interfaces/GameSettings.ts
@@ -5,4 +5,5 @@ export interface GameSettings {
   playerName1: string;
   playerName2?: string | null;
   aiLevel?: number | null;
+  message?: string | null;
 }
diff --git a/GUI/src/scripts/logic/onlineMode/OnlineGame.ts b/GUI/src/scripts/logic/onlineMode/OnlineGame.ts
index 3618f55..4274391 100644
--- a/GUI/src/scripts/logic/onlineMode/OnlineGame.ts
+++ b/GUI/src/scripts/logic/onlineMode/OnlineGame.ts
@@ -7,15 +7,27 @@ class OnlineGame {
   private gameId: string = '';
 
   public gameState: GameInformationDto | undefined;
+  public onGameCreated?: (gameCode: string) => void;
+  public onGameJoinedFailed?: (gameCode: string) => void;
   public onGameStateChanged?: (gameState: GameInformationDto | undefined) => void;
   public onGameEnded?: (gameEndedInfo: GameEnded) => void;
 
   constructor(settings: GameSettings) {
     this.player = new GameConnection();
+
+    this.player.onGameCreated = (gameIdentifier) => {
+      this.gameId = gameIdentifier.gameId;
+      this.onGameCreated?.(gameIdentifier.gameCode.toString());
+    }
+  }
+
+  async createGame(settings: GameSettings) {
+    await this.player.connect(settings.playerName1);
+    await this.player.createGame(settings.fieldSize);
   }
 
   async drop(index: number){
-    
+
   }
 }