Update

src/app/app-routing.module.ts

@@ -3,12 +3,17 @@ import { Routes, RouterModule } from '@angular/router';
 import {OverviewComponent} from './overview/overview.component';
 import {SelectGameComponent} from './select-game/select-game.component';
 import {ErrorComponent} from './error/error.component';
+import {GameComponent} from './game/game.component';
 
 const routes: Routes = [
   {
     path: 'overview',
     component: OverviewComponent,
   },
+  {
+    path: 'game',
+    component: GameComponent,
+  },
   {
     path: '',
     component: SelectGameComponent,

src/app/app.module.ts

@@ -17,6 +17,7 @@ import {MatCardModule} from '@angular/material/card';
 import { OverviewComponent } from './overview/overview.component';
 import { ErrorComponent } from './error/error.component';
 import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
+import { GameComponent } from './game/game.component';
 
 @NgModule({
   declarations: [
@@ -26,6 +27,7 @@ import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
     SelectGameComponent,
     OverviewComponent,
     ErrorComponent,
+    GameComponent,
   ],
   imports: [
     HttpClientModule,

src/app/error/error.component.html

 <div style="text-align: center; margin-left: 15em; margin-right: 15em; margin-top: 5em;">
-  <h3>
-    Leider konnte die Seite nicht erreicht werden, bitte überprüfen Sie den Link oder kehren Sie auf die <a href="router.navigate(['/overview'])">Startseite</a>  zurück
-  </h3>
+  <mat-card class="transparent">
+    <h3>
+      Leider konnte die Seite nicht erreicht werden, bitte überprüfen Sie den Link oder kehren Sie auf die <a (click)="toStartpage()">Startseite</a>  zurück
+    </h3>
+  </mat-card>
   <br>
   <mat-progress-spinner color="primary" mode="determinate" value="value">
   </mat-progress-spinner>

src/app/error/error.component.scss

+.transparent {
+  opacity: 0.9;
+}

src/app/error/error.component.ts

 import { Component, OnInit } from '@angular/core';
+import {Router} from '@angular/router';
 
 @Component({
   selector: 'app-error',
@@ -7,8 +8,12 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ErrorComponent implements OnInit {
 
-  constructor() { }
+  constructor(private router: Router) { }
 
   ngOnInit(): void {
   }
+
+  toStartpage(): void {
+    this.router.navigate(['']);
+  }
 }

src/app/game/game.component.html

+<div style="text-align: center; margin-left: 15em; margin-right: 15em; margin-top: 5em;">
+  <p>Punktestand: {{points}}</p>
+  <mat-card>
+    <h1>
+      {{word}}
+    </h1>
+  </mat-card>
+
+  <br>
+  <mat-card>
+    <h2>
+      {{forbidden1}}
+    </h2>
+  </mat-card>
+  <mat-card>
+    <h2>
+      {{forbidden2}}
+    </h2>
+  </mat-card>
+  <mat-card>
+    <h2>
+      {{forbidden3}}
+    </h2>
+  </mat-card>
+  <mat-card>
+    <h2>
+      {{forbidden4}}
+    </h2>
+  </mat-card>
+  <mat-card>
+    <h2>
+      {{forbidden5}}
+    </h2>
+  </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="warn" (click)="wrongAnswer()">Tabu &#10008;</button>
+</div>

src/app/game/game.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GameComponent } from './game.component';
+
+describe('GameComponent', () => {
+  let component: GameComponent;
+  let fixture: ComponentFixture<GameComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ GameComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GameComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/game/game.component.ts

+import { Component, OnInit } from '@angular/core';
+import {ProgressSpinnerMode} from '@angular/material/progress-spinner';
+@Component({
+  selector: 'app-game',
+  templateUrl: './game.component.html',
+  styleUrls: ['./game.component.scss']
+})
+export class GameComponent implements OnInit {
+
+  word = 'Hund';
+  forbidden1 = 'Haustier';
+  forbidden2 = 'Katze';
+  forbidden3 = 'Gassi';
+  forbidden4 = 'Leine';
+  forbidden5 = 'Welpe';
+  points = 0;
+
+  color = 'primary';
+  mode: ProgressSpinnerMode = 'determinate';
+  value = 50;
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+  rightAnswer(): void{
+    this.points += 1;
+  }
+
+  wrongAnswer(): void{
+    this.points -= 1;
+  }
+}

src/app/overview/overview.component.html

 <div style="text-align: center; margin-left: 15em; margin-right: 15em; margin-top: 5em;">
-  <h2>Du spielst in Team rot!</h2>
+  <mat-card class="transparent">
+    <h2>Du spielst in Team rot!</h2>
+  </mat-card>
   <br>
   <br>
   <br>
-  <mat-card>
+  <mat-card class="transparent">
     <mat-card-title>Spielstand</mat-card-title>
     <mat-card-content>
       <br>
-      <table style="align-self: center; align-content: center; align-items: center">
+      <table>
         <tr>
           <th>Team rot</th>
           <th>Team blau</th>
@@ -24,7 +26,7 @@
       <mat-card-title>Rot ist am Zug:</mat-card-title>
       <br>
       <button mat-raised-button color="primary">Nächste Runde</button>
-      <button mat-raised-button color="primary">Neues Spiel starten</button>
+      <button mat-raised-button color="primary" (click)="startGame()">Neues Spiel starten</button>
     </mat-card-actions>
   </mat-card>
 </div>

src/app/overview/overview.component.scss

 table {
   width: 50%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.transparent {
+  opacity: 0.9;
 }

src/app/overview/overview.component.ts

 import { Component, OnInit } from '@angular/core';
+import {Router} from '@angular/router';
 
 @Component({
   selector: 'app-overview',
@@ -7,9 +8,11 @@ import { Component, OnInit } from '@angular/core';
 })
 export class OverviewComponent implements OnInit {
 
-  constructor() { }
+  constructor(private router: Router) { }
 
   ngOnInit(): void {
   }
-
+  startGame(): void {
+    this.router.navigate(['/game']);
+  }
 }

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

@@ -19,7 +19,7 @@
     </mat-card-content>
     <mat-card-actions>
       <button mat-raised-button color="primary" (click)="getSpielSessions()">Spiel erstellen</button>
-      <button mat-raised-button color="primary" (click)="joinGame($event)">Spiel beitreten</button>
+      <button mat-raised-button color="primary" (click)="joinGame()">Spiel beitreten</button>
     </mat-card-actions>
   </mat-card>
 </div>

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

@@ -16,12 +16,12 @@ export class SelectGameComponent implements OnInit {
   }
 
   getSpielSessions(): any {
-    console.log('Start')
+    console.log('Start');
     const response = this.server.getSpielSessions();
     console.log('Response:', response);
   }
 
-  joinGame(event: any): void {
+  joinGame(): void {
     this.router.navigate(['/overview']);
   }
 }