Add Animation

bcdc6425 · Dennis Willers · 522d737a · bcdc6425 · bcdc6425 · bcdc6425
Commit bcdc6425 authored Feb 15, 2021 by Dennis Willers 🏀
15 changed files
--- a/angular.json
+++ b/angular.json
@@ -31,10 +31,13 @@
              "src/assets"
            ],
            "styles": [
+              "node_modules/aos/dist/aos.css",
              "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
              "src/styles.scss"
            ],
-            "scripts": []
+            "scripts": [
+              "node_modules/aos/dist/aos.js"
+            ]
          },
          "configurations": {
            "production": {
@@ -95,10 +98,13 @@
              "src/assets"
            ],
            "styles": [
+              "node_modules/aos/dist/aos.css",
              "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
              "src/styles.scss"
            ],
-            "scripts": []
+            "scripts": [
+              "node_modules/aos/dist/aos.js"
+            ]
          }
        },
        "lint": {

--- a/package-lock.json
+++ b/package-lock.json
@@ -1585,6 +1585,11 @@
        "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": {
      "version": "1.2.10",
      "resolved": "https://registry.npmjs.org/@types/component-emitter/-/component-emitter-1.2.10.tgz",
@@ -2027,6 +2032,16 @@
        "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": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/app-root-path/-/app-root-path-3.0.0.tgz",
@@ -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": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
@@ -7213,12 +7233,22 @@
      "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==",
      "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": {
      "version": "4.1.2",
      "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
      "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=",
      "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": {
      "version": "4.5.0",
      "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",

--- a/package.json
+++ b/package.json
@@ -23,11 +23,13 @@
    "@angular/platform-browser": "~11.0.5",
    "@angular/platform-browser-dynamic": "~11.0.5",
    "@angular/router": "~11.0.5",
+    "@types/aos": "^3.0.3",
+    "aos": "^2.3.4",
    "rxjs": "~6.6.0",
    "socket.io": "^3.0.4",
+    "socket.io-client": "latest",
    "tslib": "^2.0.0",
-    "zone.js": "~0.10.2",
-    "socket.io-client": "latest"
+    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1100.5",

--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
 import {Component, HostListener, OnInit} from '@angular/core';
 import {ViewModus} from './dao/viewModus';
+import * as AOS from 'aos';

 @Component({
  selector: 'app-root',
@@ -11,6 +12,7 @@ export class AppComponent implements OnInit {
  view = 'desktopView';

  ngOnInit(): void {
+    AOS.init();
    const width = window.innerWidth;
    this.setView(width);
  }

--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -63,7 +63,7 @@ import {ViewModus} from './dao/viewModus';
    MatIconModule,
    MatTooltipModule,
    MatTableModule,
-    MatTreeModule
+    MatTreeModule,
  ],
  providers: [
    IsAllowedToPlay,

--- a/src/app/error/error.component.html
+++ b/src/app/error/error.component.html
-<mat-card class="transparent">
-  <h3>
-    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
-  </h3>
-</mat-card>
+<div data-aos="zoom-out" data-aos-duration="500">
+  <mat-card class="transparent">
+    <mat-card-title>Ups... Error 404</mat-card-title>
+    <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-content>
+      <button mat-raised-button color="primary" (click)="goToStartpage()">Zur Startseite</button>
+    </mat-card-content>
+  </mat-card>
+</div>
 <br>
 <mat-progress-spinner color="primary" mode="determinate" value="value">
 </mat-progress-spinner>

--- a/src/app/error/error.component.ts
+++ b/src/app/error/error.component.ts
@@ -13,7 +13,7 @@ export class ErrorComponent implements OnInit {
  ngOnInit(): void {
  }

-  toStartpage(): void {
+  goToStartpage(): void {
    this.router.navigate(['']);
  }
 }
--- a/src/app/game/game.component.html
+++ b/src/app/game/game.component.html
-<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="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 data-aos="zoom-out" data-aos-duration="250">
+  <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="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>
 </div>
-<div style="text-align: center; margin-top: -3em;">
-  <mat-card>
-    <mat-card-title>
-      {{cardInfo.solution}}
-    </mat-card-title>
-  </mat-card>
+<div data-aos="zoom-out" data-aos-duration="250">
+  <div style="text-align: center; margin-top: -3em;">
+    <mat-card>
+      <mat-card-title>
+        {{cardInfo.solution}}
+      </mat-card-title>
+    </mat-card>

-  <br>
-  <mat-card>
-    <h2>
-      {{cardInfo.tabu1}}
-    </h2>
-  </mat-card>
-  <mat-card>
-    <h2>
-      {{cardInfo.tabu2}}
-    </h2>
-  </mat-card>
-  <mat-card>
-    <h2>
-      {{cardInfo.tabu3}}
-    </h2>
-  </mat-card>
-  <mat-card>
-    <h2>
-      {{cardInfo.tabu4}}
-    </h2>
-  </mat-card>
-  <mat-card>
-    <h2>
-      {{cardInfo.tabu5}}
-    </h2>
-  </mat-card>
-  <br>
-  <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>
+    <br>
+    <mat-card>
+      <h2>
+        {{cardInfo.tabu1}}
+      </h2>
+    </mat-card>
+    <mat-card>
+      <h2>
+        {{cardInfo.tabu2}}
+      </h2>
+    </mat-card>
+    <mat-card>
+      <h2>
+        {{cardInfo.tabu3}}
+      </h2>
+    </mat-card>
+    <mat-card>
+      <h2>
+        {{cardInfo.tabu4}}
+      </h2>
+    </mat-card>
+    <mat-card>
+      <h2>
+        {{cardInfo.tabu5}}
+      </h2>
+    </mat-card>
+    <br>
+    <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="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">
+      <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>
-  <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>
 <br>
 <br>

--- a/src/app/guesser/guesser.component.html
+++ b/src/app/guesser/guesser.component.html
-<mat-card class="transparent">
-  <mat-card-title> Du musst raten!
+<div data-aos="zoom-out" data-aos-duration="250">
+  <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>
-    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 style="border-radius: 50%;" class = "center" color="primary" mode="determinate" value={{timeLeft}} aria-label="Rating">

-  </mat-progress-spinner>
-  <mat-card-content class = "timer">{{timeRemaining}}</mat-card-content>
-</mat-card>
+    </mat-progress-spinner>
+    <mat-card-content class = "timer">{{timeRemaining}}</mat-card-content>
+  </mat-card>
+</div>
 <br>
 <br>
 <br>

--- a/src/app/impressum/impressum.component.html
+++ b/src/app/impressum/impressum.component.html
-<mat-card class="transparent">
-  <mat-card-title>
-    Impressum
-  </mat-card-title>
-  <mat-card-subtitle>
-    Angaben gemäß § 5 TMG
-  </mat-card-subtitle>
-  <mat-card-content>
-    <p>
-      Dennis Willers<br>
-      Waldstraße 1<br>
-      53842 Troisdorf<br>
-    </p>
+<div data-aos="zoom-in" data-aos-duration="250">
+  <mat-card class="transparent">
+    <mat-card-title>
+      Impressum
+    </mat-card-title>
+    <mat-card-subtitle>
+      Angaben gemäß § 5 TMG
+    </mat-card-subtitle>
+    <mat-card-content>
+      <p>
+        Dennis Willers<br>
+        Waldstraße 1<br>
+        53842 Troisdorf<br>
+      </p>

-    <p>
-      <b>Vertreten durch:<br></b>
-      Dennis Willers<br>
-      Isabell Heider<br>
-    </p>
+      <p>
+        <b>Vertreten durch:<br></b>
+        Dennis Willers<br>
+        Isabell Heider<br>
+      </p>

-    <p><b>Kontakt:</b><br>
-      Telefon: 02241-3963477<br>
-      E-Mail: dennis@willers.digital<br>
-    </p>
-  </mat-card-content>
-</mat-card>
+      <p><b>Kontakt:</b><br>
+        Telefon: 02241-3963477<br>
+        E-Mail: dennis@willers.digital<br>
+      </p>
+    </mat-card-content>
+  </mat-card>
+</div>
 <br>
 <br>
 <br>
-<mat-card class="transparent">
-  <mat-card-title>
-    <h2>Haftungsausschluss:</h2>
-  </mat-card-title>
-  <mat-card-subtitle>
-    Haftung für Inhalte
-  </mat-card-subtitle>
-  <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-content>
-  <mat-card-subtitle>
-    Urheberrecht
-  </mat-card-subtitle>
-  <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-content>
-  <mat-card-subtitle>
-    Datenschutz
-  </mat-card-subtitle>
-  <mat-card-content>
-    <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>
-    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>
+<div data-aos="zoom-out-left" data-aos-duration="500">
+  <mat-card class="transparent">
+    <mat-card-title>
+      <h2>Haftungsausschluss:</h2>
+    </mat-card-title>
+    <mat-card-subtitle>
+      Haftung für Inhalte
+    </mat-card-subtitle>
+    <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-content>
+    <mat-card-subtitle>
+      Urheberrecht
+    </mat-card-subtitle>
+    <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-content>
+    <mat-card-subtitle>
+      Datenschutz
+    </mat-card-subtitle>
+    <mat-card-content>
+      <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>
+        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>
-  </mat-card-content>
-</mat-card>
+      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>
+</div>
 <br>
 <br>
 <br>
-<mat-card class="transparent">
-  <mat-card-subtitle>Tabooh-Version: 2.0</mat-card-subtitle>
-  <mat-card-subtitle>Zuletzt geändert am: 15.02.2021</mat-card-subtitle>
-  <mat-card-content>
-    <button mat-raised-button color="primary" (click)="goToStartpage()">Zur Startseite</button>
-  </mat-card-content>
-</mat-card>
+<div data-aos="zoom-out-right" data-aos-duration="250">
+  <mat-card class="transparent">
+    <mat-card-subtitle>Tabooh-Version: 2.0</mat-card-subtitle>
+    <mat-card-subtitle>Zuletzt geändert am: 15.02.2021</mat-card-subtitle>
+    <mat-card-content>
+      <button mat-raised-button color="primary" (click)="goToStartpage()">Zur Startseite</button>
+    </mat-card-content>
+  </mat-card>
+</div>
 <br>
 <br>
 <br>
--- a/src/app/overview/overview.component.html
+++ b/src/app/overview/overview.component.html
-<mat-card *ngIf="scrolled === 1" class="fixed-content transparent" [ngStyle]="{'width.px': matCard.offsetWidth}">
-  <mat-card-title>Spielstand</mat-card-title>
-  <mat-card-content>
-    <br>
-    <table>
-      <tr>
-        <th>Team rot</th>
-        <th>Team blau</th>
-      </tr>
-      <tr>
-        <th class = "redfont">{{gameStatus.red}}</th>
-        <th class = "bluefont">{{gameStatus.blue}}</th>
-      </tr>
-    </table>
-  </mat-card-content>
-</mat-card>
+<div data-aos="zoom-out" data-aos-duration="750">
+  <mat-card *ngIf="scrolled === 1" class="fixed-content transparent" [ngStyle]="{'width.px': matCard.offsetWidth}">
+    <mat-card-title>Spielstand</mat-card-title>
+    <mat-card-content>
+      <br>
+      <table>
+        <tr>
+          <th>Team rot</th>
+          <th>Team blau</th>
+        </tr>
+        <tr>
+          <th class = "redfont">{{gameStatus.red}}</th>
+          <th class = "bluefont">{{gameStatus.blue}}</th>
+        </tr>
+      </table>
+    </mat-card-content>
+  </mat-card>

-<mat-card class="transparent">
-  <div class="FloatLeftAndCenterElement">
-    <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-card class="transparent">
+    <div class="FloatLeftAndCenterElement">
+      <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>
+      </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>
-    <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>
-  <button mat-raised-button class = "{{red}}" (click)="joinTeam('red')">
-    <mat-icon color = "warn" aria-hidden="false" aria-label="home icon red">home</mat-icon>
-  </button>
-  <button mat-raised-button class = "{{blue}}" (click)="joinTeam('blue')">
-    <mat-icon style="color: darkblue" aria-hidden="false" aria-label="home icon blue">home</mat-icon>
-  </button>
-</mat-card>
-<br>
-<br>
-<br>
-<mat-card class="transparent">
-  <mat-card-title #matCard >Spielstand</mat-card-title>
-  <mat-card-content>
-    <br>
-    <table>
-      <tr>
-        <th>Team rot</th>
-        <th>Team blau</th>
-      </tr>
-      <tr>
-        <th class = "redfont">{{gameStatus.red}}</th>
-        <th class = "bluefont">{{gameStatus.blue}}</th>
-      </tr>
-    </table>
-  </mat-card-content>
-  <mat-card-actions>
-    <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>
+    <button mat-raised-button class = "{{red}}" (click)="joinTeam('red')">
+      <mat-icon color = "warn" aria-hidden="false" aria-label="home icon red">home</mat-icon>
+    </button>
+    <button mat-raised-button class = "{{blue}}" (click)="joinTeam('blue')">
+      <mat-icon style="color: darkblue" aria-hidden="false" aria-label="home icon blue">home</mat-icon>
+    </button>
+  </mat-card>
+  <br>
+  <br>
+  <br>
+  <mat-card class="transparent">
+    <mat-card-title #matCard >Spielstand</mat-card-title>
+    <mat-card-content>
+      <br>
+      <table>
+        <tr>
+          <th>Team rot</th>
+          <th>Team blau</th>
+        </tr>
+        <tr>
+          <th class = "redfont">{{gameStatus.red}}</th>
+          <th class = "bluefont">{{gameStatus.blue}}</th>
+        </tr>
+      </table>
+    </mat-card-content>
+    <mat-card-actions>
+      <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>
+</div>
 <br>
 <br>
 <br>
-<mat-card class="transparent" *ngIf="history.length > 0">
-  <mat-card-title>Spielverlauf</mat-card-title>
-  <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 *ngIf="history.length > 0" data-aos="zoom-out" data-aos-duration="750">
+  <mat-card class="transparent" *ngIf="history.length > 0">
+    <mat-card-title>Spielverlauf</mat-card-title>
+    <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;">
  <br>
  <app-round-history

--- a/src/app/overview/overview.component.ts
+++ b/src/app/overview/overview.component.ts
-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 {TabuMiddlewareService} from '../dao/TabuMiddlewareService';
 import {GameStatus} from '../interface/gameStatus';
@@ -7,6 +7,7 @@ import {SocketDataService} from '../dao/socketDataService';
 import {Subject} from 'rxjs';
 import {takeUntil} from 'rxjs/operators';
 import {ViewModus} from '../dao/viewModus';
+import {Location} from '@angular/common';

 @Component({
  selector: 'app-overview',
@@ -48,6 +49,7 @@ export class OverviewComponent implements OnInit, OnDestroy {
  scrollLimit = 290;

  constructor(private router: Router,
+              private location: Location,
              private activatedRoute: ActivatedRoute,
              private service: TabuMiddlewareService,
              private isAllowedToPlay: IsAllowedToPlay,
@@ -71,25 +73,7 @@ export class OverviewComponent implements OnInit, OnDestroy {
        if (!JSON.parse(value.status)) {
          this.router.navigate(['error']);
        } else {
-          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;
-          }
+          this.selectTeam();
          this.getGameStatus();
        }
      });
@@ -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 {
    if (this.team === 'red' || this.team === 'blue') {
      this.service.newGame({spielname: this.sessionName}).then(value => {
@@ -168,7 +185,9 @@ export class OverviewComponent implements OnInit, OnDestroy {
  joinTeam(team: string): void {
    this.team = team;
    this.unsubscribeAll();
-    this.router.navigate([this.sessionName + '/' + team]);
+    this.location.replaceState(this.sessionName + '/' + team);
+    this.selectTeam();
+    this.canStartGame();
  }

  getGameStatus(): void {
@@ -188,15 +207,8 @@ export class OverviewComponent implements OnInit, OnDestroy {
      this.gameStatus.redTurn = JSON.parse(value.redTurn);
      this.gameStatus.activeExplainer = JSON.parse(value.activeExplainer);
      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.canStartGame();
    }
  }


--- a/src/app/round-history/round-history.component.html
+++ b/src/app/round-history/round-history.component.html
--- a/src/app/rules/rules.component.html
+++ b/src/app/rules/rules.component.html
--- a/src/app/select-game/select-game.component.html
+++ b/src/app/select-game/select-game.component.html
-<mat-card class="transparent">
-  <h1>Willkommen bei Tabooh im Online-Multiplayer-Modus</h1>
-  <h2>Ideal im Lockdown!</h2>
-</mat-card>
-<br>
-<br>
-<br>
-<mat-card class="transparent">
-  <mat-card-title>Spielsuche</mat-card-title>
-  <mat-card-subtitle>Finde ein Spiel über den Raumnamen oder erstelle einen neuen Raum</mat-card-subtitle>
-  <mat-card-content>
-    <form>
-      <mat-form-field>
-        <mat-label>Raumname</mat-label>
-        <input #sessionName type="text" matInput (keyup)="checkSpielname(sessionName.value)" (keypress)="keyPressAlphaNumeric($event)" (keyup.enter)="enter(sessionName.value)">
-      </mat-form-field>
-    </form>
-  </mat-card-content>
-  <mat-card-actions>
-    <button [disabled]="buttonCreateGameDisabled" mat-raised-button color="primary" (click)="createGame(sessionName.value)">Spiel erstellen</button>
-    <button [disabled]="buttonJoinGameDisabled" mat-raised-button color="primary" (click)="joinGame(sessionName.value)">Spiel beitreten</button>
-  </mat-card-actions>
-</mat-card>
-<br>
-<br>
-<br>
-<mat-card class="transparent">
-  <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 data-aos="zoom-in" data-aos-duration="250">
+  <mat-card class="transparent">
+    <h1>Willkommen bei Tabooh im Online-Multiplayer-Modus</h1>
+    <h2>Ideal im Lockdown!</h2>
+  </mat-card>
+</div>
+<br>
+<br>
+<br>
+<div data-aos="zoom-out-left" data-aos-duration="500">
+  <mat-card class="transparent">
+    <mat-card-title>Spielsuche</mat-card-title>
+    <mat-card-subtitle>Finde ein Spiel über den Raumnamen oder erstelle einen neuen Raum</mat-card-subtitle>
+    <mat-card-content>
+      <form>
+        <mat-form-field>
+          <mat-label>Raumname</mat-label>
+          <input #sessionName type="text" matInput (keyup)="checkSpielname(sessionName.value)" (keypress)="keyPressAlphaNumeric($event)" (keyup.enter)="enter(sessionName.value)">
+        </mat-form-field>
+      </form>
+    </mat-card-content>
+    <mat-card-actions>
+      <button [disabled]="buttonCreateGameDisabled" mat-raised-button color="primary" (click)="createGame(sessionName.value)">Spiel erstellen</button>
+      <button [disabled]="buttonJoinGameDisabled" mat-raised-button color="primary" (click)="joinGame(sessionName.value)">Spiel beitreten</button>
+    </mat-card-actions>
+  </mat-card>
+</div>
+<br>
+<br>
+<br>
+<div data-aos="zoom-out-right" data-aos-duration="750">
+  <mat-card class="transparent">
+    <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>