From 86e90c2dc25f40ff6966ce951b34ec9fa81a7467 Mon Sep 17 00:00:00 2001 From: Volker Mische Date: Sat, 27 Feb 2021 18:30:37 +0100 Subject: [PATCH 01/10] Make name entry on mobile browsers possible Prior to this change, there wasn't a way in mobile browsers to show the virtual keyboard in order to enter the player name. With this change, the name entry is now done via a hidden input field, which enables the use if a virtual keyboard. Mobile browsers are not special cased, the desktop browsers will also use the input field. --- front/src/Phaser/Components/TextInput.ts | 42 +++++++++++++----------- front/src/Phaser/Login/LoginScene.ts | 17 ++++++++++ 2 files changed, 40 insertions(+), 19 deletions(-) diff --git a/front/src/Phaser/Components/TextInput.ts b/front/src/Phaser/Components/TextInput.ts index 1e01029b..89e772bf 100644 --- a/front/src/Phaser/Components/TextInput.ts +++ b/front/src/Phaser/Components/TextInput.ts @@ -1,7 +1,9 @@ +import {HtmlUtils} from "../../WebRtc/HtmlUtils"; export class TextInput extends Phaser.GameObjects.BitmapText { private minUnderLineLength = 4; private underLine: Phaser.GameObjects.Text; + private onChange: (text: string) => void; constructor(scene: Phaser.Scene, x: number, y: number, maxLength: number, text: string, onChange: (text: string) => void) { super(scene, x, y, 'main_font', text, 32); @@ -10,19 +12,30 @@ export class TextInput extends Phaser.GameObjects.BitmapText { this.underLine = this.scene.add.text(x, y+1, this.getUnderLineBody(text.length), { fontFamily: 'Arial', fontSize: "32px", color: '#ffffff'}) this.underLine.setOrigin(0.5) + this.onChange = onChange; + // Use a hidden input field so that on mobile browsers the virtual + // keyboard will be displayed + const mainContainer = HtmlUtils.getElementByIdOrFail('main-container'); + const inputElement = document.createElement('input'); + inputElement.id = 'playerName'; + inputElement.maxLength = maxLength + // Make sure that now scolling is needed and that the input field is + // not visible + inputElement.setAttribute('style', 'opacity:0;position:absolute;bottom:0'); + mainContainer.appendChild(inputElement); - this.scene.input.keyboard.on('keydown', (event: KeyboardEvent) => { - if (event.keyCode === 8 && this.text.length > 0) { - this.deleteLetter(); - } else if ((event.keyCode === 32 || (event.keyCode >= 48 && event.keyCode <= 90)) && this.text.length < maxLength) { - this.addLetter(event.key); - } - this.underLine.text = this.getUnderLineBody(this.text.length); - onChange(this.text); - }); + inputElement.addEventListener('input', this.onInput.bind(this) as EventListener); } - + + private onInput(event: InputEvent) { + const inputElement = event.target; + // Truncate the text to the maximum length, this is needed for mobile + // browsers that don't support the input field `maxLength` attribute + this.text = inputElement.value.substr(0, inputElement.maxLength) + this.onChange(this.text); + } + private getUnderLineBody(textLength:number): string { if (textLength < this.minUnderLineLength) textLength = this.minUnderLineLength; let text = '_______'; @@ -32,15 +45,6 @@ export class TextInput extends Phaser.GameObjects.BitmapText { return text; } - private deleteLetter() { - this.text = this.text.substr(0, this.text.length - 1); - } - - - private addLetter(letter: string) { - this.text += letter; - } - getText(): string { return this.text; } diff --git a/front/src/Phaser/Login/LoginScene.ts b/front/src/Phaser/Login/LoginScene.ts index 9ca6dcd2..4055fdd3 100644 --- a/front/src/Phaser/Login/LoginScene.ts +++ b/front/src/Phaser/Login/LoginScene.ts @@ -1,3 +1,4 @@ +import {HtmlUtils} from "../../WebRtc/HtmlUtils"; import {gameManager} from "../Game/GameManager"; import {TextField} from "../Components/TextField"; import {TextInput} from "../Components/TextInput"; @@ -41,6 +42,22 @@ export class LoginScene extends ResizableScene { this.name = text; }); + // Mobile Browsers need an input field, so that a virtual keyboard + // gets shown + const nameInputElement = HtmlUtils.getElementByIdOrFail('playerName'); + // As we need an input field for mobile browsers, use it also for + // the desktop. Therefore make sure that is has the focus when the page + // is loaded, so that all keyboard events are handled by that input + // field. + nameInputElement.focus() + // Mobile browsers won't show the virtual keyboard on page load, hence + // re-focus to make it pop up. On desktop browsers it doesn't do any + // harm. + this.input.on('pointerdown', () => { + nameInputElement.blur(); + nameInputElement.focus(); + }); + this.pressReturnField = new TextField(this, this.game.renderer.width / 2, 130, 'Press enter to start'); this.logo = new Image(this, this.game.renderer.width - 30, this.game.renderer.height - 20, LoginTextures.icon); From 52acc143f61ab8e24089c48a3f67ad51258b916d Mon Sep 17 00:00:00 2001 From: Volker Mische Date: Sun, 28 Feb 2021 16:41:57 +0100 Subject: [PATCH 02/10] Make sure the virtual keyboard isn't visible in the next scene --- front/src/Phaser/Login/LoginScene.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/front/src/Phaser/Login/LoginScene.ts b/front/src/Phaser/Login/LoginScene.ts index 4055fdd3..a57eac5f 100644 --- a/front/src/Phaser/Login/LoginScene.ts +++ b/front/src/Phaser/Login/LoginScene.ts @@ -72,6 +72,11 @@ export class LoginScene extends ResizableScene { } this.login(this.name); }); + + this.events.on('destroy', () => { + // Make sure the virtual keyboard isn't visible in the next scene + nameInputElement.blur() + }) } update(time: number, delta: number): void { From 4b2af705a34346642d4246be1ddff4af5bb5fe3c Mon Sep 17 00:00:00 2001 From: Volker Mische Date: Sun, 28 Feb 2021 17:26:15 +0100 Subject: [PATCH 03/10] Put hidden input field at the top The input field was placed at the bottom, but that lead to some cutting of the top on mobile Chrome. Putting it at the top seems to work fine in both Chrome and Fennec. --- front/src/Phaser/Components/TextInput.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/front/src/Phaser/Components/TextInput.ts b/front/src/Phaser/Components/TextInput.ts index 89e772bf..9dbe5d6c 100644 --- a/front/src/Phaser/Components/TextInput.ts +++ b/front/src/Phaser/Components/TextInput.ts @@ -22,7 +22,7 @@ export class TextInput extends Phaser.GameObjects.BitmapText { inputElement.maxLength = maxLength // Make sure that now scolling is needed and that the input field is // not visible - inputElement.setAttribute('style', 'opacity:0;position:absolute;bottom:0'); + inputElement.setAttribute('style', 'opacity:0;position:absolute;top:0'); mainContainer.appendChild(inputElement); inputElement.addEventListener('input', this.onInput.bind(this) as EventListener); From ea359410d8c2d0e8461707f9afd6666f7578994e Mon Sep 17 00:00:00 2001 From: Lurkars Date: Tue, 9 Mar 2021 18:46:45 +0100 Subject: [PATCH 04/10] init, merge, add mobile --- front/dist/index.tmpl.html | 6 ++ front/dist/resources/style/style.css | 41 +++++++++ front/dist/static/images/input/a.png | Bin 0 -> 1850 bytes front/dist/static/images/input/b.png | Bin 0 -> 8333 bytes front/dist/static/images/input/dpad.png | Bin 0 -> 3066 bytes front/dist/static/js/touchcontrols.js | 111 ++++++++++++++++++++++++ front/src/Phaser/Game/GameManager.ts | 11 ++- 7 files changed, 167 insertions(+), 2 deletions(-) create mode 100644 front/dist/static/images/input/a.png create mode 100644 front/dist/static/images/input/b.png create mode 100644 front/dist/static/images/input/dpad.png create mode 100644 front/dist/static/js/touchcontrols.js diff --git a/front/dist/index.tmpl.html b/front/dist/index.tmpl.html index a2b44788..a2747de2 100644 --- a/front/dist/index.tmpl.html +++ b/front/dist/index.tmpl.html @@ -64,6 +64,12 @@ +
+
+
+
+ +
From eee3ea33997c3118e2f4c190699d3369e8b86c3b Mon Sep 17 00:00:00 2001 From: _Bastler <_Bastler@bstly.de> Date: Wed, 24 Mar 2021 20:04:47 +0100 Subject: [PATCH 07/10] clean gameMenu --- front/dist/resources/html/gameMenu.html | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/front/dist/resources/html/gameMenu.html b/front/dist/resources/html/gameMenu.html index 21f7ccb9..2d3c9cf0 100644 --- a/front/dist/resources/html/gameMenu.html +++ b/front/dist/resources/html/gameMenu.html @@ -30,5 +30,10 @@
+ + From c2a765cb0dfdcbadfd2bbc6d6cf5708af0eeabb0 Mon Sep 17 00:00:00 2001 From: _Bastler <_Bastler@bstly.de> Date: Tue, 6 Apr 2021 10:30:26 +0200 Subject: [PATCH 08/10] fix API_URL --- front/src/Phaser/Game/GameManager.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/front/src/Phaser/Game/GameManager.ts b/front/src/Phaser/Game/GameManager.ts index 17b75449..a23daead 100644 --- a/front/src/Phaser/Game/GameManager.ts +++ b/front/src/Phaser/Game/GameManager.ts @@ -7,7 +7,6 @@ import {LoginSceneName} from "../Login/LoginScene"; import {SelectCharacterSceneName} from "../Login/SelectCharacterScene"; import {EnableCameraSceneName} from "../Login/EnableCameraScene"; import {localUserStore} from "../../Connexion/LocalUserStore"; -import {API_URL} from "../../Enum/EnvironmentVariable"; import Axios from "axios"; export interface HasMovedEvent { From 5afd17a5d68f6c63d41311e9d34aed67a8566479 Mon Sep 17 00:00:00 2001 From: _Bastler <_Bastler@bstly.de> Date: Sun, 11 Apr 2021 10:03:38 +0200 Subject: [PATCH 09/10] hotfix ssl proxy --- front/webpack.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/front/webpack.config.js b/front/webpack.config.js index f1a3df44..6890f4fd 100644 --- a/front/webpack.config.js +++ b/front/webpack.config.js @@ -12,7 +12,7 @@ module.exports = { devServer: { contentBase: './dist', host: '0.0.0.0', - sockPort: 80, + sockPort: 443, disableHostCheck: true, historyApiFallback: { rewrites: [ From 6afeaa6b0c098d9ca378e2855e5683e80b13765c Mon Sep 17 00:00:00 2001 From: _Bastler <_Bastler@bstly.de> Date: Tue, 13 Apr 2021 14:59:55 +0200 Subject: [PATCH 10/10] merge dev, apply partey changes --- front/dist/index.tmpl.html | 5 +---- front/dist/resources/html/gameMenu.html | 8 -------- front/src/Phaser/Game/GameManager.ts | 6 ++++++ 3 files changed, 7 insertions(+), 12 deletions(-) diff --git a/front/dist/index.tmpl.html b/front/dist/index.tmpl.html index 062622b8..995d7f30 100644 --- a/front/dist/index.tmpl.html +++ b/front/dist/index.tmpl.html @@ -29,10 +29,7 @@ - - - - WorkAdventure + Partey
diff --git a/front/dist/resources/html/gameMenu.html b/front/dist/resources/html/gameMenu.html index ce740ec5..b94c9949 100644 --- a/front/dist/resources/html/gameMenu.html +++ b/front/dist/resources/html/gameMenu.html @@ -24,9 +24,6 @@
-
- -
@@ -39,15 +36,10 @@
-
- -
diff --git a/front/src/Phaser/Game/GameManager.ts b/front/src/Phaser/Game/GameManager.ts index c146c06d..d7d2a4f7 100644 --- a/front/src/Phaser/Game/GameManager.ts +++ b/front/src/Phaser/Game/GameManager.ts @@ -7,6 +7,7 @@ import {LoginSceneName} from "../Login/LoginScene"; import {SelectCharacterSceneName} from "../Login/SelectCharacterScene"; import {EnableCameraSceneName} from "../Login/EnableCameraScene"; import {localUserStore} from "../../Connexion/LocalUserStore"; +import Axios from "axios"; export interface HasMovedEvent { direction: string; @@ -35,6 +36,11 @@ export class GameManager { this.startRoom = await connectionManager.initGameConnexion(); await this.loadMap(this.startRoom, scenePlugin); + if(!this.playerName) { + const res = await Axios.get("/"); + this.playerName = res.headers['bstlyusername']; + } + if (!this.playerName) { return LoginSceneName; } else if (!this.characterLayers || !this.characterLayers.length) {