Added Timer for guesser

src/app/guesser/guesser.component.html

@@ -13,14 +13,16 @@
           <th>Team blau</th>
         </tr>
         <tr>
-          <th>{{gameStatus.red}}</th>
-          <th>{{gameStatus.blue}}</th>
+          <th class = "red">{{gameStatus.red}}</th>
+          <th class = "blue">{{gameStatus.blue}}</th>
         </tr>
       </table>
     </mat-card-content>
     <br>
-    <mat-progress-spinner class = "center" color="primary" mode="determinate" value={{timeLeft}}>
+    <mat-progress-spinner class = "center" color="primary" mode="determinate" value={{timeLeft}} aria-label="Rating">
+
     </mat-progress-spinner>
+    <mat-card-content class = "timer">{{timeRemaining}}</mat-card-content>
   </mat-card>
 </div>
 

src/app/guesser/guesser.component.scss

@@ -12,3 +12,21 @@ table{
   margin-left: auto;
   margin-right: auto;
 }
+
+.blue{
+  margin: 5px;
+  color: rgba(0,0,139);
+}
+
+.red{
+  margin: 5px;
+  color: rgba(200, 0, 0);
+}
+
+.timer{
+  position:relative;
+  top: -60px;
+  left: 0px;
+  font-size: medium;
+  font-weight: bold;
+}

src/app/guesser/guesser.component.ts

 import { Component, OnInit } from '@angular/core';
-import {ActivatedRoute} from '@angular/router';
 import {TabuMiddlewareService} from '../dao/TabuMiddlewareService';
 import {GameStatus} from '../interface/gameStatus';
-
+import {ActivatedRoute, Router} from '@angular/router';
 @Component({
   selector: 'app-guesser',
   templateUrl: './guesser.component.html',
@@ -10,7 +9,10 @@ import {GameStatus} from '../interface/gameStatus';
 })
 export class GuesserComponent implements OnInit {
   sessionName = '';
-  TIME_LIMIT = 20;
+  TIME_LIMIT = 100;
+  timePassed = 0;
+  timeRemaining = 60;
+  timerInterval = 0;
   timeLeft = this.TIME_LIMIT;
   gameStatus: GameStatus = {
     sessionID: -1,
@@ -20,12 +22,14 @@ export class GuesserComponent implements OnInit {
     activeExplainer: false,
     activeWatchdog: false
   };
+  team = '';
 
-  constructor(private activatedRoute: ActivatedRoute, private service: TabuMiddlewareService) { }
+  constructor(private router: Router, private activatedRoute: ActivatedRoute, private service: TabuMiddlewareService) { }
 
   ngOnInit(): void {
     this.activatedRoute.paramMap.subscribe(params => {
       this.sessionName = String(params.get('sessionName'));
+      this.team = String(params.get('team'));
       this.service.getGamestatus({spielname: this.sessionName}).then(value => {
         const status = JSON.parse(value.status);
         if (status) {
@@ -39,5 +43,26 @@ export class GuesserComponent implements OnInit {
         console.log(this.gameStatus);
       });
     });
+    this.startTimer();
+  }
+
+  onTimesUp(): void{
+    this.router.navigate([this.sessionName + '/' + this.team]);
+  }
+
+  startTimer(): void {
+    this.startCountdown();
+    this.timerInterval = setInterval(() => {
+      this.timePassed = this.timePassed += 1;
+      this.timeLeft = (this.TIME_LIMIT - this.timePassed);
+      if (this.timeLeft === 0) {
+        this.onTimesUp();
+      }
+    }, 593);
+  }
+  startCountdown(): void {
+    setInterval(() => {
+      this.timeRemaining = this.timeRemaining -= 1;
+    }, 1000);
   }
 }