Add game restart and disconnect support

Prevent handling disconnects for games already ended; add a disconnect() method on the SignalR connection and a LocalGame.disconnectAll() helper. Update GameEndedMenu to emit a restart event and adjust displayed messages/labels. Wire a restart() handler in LocalMode that disconnects all players then restarts the game.

GUI/src/components/GameEndedMenu.vue

@@ -2,16 +2,18 @@
 import { computed } from 'vue'
 import type { GameEnded } from '@/scripts/logic/signalR/GameConnection'
 
+defineEmits(["restartGame"]);
+
 const props = defineProps<{ gameEndedInformation: GameEnded | null }>()
 
 const message = computed(() => {
     switch (props.gameEndedInformation?.method) {
         case "PlayerDisconnected":
-            return `Bei Spieler ${props.gameEndedInformation.player?.name} ist die Verbindung abgebrochen`
+            return `Bei dem Spieler ${props.gameEndedInformation.player?.name} ist die Verbindung abgebrochen :(`
         case "Draw":
             return "Das Spielfeld ist voll und es ist ein Unentschieden"
         case "Win":
-            return `Spieler ${props.gameEndedInformation.player?.name} hat gewonnen!`
+            return `${props.gameEndedInformation.player?.name} hat gewonnen!`
         default:
             return ""
     }
@@ -20,15 +22,15 @@ const message = computed(() => {
 
 <template>
     <v-sheet width="100%" class="text-centered pa-2 w-75" rounded>
-        <h1 class="text-center">Spiel Beendet</h1>
-        <h3 class="test-center">{{ message }}</h3>
+        <h1 class="text-center">{{ message}}</h1>
+        <h3 class="text-center">Spiele erneut oder beende das Spiel</h3>
         <v-divider class="mb-4"></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('createGame')" rounded="xl">
-                Spiel Starten
+            <v-btn color="primary" @click="$emit('restartGame')" rounded="xl">
+                Spiel Neustarten
             </v-btn>
         </div>
     </v-sheet>

GUI/src/routes/LocalMode.vue

@@ -40,6 +40,13 @@ async function startGame() {
 
   currentState.value = CurrentState.Game;
 }
+
+async function restart(){
+  await game.value.disconnectAll();
+
+  startGame();
+}
+
 </script>
 
 <template>
@@ -49,7 +56,7 @@ async function startGame() {
 
   <v-container class="d-flex align-center justify-center fill-height"
     v-else-if="currentState === CurrentState.EndScreen">
-    <GameEndedMenu :game-ended-information="gameEndedInformation"></GameEndedMenu>
+    <GameEndedMenu :game-ended-information="gameEndedInformation" @restart-game="restart"></GameEndedMenu>
   </v-container>
 
   <div id="game" v-else>

GUI/src/scripts/logic/localMode/LocalGame.ts

@@ -73,6 +73,11 @@ class LocalGame {
       this.gameState?.currentTurn == 1 ? this.player1.playerName : this.player2.playerName;
     this.currentDescription = `${playerName} ist dran mit setzen!`;
   }
+
+  async disconnectAll(){
+    await this.player1.disconnect();
+    await this.player2.disconnect();
+  }
 }
 
 export default LocalGame;

GUI/src/scripts/logic/signalR/GameConnection.ts

@@ -83,6 +83,11 @@ class GameConnection {
     console.log('Connected');
   }
 
+  async disconnect() {
+    await this.connection.stop();
+    console.log('Disconnected');
+  }
+
   async createGame(gFs: FieldSize) {
     await this.connection.invoke('CreateGame', this.playerName, gFs);
   }