Change Screen Resolution / Fix Button Spam Bug

src/app/app.component.ts

 import {Component, HostListener, OnInit} from '@angular/core';
+import {ViewModus} from './dao/viewModus';
 
 @Component({
   selector: 'app-root',
@@ -14,9 +15,10 @@ export class AppComponent implements OnInit {
     this.setView(width);
   }
 
+  constructor(private screen: ViewModus){}
+
   @HostListener('window:resize', ['$event'])
   onResize($event: any): any {
-    console.log('RESIZE');
     const width = window.innerWidth;
     this.setView(width);
   }
@@ -29,5 +31,6 @@ export class AppComponent implements OnInit {
     } else {
       this.view = 'desktopView';
     }
+    this.screen.setNewView(this.view);
   }
 }

src/app/app.module.ts

@@ -30,6 +30,7 @@ import { RulesComponent } from './rules/rules.component';
 import { RoundHistoryComponent } from './round-history/round-history.component';
 import {MatTableModule} from '@angular/material/table';
 import {MatTreeModule} from '@angular/material/tree';
+import {ViewModus} from './dao/viewModus';
 
 @NgModule({
   declarations: [
@@ -66,7 +67,8 @@ import {MatTreeModule} from '@angular/material/tree';
   ],
   providers: [
     IsAllowedToPlay,
-    SocketDataService
+    SocketDataService,
+    ViewModus
   ],
   bootstrap: [AppComponent]
 })

src/app/dao/viewModus.ts

+import {Injectable} from '@angular/core';
+import {Subject} from 'rxjs';
+
+@Injectable()
+export class ViewModus {
+  actuallView = 'desktopView';
+  view = new Subject<string>();
+  $view = this.view.asObservable();
+
+  setNewView(view: string): void {
+    this.view.next(view);
+    this.actuallView = view;
+  }
+}

src/app/game/game.component.html

-<div *ngIf="isMobileResolution" style="margin-top: -4.25em;">
-  <mat-progress-spinner style="border-radius: 50%;" class = "center" color="primary" mode="determinate" value={{timeLeft}} aria-label="Rating">
+<div *ngIf="view !== 'desktopView'" style="margin-top: -4.25em;">
+  <mat-progress-spinner style="border-radius: 50%;" class = "center white transparent" color="primary" mode="determinate" value={{timeLeft}} aria-label="Rating">
   </mat-progress-spinner>
   <mat-card-content class = "timer">{{timeRemaining}}</mat-card-content>
   <br>
 </div>
-<div *ngIf="!isMobileResolution" class="TimerLeft" style="margin-top: -4.25em; margin-right: -11.5em; margin-left: auto">
-  <mat-progress-spinner style="border-radius: 50%;" class = "white" color="primary" mode="determinate" value={{timeLeft}} aria-label="Rating">
-
+<div *ngIf="view === 'desktopView'" class="TimerLeft" style="margin-top: -4.25em; margin-right: -11.5em; margin-left: auto">
+  <mat-progress-spinner style="border-radius: 50%;" class = "white transparent" color="primary" mode="determinate" value={{timeLeft}} aria-label="Rating">
   </mat-progress-spinner>
   <mat-card-content class = "timer">{{timeRemaining}}</mat-card-content>
 </div>
@@ -44,9 +43,12 @@
     </h2>
   </mat-card>
   <br>
-  <button *ngIf="isExplainer" class="marginButton" mat-raised-button color="primary" (click)="rightAnswer()">Richtig &#10004;</button>
-  <button *ngIf="isExplainer" class="marginButton"mat-raised-button color="accent" (click)="skipCard()">Überspringen &#187;</button>
-  <button mat-raised-button class="marginButton"color="warn" [disabled]="PressTaboohDisabled" (click)="wrongAnswer()">Tabooh &#10008;</button>
+  <div class="marginButtons">
+    <button class="marginButtonRight" *ngIf="isExplainer" mat-raised-button color="primary" (click)="rightAnswer()">Richtig &#10004;</button>
+    <button class="marginButtonLeft marginButtonRight" *ngIf="isExplainer" mat-raised-button color="accent" (click)="skipCard()">Überspringen &#187;</button>
+    <a *ngIf="!isExplainer" class="marginButtonRight"></a>
+    <button class="marginButtonLeft" mat-raised-button color="warn" [disabled]="PressTaboohDisabled" (click)="wrongAnswer()">Tabooh &#10008;</button>
+  </div>
   <br>
   <br>
   <mat-card class="transparent">

src/app/game/game.component.scss

@@ -14,7 +14,6 @@ th{
 
 .white{
   background-color: white;
-
 }
 
 .timer{
@@ -51,8 +50,17 @@ body {
   margin-right: auto;
 }
 
-.marginButton {
-  margin-right: 10px;
-  margin-left: 10px;
+.marginButtonRight {
+  margin-right: clamp(7px, 2%, 25px);
+}
+
+.marginButtonLeft {
+  margin-left: clamp(7px, 2%, 25px);
 }
 
+.marginButtons {
+  display: flex;
+  justify-content: center;
+}
+
+

src/app/game/game.component.ts

@@ -7,6 +7,7 @@ import {IsAllowedToPlay} from '../dao/isAllowedToPlay';
 import {SocketDataService} from '../dao/socketDataService';
 import {Subject} from 'rxjs';
 import {takeUntil} from 'rxjs/operators';
+import {ViewModus} from '../dao/viewModus';
 
 @Component({
   selector: 'app-game',
@@ -14,8 +15,7 @@ import {takeUntil} from 'rxjs/operators';
   styleUrls: ['./game.component.scss']
 })
 export class GameComponent implements OnInit, OnDestroy {
-  isMobileResolution = false;
-
+  view = 'desktopView';
   private ngUnsubscribe = new Subject();
   subNewCard: any;
   subEndRound: any;
@@ -60,11 +60,16 @@ export class GameComponent implements OnInit, OnDestroy {
               private router: Router,
               private activatedRoute: ActivatedRoute,
               private isAllowedToPlay: IsAllowedToPlay,
-              private socketDataService: SocketDataService) {
+              private socketDataService: SocketDataService,
+              private screen: ViewModus) {
+    screen.$view.subscribe(
+      view => {
+        this.view = view;
+      });
   }
 
   ngOnInit(): void {
-    this.isMobileResolution = window.innerWidth < 768;
+    this.view = this.screen.actuallView;
     this.activatedRoute.paramMap.subscribe(params => {
       this.sessionName = String(params.get('sessionName')).toLowerCase();
       this.team = String(params.get('team'));
@@ -128,7 +133,7 @@ export class GameComponent implements OnInit, OnDestroy {
       this.timePassed = this.timePassed += 1;
       this.timeLeft = (this.TIME_LIMIT - this.timePassed);
       if (this.timeLeft === 0) {
-        //this.onTimesUp();
+        // this.onTimesUp();
       }
     }, 593);
   }

src/app/overview/overview.component.html

@@ -17,12 +17,19 @@
 
 <mat-card class="transparent">
   <div class="FloatLeftAndCenterElement">
-    <div class="newStartButtonLeft">
+    <div *ngIf="view === 'mobileView'" class="textMobileView">
       <button matTooltip="Neues Spiel starten" [disabled]="buttonNewGameDisabled || gameStatus.activeExplainer == 1" mat-raised-button color="primary" (click)="startGame()">
-        <mat-icon color = "white" aria-hidden="false">autorenew</mat-icon></button>
+        <mat-icon color = "white" aria-hidden="false">autorenew</mat-icon>
+      </button>
+    </div>
+    <div *ngIf="view !== 'mobileView'" class="newStartButtonLeft">
+      <button matTooltip="Neues Spiel starten" [disabled]="buttonNewGameDisabled || gameStatus.activeExplainer == 1" mat-raised-button color="primary" (click)="startGame()">
+        <mat-icon color = "white" aria-hidden="false">autorenew</mat-icon>
+      </button>
     </div>
     <div class="CenterText">
-      <h2>{{membership}}</h2>
+      <h2 *ngIf="view === 'mobileView'" class="textMobileView">{{membership}}</h2>
+      <h2 *ngIf="view !== 'mobileView'">{{membership}}</h2>
     </div>
   </div>
   <button mat-raised-button class = "{{red}}" (click)="joinTeam('red')">

src/app/overview/overview.component.scss

@@ -58,3 +58,7 @@ th{
   left: 50%;
   transform: translateX(-50%);
 }
+
+.textMobileView {
+  display: inline;
+}

src/app/overview/overview.component.ts

-import {Component, HostListener, OnDestroy, OnInit} from '@angular/core';
+import {Component, HostListener, Input, OnChanges, OnDestroy, OnInit, SimpleChanges} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 import {TabuMiddlewareService} from '../dao/TabuMiddlewareService';
 import {GameStatus} from '../interface/gameStatus';
@@ -6,6 +6,7 @@ import {IsAllowedToPlay} from '../dao/isAllowedToPlay';
 import {SocketDataService} from '../dao/socketDataService';
 import {Subject} from 'rxjs';
 import {takeUntil} from 'rxjs/operators';
+import {ViewModus} from '../dao/viewModus';
 
 @Component({
   selector: 'app-overview',
@@ -13,7 +14,7 @@ import {takeUntil} from 'rxjs/operators';
   styleUrls: ['./overview.component.scss']
 })
 export class OverviewComponent implements OnInit, OnDestroy {
-
+  view = 'desktopView';
   private ngUnsubscribe = new Subject();
   subNewGame: any;
   subNewCard: any;
@@ -50,9 +51,16 @@ export class OverviewComponent implements OnInit, OnDestroy {
               private activatedRoute: ActivatedRoute,
               private service: TabuMiddlewareService,
               private isAllowedToPlay: IsAllowedToPlay,
-              private socketDataService: SocketDataService) { }
+              private socketDataService: SocketDataService,
+              private screen: ViewModus) {
+    screen.$view.subscribe(
+      view => {
+        this.view = view;
+      });
+  }
 
   ngOnInit(): void {
+    this.view = this.screen.actuallView;
     this.activatedRoute.paramMap.subscribe(params => {
       this.sessionName = String(params.get('sessionName')).toLowerCase();
       this.team = String(params.get('team'));
@@ -93,9 +101,7 @@ export class OverviewComponent implements OnInit, OnDestroy {
   getSocketData(): void {
     this.subHistoryChanged = this.socketDataService.getHistoryChangedInfo (this.sessionName)
       .pipe(takeUntil(this.ngUnsubscribe)).subscribe( data => {
-        console.log('WANT UPDATE: ', this.canUpdateHistory);
         if (this.canUpdateHistory) {
-          console.log('UPDATE HISTORY');
           this.getGameStatus();
         }
       });
@@ -105,7 +111,6 @@ export class OverviewComponent implements OnInit, OnDestroy {
       });
     this.subNewCard = this.socketDataService.getNewCard(this.sessionName)
       .pipe(takeUntil(this.ngUnsubscribe)).subscribe(data => {
-        console.log('UPDATE CARD');
         this.getGameStatus();
       });
     this.subEndRound = this.socketDataService.getEndRound(this.sessionName)

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

@@ -17,7 +17,10 @@
     </ng-container>
 
     <!-- Solution Column -->
-    <ng-container matColumnDef="solution">
+    <ng-container *ngIf="view === 'mobileView'" matColumnDef="solution">
+      <mat-cell *matCellDef="let element" class="marginButtons"> <b *ngIf="element.answer !== answer.zeitLaueft">{{element.solution}}</b></mat-cell>
+    </ng-container>
+    <ng-container *ngIf="view !== 'mobileView'" matColumnDef="solution">
       <mat-cell *matCellDef="let element"> <b *ngIf="element.answer !== answer.zeitLaueft">{{element.solution}}</b></mat-cell>
     </ng-container>
 
@@ -47,76 +50,166 @@
     </ng-container>
 
     <!-- Expanded Content Column - The detail row is made up of this one column -->
-    <ng-container matColumnDef="expandedDetail" class="volleBreite">
-      <mat-cell *matCellDef="let detail" class="expandStyle">
-        <!-- Richtig -->
-        <button
-          mat-stroked-button *ngIf="detail.element.answer !== answer.richtig"
-          color="primary" class="expandStyle"
-          (click)="updateAnswer(detail.element, answer.richtig)"
-        >
-          Richtig &#10004;
-        </button>
-        <button
-          mat-raised-button
-          *ngIf="detail.element.answer === answer.richtig"
-          color="primary" class="expandStyle"
-        >
-          Richtig &#10004;
-        </button>
-        <!-- Zeit abgelaufen -->
-        <button
-          mat-stroked-button
-          *ngIf="detail.element.answer !== answer.zeitAbgelaufen
+    <ng-container *ngIf="view === 'mobileView'" matColumnDef="expandedDetail">
+      <mat-cell *matCellDef="let detail" class="marginButtons">
+        <div class="noSpaceWaste">
+          <div>
+            <mat-card-subtitle>{{detail.element.tabu1}}</mat-card-subtitle>
+          </div>
+          <div>
+            <mat-card-subtitle>{{detail.element.tabu2}}</mat-card-subtitle>
+          </div>
+          <div>
+            <mat-card-subtitle>{{detail.element.tabu3}}</mat-card-subtitle>
+          </div>
+          <div>
+            <mat-card-subtitle>{{detail.element.tabu4}}</mat-card-subtitle>
+          </div>
+          <div>
+            <mat-card-subtitle>{{detail.element.tabu5}}</mat-card-subtitle>
+          </div>
+          <div class="marginButtons">
+            <!-- Richtig -->
+            <button
+              mat-stroked-button *ngIf="detail.element.answer !== answer.richtig"
+              color="primary" class="marginButtonRight"
+              (click)="updateAnswer(detail.element, answer.richtig)"
+            >
+              Richtig &#10004;
+            </button>
+            <button
+              mat-raised-button
+              *ngIf="detail.element.answer === answer.richtig"
+              color="primary" class="marginButtonRight"
+            >
+              Richtig &#10004;
+            </button>
+            <!-- Zeit abgelaufen -->
+            <button
+              mat-stroked-button
+              *ngIf="detail.element.answer !== answer.zeitAbgelaufen
+          && detail.element.s2cID === lastS2CID"
+              class="marginButtonLeft marginButtonRight"
+              (click)="updateAnswer(detail.element, answer.zeitAbgelaufen)"
+            >
+              Zeit abgelaufen &#9201;
+            </button>
+            <button
+              mat-raised-button
+              *ngIf="detail.element.answer === answer.zeitAbgelaufen
+          && detail.element.s2cID === lastS2CID"
+              class="marginButtonLeft marginButtonRight"
+            >
+              Zeit abgelaufen &#9201;
+            </button>
+            <!-- Uebersprungen -->
+            <button
+              mat-stroked-button
+              *ngIf="detail.element.answer !== answer.uebersprungen
+          && detail.element.s2cID !== lastS2CID"
+              color="accent" class="marginButtonLeft marginButtonRight"
+              (click)="updateAnswer(detail.element, answer.uebersprungen)"
+            >
+              Überspringen &#187;
+            </button>
+            <button
+              mat-raised-button
+              *ngIf="detail.element.answer === answer.uebersprungen
+          && detail.element.s2cID !== lastS2CID"
+              color="accent" class="marginButtonLeft marginButtonRight"
+            >
+              Überspringen &#187;
+            </button>
+            <!-- Tabooh -->
+            <button
+              mat-stroked-button
+              *ngIf="detail.element.answer !== answer.tabooh"
+              color="warn" class="marginButtonLeft"
+              (click)="updateAnswer(detail.element, answer.tabooh)"
+            >
+              Tabooh &#10008;
+            </button>
+            <button
+              mat-raised-button
+              *ngIf="detail.element.answer === answer.tabooh"
+              color="warn" class="marginButtonLeft"
+            >
+              Tabooh &#10008;
+            </button>
+          </div>
+        </div>
+      </mat-cell>
+    </ng-container>
+    <ng-container *ngIf="view !== 'mobileView'" matColumnDef="expandedDetail" class="volleBreite">
+        <mat-cell *matCellDef="let detail" class="marginButtons">
+          <!-- Richtig -->
+          <button
+            mat-stroked-button *ngIf="detail.element.answer !== answer.richtig"
+            color="primary" class="marginButtonRight"
+            (click)="updateAnswer(detail.element, answer.richtig)"
+          >
+            Richtig &#10004;
+          </button>
+          <button
+            mat-raised-button
+            *ngIf="detail.element.answer === answer.richtig"
+            color="primary" class="marginButtonRight"
+          >
+            Richtig &#10004;
+          </button>
+          <!-- Zeit abgelaufen -->
+          <button
+            mat-stroked-button
+            *ngIf="detail.element.answer !== answer.zeitAbgelaufen
         && detail.element.s2cID === lastS2CID"
-          class="expandStyle"
-          (click)="updateAnswer(detail.element, answer.zeitAbgelaufen)"
-        >
-          Zeit abgelaufen &#9201;
-        </button>
-        <button
-          mat-raised-button
-          *ngIf="detail.element.answer === answer.zeitAbgelaufen
+            class="marginButtonLeft marginButtonRight"
+            (click)="updateAnswer(detail.element, answer.zeitAbgelaufen)"
+          >
+            Zeit abgelaufen &#9201;
+          </button>
+          <button
+            mat-raised-button
+            *ngIf="detail.element.answer === answer.zeitAbgelaufen
         && detail.element.s2cID === lastS2CID"
-          class="expandStyle"
-        >
-          Zeit abgelaufen &#9201;
-        </button>
-        <!-- Uebersprungen -->
-        <button
-          mat-stroked-button
-          *ngIf="detail.element.answer !== answer.uebersprungen
+            class="marginButtonLeft marginButtonRight"
+          >
+            Zeit abgelaufen &#9201;
+          </button>
+          <!-- Uebersprungen -->
+          <button
+            mat-stroked-button
+            *ngIf="detail.element.answer !== answer.uebersprungen
         && detail.element.s2cID !== lastS2CID"
-          color="accent" class="expandStyle"
-          (click)="updateAnswer(detail.element, answer.uebersprungen)"
-        >
-          Überspringen &#187;
-        </button>
-        <button
-          mat-raised-button
-          *ngIf="detail.element.answer === answer.uebersprungen
+            color="accent" class="marginButtonLeft marginButtonRight"
+            (click)="updateAnswer(detail.element, answer.uebersprungen)"
+          >
+            Überspringen &#187;
+          </button>
+          <button
+            mat-raised-button
+            *ngIf="detail.element.answer === answer.uebersprungen
         && detail.element.s2cID !== lastS2CID"
-          color="accent" class="expandStyle"
-        >
-          Überspringen &#187;
-        </button>
-        <!-- Tabooh -->
-        <button
-          mat-stroked-button
-          *ngIf="detail.element.answer !== answer.tabooh"
-          color="warn" class="expandStyle"
-          (click)="updateAnswer(detail.element, answer.tabooh)"
-        >
-          Tabooh &#10008;
-        </button>
-        <button
-          mat-raised-button
-          *ngIf="detail.element.answer === answer.tabooh"
-          color="warn" class="expandStyle"
-        >
-          Tabooh &#10008;
-        </button>
-      </mat-cell>
+            color="accent" class="marginButtonLeft marginButtonRight"
+          >
+            Überspringen &#187;
+          </button>
+          <!-- Tabooh -->
+          <button
+            mat-stroked-button
+            *ngIf="detail.element.answer !== answer.tabooh"
+            color="warn" class="marginButtonLeft"
+            (click)="updateAnswer(detail.element, answer.tabooh)"
+          >
+            Tabooh &#10008;
+          </button>
+          <button
+            mat-raised-button
+            *ngIf="detail.element.answer === answer.tabooh"
+            color="warn" class="marginButtonLeft"
+          >
+            Tabooh &#10008;
+          </button>
+        </mat-cell>
     </ng-container>
 
     <mat-row *matRowDef="let row; columns: displayedColumns;"

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

@@ -46,3 +46,20 @@
 .element-row-noEdit {
   position: relative;
 }
+
+.marginButtonRight {
+  margin-right: clamp(7px, 2%, 25px);
+}
+
+.marginButtonLeft {
+  margin-left: clamp(7px, 4%, 25px);
+}
+
+.marginButtons {
+  display: flex;
+  justify-content: center;
+}
+
+.noSpaceWaste {
+  width: 100%;
+}

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

@@ -3,6 +3,7 @@ import {animate, state, style, transition, trigger} from '@angular/animations';
 import {DataSource} from '@angular/cdk/table';
 import {Observable, of} from 'rxjs';
 import {TabuMiddlewareService} from '../dao/TabuMiddlewareService';
+import {ViewModus} from '../dao/viewModus';
 
 export interface CardResultHistory {
   answer: Answer;
@@ -50,6 +51,7 @@ export class RoundHistoryComponent extends DataSource<any> implements OnInit, On
   gameStatus = new EventEmitter();
   @Output()
   canUpdate = new EventEmitter();
+  view = 'desktopView';
   redTurn = '';
   lastS2CID = 0;
 
@@ -65,11 +67,21 @@ export class RoundHistoryComponent extends DataSource<any> implements OnInit, On
   expandedElement: any;
   isExpansionDetailRow = (i: number, row: object) => row.hasOwnProperty('detailRow');
 
-  constructor(private service: TabuMiddlewareService) {
+  constructor(
+    private service: TabuMiddlewareService,
+    private screen: ViewModus) {
     super();
+    screen.$view.subscribe(
+      view => {
+        this.view = view;
+        this.setDisplayColumns();
+      });
   }
 
   ngOnInit(): void {
+    this.view = this.screen.actuallView;
+    this.setDisplayColumns();
+    console.log("ACTUAL VIEW: ",this.view);
   }
 
   ngOnChanges(changes: SimpleChanges): void {
@@ -93,6 +105,14 @@ export class RoundHistoryComponent extends DataSource<any> implements OnInit, On
     }
   }
 
+  setDisplayColumns(): void {
+    if (this.view === 'mobileView') {
+      this.displayedColumns = ['answer', 'solution'];
+    } else {
+      this.displayedColumns = ['answer', 'solution', 'tabu1', 'tabu2', 'tabu3', 'tabu4', 'tabu5'];
+    }
+  }
+
   getRoundDataFromHistory(): void {
     this.roundHistory = [];
     let redTurn = null;