Implement Service 4 Checking, if a user allowed to play the game in a spezific role

src/app/app.module.ts

@@ -23,6 +23,7 @@ import { GuesserComponent } from './guesser/guesser.component';
 import {MatSlideToggleModule} from '@angular/material/slide-toggle';
 import {MatIconModule} from '@angular/material/icon';
 import {MatTooltipModule} from '@angular/material/tooltip';
+import {IsAllowedToPlay} from './dao/isAllowedToPlay';
 
 @NgModule({
   declarations: [
@@ -52,7 +53,9 @@ import {MatTooltipModule} from '@angular/material/tooltip';
     MatIconModule,
     MatTooltipModule
   ],
-  providers: [],
+  providers: [
+    IsAllowedToPlay
+  ],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/dao/isAllowedToPlay.ts

+import {Injectable} from '@angular/core';
+
+@Injectable()
+export class IsAllowedToPlay {
+  isAllowed = false;
+  role = '';
+}

src/app/game/game.component.ts

-import { Component, OnInit } from '@angular/core';
-import {ProgressSpinnerMode} from '@angular/material/progress-spinner';
+import {Component, 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';
 
 @Component({
   selector: 'app-game',
@@ -38,35 +38,41 @@ export class GameComponent implements OnInit {
     red: 0,
     blue: 0,
     redTurn: true,
-    activeExplainer: false,
-    activeWatchdog: false
+    activeExplainer: 1,
+    activeWatchdog: 1
   };
   team = '';
 
   color = 'primary';
-  mode: ProgressSpinnerMode = 'determinate';
   value = 50;
+
   constructor(private service: TabuMiddlewareService,
               private router: Router,
-              private activatedRoute: ActivatedRoute) {}
+              private activatedRoute: ActivatedRoute,
+              private isAllowedToPlay: IsAllowedToPlay) {}
 
   ngOnInit(): void {
     this.activatedRoute.paramMap.subscribe(params => {
       this.sessionName = String(params.get('sessionName'));
+      this.team = String(params.get('team'));
       const url = this.router.url.split('/');
       const checkUser = url[url.length - 1];
       if (checkUser === 'watchdog') {
+        if (!this.isAllowedToPlay.isAllowed || this.isAllowedToPlay.role !== 'watchdog') {
+          this.router.navigate([this.sessionName + '/' + this.team]);
+        } else {
           this.isWatchdog = true;
+        }
       } else if (checkUser === 'explainer') {
+        if (!this.isAllowedToPlay.isAllowed || this.isAllowedToPlay.role !== 'explainer') {
+          this.router.navigate([this.sessionName + '/' + this.team]);
+        } else {
           this.isExplainer = true;
           this.service.getS2C({spielname: this.sessionName});
         }
+      }
       this.fillGamestatus();
-      this.team = String(params.get('team'));
-      this.socket = io(environment.tabuServerURL, {
-        // WARNING: in that case, there is no fallback to long-polling
-        transports: [ 'websocket' ] // or [ 'websocket', 'polling' ], which is the same thing
-      });
+      this.socket = io(environment.tabuServerURL);
       this.listen();
     });
     this.startTimer();
@@ -90,7 +96,7 @@ export class GameComponent implements OnInit {
   }
 
   onTimesUp(): void{
-    this.socket.disconnect()
+    this.socket.disconnect();
     this.router.navigate([this.sessionName + '/' + this.team]);
   }
 
@@ -101,7 +107,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);
   }

src/app/guesser/guesser.component.ts

-import { Component, OnInit } from '@angular/core';
+import {Component, Input, 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';
 @Component({
   selector: 'app-guesser',
   templateUrl: './guesser.component.html',
@@ -22,22 +23,25 @@ export class GuesserComponent implements OnInit {
     red: 0,
     blue: 0,
     redTurn: true,
-    activeExplainer: false,
-    activeWatchdog: false
+    activeExplainer: 1,
+    activeWatchdog: 1
   };
   team = '';
 
-  constructor(private router: Router, private activatedRoute: ActivatedRoute, private service: TabuMiddlewareService) { }
+  constructor(private router: Router,
+              private activatedRoute: ActivatedRoute,
+              private service: TabuMiddlewareService,
+              private isAllowedToPlay: IsAllowedToPlay) { }
 
   ngOnInit(): void {
     this.activatedRoute.paramMap.subscribe(params => {
       this.sessionName = String(params.get('sessionName'));
       this.team = String(params.get('team'));
+      if (!this.isAllowedToPlay.isAllowed || this.isAllowedToPlay.role !== 'guesser') {
+        this.router.navigate([this.sessionName + '/' + this.team]);
+      }
       this.fillGamestatus();
-      this.socket = io(environment.tabuServerURL, {
-        // WARNING: in that case, there is no fallback to long-polling
-        transports: [ 'websocket' ] // or [ 'websocket', 'polling' ], which is the same thing
-      });
+      this.socket = io(environment.tabuServerURL);
       this.listen();
     });
     this.startTimer();
@@ -71,7 +75,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);
   }

src/app/interface/gameStatus.ts

@@ -3,6 +3,6 @@ export interface GameStatus {
   red: number;
   blue: number;
   redTurn: boolean;
-  activeExplainer: boolean;
-  activeWatchdog: boolean;
+  activeExplainer: number;
+  activeWatchdog: number;
 }

src/app/overview/overview.component.html

@@ -2,7 +2,7 @@
   <mat-card class="transparent">
     <div class="FloatLeftAndCenterElement">
       <div class="newStartButtonLeft">
-        <button matTooltip="Neues Spiel starten" [disabled]="buttonNewGameDisabled" mat-raised-button color="primary" (click)="startGame()">
+        <button matTooltip="Neues Spiel starten" [disabled]="buttonNewGameDisabled || gameStatus.activeExplainer == 1" mat-raised-button color="primary" (click)="startGame()">
           <mat-icon color = "white" aria-hidden="false">autorenew</mat-icon></button>
       </div>
       <div class="CenterText">
@@ -37,9 +37,13 @@
     <mat-card-actions>
       <br>
       <br>
-      <mat-card-title>{{nextTeam}} ist am Zug:</mat-card-title>
+      <div *ngIf="isActiveRound" class="spinner-wrapper">
+        <mat-card-title class="rightPlace">Warten auf nächste Runde</mat-card-title>
+        <mat-spinner diameter="30"></mat-spinner>
+      </div>
+      <mat-card-title *ngIf="!isActiveRound">{{nextTeam}} ist am Zug:</mat-card-title>
       <br>
-      <button [disabled]="buttonNextRoundDisabled" mat-raised-button color="primary" (click)="nextRound()">Ich erkläre und los!</button>
+      <button [disabled]="buttonNextRoundDisabled || gameStatus.activeExplainer == 1" mat-raised-button color="primary" (click)="nextRound()">Ich erkläre und los!</button>
     </mat-card-actions>
   </mat-card>
 </div>

src/app/overview/overview.component.scss

@@ -40,3 +40,13 @@ th{
 .FloatLeftAndCenterElement{width:100%;}
 .newStartButtonLeft{float:left;width:100px;}
 .CenterText{margin:0 auto;width:250px;}
+
+.spinner-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.rightPlace {
+  margin-right: 5px;
+}

src/app/overview/overview.component.ts

@@ -4,6 +4,7 @@ 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';
 
 @Component({
   selector: 'app-overview',
@@ -13,6 +14,7 @@ import {environment} from '../../environments/environment';
 export class OverviewComponent implements OnInit {
 
   wantToBeExplainer = false;
+  isActiveRound = false;
   socket: any;
   red = 'choose';
   blue = 'choose';
@@ -27,13 +29,13 @@ export class OverviewComponent implements OnInit {
     red: 0,
     blue: 0,
     redTurn: true,
-    activeExplainer: false,
-    activeWatchdog: false
+    activeExplainer: 1,
+    activeWatchdog: 1
   };
-
   constructor(private router: Router,
               private activatedRoute: ActivatedRoute,
-              private service: TabuMiddlewareService) { }
+              private service: TabuMiddlewareService,
+              private isAllowedToPlay: IsAllowedToPlay) { }
 
   ngOnInit(): void {
     this.activatedRoute.paramMap.subscribe(params => {
@@ -61,10 +63,7 @@ export class OverviewComponent implements OnInit {
         return;
       }
       this.getGameStatus();
-      this.socket = io(environment.tabuServerURL, {
-        // WARNING: in that case, there is no fallback to long-polling
-        transports: [ 'websocket' ] // or [ 'websocket', 'polling' ], which is the same thing
-      });
+      this.socket = io(environment.tabuServerURL);
       this.listen();
     });
   }
@@ -77,14 +76,26 @@ export class OverviewComponent implements OnInit {
           && !this.wantToBeExplainer) {
           console.log('OVERVIEW GO GUESSER: ', data);
           this.socket.disconnect();
+          this.isAllowedToPlay.isAllowed = true;
+          this.isAllowedToPlay.role = 'guesser';
           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.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();
+    });
   }
 
   startGame(): void {
@@ -101,13 +112,15 @@ export class OverviewComponent implements OnInit {
   nextRound(): void {
     this.wantToBeExplainer = true;
     this.service.newRound({spielname: this.sessionName});
-    this.socket.disconnect()
-    this.router.navigate([this.router.url + '/explainer']);
+    this.socket.disconnect();
+    this.isAllowedToPlay.isAllowed = true;
+    this.isAllowedToPlay.role = 'explainer';
+    this.router.navigate([this.router.url + '/explainer', ]);
   }
 
   joinTeam(team: string): void {
     this.team = team;
-    this.socket.disconnect()
+    this.socket.disconnect();
     this.router.navigate([this.sessionName + '/' + team]);
   }
 
@@ -129,6 +142,7 @@ export class OverviewComponent implements OnInit {
           this.nextTeam = 'Blau';
           this.buttonNextRoundDisabled = this.team !== 'blue';
         }
+        this.isActiveRound = this.gameStatus.activeExplainer === 1;
       }
       console.log(this.gameStatus);
     }).catch(reason => console.log(reason));