Clear screen animation

Author: trungvose

src/app/components/matrix/matrix.component.ts

@@ -1,7 +1,12 @@
 import { Component, OnInit } from '@angular/core';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { GameState } from '@trungk18/interface/game-state';
 import { Tile } from '@trungk18/interface/tile/tile';
+import { MatrixUtil } from '@trungk18/interface/utils/matrix';
 import { TetrisQuery } from '@trungk18/state/tetris/tetris.query';
-import { Observable } from 'rxjs';
+import { combineLatest, Observable, of, timer } from 'rxjs';
+import { delay, map, startWith, switchMap, takeWhile } from 'rxjs/operators';
+@UntilDestroy()
 @Component({
   selector: 't-matrix',
   templateUrl: './matrix.component.html',
@@ -12,6 +17,41 @@ export class MatrixComponent implements OnInit {
   constructor(private _tetrisQuery: TetrisQuery) {}
 
   ngOnInit(): void {
-    this.matrix$ = this._tetrisQuery.matrix$;
+    this.matrix$ = this.getMatrix();
+  }
+
+  getMatrix(): Observable<Tile[]> {
+    return combineLatest([this._tetrisQuery.gameState$, this._tetrisQuery.matrix$]).pipe(
+      untilDestroyed(this),
+      switchMap(([gameState, matrix]) => {
+        if (gameState !== GameState.Over && gameState !== GameState.Loading) {
+          return of(matrix);
+        }
+        let newMatrix = [...matrix];
+        let rowsLength = MatrixUtil.Height * 2;
+        let animatedMatrix$: Observable<Tile[]> = timer(0, rowsLength).pipe(
+          startWith(0),
+          map((x) => x + 1),
+          takeWhile((x) => x <= rowsLength+1),
+          switchMap((idx) => {
+            let gridIndex = idx - 1;
+            if (gridIndex < MatrixUtil.Height) {
+              newMatrix.splice(
+                gridIndex * MatrixUtil.Width,
+                MatrixUtil.Width,
+                ...MatrixUtil.FullRow
+              );
+            }
+            if (gridIndex > MatrixUtil.Height&& gridIndex <= rowsLength) {
+              let startIdx = (MatrixUtil.Height - (gridIndex - MatrixUtil.Height)) * MatrixUtil.Width;
+              newMatrix.splice(startIdx, MatrixUtil.Width, ...MatrixUtil.EmptyRow);
+            }
+
+            return of(newMatrix)
+          })
+        );
+        return animatedMatrix$;
+      })
+    );
   }
 }

src/app/containers/angular-tetris/angular-tetris.component.html

@@ -4,7 +4,7 @@
     <div class="screen">
         <div class="panel">
             <t-matrix></t-matrix>
-            <t-logo></t-logo>
+            <t-logo *ngIf="isShowLogo$ | async"></t-logo>
             <div class="state">
                 <t-point></t-point>
                 <t-start-line></t-start-line>

src/app/containers/angular-tetris/angular-tetris.component.ts

@@ -15,6 +15,7 @@ const KeyDown = 'document:keydown';
 })
 export class AngularTetrisComponent implements OnInit {
   drop$: Observable<boolean>;
+  isShowLogo$: Observable<boolean>;
 
   get hasCurrent() {
     return !!this._tetrisQuery.current;
@@ -30,6 +31,7 @@ export class AngularTetrisComponent implements OnInit {
 
   ngOnInit(): void {
     this.drop$ = this._keyboardQuery.drop$;
+    this.isShowLogo$ = this._tetrisQuery.isShowLogo$;
   }
 
   keyboardMouseDown(key: string) {

src/app/interface/utils/matrix.ts

@@ -47,6 +47,10 @@ export class MatrixUtil {
     return new Array(this.Width).fill(new EmptyTile());
   }
 
+  static get FullRow(): Tile[] {
+    return new Array(this.Width).fill(new FilledTile());
+  }
+
   static Points = [100, 300, 700, 1500];
   static MaxPoint = 999999;
   static SpeedDelay = [800, 650, 500, 370, 250, 160];

src/app/state/tetris/tetris.query.ts

@@ -2,7 +2,8 @@ import { Injectable } from '@angular/core';
 import { Query } from '@datorama/akita';
 import { TetrisStore, TetrisState } from './tetris.store';
 import { GameState } from '@trungk18/interface/game-state';
-import { map } from 'rxjs/operators';
+import { map, delay } from 'rxjs/operators';
+import { combineLatest } from 'rxjs';
 
 @Injectable({ providedIn: 'root' })
 export class TetrisQuery extends Query<TetrisState> {
@@ -51,4 +52,11 @@ export class TetrisQuery extends Query<TetrisState> {
   clearedLines$ = this.select('clearedLines');
   initLine$ = this.select('initLine');
   speed$ = this.select('speed');
+  isShowLogo$ = combineLatest(this.gameState$, this.select('current')).pipe(
+    map(([state, current]) => {
+      let isLoadingOrOver = state === GameState.Loading || state === GameState.Over;
+      return isLoadingOrOver && !current;
+    }),
+    delay(1700)
+  );
 }

src/app/state/tetris/tetris.service.ts

@@ -223,7 +223,8 @@ export class TetrisService {
   private _onGameOver() {
     this.pause();
     this._store.update({
-      gameState: GameState.Over
+      gameState: GameState.Over,
+      current: null
     });
   }