Add touch input support to login scenes (thx @TabscoEye)

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;

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;

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<Phaser.Physics.Arcade.Sprite> = new Array<Phaser.Physics.Arcade.Sprite>();
+    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,
+            90 + 32 * Math.ceil( this.playerModels.length / this.nbCharactersPerRow) + 60,
-            'Press enter to start');
+            '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;