Integrate virtual joystick

front/src/Connexion/LocalUserStore.ts

@@ -9,7 +9,8 @@ const gameQualityKey =          'gameQuality';
 const videoQualityKey =         'videoQuality';
 const audioPlayerVolumeKey =    'audioVolume';
 const audioPlayerMuteKey =      'audioMute';
-const helpCameraSettingsShown =      'helpCameraSettingsShown';
+const helpCameraSettingsShown = 'helpCameraSettingsShown';
+const joystickKey =             'showJoystick';
 
 class LocalUserStore {
     saveUser(localUser: LocalUser) {
@@ -100,6 +101,13 @@ class LocalUserStore {
     getHelpCameraSettingsShown(): boolean {
         return localStorage.getItem(helpCameraSettingsShown) === '1';
     }
+
+    setJoystick(value: boolean): void {
+        localStorage.setItem(joystickKey, value.toString());
+    }
+    getJoystick(): boolean {
+        return localStorage.getItem(joystickKey) === 'true';
+    }
 }
 
 export const localUserStore = new LocalUserStore();

front/src/Phaser/Game/GameScene.ts

@@ -51,6 +51,10 @@ import {Room} from "../../Connexion/Room";
 import {jitsiFactory} from "../../WebRtc/JitsiFactory";
 import {urlManager} from "../../Url/UrlManager";
 import {audioManager} from "../../WebRtc/AudioManager";
+import {IVirtualJoystick} from "../../types";
+const {
+  default: VirtualJoystick,
+} = require("phaser3-rex-plugins/plugins/virtualjoystick.js");
 import {PresentationModeIcon} from "../Components/PresentationModeIcon";
 import {ChatModeIcon} from "../Components/ChatModeIcon";
 import {OpenChatIcon, openChatIconName} from "../Components/OpenChatIcon";
@@ -164,6 +168,7 @@ 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({
@@ -183,6 +188,16 @@ export class GameScene extends ResizableScene implements CenterListener {
         this.connectionAnswerPromise = new Promise<RoomJoinedMessageInterface>((resolve, reject): void => {
             this.connectionAnswerPromiseResolve = resolve;
         })
+        const joystickVisible = localUserStore.getJoystick();
+        if (joystickVisible) {
+            const canvas = document.querySelector('canvas')
+            canvas?.addEventListener('click', () => {
+                const body = document.querySelector('body')
+                body?.requestFullscreen()
+            }, {
+                once: true
+            })
+        }
     }
 
     //hook preload scene
@@ -399,9 +414,19 @@ 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, 0x888888),
+            thumb: this.add.circle(0, 0, 10, 0xcccccc),
+            enable: true,
+            dir: "8dir",
+        });
+        this.virtualJoystick.visible = localUserStore.getJoystick()
         //create input to move
-        this.userInputManager = new UserInputManager(this);
         mediaManager.setUserInputManager(this.userInputManager);
+        this.userInputManager = new UserInputManager(this, this.virtualJoystick);
 
         //notify game manager can to create currentUser in map
         this.createCurrentPlayer();

front/src/Phaser/Menu/MenuScene.ts

@@ -291,6 +291,9 @@ export class MenuScene extends Phaser.Scene {
             case 'editGameSettingsButton':
                 this.openGameSettingsMenu();
                 break;
+            case 'showJoystick':
+                this.showJoystick();
+                break;
             case 'adminConsoleButton':
                 gameManager.getCurrentGameScene(this).ConsoleGlobalMessageManager.activeMessageConsole();
                 break;
@@ -328,4 +331,21 @@ export class MenuScene extends Phaser.Scene {
         this.closeGameShare();
         this.gameReportElement.close();
     }
+
+    private showJoystick() {
+        const gameScene = gameManager.getCurrentGameScene(this)
+        if (gameScene?.virtualJoystick) {
+            const joystickVisible = !gameScene.virtualJoystick.visible
+            gameScene.virtualJoystick.visible = joystickVisible
+            localUserStore.setJoystick(joystickVisible)
+        }
+        const body = document.querySelector('body')
+        if (body) {
+            if (document.fullscreenElement ?? document.fullscreen) {
+                document.exitFullscreen()
+            } else {
+                body.requestFullscreen();
+            }
+        }
+    }
 }

front/src/Phaser/UserInput/UserInputManager.ts

@@ -1,4 +1,8 @@
+import { Direction, IVirtualJoystick } from "../../types";
 import {GameScene} from "../Game/GameScene";
+const {
+  default: VirtualJoystick,
+} = require("phaser3-rex-plugins/plugins/virtualjoystick.js");
 
 interface UserInputManagerDatum {
     keyInstance: Phaser.Input.Keyboard.Key;
@@ -25,6 +29,9 @@ export class ActiveEventList {
     set(event: UserInputEvent, value: boolean): void {
         this.KeysCode.set(event, value);
     }
+    forEach(callback: (value: boolean, key: UserInputEvent) => void): void {
+        this.KeysCode.forEach(callback);
+    }
 }
 
 //this class is responsible for catching user inputs and listing all active user actions at every game tick events.
@@ -32,10 +39,32 @@ export class UserInputManager {
     private KeysCode!: UserInputManagerDatum[];
     private Scene: GameScene;
     private isInputDisabled : boolean;
-    constructor(Scene : GameScene) {
+    private joystickEvents = new ActiveEventList();
+
+    constructor(Scene: GameScene, virtualJoystick: IVirtualJoystick) {
         this.Scene = Scene;
-        this.initKeyBoardEvent();
         this.isInputDisabled = false;
+        this.initKeyBoardEvent();
+        virtualJoystick.on("update", () => {
+            const cursorKeys = virtualJoystick.createCursorKeys();
+            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;
+                }
+            }
+        });
     }
 
     initKeyBoardEvent(){
@@ -78,11 +107,15 @@ export class UserInputManager {
         if (this.isInputDisabled) {
             return eventsMap;
         }
+        this.joystickEvents.forEach((value, key) => {
+            if (value) {
+                eventsMap.set(key, value);
+            }
+        });
         this.KeysCode.forEach(d => {
             if (d. keyInstance.isDown) {
                 eventsMap.set(d.event, true);
             }
-
         });
         return eventsMap;
     }

front/src/types.ts

@@ -0,0 +1,22 @@
+import Phaser from "phaser";
+
+export type CursorKey = {
+    isDown: boolean
+}
+
+export type Direction =  'left' | 'right' | 'up' | 'down'
+
+export interface CursorKeys extends Record<Direction, CursorKey> {
+    left: CursorKey;
+    right: CursorKey;
+    up: CursorKey;
+    down: CursorKey;
+}
+
+export interface IVirtualJoystick extends Phaser.GameObjects.GameObject {
+    y: number;
+    x: number;
+    visible: boolean;
+    createCursorKeys: () => CursorKeys;
+}
+