From 2c862fe7e7ced311b198a19fceaf10e662ea7170 Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Tue, 20 Apr 2021 18:49:42 +0200 Subject: [PATCH 01/11] 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); + } } From 09d5e0b689da3a707cbc327e5190871cbf4fedf5 Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Tue, 20 Apr 2021 18:58:19 +0200 Subject: [PATCH 02/11] Fix center select name modal --- front/dist/resources/html/loginScene.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/front/dist/resources/html/loginScene.html b/front/dist/resources/html/loginScene.html index b237b3e2..7011227d 100644 --- a/front/dist/resources/html/loginScene.html +++ b/front/dist/resources/html/loginScene.html @@ -4,7 +4,8 @@ border: 1px solid #42464b; border-radius: 6px; margin: 20px auto 0; - width: 200px; + width: 90%; + max-width: 200px; height: 200px; } #loginScene h1 { From 30c1825abd23e3d6a0050b5087dfa620348a4ebf Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Tue, 20 Apr 2021 19:54:37 +0200 Subject: [PATCH 03/11] Update syle mobile - update my video side - update user video side - update button video cam and microphone side --- front/dist/resources/style/index.scss | 3 +- front/dist/resources/style/mobile-style.scss | 53 ++++++++++++++++---- front/dist/resources/style/style.css | 18 ------- 3 files changed, 45 insertions(+), 29 deletions(-) diff --git a/front/dist/resources/style/index.scss b/front/dist/resources/style/index.scss index 4d0355b7..7454b991 100644 --- a/front/dist/resources/style/index.scss +++ b/front/dist/resources/style/index.scss @@ -1,2 +1,3 @@ @import "cowebsite.scss"; -@import "style.css"; \ No newline at end of file +@import "style.css"; +@import "mobile-style.scss"; \ No newline at end of file diff --git a/front/dist/resources/style/mobile-style.scss b/front/dist/resources/style/mobile-style.scss index 286735b4..329dc78d 100644 --- a/front/dist/resources/style/mobile-style.scss +++ b/front/dist/resources/style/mobile-style.scss @@ -1,17 +1,50 @@ -@media only screen and (max-width: 600px) { - .sidebar > div { - max-height: 240px; +@media only screen and (max-width: 700px) { + video#myCamVideo { + width: 200px; } - .sidebar > div { - max-height: 240px; + .sidebar { + width: 20%; + min-width: 200px; + position: absolute; + display: block; + right: 0; + height: 80%; + + &> div { + max-height: 120px; + min-width: 200px; + } + + .video-container{ + min-width: 200px; + } } - .sidebar{ - max-width: 200px; + .btn-cam-action div { + bottom: 30px; + + &.btn-micro { + right: 15px; + } + + &.btn-monitor { + right: 171px; + } + + &.btn-video { + right: 95px; + } } - .btn-cam-action div{ - bottom: 50px; + .main-section { + position: absolute; + width: 100%; + min-width: 400px; + + & > div { + z-index: 2; + } } -} \ No newline at end of file +} + diff --git a/front/dist/resources/style/style.css b/front/dist/resources/style/style.css index ff79245c..492f5fa3 100644 --- a/front/dist/resources/style/style.css +++ b/front/dist/resources/style/style.css @@ -338,24 +338,6 @@ body { } -@media (max-aspect-ratio: 1/1) { - .game-overlay { - flex-direction: column; - } - - .sidebar { - flex-direction: row; - align-items: flex-end; - } - - .sidebar > div { - max-width: 21%; - } - - .sidebar > div:hover { - max-width: 25%; - } -} #game { width: 100%; From 20e0a2553e9319877ecd9ea9b5adecb219b0141b Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Tue, 20 Apr 2021 21:11:05 +0200 Subject: [PATCH 04/11] Update cowebsite mobile style --- front/dist/resources/style/cowebsite.scss | 48 ------------ front/dist/resources/style/mobile-style.scss | 80 +++++++++++++++++--- 2 files changed, 69 insertions(+), 59 deletions(-) diff --git a/front/dist/resources/style/cowebsite.scss b/front/dist/resources/style/cowebsite.scss index b752728d..515dc0df 100644 --- a/front/dist/resources/style/cowebsite.scss +++ b/front/dist/resources/style/cowebsite.scss @@ -87,51 +87,3 @@ } } } -@media (max-aspect-ratio: 1/1) { - - #main-container { - display: flex; - flex-direction: column-reverse; - } - - - #cowebsite { - left: 0; - top: 0; - width: 100%; - height: 50%; - display: flex; - flex-direction: column-reverse; - - &.loading { - transform: translateY(-90%); - } - &.hidden { - transform: translateY(-100%); - } - - main { - height: 100%; - } - - - aside { - height: 30px; - cursor: ns-resize; - flex-direction: column; - - img { - cursor: ns-resize; - } - } - - .top-right-btn { - &#cowebsite-close { - right: 0px; - } - &#cowebsite-fullscreen { - right: 25px; - } - } - } -} \ No newline at end of file diff --git a/front/dist/resources/style/mobile-style.scss b/front/dist/resources/style/mobile-style.scss index 329dc78d..452e1604 100644 --- a/front/dist/resources/style/mobile-style.scss +++ b/front/dist/resources/style/mobile-style.scss @@ -1,6 +1,6 @@ @media only screen and (max-width: 700px) { video#myCamVideo { - width: 200px; + width: 150px; } .sidebar { @@ -21,19 +21,28 @@ } } - .btn-cam-action div { - bottom: 30px; - - &.btn-micro { - right: 15px; + .btn-cam-action { + &:hover{ + transform: translateY(20px); } + div { + &:hover { + background-color: #666; + } - &.btn-monitor { - right: 171px; - } + bottom: 30px; - &.btn-video { - right: 95px; + &.btn-micro { + right: 0; + } + + &.btn-monitor { + right: 130px; + } + + &.btn-video { + right: 65px; + } } } @@ -48,3 +57,52 @@ } } +@media (max-aspect-ratio: 1/1) { + + #main-container { + display: flex; + flex-direction: column-reverse; + } + + + #cowebsite { + left: 0; + top: 0; + width: 100%; + height: 50%; + display: flex; + flex-direction: column-reverse; + + &.loading { + transform: translateY(-90%); + } + &.hidden { + transform: translateY(-100%); + } + + main { + height: 100%; + } + + + aside { + height: 30px; + cursor: ns-resize; + flex-direction: column; + + img { + cursor: ns-resize; + } + } + + .top-right-btn { + &#cowebsite-close { + right: 0; + } + &#cowebsite-fullscreen { + left: 0; + } + } + } +} + From 78d888ffaf9ba95d905a23776d202088db403c6e Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Wed, 21 Apr 2021 00:53:45 +0200 Subject: [PATCH 05/11] Update menu mobile - Add mobile style share modal - Add mobile style settings modal - Add menu mobile style --- front/dist/resources/html/gameMenu.html | 18 ++++++ front/dist/resources/html/gameMenuIcon.html | 8 ++- .../dist/resources/html/gameQualityMenu.html | 8 +-- front/dist/resources/html/gameShare.html | 8 +-- .../resources/html/helpCameraSettings.html | 20 ++----- front/dist/resources/html/loginScene.html | 23 +++++--- .../Phaser/Menu/HelpCameraSettingsScene.ts | 57 ++++++++++++++++--- front/src/Phaser/Menu/MenuScene.ts | 2 +- 8 files changed, 102 insertions(+), 42 deletions(-) diff --git a/front/dist/resources/html/gameMenu.html b/front/dist/resources/html/gameMenu.html index ce740ec5..399cf349 100644 --- a/front/dist/resources/html/gameMenu.html +++ b/front/dist/resources/html/gameMenu.html @@ -1,4 +1,7 @@