Commit 046a4c10 authored by Dennis Willers's avatar Dennis Willers
Browse files

Change Screen Resolution / Fix Button Spam Bug

parent 1fbeaaf8

src/app/app.component.ts

+4 −1
Original line number Original line Diff line number Diff line 
import {Component, HostListener, OnInit} from '@angular/core';

import {Component, HostListener, OnInit} from '@angular/core';

import {ViewModus} from './dao/viewModus';





@Component({

@Component({

  selector: 'app-root',

  selector: 'app-root',
@@ -14,9 +15,10 @@ export class AppComponent implements OnInit { 
    this.setView(width);

    this.setView(width);

  }

  }





  constructor(private screen: ViewModus){}



  @HostListener('window:resize', ['$event'])

  @HostListener('window:resize', ['$event'])

  onResize($event: any): any {

  onResize($event: any): any {

    console.log('RESIZE');

    const width = window.innerWidth;

    const width = window.innerWidth;

    this.setView(width);

    this.setView(width);

  }

  }
@@ -29,5 +31,6 @@ export class AppComponent implements OnInit { 
    } else {

    } else {

      this.view = 'desktopView';

      this.view = 'desktopView';

    }

    }

    this.screen.setNewView(this.view);

  }

  }

}
 
}

src/app/app.module.ts

+3 −1
Original line number Original line Diff line number Diff line
@@ -30,6 +30,7 @@ import { RulesComponent } from './rules/rules.component'; 
import { RoundHistoryComponent } from './round-history/round-history.component';

import { RoundHistoryComponent } from './round-history/round-history.component';

import {MatTableModule} from '@angular/material/table';

import {MatTableModule} from '@angular/material/table';

import {MatTreeModule} from '@angular/material/tree';

import {MatTreeModule} from '@angular/material/tree';

import {ViewModus} from './dao/viewModus';





@NgModule({

@NgModule({

  declarations: [

  declarations: [
@@ -66,7 +67,8 @@ import {MatTreeModule} from '@angular/material/tree'; 
  ],

  ],

  providers: [

  providers: [

    IsAllowedToPlay,

    IsAllowedToPlay,

    SocketDataService

    SocketDataService,

    ViewModus

  ],

  ],

  bootstrap: [AppComponent]

  bootstrap: [AppComponent]

})

})

src/app/dao/viewModus.ts

0 → 100644
+14 −0
Original line number Original line Diff line number Diff line 
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

+10 −8
Original line number Original line Diff line number Diff line 
<div *ngIf="isMobileResolution" style="margin-top: -4.25em;">

<div *ngIf="view !== 'desktopView'" style="margin-top: -4.25em;">

  <mat-progress-spinner style="border-radius: 50%;" class = "center" color="primary" mode="determinate" value={{timeLeft}} aria-label="Rating">

  <mat-progress-spinner style="border-radius: 50%;" class = "center white transparent" color="primary" mode="determinate" value={{timeLeft}} aria-label="Rating">

  </mat-progress-spinner>

  </mat-progress-spinner>

  <mat-card-content class = "timer">{{timeRemaining}}</mat-card-content>

  <mat-card-content class = "timer">{{timeRemaining}}</mat-card-content>

  <br>

  <br>

</div>

</div>

<div *ngIf="!isMobileResolution" class="TimerLeft" style="margin-top: -4.25em; margin-right: -11.5em; margin-left: auto">

<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" color="primary" mode="determinate" value={{timeLeft}} aria-label="Rating">

  <mat-progress-spinner style="border-radius: 50%;" class = "white transparent" color="primary" mode="determinate" value={{timeLeft}} aria-label="Rating">



  </mat-progress-spinner>

  </mat-progress-spinner>

  <mat-card-content class = "timer">{{timeRemaining}}</mat-card-content>

  <mat-card-content class = "timer">{{timeRemaining}}</mat-card-content>

</div>

</div>
@@ -44,9 +43,12 @@ 
    </h2>

    </h2>

  </mat-card>

  </mat-card>

  <br>

  <br>

  <button *ngIf="isExplainer" class="marginButton" mat-raised-button color="primary" (click)="rightAnswer()">Richtig &#10004;</button>

  <div class="marginButtons">

  <button *ngIf="isExplainer" class="marginButton"mat-raised-button color="accent" (click)="skipCard()">Überspringen &#187;</button>

    <button class="marginButtonRight" *ngIf="isExplainer" mat-raised-button color="primary" (click)="rightAnswer()">Richtig &#10004;</button>

  <button mat-raised-button class="marginButton"color="warn" [disabled]="PressTaboohDisabled" (click)="wrongAnswer()">Tabooh &#10008;</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>

  <br>

  <br>

  <mat-card class="transparent">

  <mat-card class="transparent">

src/app/game/game.component.scss

+12 −4
Original line number Original line Diff line number Diff line
@@ -14,7 +14,6 @@ th{ 




.white{

.white{

  background-color: white;

  background-color: white;



}

}





.timer{

.timer{
@@ -51,8 +50,17 @@ body { 
  margin-right: auto;

  margin-right: auto;

}

}





.marginButton {

.marginButtonRight {

  margin-right: 10px;

  margin-right: clamp(7px, 2%, 25px);

  margin-left: 10px;

}



.marginButtonLeft {

  margin-left: clamp(7px, 2%, 25px);

}

}





.marginButtons {

  display: flex;

  justify-content: center;

}