FEATURE: add the ability to zoom in and out using touch screen

front/.eslintrc.json

@@ -24,7 +24,6 @@
         "@typescript-eslint"
     ],
     "rules": {
-        "no-unused-vars": "off",
+        "no-unused-vars": "off"
-        "@typescript-eslint/no-explicit-any": "error"
     }
 }

front/src/Phaser/Game/GameManager.ts

@@ -34,7 +34,7 @@ export class GameManager {
     public async init(scenePlugin: Phaser.Scenes.ScenePlugin): Promise<string> {
         this.startRoom = await connectionManager.initGameConnexion();
         await this.loadMap(this.startRoom, scenePlugin);
-        
+
         if (!this.playerName) {
             return LoginSceneName;
         } else if (!this.characterLayers || !this.characterLayers.length) {

front/src/Phaser/Game/GameScene.ts

@@ -52,9 +52,7 @@ import {jitsiFactory} from "../../WebRtc/JitsiFactory";
 import {urlManager} from "../../Url/UrlManager";
 import {audioManager} from "../../WebRtc/AudioManager";
 import {IVirtualJoystick} from "../../types";
-const {
+import VirtualJoystick from 'phaser3-rex-plugins/plugins/virtualjoystick.js';
-  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";
@@ -74,6 +72,8 @@ import DOMElement = Phaser.GameObjects.DOMElement;
 import {Subscription} from "rxjs";
 import {worldFullMessageStream} from "../../Connexion/WorldFullMessageStream";
 import { lazyLoadCompanionResource } from "../Companion/CompanionTexturesLoadingManager";
+import {touchScreenManager} from "../../Touch/TouchScreenManager";
+import {PinchManager} from "../UserInput/PinchManager";
 
 export interface GameSceneInitInterface {
     initPosition: PointInterface|null,
@@ -351,6 +351,10 @@ export class GameScene extends ResizableScene implements CenterListener {
         urlManager.pushRoomIdToUrl(this.room);
         this.startLayerName = urlManager.getStartLayerNameFromUrl();
 
+        if (touchScreenManager.supportTouchScreen) {
+            new PinchManager(this);
+        }
+
         this.messageSubscription = worldFullMessageStream.stream.subscribe((message) => this.showWorldFullError())
 
         const playerName = gameManager.getPlayerName();

front/src/Phaser/Login/EnableCameraScene.ts

@@ -7,6 +7,8 @@ import {RESOLUTION} from "../../Enum/EnvironmentVariable";
 import {SoundMeter} from "../Components/SoundMeter";
 import {SoundMeterSprite} from "../Components/SoundMeterSprite";
 import {HtmlUtils} from "../../WebRtc/HtmlUtils";
+import {touchScreenManager} from "../../Touch/TouchScreenManager";
+import {PinchManager} from "../UserInput/PinchManager";
 
 export const EnableCameraSceneName = "EnableCameraScene";
 enum LoginTextures {
@@ -54,6 +56,10 @@ export class EnableCameraScene extends Phaser.Scene {
     }
 
     create() {
+        if (touchScreenManager.supportTouchScreen) {
+            new PinchManager(this);
+        }
+        
         this.textField = new TextField(this, this.game.renderer.width / 2, 20, 'Turn on your camera and microphone');
 
         this.pressReturnField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height - 30, 'Touch here\n\n or \n\nPress enter to start');

front/src/Phaser/Login/LoginScene.ts

@@ -7,6 +7,8 @@ import {ResizableScene} from "./ResizableScene";
 import {isUserNameValid, maxUserNameLength} from "../../Connexion/LocalUser";
 import { localUserStore } from "../../Connexion/LocalUserStore";
 import Rectangle = Phaser.GameObjects.Rectangle;
+import {touchScreenManager} from "../../Touch/TouchScreenManager";
+import {PinchManager} from "../UserInput/PinchManager";
 
 //todo: put this constants in a dedicated file
 export const LoginSceneName = "LoginScene";
@@ -39,6 +41,9 @@ export class LoginScene extends ResizableScene {
     }
 
     create() {
+        if (touchScreenManager.supportTouchScreen) {
+            new PinchManager(this);
+        }
 
         this.nameInput = new TextInput(this, this.game.renderer.width / 2, 70, maxUserNameLength, this.name,(text: string) => {
             this.name = text;

front/src/Phaser/Login/SelectCharacterScene.ts

@@ -4,13 +4,14 @@ import Image = Phaser.GameObjects.Image;
 import Rectangle = Phaser.GameObjects.Rectangle;
 import {EnableCameraSceneName} from "./EnableCameraScene";
 import {CustomizeSceneName} from "./CustomizeScene";
-import {ResizableScene} from "./ResizableScene";
 import {localUserStore} from "../../Connexion/LocalUserStore";
-import {loadAllDefaultModels, loadCustomTexture} from "../Entity/PlayerTexturesLoadingManager";
+import {loadAllDefaultModels} from "../Entity/PlayerTexturesLoadingManager";
 import {addLoader} from "../Components/Loader";
 import {BodyResourceDescriptionInterface} from "../Entity/PlayerTextures";
 import {AbstractCharacterScene} from "./AbstractCharacterScene";
 import {areCharacterLayersValid} from "../../Connexion/LocalUser";
+import {touchScreenManager} from "../../Touch/TouchScreenManager";
+import {PinchManager} from "../UserInput/PinchManager";
 
 
 //todo: put this constants in a dedicated file
@@ -66,6 +67,9 @@ export class SelectCharacterScene extends AbstractCharacterScene {
     }
 
     create() {
+        if (touchScreenManager.supportTouchScreen) {
+            new PinchManager(this);
+        }
         this.textField = new TextField(this, this.game.renderer.width / 2, 50, 'Select your character');
         this.pressReturnField = new TextField(
             this,

front/src/Phaser/Login/SelectCompanionScene.ts

@@ -8,6 +8,8 @@ import { EnableCameraSceneName } from "./EnableCameraScene";
 import { localUserStore } from "../../Connexion/LocalUserStore";
 import { CompanionResourceDescriptionInterface } from "../Companion/CompanionTextures";
 import { getAllCompanionResources } from "../Companion/CompanionTexturesLoadingManager";
+import {touchScreenManager} from "../../Touch/TouchScreenManager";
+import {PinchManager} from "../UserInput/PinchManager";
 
 export const SelectCompanionSceneName = "SelectCompanionScene";
 
@@ -54,6 +56,10 @@ export class SelectCompanionScene extends ResizableScene {
     }
 
     create() {
+        if (touchScreenManager.supportTouchScreen) {
+            new PinchManager(this);
+        }
+        
         this.textField = new TextField(this, this.game.renderer.width / 2, 50, 'Select your companion');
 
         const confirmTouchAreaY = 115 + 32 * Math.ceil(this.companionModels.length / this.nbCharactersPerRow);

front/src/Phaser/UserInput/PinchManager.ts

@@ -0,0 +1,16 @@
+import {Pinch} from "phaser3-rex-plugins/plugins/gestures.js";
+
+export class PinchManager {
+    private scene: Phaser.Scene;
+    private pinch!: any;
+    
+    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;
+        });
+    }
+    
+}

front/src/Touch/TouchScreenManager.ts

@@ -0,0 +1,16 @@
+
+class TouchScreenManager {
+    
+    readonly supportTouchScreen:boolean;
+    
+    constructor() {
+        this.supportTouchScreen = this.detectTouchscreen();
+    }
+
+    //found here: https://stackoverflow.com/questions/4817029/whats-the-best-way-to-detect-a-touch-screen-device-using-javascript#4819886
+    detectTouchscreen(): boolean {
+        return (('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0));
+    }
+}
+
+export const touchScreenManager = new TouchScreenManager();

front/src/index.ts

@@ -2,7 +2,7 @@ import 'phaser';
 import GameConfig = Phaser.Types.Core.GameConfig;
 import "../dist/resources/style/index.scss";
 
-import {DEBUG_MODE, JITSI_URL, RESOLUTION} from "./Enum/EnvironmentVariable";
+import {DEBUG_MODE, RESOLUTION} from "./Enum/EnvironmentVariable";
 import {LoginScene} from "./Phaser/Login/LoginScene";
 import {ReconnectingScene} from "./Phaser/Reconnecting/ReconnectingScene";
 import {SelectCharacterScene} from "./Phaser/Login/SelectCharacterScene";
@@ -17,7 +17,6 @@ import {HelpCameraSettingsScene} from "./Phaser/Menu/HelpCameraSettingsScene";
 import {localUserStore} from "./Connexion/LocalUserStore";
 import {ErrorScene} from "./Phaser/Reconnecting/ErrorScene";
 import {iframeListener} from "./Api/IframeListener";
-import {discussionManager} from "./WebRtc/DiscussionManager";
 
 const {width, height} = coWebsiteManager.getGameSize();
 

front/src/rex-plugins.d.ts

@@ -0,0 +1,12 @@
+
+declare module 'phaser3-rex-plugins/plugins/virtualjoystick.js' {
+    const content: any;
+    export default content;
+}
+declare module 'phaser3-rex-plugins/plugins/gestures-plugin.js' {
+    const content: any;
+    export default content;
+}
+declare module 'phaser3-rex-plugins/plugins/gestures.js' {
+    export const Pinch: any;
+}