Added Timer for game

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{