Add and Remove points

angular.json

@@ -34,9 +34,7 @@
               "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
               "src/styles.scss"
             ],
-            "scripts": [
-              "./src/assets/JavaScript/Timer.js"
-            ]
+            "scripts": []
           },
           "configurations": {
             "production": {

src/app/dao/TabuMiddlewareService.ts

@@ -45,7 +45,7 @@ export class TabuMiddlewareService {
   }
 
   addPoint(req: any): Promise<any> {
-    console.log(req);
+    console.log('TestAddPoint: ', req);
     return this.request('POST', `${environment.tabuMiddlewareURL}addPoint`, req);
   }
 

src/app/game/game.component.ts

@@ -42,7 +42,7 @@ export class GameComponent implements OnInit {
   ngOnInit(): void {
     this.activatedRoute.paramMap.subscribe(params => {
       this.sessionName = String(params.get('sessionName'));
-      this.service.getGamestatus({'spielname': this.sessionName}).then(value => {
+      this.service.getGamestatus({spielname: this.sessionName}).then(value => {
         const status = JSON.parse(value.status);
         if (status) {
           this.gameStatus.sessionID = JSON.parse(value.sessionID);
@@ -61,12 +61,25 @@ export class GameComponent implements OnInit {
 
   rightAnswer(): void{
     this.newCard();
-    this.service.addPoint({spielname: this.sessionName, team: this.team});
+    this.service.addPoint
+    ({
+      spielname: this.sessionName, team: this.team, red: this.gameStatus.red, blue: this.gameStatus.blue}).then(value => {
+      this.gameStatus.red = JSON.parse(value.red);
+      this.gameStatus.blue = JSON.parse(value.blue);
+    });
+    console.log(this.gameStatus);
   }
 
   wrongAnswer(): void{
     this.newCard();
-    this.service.removePoint({spielname: this.sessionName, team: this.team});
+    this.service.removePoint
+    ({
+      spielname: this.sessionName, team: this.team, red: this.gameStatus.red, blue: this.gameStatus.blue
+    }).then(value => {
+      this.gameStatus.red = JSON.parse(value.red);
+      this.gameStatus.blue = JSON.parse(value.blue);
+    });
+    console.log(this.gameStatus);
   }
 
   newCard(): void{

src/app/guesser/guesser.component.html

 <div style="text-align: center; margin-left: 15em; margin-right: 15em; margin-top: 5em;">
   <mat-card class="transparent">
     <mat-card-title> Du musst raten!
-
+      <br>
+      <br>
+      <br>
       Spielstand</mat-card-title>
     <mat-card-content>
       <br>
@@ -17,10 +19,9 @@
       </table>
     </mat-card-content>
     <br>
-    <mat-progress-spinner color="primary" mode="determinate" value="value">
+    <mat-progress-spinner class = "center" color="primary" mode="determinate" value={{timeLeft}}>
     </mat-progress-spinner>
   </mat-card>
 </div>
-<div id="app"></div>
 
 

src/app/guesser/guesser.component.scss

@@ -2,56 +2,13 @@
   opacity: 0.9;
 }
 
-.base-timer {
-  position: relative;
-  width: 300px;
-  height: 300px;
+table{
+  width: 50%;
+  margin-left: auto;
+  margin-right: auto;
 }
 
-.base-timer__svg {
-  transform: scaleX(-1);
+.center{
+  margin-left: auto;
+  margin-right: auto;
 }
-
-.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/guesser/guesser.component.ts

@@ -3,8 +3,6 @@ import {ActivatedRoute} from '@angular/router';
 import {TabuMiddlewareService} from '../dao/TabuMiddlewareService';
 import {GameStatus} from '../interface/gameStatus';
 
-declare function testJS(): any;
-
 @Component({
   selector: 'app-guesser',
   templateUrl: './guesser.component.html',
@@ -12,6 +10,8 @@ declare function testJS(): any;
 })
 export class GuesserComponent implements OnInit {
   sessionName = '';
+  TIME_LIMIT = 20;
+  timeLeft = this.TIME_LIMIT;
   gameStatus: GameStatus = {
     sessionID: -1,
     red: 0,
@@ -26,7 +26,7 @@ export class GuesserComponent implements OnInit {
   ngOnInit(): void {
     this.activatedRoute.paramMap.subscribe(params => {
       this.sessionName = String(params.get('sessionName'));
-      this.service.getGamestatus({'spielname': this.sessionName}).then(value => {
+      this.service.getGamestatus({spielname: this.sessionName}).then(value => {
         const status = JSON.parse(value.status);
         if (status) {
           this.gameStatus.sessionID = JSON.parse(value.sessionID);
@@ -39,6 +39,5 @@ export class GuesserComponent implements OnInit {
         console.log(this.gameStatus);
       });
     });
-    testJS();
   }
 }

src/app/overview/overview.component.html

@@ -30,10 +30,10 @@
     <mat-card-actions>
       <br>
       <br>
-      <mat-card-title>Rot ist am Zug:</mat-card-title>
+      <mat-card-title>{{nextTeam}} ist am Zug:</mat-card-title>
       <br>
-      <button mat-raised-button color="primary">Nächste Runde</button>
-      <button mat-raised-button color="primary" (click)="startGame()">Neues Spiel starten</button>
+      <button [disabled]="buttonPlayDisabled" mat-raised-button color="primary">Nächste Runde</button>
+      <button [disabled]="buttonPlayDisabled" mat-raised-button color="primary" (click)="startGame()">Neues Spiel starten</button>
     </mat-card-actions>
   </mat-card>
 </div>

src/app/overview/overview.component.ts

@@ -9,7 +9,9 @@ import {GameStatus} from '../interface/gameStatus';
   styleUrls: ['./overview.component.scss']
 })
 export class OverviewComponent implements OnInit {
+  nextTeam = '';
   team = '';
+  buttonPlayDisabled = true;
   sessionName = '';
   membership = 'Wähle dein Team';
   gameStatus: GameStatus = {
@@ -32,9 +34,11 @@ export class OverviewComponent implements OnInit {
       console.log('Team:', this.team);
       if (this.team === 'red'){
         this.membership = 'Du gehörst zu Team rot!';
+        this.buttonPlayDisabled = false;
       }
       else if (this.team === 'blue'){
         this.membership = 'Du gehörst zu Team blau!';
+        this.buttonPlayDisabled = false;
       }
       else if (this.team === 'null'){
         this.membership = 'Wähle dein Team';
@@ -43,7 +47,13 @@ export class OverviewComponent implements OnInit {
         this.router.navigate(['error']);
         return;
       }
-      this.service.getGamestatus({'spielname': this.sessionName}).then(value => {
+      if (this.gameStatus.redTurn){
+        this.nextTeam = 'Rot';
+      }
+      else{
+        this.nextTeam = 'Blau';
+      }
+      this.service.getGamestatus({spielname: this.sessionName}).then(value => {
         const status = JSON.parse(value.status);
         if (status) {
           this.gameStatus.sessionID = JSON.parse(value.sessionID);
@@ -59,8 +69,7 @@ export class OverviewComponent implements OnInit {
   }
 
   startGame(): void {
-    if (this.team === 'red' || this.team === 'blue')
-    {
+    if (this.team === 'red' || this.team === 'blue') {
       this.router.navigate([this.router.url + '/watchdog']);
     }
   }

src/assets/JavaScript/Timer.js

-
-function testJS() {
-  // Credit: Mateusz Rybczonec
-
-  const FULL_DASH_ARRAY = 283;
-  const WARNING_THRESHOLD = 10;
-  const ALERT_THRESHOLD = 5;
-
-  const COLOR_CODES = {
-    info: {
-      color: "green"
-    },
-    warning: {
-      color: "orange",
-      threshold: WARNING_THRESHOLD
-    },
-    alert: {
-      color: "red",
-      threshold: ALERT_THRESHOLD
-    }
-  };
-
-  const TIME_LIMIT = 20;
-  let timePassed = 0;
-  let timeLeft = TIME_LIMIT;
-  let timerInterval = null;
-  let remainingPathColor = COLOR_CODES.info.color;
-
-  document.getElementById("app").innerHTML = `
-<div class="base-timer">
-  <svg class="base-timer__svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-    <g class="base-timer__circle">
-      <circle class="base-timer__path-elapsed" cx="50" cy="50" r="45"></circle>
-      <path
-        id="base-timer-path-remaining"
-        stroke-dasharray="283"
-        class="base-timer__path-remaining ${remainingPathColor}"
-        d="
-          M 50, 50
-          m -45, 0
-          a 45,45 0 1,0 90,0
-          a 45,45 0 1,0 -90,0
-        "
-      ></path>
-    </g>
-  </svg>
-  <span id="base-timer-label" class="base-timer__label">${formatTime(
-    timeLeft
-  )}</span>
-</div>
-`;
-
-  startTimer();
-
-  function onTimesUp() {
-    clearInterval(timerInterval);
-  }
-
-  function startTimer() {
-    timerInterval = setInterval(() => {
-      timePassed = timePassed += 1;
-      timeLeft = TIME_LIMIT - timePassed;
-      document.getElementById("base-timer-label").innerHTML = formatTime(
-        timeLeft
-      );
-      setCircleDasharray();
-      setRemainingPathColor(timeLeft);
-
-      if (timeLeft === 0) {
-        onTimesUp();
-      }
-    }, 1000);
-  }
-
-  function formatTime(time) {
-    const minutes = Math.floor(time / 60);
-    let seconds = time % 60;
-
-    if (seconds < 10) {
-      seconds = `0${seconds}`;
-    }
-
-    return `${minutes}:${seconds}`;
-  }
-
-  function setRemainingPathColor(timeLeft) {
-    const { alert, warning, info } = COLOR_CODES;
-    if (timeLeft <= alert.threshold) {
-      document
-        .getElementById("base-timer-path-remaining")
-        .classList.remove(warning.color);
-      document
-        .getElementById("base-timer-path-remaining")
-        .classList.add(alert.color);
-    } else if (timeLeft <= warning.threshold) {
-      document
-        .getElementById("base-timer-path-remaining")
-        .classList.remove(info.color);
-      document
-        .getElementById("base-timer-path-remaining")
-        .classList.add(warning.color);
-    }
-  }
-
-  function calculateTimeFraction() {
-    const rawTimeFraction = timeLeft / TIME_LIMIT;
-    return rawTimeFraction - (1 / TIME_LIMIT) * (1 - rawTimeFraction);
-  }
-
-  function setCircleDasharray() {
-    const circleDasharray = `${(
-      calculateTimeFraction() * FULL_DASH_ARRAY
-    ).toFixed(0)} 283`;
-    document
-      .getElementById("base-timer-path-remaining")
-      .setAttribute("stroke-dasharray", circleDasharray);
-  }
-}