Anzeige wie viele Spieler in einem Raum sind und wie viele Spieler welchem Team beigetreten sind

package.json

 {
-  "name": "tabu",
-  "version": "0.0.0",
+  "name": "tabooh",
+  "version": "2.2",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

src/app/app.module.ts

@@ -31,6 +31,7 @@ import { RoundHistoryComponent } from './round-history/round-history.component';
 import {MatTableModule} from '@angular/material/table';
 import {MatTreeModule} from '@angular/material/tree';
 import {ViewModus} from './dao/viewModus';
+import {MatBadgeModule} from '@angular/material/badge';
 
 @NgModule({
   declarations: [
@@ -64,6 +65,7 @@ import {ViewModus} from './dao/viewModus';
     MatTooltipModule,
     MatTableModule,
     MatTreeModule,
+    MatBadgeModule
   ],
   providers: [
     IsAllowedToPlay,

src/app/dao/socketDataService.ts

@@ -97,4 +97,20 @@ export class SocketDataService {
       });
     });
   }
+
+  getSessionPlayers(sessionName: string): Observable<any> {
+    if (!this.isConnected) {
+      this.connect(sessionName);
+    }
+    this.sessionName = sessionName;
+    return new Observable(observer => {
+      this.socket.on(this.sessionName + ':sessionPlayers', (res: any) => {
+        observer.next(res);
+      });
+    });
+  }
+
+  updateSessionPlayers(sessionName: string, team: number, action: number): void {
+    this.socket.emit('sessionPlayers', {sessionName, team, newAction: action});
+  }
 }

src/app/game/game.component.ts

@@ -134,8 +134,8 @@ export class GameComponent implements OnInit, OnDestroy {
     this.timerInterval = setInterval(() => {
       this.timePassed = this.timePassed += 1;
       this.timeLeft = (this.TIME_LIMIT - this.timePassed);
-      if (this.timeLeft === 0) {
-        // this.onTimesUp();
+      if (this.timeLeft === -2) {
+        this.onTimesUp();
       }
     }, 593);
   }

src/app/guesser/guesser.component.ts

@@ -85,8 +85,8 @@ export class GuesserComponent implements OnInit, OnDestroy {
     this.timerInterval = setInterval(() => {
       this.timePassed = this.timePassed += 1;
       this.timeLeft = (this.TIME_LIMIT - this.timePassed);
-      if (this.timeLeft === 0) {
-        //this.onTimesUp();
+      if (this.timeLeft === -2) {
+        this.onTimesUp();
       }
     }, 593);
   }

src/app/impressum/impressum.component.html

@@ -63,8 +63,8 @@
 <br>
 <div data-aos="zoom-out-right" data-aos-duration="250">
   <mat-card class="transparent">
-    <mat-card-subtitle>Tabooh-Version: 2.1</mat-card-subtitle>
-    <mat-card-subtitle>Zuletzt geändert am: 09.04.2021</mat-card-subtitle>
+    <mat-card-subtitle>Tabooh-Version: 2.2</mat-card-subtitle>
+    <mat-card-subtitle>Zuletzt geändert am: 11.04.2021</mat-card-subtitle>
     <mat-card-content>
       <button mat-raised-button color="primary" (click)="goToStartpage()">Zur Startseite</button>
     </mat-card-content>

src/app/overview/overview.component.html

@@ -21,6 +21,7 @@
         <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 *ngIf="view === 'mobileView'" class="peopleInSessionRight" matBadge="{{totalPlayers}}" matBadgeSize="small" matBadgeColor="primary" aria-hidden="false" aria-label="home icon blue">people</mat-icon>
       </div>
       <br *ngIf="view === 'mobileView'">
       <br *ngIf="view === 'mobileView'">
@@ -29,16 +30,17 @@
           <mat-icon color = "white" aria-hidden="false">autorenew</mat-icon>
         </button>
       </div>
+      <mat-icon *ngIf="view !== 'mobileView'" class="peopleInSessionRight" matBadge="{{totalPlayers}}" matBadgeSize="small" matBadgeColor="primary" aria-hidden="false" aria-label="home icon blue">people</mat-icon>
       <div class="CenterText">
         <h2 *ngIf="view === 'mobileView'" class="textMobileView">{{membership}}</h2>
         <h2 *ngIf="view !== 'mobileView'">{{membership}}</h2>
       </div>
     </div>
     <button mat-raised-button class = "{{red}}" (click)="joinTeam('red')">
-      <mat-icon color = "warn" aria-hidden="false" aria-label="home icon red">home</mat-icon>
+      <mat-icon matBadge="{{redPlayers}}" matBadgeSize="small" matBadgeColor="primary" color = "warn" aria-hidden="false" aria-label="home icon red" >home</mat-icon>
     </button>
     <button mat-raised-button class = "{{blue}}" (click)="joinTeam('blue')">
-      <mat-icon style="color: darkblue" aria-hidden="false" aria-label="home icon blue">home</mat-icon>
+      <mat-icon style="color: darkblue" matBadge="{{bluePlayers}}" matBadgeSize="small" aria-hidden="false" aria-label="home icon blue">home</mat-icon>
     </button>
   </mat-card>
   <br>

src/app/overview/overview.component.scss

@@ -14,11 +14,13 @@ th{
 
 .blue{
   margin: 5px;
+  padding-top: 2px;
   background-color: rgba(0,0,139,0.5);
 }
 
 .red{
   margin: 5px;
+  padding-top: 2px;
   background-color: rgba(200, 0, 0, 0.3);
 }
 
@@ -29,16 +31,26 @@ th{
 
 .redfont{
   margin: 5px;
+  padding-top: 2px;
   color: rgba(200, 0, 0);
 }
 
 .choose{
   margin: 5px;
+  padding-top: 2px;
   cursor: pointer;
 }
 
 .FloatLeftAndCenterElement{width:100%;}
+
+.spaceBetween {
+  display: flex;
+  justify-content: space-between;
+  align-content: center;
+  align-items: center;
+}
 .newStartButtonLeft{float:left;width:100px;}
+.peopleInSessionRight{float:right; margin-top: 4px}
 .CenterText{margin:0 auto;width:250px;}
 
 .spinner-wrapper {
@@ -62,3 +74,7 @@ th{
 .textMobileView {
   display: inline;
 }
+
+.peopleRight {
+  float: right;
+}

src/app/overview/overview.component.ts

@@ -22,12 +22,17 @@ export class OverviewComponent implements OnInit, OnDestroy {
   subNewRound: any;
   subEndRound: any;
   subHistoryChanged: any;
+  subSessionPlayers: any;
   wantToBeExplainer = false;
   isActiveRound = false;
   red = 'choose';
   blue = 'choose';
+  totalPlayers = 1;
+  redPlayers = 0;
+  bluePlayers = 0;
   nextTeam = 'Blau';
   team = '';
+  teamNumber = 0;
   buttonNewGameDisabled = true;
   buttonNextRoundDisabled = true;
   sessionName = '';
@@ -68,6 +73,7 @@ export class OverviewComponent implements OnInit, OnDestroy {
     this.activatedRoute.paramMap.subscribe(params => {
       this.sessionName = String(params.get('sessionName')).toLowerCase();
       this.team = String(params.get('team'));
+      this.teamToTeamNumber(this.team);
       this.getSocketData();
       this.service.isSession({spielname: this.sessionName}).then(value => {
         if (!JSON.parse(value.status)) {
@@ -124,6 +130,15 @@ export class OverviewComponent implements OnInit, OnDestroy {
           }
         }
       });
+    this.subSessionPlayers = this.socketDataService.getSessionPlayers(this.sessionName)
+      .pipe(takeUntil(this.ngUnsubscribe)).subscribe(data => {
+        if (data.hasOwnProperty('total')) {
+          this.totalPlayers = data.total;
+          this.redPlayers = data.red;
+          this.bluePlayers = data.blue;
+        }
+      });
+    this.socketDataService.updateSessionPlayers(this.sessionName, this.teamNumber, 1);
   }
 
   selectTeam(): void {
@@ -165,7 +180,7 @@ export class OverviewComponent implements OnInit, OnDestroy {
         const status = JSON.parse(value.status);
         if (status) {
           this.getGameStatus();
-          const audio = "../../../assets/sounds/ui_refresh-feed.ogg";
+          const audio = '../../../assets/sounds/ui_refresh-feed.ogg';
           this.playAudio(audio);
         }
       }).catch(reason => console.log(reason));
@@ -187,7 +202,7 @@ export class OverviewComponent implements OnInit, OnDestroy {
         this.isAllowedToPlay.role = 'explainer';
         this.router.navigate([this.sessionName + '/' + this.team + '/explainer', ]);
         this.wantToBeExplainer = true;
-        const audio = "../../../assets/sounds/state-change_confirm-up.ogg";
+        const audio = '../../../assets/sounds/state-change_confirm-up.ogg';
         this.playAudio(audio);
       });
     });
@@ -195,16 +210,29 @@ export class OverviewComponent implements OnInit, OnDestroy {
 
   joinTeam(team: string): void {
     this.team = team;
+    this.teamToTeamNumber(this.team);
     this.unsubscribeAll();
     this.location.replaceState(this.sessionName + '/' + team);
     this.selectTeam();
     this.canStartGame();
     this.unsubscribeAll();
     this.getSocketData();
-    const audio = "../../../assets/sounds/ui_unlock.ogg";
+    const audio = '../../../assets/sounds/ui_unlock.ogg';
     this.playAudio(audio);
   }
 
+  teamToTeamNumber(team: string): void {
+    if (team === 'red') {
+      this.teamNumber = 1;
+    }
+    if (team === 'blue') {
+      this.teamNumber = 2;
+    }
+    if (team === '') {
+      this.teamNumber = 0;
+    }
+  }
+
   getGameStatus(): void {
     this.service.getGamestatus({spielname: this.sessionName}).then(value => {
       this.fillGameStatus(value);
@@ -269,7 +297,7 @@ export class OverviewComponent implements OnInit, OnDestroy {
     this.subEndRound.unsubscribe();
     this.subNewGame.unsubscribe();
     this.subHistoryChanged.unsubscribe();
-
+    this.subSessionPlayers.unsubscribe();
     this.ngUnsubscribe.next();
     this.ngUnsubscribe.complete();
   }