put the virtual joystick into the userInputManager and restricted it to touchscreens

front/.eslintrc.json

@@ -24,6 +24,7 @@
         "@typescript-eslint"
     ],
     "rules": {
-        "no-unused-vars": "off"
+        "no-unused-vars": "off",
+        "@typescript-eslint/no-explicit-any": "error"
     }
 }

front/src/Phaser/Game/GameScene.ts

@@ -408,26 +408,10 @@ export class GameScene extends ResizableScene implements CenterListener {
         //initialise list of other player
         this.MapPlayers = this.physics.add.group({immovable: true});
 
-        this.virtualJoystick = new VirtualJoystick(this, {
+        
-            x: this.game.renderer.width / 2,
-            y: this.game.renderer.height / 2,
-            radius: 20,
-            base: this.add.circle(0, 0, 20),
-            thumb: this.add.circle(0, 0, 10),
-            enable: true,
-            dir: "8dir",
-        });
-        this.virtualJoystick.visible = true;
         //create input to move
         mediaManager.setUserInputManager(this.userInputManager);
-        this.userInputManager = new UserInputManager(this, this.virtualJoystick);
+        this.userInputManager = new UserInputManager(this);
-
-        // Listener event to reposition virtual joystick
-        // whatever place you click in game area
-        this.input.on('pointerdown', (pointer: { x: number; y: number; }) => {
-            this.virtualJoystick.x = pointer.x;
-            this.virtualJoystick.y = pointer.y;
-        });
 
         if (localUserStore.getFullscreen()) {
             document.querySelector('body')?.requestFullscreen();

front/src/Phaser/UserInput/PinchManager.ts

@@ -2,14 +2,20 @@ import {Pinch} from "phaser3-rex-plugins/plugins/gestures.js";
 
 export class PinchManager {
     private scene: Phaser.Scene;
-    private pinch!: any;
+    private pinch!: any; // eslint-disable-line
     
     constructor(scene: Phaser.Scene) {
         this.scene = scene;
         this.pinch = new Pinch(scene);
 
-        this.pinch.on('pinch', (pinch:any) => {
+        this.pinch.on('pinch', (pinch:any) => { // eslint-disable-line
-            this.scene.cameras.main.zoom *= pinch.scaleFactor;
+            let newZoom = this.scene.cameras.main.zoom * pinch.scaleFactor;
+            if (newZoom < 0.25) {
+                newZoom = 0.25;
+            } else if(newZoom > 2) {
+                newZoom = 2;
+            }
+            this.scene.cameras.main.setZoom(newZoom);
         });
     }
     

front/src/Phaser/UserInput/UserInputManager.ts

@@ -1,5 +1,6 @@
 import { Direction, IVirtualJoystick } from "../../types";
 import {GameScene} from "../Game/GameScene";
+import {touchScreenManager} from "../../Touch/TouchScreenManager";
 const {
   default: VirtualJoystick,
 } = require("phaser3-rex-plugins/plugins/virtualjoystick.js");
@@ -44,17 +45,39 @@ export class UserInputManager {
     private Scene: GameScene;
     private isInputDisabled : boolean;
 
-    private joystick : IVirtualJoystick;
+    private joystick!: IVirtualJoystick;
     private joystickEvents = new ActiveEventList();
     private joystickForceThreshold = 60;
     private joystickForceAccuX = 0;
     private joystickForceAccuY = 0;
 
-    constructor(Scene: GameScene, virtualJoystick: IVirtualJoystick) {
+    constructor(Scene: GameScene) {
         this.Scene = Scene;
         this.isInputDisabled = false;
         this.initKeyBoardEvent();
-        this.joystick = virtualJoystick;
+        if (touchScreenManager.supportTouchScreen) {
+            this.initVirtualJoystick();
+        }
+    }
+    
+    initVirtualJoystick() {
+        this.joystick = new VirtualJoystick(this, {
+            x: this.Scene.game.renderer.width / 2,
+            y: this.Scene.game.renderer.height / 2,
+            radius: 20,
+            base: this.Scene.add.circle(0, 0, 20),
+            thumb: this.Scene.add.circle(0, 0, 10),
+            enable: true,
+            dir: "8dir",
+        });
+        this.joystick.visible = true;
+
+        // Listener event to reposition virtual joystick
+        // whatever place you click in game area
+        this.Scene.input.on('pointerdown', (pointer: { x: number; y: number; }) => {
+            this.joystick.x = pointer.x;
+            this.joystick.y = pointer.y;
+        });
         this.joystick.on("update", () => {
             this.joystickForceAccuX = this.joystick.forceX ? this.joystickForceAccuX : 0;
             this.joystickForceAccuY = this.joystick.forceY ? this.joystickForceAccuY : 0;
@@ -62,18 +85,18 @@ export class UserInputManager {
             for (const name in cursorKeys) {
                 const key = cursorKeys[name as Direction];
                 switch (name) {
-                case "up":
+                    case "up":
-                    this.joystickEvents.set(UserInputEvent.MoveUp, key.isDown);
+                        this.joystickEvents.set(UserInputEvent.MoveUp, key.isDown);
-                    break;
+                        break;
-                case "left":
+                    case "left":
-                    this.joystickEvents.set(UserInputEvent.MoveLeft, key.isDown);
+                        this.joystickEvents.set(UserInputEvent.MoveLeft, key.isDown);
-                    break;
+                        break;
-                case "down":
+                    case "down":
-                    this.joystickEvents.set(UserInputEvent.MoveDown, key.isDown);
+                        this.joystickEvents.set(UserInputEvent.MoveDown, key.isDown);
-                    break;
+                        break;
-                case "right":
+                    case "right":
-                    this.joystickEvents.set(UserInputEvent.MoveRight, key.isDown);
+                        this.joystickEvents.set(UserInputEvent.MoveRight, key.isDown);
-                    break;
+                        break;
                 }
             }
         });

front/src/rex-plugins.d.ts

@@ -1,12 +1,12 @@
 
 declare module 'phaser3-rex-plugins/plugins/virtualjoystick.js' {
-    const content: any;
+    const content: any; // eslint-disable-line
     export default content;
 }
 declare module 'phaser3-rex-plugins/plugins/gestures-plugin.js' {
-    const content: any;
+    const content: any; // eslint-disable-line 
     export default content;
 }
 declare module 'phaser3-rex-plugins/plugins/gestures.js' {
-    export const Pinch: any;
+    export const Pinch: any; // eslint-disable-line
 }