Change Screen Resolution / Fix Button Spam Bug

src/app/app.component.scss

@@ -11,6 +11,13 @@ html, body {
   margin-top: 5em;
 }
 
+.tabletView {
+  text-align: center;
+  margin-left: 5em;
+  margin-right: 5em;
+  margin-top: 5em;
+}
+
 .mobileView {
   text-align: center;
   margin-left: 2em;

src/app/app.component.ts

-import {Component, OnInit} from '@angular/core';
+import {Component, HostListener, OnInit} from '@angular/core';
 
 @Component({
   selector: 'app-root',
@@ -8,12 +8,24 @@ import {Component, OnInit} from '@angular/core';
 export class AppComponent implements OnInit {
   title = 'Tabu';
   view = 'desktopView';
-  isMobileResolution = false;
 
   ngOnInit(): void {
-    this.isMobileResolution = window.innerWidth < 768;
-    if (this.isMobileResolution) {
+    const width = window.innerWidth;
+    this.setView(width);
+  }
+
+  @HostListener('window:resize', ['$event'])
+  onResize($event: any): any {
+    console.log('RESIZE');
+    const width = window.innerWidth;
+    this.setView(width);
+  }
+
+  setView(width: number): void {
+    if (width < 768) {
       this.view = 'mobileView';
+    } else if (width < 1024){
+      this.view = 'tabletView';
     } else {
       this.view = 'desktopView';
     }

src/app/game/game.component.ts

@@ -144,9 +144,12 @@ export class GameComponent implements OnInit, OnDestroy {
     ({
       spielname: this.sessionName, team: this.team, red: this.gameStatus.red, blue: this.gameStatus.blue, cardID: this.gameStatus.activeCard
     }).then(value => {
-      this.newCard();
-      this.gameStatus.red = JSON.parse(value.red);
-      this.gameStatus.blue = JSON.parse(value.blue);
+      const status = JSON.parse(value.status);
+      if (status) {
+        this.newCard();
+        this.gameStatus.red = JSON.parse(value.red);
+        this.gameStatus.blue = JSON.parse(value.blue);
+      }
     });
   }
 
@@ -160,9 +163,12 @@ export class GameComponent implements OnInit, OnDestroy {
         blue: this.gameStatus.blue,
         cardID: this.gameStatus.activeCard
       }).then(value => {
-        this.newCard();
-        this.gameStatus.red = JSON.parse(value.red);
-        this.gameStatus.blue = JSON.parse(value.blue);
+        const status = JSON.parse(value.status);
+        if (status) {
+          this.newCard();
+          this.gameStatus.red = JSON.parse(value.red);
+          this.gameStatus.blue = JSON.parse(value.blue);
+        }
       });
     } else if (this.isWatchdog) {
       let opennentTeam = '';
@@ -179,9 +185,12 @@ export class GameComponent implements OnInit, OnDestroy {
         blue: this.gameStatus.blue,
         cardID: this.gameStatus.activeCard
       }).then(value => {
-        this.newCard();
-        this.gameStatus.red = JSON.parse(value.red);
-        this.gameStatus.blue = JSON.parse(value.blue);
+        const status = JSON.parse(value.status);
+        if (status) {
+          this.newCard();
+          this.gameStatus.red = JSON.parse(value.red);
+          this.gameStatus.blue = JSON.parse(value.blue);
+        }
       });
     }
   }

src/app/round-history/round-history.component.html

-<mat-card *ngIf="round !== 0" class="transparent {{redTurn}}">
+<mat-card *ngIf="roundHistory.length > 0" class="transparent {{redTurn}}">
   <mat-card-title>Runde {{round}}</mat-card-title>
 </mat-card>
 <div class="example-container mat-elevation-z8">

src/app/round-history/round-history.component.ts

@@ -73,9 +73,6 @@ export class RoundHistoryComponent extends DataSource<any> implements OnInit, On
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-    if (this.round === 6) {
-      console.log(changes);
-    }
     if (changes.hasOwnProperty('round')) {
       this.round = changes.round.currentValue;
     }