Merge pull request trungvose#1 from trungk18/feature/hotkey

Feature/hotkey

Author: trungvose

.prettierignore

@@ -0,0 +1 @@
+*.html

.prettierrc

@@ -0,0 +1,9 @@
+{
+    "singleQuote": true,
+    "printWidth": 100,
+    "tabWidth": 2,
+    "useTabs": false,
+    "trailingComma": "none",
+    "bracketSpacing": true,
+    "semi": true
+}

README.md

@@ -1,27 +1,66 @@
 # Angular Tetris
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.8.
+A child-hood memory Tetris game built with Angular 10 and Akita.
 
-## Development server
+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.
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+Why not build the same with Angular? And here you go.
 
-## Code scaffolding
+> 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`.
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+## Working Game
 
-## Build
+Check out the **working game** -> https://tetris.trungk18.com
 
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
+![A child-hood memory Tetris game built with Angular 10 and Akita][demo]
 
-## Running unit tests
+If you like my work, feel free to:
 
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+- [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)][tweet] about Angular Tetris
+- :star: this repository. And we will be happy together :)
 
-## Running end-to-end tests
+Thanks a bunch for stopping by and supporting me!
 
-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+[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
 
-## Further help
+## Who is this for?
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+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.
+
+## How to play
+
+### Control
+
+- 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
+
+## 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
+
+## Techstack
+
+I built it barely with Angular and Akita, no additional UI framework/library was required.
+
+## Credits and references
+
+- [https://medium.com/angular-in-depth/game-development-tetris-in-angular-64ef96ce56f7][medium]
+- [Super Rotation System][srs]
+- [Binaryify/vue-tetris][vue]
+
+[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

angular.json

@@ -45,8 +45,13 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
             "aot": true,
-            "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["src/styles.scss"],
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
             "scripts": []
           },
           "configurations": {
@@ -104,8 +109,13 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
-            "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["src/styles.scss"],
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
             "scripts": []
           }
         },
@@ -117,7 +127,9 @@
               "tsconfig.spec.json",
               "e2e/tsconfig.json"
             ],
-            "exclude": ["**/node_modules/**"]
+            "exclude": [
+              "**/node_modules/**"
+            ]
           }
         },
         "e2e": {
@@ -135,5 +147,8 @@
       }
     }
   },
-  "defaultProject": "angular-tetris"
-}
+  "defaultProject": "angular-tetris",
+  "cli": {
+    "defaultCollection": "@datorama/akita"
+  }
+}