Add twitter button and update README

Author: trungvose

README.md

@@ -2,18 +2,12 @@
 
 A child-hood memory Tetris game built with Angular 10 and Akita.
 
-Tetris was the first game that my dad bought to me. It costed him about 1 dollar at that time. It didn't sound a lot today, but at the time of more than 20 years ago. 1$ can feed my family for at least few days. Put it that way, 1$ can buy 2 dozens of eggs. This is the only one gaming "machine" that I ever had until my first computer arrived. I have never had a SNES or PS1 at home. I saw people still selling it online for about few bucks the other day.
-
-Why not build the same with Angular? And here you go.
-
-> I designed the game to hold maximum score of 999999 (one million minus one 😂) and I have never reached to that very end.
->
-> I will give <u>a free gift</u> for the **first** amazing gamer. Please tweet your screenshot together with hashtag `angulartetris` and tag my name as well `@tuantrungvo`.
-
 ## 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 child-hood memory Tetris game built with Angular 10 and Akita][demo]
 
 If you like my work, feel free to:
@@ -25,42 +19,73 @@ Thanks a bunch for stopping by and supporting me!
 
 [tweet]: 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=angular,angulartetris,akita,typescript
 
+## Why?
+
+Tetris was the first game that my dad bought to me and It costed about $1 US at that time. It didn't sound a lot today. But 20 years ago, 1$ can feed my family for at least few days. Put it that way, with 1\$ you can buy 2 dozens of eggs.
+This is the only one gaming "machine" that I ever had until my first computer arrived. I have never had a SNES or PS1 at home.
+
+My Tetris was exactly in the same yellow color and it was so big, running on 2 AA battery. It is how it looks.
+
+![Retro Tetris][tetris]
+
+Why not build the same <u>Tetris with Angular</u>? And here you go.
+
+> I designed the game to hold maximum score of 999999 (one million minus one 😂) and I have never reached to that very end.
+>
+> I will give <u>a free gift</u> for the **first five** amazing gamer. Please tweet your screenshot together with hashtag `angulartetris` and tag my name as well `@tuantrungvo`.
+
 ## Who is this for?
 
 I built this game dedicated to:
 
-- Anyone tha grew up with Tetris as a part of your childhood. It was definitely my childhood memory and I hope you enjoy the game and it helps bring some good memory back to you as well.
-- For Angular developer community, I have never really see a game that built with Angular and that's my answer. Using Akita as the underlying state management really helps me to see all of the data at a specific point of time, very good for debugging. I wanted to see more game from you guys.
+- For anyone that grew up with Tetris as a part of your memory. It was definitely my childhood memory and I hope you enjoy the game as well.
+- For Angular developer community, I have never really see a game that built with Angular and that's my answer. Using Akita as the underlying state management really helps me to see all of the data flow, it is great for debugging. I wanted to see more Angular game from you guys 💪💪💪
 
 ## How to play
 
-### Control
+### Before playing
 
-- You can use both keyboard and mouse to play. But prefer to use keyboard
-- Press arrow left and right to change the speed of the game (1 - 6)
-- Press arrow up and down to change how many of lines has been filled before starting the game (1 - 10)
-- Press Space to start the game
-- Press P for pause/resume game
-- Press R for reset the game
-- Press S for the turn on/off music
+- You can use both keyboard and mouse to play. But prefer to use <u>keyboard</u>
+- Press arrow left and right to change the speed of the game **(1 - 6)**. The higher the number, the faster the piece will fall.
+- Press arrow up and down to change how many of lines has been filled before starting the game **(1 - 10)**
+- Press `Space` to start the game
+- Press `P` for pause/resume game
+- Press `R` for reset the game
+- Press `S` for the turn on/off music
 
-## Playing game
+### Playing game
 
-- Press Space make the piece drop quickly
-- Press arrow left and right for moving left and right
-- Press arrow up to rotate the piece
-- Press arrow down to move a piece faster
+- Press `Space` make the piece drop quickly
+- Press `Arrow left` and `right` for moving left and right
+- Press `Arrow up` to rotate the piece
+- Press `Arrow down` to move a piece faster
 
 ## Techstack
 
 I built it barely with Angular and Akita, no additional UI framework/library was required.
 
+![Angular Tetris][techstack]
+
+## Development Challenge
+
+I got the inspiration from the same same but different [Tetris game built with Vue][vue]. To not reinvented the wheel, I started to look at Vue code and thought it would be very identical to Angular. But later one, I realized a few catches:
+
+- The Vue source code was written few years ago with pure JS. I could find several problems that the complier didn't tell you. Such as giving `parseInt` a number. It is still working though, but I don't really like it.
+- There was an extensively uses of `setTimeout` and `setInterval` for making animations. I rewrote all of the animation logic using RxJS. You will see the detail below.
+- The brain of the game also used `setTimeout` for the game loop. It was not a problem, but I was having a <u>hard time</u> understanding the code on some essential elements: how to render the piece to the UI, how the calculation make senses with xy axis. In the end, I changed all of the logic to a proper OOP way using TypeScript class, based on [@chrum/ngx-tetris][ngx-tetris].
+
 ## Credits and references
 
-- [https://medium.com/angular-in-depth/game-development-tetris-in-angular-64ef96ce56f7][medium]
-- [Super Rotation System][srs]
-- [Binaryify/vue-tetris][vue]
+| Resource                                      | Description                                                                                                                              |
+| --------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| [@Binaryify/vue-tetris][vue]                  | Vue Tetris, I reused part of HTML, CSS and static assets from that project                                                               |
+| [@chrum/ngx-tetris][ngx-tetris]               | A comprehensive core Tetris written with Angular, I reused part of that for the brain of the game.                                       |
+| [Game Development: Tetris in Angular][medium] | A detailed excellent article about how to built a complete Tetris game. I didn't check the code but I learned much more from the article |
+| [Super Rotation System][srs]                  | A standard for how the piece behave. I didn't follow everything but it is good to know as wells                                          |
 
 [medium]: https://medium.com/angular-in-depth/game-development-tetris-in-angular-64ef96ce56f7
 [srs]: https://tetris.fandom.com/wiki/SRS
 [vue]: https://github.com/Binaryify/vue-tetris
+[tetris]: src/assets/img/retro-tetris.jpg
+[ngx-tetris]: https://github.com/chrum/ngx-tetris
+[techstack]: src/assets/img/tech-stack.png

src/app/app.module.ts

@@ -20,6 +20,7 @@ import { environment } from '../environments/environment';
 import { TileComponent } from './components/tile/tile.component';
 import { LogoComponent } from './components/logo/logo.component';
 import { GithubComponent } from './components/github/github.component';
+import { TwitterButtonComponent } from './components/twitter-button/twitter-button.component';
 
 @NgModule({
   declarations: [
@@ -40,6 +41,7 @@ import { GithubComponent } from './components/github/github.component';
     TileComponent,
     LogoComponent,
     GithubComponent,
+    TwitterButtonComponent,
   ],
   imports: [BrowserModule, environment.production ? [] : AkitaNgDevtools.forRoot()],
   providers: [],

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

@@ -4,23 +4,11 @@
       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/c_scale,w_300/v1595337312/tetris-qr-code_ifpjm7.png" />
+         src="https://res.cloudinary.com/dvujyxh7e/image/upload/v1595380432/angular-tetris-qr-code-no-text.png" />
   </div>
   <div class="twitter">
-    <a class="twitter-button"
-       href="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=angular,angulartetris,akita,typescript"
-       rel="noopener noreferrer"
-       target="_blank">
-      <svg class="icon"
-           style="enable-background:new 0 0 512 512;"
-           version="1.1"
-           viewBox="0 0 512 512"
-           xml:space="preserve"
-           xmlns="http://www.w3.org/2000/svg"
-           xmlns:xlink="http://www.w3.org/1999/xlink">
-        <path d="M196.9,462C317.2,462,383,362.3,383,275.9c0-2.8,0-5.6-0.2-8.5c12.8-9.3,23.8-20.7,32.6-33.9  c-11.9,5.3-24.6,8.8-37.6,10.3c13.7-8.2,23.9-21,28.8-36.2c-12.8,7.6-26.9,13-41.5,15.9c-24.8-26.3-66.2-27.6-92.5-2.8  c-17,16-24.2,39.8-18.9,62.5c-52.6-2.6-101.6-27.5-134.8-68.3c-17.4,29.9-8.5,68.1,20.2,87.3c-10.4-0.3-20.6-3.1-29.7-8.2  c0,0.3,0,0.5,0,0.8c0,31.1,22,57.9,52.5,64.1c-9.6,2.6-19.7,3-29.5,1.1c8.6,26.6,33.1,44.9,61.1,45.4  c-23.2,18.2-51.8,28.1-81.2,28.1c-5.2,0-10.4-0.3-15.6-0.9C126.5,451.8,161.3,462,196.9,462"
-              id="XMLID_22_" /></svg>
-      Twitter</a>
+    <t-twitter-button [tweetUrl]="tweetAngularTetrisUrl">
+    </t-twitter-button>
   </div>
   <iframe src="https://ghbtns.com/github-btn.html?user=trungk18&repo=angular-tetris&type=star&count=true&size=large"
           frameborder="0"

src/app/components/github/github.component.scss

@@ -40,49 +40,9 @@
   display: flex;
   flex-direction: column;
 }
+
 .twitter {
   cursor: pointer;
   margin-top: 15px;
   margin-bottom: 5px;
-
-  .twitter-button {
-    background-color: #eee;
-    background-image: -webkit-gradient(
-      linear,
-      left top,
-      left bottom,
-      color-stop(0, #fcfcfc),
-      to(#eee)
-    );
-    background-image: linear-gradient(to bottom, #fcfcfc 0, #eee 100%);
-    background-repeat: no-repeat;
-    border: 1px solid #d5d5d5;
-    padding: 3px 10px 3px 8px;
-    font-size: 16px;
-    line-height: 22px;
-    border-radius: 4px;
-    font-weight: 700;
-    color: #333;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
-      'Noto Sans', sans-serif;
-    text-decoration: none;
-
-    &:hover {
-      text-decoration: none;
-      background-color: #ddd;
-      background-image: -webkit-gradient(
-        linear,
-        left top,
-        left bottom,
-        color-stop(0, #eee),
-        to(#ddd)
-      );
-      background-image: linear-gradient(to bottom, #eee 0, #ddd 100%);
-      border-color: #ccc;
-    }
-    .icon {
-      width: 20px;
-      height: 20px;
-    }
-  }
 }

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

@@ -6,10 +6,10 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./github.component.scss']
 })
 export class GithubComponent implements OnInit {
+  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=angular,angulartetris,akita,typescript';
 
-  constructor() { }
-
-  ngOnInit(): void {
-  }
+  constructor() {}
 
+  ngOnInit(): void {}
 }

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

@@ -1,4 +1,5 @@
-<div class="keyboard">
+<div class="keyboard"
+     [style.margin-top.px]='filling'>
     <t-button className="blue btn-md"
               [active$]="keyboardQuery.up$"
               [arrowButton]="ArrowButton.UP"

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, Output, EventEmitter } from '@angular/core';
+import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
 import { ArrowButton } from '@trungk18/interface/ui-model/arrow-button';
 import { KeyboardQuery } from '@trungk18/state/keyboard/keyboard.query';
 
@@ -9,6 +9,7 @@ import { KeyboardQuery } from '@trungk18/state/keyboard/keyboard.query';
 })
 export class KeyboardComponent implements OnInit {
   ArrowButton = ArrowButton;
+  @Input() filling: number = 20;
   @Output() onMouseDown = new EventEmitter<string>();
   @Output() onMouseUp = new EventEmitter<string>();
 

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

@@ -0,0 +1,15 @@
+<a class="twitter-button"
+   [href]="tweetUrl"
+   rel="noopener noreferrer"
+   target="_blank">
+    <svg class="icon"
+         style="enable-background:new 0 0 512 512;"
+         version="1.1"
+         viewBox="0 0 512 512"
+         xml:space="preserve"
+         xmlns="http://www.w3.org/2000/svg"
+         xmlns:xlink="http://www.w3.org/1999/xlink">
+        <path d="M196.9,462C317.2,462,383,362.3,383,275.9c0-2.8,0-5.6-0.2-8.5c12.8-9.3,23.8-20.7,32.6-33.9  c-11.9,5.3-24.6,8.8-37.6,10.3c13.7-8.2,23.9-21,28.8-36.2c-12.8,7.6-26.9,13-41.5,15.9c-24.8-26.3-66.2-27.6-92.5-2.8  c-17,16-24.2,39.8-18.9,62.5c-52.6-2.6-101.6-27.5-134.8-68.3c-17.4,29.9-8.5,68.1,20.2,87.3c-10.4-0.3-20.6-3.1-29.7-8.2  c0,0.3,0,0.5,0,0.8c0,31.1,22,57.9,52.5,64.1c-9.6,2.6-19.7,3-29.5,1.1c8.6,26.6,33.1,44.9,61.1,45.4  c-23.2,18.2-51.8,28.1-81.2,28.1c-5.2,0-10.4-0.3-15.6-0.9C126.5,451.8,161.3,462,196.9,462"
+              id="XMLID_22_" /></svg>
+    {{ label }}
+</a>

src/app/components/twitter-button/twitter-button.component.scss

@@ -0,0 +1,40 @@
+.twitter-button {
+  background-color: #eee;
+  background-image: -webkit-gradient(
+    linear,
+    left top,
+    left bottom,
+    color-stop(0, #fcfcfc),
+    to(#eee)
+  );
+  background-image: linear-gradient(to bottom, #fcfcfc 0, #eee 100%);
+  background-repeat: no-repeat;
+  border: 1px solid #d5d5d5;
+  padding: 3px 10px 3px 8px;
+  font-size: 16px;
+  line-height: 22px;
+  border-radius: 4px;
+  font-weight: 700;
+  color: #333;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+    'Noto Sans', sans-serif;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: none;
+    background-color: #ddd;
+    background-image: -webkit-gradient(
+      linear,
+      left top,
+      left bottom,
+      color-stop(0, #eee),
+      to(#ddd)
+    );
+    background-image: linear-gradient(to bottom, #eee 0, #ddd 100%);
+    border-color: #ccc;
+  }
+  .icon {
+    width: 20px;
+    height: 20px;
+  }
+}

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

@@ -0,0 +1,15 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+  selector: 't-twitter-button',
+  templateUrl: './twitter-button.component.html',
+  styleUrls: ['./twitter-button.component.scss']
+})
+export class TwitterButtonComponent implements OnInit {
+  @Input() tweetUrl = '';
+  @Input() label = 'Tweet';
+
+  constructor() {}
+
+  ngOnInit(): void {}
+}