Fix the zoom issue and handle touchStart event

Author: trungvose

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

@@ -3,8 +3,10 @@
     <t-button className="blue btn-md"
               [active$]="keyboardQuery.up$"
               [arrowButton]="ArrowButton.UP"
-              (mousedown)="mouseDown('Up')"
-              (mouseup)="mouseUp('Up')"
+              (mousedown)="mouseDown($event, 'Up')"
+              (mouseup)="mouseUp($event, 'Up')"
+              (touchstart)="mouseDown($event, 'Up')"
+              (touchend)="mouseUp($event, 'Up')"
               [top]="0"
               [left]="374"
               [isAbsolute]="true">
@@ -13,58 +15,72 @@
     <t-button className="blue btn-md"
               [active$]="keyboardQuery.down$"
               [arrowButton]="ArrowButton.DOWN"
-              (mousedown)="mouseDown('Down')"
-              (mouseup)="mouseUp('Down')"
+              (mousedown)="mouseDown($event, 'Down')"
+              (mouseup)="mouseUp($event, 'Down')"
+              (touchstart)="mouseDown($event, 'Down')"
+              (touchend)="mouseUp($event, 'Down')"
               [top]="180"
               [left]="374">
         Down
     </t-button>
     <t-button className="blue btn-md"
               [active$]="keyboardQuery.left$"
               [arrowButton]="ArrowButton.LEFT"
-              (mousedown)="mouseDown('Left')"
-              (mouseup)="mouseUp('Left')"
+              (mousedown)="mouseDown($event, 'Left')"
+              (mouseup)="mouseUp($event, 'Left')"
+              (touchstart)="mouseDown($event, 'Left')"
+              (touchend)="mouseUp($event, 'Left')"
               [top]="90"
               [left]="284">
         Left
     </t-button>
     <t-button className="blue btn-md"
               [active$]="keyboardQuery.right$"
               [arrowButton]="ArrowButton.RIGHT"
-              (mousedown)="mouseDown('Right')"
-              (mouseup)="mouseUp('Right')"
+              (mousedown)="mouseDown($event, 'Right')"
+              (mouseup)="mouseUp($event, 'Right')"
+              (touchstart)="mouseDown($event, 'Right')"
+              (touchend)="mouseUp($event, 'Right')"
               [top]="90"
               [left]="464">
         Right
     </t-button>
     <t-button className="blue btn-lg"
               [active$]="keyboardQuery.drop$"
-              (mousedown)="mouseDown('Space')"
-              (mouseup)="mouseUp('Space')"
+              (mousedown)="mouseDown($event, 'Space')"
+              (mouseup)="mouseUp($event, 'Space')"
+              (touchstart)="mouseDown($event, 'Space')"
+              (touchend)="mouseUp($event, 'Space')"
               [top]="100"
               [left]="52">
         Drop (SPACE)
     </t-button>
     <t-button className="red btn-sm"
               [active$]="keyboardQuery.reset$"
-              (mousedown)="mouseDown('Reset')"
-              (mouseup)="mouseUp('Reset')"
+              (mousedown)="mouseDown($event, 'Reset')"
+              (mouseup)="mouseUp($event, 'Reset')"
+              (touchstart)="mouseDown($event, 'Reset')"
+              (touchend)="mouseUp($event, 'Reset')"
               [top]="0"
               [left]="196">
         Reset (R)
     </t-button>
     <t-button className="green btn-sm"
               [active$]="keyboardQuery.sound$"
-              (mousedown)="mouseDown('Sound')"
-              (mouseup)="mouseUp('Sound')"
+              (mousedown)="mouseDown($event, 'Sound')"
+              (mouseup)="mouseUp($event, 'Sound')"
+              (touchstart)="mouseDown($event, 'Sound')"
+              (touchend)="mouseUp($event, 'Sound')"
               [top]="0"
               [left]="106">
         Sound (S)
     </t-button>
     <t-button className="green btn-sm"
               [active$]="keyboardQuery.pause$"
-              (mousedown)="mouseDown('Pause')"
-              (mouseup)="mouseUp('Pause')"
+              (mousedown)="mouseDown($event, 'Pause')"
+              (mouseup)="mouseUp($event, 'Pause')"
+              (touchstart)="mouseDown($event, 'Pause')"
+              (touchend)="mouseUp($event, 'Pause')"
               [top]="0"
               [left]="16">
         Pause (P)

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

@@ -13,15 +13,17 @@ export class KeyboardComponent implements OnInit {
   @Output() onMouseDown = new EventEmitter<string>();
   @Output() onMouseUp = new EventEmitter<string>();
 
-  constructor(public keyboardQuery: KeyboardQuery) {}
+  constructor(public keyboardQuery: KeyboardQuery) { }
 
-  ngOnInit(): void {}
+  ngOnInit(): void { }
 
-  mouseDown(key: string) {
+  mouseDown(e: Event, key: string) {
+    e.preventDefault();
     this.onMouseDown.emit(key);
   }
 
-  mouseUp(key: string) {
+  mouseUp(e: Event, key: string) {
+    e.preventDefault();    
     this.onMouseUp.emit(key);
   }
 }

src/index.html

@@ -16,7 +16,6 @@
     <base href="/">
     <script>(function () { var w = parseInt(window.screen.width), s = w / 640, u = navigator.userAgent.toLowerCase(), m = '<meta name="viewport" content="width=640,'; if (/android (\d+\.\d+)/.test(u)) { if (parseFloat(RegExp.$1) > 2.3) m += 'minimum-scale=' + s + ',maximum-scale=' + s + ','; } else { m += 'user-scalable=no,'; } m += 'target-densitydpi=device-dpi">'; document.write(m); }());</script>
       <!-- Primary Meta Tags -->
-    <title>Angular Tetris built with Angular and Akita - by trungk18</title>
     <meta name="title" content="Angular Tetris built with Angular and Akita - by trungk18">
     <meta name="description" content="A childhood memory Tetris game built with Angular 10 and Akita.">
 

src/index.prod.html

@@ -16,7 +16,6 @@
     <base href="/">
     <script>(function () { var w = parseInt(window.screen.width), s = w / 640, u = navigator.userAgent.toLowerCase(), m = '<meta name="viewport" content="width=640,'; if (/android (\d+\.\d+)/.test(u)) { if (parseFloat(RegExp.$1) > 2.3) m += 'minimum-scale=' + s + ',maximum-scale=' + s + ','; } else { m += 'user-scalable=no,'; } m += 'target-densitydpi=device-dpi">'; document.write(m); }());</script>
       <!-- Primary Meta Tags -->
-    <title>Angular Tetris built with Angular and Akita - by trungk18</title>
     <meta name="title" content="Angular Tetris built with Angular and Akita - by trungk18">
     <meta name="description" content="A childhood memory Tetris game built with Angular 10 and Akita.">
 

src/styles.scss

@@ -1 +1,5 @@
-@import "../src/app/styles/tetris.scss";
+@import '../src/app/styles/tetris.scss';
+
+t-keyboard, t-button {
+  touch-action: pan-x pan-y pinch-zoom;
+}