Add Animation

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": {

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",

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",

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);
   }

src/app/app.module.ts

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

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>

src/app/error/error.component.ts

@@ -13,7 +13,7 @@ export class ErrorComponent implements OnInit {
   ngOnInit(): void {
   }
 
-  toStartpage(): void {
+  goToStartpage(): void {
     this.router.navigate(['']);
   }
 }

src/app/game/game.component.html

-<div *ngIf="view !== 'desktopView'" style="margin-top: -4.25em;">
+<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">
+  </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;">
+<div data-aos="zoom-out" data-aos-duration="250">
+  <div style="text-align: center; margin-top: -3em;">
     <mat-card>
       <mat-card-title>
         {{cardInfo.solution}}
@@ -43,7 +46,7 @@
       </h2>
     </mat-card>
     <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="marginButtonLeft marginButtonRight" *ngIf="isExplainer" mat-raised-button color="accent" (click)="skipCard()">Überspringen &#187;</button>
       <a *ngIf="!isExplainer" class="marginButtonRight"></a>
@@ -66,6 +69,7 @@
         </table>
       </mat-card-content>
     </mat-card>
+  </div>
 </div>
 <br>
 <br>

src/app/guesser/guesser.component.html

-<mat-card class="transparent">
+<div data-aos="zoom-out" data-aos-duration="250">
+  <mat-card class="transparent">
     <mat-card-title> Du musst raten!
       <br>
       <br>
@@ -22,7 +23,8 @@
 
     </mat-progress-spinner>
     <mat-card-content class = "timer">{{timeRemaining}}</mat-card-content>
-</mat-card>
+  </mat-card>
+</div>
 <br>
 <br>
 <br>

src/app/impressum/impressum.component.html

-<mat-card class="transparent">
+<div data-aos="zoom-in" data-aos-duration="250">
+  <mat-card class="transparent">
     <mat-card-title>
       Impressum
     </mat-card-title>
@@ -23,11 +24,13 @@
         E-Mail: dennis@willers.digital<br>
       </p>
     </mat-card-content>
-</mat-card>
+  </mat-card>
+</div>
 <br>
 <br>
 <br>
-<mat-card class="transparent">
+<div data-aos="zoom-out-left" data-aos-duration="500">
+  <mat-card class="transparent">
     <mat-card-title>
       <h2>Haftungsausschluss:</h2>
     </mat-card-title>
@@ -53,17 +56,20 @@
 
       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>
+  </mat-card>
+</div>
 <br>
 <br>
 <br>
-<mat-card class="transparent">
+<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>
+  </mat-card>
+</div>
 <br>
 <br>
 <br>

src/app/overview/overview.component.html

-<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 *ngIf="scrolled === 1" class="fixed-content transparent" [ngStyle]="{'width.px': matCard.offsetWidth}">
     <mat-card-title>Spielstand</mat-card-title>
     <mat-card-content>
       <br>
@@ -13,9 +14,9 @@
         </tr>
       </table>
     </mat-card-content>
-</mat-card>
+  </mat-card>
 
-<mat-card class="transparent">
+  <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()">
@@ -40,11 +41,11 @@
     <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>
+  <br>
+  <br>
+  <br>
+  <mat-card class="transparent">
     <mat-card-title #matCard >Spielstand</mat-card-title>
     <mat-card-content>
       <br>
@@ -70,14 +71,17 @@
       <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>
+  </mat-card>
+</div>
 <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 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>
+  </mat-card>
+</div>
 <a *ngFor="let r of getArrayRounds(); let i = index;">
   <br>
   <app-round-history

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();
     }
   }
 

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

-<mat-card *ngIf="roundHistory.length > 0" class="transparent {{redTurn}}">
+<div *ngIf="roundHistory.length > 0" data-aos="fade-up" data-aos-duration="750">
+  <mat-card *ngIf="roundHistory.length > 0" class="transparent {{redTurn}}">
     <mat-card-title>Runde {{round}}</mat-card-title>
-</mat-card>
-<div class="example-container mat-elevation-z8">
+  </mat-card>
+  <div class="example-container mat-elevation-z8">
     <mat-table #table [dataSource]="dataSource">
 
       <!-- Answer Column -->
@@ -225,4 +226,5 @@
                style="overflow: hidden">
       </mat-row>
     </mat-table>
+  </div>
 </div>

src/app/rules/rules.component.html

-<mat-card class="transparent">
+<div data-aos="zoom-in" data-aos-duration="250">
+  <mat-card class="transparent">
     <mat-card-title>Spielregeln</mat-card-title>
-</mat-card>
+  </mat-card>
+</div>
 <br>
 <br>
-<mat-card class="transparent">
+<div data-aos="zoom-out-left" data-aos-duration="500">
+  <mat-card class="transparent">
     <mat-card-title>Voraussetzungen</mat-card-title>
     <mat-card-subtitle>Um Tabooh sinnvoll spielen zu können, müsst ihr</mat-card-subtitle>
     <mat-card-content>
@@ -16,10 +19,12 @@
         </li>
       </ul>
     </mat-card-content>
-</mat-card>
+  </mat-card>
+</div>
 <br>
 <br>
-<mat-card class="transparent">
+<div data-aos="zoom-out-right" data-aos-duration="750">
+  <mat-card class="transparent">
     <mat-card-title>Neues Spiel erstellen</mat-card-title>
     <mat-card-subtitle>Zur Spielvorbereitung solltet ihr wiefolgt vorgehen:</mat-card-subtitle>
     <mat-card-content>
@@ -40,10 +45,12 @@
         </li>
       </ol>
     </mat-card-content>
-</mat-card>
+  </mat-card>
+</div>
 <br>
 <br>
-<mat-card class="transparent">
+<div data-aos="zoom-out-left" data-aos-duration="1000">
+  <mat-card class="transparent">
     <mat-card-title>Prinzip einer Spielrunde</mat-card-title>
     <mat-card-subtitle>Tabooh wird in mehreren Spielrunden gespielt</mat-card-subtitle>
     <mat-card-content>
@@ -119,10 +126,12 @@
         </li>
       </ul>
     </mat-card-content>
-</mat-card>
+  </mat-card>
+</div>
 <br>
 <br>
-<mat-card class="transparent">
+<div data-aos="zoom-out-right" data-aos-duration="500">
+  <mat-card class="transparent">
     <mat-card-title>Spielende</mat-card-title>
     <mat-card-subtitle>Ihr entscheidet wie das Spiel endet</mat-card-subtitle>
     <mat-card-content>
@@ -144,16 +153,19 @@
         </li>
       </ol>
     </mat-card-content>
-</mat-card>
+  </mat-card>
+</div>
 <br>
 <br>
-<mat-card class="transparent">
+<div data-aos="zoom-out-left" data-aos-duration="250">
+  <mat-card class="transparent">
     <mat-card-title>Alles verstanden?</mat-card-title>
     <mat-card-subtitle>Dann mal los!</mat-card-subtitle>
     <mat-card-content>
       <button mat-raised-button color="primary" (click)="goToStartpage()">Zur Startseite</button>
     </mat-card-content>
-</mat-card>
+  </mat-card>
+</div>
 <br>
 <br>
 <br>

src/app/select-game/select-game.component.html

-<mat-card class="transparent">
+<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>
+  </mat-card>
+</div>
 <br>
 <br>
 <br>
-<mat-card class="transparent">
+<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>
@@ -20,17 +23,20 @@
       <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>
+  </mat-card>
+</div>
 <br>
 <br>
 <br>
-<mat-card class="transparent">
+<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>
+  </mat-card>
+</div>
 <br>
 <br>
 <br>