Merge remote-tracking branch 'origin/master'

src/app/game/game.component.html

-<div style="text-align: center; margin-left: 15em; margin-right: 15em; margin-top: 5em;">
-  <div id="app"></div>
+<div class="TimerLeft" style="margin-top: 10px; margin-right: 48px; margin-left: auto">
+  <mat-progress-spinner class = "white" color="primary" mode="determinate" value={{timeLeft}} aria-label="Rating">
+
+  </mat-progress-spinner>
+  <mat-card-content class = "timer">{{timeRemaining}}</mat-card-content>
+</div>
+<div style="text-align: center; margin-left: 15em; margin-right: 15em; margin-top: 2em;">
+
   <mat-card>
-    <h1>
+    <mat-card-title>
       {{cardInfo.solution}}
-    </h1>
+    </mat-card-title>
   </mat-card>
 
   <br>
@@ -38,11 +44,9 @@
   <button mat-raised-button color="warn" (click)="wrongAnswer()">Tabu &#10008;</button>
   <br>
   <br>
-  <br>
   <mat-card class="transparent">
     <mat-card-title>Spielstand</mat-card-title>
     <mat-card-content>
-      <br>
       <table>
         <tr>
           <th>Team rot</th>

src/app/game/game.component.scss

@@ -8,63 +8,23 @@ table {
   opacity: 0.9;
 }
 
+.white{
+  background-color: white;
+
+}
+
+.timer{
+  position:relative;
+  top: -60px;
+  left: 35px;
+  font-size: x-large;
+  font-weight: bold;
+}
+.FloatLeftAndCenterElement{width:100%;}
+.TimerLeft{ top: -150px; float:right;width:100px;}
 body {
   font-family: sans-serif;
   display: grid;
   height: 100vh;
   place-items: center;
 }
-
-.base-timer {
-  position: relative;
-  width: 300px;
-  height: 300px;
-}
-
-.base-timer__svg {
-  transform: scaleX(-1);
-}
-
-.base-timer__circle {
-  fill: none;
-  stroke: none;
-}
-
-.base-timer__path-elapsed {
-  stroke-width: 7px;
-  stroke: grey;
-}
-
-.base-timer__path-remaining {
-  stroke-width: 7px;
-  stroke-linecap: round;
-  transform: rotate(90deg);
-  transform-origin: center;
-  transition: 1s linear all;
-  fill-rule: nonzero;
-  stroke: currentColor;
-}
-
-.base-timer__path-remaining.green {
-  color: rgb(65, 184, 131);
-}
-
-.base-timer__path-remaining.orange {
-  color: orange;
-}
-
-.base-timer__path-remaining.red {
-  color: red;
-}
-
-.base-timer__label {
-  position: absolute;
-  width: 300px;
-  height: 300px;
-  top: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 48px;
-}
-

src/app/game/game.component.ts

@@ -15,6 +15,11 @@ export class GameComponent implements OnInit {
   sessionName = '';
   isWatchdog = false;
   isExplainer = false;
+  TIME_LIMIT = 100;
+  timePassed = 0;
+  timeRemaining = 60;
+  timerInterval = 0;
+  timeLeft = this.TIME_LIMIT;
   cardInfo: CardInfo = {
     cardID: -1,
     solution: '',
@@ -67,6 +72,27 @@ export class GameComponent implements OnInit {
       this.team = String(params.get('team'));
       this.newCard();
     });
+    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);
   }
 
   rightAnswer(): void{

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);
   }
 }