Integrate virtual joystick

front/dist/resources/html/gameMenu.html

@@ -36,6 +36,9 @@
         <section>
             <button id="editGameSettingsButton">Settings</button>
         </section>
+        <section>
+            <button id="showJoystick">Show joystick</button>
+        </section>
         <section>
             <button id="sparkButton">Create map</button>
         </section>

front/dist/resources/style/style.css

@@ -151,6 +151,7 @@ video#myCamVideo{
 
 
 .btn-cam-action {
+    pointer-events: all;
     position: absolute;
     bottom: 0px;
     right: 0px;
@@ -186,18 +187,26 @@ video#myCamVideo{
     transition: 280ms;
 }
 .btn-micro{
+    pointer-events: auto;
     transition: all .3s;
     right: 44px;
 }
 .btn-video{
+    pointer-events: auto;
     transition: all .25s;
     right: 134px;
 }
 .btn-monitor{
+    pointer-events: auto;
     transition: all .2s;
     right: 224px;
 }
-
+.btn-copy{
+    pointer-events: auto;
+    transition: all .3s;
+    right: 44px;
+    opacity: 1;
+}
 .btn-cam-action div img{
     height: 22px;
     width: 30px;
@@ -502,6 +511,7 @@ input[type=range]:focus::-ms-fill-upper {
     position: absolute;
     width: 100%;
     height: 100%;
+    pointer-events: none;
     /* TODO: DO WE NEED FLEX HERE???? WE WANT A SIDEBAR OF EXACTLY 25% (note: flex useful for direction!!!) */
 }
 
@@ -537,6 +547,7 @@ input[type=range]:focus::-ms-fill-upper {
 .sidebar {
     flex: 0 0 25%;
     display: flex;
+    pointer-events: none;
 }
 
 .sidebar > div {

front/package.json

@@ -31,6 +31,7 @@
     "generic-type-guard": "^3.2.0",
     "google-protobuf": "^3.13.0",
     "phaser": "3.24.1",
+    "phaser3-rex-plugins": "^1.1.42",
     "queue-typescript": "^1.0.1",
     "quill": "^1.3.7",
     "rxjs": "^6.6.3",

front/src/Connexion/LocalUserStore.ts

@@ -10,6 +10,7 @@ const videoQualityKey =         'videoQuality';
 const audioPlayerVolumeKey =    'audioVolume';
 const audioPlayerMuteKey =      'audioMute';
 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;
+}
+

front/tsconfig.json

@@ -9,6 +9,7 @@
     "downlevelIteration": true,
     "jsx": "react",
     "allowJs": true,
+    "esModuleInterop": true,
 
     "strict": true,                        /* Enable all strict type-checking options. */
     "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */

front/yarn.lock

@@ -1819,6 +1819,11 @@ eventemitter3@^2.0.3:
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-2.0.3.tgz#b5e1079b59fb5e1ba2771c0a993be060a58c99ba"
   integrity sha1-teEHm1n7XhuidxwKmTvgYKWMmbo=
 
+eventemitter3@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-3.1.2.tgz#2d3d48f9c346698fce83a85d7d664e98535df6e7"
+  integrity sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q==
+
 eventemitter3@^4.0.0, eventemitter3@^4.0.4:
   version "4.0.7"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
@@ -3064,6 +3069,11 @@ loglevel@^1.6.8:
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.7.0.tgz#728166855a740d59d38db01cf46f042caa041bb0"
   integrity sha512-i2sY04nal5jDcagM3FMfG++T69GEEM8CYuOfeOIvmXzOIcwE9a/CJPR0MFM97pYMj/u10lzz7/zd7+qwhrBTqQ==
 
+lokijs@^1.5.11:
+  version "1.5.11"
+  resolved "https://registry.yarnpkg.com/lokijs/-/lokijs-1.5.11.tgz#2b2ea82ec66050e4b112c6cfc588dac22d362b13"
+  integrity sha512-YYyuBPxMn/oS0tFznQDbIX5XL1ltMcwFqCboDr8voYE4VCDzR5vAsrvQDhlnua4lBeqMqHmLvUXRTmRUzUKH1Q==
+
 lower-case@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-2.0.1.tgz#39eeb36e396115cc05e29422eaea9e692c9408c7"
@@ -3625,6 +3635,11 @@ pako@~1.0.5:
   resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
   integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
 
+papaparse@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/papaparse/-/papaparse-5.3.0.tgz#ab1702feb96e79ab4309652f36db9536563ad05a"
+  integrity sha512-Lb7jN/4bTpiuGPrYy4tkKoUS8sTki8zacB5ke1p5zolhcSE4TlWgrlsxjrDTbG/dFVh07ck7X36hUf/b5V68pg==
+
 parallel-transform@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/parallel-transform/-/parallel-transform-1.2.0.tgz#9049ca37d6cb2182c3b1d2c720be94d14a5814fc"
@@ -3752,6 +3767,16 @@ pbkdf2@^3.0.3:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+phaser3-rex-plugins@^1.1.42:
+  version "1.1.44"
+  resolved "https://registry.yarnpkg.com/phaser3-rex-plugins/-/phaser3-rex-plugins-1.1.44.tgz#83588ab2801c5b3a80a18be4f0ae37f1f32096b0"
+  integrity sha512-JPr3+UQv4+uv4etZr80aFhYxw2dk4UYG9/gQ4uMSSXQuc8gXQkXCr3J3zm8LJqH+1FXeK8nncpC7TKa4uKLgQw==
+  dependencies:
+    eventemitter3 "^3.1.2"
+    lokijs "^1.5.11"
+    papaparse "^5.3.0"
+    webfontloader "^1.6.28"
+
 phaser@3.24.1:
   version "3.24.1"
   resolved "https://registry.yarnpkg.com/phaser/-/phaser-3.24.1.tgz#376e0c965d2a35af37c06ee78627dafbde5be017"
@@ -5144,6 +5169,11 @@ wbuf@^1.1.0, wbuf@^1.7.3:
   dependencies:
     minimalistic-assert "^1.0.0"
 
+webfontloader@^1.6.28:
+  version "1.6.28"
+  resolved "https://registry.yarnpkg.com/webfontloader/-/webfontloader-1.6.28.tgz#db786129253cb6e8eae54c2fb05f870af6675bae"
+  integrity sha1-23hhKSU8tujq5UwvsF+HCvZnW64=
+
 webpack-cli@^3.3.11:
   version "3.3.12"
   resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-3.3.12.tgz#94e9ada081453cd0aa609c99e500012fd3ad2d4a"