Store max score to localstorage

Author: trungvose

src/app/components/point/point.component.html

@@ -1,4 +1,4 @@
-<div>
-    <p>Score</p>
-    <t-number [num]="points$ | async"></t-number>
+<div *ngIf="labelAndPoints$ | async as labelAndPoint">
+    <p>{{ labelAndPoint.label }}</p>
+    <t-number [num]="labelAndPoint.points"></t-number>
 </div>

src/app/components/point/point.component.ts

@@ -1,17 +1,43 @@
 import { Component, OnInit } from '@angular/core';
 import { TetrisQuery } from '@trungk18/state/tetris/tetris.query';
-import { Observable } from 'rxjs';
+import { Observable, of, timer } from 'rxjs';
+import { switchMap, map } from 'rxjs/operators';
+import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
 
+const REFRESH_LABEL_INTERVAL = 3000;
+@UntilDestroy()
 @Component({
   selector: 't-point',
   templateUrl: './point.component.html',
   styleUrls: ['./point.component.scss']
 })
 export class PointComponent implements OnInit {
-  points$: Observable<number>;
+  labelAndPoints$: Observable<LabelAndNumber>;
   constructor(private _query: TetrisQuery) {}
 
   ngOnInit(): void {
-    this.points$ = this._query.points$;
+    this.renderLabelAndPoints();
   }
+
+  private renderLabelAndPoints() {
+    this.labelAndPoints$ = this._query.hasCurrent$.pipe(
+      untilDestroyed(this),
+      switchMap((hasCurrent) => {
+        if (hasCurrent) {
+          return of(new LabelAndNumber('Score', this._query.raw.points));
+        }
+        return timer(0, REFRESH_LABEL_INTERVAL).pipe(
+          map((val) => {
+            let isOdd = val % 2 === 0;
+            let { points, max } = this._query.raw;
+            return isOdd ? new LabelAndNumber('Score', points) : new LabelAndNumber('Max ', max);
+          })
+        );
+      })
+    );
+  }
+}
+
+class LabelAndNumber {
+  constructor(public label: string, public points: number) {}
 }

src/app/services/local-storage.service.ts

@@ -0,0 +1,13 @@
+const ANGULAR_TETRIS_STORAGE_KEY = 'ANGULAR_TETRIS';
+export class LocalStorageService {
+  constructor() {}
+
+  static setMaxPoint(max: number) {
+    localStorage.setItem(ANGULAR_TETRIS_STORAGE_KEY, `${max}`);
+  }
+
+  static get maxPoint(): number {
+    let max = parseInt(localStorage.getItem(ANGULAR_TETRIS_STORAGE_KEY));
+    return Number.isInteger(max) ? max : 0;
+  }
+}

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

@@ -12,6 +12,7 @@ import { TetrisQuery } from './tetris.query';
 import { createInitialState, TetrisStore } from './tetris.store';
 import { Speed } from '@trungk18/interface/speed';
 import { SoundManagerService } from '@trungk18/services/sound-manager.service';
+import { LocalStorageService } from '@trungk18/services/local-storage.service';
 
 @Injectable({ providedIn: 'root' })
 export class TetrisService {
@@ -136,7 +137,7 @@ export class TetrisService {
       return;
     }
     while (!this._isCollidesBottom) {
-      this._clearPiece()
+      this._clearPiece();
       this._setCurrentPiece(this._current.store());
       this._setCurrentPiece(this._current.moveDown());
     }
@@ -240,10 +241,15 @@ export class TetrisService {
   private _onGameOver() {
     this.pause();
     this._soundManager.gameOver();
+    let { points, max } = this._query.raw;
+    let maxPoint = Math.max(points, max);
     this._store.update({
       gameState: GameState.Over,
-      current: null
+      current: null,
+      max: maxPoint,
+      points: 0
     });
+    LocalStorageService.setMaxPoint(maxPoint);
   }
 
   private get _isCollidesBottom(): boolean {

src/app/state/tetris/tetris.store.ts

@@ -6,6 +6,7 @@ import { Piece } from '@trungk18/interface/piece/piece';
 import { Tile } from '@trungk18/interface/tile/tile';
 import { MatrixUtil } from '@trungk18/interface/utils/matrix';
 import { Speed } from '@trungk18/interface/speed';
+import { LocalStorageService } from '@trungk18/services/local-storage.service';
 
 export interface TetrisState {
   matrix: Tile[];
@@ -19,6 +20,7 @@ export interface TetrisState {
   clearedLines: number;
   gameState: GameState;
   saved: TetrisState;
+  max: number;
 }
 
 export function createInitialState(pieceFactory: PieceFactory): TetrisState {
@@ -33,7 +35,8 @@ export function createInitialState(pieceFactory: PieceFactory): TetrisState {
     clearedLines: 0,
     speed: 1,
     gameState: GameState.Loading,
-    saved: null
+    saved: null,
+    max: LocalStorageService.maxPoint
   };
 }