Refactor to MiniRx Signal Store

package.json

@@ -6,7 +6,7 @@
     "email": "[email protected]",
     "url": "https://github.com/trungk18/angular-tetris"
   },
-  "description": "Tetris game built with Angular and Akita 🎮",
+  "description": "Tetris game built with Angular and MiniRx Signal Store 🎮",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -23,39 +23,37 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~15.0.4",
-    "@angular/common": "~15.0.4",
-    "@angular/compiler": "~15.0.4",
-    "@angular/core": "~15.0.4",
-    "@angular/forms": "~15.0.4",
-    "@angular/platform-browser": "~15.0.4",
-    "@angular/platform-browser-dynamic": "~15.0.4",
-    "@angular/router": "~15.0.4",
-    "@datorama/akita": "^4.22.0",
-    "@ngneat/until-destroy": "^7.3.2",
-    "@sentry/angular": "7.27.0",
-    "@sentry/tracing": "7.27.0",
+    "@angular/animations": "~16.1.4",
+    "@angular/common": "~16.1.4",
+    "@angular/compiler": "~16.1.4",
+    "@angular/core": "~16.1.4",
+    "@angular/forms": "~16.1.4",
+    "@angular/platform-browser": "~16.1.4",
+    "@angular/platform-browser-dynamic": "~16.1.4",
+    "@angular/router": "~16.1.4",
+    "@mini-rx/signal-store": "^0.0.3",
+    "@sentry/angular": "^7.57.0",
+    "@sentry/tracing": "^7.57.0",
     "rxjs": "~6.5.4",
     "tslib": "^2.0.0",
-    "zone.js": "~0.12.0"
+    "zone.js": "~0.13.1"
   },
   "devDependencies": {
-    "@angular-devkit/architect": "^0.1500.4",
-    "@angular-devkit/build-angular": "~15.0.4",
-    "@angular-eslint/builder": "15.1.0",
-    "@angular-eslint/eslint-plugin": "15.1.0",
-    "@angular-eslint/eslint-plugin-template": "15.1.0",
-    "@angular-eslint/schematics": "15.1.0",
-    "@angular-eslint/template-parser": "15.1.0",
-    "@angular/cli": "~15.0.4",
-    "@angular/compiler-cli": "~15.0.4",
-    "@datorama/akita-ngdevtools": "^3.0.2",
+    "@angular-devkit/architect": "^0.1601.4",
+    "@angular-devkit/build-angular": "~16.1.4",
+    "@angular-eslint/builder": "16.0.3",
+    "@angular-eslint/eslint-plugin": "16.0.3",
+    "@angular-eslint/eslint-plugin-template": "16.0.3",
+    "@angular-eslint/schematics": "16.0.3",
+    "@angular-eslint/template-parser": "16.0.3",
+    "@angular/cli": "~16.1.4",
+    "@angular/compiler-cli": "~16.1.4",
     "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "^12.11.1",
-    "@typescript-eslint/eslint-plugin": "^5.43.0",
-    "@typescript-eslint/parser": "^5.43.0",
-    "eslint": "^8.28.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.2",
+    "@typescript-eslint/parser": "^5.59.2",
+    "eslint": "^8.39.0",
     "eslint-plugin-import": "2.25.2",
     "eslint-plugin-jsdoc": "30.7.6",
     "eslint-plugin-prefer-arrow": "1.2.2",
@@ -69,6 +67,6 @@
     "karma-jasmine-html-reporter": "^1.5.0",
     "protractor": "~7.0.0",
     "ts-node": "~8.3.0",
-    "typescript": "~4.8.4"
+    "typescript": "~5.1.6"
   }
 }

src/app/components/button/button.component.html

@@ -2,11 +2,11 @@
      [style.top.px]="top"
      [style.left.px]="left">
 
-    <i [class.active]="active$ | async"></i>
+    <i [class.active]="active$()"></i>
     <em *ngIf="arrowButton"
         [ngStyle]="{'transform': arrowTransforms}"></em>
 
     <span [class.absolute]="isAbsolute">
         <ng-content></ng-content>
     </span>
-</div>
+</div>

src/app/components/button/button.component.ts

@@ -1,5 +1,5 @@
 import { AsyncPipe, NgClass, NgIf, NgStyle } from '@angular/common';
-import { Component, Input } from '@angular/core';
+import { Component, Input, Signal } from '@angular/core';
 import { ArrowButton, ArrowButtonTransform } from '@angular-tetris/interface/ui-model/arrow-button';
 import { Observable } from 'rxjs';
 @Component({
@@ -15,7 +15,7 @@ export class ButtonComponent {
   @Input() top: number;
   @Input() left: number;
 
-  @Input() active$: Observable<boolean>;
+  @Input() active$: Signal<boolean>;
   @Input() arrowButton: ArrowButton;
 
   get arrowTransforms() {

src/app/components/clock/clock.component.ts

@@ -1,11 +1,10 @@
 import { AsyncPipe, NgClass, NgFor } from '@angular/common';
 import { Component } from '@angular/core';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { timer } from 'rxjs';
 import { map } from 'rxjs/operators';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 const REFRESH_CLOCK_INTERVAL = 1000;
-@UntilDestroy()
 @Component({
   selector: 't-clock',
   standalone: true,
@@ -15,7 +14,7 @@ const REFRESH_CLOCK_INTERVAL = 1000;
 })
 export class ClockComponent {
   clock$ = timer(0, REFRESH_CLOCK_INTERVAL).pipe(
-    untilDestroyed(this),
+    takeUntilDestroyed(),
     map(() => this.renderClock())
   );
 

src/app/components/github/github.component.html

@@ -5,7 +5,7 @@
     </div>
     <img atl="QR Code to play on mobile" src="https://res.cloudinary.com/dvujyxh7e/image/upload/v1595380432/angular-tetris-qr-code-no-text.png" />
   </div>
-  <div class="tweet-button top" *ngIf="max$ | async as maxPoint">
+  <div class="tweet-button top" *ngIf="max$() as maxPoint">
     <a t-shared-button [href]="getTweetMaxScoreShareUrl(maxPoint)" (click)="sendTwitterShareMaxScoreEvent()">
       Share Your Score - {{ maxPoint }}
     </a>
@@ -34,4 +34,4 @@
     <iframe src="https://ghbtns.com/github-btn.html?user=trungk18&repo=angular-tetris&type=star&count=true&size=large" frameborder="0" scrolling="0" width="170" height="30" title="Angular Tetris Star">
     </iframe>
   </div>
-</div>
+</div>

src/app/components/github/github.component.ts

@@ -13,7 +13,7 @@ const HASHTAG = 'angular,angulartetris,akita,typescript';
   styleUrls: ['./github.component.scss']
 })
 export class GithubComponent {
-  max$ = this.query.max$;
+  max$ = this.query.max$$;
   //eslint-disable-next-line max-len
   tweetAngularTetrisUrl = `https://twitter.com/intent/tweet?url=https%3A%2F%2Fgithub.com%2Ftrungk18%2Fangular-tetris&text=Awesome%20Tetris%20game%20built%20with%20Angular%2010%20and%20Akita%2C%20can%20you%20get%20999999%20points%3F&hashtags=${HASHTAG}`;
 

src/app/components/hold/hold.component.html

@@ -1,9 +1,9 @@
 <p>Hold</p>
 <div class="hold">
     <div class="row"
-         *ngFor="let row of hold$ | async">
+         *ngFor="let row of hold$$()">
         <t-tile [tile]='tile'
                 *ngFor="let tile of row">
         </t-tile>
     </div>
-</div>
+</div>

src/app/components/hold/hold.component.ts

@@ -1,9 +1,7 @@
 import { AsyncPipe, NgFor } from '@angular/common';
-import { Component } from '@angular/core';
+import { Component, computed, Signal } from '@angular/core';
 import { Tile, TileValue } from '@angular-tetris/interface/tile/tile';
 import { TetrisService } from '@angular-tetris/state/tetris/tetris.service';
-import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
 import { TileComponent } from '../tile/tile.component';
 
 @Component({
@@ -14,9 +12,9 @@ import { TileComponent } from '../tile/tile.component';
   styleUrls: ['./hold.component.scss']
 })
 export class HoldComponent {
-  hold$: Observable<Tile[][]> = this.tetrisService.hold$.pipe(
-    map((piece) => piece.next.map((row) => row.map((value) => new Tile(value as TileValue))))
-  );
+  hold$$: Signal<Tile[][]> = computed(() => {
+    return this.tetrisService.hold$().next.map((row) => row.map((value) => new Tile(value as TileValue)))
+  })
 
   constructor(private tetrisService: TetrisService) {}
 }

src/app/components/keyboard/keyboard.component.html

@@ -1,7 +1,7 @@
 <div class="keyboard"
      [style.margin-top.px]='filling'>
     <t-button className="blue btn-md"
-              [active$]="keyboardQuery.up$"
+              [active$]="keyboardQuery.up$$"
               [arrowButton]="ArrowButton.UP"
               (mousedown)="mouseDown($event, 'Up')"
               (mouseup)="mouseUp($event, 'Up')"
@@ -13,7 +13,7 @@
         Rotation
     </t-button>
     <t-button className="blue btn-md"
-              [active$]="keyboardQuery.down$"
+              [active$]="keyboardQuery.down$$"
               [arrowButton]="ArrowButton.DOWN"
               (mousedown)="mouseDown($event, 'Down')"
               (mouseup)="mouseUp($event, 'Down')"
@@ -24,7 +24,7 @@
         Down
     </t-button>
     <t-button className="blue btn-md"
-              [active$]="keyboardQuery.left$"
+              [active$]="keyboardQuery.left$$"
               [arrowButton]="ArrowButton.LEFT"
               (mousedown)="mouseDown($event, 'Left')"
               (mouseup)="mouseUp($event, 'Left')"
@@ -35,7 +35,7 @@
         Left
     </t-button>
     <t-button className="blue btn-md"
-              [active$]="keyboardQuery.right$"
+              [active$]="keyboardQuery.right$$"
               [arrowButton]="ArrowButton.RIGHT"
               (mousedown)="mouseDown($event, 'Right')"
               (mouseup)="mouseUp($event, 'Right')"
@@ -46,7 +46,7 @@
         Right
     </t-button>
     <t-button className="blue btn-md"
-              [active$]="keyboardQuery.hold$"
+              [active$]="keyboardQuery.hold$$"
               (mousedown)="mouseDown($event, 'Hold')"
               (mouseup)="mouseUp($event, 'Hold')"
               (touchstart)="mouseDown($event, 'Hold')"
@@ -56,7 +56,7 @@
         Hold (C)
     </t-button>
     <t-button className="blue btn-lg"
-              [active$]="keyboardQuery.drop$"
+              [active$]="keyboardQuery.drop$$"
               (mousedown)="mouseDown($event, 'Space')"
               (mouseup)="mouseUp($event, 'Space')"
               (touchstart)="mouseDown($event, 'Space')"
@@ -66,7 +66,7 @@
         Drop (SPACE)
     </t-button>
     <t-button className="red btn-sm"
-              [active$]="keyboardQuery.reset$"
+              [active$]="keyboardQuery.reset$$"
               (mousedown)="mouseDown($event, 'Reset')"
               (mouseup)="mouseUp($event, 'Reset')"
               (touchstart)="mouseDown($event, 'Reset')"
@@ -76,7 +76,7 @@
         Reset (R)
     </t-button>
     <t-button className="green btn-sm"
-              [active$]="keyboardQuery.sound$"
+              [active$]="keyboardQuery.sound$$"
               (mousedown)="mouseDown($event, 'Sound')"
               (mouseup)="mouseUp($event, 'Sound')"
               (touchstart)="mouseDown($event, 'Sound')"
@@ -86,13 +86,13 @@
         Sound (S)
     </t-button>
     <t-button className="green btn-sm"
-              [active$]="keyboardQuery.pause$"
+              [active$]="keyboardQuery.pause$$"
               (mousedown)="mouseDown($event, 'Pause')"
               (mouseup)="mouseUp($event, 'Pause')"
               (touchstart)="mouseDown($event, 'Pause')"
               (touchend)="mouseUp($event, 'Pause')"
               [top]="0"
               [left]="16">
-              {{ pauseButtonLabel$ | async}} (P)
+              {{ pauseButtonLabel$$()}} (P)
     </t-button>
-</div>
+</div>

src/app/components/keyboard/keyboard.component.ts

@@ -1,11 +1,9 @@
 import { AsyncPipe } from '@angular/common';
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, computed, EventEmitter, Input, Output, Signal } from '@angular/core';
 import { GameState } from '@angular-tetris/interface/game-state';
 import { ArrowButton } from '@angular-tetris/interface/ui-model/arrow-button';
 import { KeyboardQuery } from '@angular-tetris/state/keyboard/keyboard.query';
 import { TetrisQuery } from '@angular-tetris/state/tetris/tetris.query';
-import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
 import { ButtonComponent } from '../button/button.component';
 
 @Component({
@@ -20,9 +18,9 @@ export class KeyboardComponent {
   @Output() onMouseDown = new EventEmitter<string>();
   @Output() onMouseUp = new EventEmitter<string>();
   ArrowButton = ArrowButton; //eslint-disable-line @typescript-eslint/naming-convention
-  pauseButtonLabel$: Observable<string> = this.query.gameState$.pipe(
-    map((state) => (state === GameState.Paused ? 'Play' : 'Pause'))
-  );
+  pauseButtonLabel$$: Signal<string> = computed(() => {
+    return this.query.gameState$$() === GameState.Paused ? 'Play' : 'Pause'
+  })
 
   constructor(public keyboardQuery: KeyboardQuery, private query: TetrisQuery) {}
 

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

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

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

@@ -11,9 +11,9 @@ import { NumberComponent } from '../number/number.component';
   styleUrls: ['./level.component.scss']
 })
 export class LevelComponent {
-  speed$ = this.query.speed$;
-  hasCurrent$ = this.query.hasCurrent$;
-  initSpeed$ = this.query.initSpeed$;
+  speed$ = this.query.speed$$;
+  hasCurrent$ = this.query.hasCurrent$$;
+  initSpeed$ = this.query.initSpeed$$;
 
   constructor(private query: TetrisQuery) {}
 }

src/app/components/logo/logo.component.ts

@@ -1,23 +1,22 @@
 import { NgClass } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { concat, Observable, timer } from 'rxjs';
 import { delay, finalize, map, repeat, startWith, takeWhile, tap } from 'rxjs/operators';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
-@UntilDestroy()
 @Component({
   selector: 't-logo',
   standalone: true,
   imports: [NgClass],
   templateUrl: './logo.component.html',
   styleUrls: ['./logo.component.scss']
 })
-export class LogoComponent implements OnInit {
+export class LogoComponent {
   className = '';
 
-  ngOnInit(): void {
+  constructor() {
     concat(this.run(), this.eyes())
-      .pipe(delay(5000), repeat(1000), untilDestroyed(this))
+      .pipe(delay(5000), repeat(1000), takeUntilDestroyed())
       .subscribe();
   }