Merge pull request #39 from trungk18/trung/standalone-components

Angular standalone components 😏
trungvose · Jan 14, 2023 · d12fc8a · d12fc8a
2 parents 977b903 + 29f6bcc
commit d12fc8a
Show file tree

Hide file tree

Showing 27 changed files with 227 additions and 285 deletions.
diff --git a/README.md b/README.md
@@ -1,19 +1,19 @@
 # Angular Tetris
 
-A childhood memory Tetris game built with Angular 10 and Akita.
+A childhood memory Tetris game built with Angular and Akita.
 
 ## Working Game
 
 Check out the **working game** -> https://tetris.trungk18.com
 
 The game has sounds, wear your 🎧 or turn on your 🔊 for a better experience.
 
-![A childhood memory Tetris game built with Angular 10 and Akita][demo]
+![A childhood memory Tetris game built with Angular and Akita][demo]
 
 > Please tweet and tag me @tuantrungvo for any issues that you are currently facing!
 > Thanks for your understanding. Stay tuned!
 
-![A childhood memory Tetris game built with Angular 10 and Akita][iphonex]
+![A childhood memory Tetris game built with Angular and Akita][iphonex]
 
 ## Support
 

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,8 +1,11 @@
 import { Component } from '@angular/core';
+import { AngularTetrisComponent } from './containers/angular-tetris/angular-tetris.component';
 
 @Component({
-  selector: 'app-root', // eslint-disable-line @angular-eslint/component-selector
-  templateUrl: './app.component.html',
+  standalone: true,
+  selector: 'app-root',//eslint-disable-line
+  imports: [AngularTetrisComponent],
+  template: '<angular-tetris></angular-tetris>',
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
diff --git a/src/app/components/button/button.component.ts b/src/app/components/button/button.component.ts
@@ -1,12 +1,15 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { AsyncPipe, NgClass, NgIf, NgStyle } from '@angular/common';
+import { Component, Input } from '@angular/core';
 import { ArrowButton, ArrowButtonTransform } from '@trungk18/interface/ui-model/arrow-button';
 import { Observable } from 'rxjs';
 @Component({
   selector: 't-button',
+  standalone: true,
+  imports: [NgClass, NgStyle, NgIf, AsyncPipe],
   templateUrl: './button.component.html',
   styleUrls: ['./button.component.scss']
 })
-export class ButtonComponent implements OnInit {
+export class ButtonComponent {
   @Input() className = '';
   @Input() isAbsolute = false;
   @Input() top: number;
@@ -18,8 +21,4 @@ export class ButtonComponent implements OnInit {
   get arrowTransforms() {
     return ArrowButtonTransform[this.arrowButton];
   }
-
-  constructor() {}
-
-  ngOnInit(): void {}
 }
diff --git a/src/app/components/clock/clock.component.ts b/src/app/components/clock/clock.component.ts
@@ -1,26 +1,23 @@
-import { Component, OnInit } from '@angular/core';
+import { AsyncPipe, NgClass, NgFor } from '@angular/common';
+import { Component } from '@angular/core';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
-import { Observable, timer } from 'rxjs';
+import { timer } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 const REFRESH_CLOCK_INTERVAL = 1000;
 @UntilDestroy()
 @Component({
   selector: 't-clock',
+  standalone: true,
+  imports: [NgClass, NgFor, AsyncPipe],
   templateUrl: './clock.component.html',
-  styleUrls: ['./clock.component.scss'],
+  styleUrls: ['./clock.component.scss']
 })
-export class ClockComponent implements OnInit {
-  clock$: Observable<string[]>;
-
-  constructor() {}
-
-  ngOnInit(): void {
-    this.clock$ = timer(0, REFRESH_CLOCK_INTERVAL).pipe(
-      untilDestroyed(this),
-      map(() => this.renderClock())
-    );
-  }
+export class ClockComponent {
+  clock$ = timer(0, REFRESH_CLOCK_INTERVAL).pipe(
+    untilDestroyed(this),
+    map(() => this.renderClock())
+  );
 
   renderClock(): string[] {
     const now = new Date();

diff --git a/src/app/components/github/github.component.html b/src/app/components/github/github.component.html
@@ -3,47 +3,35 @@
     <div class="hint">
       Scan QR code to play with a mobile phone
     </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" />
+    <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">
-    <t-twitter-button [url]="getTweetMaxScoreShareUrl(maxPoint)"
-                      (click)="sendTwitterShareMaxScoreEvent()">
+  <div class="tweet-button top" *ngIf="max$ | async as maxPoint">
+    <a t-shared-button [href]="getTweetMaxScoreShareUrl(maxPoint)" (click)="sendTwitterShareMaxScoreEvent()">
       Share Your Score - {{ maxPoint }}
-    </t-twitter-button>
+    </a>
   </div>
   <div class="tweet-button" title="This is one of my favorite project!">
-    <t-twitter-button [showIcon]="false"
-                      [url]="'https://github.com/trungk18/angular-spotify'">
+    <a t-shared-button [showIcon]="false" [href]="'https://github.com/trungk18/angular-spotify'">
       🎧 Angular Spotify
-    </t-twitter-button>
+    </a>
   </div>
   <div class="tweet-button" title="This is one of my favorite project!">
-    <t-twitter-button [showIcon]="false"
-                      [url]="'https://jira.trungk18.com/'">
+    <a t-shared-button [showIcon]="false" [href]="'https://jira.trungk18.com/'">
       🔨 Angular Jira Clone
-    </t-twitter-button>
+    </a>
   </div>
   <div class="tweet-button" title="Thanks for your support!">
-    <t-twitter-button [showIcon]="false"
-                      [url]="'https://www.buymeacoffee.com/tuantrungvo'">
+    <a t-shared-button [showIcon]="false" [href]="'https://www.buymeacoffee.com/tuantrungvo'">
       🍺 Buy me a beer
-    </t-twitter-button>
+    </a>
   </div>
   <div class="tweet-button" style="margin-top: 2px;">
-    <t-twitter-button [url]="tweetAngularTetrisUrl"
-                      (click)="sendTwitterShareEvent()">
+    <a t-shared-button [href]="tweetAngularTetrisUrl" (click)="sendTwitterShareEvent()">
       Tweet
-    </t-twitter-button>
+    </a>
   </div>
   <div class="star-button">
-    <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 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>
diff --git a/src/app/components/github/github.component.ts b/src/app/components/github/github.component.ts
@@ -1,25 +1,24 @@
-import { Component, OnInit } from '@angular/core';
-import { TetrisQuery } from '@trungk18/state/tetris/tetris.query';
-import { Observable } from 'rxjs';
+import { AsyncPipe, NgIf } from '@angular/common';
+import { Component } from '@angular/core';
 import { GoogleAnalyticsService } from '@trungk18/services/google-analytics.service';
+import { TetrisQuery } from '@trungk18/state/tetris/tetris.query';
+import { SharedButtonComponent } from '../shared-button/shared-button.component';
 const HASHTAG = 'angular,angulartetris,akita,typescript';
 
 @Component({
   selector: 't-github',
+  standalone: true,
+  imports: [SharedButtonComponent, AsyncPipe, NgIf],
   templateUrl: './github.component.html',
   styleUrls: ['./github.component.scss']
 })
-export class GithubComponent implements OnInit {
-  max$: Observable<number>;
+export class GithubComponent {
+  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}`;
 
   constructor(private _query: TetrisQuery, private _googleAnalytics: GoogleAnalyticsService) {}
 
-  ngOnInit(): void {
-    this.max$ = this._query.max$;
-  }
-
   getTweetMaxScoreShareUrl(max: number) {
     const text = encodeURIComponent(
       `Woo-hoo! I got a ${max} points on Angular Tetris @tuantrungvo. Wanna join the party?`

diff --git a/src/app/components/hold/hold.component.ts b/src/app/components/hold/hold.component.ts
@@ -1,21 +1,22 @@
-import { Component, OnInit } from '@angular/core';
+import { AsyncPipe, NgFor } from '@angular/common';
+import { Component } from '@angular/core';
 import { Tile, TileValue } from '@trungk18/interface/tile/tile';
 import { TetrisService } from '@trungk18/state/tetris/tetris.service';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
+import { TileComponent } from '../tile/tile.component';
 
 @Component({
   selector: 't-hold',
+  standalone: true,
+  imports: [NgFor, TileComponent, AsyncPipe],
   templateUrl: './hold.component.html',
   styleUrls: ['./hold.component.scss']
 })
-export class HoldComponent implements OnInit {
-  hold$: Observable<Tile[][]>;
-  constructor(private _tetrisService: TetrisService) {}
+export class HoldComponent {
+  hold$: Observable<Tile[][]> = this._tetrisService.hold$.pipe(
+    map((piece) => piece.next.map((row) => row.map((value) => new Tile(value as TileValue))))
+  );
 
-  ngOnInit(): void {
-    this.hold$ = this._tetrisService.hold$.pipe(
-        map((piece) => piece.next.map((row) => row.map((value) => new Tile(value as TileValue))))
-    );
-  }
+  constructor(private _tetrisService: TetrisService) {}
 }
diff --git a/src/app/components/keyboard/keyboard.component.ts b/src/app/components/keyboard/keyboard.component.ts
@@ -1,30 +1,30 @@
-import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
+import { AsyncPipe } from '@angular/common';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { GameState } from '@trungk18/interface/game-state';
 import { ArrowButton } from '@trungk18/interface/ui-model/arrow-button';
 import { KeyboardQuery } from '@trungk18/state/keyboard/keyboard.query';
-import { GameState } from '@trungk18/interface/game-state';
 import { TetrisQuery } from '@trungk18/state/tetris/tetris.query';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
+import { ButtonComponent } from '../button/button.component';
 
 @Component({
   selector: 't-keyboard',
+  standalone: true,
+  imports: [ButtonComponent, AsyncPipe],
   templateUrl: './keyboard.component.html',
   styleUrls: ['./keyboard.component.scss']
 })
-export class KeyboardComponent implements OnInit {
+export class KeyboardComponent {
   @Input() filling = 20;
   @Output() onMouseDown = new EventEmitter<string>();
   @Output() onMouseUp = new EventEmitter<string>();
-  ArrowButton = ArrowButton;//eslint-disable-line @typescript-eslint/naming-convention
-  pauseButtonLabel$: Observable<string>;
+  ArrowButton = ArrowButton; //eslint-disable-line @typescript-eslint/naming-convention
+  pauseButtonLabel$: Observable<string> = this._query.gameState$.pipe(
+    map((state) => (state === GameState.Paused ? 'Play' : 'Pause'))
+  );
 
-  constructor(public keyboardQuery: KeyboardQuery, private _query: TetrisQuery) { }
-
-  ngOnInit(): void {
-    this.pauseButtonLabel$ = this._query.gameState$.pipe(
-      map(state => state === GameState.Paused ? 'Play' : 'Pause')
-    );
-  }
+  constructor(public keyboardQuery: KeyboardQuery, private _query: TetrisQuery) {}
 
   mouseDown(e: Event, key: string) {
     e.preventDefault();

diff --git a/src/app/components/level/level.component.ts b/src/app/components/level/level.component.ts
@@ -1,23 +1,19 @@
-import { Component, OnInit } from '@angular/core';
-import { Observable } from 'rxjs';
-import { Speed } from '@trungk18/interface/speed';
+import { AsyncPipe, NgIf } from '@angular/common';
+import { Component } from '@angular/core';
 import { TetrisQuery } from '@trungk18/state/tetris/tetris.query';
+import { NumberComponent } from '../number/number.component';
 
 @Component({
   selector: 't-level',
+  standalone: true,
+  imports: [AsyncPipe, NgIf, NumberComponent],
   templateUrl: './level.component.html',
   styleUrls: ['./level.component.scss']
 })
-export class LevelComponent implements OnInit {
-  speed$: Observable<Speed>;
-  initSpeed$: Observable<Speed>;
-  hasCurrent$: Observable<boolean>;
-
+export class LevelComponent  {
   constructor(private _query: TetrisQuery) {}
 
-  ngOnInit(): void {
-    this.speed$ = this._query.speed$;
-    this.hasCurrent$ = this._query.hasCurrent$;
-    this.initSpeed$ = this._query.initSpeed$;
-  }
+  speed$ = this._query.speed$;
+  hasCurrent$ = this._query.hasCurrent$;
+  initSpeed$ = this._query.initSpeed$;
 }