Socket implement for Multiplayer. Cards changing with Multiplayer

Tabu.csv

-RoundID;Solution;Tabu1;Tabu2;Tabu3;Tabu4;Tabu5
-1;Elefant;Rüssel;Dickhäuter;Tier;Afrika;grau
+1;Elefant;Rüssel;Dickhäuter;Tier;Afrika;grau
 2;Küche;Koch;Essen;Kühlschrank;Herd;Arbeitsplatte
 3;Taschengeld;Ausgeben;Sparen;Jacke;Euro;Eltern
 4;Schwimmen;Sport;Verein;Wasser;Baden;Kraul

src/app/dao/TabuMiddlewareService.ts

@@ -68,4 +68,9 @@ export class TabuMiddlewareService {
     console.log(req);
     return this.request('POST', `${environment.tabuMiddlewareURL}endRound`, req);
   }
+
+  getCard(req: any): Promise<any> {
+    console.log(req);
+    return this.request('POST', `${environment.tabuMiddlewareURL}getCard`, req);
+  }
 }

src/app/error/error.component.ts

 import { Component, OnInit } from '@angular/core';
 import {Router} from '@angular/router';
 import {io} from 'socket.io-client';
+import {environment} from '../../environments/environment';
 
 @Component({
   selector: 'app-error',
@@ -14,7 +15,7 @@ export class ErrorComponent implements OnInit {
   constructor(private router: Router) {}
 
   ngOnInit(): void {
-    this.socket = io('http://localhost:3000');
+    this.socket = io(environment.tabuServerURL);
     this.listen();
   }
 

src/app/game/game.component.ts

@@ -4,6 +4,9 @@ import {CardInfo} from '../interface/cardInfo';
 import {TabuMiddlewareService} from '../dao/TabuMiddlewareService';
 import {ActivatedRoute, Router} from '@angular/router';
 import {GameStatus} from '../interface/gameStatus';
+import {io} from 'socket.io-client';
+import {Environment} from '@angular/compiler-cli/src/ngtsc/typecheck/src/environment';
+import {environment} from '../../environments/environment';
 
 @Component({
   selector: 'app-game',
@@ -12,6 +15,7 @@ import {GameStatus} from '../interface/gameStatus';
 })
 export class GameComponent implements OnInit {
 
+  socket: any;
   sessionName = '';
   isWatchdog = false;
   isExplainer = false;
@@ -56,25 +60,27 @@ export class GameComponent implements OnInit {
         this.isWatchdog = true;
       } else if (checkUser === 'explainer') {
         this.isExplainer = true;
+        this.service.getS2C({spielname: this.sessionName});
       }
-      this.service.getGamestatus({spielname: this.sessionName}).then(value => {
-        const status = JSON.parse(value.status);
-        if (status) {
-          this.gameStatus.sessionID = JSON.parse(value.sessionID);
-          this.gameStatus.red = JSON.parse(value.red);
-          this.gameStatus.blue = JSON.parse(value.blue);
-          this.gameStatus.redTurn = JSON.parse(value.redTurn);
-          this.gameStatus.activeExplainer = JSON.parse(value.activeExplainer);
-          this.gameStatus.activeWatchdog = JSON.parse(value.activeWatchdog);
-        }
-        console.log(this.gameStatus);
-      }),
+      this.fillGamestatus();
       this.team = String(params.get('team'));
-      this.newCard();
+      this.socket = io(environment.tabuServerURL);
+      this.listen();
     });
     this.startTimer();
   }
 
+  listen(): any {
+    this.socket.on(this.sessionName + ':newCard', (data: any) => {
+      console.log('CardID:' , data);
+      this.service.getCard({cardID: data}).then(value => {
+        console.log('NewCard: ', value);
+        this.fillNewCard(value);
+        this.fillGamestatus();
+      });
+    });
+  }
+
   onTimesUp(): void{
     this.router.navigate([this.sessionName + '/' + this.team]);
   }
@@ -124,6 +130,13 @@ export class GameComponent implements OnInit {
       const status = JSON.parse(value.status);
       if (status) {
         console.log('Test2:', value);
+        this.fillNewCard(value);
+      }
+      console.log(this.cardInfo);
+    }).catch(reason => console.log(reason));
+  }
+
+  fillNewCard(value: any): void {
     this.cardInfo.cardID = JSON.parse(value.cardID);
     this.cardInfo.solution = value.solution;
     this.cardInfo.tabu1 = value.tabu1;
@@ -132,7 +145,19 @@ export class GameComponent implements OnInit {
     this.cardInfo.tabu4 = value.tabu4;
     this.cardInfo.tabu5 = value.tabu5;
   }
-      console.log(this.cardInfo);
-    }).catch(reason => console.log(reason));
+
+  fillGamestatus(): void {
+    this.service.getGamestatus({spielname: this.sessionName}).then(value => {
+      const status = JSON.parse(value.status);
+      if (status) {
+        this.gameStatus.sessionID = JSON.parse(value.sessionID);
+        this.gameStatus.red = JSON.parse(value.red);
+        this.gameStatus.blue = JSON.parse(value.blue);
+        this.gameStatus.redTurn = JSON.parse(value.redTurn);
+        this.gameStatus.activeExplainer = JSON.parse(value.activeExplainer);
+        this.gameStatus.activeWatchdog = JSON.parse(value.activeWatchdog);
+      }
+      console.log(this.gameStatus);
+    });
   }
 }

src/environments/environment.ts

@@ -5,7 +5,9 @@
 export const environment = {
   production: false,
   // tabuMiddlewareURL: 'http://localhost:8080/'
-  tabuMiddlewareURL: 'http://tabu-middleware.willers.digital/'
+  tabuMiddlewareURL: 'http://tabu-middleware.willers.digital/',
+  //tabuServerURL: 'http://localhost:3000/'
+  tabuServerURL: 'http://tabu-server.willers.digital'
 };
 
 /*