Commit f45c7750 authored by Dennis Willers's avatar Dennis Willers 🏀

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

parent bd74510d
Pipeline #335 passed with stages
in 5 minutes and 30 seconds
...@@ -23,6 +23,7 @@ import { GuesserComponent } from './guesser/guesser.component'; ...@@ -23,6 +23,7 @@ import { GuesserComponent } from './guesser/guesser.component';
import {MatSlideToggleModule} from '@angular/material/slide-toggle'; import {MatSlideToggleModule} from '@angular/material/slide-toggle';
import {MatIconModule} from '@angular/material/icon'; import {MatIconModule} from '@angular/material/icon';
import {MatTooltipModule} from '@angular/material/tooltip'; import {MatTooltipModule} from '@angular/material/tooltip';
import {IsAllowedToPlay} from './dao/isAllowedToPlay';
@NgModule({ @NgModule({
declarations: [ declarations: [
...@@ -52,7 +53,9 @@ import {MatTooltipModule} from '@angular/material/tooltip'; ...@@ -52,7 +53,9 @@ import {MatTooltipModule} from '@angular/material/tooltip';
MatIconModule, MatIconModule,
MatTooltipModule MatTooltipModule
], ],
providers: [], providers: [
IsAllowedToPlay
],
bootstrap: [AppComponent] bootstrap: [AppComponent]
}) })
export class AppModule { } export class AppModule { }
import {Injectable} from '@angular/core';
@Injectable()
export class IsAllowedToPlay {
isAllowed = false;
role = '';
}
import { Component, OnInit } from '@angular/core'; import {Component, OnInit} from '@angular/core';
import {ProgressSpinnerMode} from '@angular/material/progress-spinner';
import {CardInfo} from '../interface/cardInfo'; import {CardInfo} from '../interface/cardInfo';
import {TabuMiddlewareService} from '../dao/TabuMiddlewareService'; import {TabuMiddlewareService} from '../dao/TabuMiddlewareService';
import {ActivatedRoute, Router} from '@angular/router'; import {ActivatedRoute, Router} from '@angular/router';
import {GameStatus} from '../interface/gameStatus'; import {GameStatus} from '../interface/gameStatus';
import {io} from 'socket.io-client'; import {io} from 'socket.io-client';
import {environment} from '../../environments/environment'; import {environment} from '../../environments/environment';
import {IsAllowedToPlay} from '../dao/isAllowedToPlay';
@Component({ @Component({
selector: 'app-game', selector: 'app-game',
...@@ -38,35 +38,41 @@ export class GameComponent implements OnInit { ...@@ -38,35 +38,41 @@ export class GameComponent implements OnInit {
red: 0, red: 0,
blue: 0, blue: 0,
redTurn: true, redTurn: true,
activeExplainer: false, activeExplainer: 1,
activeWatchdog: false activeWatchdog: 1
}; };
team = ''; team = '';
color = 'primary'; color = 'primary';
mode: ProgressSpinnerMode = 'determinate';
value = 50; value = 50;
constructor(private service: TabuMiddlewareService, constructor(private service: TabuMiddlewareService,
private router: Router, private router: Router,
private activatedRoute: ActivatedRoute) {} private activatedRoute: ActivatedRoute,
private isAllowedToPlay: IsAllowedToPlay) {}
ngOnInit(): void { ngOnInit(): void {
this.activatedRoute.paramMap.subscribe(params => { this.activatedRoute.paramMap.subscribe(params => {
this.sessionName = String(params.get('sessionName')); this.sessionName = String(params.get('sessionName'));
this.team = String(params.get('team'));
const url = this.router.url.split('/'); const url = this.router.url.split('/');
const checkUser = url[url.length - 1]; const checkUser = url[url.length - 1];
if (checkUser === 'watchdog') { if (checkUser === 'watchdog') {
this.isWatchdog = true; if (!this.isAllowedToPlay.isAllowed || this.isAllowedToPlay.role !== 'watchdog') {
this.router.navigate([this.sessionName + '/' + this.team]);
} else {
this.isWatchdog = true;
}
} else if (checkUser === 'explainer') { } else if (checkUser === 'explainer') {
this.isExplainer = true; if (!this.isAllowedToPlay.isAllowed || this.isAllowedToPlay.role !== 'explainer') {
this.service.getS2C({spielname: this.sessionName}); this.router.navigate([this.sessionName + '/' + this.team]);
} else {
this.isExplainer = true;
this.service.getS2C({spielname: this.sessionName});
}
} }
this.fillGamestatus(); this.fillGamestatus();
this.team = String(params.get('team')); this.socket = io(environment.tabuServerURL);
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.listen(); this.listen();
}); });
this.startTimer(); this.startTimer();
...@@ -90,7 +96,7 @@ export class GameComponent implements OnInit { ...@@ -90,7 +96,7 @@ export class GameComponent implements OnInit {
} }
onTimesUp(): void{ onTimesUp(): void{
this.socket.disconnect() this.socket.disconnect();
this.router.navigate([this.sessionName + '/' + this.team]); this.router.navigate([this.sessionName + '/' + this.team]);
} }
...@@ -101,7 +107,7 @@ export class GameComponent implements OnInit { ...@@ -101,7 +107,7 @@ export class GameComponent implements OnInit {
this.timeLeft = (this.TIME_LIMIT - this.timePassed); this.timeLeft = (this.TIME_LIMIT - this.timePassed);
if (this.timeLeft === 0) { if (this.timeLeft === 0) {
console.log('Times up!'); console.log('Times up!');
//this.onTimesUp(); this.onTimesUp();
} }
}, 593); }, 593);
} }
......
import { Component, OnInit } from '@angular/core'; import {Component, Input, OnInit} from '@angular/core';
import {TabuMiddlewareService} from '../dao/TabuMiddlewareService'; import {TabuMiddlewareService} from '../dao/TabuMiddlewareService';
import {GameStatus} from '../interface/gameStatus'; import {GameStatus} from '../interface/gameStatus';
import {ActivatedRoute, Router} from '@angular/router'; import {ActivatedRoute, Router} from '@angular/router';
import {io} from 'socket.io-client'; import {io} from 'socket.io-client';
import {environment} from '../../environments/environment'; import {environment} from '../../environments/environment';
import {IsAllowedToPlay} from '../dao/isAllowedToPlay';
@Component({ @Component({
selector: 'app-guesser', selector: 'app-guesser',
templateUrl: './guesser.component.html', templateUrl: './guesser.component.html',
...@@ -22,22 +23,25 @@ export class GuesserComponent implements OnInit { ...@@ -22,22 +23,25 @@ export class GuesserComponent implements OnInit {
red: 0, red: 0,
blue: 0, blue: 0,
redTurn: true, redTurn: true,
activeExplainer: false, activeExplainer: 1,
activeWatchdog: false activeWatchdog: 1
}; };
team = ''; 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 { ngOnInit(): void {
this.activatedRoute.paramMap.subscribe(params => { this.activatedRoute.paramMap.subscribe(params => {
this.sessionName = String(params.get('sessionName')); this.sessionName = String(params.get('sessionName'));
this.team = String(params.get('team')); this.team = String(params.get('team'));
if (!this.isAllowedToPlay.isAllowed || this.isAllowedToPlay.role !== 'guesser') {
this.router.navigate([this.sessionName + '/' + this.team]);
}
this.fillGamestatus(); this.fillGamestatus();
this.socket = io(environment.tabuServerURL, { 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.listen(); this.listen();
}); });
this.startTimer(); this.startTimer();
...@@ -71,7 +75,7 @@ export class GuesserComponent implements OnInit { ...@@ -71,7 +75,7 @@ export class GuesserComponent implements OnInit {
this.timeLeft = (this.TIME_LIMIT - this.timePassed); this.timeLeft = (this.TIME_LIMIT - this.timePassed);
if (this.timeLeft === 0) { if (this.timeLeft === 0) {
console.log('Times up!'); console.log('Times up!');
//this.onTimesUp(); this.onTimesUp();
} }
}, 593); }, 593);
} }
......
...@@ -3,6 +3,6 @@ export interface GameStatus { ...@@ -3,6 +3,6 @@ export interface GameStatus {
red: number; red: number;
blue: number; blue: number;
redTurn: boolean; redTurn: boolean;
activeExplainer: boolean; activeExplainer: number;
activeWatchdog: boolean; activeWatchdog: number;
} }
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<mat-card class="transparent"> <mat-card class="transparent">
<div class="FloatLeftAndCenterElement"> <div class="FloatLeftAndCenterElement">
<div class="newStartButtonLeft"> <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> <mat-icon color = "white" aria-hidden="false">autorenew</mat-icon></button>
</div> </div>
<div class="CenterText"> <div class="CenterText">
...@@ -37,9 +37,13 @@ ...@@ -37,9 +37,13 @@
<mat-card-actions> <mat-card-actions>
<br> <br>
<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> <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-actions>
</mat-card> </mat-card>
</div> </div>
...@@ -40,3 +40,13 @@ th{ ...@@ -40,3 +40,13 @@ th{
.FloatLeftAndCenterElement{width:100%;} .FloatLeftAndCenterElement{width:100%;}
.newStartButtonLeft{float:left;width:100px;} .newStartButtonLeft{float:left;width:100px;}
.CenterText{margin:0 auto;width:250px;} .CenterText{margin:0 auto;width:250px;}
.spinner-wrapper {
display: flex;
align-items: center;
justify-content: center;
}
.rightPlace {
margin-right: 5px;
}
...@@ -4,6 +4,7 @@ import {TabuMiddlewareService} from '../dao/TabuMiddlewareService'; ...@@ -4,6 +4,7 @@ import {TabuMiddlewareService} from '../dao/TabuMiddlewareService';
import {GameStatus} from '../interface/gameStatus'; import {GameStatus} from '../interface/gameStatus';
import {io} from 'socket.io-client'; import {io} from 'socket.io-client';
import {environment} from '../../environments/environment'; import {environment} from '../../environments/environment';
import {IsAllowedToPlay} from '../dao/isAllowedToPlay';
@Component({ @Component({
selector: 'app-overview', selector: 'app-overview',
...@@ -13,6 +14,7 @@ import {environment} from '../../environments/environment'; ...@@ -13,6 +14,7 @@ import {environment} from '../../environments/environment';
export class OverviewComponent implements OnInit { export class OverviewComponent implements OnInit {
wantToBeExplainer = false; wantToBeExplainer = false;
isActiveRound = false;
socket: any; socket: any;
red = 'choose'; red = 'choose';
blue = 'choose'; blue = 'choose';
...@@ -27,13 +29,13 @@ export class OverviewComponent implements OnInit { ...@@ -27,13 +29,13 @@ export class OverviewComponent implements OnInit {
red: 0, red: 0,
blue: 0, blue: 0,
redTurn: true, redTurn: true,
activeExplainer: false, activeExplainer: 1,
activeWatchdog: false activeWatchdog: 1
}; };
constructor(private router: Router, constructor(private router: Router,
private activatedRoute: ActivatedRoute, private activatedRoute: ActivatedRoute,
private service: TabuMiddlewareService) { } private service: TabuMiddlewareService,
private isAllowedToPlay: IsAllowedToPlay) { }
ngOnInit(): void { ngOnInit(): void {
this.activatedRoute.paramMap.subscribe(params => { this.activatedRoute.paramMap.subscribe(params => {
...@@ -61,10 +63,7 @@ export class OverviewComponent implements OnInit { ...@@ -61,10 +63,7 @@ export class OverviewComponent implements OnInit {
return; return;
} }
this.getGameStatus(); this.getGameStatus();
this.socket = io(environment.tabuServerURL, { 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.listen(); this.listen();
}); });
} }
...@@ -77,14 +76,26 @@ export class OverviewComponent implements OnInit { ...@@ -77,14 +76,26 @@ export class OverviewComponent implements OnInit {
&& !this.wantToBeExplainer) { && !this.wantToBeExplainer) {
console.log('OVERVIEW GO GUESSER: ', data); console.log('OVERVIEW GO GUESSER: ', data);
this.socket.disconnect(); this.socket.disconnect();
this.isAllowedToPlay.isAllowed = true;
this.isAllowedToPlay.role = 'guesser';
this.router.navigate([this.sessionName + '/' + this.team + '/guesser']); this.router.navigate([this.sessionName + '/' + this.team + '/guesser']);
} else if ((this.team === 'red' || this.team === 'blue') && !this.wantToBeExplainer) { } else if ((this.team === 'red' || this.team === 'blue') && !this.wantToBeExplainer) {
console.log('OVERVIEW GO WATCHDOG: ', data); console.log('OVERVIEW GO WATCHDOG: ', data);
this.socket.disconnect(); this.socket.disconnect();
this.isAllowedToPlay.isAllowed = true;
this.isAllowedToPlay.role = 'watchdog';
this.router.navigate([this.sessionName + '/' + this.team + '/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 { startGame(): void {
...@@ -101,13 +112,15 @@ export class OverviewComponent implements OnInit { ...@@ -101,13 +112,15 @@ export class OverviewComponent implements OnInit {
nextRound(): void { nextRound(): void {
this.wantToBeExplainer = true; this.wantToBeExplainer = true;
this.service.newRound({spielname: this.sessionName}); this.service.newRound({spielname: this.sessionName});
this.socket.disconnect() this.socket.disconnect();
this.router.navigate([this.router.url + '/explainer']); this.isAllowedToPlay.isAllowed = true;
this.isAllowedToPlay.role = 'explainer';
this.router.navigate([this.router.url + '/explainer', ]);
} }
joinTeam(team: string): void { joinTeam(team: string): void {
this.team = team; this.team = team;
this.socket.disconnect() this.socket.disconnect();
this.router.navigate([this.sessionName + '/' + team]); this.router.navigate([this.sessionName + '/' + team]);
} }
...@@ -129,6 +142,7 @@ export class OverviewComponent implements OnInit { ...@@ -129,6 +142,7 @@ export class OverviewComponent implements OnInit {
this.nextTeam = 'Blau'; this.nextTeam = 'Blau';
this.buttonNextRoundDisabled = this.team !== 'blue'; this.buttonNextRoundDisabled = this.team !== 'blue';
} }
this.isActiveRound = this.gameStatus.activeExplainer === 1;
} }
console.log(this.gameStatus); console.log(this.gameStatus);
}).catch(reason => console.log(reason)); }).catch(reason => console.log(reason));
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment