From 2cd83595188700145226f4655a3d05de5de3b7f2 Mon Sep 17 00:00:00 2001
From: Valentin Heiserer <73257760+Vale54321@users.noreply.github.com>
Date: Tue, 23 Apr 2024 22:09:22 +0200
Subject: [PATCH] Message types and server2 (#46)

* fixed building issue

* fixed building issue
---
 .github/workflows/buildAndTest.yml         |  17 +
 Frontend/src/pages/DedicatedGame.vue       |  10 +-
 Frontend/src/pages/LocalGame.vue           | 348 ++++++++++-----------
 Frontend/src/services/BackendConnection.ts |   8 -
 4 files changed, 196 insertions(+), 187 deletions(-)

diff --git a/.github/workflows/buildAndTest.yml b/.github/workflows/buildAndTest.yml
index e285565..288787b 100644
--- a/.github/workflows/buildAndTest.yml
+++ b/.github/workflows/buildAndTest.yml
@@ -12,6 +12,23 @@ jobs:
 
     steps:
     - uses: actions/checkout@v4
+
+    - name: Use Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: '20.x'
+
+    - name: Install Frontend dependencies
+      run: npm install
+      working-directory: Frontend
+
+    - name: Create .env file
+      run: echo "VITE_APP_WEBSOCKET_IP=localhost" > .env
+      working-directory: Frontend
+
+    - name: Build Frontend
+      run: npm run build
+      working-directory: Frontend
     
     - name: Set up JDK 21
       uses: actions/setup-java@v4
diff --git a/Frontend/src/pages/DedicatedGame.vue b/Frontend/src/pages/DedicatedGame.vue
index 9738146..df98ddb 100644
--- a/Frontend/src/pages/DedicatedGame.vue
+++ b/Frontend/src/pages/DedicatedGame.vue
@@ -29,11 +29,11 @@ function joinGame(): void {
 }
 
 function sendCard(cardInput: Card): void {
-  const index = botCards.value.findIndex(card => card === cardInput);
+  const index = botCards.value!.findIndex(card => card === cardInput);
 
   // If card exists in the array, remove it
   if (index !== -1) {
-    botCards.value.splice(index, 1);
+    botCards.value!.splice(index, 1);
   }
   backendConnection.sendMessage(MessageType.PLAYER_CARD, {card: cardInput});
 }
@@ -90,11 +90,11 @@ onMounted(() => {
   const messageListener = (message: string) => {
     const message1: BackendMessage = JSON.parse(message);
     console.log(message1)
-    if (message1.message_type === "GAME_STATE") {
+    if (message1.message_type === "GAME_STATE" && "gamestate" in message1.content) {
       console.log(message1.content)
-      showGameState(message1.content)
+      showGameState(message1.content.gamestate)
     }
-    if (message1.message_type === "ONLINE_PLAYER_HAND") {
+    if (message1.message_type === "ONLINE_PLAYER_HAND" && "cards" in message1.content) {
       botCards.value = message1.content.cards;
       console.log(message1.content.cards)
     }
diff --git a/Frontend/src/pages/LocalGame.vue b/Frontend/src/pages/LocalGame.vue
index 4fa07f4..7bba394 100644
--- a/Frontend/src/pages/LocalGame.vue
+++ b/Frontend/src/pages/LocalGame.vue
@@ -1,186 +1,186 @@
 <script lang="ts" setup>
-import {onMounted, ref} from 'vue';
-
-import {scg} from 'ioc-service-container';
-import CardComp from '../components/CardComponent.vue';
-import {BackendMessage, Card, GamePhase, GameState} from "../BackendMessage";
-
-const backendConnection = scg("BackendConnection");
-
-
-const messageFromServer = ref<string[]>([]);
-
-const gameStateText = ref<string>("Schafkopf");
-const gameInfoText = ref<string>("");
-
-const socket = ref<WebSocket | null>();
-const tableCards = ref<Card[]>([]);
-const botCards = ref(0);
-const trickCard = ref<Card>();
-
-const showGameSelect = ref(true);
-
-
-function startSimulation(): void {
-  sendMessageToServer("startsimulation");
-
-}
-
-function startDedicated(): void {
-  sendMessageToServer("startdedicated");
-
-}
-
-
-function stopSimulation(): void {
-  sendMessageToServer("stopsimulation");
-}
-
-function showTrumpf(): void {
-  tableCards.value = [];
-  sendMessageToServer("showtrumpf");
-}
-
-function showFarben(): void {
-  tableCards.value = [];
-  sendMessageToServer("showfarben");
-}
-
-function setGame(game: string): void {
-  sendMessageToServer(game);
-}
-
-
-function sendMessageToServer(message: string) {
-  if (socket.value) {
-    socket.value.send(message);
-    console.log("Sent message to server:", message);
-  }
-}
-
-function showGameState(gamestate: GameState) {
-
-
-  switch (gamestate.gamePhase) {
-    case GamePhase.GAME_START:
-      gameStateText.value = "Spiel startet";
-      showGameSelect.value = false;
-      botCards.value = 8;
-      break;
-    case GamePhase.TRICK_START:
-      gameStateText.value = "Runde startet";
-      tableCards.value = [];
-      trickCard.value = undefined
-      gameInfoText.value = "";
-      break;
-    case GamePhase.WAIT_FOR_CARD:
-      gameStateText.value = "Spieler " + gamestate.currentPlayer + " muss eine Karte legen.";
-      break;
-    case GamePhase.PLAYER_CARD:
-      gameStateText.value = "Spieler " + gamestate.currentPlayer + " hat eine Karte gespielt.";
-      if (gamestate.currentPlayer === 0) {
-        botCards.value--
-      }
-      if (gamestate.trumpf) {
-        gameInfoText.value = "TRUMPF";
-      } else {
-        gameInfoText.value = gamestate.color?.toString() ?? "ERROR";
-      }
-      tableCards.value.push(gamestate.card!);
-
-
-      break;
-    case GamePhase.PLAYER_TRICK:
-      gameStateText.value = "Spieler " + gamestate.currentPlayer + " sticht.";
-      trickCard.value = gamestate.card
-      break;
-    case GamePhase.GAME_STOP:
-      showGameSelect.value = true;
-      break;
-    default:
-      gameStateText.value = "Fehler";
-
-  }
-
-}
-
-onMounted(() => {
-  socket.value = backendConnection.getWebSocket();
-
-  const messageListener = (message: string) => {
-    const message1: BackendMessage = JSON.parse(message);
-    console.log(message1)
-    if ('gamestate' in message1) {
-      console.log(message1.gamestate)
-      showGameState(message1.gamestate)
-    }
-  };
-
-  backendConnection.addMessageListener(messageListener);
-});
+// import {onMounted, ref} from 'vue';
+//
+// import {scg} from 'ioc-service-container';
+// import CardComp from '../components/CardComponent.vue';
+// import {BackendMessage, Card, GamePhase, GameState} from "../BackendMessage";
+//
+// const backendConnection = scg("BackendConnection");
+//
+//
+// const messageFromServer = ref<string[]>([]);
+//
+// const gameStateText = ref<string>("Schafkopf");
+// const gameInfoText = ref<string>("");
+//
+// const socket = ref<WebSocket | null>();
+// const tableCards = ref<Card[]>([]);
+// const botCards = ref(0);
+// const trickCard = ref<Card>();
+//
+// const showGameSelect = ref(true);
+//
+//
+// function startSimulation(): void {
+//   sendMessageToServer("startsimulation");
+//
+// }
+//
+// function startDedicated(): void {
+//   sendMessageToServer("startdedicated");
+//
+// }
+//
+//
+// function stopSimulation(): void {
+//   sendMessageToServer("stopsimulation");
+// }
+//
+// function showTrumpf(): void {
+//   tableCards.value = [];
+//   sendMessageToServer("showtrumpf");
+// }
+//
+// function showFarben(): void {
+//   tableCards.value = [];
+//   sendMessageToServer("showfarben");
+// }
+//
+// function setGame(game: string): void {
+//   sendMessageToServer(game);
+// }
+//
+//
+// function sendMessageToServer(message: string) {
+//   if (socket.value) {
+//     socket.value.send(message);
+//     console.log("Sent message to server:", message);
+//   }
+// }
+//
+// function showGameState(gamestate: GameState) {
+//
+//
+//   switch (gamestate.gamePhase) {
+//     case GamePhase.GAME_START:
+//       gameStateText.value = "Spiel startet";
+//       showGameSelect.value = false;
+//       botCards.value = 8;
+//       break;
+//     case GamePhase.TRICK_START:
+//       gameStateText.value = "Runde startet";
+//       tableCards.value = [];
+//       trickCard.value = undefined
+//       gameInfoText.value = "";
+//       break;
+//     case GamePhase.WAIT_FOR_CARD:
+//       gameStateText.value = "Spieler " + gamestate.currentPlayer + " muss eine Karte legen.";
+//       break;
+//     case GamePhase.PLAYER_CARD:
+//       gameStateText.value = "Spieler " + gamestate.currentPlayer + " hat eine Karte gespielt.";
+//       if (gamestate.currentPlayer === 0) {
+//         botCards.value--
+//       }
+//       if (gamestate.trumpf) {
+//         gameInfoText.value = "TRUMPF";
+//       } else {
+//         gameInfoText.value = gamestate.color?.toString() ?? "ERROR";
+//       }
+//       tableCards.value.push(gamestate.card!);
+//
+//
+//       break;
+//     case GamePhase.PLAYER_TRICK:
+//       gameStateText.value = "Spieler " + gamestate.currentPlayer + " sticht.";
+//       trickCard.value = gamestate.card
+//       break;
+//     case GamePhase.GAME_STOP:
+//       showGameSelect.value = true;
+//       break;
+//     default:
+//       gameStateText.value = "Fehler";
+//
+//   }
+//
+// }
+//
+// onMounted(() => {
+//   socket.value = backendConnection.getWebSocket();
+//
+//   const messageListener = (message: string) => {
+//     const message1: BackendMessage = JSON.parse(message);
+//     console.log(message1)
+//     if ('gamestate' in message1) {
+//       console.log(message1.gamestate)
+//       showGameState(message1.gamestate)
+//     }
+//   };
+//
+//   backendConnection.addMessageListener(messageListener);
+// });
 </script>
 <template>
-  <div>
-    <div v-for="message in messageFromServer" :key="message">{{ message }}</div>
+  <!--  <div>-->
+  <!--    <div v-for="message in messageFromServer" :key="message">{{ message }}</div>-->
 
-    <div v-if="showGameSelect">
-      <!--      <div class="flex gap-2 place-content-center">-->
-      <!--        <button @click="setGame('setgame:sauspiel')">Sauspiel</button>-->
+  <!--    <div v-if="showGameSelect">-->
+  <!--      &lt;!&ndash;      <div class="flex gap-2 place-content-center">&ndash;&gt;-->
+  <!--      &lt;!&ndash;        <button @click="setGame('setgame:sauspiel')">Sauspiel</button>&ndash;&gt;-->
 
-      <!--        <button @click="setGame('setgame:herzsolo')">herzsolo</button>-->
-      <!--        <button @click="setGame('setgame:eichelsolo')">eichelsolo</button>-->
-      <!--        <button @click="setGame('setgame:blattsolo')">blattsolo</button>-->
-      <!--        <button @click="setGame('setgame:schellsolo')">schellsolo</button>-->
+  <!--      &lt;!&ndash;        <button @click="setGame('setgame:herzsolo')">herzsolo</button>&ndash;&gt;-->
+  <!--      &lt;!&ndash;        <button @click="setGame('setgame:eichelsolo')">eichelsolo</button>&ndash;&gt;-->
+  <!--      &lt;!&ndash;        <button @click="setGame('setgame:blattsolo')">blattsolo</button>&ndash;&gt;-->
+  <!--      &lt;!&ndash;        <button @click="setGame('setgame:schellsolo')">schellsolo</button>&ndash;&gt;-->
 
-      <!--        <button @click="setGame('setgame:eichelwenz')">eichelwenz</button>-->
-      <!--        <button @click="setGame('setgame:blattwenz')">blattwenz</button>-->
-      <!--        <button @click="setGame('setgame:herzwenz')">herzwenz</button>-->
-      <!--        <button @click="setGame('setgame:schellwenz')">schellwenz</button>-->
+  <!--      &lt;!&ndash;        <button @click="setGame('setgame:eichelwenz')">eichelwenz</button>&ndash;&gt;-->
+  <!--      &lt;!&ndash;        <button @click="setGame('setgame:blattwenz')">blattwenz</button>&ndash;&gt;-->
+  <!--      &lt;!&ndash;        <button @click="setGame('setgame:herzwenz')">herzwenz</button>&ndash;&gt;-->
+  <!--      &lt;!&ndash;        <button @click="setGame('setgame:schellwenz')">schellwenz</button>&ndash;&gt;-->
 
-      <!--        <button @click="setGame('setgame:eichelgeier')">eichelgeier</button>-->
-      <!--        <button @click="setGame('setgame:blattgeier')">blattgeier</button>-->
-      <!--        <button @click="setGame('setgame:herzgeier')">herzgeier</button>-->
-      <!--        <button @click="setGame('setgame:schellgeier')">schellgeier</button>-->
+  <!--      &lt;!&ndash;        <button @click="setGame('setgame:eichelgeier')">eichelgeier</button>&ndash;&gt;-->
+  <!--      &lt;!&ndash;        <button @click="setGame('setgame:blattgeier')">blattgeier</button>&ndash;&gt;-->
+  <!--      &lt;!&ndash;        <button @click="setGame('setgame:herzgeier')">herzgeier</button>&ndash;&gt;-->
+  <!--      &lt;!&ndash;        <button @click="setGame('setgame:schellgeier')">schellgeier</button>&ndash;&gt;-->
 
-      <!--        <button @click="setGame('setgame:geier')">Geier</button>-->
-      <!--        <button @click="setGame('setgame:wenz')">Wenz</button>-->
-      <!--      </div>-->
-      <!--      <div class="flex gap-2 place-content-center">-->
-      <!--        <button @click="showFarben">Zeige alle Farben</button>-->
-      <!--        <button @click="showTrumpf">Zeige alle Trumpfkarten</button>-->
-      <!--      </div>-->
-      <div class="flex gap-2 place-content-center">
-        <button class="v-button" @click="startSimulation">Starten</button>
-        <button class="v-button" @click="stopSimulation">Stoppen</button>
-      </div>
-    </div>
-    <div v-else>
-      <div class="flex gap-2 place-content-center">
-        <button class="v-button" @click="stopSimulation">Stoppen</button>
-      </div>
-      <h1 class=" top-52 text-white font-bold text-6xl absolute text-center w-full">{{ gameInfoText }}</h1>
-      <h1 class=" top-64 text-white font-bold text-6xl absolute text-center w-full">{{ gameStateText }}</h1>
-      <div v-if="tableCards.length > 0">
-        <!--      <div class="grid grid-cols-4 place-content-center">-->
-        <!--        <CardComp v-for="card in tableCards" :card="card" class="md" />-->
-        <!--      </div>-->
-        <CardComp v-if="tableCards.length > 0" :card="tableCards[0]" class="absolute  card1  md"/>
-        <CardComp v-if="tableCards.length > 1" :card="tableCards[1]" class="absolute  card2  md"/>
-        <CardComp v-if="tableCards.length > 2" :card="tableCards[2]" class="absolute  card3  md"/>
-        <CardComp v-if="tableCards.length > 3" :card="tableCards[3]" class="absolute  card4  md"/>
-      </div>
-      <div class="absolute left-0 top-1/2 transform  -translate-y-1/2">
-        <CardComp v-if="trickCard" :card="trickCard" class="xl"/>
-      </div>
+  <!--      &lt;!&ndash;        <button @click="setGame('setgame:geier')">Geier</button>&ndash;&gt;-->
+  <!--      &lt;!&ndash;        <button @click="setGame('setgame:wenz')">Wenz</button>&ndash;&gt;-->
+  <!--      &lt;!&ndash;      </div>&ndash;&gt;-->
+  <!--      &lt;!&ndash;      <div class="flex gap-2 place-content-center">&ndash;&gt;-->
+  <!--      &lt;!&ndash;        <button @click="showFarben">Zeige alle Farben</button>&ndash;&gt;-->
+  <!--      &lt;!&ndash;        <button @click="showTrumpf">Zeige alle Trumpfkarten</button>&ndash;&gt;-->
+  <!--      &lt;!&ndash;      </div>&ndash;&gt;-->
+  <!--      <div class="flex gap-2 place-content-center">-->
+  <!--        <button class="v-button" @click="startSimulation">Starten</button>-->
+  <!--        <button class="v-button" @click="stopSimulation">Stoppen</button>-->
+  <!--      </div>-->
+  <!--    </div>-->
+  <!--    <div v-else>-->
+  <!--      <div class="flex gap-2 place-content-center">-->
+  <!--        <button class="v-button" @click="stopSimulation">Stoppen</button>-->
+  <!--      </div>-->
+  <!--      <h1 class=" top-52 text-white font-bold text-6xl absolute text-center w-full">{{ gameInfoText }}</h1>-->
+  <!--      <h1 class=" top-64 text-white font-bold text-6xl absolute text-center w-full">{{ gameStateText }}</h1>-->
+  <!--      <div v-if="tableCards.length > 0">-->
+  <!--        &lt;!&ndash;      <div class="grid grid-cols-4 place-content-center">&ndash;&gt;-->
+  <!--        &lt;!&ndash;        <CardComp v-for="card in tableCards" :card="card" class="md" />&ndash;&gt;-->
+  <!--        &lt;!&ndash;      </div>&ndash;&gt;-->
+  <!--        <CardComp v-if="tableCards.length > 0" :card="tableCards[0]" class="absolute  card1  md"/>-->
+  <!--        <CardComp v-if="tableCards.length > 1" :card="tableCards[1]" class="absolute  card2  md"/>-->
+  <!--        <CardComp v-if="tableCards.length > 2" :card="tableCards[2]" class="absolute  card3  md"/>-->
+  <!--        <CardComp v-if="tableCards.length > 3" :card="tableCards[3]" class="absolute  card4  md"/>-->
+  <!--      </div>-->
+  <!--      <div class="absolute left-0 top-1/2 transform  -translate-y-1/2">-->
+  <!--        <CardComp v-if="trickCard" :card="trickCard" class="xl"/>-->
+  <!--      </div>-->
 
-      <div class="absolute bottom-0 w-full">
-        <div class="flex flex-row gap-3 w-fit mx-auto justify-center">
-          <CardComp v-for="i in botCards" :key="i" :card="Card.BACK" class="sm"/>
-        </div>
-      </div>
-    </div>
-  </div>
-  <router-view/>
+  <!--      <div class="absolute bottom-0 w-full">-->
+  <!--        <div class="flex flex-row gap-3 w-fit mx-auto justify-center">-->
+  <!--          <CardComp v-for="i in botCards" :key="i" :card="Card.BACK" class="sm"/>-->
+  <!--        </div>-->
+  <!--      </div>-->
+  <!--    </div>-->
+  <!--  </div>-->
+  <!--  <router-view/>-->
 </template>
 <style lang="scss">
 $card-height: 24rem;
diff --git a/Frontend/src/services/BackendConnection.ts b/Frontend/src/services/BackendConnection.ts
index 8177eef..c11bf9f 100644
--- a/Frontend/src/services/BackendConnection.ts
+++ b/Frontend/src/services/BackendConnection.ts
@@ -1,21 +1,13 @@
 import {MessageType} from "../BackendMessage.ts";
 
-interface JsonMessage {
-    origin: string;
-    message: any; // Adjust 'any' type as per your expected message structure
-}
-
 export class BackendConnection {
 
 
     private readonly webSocket: WebSocket;
     private messageListeners: ((message: string) => void)[] = [];
-    private backendUri: string;
 
 
     constructor(backendUri: string) {
-        this.backendUri = backendUri;
-
         this.webSocket = new WebSocket(backendUri);
 
         // Registering event listener for message reception