From 2c862fe7e7ced311b198a19fceaf10e662ea7170 Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Tue, 20 Apr 2021 18:49:42 +0200 Subject: [PATCH] Refactor Login Scene --- front/dist/resources/html/loginScene.html | 101 ++++++++++++++ front/dist/resources/objects/play_button.png | Bin 969 -> 0 bytes front/dist/resources/style/mobile-style.scss | 17 +++ front/src/Phaser/Login/LoginScene.ts | 135 ++++++++----------- 4 files changed, 176 insertions(+), 77 deletions(-) create mode 100644 front/dist/resources/html/loginScene.html delete mode 100644 front/dist/resources/objects/play_button.png create mode 100644 front/dist/resources/style/mobile-style.scss diff --git a/front/dist/resources/html/loginScene.html b/front/dist/resources/html/loginScene.html new file mode 100644 index 00000000..b237b3e2 --- /dev/null +++ b/front/dist/resources/html/loginScene.html @@ -0,0 +1,101 @@ + + + diff --git a/front/dist/resources/objects/play_button.png b/front/dist/resources/objects/play_button.png deleted file mode 100644 index 36aa309b6b26ddb120f8562bcb8c5090c8e8f38f..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 969 zcmV;)12+7LP)jd6qRl{>LPf>_yuuR;D=wb2R1}h;Etm#RLFm zW z<#^dSuC!0nuyEc2=$TnB*O^|w`M&^eCNTb=0PFyGmYVr(JVp6lo_wU@n9iQMygZE! zGP)y75q)Qy6!v?%{wPS*YB}>&hILUeBzpk`vqo~8f{4qv@Y@`jnc_YlT?0AB-X_aqwF32)^Q7uS-xZh1*^ z&2g8NB)2^Eaf0MgpQSL#agwL$ktXJ^w5Msas>=QDHvqS5{KOfOTO_a54COa~2cEYZ zb^!bW@DjlH*s7#j%Too9Gx~7rKUYcalwD$mT;CjW?FxWP2d*6fa2CKE$*BST$;Y|` zV0ws9XMB4NGus8QO7c}MZeL>Yeh6*8RXZqHy^`|ZHP8?_LQzz&H*^zM%#MBGF`3%_|Qhf$~0+ana=>G+G<~- ziAxM+Hx4gi?|kYYKLLD{XbvBB4k>?xdQC>6=?1s3_h7z^uqefgewNt@)u1v>;+WYz rje-zD2qA div { + max-height: 240px; + } + + .sidebar > div { + max-height: 240px; + } + + .sidebar{ + max-width: 200px; + } + + .btn-cam-action div{ + bottom: 50px; + } +} \ No newline at end of file diff --git a/front/src/Phaser/Login/LoginScene.ts b/front/src/Phaser/Login/LoginScene.ts index 057cb6ae..ecffa6e5 100644 --- a/front/src/Phaser/Login/LoginScene.ts +++ b/front/src/Phaser/Login/LoginScene.ts @@ -1,30 +1,17 @@ import {gameManager} from "../Game/GameManager"; -import {TextField} from "../Components/TextField"; -import {TextInput} from "../Components/TextInput"; -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; -import {touchScreenManager} from "../../Touch/TouchScreenManager"; -import {PinchManager} from "../UserInput/PinchManager"; +import {MenuScene} from "../Menu/MenuScene"; -//todo: put this constants in a dedicated file export const LoginSceneName = "LoginScene"; -enum LoginTextures { - icon = "icon", - mainFont = "main_font" -} + +const loginSceneKey = 'loginScene'; export class LoginScene extends ResizableScene { - private nameInput!: TextInput; - private textField!: TextField; - private infoTextField!: TextField; - private pressReturnField!: TextField; - private logo!: Image; + + private loginSceneElement!: Phaser.GameObjects.DOMElement; private name: string = ''; - private mobileTapRectangle!: Rectangle; constructor() { super({ @@ -34,81 +21,75 @@ export class LoginScene extends ResizableScene { } preload() { - //this.load.image(LoginTextures.playButton, "resources/objects/play_button.png"); - this.load.image(LoginTextures.icon, "resources/logos/tcm_full.png"); - // Note: arcade.png from the Phaser 3 examples at: https://github.com/photonstorm/phaser3-examples/tree/master/public/assets/fonts/bitmap - this.load.bitmapFont(LoginTextures.mainFont, 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml'); + this.load.html(loginSceneKey, 'resources/html/loginScene.html'); } create() { - if (touchScreenManager.supportTouchScreen) { - new PinchManager(this); - } + const middleX = this.getMiddleX(); + this.loginSceneElement = this.add.dom((middleX/2), 0).createFromCache(loginSceneKey); + MenuScene.revealMenusAfterInit(this.loginSceneElement, loginSceneKey); - 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.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 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', () => { - if (isUserNameValid(this.name)) { - this.login(this.name); + const pErrorElement = this.loginSceneElement.getChildByID('errorLoginScene') as HTMLInputElement; + const inputElement = this.loginSceneElement.getChildByID('loginSceneName') as HTMLInputElement; + inputElement.value = localUserStore.getName() ?? ''; + inputElement.focus(); + inputElement.addEventListener('keypress', (event: KeyboardEvent) => { + if(inputElement.value.length > 8){ + event.preventDefault(); + return; } + pErrorElement.innerHTML = ''; + if (event.key === 'Enter') { + event.preventDefault(); + this.login(inputElement); + return; + } + }); + + const continuingButton = this.loginSceneElement.getChildByID('loginSceneFormSubmit') as HTMLButtonElement; + continuingButton.addEventListener('click', (e) => { + e.preventDefault(); + this.login(inputElement); }); } - update(time: number, delta: number): void { - if (this.name == '') { - this.pressReturnField?.setVisible(false); - } else { - this.pressReturnField?.setVisible(!!(Math.floor(time / 500) % 2)); + private login(inputElement: HTMLInputElement): void { + const pErrorElement = this.loginSceneElement.getChildByID('errorLoginScene') as HTMLInputElement; + this.name = inputElement.value; + if (this.name === '') { + pErrorElement.innerHTML = 'The name is empty'; + return } - } - - private login(name: string): void { if (this.name === '') return - gameManager.setPlayerName(name); + gameManager.setPlayerName(this.name); this.scene.stop(LoginSceneName) gameManager.tryResumingGame(this, SelectCharacterSceneName); this.scene.remove(LoginSceneName) } - public onResize(ev: UIEvent): void { - 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; + update(time: number, delta: number): void { + const middleX = this.getMiddleX(); + this.tweens.add({ + targets: this.loginSceneElement, + x: (middleX/2), + duration: 1000, + ease: 'Power3' + }); } + public onResize(ev: UIEvent): void { + const middleX = this.getMiddleX(); + this.tweens.add({ + targets: this.loginSceneElement, + x: (middleX/2), + duration: 1000, + ease: 'Power3' + }); + } + + private getMiddleX() : number{ + const middleX = ((window.innerWidth) - ((this.loginSceneElement && this.loginSceneElement.width > 0 ? this.loginSceneElement.width : 200 /*FIXME to use a const will be injected in HTMLElement*/)*2)) / 2; + return (middleX > 0 ? middleX : 0); + } }