Fix the init speed and increase/decrease speed

Author: trungvose

src/app/components/level/level.component.html

@@ -1,4 +1,10 @@
 <p>Level</p>
-<t-number [num]="speed$ | async"
+<t-number *ngIf="hasCurrent$ | async; else initSpeedTmpl"
+          [num]="speed$ | async"
           [length]="1">
-</t-number>
+</t-number>
+<ng-template #initSpeedTmpl>
+    <t-number [num]="initSpeed$ | async"
+              [length]="1">
+    </t-number>
+</ng-template>

src/app/components/level/level.component.ts

@@ -10,9 +10,14 @@ import { TetrisQuery } from '@trungk18/state/tetris/tetris.query';
 })
 export class LevelComponent implements OnInit {
   speed$: Observable<Speed>;
+  initSpeed$: Observable<Speed>;
+  hasCurrent$: Observable<boolean>;
+
   constructor(private _query: TetrisQuery) {}
 
   ngOnInit(): void {
     this.speed$ = this._query.speed$;
+    this.hasCurrent$ = this._query.hasCurrent$;
+    this.initSpeed$ = this._query.initSpeed$;
   }
 }

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

@@ -52,6 +52,7 @@ export class TetrisQuery extends Query<TetrisState> {
   clearedLines$ = this.select('clearedLines');
   initLine$ = this.select('initLine');
   speed$ = this.select('speed');
+  initSpeed$ = this.select('initSpeed');
   max$ = this.select('max');
 
   isShowLogo$ = combineLatest(this.gameState$, this.select('current')).pipe(

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

@@ -46,14 +46,15 @@ export class TetrisService {
       this._setCurrentPiece(this._next);
       this._setNext();
     }
-    let { initLine, speed } = this._query.raw;
+    let { initLine, initSpeed } = this._query.raw;
     this._store.update({
       points: 0,
       gameState: GameState.Started,
-      matrix: MatrixUtil.getStartBoard(initLine)
+      matrix: MatrixUtil.getStartBoard(initLine),
+      speed: initSpeed
     });
     this._unsubscribe();
-    this.auto(MatrixUtil.getSpeedDelay(speed));
+    this.auto(MatrixUtil.getSpeedDelay(initSpeed));
     this._setLocked(false);
   }
 
@@ -153,18 +154,18 @@ export class TetrisService {
   }
 
   decreaseLevel() {
-    let { speed } = this._query.raw;
-    let newSpeed = (speed - 1 < 1 ? 6 : speed - 1) as Speed;
+    let { initSpeed } = this._query.raw;
+    let newSpeed = (initSpeed - 1 < 1 ? 6 : initSpeed - 1) as Speed;
     this._store.update({
-      speed: newSpeed
+      initSpeed: newSpeed
     });
   }
 
   increaseLevel() {
-    let { speed } = this._query.raw;
-    let newSpeed = (speed + 1 > 6 ? 1 : speed + 1) as Speed;
+    let { initSpeed } = this._query.raw;
+    let newSpeed = (initSpeed + 1 > 6 ? 1 : initSpeed + 1) as Speed;
     this._store.update({
-      speed: newSpeed
+      initSpeed: newSpeed
     });
   }
 
@@ -313,10 +314,10 @@ export class TetrisService {
       return;
     }
     this._soundManager.clear();
-    let { points, clearedLines, speed } = this._query.raw;
+    let { points, clearedLines, speed, initSpeed } = this._query.raw;
     let newLines = clearedLines + numberOfClearedLines;
     let newPoints = this._getPoints(numberOfClearedLines, points);
-    let newSpeed = this._getSpeed(newLines);
+    let newSpeed = this._getSpeed(newLines, initSpeed);
 
     this._store.update({
       points: newPoints,
@@ -330,9 +331,11 @@ export class TetrisService {
     }
   }
 
-  private _getSpeed(totalLines: number): Speed {
-    let newSpeed = Math.floor(totalLines / MatrixUtil.Height);    
-    return <Speed>(newSpeed > 6 ? 6 : newSpeed);
+  private _getSpeed(totalLines: number, initSpeed: number): Speed {
+    let addedSpeed = Math.floor(totalLines / MatrixUtil.Height);
+    let newSpeed = <Speed>(initSpeed + addedSpeed);
+    newSpeed = newSpeed > 6 ? 6 : newSpeed;
+    return newSpeed;
   }
 
   private _getPoints(numberOfClearedLines: number, points: number): number {

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

@@ -15,6 +15,7 @@ export interface TetrisState {
   points: number;
   locked: boolean;
   sound: boolean;
+  initSpeed: Speed;
   speed: Speed;
   initLine: number;
   clearedLines: number;
@@ -33,6 +34,7 @@ export function createInitialState(pieceFactory: PieceFactory): TetrisState {
     sound: true,
     initLine: 0,
     clearedLines: 0,
+    initSpeed: 1,
     speed: 1,
     gameState: GameState.Loading,
     saved: null,