permanently sticking with joystick (#165)

* npm audit fix

* fixed joystick overflow over board grid

* formally remove hammerjs

package.json

@@ -24,7 +24,6 @@
 		"@angular/platform-browser": "~12.1.1",
 		"@angular/platform-browser-dynamic": "~12.1.1",
 		"@angular/router": "~12.1.1",
-		"hammerjs": "^2.0.8",
 		"nipplejs": "^0.9.0",
 		"rxjs": "~6.6.7",
 		"subsink": "^1.0.2",
@@ -35,7 +34,6 @@
 		"@angular-devkit/build-angular": "~12.1.1",
 		"@angular/cli": "~12.1.1",
 		"@angular/compiler-cli": "~12.1.1",
-		"@types/hammerjs": "^2.0.40",
 		"@types/jasmine": "~3.8.1",
 		"@types/jasminewd2": "~2.0.10",
 		"@types/node": "^16.3.0",

src/app/pages/not-found/snek/components/snek-grid/snek-grid.component.html

@@ -1,3 +1,8 @@
+<joystick (move)="handleJoystick($event)"
+		  [style.width]="(snekWidth$ | async) * 20 + 'px'"
+		  [style.height]="(snekHeight$ | async) * 20 + 'px'">
+</joystick>
+
 <ng-container *ngIf="snekGame$ | async as snekGame">
 
 	<div class="snek-grid-row"

src/app/pages/not-found/snek/components/snek-grid/snek-grid.component.scss

@@ -4,6 +4,7 @@
 	width: max-content;
 	border: solid 2px var(--border-color);
 	border-radius: 5px;
+	user-select: none;
 	overflow: hidden;
 
 	> .snek-grid-row {

src/app/pages/not-found/snek/components/snek-grid/snek-grid.component.ts

@@ -1,7 +1,10 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { JoystickOutputData } from 'nipplejs';
 import { Observable } from 'rxjs';
 import { SnekGame } from 'src/app/pages/not-found/snek/models/state/snek-game.model';
+import { SnekResolutionService } from 'src/app/pages/not-found/snek/services/core/snek-resolution.service';
 import { SnekStateService } from 'src/app/pages/not-found/snek/services/core/snek-state.service';
+import { SnekUserInputService } from 'src/app/pages/not-found/snek/services/core/snek-user-input.service';
 
 @Component({
 	selector: 'snek-grid',
@@ -11,10 +14,20 @@ import { SnekStateService } from 'src/app/pages/not-found/snek/services/core/sne
 })
 export class SnekGridComponent {
 	public readonly snekGame$: Observable<SnekGame>;
+	public readonly snekWidth$: Observable<number>;
+	public readonly snekHeight$: Observable<number>;
 
 	constructor(
+		private readonly snekResolutionService: SnekResolutionService,
 		private readonly snekStateService: SnekStateService,
+		private readonly snekUserInputService: SnekUserInputService,
 	) {
 		this.snekGame$ = this.snekStateService.snekGame$;
+		this.snekWidth$ = this.snekResolutionService.snekWidth$;
+		this.snekHeight$ = this.snekResolutionService.snekHeight$;
+	}
+
+	public handleJoystick(event: JoystickOutputData): void {
+		this.snekUserInputService.handleJoystick(event);
 	}
 }

src/app/pages/not-found/snek/snek.component.ts

@@ -1,5 +1,4 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { JoystickOutputData } from 'nipplejs';
 import { SnekDialogService } from 'src/app/pages/not-found/snek/services/core/snek-dialog.service';
 import { SnekResolutionService } from 'src/app/pages/not-found/snek/services/core/snek-resolution.service';
 import { SnekStateService } from 'src/app/pages/not-found/snek/services/core/snek-state.service';
@@ -10,7 +9,6 @@ import { SnekStatisticsService } from 'src/app/pages/not-found/snek/services/per
 @Component({
 	selector: 'snek',
 	template: `
-		<joystick (move)="handleJoystick($event)"></joystick>
 		<snek-grid></snek-grid>
 		<snek-options></snek-options>
 	`,
@@ -40,7 +38,4 @@ export class SnekComponent {
 		private readonly snekStatisticsService: SnekStatisticsService,
 	) { }
 
-	public handleJoystick(event: JoystickOutputData): void {
-		this.snekUserInputService.handleJoystick(event);
-	}
 }

src/app/shared/joystick/joystick.component.scss

@@ -1,5 +1,6 @@
 :host {
 	position: absolute;
+	cursor: pointer;
 	width: 100%;
 	height: 100%;
 	z-index: 3;

src/app/shared/joystick/joystick.component.ts

@@ -3,7 +3,7 @@ import { create, JoystickManager, JoystickManagerOptions, JoystickOutputData } f
 
 @Component({
 	selector: 'joystick',
-	templateUrl: './joystick.component.html',
+	template: '',
 	styleUrls: [ './joystick.component.scss' ],
 })
 export class JoystickComponent implements AfterViewInit, OnDestroy {

src/main.ts

@@ -1,6 +1,5 @@
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import 'hammerjs';
 import { AppModule } from 'src/app/app.module';
 import { environment } from 'src/environments/environment';