Commit 2c5bfb68 authored by Dennis Willers's avatar Dennis Willers 🏀

Change Socket Architekture

Implement getActualCard
parent a18b860a
Pipeline #340 passed with stages
in 5 minutes and 39 seconds
<div fxLayout="column" fxFlexFill style="background-image: url(/assets/background.jpg); background-repeat: repeat;" > <div fxLayout="column" fxFlexFill style="background-image: url(/assets/background.jpg); background-repeat: repeat;" >
<app-header socket="{{socket}}"> <app-header>
</app-header> </app-header>
<div fxFlex> <div fxFlex>
<router-outlet (activate)="socket"></router-outlet> <router-outlet></router-outlet>
</div> </div>
<app-footer> <app-footer>
<mat-toolbar color="primary"> <mat-toolbar color="primary">
......
...@@ -8,12 +8,8 @@ import {environment} from '../environments/environment'; ...@@ -8,12 +8,8 @@ import {environment} from '../environments/environment';
styleUrls: ['./app.component.scss'] styleUrls: ['./app.component.scss']
}) })
export class AppComponent implements OnInit { export class AppComponent implements OnInit {
@Output()
socket: any;
title = 'Tabu'; title = 'Tabu';
ngOnInit(): void { ngOnInit(): void {
//this.socket = io(environment.tabuServerURL);
} }
} }
...@@ -24,6 +24,7 @@ import {MatSlideToggleModule} from '@angular/material/slide-toggle'; ...@@ -24,6 +24,7 @@ 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'; import {IsAllowedToPlay} from './dao/isAllowedToPlay';
import {SocketDataService} from './dao/socketDataService';
@NgModule({ @NgModule({
declarations: [ declarations: [
...@@ -54,7 +55,8 @@ import {IsAllowedToPlay} from './dao/isAllowedToPlay'; ...@@ -54,7 +55,8 @@ import {IsAllowedToPlay} from './dao/isAllowedToPlay';
MatTooltipModule MatTooltipModule
], ],
providers: [ providers: [
IsAllowedToPlay IsAllowedToPlay,
SocketDataService
], ],
bootstrap: [AppComponent] bootstrap: [AppComponent]
}) })
......
...@@ -39,9 +39,14 @@ export class TabuMiddlewareService { ...@@ -39,9 +39,14 @@ export class TabuMiddlewareService {
} }
getS2C(req: any): Promise<any> { getS2C(req: any): Promise<any> {
console.log("getS2C Request: ", req);
return this.request('POST', `${environment.tabuMiddlewareURL}getS2C`, 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> { addPoint(req: any): Promise<any> {
return this.request('POST', `${environment.tabuMiddlewareURL}addPoint`, req); return this.request('POST', `${environment.tabuMiddlewareURL}addPoint`, req);
} }
......
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);
});
});
}
}
import {Component, OnInit} from '@angular/core'; import {Component, OnDestroy, OnInit} from '@angular/core';
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 {environment} from '../../environments/environment';
import {IsAllowedToPlay} from '../dao/isAllowedToPlay'; import {IsAllowedToPlay} from '../dao/isAllowedToPlay';
import {SocketDataService} from '../dao/socketDataService';
import {Subject} from 'rxjs';
import {takeUntil} from 'rxjs/operators';
@Component({ @Component({
selector: 'app-game', selector: 'app-game',
templateUrl: './game.component.html', templateUrl: './game.component.html',
styleUrls: ['./game.component.scss'] 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 = ''; sessionName = '';
isWatchdog = false; isWatchdog = false;
isExplainer = false; isExplainer = false;
...@@ -39,7 +42,7 @@ export class GameComponent implements OnInit { ...@@ -39,7 +42,7 @@ export class GameComponent implements OnInit {
blue: 0, blue: 0,
redTurn: true, redTurn: true,
activeExplainer: 1, activeExplainer: 1,
activeWatchdog: 1 activeCard: 1
}; };
team = ''; team = '';
...@@ -49,12 +52,14 @@ export class GameComponent implements OnInit { ...@@ -49,12 +52,14 @@ export class GameComponent implements OnInit {
constructor(private service: TabuMiddlewareService, constructor(private service: TabuMiddlewareService,
private router: Router, private router: Router,
private activatedRoute: ActivatedRoute, private activatedRoute: ActivatedRoute,
private isAllowedToPlay: IsAllowedToPlay) {} private isAllowedToPlay: IsAllowedToPlay,
private socketDataService: SocketDataService) {}
ngOnInit(): void { ngOnInit(): void {
this.activatedRoute.paramMap.subscribe(params => { this.activatedRoute.paramMap.subscribe(params => {
this.sessionName = String(params.get('sessionName')).toLowerCase(); this.sessionName = String(params.get('sessionName')).toLowerCase();
this.team = String(params.get('team')); this.team = String(params.get('team'));
this.getSocketData();
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') {
...@@ -68,35 +73,43 @@ export class GameComponent implements OnInit { ...@@ -68,35 +73,43 @@ export class GameComponent implements OnInit {
this.router.navigate([this.sessionName + '/' + this.team]); this.router.navigate([this.sessionName + '/' + this.team]);
} else { } else {
this.isExplainer = true; this.isExplainer = true;
this.service.getS2C({spielname: this.sessionName}); //this.service.getS2C({spielname: this.sessionName});
} }
} }
console.log('FILL GAME');
this.fillGamestatus(); this.fillGamestatus();
this.socket = io(environment.tabuServerURL);
this.listen();
}); });
this.startTimer(); this.startTimer();
} }
listen(): any { ngOnDestroy(): void {
this.socket.on(this.sessionName + ':newCard', (data: any) => { this.unsubscribeAll();
this.service.getCard({cardID: data}).then(value => { }
this.fillNewCard(value);
this.fillGamestatus(); 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.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.unsubscribeAll();
this.router.navigate([this.sessionName + '/' + this.team]);
}
}); });
});
this.socket.on(this.sessionName + ':endRound', (data: any) => {
console.log('GAME: ', data);
if (JSON.parse(data)) {
console.log('GAME END: ', data);
this.socket.disconnect();
this.router.navigate([this.sessionName + '/' + this.team]);
}
});
} }
onTimesUp(): void{ onTimesUp(): void{
this.socket.disconnect(); this.unsubscribeAll();
this.router.navigate([this.sessionName + '/' + this.team]); this.router.navigate([this.sessionName + '/' + this.team]);
} }
...@@ -107,7 +120,7 @@ export class GameComponent implements OnInit { ...@@ -107,7 +120,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);
} }
...@@ -177,13 +190,30 @@ export class GameComponent implements OnInit { ...@@ -177,13 +190,30 @@ export class GameComponent implements OnInit {
this.service.getGamestatus({spielname: this.sessionName}).then(value => { this.service.getGamestatus({spielname: this.sessionName}).then(value => {
const status = JSON.parse(value.status); const status = JSON.parse(value.status);
if (status) { if (status) {
console.log(value);
this.gameStatus.sessionID = JSON.parse(value.sessionID); this.gameStatus.sessionID = JSON.parse(value.sessionID);
this.gameStatus.red = JSON.parse(value.red); this.gameStatus.red = JSON.parse(value.red);
this.gameStatus.blue = JSON.parse(value.blue); this.gameStatus.blue = JSON.parse(value.blue);
this.gameStatus.redTurn = JSON.parse(value.redTurn); this.gameStatus.redTurn = JSON.parse(value.redTurn);
this.gameStatus.activeExplainer = JSON.parse(value.activeExplainer); 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();
}
} }
import {Component, Input, OnInit} from '@angular/core'; import {Component, OnDestroy, 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 {environment} from '../../environments/environment';
import {IsAllowedToPlay} from '../dao/isAllowedToPlay'; import {IsAllowedToPlay} from '../dao/isAllowedToPlay';
import {SocketDataService} from '../dao/socketDataService';
import {Subject} from 'rxjs';
import {takeUntil} from 'rxjs/operators';
@Component({ @Component({
selector: 'app-guesser', selector: 'app-guesser',
templateUrl: './guesser.component.html', templateUrl: './guesser.component.html',
styleUrls: ['./guesser.component.scss'] styleUrls: ['./guesser.component.scss']
}) })
export class GuesserComponent implements OnInit { export class GuesserComponent implements OnInit, OnDestroy {
socket: any;
private ngUnsubscribe = new Subject();
subNewCard: any;
subEndRound: any;
sessionName = ''; sessionName = '';
TIME_LIMIT = 100; TIME_LIMIT = 100;
timePassed = 0; timePassed = 0;
...@@ -24,14 +28,15 @@ export class GuesserComponent implements OnInit { ...@@ -24,14 +28,15 @@ export class GuesserComponent implements OnInit {
blue: 0, blue: 0,
redTurn: true, redTurn: true,
activeExplainer: 1, activeExplainer: 1,
activeWatchdog: 1 activeCard: 1
}; };
team = ''; team = '';
constructor(private router: Router, constructor(private router: Router,
private activatedRoute: ActivatedRoute, private activatedRoute: ActivatedRoute,
private service: TabuMiddlewareService, private service: TabuMiddlewareService,
private isAllowedToPlay: IsAllowedToPlay) { } private isAllowedToPlay: IsAllowedToPlay,
private socketDataService: SocketDataService) { }
ngOnInit(): void { ngOnInit(): void {
this.activatedRoute.paramMap.subscribe(params => { this.activatedRoute.paramMap.subscribe(params => {
...@@ -41,30 +46,35 @@ export class GuesserComponent implements OnInit { ...@@ -41,30 +46,35 @@ export class GuesserComponent implements OnInit {
this.router.navigate([this.sessionName + '/' + this.team]); this.router.navigate([this.sessionName + '/' + this.team]);
} }
this.fillGamestatus(); this.fillGamestatus();
this.socket = io(environment.tabuServerURL); this.getSocketData();
this.listen();
}); });
this.startTimer(); this.startTimer();
} }
listen(): any { ngOnDestroy(): void {
this.socket.on(this.sessionName + ':newCard', (data: any) => { this.unsubscribeAll();
this.service.getCard({cardID: data}).then(value => { }
getSocketData(): void {
this.subNewCard = this.socketDataService.getNewCard(this.sessionName)
.pipe(takeUntil(this.ngUnsubscribe))
.subscribe(data => {
console.log('GUESSER SOCKET CARD: ', data);
this.fillGamestatus(); this.fillGamestatus();
}); });
}); this.subEndRound = this.socketDataService.getEndRound(this.sessionName)
this.socket.on(this.sessionName + ':endRound', (data: any) => { .pipe(takeUntil(this.ngUnsubscribe))
console.log('GAME: ', data); .subscribe(data => {
if (JSON.parse(data)) { console.log('GUESSER SOCKET END ROUND: ', data);
console.log('GAME END: ', data); if (JSON.parse(data)) {
this.socket.disconnect(); this.unsubscribeAll();
this.router.navigate([this.sessionName + '/' + this.team]); this.router.navigate([this.sessionName + '/' + this.team]);
} }
}); });
} }
onTimesUp(): void{ onTimesUp(): void{
this.socket.disconnect(); this.unsubscribeAll();
this.router.navigate([this.sessionName + '/' + this.team]); this.router.navigate([this.sessionName + '/' + this.team]);
} }
...@@ -75,7 +85,7 @@ export class GuesserComponent implements OnInit { ...@@ -75,7 +85,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);
} }
...@@ -94,8 +104,16 @@ export class GuesserComponent implements OnInit { ...@@ -94,8 +104,16 @@ export class GuesserComponent implements OnInit {
this.gameStatus.blue = JSON.parse(value.blue); this.gameStatus.blue = JSON.parse(value.blue);
this.gameStatus.redTurn = JSON.parse(value.redTurn); this.gameStatus.redTurn = JSON.parse(value.redTurn);
this.gameStatus.activeExplainer = JSON.parse(value.activeExplainer); 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();
}
} }
import {Component, Input, OnInit} from '@angular/core'; import {Component, Input, OnInit} from '@angular/core';
import {Router} from '@angular/router'; import {Router} from '@angular/router';
import {SocketDataService} from '../dao/socketDataService';
import {Subscription} from 'rxjs';
@Component({ @Component({
selector: 'app-header', selector: 'app-header',
...@@ -7,15 +9,15 @@ import {Router} from '@angular/router'; ...@@ -7,15 +9,15 @@ import {Router} from '@angular/router';
styleUrls: ['./header.component.scss'] styleUrls: ['./header.component.scss']
}) })
export class HeaderComponent implements OnInit { export class HeaderComponent implements OnInit {
@Input()
socket: any;
constructor(private router: Router) { } constructor(private router: Router,
private socketDataService: SocketDataService) { }
ngOnInit(): void { ngOnInit(): void {
} }
toStartpage(): void { toStartpage(): void {
this.socketDataService.disconect();
this.router.navigate(['']); this.router.navigate(['']);
} }
} }
...@@ -4,5 +4,5 @@ export interface GameStatus { ...@@ -4,5 +4,5 @@ export interface GameStatus {
blue: number; blue: number;
redTurn: boolean; redTurn: boolean;
activeExplainer: number; activeExplainer: number;
activeWatchdog: number; activeCard: number;
} }
import { Component, OnInit } from '@angular/core'; import {Component, OnDestroy, OnInit} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router'; import {ActivatedRoute, Router} from '@angular/router';
import {TabuMiddlewareService} from '../dao/TabuMiddlewareService'; import {TabuMiddlewareService} from '../dao/TabuMiddlewareService';
import {GameStatus} from '../interface/gameStatus'; import {GameStatus} from '../interface/gameStatus';
import {io} from 'socket.io-client';
import {environment} from '../../environments/environment';
import {IsAllowedToPlay} from '../dao/isAllowedToPlay'; import {IsAllowedToPlay} from '../dao/isAllowedToPlay';
import {SocketDataService} from '../dao/socketDataService';
import {Subject} from 'rxjs';
import {takeUntil} from 'rxjs/operators';
@Component({ @Component({
selector: 'app-overview', selector: 'app-overview',
templateUrl: './overview.component.html', templateUrl: './overview.component.html',
styleUrls: ['./overview.component.scss'] 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; wantToBeExplainer = false;
isActiveRound = false; isActiveRound = false;
socket: any;
red = 'choose'; red = 'choose';
blue = 'choose'; blue = 'choose';
nextTeam = 'Blau'; nextTeam = 'Blau';
...@@ -30,75 +35,93 @@ export class OverviewComponent implements OnInit { ...@@ -30,75 +35,93 @@ export class OverviewComponent implements OnInit {
blue: 0, blue: 0,
redTurn: true, redTurn: true,
activeExplainer: 1, activeExplainer: 1,
activeWatchdog: 1 activeCard: 1
}; };
constructor(private router: Router, constructor(private router: Router,
private activatedRoute: ActivatedRoute, private activatedRoute: ActivatedRoute,
private service: TabuMiddlewareService, private service: TabuMiddlewareService,
private isAllowedToPlay: IsAllowedToPlay) { } private isAllowedToPlay: IsAllowedToPlay,
private socketDataService: SocketDataService) { }
ngOnInit(): void { ngOnInit(): void {
this.activatedRoute.paramMap.subscribe(params => { this.activatedRoute.paramMap.subscribe(params => {
this.sessionName = String(params.get('sessionName')).toLowerCase(); this.sessionName = String(params.get('sessionName')).toLowerCase();
this.team = String(params.get('team')); this.team = String(params.get('team'));
console.log('Team:', this.team); this.getSocketData();
if (this.team === 'red'){ this.service.isSession({spielname: this.sessionName}).then(value => {
this.membership = 'Du gehörst zu Team rot!'; if (!JSON.parse(value.status)) {
this.buttonNewGameDisabled = false; this.router.navigate(['error']);
this.red = 'red'; } else {
this.blue = 'choose'; console.log('Team:', this.team);
} if (this.team === 'red'){
else if (this.team === 'blue'){ this.membership = 'Du gehörst zu Team rot!';
this.membership = 'Du gehörst zu Team blau!'; this.buttonNewGameDisabled = false;
this.buttonNewGameDisabled = false; this.red = 'red';
this.blue = 'blue'; this.blue = 'choose';
this.red = 'choose'; }
} else if (this.team === 'blue'){
else if (this.team === 'null'){ this.membership = 'Du gehörst zu Team blau!';
this.membership = 'Wähle dein Team'; this.buttonNewGameDisabled = false;
} this.blue = 'blue';
else { this.red = 'choose';
this.socket.disconnect(); }
this.router.navigate(['error']); else if (this.team === 'null'){
return; this.membership = 'Wähle dein Team';
} }
this.getGameStatus(); else {
this.socket = io(environment.tabuServerURL); this.router.navigate(['error']);
this.listen(); return;
}
console.log("GET SOCKET DATA");
this.getGameStatus();
}
});
}); });
} }
private listen(): any { ngOnDestroy(): void {
this.socket.on(this.sessionName + ':newRound', (data: any) => { this.unsubscribeAll();
if (JSON.parse(data)) { }
console.log('OVERVIEW: ', data);
if (((this.team === 'red' && this.nextTeam === 'Rot') || (this.team === 'blue' && this.nextTeam === 'Blau')) getSocketData(): void {
&& !this.wantToBeExplainer) { this.subNewGame = this.socketDataService.getNewGame (this.sessionName)
console.log('OVERVIEW GO GUESSER: ', data); .pipe(takeUntil(this.ngUnsubscribe)).subscribe(data => {
this.socket.disconnect(); console.log('OVERVIEW SOCKET GAME: ', data);
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.getGameStatus();
} });
}); this.subNewCard = this.socketDataService.getNewCard(this.sessionName)
this.socket.on(this.sessionName + ':newCard', () => { .pipe(takeUntil(this.ngUnsubscribe)).subscribe(data => {
this.getGameStatus(); console.log('OVERVIEW SOCKET CARD: ', data);
}); this.getGameStatus();
this.socket.on(this.sessionName + ':newGame', () => { });
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.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.isAllowedToPlay.isAllowed = true;
this.isAllowedToPlay.role = 'watchdog';
this.unsubscribeAll();
this.router.navigate([this.sessionName + '/' + this.team + '/watchdog']);
}
}
});
} }
startGame(): void { startGame(): void {
...@@ -113,17 +136,20 @@ export class OverviewComponent implements OnInit { ...@@ -113,17 +136,20 @@ export class OverviewComponent implements OnInit {
} }
nextRound(): void { nextRound(): void {
this.wantToBeExplainer = true; this.service.getS2C({spielname: this.sessionName}).then(value => {
this.service.newRound({spielname: this.sessionName}); console.log('START NEXT ROUND', value);
this.socket.disconnect(); this.service.newRound({spielname: this.sessionName});
this.isAllowedToPlay.isAllowed = true; this.isAllowedToPlay.isAllowed = true;
this.isAllowedToPlay.role = 'explainer'; this.isAllowedToPlay.role = 'explainer';
this.router.navigate([this.router.url + '/explainer', ]); this.unsubscribeAll();
this.router.navigate([this.router.url + '/explainer', ]);
this.wantToBeExplainer = true;
});
} }
joinTeam(team: string): void { joinTeam(team: string): void {
this.team = team; this.team = team;
this.socket.disconnect(); this.unsubscribeAll();
this.router.navigate([this.sessionName + '/' + team]); this.router.navigate([this.sessionName + '/' + team]);
} }
...@@ -136,7 +162,7 @@ export class OverviewComponent implements OnInit { ...@@ -136,7 +162,7 @@ export class OverviewComponent implements OnInit {
this.gameStatus.blue = JSON.parse(value.blue); this.gameStatus.blue = JSON.parse(value.blue);
this.gameStatus.redTurn = JSON.parse(value.redTurn); this.gameStatus.redTurn = JSON.parse(value.redTurn);
this.gameStatus.activeExplainer = JSON.parse(value.activeExplainer); 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){ if (this.gameStatus.redTurn){
this.nextTeam = 'Rot'; this.nextTeam = 'Rot';
this.buttonNextRoundDisabled = this.team !== 'red'; this.buttonNextRoundDisabled = this.team !== 'red';
...@@ -150,4 +176,14 @@ export class OverviewComponent implements OnInit { ...@@ -150,4 +176,14 @@ export class OverviewComponent implements OnInit {
console.log(this.gameStatus); console.log(this.gameStatus);
}).catch(reason => console.log(reason)); }).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();
}
} }
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import {Router} from '@angular/router'; import {Router} from '@angular/router';
import {TabuMiddlewareService} from '../dao/TabuMiddlewareService'; import {TabuMiddlewareService} from '../dao/TabuMiddlewareService';
import {SocketDataService} from '../dao/socketDataService';
@Component({ @Component({
selector: 'app-select-game', selector: 'app-select-game',
...@@ -12,7 +13,8 @@ export class SelectGameComponent implements OnInit { ...@@ -12,7 +13,8 @@ export class SelectGameComponent implements OnInit {
buttonCreateGameDisabled = true; buttonCreateGameDisabled = true;
buttonJoinGameDisabled = true; buttonJoinGameDisabled = true;
constructor(private router: Router, constructor(private router: Router,
private service: TabuMiddlewareService) { } private service: TabuMiddlewareService,
private socketDataService: SocketDataService) { }
ngOnInit(): void { ngOnInit(): void {
} }
...@@ -24,10 +26,12 @@ export class SelectGameComponent implements OnInit { ...@@ -24,10 +26,12 @@ export class SelectGameComponent implements OnInit {
} }
createGame(sessionName: string): void { createGame(sessionName: string): void {
sessionName = sessionName.toLowerCase();
this.service.addSession({spielname: sessionName}).then(value => { this.service.addSession({spielname: sessionName}).then(value => {
console.log(value); console.log(value);
const status = JSON.parse(value.status); const status = JSON.parse(value.status);
if (status) { if (status) {
this.socketDataService.connect(sessionName);
this.router.navigate([sessionName]); this.router.navigate([sessionName]);
} }
}).catch(reason => { }).catch(reason => {
...@@ -37,11 +41,12 @@ export class SelectGameComponent implements OnInit { ...@@ -37,11 +41,12 @@ export class SelectGameComponent implements OnInit {
} }
joinGame(sessionName: string): void { joinGame(sessionName: string): void {
this.socketDataService.connect(sessionName);
this.router.navigate([sessionName]); this.router.navigate([sessionName]);
} }
keyPressAlphaNumeric(event: KeyboardEvent): boolean { keyPressAlphaNumeric(event: KeyboardEvent): boolean {
if (/[a-z0-9]/.test(event.key)) { if (/[a-zA-Z0-9]/.test(event.key)) {
return true; return true;
} else { } else {
event.preventDefault(); event.preventDefault();
...@@ -50,6 +55,7 @@ export class SelectGameComponent implements OnInit { ...@@ -50,6 +55,7 @@ export class SelectGameComponent implements OnInit {
} }
enter(sessionName: string): void{ enter(sessionName: string): void{
sessionName = sessionName.toLowerCase();
if (!this.buttonCreateGameDisabled){ if (!this.buttonCreateGameDisabled){
this.createGame(sessionName); this.createGame(sessionName);
} }
...@@ -59,13 +65,13 @@ export class SelectGameComponent implements OnInit { ...@@ -59,13 +65,13 @@ export class SelectGameComponent implements OnInit {
} }
checkSpielname(sessionName: string): void { checkSpielname(sessionName: string): void {
sessionName = sessionName.toLowerCase();
if (sessionName.length === 0) { if (sessionName.length === 0) {
this.buttonCreateGameDisabled = true; this.buttonCreateGameDisabled = true;
this.buttonJoinGameDisabled = true; this.buttonJoinGameDisabled = true;
return; return;
} else { } else {
this.service.isSession({'spielname': sessionName}).then(value => { this.service.isSession({'spielname': sessionName}).then(value => {
console.log('Response: ', value.status);
const status = JSON.parse(value.status); const status = JSON.parse(value.status);
if (status) { if (status) {
this.buttonCreateGameDisabled = true; this.buttonCreateGameDisabled = true;
......
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