From e80735027919fa362418485fda1f61de7fa7c174 Mon Sep 17 00:00:00 2001 From: PizZaKatZe Date: Wed, 3 Feb 2021 23:22:23 +0100 Subject: [PATCH] Add touch input support to login scenes (thx @TabscoEye) --- front/src/Phaser/Login/EnableCameraScene.ts | 17 +++++++++- front/src/Phaser/Login/LoginScene.ts | 32 ++++++++++++++++--- .../src/Phaser/Login/SelectCharacterScene.ts | 17 ++++++++-- 3 files changed, 59 insertions(+), 7 deletions(-) diff --git a/front/src/Phaser/Login/EnableCameraScene.ts b/front/src/Phaser/Login/EnableCameraScene.ts index a3ca5cf1..c3aa5077 100644 --- a/front/src/Phaser/Login/EnableCameraScene.ts +++ b/front/src/Phaser/Login/EnableCameraScene.ts @@ -1,6 +1,7 @@ import {gameManager} from "../Game/GameManager"; import {TextField} from "../Components/TextField"; import Image = Phaser.GameObjects.Image; +import Rectangle = Phaser.GameObjects.Rectangle; import {mediaManager} from "../../WebRtc/MediaManager"; import {RESOLUTION} from "../../Enum/EnvironmentVariable"; import {SoundMeter} from "../Components/SoundMeter"; @@ -35,6 +36,7 @@ export class EnableCameraScene extends Phaser.Scene { private microphoneNameField!: TextField; private repositionCallback!: (this: Window, ev: UIEvent) => void; + private mobileTapRectangle!: Rectangle; constructor() { super({ key: EnableCameraSceneName @@ -54,7 +56,19 @@ export class EnableCameraScene extends Phaser.Scene { create() { 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, 'Press enter to start'); + 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'); + // For mobile purposes - we need a big enough touchable area. + this.mobileTapRectangle = this.add + .rectangle( + this.game.renderer.width / 2, + this.game.renderer.height - 30, + 200, + 50, + ) + .setInteractive() + .on("pointerdown", () => { + this.login(); + }); this.cameraNameField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height - 60, ''); @@ -195,6 +209,7 @@ export class EnableCameraScene extends Phaser.Scene { } this.textField.x = this.game.renderer.width / 2; + this.mobileTapRectangle.x = this.game.renderer.width / 2; this.cameraNameField.x = this.game.renderer.width / 2; this.microphoneNameField.x = this.game.renderer.width / 2; this.pressReturnField.x = this.game.renderer.width / 2; diff --git a/front/src/Phaser/Login/LoginScene.ts b/front/src/Phaser/Login/LoginScene.ts index ffdf1367..4ff582b4 100644 --- a/front/src/Phaser/Login/LoginScene.ts +++ b/front/src/Phaser/Login/LoginScene.ts @@ -5,6 +5,8 @@ import Image = Phaser.GameObjects.Image; import {SelectCharacterSceneName} from "./SelectCharacterScene"; import {ResizableScene} from "./ResizableScene"; import {isUserNameValid, maxUserNameLength} from "../../Connexion/LocalUser"; +import { localUserStore } from "../../Connexion/LocalUserStore"; +import Rectangle = Phaser.GameObjects.Rectangle; //todo: put this constants in a dedicated file export const LoginSceneName = "LoginScene"; @@ -20,6 +22,7 @@ export class LoginScene extends ResizableScene { private pressReturnField!: TextField; private logo!: Image; private name: string = ''; + private mobileTapRectangle!: Rectangle; constructor() { super({ @@ -37,17 +40,36 @@ export class LoginScene extends ResizableScene { create() { - this.textField = new TextField(this, this.game.renderer.width / 2, 50, 'Enter your name:'); this.nameInput = new TextInput(this, this.game.renderer.width / 2, 70, maxUserNameLength, this.name,(text: string) => { this.name = text; - }); + localUserStore.setName(text); + }) + .setInteractive() + .on('pointerdown', () => { + this.nameInput.focus(); + }) - this.pressReturnField = new TextField(this, this.game.renderer.width / 2, 130, 'Press enter to start'); + this.textField = new TextField(this, this.game.renderer.width / 2, 50, 'Enter your name:') + .setInteractive() + .on('pointerdown', () => { + this.nameInput.focus(); + }) + // For mobile purposes - we need a big enough touchable area. + this.mobileTapRectangle = this.add.rectangle( + this.game.renderer.width / 2, + 130, + this.game.renderer.width / 2, + 60, + ).setInteractive() + .on('pointerdown', () => { + this.login(this.name) + }) + this.pressReturnField = new TextField(this, this.game.renderer.width / 2, 130, 'Touch here\n\n or \n\nPress enter to start') this.logo = new Image(this, this.game.renderer.width - 30, this.game.renderer.height - 20, LoginTextures.icon); this.add.existing(this.logo); - const infoText = "Commands: \n - Arrows or Z,Q,S,D to move\n - SHIFT to run"; + const infoText = "Commands: \n - Arrows or W, A, S, D to move\n - SHIFT to run"; this.infoTextField = new TextField(this, 10, this.game.renderer.height - 35, infoText, false); this.input.keyboard.on('keyup-ENTER', () => { @@ -66,6 +88,7 @@ export class LoginScene extends ResizableScene { } private login(name: string): void { + if (this.name === '') return gameManager.setPlayerName(name); this.scene.stop(LoginSceneName) @@ -77,6 +100,7 @@ export class LoginScene extends ResizableScene { this.textField.x = this.game.renderer.width / 2; this.nameInput.setX(this.game.renderer.width / 2 - 64); this.pressReturnField.x = this.game.renderer.width / 2; + this.mobileTapRectangle.x = this.game.renderer.width / 2; this.logo.x = this.game.renderer.width - 30; this.logo.y = this.game.renderer.height - 20; this.infoTextField.y = this.game.renderer.height - 35; diff --git a/front/src/Phaser/Login/SelectCharacterScene.ts b/front/src/Phaser/Login/SelectCharacterScene.ts index a1f3fd81..821fff20 100644 --- a/front/src/Phaser/Login/SelectCharacterScene.ts +++ b/front/src/Phaser/Login/SelectCharacterScene.ts @@ -36,6 +36,7 @@ export class SelectCharacterScene extends AbstractCharacterScene { private selectedRectangleYPos = 0; // Number of the character selected in the columns private selectedPlayer!: Phaser.Physics.Arcade.Sprite|null; // null if we are selecting the "customize" option private players: Array = new Array(); + private mobileTapRectangle!: Rectangle; private playerModels!: BodyResourceDescriptionInterface[]; constructor() { @@ -69,8 +70,20 @@ export class SelectCharacterScene extends AbstractCharacterScene { this.pressReturnField = new TextField( this, this.game.renderer.width / 2, - 90 + 32 * Math.ceil( this.playerModels.length / this.nbCharactersPerRow) + 40, - 'Press enter to start'); + 90 + 32 * Math.ceil( this.playerModels.length / this.nbCharactersPerRow) + 60, + 'Touch here\n\n or \n\nPress enter to start'); + // For mobile purposes - we need a big enough touchable area. + this.mobileTapRectangle = this.add + .rectangle( + this.game.renderer.width / 2, + 275, + this.game.renderer.width / 2, + 50, + ) + .setInteractive() + .on("pointerdown", () => { + this.nextScene(); + }); const rectangleXStart = this.game.renderer.width / 2 - (this.nbCharactersPerRow / 2) * 32 + 16;