Skip to content

Tabu
Tabu
Commit bcdc6425 authored by Dennis Willers's avatar Dennis Willers 🏀
Browse files
Options

Add Animation

parent 522d737a
Pipeline #386 passed with stages
      in 5 minutes and 54 seconds
      Expand all Hide whitespace changes
      Inline Side-by-side
      Showing with 697 additions and 605 deletions
      angular.json
      View file @ bcdc6425
      ...@@ -31,10 +31,13 @@ ...@@ -31,10 +31,13 @@
      "src/assets" "src/assets"
      ], ],
      "styles": [ "styles": [
      "node_modules/aos/dist/aos.css",
      "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css", "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
      "src/styles.scss" "src/styles.scss"
      ], ],
      "scripts": [] "scripts": [
      "node_modules/aos/dist/aos.js"
      ]
      }, },
      "configurations": { "configurations": {
      "production": { "production": {
      ...@@ -95,10 +98,13 @@ ...@@ -95,10 +98,13 @@
      "src/assets" "src/assets"
      ], ],
      "styles": [ "styles": [
      "node_modules/aos/dist/aos.css",
      "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css", "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
      "src/styles.scss" "src/styles.scss"
      ], ],
      "scripts": [] "scripts": [
      "node_modules/aos/dist/aos.js"
      ]
      } }
      }, },
      "lint": { "lint": {
      ......
      package-lock.json
      View file @ bcdc6425
      ...@@ -1585,6 +1585,11 @@ ...@@ -1585,6 +1585,11 @@
      "semver-intersect": "1.4.0" "semver-intersect": "1.4.0"
      } }
      }, },
      "@types/aos": {
      "version": "3.0.3",
      "resolved": "https://registry.npmjs.org/@types/aos/-/aos-3.0.3.tgz",
      "integrity": "sha512-H9YIQ8vcCv1F68vdxrZzKsyI5I82FfqJ/D+RTwehau/+FmfpPALtWTBM8OqbnLied4I6yd0f6bbIj3/EtEAHaA=="
      },
      "@types/component-emitter": { "@types/component-emitter": {
      "version": "1.2.10", "version": "1.2.10",
      "resolved": "https://registry.npmjs.org/@types/component-emitter/-/component-emitter-1.2.10.tgz", "resolved": "https://registry.npmjs.org/@types/component-emitter/-/component-emitter-1.2.10.tgz",
      ...@@ -2027,6 +2032,16 @@ ...@@ -2027,6 +2032,16 @@
      "picomatch": "^2.0.4" "picomatch": "^2.0.4"
      } }
      }, },
      "aos": {
      "version": "2.3.4",
      "resolved": "https://registry.npmjs.org/aos/-/aos-2.3.4.tgz",
      "integrity": "sha512-zh/ahtR2yME4I51z8IttIt4lC1Nw0ktsFtmeDzID1m9naJnWXhCoARaCgNOGXb5CLy3zm+wqmRAEgMYB5E2HUw==",
      "requires": {
      "classlist-polyfill": "^1.0.3",
      "lodash.debounce": "^4.0.6",
      "lodash.throttle": "^4.0.1"
      }
      },
      "app-root-path": { "app-root-path": {
      "version": "3.0.0", "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/app-root-path/-/app-root-path-3.0.0.tgz", "resolved": "https://registry.npmjs.org/app-root-path/-/app-root-path-3.0.0.tgz",
      ...@@ -2951,6 +2966,11 @@ ...@@ -2951,6 +2966,11 @@
      } }
      } }
      }, },
      "classlist-polyfill": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz",
      "integrity": "sha1-k1vC39lFiodrJ5YXUUY4vKqWSi4="
      },
      "clean-stack": { "clean-stack": {
      "version": "2.2.0", "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz", "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
      ...@@ -7213,12 +7233,22 @@ ...@@ -7213,12 +7233,22 @@
      "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==", "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==",
      "dev": true "dev": true
      }, },
      "lodash.debounce": {
      "version": "4.0.8",
      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
      },
      "lodash.memoize": { "lodash.memoize": {
      "version": "4.1.2", "version": "4.1.2",
      "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz", "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
      "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=", "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=",
      "dev": true "dev": true
      }, },
      "lodash.throttle": {
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
      "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
      },
      "lodash.uniq": { "lodash.uniq": {
      "version": "4.5.0", "version": "4.5.0",
      "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz", "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
      ......
      src/app/app.component.ts
      View file @ bcdc6425
      import {Component, HostListener, OnInit} from '@angular/core'; import {Component, HostListener, OnInit} from '@angular/core';
      import {ViewModus} from './dao/viewModus'; import {ViewModus} from './dao/viewModus';
      import * as AOS from 'aos';
      @Component({ @Component({
      selector: 'app-root', selector: 'app-root',
      ...@@ -11,6 +12,7 @@ export class AppComponent implements OnInit { ...@@ -11,6 +12,7 @@ export class AppComponent implements OnInit {
      view = 'desktopView'; view = 'desktopView';
      ngOnInit(): void { ngOnInit(): void {
      AOS.init();
      const width = window.innerWidth; const width = window.innerWidth;
      this.setView(width); this.setView(width);
      } }
      ......
      src/app/app.module.ts
      View file @ bcdc6425
      ...@@ -63,7 +63,7 @@ import {ViewModus} from './dao/viewModus'; ...@@ -63,7 +63,7 @@ import {ViewModus} from './dao/viewModus';
      MatIconModule, MatIconModule,
      MatTooltipModule, MatTooltipModule,
      MatTableModule, MatTableModule,
      MatTreeModule MatTreeModule,
      ], ],
      providers: [ providers: [
      IsAllowedToPlay, IsAllowedToPlay,
      ......
      src/app/error/error.component.html
      View file @ bcdc6425
      <mat-card class="transparent"> <div data-aos="zoom-out" data-aos-duration="500">
      <h3> <mat-card class="transparent">
      Leider konnte die Seite nicht erreicht werden, bitte überprüfen Sie den Link oder kehren Sie auf die <a (click)="toStartpage()">Startseite</a> zurück <mat-card-title>Ups... Error 404</mat-card-title>
      </h3> <mat-card-subtitle>Leider konnte die Seite nicht erreicht werden. Bitte überprüfen Sie den Link oder kehren Sie auf die Startseite zurück.</mat-card-subtitle>
      </mat-card> <mat-card-content>
      <button mat-raised-button color="primary" (click)="goToStartpage()">Zur Startseite</button>
      </mat-card-content>
      </mat-card>
      </div>
      <br> <br>
      <mat-progress-spinner color="primary" mode="determinate" value="value"> <mat-progress-spinner color="primary" mode="determinate" value="value">
      </mat-progress-spinner> </mat-progress-spinner>
      ......
      src/app/error/error.component.ts
      View file @ bcdc6425
      ...@@ -13,7 +13,7 @@ export class ErrorComponent implements OnInit { ...@@ -13,7 +13,7 @@ export class ErrorComponent implements OnInit {
      ngOnInit(): void { ngOnInit(): void {
      } }
      toStartpage(): void { goToStartpage(): void {
      this.router.navigate(['']); this.router.navigate(['']);
      } }
      } }
      src/app/game/game.component.html
      View file @ bcdc6425
      <div *ngIf="view !== 'desktopView'" style="margin-top: -4.25em;"> <div data-aos="zoom-out" data-aos-duration="250">
      <mat-progress-spinner style="border-radius: 50%;" class = "center white transparent" color="primary" mode="determinate" value={{timeLeft}} aria-label="Rating"> <div *ngIf="view !== 'desktopView'" style="margin-top: -4.25em;">
      </mat-progress-spinner> <mat-progress-spinner style="border-radius: 50%;" class = "center white transparent" color="primary" mode="determinate" value={{timeLeft}} aria-label="Rating">
      <mat-card-content class = "timer">{{timeRemaining}}</mat-card-content> </mat-progress-spinner>
      <br> <mat-card-content class = "timer">{{timeRemaining}}</mat-card-content>
      </div> <br>
      <div *ngIf="view === 'desktopView'" class="TimerLeft" style="margin-top: -4.25em; margin-right: -11.5em; margin-left: auto"> </div>
      <mat-progress-spinner style="border-radius: 50%;" class = "white transparent" 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> <mat-progress-spinner style="border-radius: 50%;" class = "white transparent" color="primary" mode="determinate" value={{timeLeft}} aria-label="Rating">
      <mat-card-content class = "timer">{{timeRemaining}}</mat-card-content> </mat-progress-spinner>
      <mat-card-content class = "timer">{{timeRemaining}}</mat-card-content>
      </div>
      </div> </div>
      <div style="text-align: center; margin-top: -3em;"> <div data-aos="zoom-out" data-aos-duration="250">
      <mat-card> <div style="text-align: center; margin-top: -3em;">
      <mat-card-title> <mat-card>
      {{cardInfo.solution}} <mat-card-title>
      </mat-card-title> {{cardInfo.solution}}
      </mat-card> </mat-card-title>
      </mat-card>
      <br> <br>
      <mat-card> <mat-card>
      <h2> <h2>
      {{cardInfo.tabu1}} {{cardInfo.tabu1}}
      </h2> </h2>
      </mat-card> </mat-card>
      <mat-card> <mat-card>
      <h2> <h2>
      {{cardInfo.tabu2}} {{cardInfo.tabu2}}
      </h2> </h2>
      </mat-card> </mat-card>
      <mat-card> <mat-card>
      <h2> <h2>
      {{cardInfo.tabu3}} {{cardInfo.tabu3}}
      </h2> </h2>
      </mat-card> </mat-card>
      <mat-card> <mat-card>
      <h2> <h2>
      {{cardInfo.tabu4}} {{cardInfo.tabu4}}
      </h2> </h2>
      </mat-card> </mat-card>
      <mat-card> <mat-card>
      <h2> <h2>
      {{cardInfo.tabu5}} {{cardInfo.tabu5}}
      </h2> </h2>
      </mat-card> </mat-card>
      <br> <br>
      <div class="marginButtons"> <div class="marginButtons" data-aos="zoom-out" data-aos-duration="1000">
      <button class="marginButtonRight" *ngIf="isExplainer" mat-raised-button color="primary" (click)="rightAnswer()">Richtig &#10004;</button> <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> <button class="marginButtonLeft marginButtonRight" *ngIf="isExplainer" mat-raised-button color="accent" (click)="skipCard()">Überspringen &#187;</button>
      <a *ngIf="!isExplainer" class="marginButtonRight"></a> <a *ngIf="!isExplainer" class="marginButtonRight"></a>
      <button class="marginButtonLeft" mat-raised-button color="warn" [disabled]="PressTaboohDisabled" (click)="wrongAnswer()">Tabooh &#10008;</button> <button class="marginButtonLeft" mat-raised-button color="warn" [disabled]="PressTaboohDisabled" (click)="wrongAnswer()">Tabooh &#10008;</button>
      </div>
      <br>
      <br>
      <mat-card class="transparent">
      <mat-card-title>Spielstand</mat-card-title>
      <mat-card-content>
      <table>
      <tr>
      <th>Team rot</th>
      <th>Team blau</th>
      </tr>
      <tr>
      <th class = "red">{{gameStatus.red}}</th>
      <th class = "blue">{{gameStatus.blue}}</th>
      </tr>
      </table>
      </mat-card-content>
      </mat-card>
      </div> </div>
      <br>
      <br>
      <mat-card class="transparent">
      <mat-card-title>Spielstand</mat-card-title>
      <mat-card-content>
      <table>
      <tr>
      <th>Team rot</th>
      <th>Team blau</th>
      </tr>
      <tr>
      <th class = "red">{{gameStatus.red}}</th>
      <th class = "blue">{{gameStatus.blue}}</th>
      </tr>
      </table>
      </mat-card-content>
      </mat-card>
      </div> </div>
      <br> <br>
      <br> <br>
      ......
      src/app/guesser/guesser.component.html
      View file @ bcdc6425
      <mat-card class="transparent"> <div data-aos="zoom-out" data-aos-duration="250">
      <mat-card-title> Du musst raten! <mat-card class="transparent">
      <mat-card-title> Du musst raten!
      <br>
      <br>
      <br>
      Spielstand</mat-card-title>
      <mat-card-content>
      <br>
      <table>
      <tr>
      <th>Team rot</th>
      <th>Team blau</th>
      </tr>
      <tr>
      <th class = "red">{{gameStatus.red}}</th>
      <th class = "blue">{{gameStatus.blue}}</th>
      </tr>
      </table>
      </mat-card-content>
      <br> <br>
      <br> <mat-progress-spinner style="border-radius: 50%;" class = "center" color="primary" mode="determinate" value={{timeLeft}} aria-label="Rating">
      <br>
      Spielstand</mat-card-title>
      <mat-card-content>
      <br>
      <table>
      <tr>
      <th>Team rot</th>
      <th>Team blau</th>
      </tr>
      <tr>
      <th class = "red">{{gameStatus.red}}</th>
      <th class = "blue">{{gameStatus.blue}}</th>
      </tr>
      </table>
      </mat-card-content>
      <br>
      <mat-progress-spinner style="border-radius: 50%;" class = "center" 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>
      </mat-card> </mat-card>
      </div>
      <br> <br>
      <br> <br>
      <br> <br>
      ......
      src/app/impressum/impressum.component.html
      View file @ bcdc6425
      <mat-card class="transparent"> <div data-aos="zoom-in" data-aos-duration="250">
      <mat-card-title> <mat-card class="transparent">
      Impressum <mat-card-title>
      </mat-card-title> Impressum
      <mat-card-subtitle> </mat-card-title>
      Angaben gemäß § 5 TMG <mat-card-subtitle>
      </mat-card-subtitle> Angaben gemäß § 5 TMG
      <mat-card-content> </mat-card-subtitle>
      <p> <mat-card-content>
      Dennis Willers<br> <p>
      Waldstraße 1<br> Dennis Willers<br>
      53842 Troisdorf<br> Waldstraße 1<br>
      </p> 53842 Troisdorf<br>
      </p>
      <p> <p>
      <b>Vertreten durch:<br></b> <b>Vertreten durch:<br></b>
      Dennis Willers<br> Dennis Willers<br>
      Isabell Heider<br> Isabell Heider<br>
      </p> </p>
      <p><b>Kontakt:</b><br> <p><b>Kontakt:</b><br>
      Telefon: 02241-3963477<br> Telefon: 02241-3963477<br>
      E-Mail: dennis@willers.digital<br> E-Mail: dennis@willers.digital<br>
      </p> </p>
      </mat-card-content> </mat-card-content>
      </mat-card> </mat-card>
      </div>
      <br> <br>
      <br> <br>
      <br> <br>
      <mat-card class="transparent"> <div data-aos="zoom-out-left" data-aos-duration="500">
      <mat-card-title> <mat-card class="transparent">
      <h2>Haftungsausschluss:</h2> <mat-card-title>
      </mat-card-title> <h2>Haftungsausschluss:</h2>
      <mat-card-subtitle> </mat-card-title>
      Haftung für Inhalte <mat-card-subtitle>
      </mat-card-subtitle> Haftung für Inhalte
      <mat-card-content> </mat-card-subtitle>
      Die Inhalte unserer Seiten wurden mit größter Sorgfalt erstellt. Für die Richtigkeit, Vollständigkeit und Aktualität der Inhalte können wir jedoch keine Gewähr übernehmen. Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen. Verpflichtungen zur Entfernung oder Sperrung der Nutzung von Informationen nach den allgemeinen Gesetzen bleiben hiervon unberührt. Eine diesbezügliche Haftung ist jedoch erst ab dem Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung möglich. Bei Bekanntwerden von entsprechenden Rechtsverletzungen werden wir diese Inhalte umgehend entfernen. <mat-card-content>
      </mat-card-content> Die Inhalte unserer Seiten wurden mit größter Sorgfalt erstellt. Für die Richtigkeit, Vollständigkeit und Aktualität der Inhalte können wir jedoch keine Gewähr übernehmen. Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen. Verpflichtungen zur Entfernung oder Sperrung der Nutzung von Informationen nach den allgemeinen Gesetzen bleiben hiervon unberührt. Eine diesbezügliche Haftung ist jedoch erst ab dem Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung möglich. Bei Bekanntwerden von entsprechenden Rechtsverletzungen werden wir diese Inhalte umgehend entfernen.
      <mat-card-subtitle> </mat-card-content>
      Urheberrecht <mat-card-subtitle>
      </mat-card-subtitle> Urheberrecht
      <mat-card-content> </mat-card-subtitle>
      Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung des jeweiligen Autors bzw. Erstellers. Downloads und Kopien dieser Seite sind nur für den privaten, nicht kommerziellen Gebrauch gestattet. Soweit die Inhalte auf dieser Seite nicht vom Betreiber erstellt wurden, werden die Urheberrechte Dritter beachtet. Insbesondere werden Inhalte Dritter als solche gekennzeichnet. Sollten Sie trotzdem auf eine Urheberrechtsverletzung aufmerksam werden, bitten wir um einen entsprechenden Hinweis. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Inhalte umgehend entfernen. <mat-card-content>
      </mat-card-content> Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung des jeweiligen Autors bzw. Erstellers. Downloads und Kopien dieser Seite sind nur für den privaten, nicht kommerziellen Gebrauch gestattet. Soweit die Inhalte auf dieser Seite nicht vom Betreiber erstellt wurden, werden die Urheberrechte Dritter beachtet. Insbesondere werden Inhalte Dritter als solche gekennzeichnet. Sollten Sie trotzdem auf eine Urheberrechtsverletzung aufmerksam werden, bitten wir um einen entsprechenden Hinweis. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Inhalte umgehend entfernen.
      <mat-card-subtitle> </mat-card-content>
      Datenschutz <mat-card-subtitle>
      </mat-card-subtitle> Datenschutz
      <mat-card-content> </mat-card-subtitle>
      <p>Die Nutzung unserer Webseite ist in der Regel ohne Angabe personenbezogener Daten möglich. Soweit auf unseren Seiten personenbezogene Daten (beispielsweise Name, Anschrift oder eMail-Adressen) erhoben werden, erfolgt dies, soweit möglich, stets auf freiwilliger Basis. Diese Daten werden ohne Ihre ausdrückliche Zustimmung nicht an Dritte weitergegeben.<br> <mat-card-content>
      Wir weisen darauf hin, dass die Datenübertragung im Internet (z.B. bei der Kommunikation per E-Mail) Sicherheitslücken aufweisen kann. Ein lückenloser Schutz der Daten vor dem Zugriff durch Dritte ist nicht möglich.<br> <p>Die Nutzung unserer Webseite ist in der Regel ohne Angabe personenbezogener Daten möglich. Soweit auf unseren Seiten personenbezogene Daten (beispielsweise Name, Anschrift oder eMail-Adressen) erhoben werden, erfolgt dies, soweit möglich, stets auf freiwilliger Basis. Diese Daten werden ohne Ihre ausdrückliche Zustimmung nicht an Dritte weitergegeben.<br>
      Der Nutzung von im Rahmen der Impressumspflicht veröffentlichten Kontaktdaten durch Dritte zur Übersendung von nicht ausdrücklich angeforderter Werbung und Informationsmaterialien wird hiermit ausdrücklich widersprochen. Die Betreiber der Seiten behalten sich ausdrücklich rechtliche Schritte im Falle der unverlangten Zusendung von Werbeinformationen, etwa durch Spam-Mails, vor.</p> Wir weisen darauf hin, dass die Datenübertragung im Internet (z.B. bei der Kommunikation per E-Mail) Sicherheitslücken aufweisen kann. Ein lückenloser Schutz der Daten vor dem Zugriff durch Dritte ist nicht möglich.<br>
      Der Nutzung von im Rahmen der Impressumspflicht veröffentlichten Kontaktdaten durch Dritte zur Übersendung von nicht ausdrücklich angeforderter Werbung und Informationsmaterialien wird hiermit ausdrücklich widersprochen. Die Betreiber der Seiten behalten sich ausdrücklich rechtliche Schritte im Falle der unverlangten Zusendung von Werbeinformationen, etwa durch Spam-Mails, vor.</p>
      Impressum vom <a href="https://www.impressum-generator.de">Impressum Generator</a> der <a href="https://www.kanzlei-hasselbach.de/standorte/bonn/">Kanzlei Hasselbach, Bonn</a> Impressum vom <a href="https://www.impressum-generator.de">Impressum Generator</a> der <a href="https://www.kanzlei-hasselbach.de/standorte/bonn/">Kanzlei Hasselbach, Bonn</a>
      </mat-card-content> </mat-card-content>
      </mat-card> </mat-card>
      </div>
      <br> <br>
      <br> <br>
      <br> <br>
      <mat-card class="transparent"> <div data-aos="zoom-out-right" data-aos-duration="250">
      <mat-card-subtitle>Tabooh-Version: 2.0</mat-card-subtitle> <mat-card class="transparent">
      <mat-card-subtitle>Zuletzt geändert am: 15.02.2021</mat-card-subtitle> <mat-card-subtitle>Tabooh-Version: 2.0</mat-card-subtitle>
      <mat-card-content> <mat-card-subtitle>Zuletzt geändert am: 15.02.2021</mat-card-subtitle>
      <button mat-raised-button color="primary" (click)="goToStartpage()">Zur Startseite</button> <mat-card-content>
      </mat-card-content> <button mat-raised-button color="primary" (click)="goToStartpage()">Zur Startseite</button>
      </mat-card> </mat-card-content>
      </mat-card>
      </div>
      <br> <br>
      <br> <br>
      <br> <br>
      src/app/overview/overview.component.html
      View file @ bcdc6425
      <mat-card *ngIf="scrolled === 1" class="fixed-content transparent" [ngStyle]="{'width.px': matCard.offsetWidth}"> <div data-aos="zoom-out" data-aos-duration="750">
      <mat-card-title>Spielstand</mat-card-title> <mat-card *ngIf="scrolled === 1" class="fixed-content transparent" [ngStyle]="{'width.px': matCard.offsetWidth}">
      <mat-card-content> <mat-card-title>Spielstand</mat-card-title>
      <br> <mat-card-content>
      <table> <br>
      <tr> <table>
      <th>Team rot</th> <tr>
      <th>Team blau</th> <th>Team rot</th>
      </tr> <th>Team blau</th>
      <tr> </tr>
      <th class = "redfont">{{gameStatus.red}}</th> <tr>
      <th class = "bluefont">{{gameStatus.blue}}</th> <th class = "redfont">{{gameStatus.red}}</th>
      </tr> <th class = "bluefont">{{gameStatus.blue}}</th>
      </table> </tr>
      </mat-card-content> </table>
      </mat-card> </mat-card-content>
      </mat-card>
      <mat-card class="transparent"> <mat-card class="transparent">
      <div class="FloatLeftAndCenterElement"> <div class="FloatLeftAndCenterElement">
      <div *ngIf="view === 'mobileView'" class="textMobileView"> <div *ngIf="view === 'mobileView'" class="textMobileView">
      <button matTooltip="Neues Spiel starten" [disabled]="buttonNewGameDisabled || gameStatus.activeExplainer == 1" mat-raised-button color="primary" (click)="startGame()"> <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> <mat-icon color = "white" aria-hidden="false">autorenew</mat-icon>
      </button> </button>
      </div>
      <br *ngIf="view === 'mobileView'">
      <br *ngIf="view === 'mobileView'">
      <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 *ngIf="view === 'mobileView'" class="textMobileView">{{membership}}</h2>
      <h2 *ngIf="view !== 'mobileView'">{{membership}}</h2>
      </div>
      </div> </div>
      <br *ngIf="view === 'mobileView'"> <button mat-raised-button class = "{{red}}" (click)="joinTeam('red')">
      <br *ngIf="view === 'mobileView'"> <mat-icon color = "warn" aria-hidden="false" aria-label="home icon red">home</mat-icon>
      <div *ngIf="view !== 'mobileView'" class="newStartButtonLeft"> </button>
      <button matTooltip="Neues Spiel starten" [disabled]="buttonNewGameDisabled || gameStatus.activeExplainer == 1" mat-raised-button color="primary" (click)="startGame()"> <button mat-raised-button class = "{{blue}}" (click)="joinTeam('blue')">
      <mat-icon color = "white" aria-hidden="false">autorenew</mat-icon> <mat-icon style="color: darkblue" aria-hidden="false" aria-label="home icon blue">home</mat-icon>
      </button> </button>
      </div> </mat-card>
      <div class="CenterText"> <br>
      <h2 *ngIf="view === 'mobileView'" class="textMobileView">{{membership}}</h2> <br>
      <h2 *ngIf="view !== 'mobileView'">{{membership}}</h2> <br>
      </div> <mat-card class="transparent">
      </div> <mat-card-title #matCard >Spielstand</mat-card-title>
      <button mat-raised-button class = "{{red}}" (click)="joinTeam('red')"> <mat-card-content>
      <mat-icon color = "warn" aria-hidden="false" aria-label="home icon red">home</mat-icon> <br>
      </button> <table>
      <button mat-raised-button class = "{{blue}}" (click)="joinTeam('blue')"> <tr>
      <mat-icon style="color: darkblue" aria-hidden="false" aria-label="home icon blue">home</mat-icon> <th>Team rot</th>
      </button> <th>Team blau</th>
      </mat-card> </tr>
      <br> <tr>
      <br> <th class = "redfont">{{gameStatus.red}}</th>
      <br> <th class = "bluefont">{{gameStatus.blue}}</th>
      <mat-card class="transparent"> </tr>
      <mat-card-title #matCard >Spielstand</mat-card-title> </table>
      <mat-card-content> </mat-card-content>
      <br> <mat-card-actions>
      <table> <br>
      <tr> <br>
      <th>Team rot</th> <div *ngIf="isActiveRound" class="spinner-wrapper">
      <th>Team blau</th> <mat-card-title class="rightPlace">Warten auf nächste Runde</mat-card-title>
      </tr> <mat-spinner diameter="30"></mat-spinner>
      <tr> </div>
      <th class = "redfont">{{gameStatus.red}}</th> <mat-card-title *ngIf="!isActiveRound">{{nextTeam}} ist am Zug:</mat-card-title>
      <th class = "bluefont">{{gameStatus.blue}}</th> <br>
      </tr> <button [disabled]="buttonNextRoundDisabled || gameStatus.activeExplainer == 1" mat-raised-button color="primary" (click)="nextRound()">Ich erkläre und los!</button>
      </table> </mat-card-actions>
      </mat-card-content> </mat-card>
      <mat-card-actions> </div>
      <br>
      <br>
      <div *ngIf="isActiveRound" class="spinner-wrapper">
      <mat-card-title class="rightPlace">Warten auf nächste Runde</mat-card-title>
      <mat-spinner diameter="30"></mat-spinner>
      </div>
      <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>
      </mat-card-actions>
      </mat-card>
      <br> <br>
      <br> <br>
      <br> <br>
      <mat-card class="transparent" *ngIf="history.length > 0"> <div *ngIf="history.length > 0" data-aos="zoom-out" data-aos-duration="750">
      <mat-card-title>Spielverlauf</mat-card-title> <mat-card class="transparent" *ngIf="history.length > 0">
      <mat-card-subtitle>Stimmt das Ergebnis nicht?<br>Dann überprüfe den Spielverlauf und passe die Antworten gegebenenfalls an</mat-card-subtitle> <mat-card-title>Spielverlauf</mat-card-title>
      </mat-card> <mat-card-subtitle>Stimmt das Ergebnis nicht?<br>Dann überprüfe den Spielverlauf und passe die Antworten gegebenenfalls an</mat-card-subtitle>
      </mat-card>
      </div>
      <a *ngFor="let r of getArrayRounds(); let i = index;"> <a *ngFor="let r of getArrayRounds(); let i = index;">
      <br> <br>
      <app-round-history <app-round-history
      ......
      src/app/overview/overview.component.ts
      View file @ bcdc6425
      import {Component, HostListener, Input, OnChanges, OnDestroy, OnInit, SimpleChanges} from '@angular/core'; import {Component, HostListener, OnDestroy, OnInit} from '@angular/core';
      import {ActivatedRoute, Router} from '@angular/router'; import {ActivatedRoute, Router} from '@angular/router';
      import {TabuMiddlewareService} from '../dao/TabuMiddlewareService'; import {TabuMiddlewareService} from '../dao/TabuMiddlewareService';
      import {GameStatus} from '../interface/gameStatus'; import {GameStatus} from '../interface/gameStatus';
      ...@@ -7,6 +7,7 @@ import {SocketDataService} from '../dao/socketDataService'; ...@@ -7,6 +7,7 @@ import {SocketDataService} from '../dao/socketDataService';
      import {Subject} from 'rxjs'; import {Subject} from 'rxjs';
      import {takeUntil} from 'rxjs/operators'; import {takeUntil} from 'rxjs/operators';
      import {ViewModus} from '../dao/viewModus'; import {ViewModus} from '../dao/viewModus';
      import {Location} from '@angular/common';
      @Component({ @Component({
      selector: 'app-overview', selector: 'app-overview',
      ...@@ -48,6 +49,7 @@ export class OverviewComponent implements OnInit, OnDestroy { ...@@ -48,6 +49,7 @@ export class OverviewComponent implements OnInit, OnDestroy {
      scrollLimit = 290; scrollLimit = 290;
      constructor(private router: Router, constructor(private router: Router,
      private location: Location,
      private activatedRoute: ActivatedRoute, private activatedRoute: ActivatedRoute,
      private service: TabuMiddlewareService, private service: TabuMiddlewareService,
      private isAllowedToPlay: IsAllowedToPlay, private isAllowedToPlay: IsAllowedToPlay,
      ...@@ -71,25 +73,7 @@ export class OverviewComponent implements OnInit, OnDestroy { ...@@ -71,25 +73,7 @@ export class OverviewComponent implements OnInit, OnDestroy {
      if (!JSON.parse(value.status)) { if (!JSON.parse(value.status)) {
      this.router.navigate(['error']); this.router.navigate(['error']);
      } else { } else {
      if (this.team === 'red'){ this.selectTeam();
      this.membership = 'Du gehörst zu Team rot!';
      this.buttonNewGameDisabled = false;
      this.red = 'red';
      this.blue = 'choose';
      }
      else if (this.team === 'blue'){
      this.membership = 'Du gehörst zu Team blau!';
      this.buttonNewGameDisabled = false;
      this.blue = 'blue';
      this.red = 'choose';
      }
      else if (this.team === 'null'){
      this.membership = 'Wähle dein Team';
      }
      else {
      this.router.navigate(['error']);
      return;
      }
      this.getGameStatus(); this.getGameStatus();
      } }
      }); });
      ...@@ -142,6 +126,39 @@ export class OverviewComponent implements OnInit, OnDestroy { ...@@ -142,6 +126,39 @@ export class OverviewComponent implements OnInit, OnDestroy {
      }); });
      } }
      selectTeam(): void {
      if (this.team === 'red'){
      this.membership = 'Du gehörst zu Team rot!';
      this.buttonNewGameDisabled = false;
      this.red = 'red';
      this.blue = 'choose';
      }
      else if (this.team === 'blue'){
      this.membership = 'Du gehörst zu Team blau!';
      this.buttonNewGameDisabled = false;
      this.blue = 'blue';
      this.red = 'choose';
      }
      else if (this.team === 'null'){
      this.membership = 'Wähle dein Team';
      }
      else {
      this.router.navigate(['error']);
      return;
      }
      }
      canStartGame(): void {
      if (this.gameStatus.redTurn){
      this.nextTeam = 'Rot';
      this.buttonNextRoundDisabled = this.team !== 'red';
      }
      else{
      this.nextTeam = 'Blau';
      this.buttonNextRoundDisabled = this.team !== 'blue';
      }
      }
      startGame(): void { startGame(): void {
      if (this.team === 'red' || this.team === 'blue') { if (this.team === 'red' || this.team === 'blue') {
      this.service.newGame({spielname: this.sessionName}).then(value => { this.service.newGame({spielname: this.sessionName}).then(value => {
      ...@@ -168,7 +185,9 @@ export class OverviewComponent implements OnInit, OnDestroy { ...@@ -168,7 +185,9 @@ export class OverviewComponent implements OnInit, OnDestroy {
      joinTeam(team: string): void { joinTeam(team: string): void {
      this.team = team; this.team = team;
      this.unsubscribeAll(); this.unsubscribeAll();
      this.router.navigate([this.sessionName + '/' + team]); this.location.replaceState(this.sessionName + '/' + team);
      this.selectTeam();
      this.canStartGame();
      } }
      getGameStatus(): void { getGameStatus(): void {
      ...@@ -188,15 +207,8 @@ export class OverviewComponent implements OnInit, OnDestroy { ...@@ -188,15 +207,8 @@ export class OverviewComponent implements OnInit, OnDestroy {
      this.gameStatus.redTurn = JSON.parse(value.redTurn); this.gameStatus.redTurn = JSON.parse(value.redTurn);
      this.gameStatus.activeExplainer = JSON.parse(value.activeExplainer); this.gameStatus.activeExplainer = JSON.parse(value.activeExplainer);
      this.gameStatus.activeCard = JSON.parse(value.activeCard); this.gameStatus.activeCard = JSON.parse(value.activeCard);
      if (this.gameStatus.redTurn){
      this.nextTeam = 'Rot';
      this.buttonNextRoundDisabled = this.team !== 'red';
      }
      else{
      this.nextTeam = 'Blau';
      this.buttonNextRoundDisabled = this.team !== 'blue';
      }
      this.isActiveRound = this.gameStatus.activeExplainer === 1; this.isActiveRound = this.gameStatus.activeExplainer === 1;
      this.canStartGame();
      } }
      } }
      ......
      src/app/rules/rules.component.html
      View file @ bcdc6425
      This diff is collapsed.
      src/app/select-game/select-game.component.html
      View file @ bcdc6425
      <mat-card class="transparent"> <div data-aos="zoom-in" data-aos-duration="250">
      <h1>Willkommen bei Tabooh im Online-Multiplayer-Modus</h1> <mat-card class="transparent">
      <h2>Ideal im Lockdown!</h2> <h1>Willkommen bei Tabooh im Online-Multiplayer-Modus</h1>
      </mat-card> <h2>Ideal im Lockdown!</h2>
      <br> </mat-card>
      <br> </div>
      <br> <br>
      <mat-card class="transparent"> <br>
      <mat-card-title>Spielsuche</mat-card-title> <br>
      <mat-card-subtitle>Finde ein Spiel über den Raumnamen oder erstelle einen neuen Raum</mat-card-subtitle> <div data-aos="zoom-out-left" data-aos-duration="500">
      <mat-card-content> <mat-card class="transparent">
      <form> <mat-card-title>Spielsuche</mat-card-title>
      <mat-form-field> <mat-card-subtitle>Finde ein Spiel über den Raumnamen oder erstelle einen neuen Raum</mat-card-subtitle>
      <mat-label>Raumname</mat-label> <mat-card-content>
      <input #sessionName type="text" matInput (keyup)="checkSpielname(sessionName.value)" (keypress)="keyPressAlphaNumeric($event)" (keyup.enter)="enter(sessionName.value)"> <form>
      </mat-form-field> <mat-form-field>
      </form> <mat-label>Raumname</mat-label>
      </mat-card-content> <input #sessionName type="text" matInput (keyup)="checkSpielname(sessionName.value)" (keypress)="keyPressAlphaNumeric($event)" (keyup.enter)="enter(sessionName.value)">
      <mat-card-actions> </mat-form-field>
      <button [disabled]="buttonCreateGameDisabled" mat-raised-button color="primary" (click)="createGame(sessionName.value)">Spiel erstellen</button> </form>
      <button [disabled]="buttonJoinGameDisabled" mat-raised-button color="primary" (click)="joinGame(sessionName.value)">Spiel beitreten</button> </mat-card-content>
      </mat-card-actions> <mat-card-actions>
      </mat-card> <button [disabled]="buttonCreateGameDisabled" mat-raised-button color="primary" (click)="createGame(sessionName.value)">Spiel erstellen</button>
      <br> <button [disabled]="buttonJoinGameDisabled" mat-raised-button color="primary" (click)="joinGame(sessionName.value)">Spiel beitreten</button>
      <br> </mat-card-actions>
      <br> </mat-card>
      <mat-card class="transparent"> </div>
      <mat-card-title>Spielregeln</mat-card-title> <br>
      <mat-card-subtitle>Du kennst Tabooh nicht? Mach dich in weniger als drei Minuten mit den Spielregeln vertraut</mat-card-subtitle> <br>
      <mat-card-content> <br>
      <button mat-raised-button color="primary" (click)="goToRules()">Zu den Spielregeln</button> <div data-aos="zoom-out-right" data-aos-duration="750">
      </mat-card-content> <mat-card class="transparent">
      </mat-card> <mat-card-title>Spielregeln</mat-card-title>
      <mat-card-subtitle>Du kennst Tabooh nicht? Mach dich in weniger als drei Minuten mit den Spielregeln vertraut</mat-card-subtitle>
      <mat-card-content>
      <button mat-raised-button color="primary" (click)="goToRules()">Zu den Spielregeln</button>
      </mat-card-content>
      </mat-card>
      </div>
      <br> <br>
      <br> <br>
      <br> <br>
      Markdown is supported
      0% or
      You are about to add 0 people to the discussion. Proceed with caution.
      Finish editing this message first!
      Please register or to comment