Commit 2958b95e authored by isabell.Heider's avatar isabell.Heider
Browse files

Added Timer for guesser

parent fbd9fe2b

src/app/guesser/guesser.component.html

+5 −3
Original line number Diff line number Diff line
@@ -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

+18 −0
Original line number Diff line number Diff line
@@ -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

+29 −4
Original line number Diff line number Diff line 
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);

  }

}