Update

src/app/app-routing.module.ts

@@ -7,6 +7,10 @@ import {GameComponent} from './game/game.component';
 import {GuesserComponent} from './guesser/guesser.component';
 
 const routes: Routes = [
+  {
+    path: 'error',
+    component: ErrorComponent,
+  },
   {
     path: ':sessionName',
     component: OverviewComponent,
@@ -34,7 +38,7 @@ const routes: Routes = [
   {
     path: '**',
     component: ErrorComponent,
-  }
+  },
 ];
 
 @NgModule({

src/app/app.component.html

-<div fxLayout="column" fxFlexFill style="background-image: url(/assets/background.jpg)">
+<div fxLayout="column" fxFlexFill style="background-image: url(/assets/background.jpg); background-repeat: repeat;" >
   <app-header>
   </app-header>
   <div fxFlex>

src/app/game/game.component.html

 <div style="text-align: center; margin-left: 15em; margin-right: 15em; margin-top: 5em;">
-  <p>Punktestand: {{points}}</p>
   <div id="app"></div>
   <mat-card>
     <h1>
@@ -35,6 +34,23 @@
   </mat-card>
   <br>
   <button mat-raised-button color="primary" (click)="rightAnswer()">Richtig &#10004;</button>
-  <button mat-raised-button color="accent" style="margin: 40px">Überspringen &#187;</button>
+  <button mat-raised-button color="accent" style="margin: 40px" (click)="newCard()">Überspringen &#187;</button>
   <button mat-raised-button color="warn" (click)="wrongAnswer()">Tabu &#10008;</button>
+  <br>
+  <mat-card class="transparent">
+    <mat-card-title>Spielstand</mat-card-title>
+    <mat-card-content>
+      <br>
+      <table>
+        <tr>
+          <th>Team rot</th>
+          <th>Team blau</th>
+        </tr>
+        <tr>
+          <th>{{gameStatus.red}}</th>
+          <th>{{gameStatus.blue}}</th>
+        </tr>
+      </table>
+    </mat-card-content>
+  </mat-card>
 </div>

src/app/game/game.component.scss

+table {
+  width: 50%;
+  margin-left: auto;
+  margin-right: auto;
+}
 
+.transparent{
+  opacity: 0.9;
+}
 
 body {
   font-family: sans-serif;

src/app/game/game.component.ts

@@ -3,6 +3,8 @@ import {ProgressSpinnerMode} from '@angular/material/progress-spinner';
 import {CardInfo} from '../interface/cardInfo';
 import {TabuMiddlewareService} from '../dao/TabuMiddlewareService';
 import {ActivatedRoute} from '@angular/router';
+import {GameStatus} from '../interface/gameStatus';
+
 @Component({
   selector: 'app-game',
   templateUrl: './game.component.html',
@@ -20,7 +22,16 @@ export class GameComponent implements OnInit {
     tabu4: '',
     tabu5: ''
   };
-  points = 0;
+
+  gameStatus: GameStatus = {
+    sessionID: -1,
+    red: 0,
+    blue: 0,
+    redTurn: true,
+    activeExplainer: false,
+    activeWatchdog: false
+  };
+  team = '';
 
   color = 'primary';
   mode: ProgressSpinnerMode = 'determinate';
@@ -31,29 +42,48 @@ export class GameComponent implements OnInit {
   ngOnInit(): void {
     this.activatedRoute.paramMap.subscribe(params => {
       this.sessionName = String(params.get('sessionName'));
-      this.service.getS2C({spielname: this.sessionName}).then(value => {
-        console.log('Test1:', value);
+      this.service.getGamestatus({'spielname': this.sessionName}).then(value => {
         const status = JSON.parse(value.status);
         if (status) {
-          console.log('Test2:', value);
-          this.cardInfo.cardID = JSON.parse(value.cardID);
-          this.cardInfo.solution = value.solution;
-          this.cardInfo.tabu1 = value.tabu1;
-          this.cardInfo.tabu2 = value.tabu2;
-          this.cardInfo.tabu3 = value.tabu3;
-          this.cardInfo.tabu4 = value.tabu4;
-          this.cardInfo.tabu5 = value.tabu5;
+          this.gameStatus.sessionID = JSON.parse(value.sessionID);
+          this.gameStatus.red = JSON.parse(value.red);
+          this.gameStatus.blue = JSON.parse(value.blue);
+          this.gameStatus.redTurn = JSON.parse(value.redTurn);
+          this.gameStatus.activeExplainer = JSON.parse(value.activeExplainer);
+          this.gameStatus.activeWatchdog = JSON.parse(value.activeWatchdog);
         }
-        console.log(this.cardInfo);
-      }).catch(reason => console.log(reason));
+        console.log(this.gameStatus);
+      }),
+      this.team = String(params.get('team'));
+      this.newCard();
     });
   }
 
   rightAnswer(): void{
-    this.points += 1;
+    this.newCard();
+    this.service.addPoint({spielname: this.sessionName, team: this.team});
   }
 
   wrongAnswer(): void{
-    this.points -= 1;
+    this.newCard();
+    this.service.removePoint({spielname: this.sessionName, team: this.team});
+  }
+
+  newCard(): void{
+    this.service.getS2C({spielname: this.sessionName}).then(value => {
+      console.log('Test1:', value);
+      const status = JSON.parse(value.status);
+      if (status) {
+        console.log('Test2:', value);
+        this.cardInfo.cardID = JSON.parse(value.cardID);
+        this.cardInfo.solution = value.solution;
+        this.cardInfo.tabu1 = value.tabu1;
+        this.cardInfo.tabu2 = value.tabu2;
+        this.cardInfo.tabu3 = value.tabu3;
+        this.cardInfo.tabu4 = value.tabu4;
+        this.cardInfo.tabu5 = value.tabu5;
+      }
+      console.log(this.cardInfo);
+    }).catch(reason => console.log(reason));
   }
 }

src/app/guesser/guesser.component.html

 <div style="text-align: center; margin-left: 15em; margin-right: 15em; margin-top: 5em;">
   <mat-card class="transparent">
-    <h1>
-      Du musst raten!
-    </h1>
-    <p>Punktestand: {{points}}</p>
+    <mat-card-title> Du musst raten!
+
+      Spielstand</mat-card-title>
+    <mat-card-content>
+      <br>
+      <table>
+        <tr>
+          <th>Team rot</th>
+          <th>Team blau</th>
+        </tr>
+        <tr>
+          <th>{{gameStatus.red}}</th>
+          <th>{{gameStatus.blue}}</th>
+        </tr>
+      </table>
+    </mat-card-content>
+    <br>
+    <mat-progress-spinner color="primary" mode="determinate" value="value">
+    </mat-progress-spinner>
   </mat-card>
-  <br>
-  <mat-progress-spinner color="primary" mode="determinate" value="value">
-  </mat-progress-spinner>
 </div>
 <div id="app"></div>
 

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';
 
 declare function testJS(): any;
 
@@ -9,11 +11,34 @@ declare function testJS(): any;
   styleUrls: ['./guesser.component.scss']
 })
 export class GuesserComponent implements OnInit {
-  points = 0;
+  sessionName = '';
+  gameStatus: GameStatus = {
+    sessionID: -1,
+    red: 0,
+    blue: 0,
+    redTurn: true,
+    activeExplainer: false,
+    activeWatchdog: false
+  };
 
-  constructor() { }
+  constructor(private activatedRoute: ActivatedRoute, private service: TabuMiddlewareService) { }
 
   ngOnInit(): void {
+    this.activatedRoute.paramMap.subscribe(params => {
+      this.sessionName = String(params.get('sessionName'));
+      this.service.getGamestatus({'spielname': this.sessionName}).then(value => {
+        const status = JSON.parse(value.status);
+        if (status) {
+          this.gameStatus.sessionID = JSON.parse(value.sessionID);
+          this.gameStatus.red = JSON.parse(value.red);
+          this.gameStatus.blue = JSON.parse(value.blue);
+          this.gameStatus.redTurn = JSON.parse(value.redTurn);
+          this.gameStatus.activeExplainer = JSON.parse(value.activeExplainer);
+          this.gameStatus.activeWatchdog = JSON.parse(value.activeWatchdog);
+        }
+        console.log(this.gameStatus);
+      });
+    });
     testJS();
   }
 }

src/app/overview/overview.component.html

 <div style="text-align: center; margin-left: 15em; margin-right: 15em; margin-top: 5em;">
   <mat-card class="transparent">
-    <h2>Wähle dein Team</h2>
-    <mat-icon color = "disabled" aria-hidden="false" aria-label="home icon blue">home</mat-icon>
-    Team grau <mat-slide-toggle color = "warn"> Team rot</mat-slide-toggle>
-    <mat-icon color = "warn" aria-hidden="false" aria-label="home icon red">home</mat-icon>
+    <h2>{{membership}}</h2>
+    <button class = "red" (click)="joinTeam('red')">
+      <mat-icon color = "warn" aria-hidden="false" aria-label="home icon red">home</mat-icon>
+    </button>
+    <button class = "blue" (click)="joinTeam('blue')">
+      <mat-icon style="color: darkblue" aria-hidden="false" aria-label="home icon blue">home</mat-icon>
+    </button>
+
   </mat-card>
   <br>
   <br>
@@ -18,8 +22,8 @@
           <th>Team blau</th>
         </tr>
         <tr>
-          <th>0</th>
-          <th>0</th>
+          <th>{{gameStatus.red}}</th>
+          <th>{{gameStatus.blue}}</th>
         </tr>
       </table>
     </mat-card-content>

src/app/overview/overview.component.scss

@@ -7,3 +7,21 @@ table {
 .transparent {
   opacity: 0.9;
 }
+
+.blue{
+  border-color: darkblue;
+  margin: 5px;
+  cursor: pointer;
+}
+
+.red{
+  border-color: red;
+  margin: 5px;
+  cursor: pointer;
+}
+
+.button:active
+{
+  background-color:darkred;
+}
+

src/app/overview/overview.component.ts

@@ -9,8 +9,9 @@ import {GameStatus} from '../interface/gameStatus';
   styleUrls: ['./overview.component.scss']
 })
 export class OverviewComponent implements OnInit {
-
+  team = '';
   sessionName = '';
+  membership = 'Wähle dein Team';
   gameStatus: GameStatus = {
     sessionID: -1,
     red: 0,
@@ -27,6 +28,21 @@ export class OverviewComponent implements OnInit {
   ngOnInit(): void {
     this.activatedRoute.paramMap.subscribe(params => {
       this.sessionName = String(params.get('sessionName'));
+      this.team = String(params.get('team'));
+      console.log('Team:', this.team);
+      if (this.team === 'red'){
+        this.membership = 'Du gehörst zu Team rot!';
+      }
+      else if (this.team === 'blue'){
+        this.membership = 'Du gehörst zu Team blau!';
+      }
+      else if (this.team === 'null'){
+        this.membership = 'Wähle dein Team';
+      }
+      else {
+        this.router.navigate(['error']);
+        return;
+      }
       this.service.getGamestatus({'spielname': this.sessionName}).then(value => {
         const status = JSON.parse(value.status);
         if (status) {
@@ -43,6 +59,13 @@ export class OverviewComponent implements OnInit {
   }
 
   startGame(): void {
-    this.router.navigate([this.router.url + '/red/watchdog']);
+    if (this.team === 'red' || this.team === 'blue')
+    {
+      this.router.navigate([this.router.url + '/watchdog']);
+    }
+  }
+  joinTeam(team: string): void {
+    this.team = team;
+    this.router.navigate([this.sessionName + '/' + team]);
   }
 }

src/app/select-game/select-game.component.html

@@ -13,7 +13,7 @@
       <form>
         <mat-form-field>
           <mat-label>Spielname</mat-label>
-          <input #sessionName type="text" matInput (keyup)="checkSpielname(sessionName.value)" (keypress)="keyPressAlphaNumeric($event)">
+          <input #sessionName type="text" matInput (keyup)="checkSpielname(sessionName.value)" (keypress)="keyPressAlphaNumeric($event)" (keyup.enter)="enter(sessionName.value)">
         </mat-form-field>
       </form>
     </mat-card-content>

src/app/select-game/select-game.component.ts

@@ -49,6 +49,15 @@ export class SelectGameComponent implements OnInit {
     }
   }
 
+  enter(sessionName: string): void{
+    if (!this.buttonCreateGameDisabled){
+      this.createGame(sessionName);
+    }
+    if (!this.buttonJoinGameDisabled){
+      this.joinGame(sessionName);
+    }
+  }
+
   checkSpielname(sessionName: string): void {
     if (sessionName.length === 0) {
       this.buttonCreateGameDisabled = true;

src/environments/environment.ts

@@ -4,8 +4,8 @@
 
 export const environment = {
   production: false,
-  tabuMiddlewareURL: 'http://localhost:8080/'
-  //tabuMiddlewareURL: 'http://tabu-middleware.willers.digital/'
+  // tabuMiddlewareURL: 'http://localhost:8080/'
+  tabuMiddlewareURL: 'http://tabu-middleware.willers.digital/'
 };
 
 /*