Merge branch 'Isabell'

# Conflicts:
#	package-lock.json
#	package.json
#	src/app/app.module.ts
#	src/app/overview/overview.component.ts

package.json

 {
   "name": "tabooh",
-  "version": "2.2.2",
+  "version": "2.2.5",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -12,19 +12,21 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~11.0.5",
+    "@angular/animations": "~11.2.13",
     "@angular/cdk": "^11.0.3",
-    "@angular/common": "~11.0.5",
-    "@angular/compiler": "~11.0.5",
-    "@angular/core": "~11.0.5",
+    "@angular/common": "~11.2.13",
+    "@angular/compiler": "~11.2.13",
+    "@angular/core": "~11.2.13",
     "@angular/flex-layout": "^11.0.0-beta.33",
-    "@angular/forms": "~11.0.5",
+    "@angular/forms": "~11.2.13",
     "@angular/material": "^11.0.3",
-    "@angular/platform-browser": "~11.0.5",
-    "@angular/platform-browser-dynamic": "~11.0.5",
-    "@angular/router": "~11.0.5",
+    "@angular/platform-browser": "~11.2.13",
+    "@angular/platform-browser-dynamic": "~11.2.13",
+    "@angular/router": "~11.2.13",
     "@types/aos": "^3.0.3",
     "aos": "^2.3.4",
+    "jquery": "^3.6.0",
+    "postscribe": "^2.0.8",
     "rxjs": "~6.6.0",
     "socket.io": "^3.0.4",
     "socket.io-client": "latest",
@@ -32,15 +34,15 @@
     "zone.js": "~0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1100.5",
-    "@angular/cli": "~11.0.5",
-    "@angular/compiler-cli": "~11.0.5",
+    "@angular-devkit/build-angular": "~0.1102.12",
+    "@angular/cli": "~11.2.12",
+    "@angular/compiler-cli": "~11.2.13",
     "@types/jasmine": "~3.6.0",
     "@types/node": "^12.11.1",
     "codelyzer": "^6.0.0",
     "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.0",
-    "karma": "~5.1.0",
+    "karma": "~6.3.2",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage": "~2.0.3",
     "karma-jasmine": "~4.0.0",

src/app/app.module.ts

@@ -14,7 +14,7 @@ import {MatButtonModule} from '@angular/material/button';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatInputModule} from '@angular/material/input';
 import {MatCardModule} from '@angular/material/card';
-import { OverviewComponent } from './overview/overview.component';
+import {OverviewComponent, TestDialogComponent} from './overview/overview.component';
 import { ErrorComponent } from './error/error.component';
 import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import { FormsModule } from '@angular/forms';
@@ -32,6 +32,7 @@ import {MatTableModule} from '@angular/material/table';
 import {MatTreeModule} from '@angular/material/tree';
 import {ViewModus} from './dao/viewModus';
 import {MatBadgeModule} from '@angular/material/badge';
+import {MAT_DIALOG_DEFAULT_OPTIONS, MatDialogModule} from '@angular/material/dialog';
 
 @NgModule({
   declarations: [
@@ -46,6 +47,7 @@ import {MatBadgeModule} from '@angular/material/badge';
     ImpressumComponent,
     RulesComponent,
     RoundHistoryComponent,
+    TestDialogComponent
   ],
   imports: [
     HttpClientModule,
@@ -66,8 +68,10 @@ import {MatBadgeModule} from '@angular/material/badge';
     MatTableModule,
     MatTreeModule,
     MatBadgeModule
+    MatDialogModule
   ],
   providers: [
+    {provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: {hasBackdrop: false}},
     IsAllowedToPlay,
     SocketDataService,
     ViewModus

src/app/overview/overview.component.html

@@ -71,6 +71,7 @@
       <mat-card-title *ngIf="!isActiveRound">{{nextTeam}} ist am Zug:</mat-card-title>
       <br>
       <button [disabled]="buttonNextRoundDisabled || gameStatus.activeExplainer == 1" mat-raised-button color="primary" (click)="nextRound()">Ich erkläre und los!</button>
+      <button mat-button (click)="openDialog()">Launch dialog</button>
     </mat-card-actions>
   </mat-card>
 </div>

src/app/overview/overview.component.ts

@@ -8,6 +8,7 @@ import {Subject} from 'rxjs';
 import {takeUntil} from 'rxjs/operators';
 import {ViewModus} from '../dao/viewModus';
 import {Location} from '@angular/common';
+import {MatDialog} from '@angular/material/dialog';
 
 @Component({
   selector: 'app-overview',
@@ -15,6 +16,21 @@ import {Location} from '@angular/common';
   styleUrls: ['./overview.component.scss']
 })
 export class OverviewComponent implements OnInit, OnDestroy {
+
+  constructor(private router: Router,
+              private location: Location,
+              private activatedRoute: ActivatedRoute,
+              private service: TabuMiddlewareService,
+              private isAllowedToPlay: IsAllowedToPlay,
+              private socketDataService: SocketDataService,
+              private screen: ViewModus,
+              public dialog: MatDialog) {
+    screen.$view.subscribe(
+      view => {
+        this.view = view;
+        this.setScrollLimit();
+      });
+  }
   view = 'desktopView';
   private ngUnsubscribe = new Subject();
   subNewGame: any;
@@ -54,18 +70,11 @@ export class OverviewComponent implements OnInit, OnDestroy {
   scrolled = 0;
   scrollLimit = 290;
 
-  constructor(private router: Router,
-              private location: Location,
-              private activatedRoute: ActivatedRoute,
-              private service: TabuMiddlewareService,
-              private isAllowedToPlay: IsAllowedToPlay,
-              private socketDataService: SocketDataService,
-              private screen: ViewModus) {
-    screen.$view.subscribe(
-      view => {
-        this.view = view;
-        this.setScrollLimit();
-      });
+  static playAudio(audioPath: string): void {
+    const audio = new Audio();
+    audio.src = audioPath;
+    audio.load();
+    audio.play();
   }
 
   ngOnInit(): void {
@@ -183,19 +192,14 @@ export class OverviewComponent implements OnInit, OnDestroy {
         if (status) {
           this.getGameStatus();
           const audio = '../../../assets/sounds/ui_refresh-feed.ogg';
-          this.playAudio(audio);
+          OverviewComponent.playAudio(audio);
         }
-      }).catch(reason => console.log(reason));
+      }).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 => {
@@ -204,9 +208,12 @@ 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);
+        const audio = "../../../assets/sounds/state-change_confirm-up.ogg";
+        OverviewComponent.playAudio(audio);
       });
+    }).catch(reason => {
+      console.log(reason);
+      this.openDialog();
     });
   }
 
@@ -219,8 +226,8 @@ export class OverviewComponent implements OnInit, OnDestroy {
     this.canStartGame();
     this.unsubscribeAll();
     this.getSocketData();
-    const audio = '../../../assets/sounds/ui_unlock.ogg';
-    this.playAudio(audio);
+    const audio = "../../../assets/sounds/ui_unlock.ogg";
+    OverviewComponent.playAudio(audio);
   }
 
   teamToTeamNumber(team: string): void {
@@ -282,6 +289,10 @@ export class OverviewComponent implements OnInit, OnDestroy {
     }
   }
 
+  openDialog(): void {
+    this.dialog.open(TestDialogComponent);
+  }
+
   @HostListener('window:scroll', ['$event'])
   onWindowScroll($event: any): void {
     const numb = window.scrollY;
@@ -304,3 +315,8 @@ export class OverviewComponent implements OnInit, OnDestroy {
     this.ngUnsubscribe.complete();
   }
 }
+@Component({
+  selector: 'app-testdialog',
+  templateUrl: './testdialog.html',
+})
+export class TestDialogComponent {}

src/app/overview/testdialog.html

+<h1 mat-dialog-title>Ihr habt alle Begriffe durchgespielt!</h1>
+<div mat-dialog-content>Eröffnet einen neuen Raum oder setzt den Fortschritt sofort hier zurück:</div>
+<div mat-dialog-actions>
+  <button mat-raised-button>Zurücksetzen</button>
+  <button mat-raised-button color="primary" mat-dialog-close>Schließen</button>
+</div>

src/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <!-- Google AdSense -->
-  <script data-ad-client="ca-pub-5661681898041390" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+  <!--script data-ad-client="ca-pub-5661681898041390" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script-->
   <!-- Google AdSense -->
   <meta charset="utf-8">
   <title>Tabooh</title>