From d7a74baa9d6344ce9e0a04df85f778f3196eef6f Mon Sep 17 00:00:00 2001 From: kharhamel Date: Wed, 14 Apr 2021 17:47:26 +0200 Subject: [PATCH] FEATURE: add the ability to zoom in and out using touch screen --- front/.eslintrc.json | 3 +-- front/src/Phaser/Game/GameManager.ts | 2 +- front/src/Phaser/Game/GameScene.ts | 10 +++++++--- front/src/Phaser/Login/EnableCameraScene.ts | 6 ++++++ front/src/Phaser/Login/LoginScene.ts | 5 +++++ front/src/Phaser/Login/SelectCharacterScene.ts | 8 ++++++-- front/src/Phaser/Login/SelectCompanionScene.ts | 6 ++++++ front/src/Phaser/UserInput/PinchManager.ts | 16 ++++++++++++++++ front/src/Touch/TouchScreenManager.ts | 16 ++++++++++++++++ front/src/index.ts | 3 +-- front/src/rex-plugins.d.ts | 12 ++++++++++++ 11 files changed, 77 insertions(+), 10 deletions(-) create mode 100644 front/src/Phaser/UserInput/PinchManager.ts create mode 100644 front/src/Touch/TouchScreenManager.ts create mode 100644 front/src/rex-plugins.d.ts diff --git a/front/.eslintrc.json b/front/.eslintrc.json index 3aab37d9..3ba19cb3 100644 --- a/front/.eslintrc.json +++ b/front/.eslintrc.json @@ -24,7 +24,6 @@ "@typescript-eslint" ], "rules": { - "no-unused-vars": "off", - "@typescript-eslint/no-explicit-any": "error" + "no-unused-vars": "off" } } diff --git a/front/src/Phaser/Game/GameManager.ts b/front/src/Phaser/Game/GameManager.ts index c146c06d..da10a8ca 100644 --- a/front/src/Phaser/Game/GameManager.ts +++ b/front/src/Phaser/Game/GameManager.ts @@ -34,7 +34,7 @@ export class GameManager { public async init(scenePlugin: Phaser.Scenes.ScenePlugin): Promise { this.startRoom = await connectionManager.initGameConnexion(); await this.loadMap(this.startRoom, scenePlugin); - + if (!this.playerName) { return LoginSceneName; } else if (!this.characterLayers || !this.characterLayers.length) { diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 294174a2..f18a11d1 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/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 { - default: VirtualJoystick, -} = require("phaser3-rex-plugins/plugins/virtualjoystick.js"); +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"; @@ -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(); diff --git a/front/src/Phaser/Login/EnableCameraScene.ts b/front/src/Phaser/Login/EnableCameraScene.ts index c3aa5077..6a91fc34 100644 --- a/front/src/Phaser/Login/EnableCameraScene.ts +++ b/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'); diff --git a/front/src/Phaser/Login/LoginScene.ts b/front/src/Phaser/Login/LoginScene.ts index 4ff582b4..057cb6ae 100644 --- a/front/src/Phaser/Login/LoginScene.ts +++ b/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; diff --git a/front/src/Phaser/Login/SelectCharacterScene.ts b/front/src/Phaser/Login/SelectCharacterScene.ts index edd09a91..3c8d0281 100644 --- a/front/src/Phaser/Login/SelectCharacterScene.ts +++ b/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, diff --git a/front/src/Phaser/Login/SelectCompanionScene.ts b/front/src/Phaser/Login/SelectCompanionScene.ts index c7ee56f1..aeacd0c2 100644 --- a/front/src/Phaser/Login/SelectCompanionScene.ts +++ b/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); diff --git a/front/src/Phaser/UserInput/PinchManager.ts b/front/src/Phaser/UserInput/PinchManager.ts new file mode 100644 index 00000000..f412b787 --- /dev/null +++ b/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; + }); + } + +} \ No newline at end of file diff --git a/front/src/Touch/TouchScreenManager.ts b/front/src/Touch/TouchScreenManager.ts new file mode 100644 index 00000000..dcb56ded --- /dev/null +++ b/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(); \ No newline at end of file diff --git a/front/src/index.ts b/front/src/index.ts index aab45a9b..5a18951b 100644 --- a/front/src/index.ts +++ b/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(); diff --git a/front/src/rex-plugins.d.ts b/front/src/rex-plugins.d.ts new file mode 100644 index 00000000..bb0816b6 --- /dev/null +++ b/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; +} \ No newline at end of file