Add some Gamesound

src/app/game/game.component.ts

@@ -113,6 +113,8 @@ export class GameComponent implements OnInit, OnDestroy {
         if (!JSON.parse(data)) {
           this.unsubscribeAll();
           this.router.navigate([this.sessionName + '/' + this.team]);
+          const audio = "../../../assets/sounds/navigation_selection-complete-celebration.ogg";
+          this.playAudio(audio);
         }
       });
     this.subCanPressTabooh = this.socketDataService.getCanPressTabooh(this.sessionName)
@@ -154,10 +156,19 @@ export class GameComponent implements OnInit, OnDestroy {
         this.newCard();
         this.gameStatus.red = JSON.parse(value.red);
         this.gameStatus.blue = JSON.parse(value.blue);
+        const audio = "../../../assets/sounds/hero_decorative-celebration-02.ogg";
+        this.playAudio(audio);
       }
     });
   }
 
+  playAudio(audioPath: string): void {
+    const audio = new Audio();
+    audio.src = audioPath;
+    audio.load();
+    audio.play();
+  }
+
   wrongAnswer(): void {
     if (this.isExplainer) {
       this.service.removePoint
@@ -173,6 +184,8 @@ export class GameComponent implements OnInit, OnDestroy {
           this.newCard();
           this.gameStatus.red = JSON.parse(value.red);
           this.gameStatus.blue = JSON.parse(value.blue);
+          const audio = "../../../assets/sounds/alert_error-01.ogg";
+          this.playAudio(audio);
         }
       });
     } else if (this.isWatchdog) {
@@ -195,6 +208,8 @@ export class GameComponent implements OnInit, OnDestroy {
           this.newCard();
           this.gameStatus.red = JSON.parse(value.red);
           this.gameStatus.blue = JSON.parse(value.blue);
+          const audio = "../../../assets/sounds/alert_error-01.ogg";
+          this.playAudio(audio);
         }
       });
     }
@@ -205,6 +220,8 @@ export class GameComponent implements OnInit, OnDestroy {
       const status = JSON.parse(value.status);
       if (status) {
         this.newCard();
+        const audio = "../../../assets/sounds/navigation_forward-selection-minimal.ogg";
+        this.playAudio(audio);
       }
     }).catch(reason => console.log(reason));
   }

src/app/overview/overview.component.ts

@@ -165,11 +165,20 @@ export class OverviewComponent implements OnInit, OnDestroy {
         const status = JSON.parse(value.status);
         if (status) {
           this.getGameStatus();
+          const audio = "../../../assets/sounds/ui_refresh-feed.ogg";
+          this.playAudio(audio);
         }
       }).catch(reason => console.log(reason));
     }
   }
 
+  playAudio(audioPath: string): void {
+    const audio = new Audio();
+    audio.src = audioPath;
+    audio.load();
+    audio.play();
+  }
+
   nextRound(): void {
     this.unsubscribeAll();
     this.service.newRound({spielname: this.sessionName}).then( valueNotUsed => {
@@ -178,6 +187,8 @@ export class OverviewComponent implements OnInit, OnDestroy {
         this.isAllowedToPlay.role = 'explainer';
         this.router.navigate([this.sessionName + '/' + this.team + '/explainer', ]);
         this.wantToBeExplainer = true;
+        const audio = "../../../assets/sounds/state-change_confirm-up.ogg";
+        this.playAudio(audio);
       });
     });
   }
@@ -190,6 +201,8 @@ export class OverviewComponent implements OnInit, OnDestroy {
     this.canStartGame();
     this.unsubscribeAll();
     this.getSocketData();
+    const audio = "../../../assets/sounds/ui_unlock.ogg";
+    this.playAudio(audio);
   }
 
   getGameStatus(): void {

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

@@ -7,7 +7,7 @@
 
       <!-- Answer Column -->
       <ng-container matColumnDef="answer">
-        <mat-cell *matCellDef="let element">
+        <mat-cell *matCellDef="let element" (click)="tableClicked(element)">
           <button class="volleBreite" *ngIf="element.answer === answer.zeitLaueft" mat-raised-button>Zeit läuft &#9201;</button>
           <button class="volleBreite" *ngIf="element.answer === answer.zeitAbgelaufen" mat-raised-button>Zeit abgelaufen &#9201;</button>
           <button class="volleBreite" *ngIf="element.answer === answer.richtig" mat-raised-button color="primary">Richtig &#10004;</button>
@@ -19,35 +19,35 @@
 
       <!-- Solution Column -->
       <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>
+        <mat-cell (click)="tableClicked(element)" *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>
+        <mat-cell (click)="tableClicked(element)" *matCellDef="let element"> <b *ngIf="element.answer !== answer.zeitLaueft">{{element.solution}}</b></mat-cell>
       </ng-container>
 
       <!-- Tabu1 Column -->
       <ng-container matColumnDef="tabu1">
-        <mat-cell *matCellDef="let element"> <a *ngIf="element.answer !== answer.zeitLaueft" class="tabuColor">{{element.tabu1}}</a></mat-cell>
+        <mat-cell (click)="tableClicked(element)" *matCellDef="let element"> <a *ngIf="element.answer !== answer.zeitLaueft" class="tabuColor">{{element.tabu1}}</a></mat-cell>
       </ng-container>
 
       <!-- Tabu2 Column -->
       <ng-container matColumnDef="tabu2">
-        <mat-cell *matCellDef="let element"> <a *ngIf="element.answer !== answer.zeitLaueft" class="tabuColor">{{element.tabu2}}</a></mat-cell>
+        <mat-cell (click)="tableClicked(element)" *matCellDef="let element"> <a *ngIf="element.answer !== answer.zeitLaueft" class="tabuColor">{{element.tabu2}}</a></mat-cell>
       </ng-container>
 
       <!-- Tabu3 Column -->
       <ng-container matColumnDef="tabu3">
-        <mat-cell *matCellDef="let element"> <a *ngIf="element.answer !== answer.zeitLaueft" class="tabuColor">{{element.tabu3}}</a></mat-cell>
+        <mat-cell (click)="tableClicked(element)" *matCellDef="let element"> <a *ngIf="element.answer !== answer.zeitLaueft" class="tabuColor">{{element.tabu3}}</a></mat-cell>
       </ng-container>
 
       <!-- Tabu4 Column -->
       <ng-container matColumnDef="tabu4">
-        <mat-cell *matCellDef="let element"> <a *ngIf="element.answer !== answer.zeitLaueft" class="tabuColor">{{element.tabu4}}</a></mat-cell>
+        <mat-cell (click)="tableClicked(element)" *matCellDef="let element"> <a *ngIf="element.answer !== answer.zeitLaueft" class="tabuColor">{{element.tabu4}}</a></mat-cell>
       </ng-container>
 
       <!-- Tabu5 Column -->
       <ng-container matColumnDef="tabu5">
-        <mat-cell *matCellDef="let element"> <a *ngIf="element.answer !== answer.zeitLaueft" class="tabuColor">{{element.tabu5}}</a></mat-cell>
+        <mat-cell (click)="tableClicked(element)" *matCellDef="let element"> <a *ngIf="element.answer !== answer.zeitLaueft" class="tabuColor">{{element.tabu5}}</a></mat-cell>
       </ng-container>
 
       <!-- Expanded Content Column - The detail row is made up of this one column -->

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

@@ -167,8 +167,10 @@ export class RoundHistoryComponent extends DataSource<any> implements OnInit, On
     this.roundHistory[s2cCard].answer = answer;
     let cardResultID = 0;
     let point = 0;
+    let audio = "";
     // Richtig Button selected
     if (answer === Answer.richtig) {
+      audio = "../../../assets/sounds/hero_decorative-celebration-02.ogg";
       cardResultID = 2;
       if (oldAnswer === Answer.tabooh) {
         point = 2;
@@ -178,6 +180,7 @@ export class RoundHistoryComponent extends DataSource<any> implements OnInit, On
     }
     // Ueberspringen or Zeit abgelaufen Button selected
     if (answer === Answer.uebersprungen || answer === Answer.zeitAbgelaufen) {
+      audio = "../../../assets/sounds/navigation_forward-selection-minimal.ogg";
       if (answer === Answer.zeitAbgelaufen) {
         cardResultID = 1;
       }
@@ -192,6 +195,7 @@ export class RoundHistoryComponent extends DataSource<any> implements OnInit, On
     }
     // Tabooh Button selected
     if (answer === Answer.tabooh) {
+      audio = "../../../assets/sounds/alert_error-01.ogg";
       cardResultID = 4;
       if (oldAnswer === Answer.richtig) {
         point = -2;
@@ -215,11 +219,32 @@ export class RoundHistoryComponent extends DataSource<any> implements OnInit, On
       if (status) {
         this.canUpdate.emit(true);
         this.gameStatus.emit(value);
+        this.playAudio(audio);
       }
     }).catch(reason => console.log(reason)
     );
   }
 
+  playAudio(audioPath: string): void {
+    const audio = new Audio();
+    audio.src = audioPath;
+    audio.load();
+    audio.play();
+  }
+
+  tableClicked(element: any): void {
+    console.log(element, this.expandedElement);
+    if (element !== this.expandedElement) {
+      let audio = '';
+      if (this.canEdit) {
+        audio = "../../../assets/sounds/navigation_transition-left.ogg";
+      } else {
+        audio = "../../../assets/sounds/navigation_unavailable-selection.ogg";
+      }
+      this.playAudio(audio);
+    }
+  }
+
   /** Connect function called by the table to retrieve one stream containing the data to render. */
   connect(): Observable<CardResultHistory[]> {
     const rows: any = [];