diff --git a/front/.eslintrc.json b/front/.eslintrc.json index 3ba19cb3..3aab37d9 100644 --- a/front/.eslintrc.json +++ b/front/.eslintrc.json @@ -24,6 +24,7 @@ "@typescript-eslint" ], "rules": { - "no-unused-vars": "off" + "no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "error" } } diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index f18a11d1..cfefd548 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/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); - - // 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; - }); + this.userInputManager = new UserInputManager(this); if (localUserStore.getFullscreen()) { document.querySelector('body')?.requestFullscreen(); diff --git a/front/src/Phaser/UserInput/PinchManager.ts b/front/src/Phaser/UserInput/PinchManager.ts index f412b787..f7c445fa 100644 --- a/front/src/Phaser/UserInput/PinchManager.ts +++ b/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.scene.cameras.main.zoom *= pinch.scaleFactor; + this.pinch.on('pinch', (pinch:any) => { // eslint-disable-line + 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); }); } diff --git a/front/src/Phaser/UserInput/UserInputManager.ts b/front/src/Phaser/UserInput/UserInputManager.ts index c3f2c0bb..ddc3ffa8 100644 --- a/front/src/Phaser/UserInput/UserInputManager.ts +++ b/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": - this.joystickEvents.set(UserInputEvent.MoveUp, key.isDown); - break; - case "left": - this.joystickEvents.set(UserInputEvent.MoveLeft, key.isDown); - break; - case "down": - this.joystickEvents.set(UserInputEvent.MoveDown, key.isDown); - break; - case "right": - this.joystickEvents.set(UserInputEvent.MoveRight, key.isDown); - break; + case "up": + this.joystickEvents.set(UserInputEvent.MoveUp, key.isDown); + break; + case "left": + this.joystickEvents.set(UserInputEvent.MoveLeft, key.isDown); + break; + case "down": + this.joystickEvents.set(UserInputEvent.MoveDown, key.isDown); + break; + case "right": + this.joystickEvents.set(UserInputEvent.MoveRight, key.isDown); + break; } } }); diff --git a/front/src/rex-plugins.d.ts b/front/src/rex-plugins.d.ts index bb0816b6..7ba8f65b 100644 --- a/front/src/rex-plugins.d.ts +++ b/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 } \ No newline at end of file