Change Socket Architekture

Implement getActualCard

src/app/app.component.html

 <div fxLayout="column" fxFlexFill style="background-image: url(/assets/background.jpg); background-repeat: repeat;" >
-  <app-header socket="{{socket}}">
+  <app-header>
   </app-header>
   <div fxFlex>
-    <router-outlet (activate)="socket"></router-outlet>
+    <router-outlet></router-outlet>
   </div>
   <app-footer>
     <mat-toolbar color="primary">

src/app/app.component.ts

@@ -8,12 +8,8 @@ import {environment} from '../environments/environment';
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent implements OnInit {
-  @Output()
-  socket: any;
-
   title = 'Tabu';
 
   ngOnInit(): void {
-    //this.socket = io(environment.tabuServerURL);
   }
 }

src/app/app.module.ts

@@ -24,6 +24,7 @@ import {MatSlideToggleModule} from '@angular/material/slide-toggle';
 import {MatIconModule} from '@angular/material/icon';
 import {MatTooltipModule} from '@angular/material/tooltip';
 import {IsAllowedToPlay} from './dao/isAllowedToPlay';
+import {SocketDataService} from './dao/socketDataService';
 
 @NgModule({
   declarations: [
@@ -54,7 +55,8 @@ import {IsAllowedToPlay} from './dao/isAllowedToPlay';
     MatTooltipModule
   ],
   providers: [
-    IsAllowedToPlay
+    IsAllowedToPlay,
+    SocketDataService
   ],
   bootstrap: [AppComponent]
 })

src/app/dao/TabuMiddlewareService.ts

@@ -39,9 +39,14 @@ export class TabuMiddlewareService {
   }
 
   getS2C(req: any): Promise<any> {
+    console.log("getS2C Request: ", req);
     return this.request('POST', `${environment.tabuMiddlewareURL}getS2C`, req);
   }
 
+  getActiveCard(req: any): Promise<any> {
+    return this.request('POST', `${environment.tabuMiddlewareURL}getActiveCard`, req);
+  }
+
   addPoint(req: any): Promise<any> {
     return this.request('POST', `${environment.tabuMiddlewareURL}addPoint`, req);
   }

src/app/dao/socketDataService.ts

+import {io} from 'socket.io-client';
+import {Observable} from 'rxjs';
+import {environment} from '../../environments/environment';
+
+export class SocketDataService {
+
+  private socket: any;
+  isConnected = false;
+  sessionName = '';
+
+  constructor() {
+  }
+
+  connect(sessionName: string): void {
+    console.log('NEW CONNECTION');
+    this.sessionName = sessionName;
+    if (!this.isConnected) {
+      this.socket = io(environment.tabuServerURL);
+      this.isConnected = true;
+    }
+  }
+
+  disconect(): void {
+    this.socket.disconnect();
+    this.isConnected = false;
+  }
+
+  getNewGame(sessionName: string): Observable<any> {
+    if (!this.isConnected) {
+      this.connect(sessionName);
+    }
+    this.sessionName = sessionName;
+    return new Observable(observer => {
+      this.socket.on(this.sessionName + ':newGame', (res: any) => {
+        observer.next(res);
+      });
+    });
+  }
+
+  getNewCard(sessionName: string): Observable<any> {
+    if (!this.isConnected) {
+      this.connect(sessionName);
+    }
+    this.sessionName = sessionName;
+    return new Observable(observer => {
+      this.socket.on(this.sessionName + ':newCard', (res: any) => {
+        observer.next(res);
+      });
+    });
+  }
+
+  getNewRound(sessionName: string): Observable<any> {
+    if (!this.isConnected) {
+      this.connect(sessionName);
+    }
+    this.sessionName = sessionName;
+    return new Observable(observer => {
+      this.socket.on(this.sessionName + ':newRound', (res: any) => {
+        observer.next(res);
+      });
+    });
+  }
+
+  getEndRound(sessionName: string): Observable<any> {
+    if (!this.isConnected) {
+      this.connect(sessionName);
+    }
+    this.sessionName = sessionName;
+    return new Observable(observer => {
+      this.socket.on(this.sessionName + ':endRound', (res: any) => {
+        observer.next(res);
+      });
+    });
+  }
+}

src/app/game/game.component.ts

-import {Component, OnInit} from '@angular/core';
+import {Component, OnDestroy, OnInit} from '@angular/core';
 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 '../../environments/environment';
 import {IsAllowedToPlay} from '../dao/isAllowedToPlay';
+import {SocketDataService} from '../dao/socketDataService';
+import {Subject} from 'rxjs';
+import {takeUntil} from 'rxjs/operators';
 
 @Component({
   selector: 'app-game',
   templateUrl: './game.component.html',
   styleUrls: ['./game.component.scss']
 })
-export class GameComponent implements OnInit {
+export class GameComponent implements OnInit, OnDestroy {
 
-  socket: any;
+  private ngUnsubscribe = new Subject();
+  subNewCard: any;
+  subEndRound: any;
   sessionName = '';
   isWatchdog = false;
   isExplainer = false;
@@ -39,7 +42,7 @@ export class GameComponent implements OnInit {
     blue: 0,
     redTurn: true,
     activeExplainer: 1,
-    activeWatchdog: 1
+    activeCard: 1
   };
   team = '';
 
@@ -49,12 +52,14 @@ export class GameComponent implements OnInit {
   constructor(private service: TabuMiddlewareService,
               private router: Router,
               private activatedRoute: ActivatedRoute,
-              private isAllowedToPlay: IsAllowedToPlay) {}
+              private isAllowedToPlay: IsAllowedToPlay,
+              private socketDataService: SocketDataService) {}
 
   ngOnInit(): void {
     this.activatedRoute.paramMap.subscribe(params => {
       this.sessionName = String(params.get('sessionName')).toLowerCase();
       this.team = String(params.get('team'));
+      this.getSocketData();
       const url = this.router.url.split('/');
       const checkUser = url[url.length - 1];
       if (checkUser === 'watchdog') {
@@ -68,35 +73,43 @@ export class GameComponent implements OnInit {
           this.router.navigate([this.sessionName + '/' + this.team]);
         } else {
           this.isExplainer = true;
-          this.service.getS2C({spielname: this.sessionName});
+          //this.service.getS2C({spielname: this.sessionName});
         }
       }
+      console.log('FILL GAME');
       this.fillGamestatus();
-      this.socket = io(environment.tabuServerURL);
-      this.listen();
     });
     this.startTimer();
   }
 
-  listen(): any {
-    this.socket.on(this.sessionName + ':newCard', (data: any) => {
+  ngOnDestroy(): void {
+    this.unsubscribeAll();
+  }
+
+  getSocketData(): void {
+    this.subNewCard = this.socketDataService.getNewCard(this.sessionName)
+      .pipe(takeUntil(this.ngUnsubscribe))
+      .subscribe(data => {
+        console.log('GAME SOCKET CARD: ', data);
         this.service.getCard({cardID: data}).then(value => {
           this.fillNewCard(value);
           this.fillGamestatus();
         });
       });
-    this.socket.on(this.sessionName + ':endRound', (data: any) => {
-      console.log('GAME: ', data);
-      if (JSON.parse(data)) {
+    this.subEndRound = this.socketDataService.getNewRound(this.sessionName)
+      .pipe(takeUntil(this.ngUnsubscribe))
+      .subscribe(data => {
+        console.log('GAME SOCKET END ROUND: ', data);
+        if (!JSON.parse(data)) {
           console.log('GAME END: ', data);
-        this.socket.disconnect();
+          this.unsubscribeAll();
           this.router.navigate([this.sessionName + '/' + this.team]);
         }
       });
   }
 
   onTimesUp(): void{
-    this.socket.disconnect();
+    this.unsubscribeAll();
     this.router.navigate([this.sessionName + '/' + this.team]);
   }
 
@@ -107,7 +120,7 @@ export class GameComponent implements OnInit {
       this.timeLeft = (this.TIME_LIMIT - this.timePassed);
       if (this.timeLeft === 0) {
         console.log('Times up!');
-        this.onTimesUp();
+        //this.onTimesUp();
       }
     }, 593);
   }
@@ -177,13 +190,30 @@ export class GameComponent implements OnInit {
     this.service.getGamestatus({spielname: this.sessionName}).then(value => {
       const status = JSON.parse(value.status);
       if (status) {
+        console.log(value);
         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);
+        this.gameStatus.activeCard = JSON.parse(value.activeCard);
+        console.log("SOLUTION: ", this.cardInfo.cardID);
+        if (this.cardInfo.cardID === -1) {
+          console.log('I am in');
+          this.service.getCard({cardID: value.activeCard}).then(value1 => {
+            console.log("FIRST CARDS: ", value1);
+            this.fillNewCard(value1);
+          });
+        }
       }
     });
   }
+
+  unsubscribeAll(): void {
+    this.subNewCard.unsubscribe();
+    this.subEndRound.unsubscribe();
+
+    this.ngUnsubscribe.next();
+    this.ngUnsubscribe.complete();
+  }
 }

src/app/guesser/guesser.component.ts

-import {Component, Input, OnInit} from '@angular/core';
+import {Component, OnDestroy, OnInit} from '@angular/core';
 import {TabuMiddlewareService} from '../dao/TabuMiddlewareService';
 import {GameStatus} from '../interface/gameStatus';
 import {ActivatedRoute, Router} from '@angular/router';
-import {io} from 'socket.io-client';
-import {environment} from '../../environments/environment';
 import {IsAllowedToPlay} from '../dao/isAllowedToPlay';
+import {SocketDataService} from '../dao/socketDataService';
+import {Subject} from 'rxjs';
+import {takeUntil} from 'rxjs/operators';
 @Component({
   selector: 'app-guesser',
   templateUrl: './guesser.component.html',
   styleUrls: ['./guesser.component.scss']
 })
-export class GuesserComponent implements OnInit {
-  socket: any;
+export class GuesserComponent implements OnInit, OnDestroy {
+
+  private ngUnsubscribe = new Subject();
+  subNewCard: any;
+  subEndRound: any;
   sessionName = '';
   TIME_LIMIT = 100;
   timePassed = 0;
@@ -24,14 +28,15 @@ export class GuesserComponent implements OnInit {
     blue: 0,
     redTurn: true,
     activeExplainer: 1,
-    activeWatchdog: 1
+    activeCard: 1
   };
   team = '';
 
   constructor(private router: Router,
               private activatedRoute: ActivatedRoute,
               private service: TabuMiddlewareService,
-              private isAllowedToPlay: IsAllowedToPlay) { }
+              private isAllowedToPlay: IsAllowedToPlay,
+              private socketDataService: SocketDataService) { }
 
   ngOnInit(): void {
     this.activatedRoute.paramMap.subscribe(params => {
@@ -41,30 +46,35 @@ export class GuesserComponent implements OnInit {
         this.router.navigate([this.sessionName + '/' + this.team]);
       }
       this.fillGamestatus();
-      this.socket = io(environment.tabuServerURL);
-      this.listen();
+      this.getSocketData();
     });
     this.startTimer();
   }
 
-  listen(): any {
-    this.socket.on(this.sessionName + ':newCard', (data: any) => {
-      this.service.getCard({cardID: data}).then(value => {
+  ngOnDestroy(): void {
+    this.unsubscribeAll();
+  }
+
+  getSocketData(): void {
+    this.subNewCard = this.socketDataService.getNewCard(this.sessionName)
+      .pipe(takeUntil(this.ngUnsubscribe))
+      .subscribe(data => {
+        console.log('GUESSER SOCKET CARD: ', data);
         this.fillGamestatus();
       });
-    });
-    this.socket.on(this.sessionName + ':endRound', (data: any) => {
-      console.log('GAME: ', data);
+    this.subEndRound = this.socketDataService.getEndRound(this.sessionName)
+      .pipe(takeUntil(this.ngUnsubscribe))
+      .subscribe(data => {
+        console.log('GUESSER SOCKET END ROUND: ', data);
         if (JSON.parse(data)) {
-        console.log('GAME END: ', data);
-        this.socket.disconnect();
+          this.unsubscribeAll();
           this.router.navigate([this.sessionName + '/' + this.team]);
         }
       });
   }
 
   onTimesUp(): void{
-    this.socket.disconnect();
+    this.unsubscribeAll();
     this.router.navigate([this.sessionName + '/' + this.team]);
   }
 
@@ -75,7 +85,7 @@ export class GuesserComponent implements OnInit {
       this.timeLeft = (this.TIME_LIMIT - this.timePassed);
       if (this.timeLeft === 0) {
         console.log('Times up!');
-        this.onTimesUp();
+        //this.onTimesUp();
       }
     }, 593);
   }
@@ -94,8 +104,16 @@ export class GuesserComponent implements OnInit {
         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);
+        this.gameStatus.activeCard = JSON.parse(value.activeCard);
       }
     });
   }
+
+  unsubscribeAll(): void {
+    this.subNewCard.unsubscribe();
+    this.subEndRound.unsubscribe();
+
+    this.ngUnsubscribe.next();
+    this.ngUnsubscribe.complete();
+  }
 }

src/app/header/header.component.ts

 import {Component, Input, OnInit} from '@angular/core';
 import {Router} from '@angular/router';
+import {SocketDataService} from '../dao/socketDataService';
+import {Subscription} from 'rxjs';
 
 @Component({
   selector: 'app-header',
@@ -7,15 +9,15 @@ import {Router} from '@angular/router';
   styleUrls: ['./header.component.scss']
 })
 export class HeaderComponent implements OnInit {
-  @Input()
-  socket: any;
 
-  constructor(private router: Router) { }
+  constructor(private router: Router,
+              private socketDataService: SocketDataService) { }
 
   ngOnInit(): void {
   }
 
   toStartpage(): void {
+    this.socketDataService.disconect();
     this.router.navigate(['']);
   }
 }

src/app/interface/gameStatus.ts

@@ -4,5 +4,5 @@ export interface GameStatus {
   blue: number;
   redTurn: boolean;
   activeExplainer: number;
-  activeWatchdog: number;
+  activeCard: number;
 }

src/app/overview/overview.component.ts

-import { Component, OnInit } from '@angular/core';
+import {Component, OnDestroy, OnInit} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 import {TabuMiddlewareService} from '../dao/TabuMiddlewareService';
 import {GameStatus} from '../interface/gameStatus';
-import {io} from 'socket.io-client';
-import {environment} from '../../environments/environment';
 import {IsAllowedToPlay} from '../dao/isAllowedToPlay';
+import {SocketDataService} from '../dao/socketDataService';
+import {Subject} from 'rxjs';
+import {takeUntil} from 'rxjs/operators';
 
 @Component({
   selector: 'app-overview',
   templateUrl: './overview.component.html',
   styleUrls: ['./overview.component.scss']
 })
-export class OverviewComponent implements OnInit {
+export class OverviewComponent implements OnInit, OnDestroy {
 
+  private ngUnsubscribe = new Subject();
+  subNewGame: any;
+  subNewCard: any;
+  subNewRound: any;
+  subEndRound: any;
   wantToBeExplainer = false;
   isActiveRound = false;
-  socket: any;
   red = 'choose';
   blue = 'choose';
   nextTeam = 'Blau';
@@ -30,17 +35,23 @@ export class OverviewComponent implements OnInit {
     blue: 0,
     redTurn: true,
     activeExplainer: 1,
-    activeWatchdog: 1
+    activeCard: 1
   };
   constructor(private router: Router,
               private activatedRoute: ActivatedRoute,
               private service: TabuMiddlewareService,
-              private isAllowedToPlay: IsAllowedToPlay) { }
+              private isAllowedToPlay: IsAllowedToPlay,
+              private socketDataService: SocketDataService) { }
 
   ngOnInit(): void {
     this.activatedRoute.paramMap.subscribe(params => {
       this.sessionName = String(params.get('sessionName')).toLowerCase();
       this.team = String(params.get('team'));
+      this.getSocketData();
+      this.service.isSession({spielname: this.sessionName}).then(value => {
+        if (!JSON.parse(value.status)) {
+          this.router.navigate(['error']);
+        } else {
           console.log('Team:', this.team);
           if (this.team === 'red'){
             this.membership = 'Du gehörst zu Team rot!';
@@ -58,47 +69,59 @@ export class OverviewComponent implements OnInit {
             this.membership = 'Wähle dein Team';
           }
           else {
-        this.socket.disconnect();
             this.router.navigate(['error']);
             return;
           }
+          console.log("GET SOCKET DATA");
           this.getGameStatus();
-      this.socket = io(environment.tabuServerURL);
-      this.listen();
+        }
+      });
     });
   }
 
-  private listen(): any {
-    this.socket.on(this.sessionName + ':newRound', (data: any) => {
+  ngOnDestroy(): void {
+    this.unsubscribeAll();
+  }
+
+  getSocketData(): void {
+    this.subNewGame = this.socketDataService.getNewGame (this.sessionName)
+      .pipe(takeUntil(this.ngUnsubscribe)).subscribe(data => {
+        console.log('OVERVIEW SOCKET GAME: ', data);
+        this.getGameStatus();
+      });
+    this.subNewCard = this.socketDataService.getNewCard(this.sessionName)
+      .pipe(takeUntil(this.ngUnsubscribe)).subscribe(data => {
+        console.log('OVERVIEW SOCKET CARD: ', data);
+        this.getGameStatus();
+      });
+    this.subEndRound = this.socketDataService.getEndRound(this.sessionName)
+      .pipe(takeUntil(this.ngUnsubscribe)).subscribe(data => {
+        console.log('OVERVIEW SOCKET END ROUND: ', data);
+        if (JSON.parse(data)) {
+          this.getGameStatus();
+        }
+      });
+    this.subNewRound = this.socketDataService.getNewRound(this.sessionName)
+      .pipe(takeUntil(this.ngUnsubscribe)).subscribe(data => {
+        console.log('OVERVIEW SOCKET NEW ROUND: ', data);
         if (JSON.parse(data)) {
           console.log('OVERVIEW: ', data);
           if (((this.team === 'red' && this.nextTeam === 'Rot') || (this.team === 'blue' && this.nextTeam === 'Blau'))
             && !this.wantToBeExplainer) {
             console.log('OVERVIEW GO GUESSER: ', data);
-          this.socket.disconnect();
             this.isAllowedToPlay.isAllowed = true;
             this.isAllowedToPlay.role = 'guesser';
+            this.unsubscribeAll();
             this.router.navigate([this.sessionName + '/' + this.team + '/guesser']);
           } else if ((this.team === 'red' || this.team === 'blue') && !this.wantToBeExplainer) {
             console.log('OVERVIEW GO WATCHDOG: ', data);
-          this.socket.disconnect();
             this.isAllowedToPlay.isAllowed = true;
             this.isAllowedToPlay.role = 'watchdog';
+            this.unsubscribeAll();
             this.router.navigate([this.sessionName + '/' + this.team + '/watchdog']);
           }
         }
       });
-    this.socket.on(this.sessionName + ':endRound', (data: any) => {
-      if (JSON.parse(data)) {
-        this.getGameStatus();
-      }
-    });
-    this.socket.on(this.sessionName + ':newCard', () => {
-      this.getGameStatus();
-    });
-    this.socket.on(this.sessionName + ':newGame', () => {
-      this.getGameStatus();
-    });
   }
 
   startGame(): void {
@@ -113,17 +136,20 @@ export class OverviewComponent implements OnInit {
   }
 
   nextRound(): void {
-    this.wantToBeExplainer = true;
+    this.service.getS2C({spielname: this.sessionName}).then(value => {
+      console.log('START NEXT ROUND', value);
       this.service.newRound({spielname: this.sessionName});
-    this.socket.disconnect();
       this.isAllowedToPlay.isAllowed = true;
       this.isAllowedToPlay.role = 'explainer';
+      this.unsubscribeAll();
       this.router.navigate([this.router.url + '/explainer', ]);
+      this.wantToBeExplainer = true;
+    });
   }
 
   joinTeam(team: string): void {
     this.team = team;
-    this.socket.disconnect();
+    this.unsubscribeAll();
     this.router.navigate([this.sessionName + '/' + team]);
   }
 
@@ -136,7 +162,7 @@ export class OverviewComponent implements OnInit {
         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);
+        this.gameStatus.activeCard = JSON.parse(value.activeCard);
         if (this.gameStatus.redTurn){
           this.nextTeam = 'Rot';
           this.buttonNextRoundDisabled = this.team !== 'red';
@@ -150,4 +176,14 @@ export class OverviewComponent implements OnInit {
       console.log(this.gameStatus);
     }).catch(reason => console.log(reason));
   }
+
+  unsubscribeAll(): void {
+    this.subNewCard.unsubscribe();
+    this.subNewRound.unsubscribe();
+    this.subEndRound.unsubscribe();
+    this.subNewGame.unsubscribe();
+
+    this.ngUnsubscribe.next();
+    this.ngUnsubscribe.complete();
+  }
 }

src/app/select-game/select-game.component.ts

 import { Component, OnInit } from '@angular/core';
 import {Router} from '@angular/router';
 import {TabuMiddlewareService} from '../dao/TabuMiddlewareService';
+import {SocketDataService} from '../dao/socketDataService';
 
 @Component({
   selector: 'app-select-game',
@@ -12,7 +13,8 @@ export class SelectGameComponent implements OnInit {
   buttonCreateGameDisabled = true;
   buttonJoinGameDisabled = true;
   constructor(private router: Router,
-              private service: TabuMiddlewareService) { }
+              private service: TabuMiddlewareService,
+              private socketDataService: SocketDataService) { }
 
   ngOnInit(): void {
   }
@@ -24,10 +26,12 @@ export class SelectGameComponent implements OnInit {
   }
 
   createGame(sessionName: string): void {
+    sessionName = sessionName.toLowerCase();
     this.service.addSession({spielname: sessionName}).then(value => {
       console.log(value);
       const status = JSON.parse(value.status);
       if (status) {
+        this.socketDataService.connect(sessionName);
         this.router.navigate([sessionName]);
       }
     }).catch(reason => {
@@ -37,11 +41,12 @@ export class SelectGameComponent implements OnInit {
   }
 
   joinGame(sessionName: string): void {
+    this.socketDataService.connect(sessionName);
     this.router.navigate([sessionName]);
   }
 
   keyPressAlphaNumeric(event: KeyboardEvent): boolean {
-    if (/[a-z0-9]/.test(event.key)) {
+    if (/[a-zA-Z0-9]/.test(event.key)) {
       return true;
     } else {
       event.preventDefault();
@@ -50,6 +55,7 @@ export class SelectGameComponent implements OnInit {
   }
 
   enter(sessionName: string): void{
+    sessionName = sessionName.toLowerCase();
     if (!this.buttonCreateGameDisabled){
       this.createGame(sessionName);
     }
@@ -59,13 +65,13 @@ export class SelectGameComponent implements OnInit {
   }
 
   checkSpielname(sessionName: string): void {
+    sessionName = sessionName.toLowerCase();
     if (sessionName.length === 0) {
       this.buttonCreateGameDisabled = true;
       this.buttonJoinGameDisabled = true;
       return;
     } else {
       this.service.isSession({'spielname': sessionName}).then(value => {
-        console.log('Response: ', value.status);
         const status = JSON.parse(value.status);
         if (status) {
           this.buttonCreateGameDisabled = true;