From 415d8f9466699d15d3a9e9de8afaff1c91cdef3d Mon Sep 17 00:00:00 2001
From: kharhamel <oognic@gmail.com>
Date: Tue, 20 Apr 2021 10:52:06 +0200
Subject: [PATCH] the joystick is now visible only when pointer is down

---
 front/src/Phaser/Game/GameScene.ts            |  3 ---
 .../src/Phaser/UserInput/UserInputManager.ts  | 23 +++++++++++--------
 2 files changed, 13 insertions(+), 13 deletions(-)

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<number, DOMElement> = new Map<number, Phaser.GameObjects.DOMElement>();
     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<UserInputEvent, boolean> = new Map<UserInputEvent, boolean>();
@@ -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;