diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index cfefd548..0f31a519 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -51,8 +51,6 @@ import {Room} from "../../Connexion/Room"; import {jitsiFactory} from "../../WebRtc/JitsiFactory"; import {urlManager} from "../../Url/UrlManager"; import {audioManager} from "../../WebRtc/AudioManager"; -import {IVirtualJoystick} from "../../types"; -import VirtualJoystick from 'phaser3-rex-plugins/plugins/virtualjoystick.js'; import {PresentationModeIcon} from "../Components/PresentationModeIcon"; import {ChatModeIcon} from "../Components/ChatModeIcon"; import {OpenChatIcon, openChatIconName} from "../Components/OpenChatIcon"; @@ -168,7 +166,6 @@ export class GameScene extends ResizableScene implements CenterListener { private messageSubscription: Subscription|null = null; private popUpElements : Map = new Map(); private originalMapUrl: string|undefined; - public virtualJoystick!: IVirtualJoystick; constructor(private room: Room, MapUrlFile: string, customKey?: string|undefined) { super({ diff --git a/front/src/Phaser/UserInput/UserInputManager.ts b/front/src/Phaser/UserInput/UserInputManager.ts index ddc3ffa8..602afee7 100644 --- a/front/src/Phaser/UserInput/UserInputManager.ts +++ b/front/src/Phaser/UserInput/UserInputManager.ts @@ -1,9 +1,7 @@ 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"); +import VirtualJoystick from 'phaser3-rex-plugins/plugins/virtualjoystick.js'; interface UserInputManagerDatum { keyInstance: Phaser.Input.Keyboard.Key; @@ -21,6 +19,9 @@ export enum UserInputEvent { JoystickMove, } +const outOfScreenX = -1000; +const outOfScreenY = -1000; + //we cannot use a map structure so we have to create a replacment export class ActiveEventList { private eventMap : Map = new Map(); @@ -62,22 +63,23 @@ export class UserInputManager { initVirtualJoystick() { this.joystick = new VirtualJoystick(this, { - x: this.Scene.game.renderer.width / 2, - y: this.Scene.game.renderer.height / 2, + x: outOfScreenX, + y: outOfScreenY, radius: 20, - base: this.Scene.add.circle(0, 0, 20), - thumb: this.Scene.add.circle(0, 0, 10), + base: this.Scene.add.circle(0, 0, 20, 0xdddddd), + thumb: this.Scene.add.circle(0, 0, 10, 0x000000), 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.Scene.input.on('pointerup', (pointer: { x: number; y: number; }) => { + this.joystick.x = outOfScreenX; + this.joystick.y = outOfScreenY; + }); this.joystick.on("update", () => { this.joystickForceAccuX = this.joystick.forceX ? this.joystickForceAccuX : 0; this.joystickForceAccuY = this.joystick.forceY ? this.joystickForceAccuY : 0; @@ -128,6 +130,7 @@ export class UserInputManager { this.Scene.input.keyboard.removeAllListeners(); } + //todo: should we also disable the joystick? disableControls(){ this.Scene.input.keyboard.removeAllKeys(); this.isInputDisabled = true;