Commit 7f3e6e0e authored by isabell.Heider's avatar isabell.Heider
Browse files

Added Timer for game

parent 2958b95e

src/app/game/game.component.html

+10 −6
Original line number Diff line number Diff line 
<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

+14 −54
Original line number Diff line number Diff line
@@ -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

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