Update menu mobile

- Add mobile style share modal - Add mobile style settings modal - Add menu mobile style
2021-04-21 00:53:45 +02:00 · 2021-04-21 00:53:45 +02:00 · 78d888ffaf
parent 20e0a2553e
commit 78d888ffaf
8 changed files with 102 additions and 42 deletions
--- a/front/dist/resources/html/gameMenu.html
+++ b/front/dist/resources/html/gameMenu.html
@ -1,4 +1,7 @@
 <style>
+    #gameMenu main{
+        margin-top: 15px;
+    }
    #gameMenu button {
        background-color: black;
        color: white;
@ -16,6 +19,21 @@
        width: 32px;
        cursor: url('/resources/logos/cursor_pointer.png'), pointer;
    }
+    @media only screen and (max-height: 700px) {
+        #gameMenu main {
+            display: flex;
+            flex-direction: row;
+            align-items: flex-end;
+            flex-wrap: wrap;
+            margin-top: 0;
+        }
+        #gameMenu section{
+            margin: 2px;
+        }
+        section#socialLinks{
+            position: relative;
+        }
+    }
 </style>

 <div id="gameMenu" hidden>
--- a/front/dist/resources/html/gameMenuIcon.html
+++ b/front/dist/resources/html/gameMenuIcon.html
@ -3,8 +3,7 @@
        background-color: black;
        color: white;
        border-radius: 7px;
-        height: 28px;
-        width: 34px;
+        padding: 2px 8px;
    }
    #menuIcon button img{
        width: 14px;
@ -14,6 +13,11 @@
    #menuIcon section {
        margin: 10px;
    }
+    @media only screen and (max-height: 700px) {
+        #menuIcon section {
+            margin: 2px;
+        }
+    }
 </style>
 <main id="menuIcon" hidden>
    <section>
--- a/front/dist/resources/html/gameQualityMenu.html
+++ b/front/dist/resources/html/gameQualityMenu.html
@ -3,9 +3,9 @@
        background: #eceeee;
        border: 1px solid #42464b;
        border-radius: 6px;
-        height: 257px;
        margin: 20px auto 0;
-        width: 298px;
+        width: 50vw;
+        max-width: 300px;
    }
    #gameQuality .cautiousText {
        font-size: 50%;
@ -33,7 +33,7 @@
        color: #696969;
        height: 30px;
        transition: box-shadow 0.3s;
-        width: 240px;
+        width: 100%;
    }
    #gameQuality section {
        margin: 10px;
@ -42,7 +42,7 @@
        text-align: center;
    }
    #gameQuality button {
-        margin-top: 10px;
+        margin: 10px;
        background-color: black;
        color: white;
        border-radius: 7px;
--- a/front/dist/resources/html/gameShare.html
+++ b/front/dist/resources/html/gameShare.html
@ -4,8 +4,8 @@
        border: 1px solid #42464b;
        border-radius: 6px;
        margin: 20px auto 0;
-        width: 298px;
-        height: 160px;
+        width: 50vw;
+        max-width: 400px;
    }
    #gameShare h1 {
        background-image: linear-gradient(top, #f1f3f3, #d4dae0);
@ -40,7 +40,7 @@
        margin: 0;
    }
    #gameShare button {
-        margin-top: 10px;
+        margin: 10px;
        background-color: black;
        color: white;
        border-radius: 7px;
@ -66,7 +66,7 @@
    }
    #gameShare section p{
        font-size: 8px;
-        margin: 0px 70px;
+        margin: 0;
    }
    #gameShare section p.err{
        color: red;
--- a/front/dist/resources/html/helpCameraSettings.html
+++ b/front/dist/resources/html/helpCameraSettings.html
@ -3,9 +3,11 @@
        background: #eceeee;
        border: 1px solid #42464b;
        border-radius: 6px;
-        margin: 10px auto 0;
+        margin: 25px auto 0;
        width: 400px;
-        height: 370px;
+        max-height: calc(50vh - 25px);
+        overflow: scroll;
+        max-width: 50vw;
    }
    #helpCameraSettings h1 {
        background-image: linear-gradient(top, #f1f3f3, #d4dae0);
@ -20,18 +22,6 @@
        text-align: center;
        text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff;
    }
-    #helpCameraSettings input {
-        font-size: 70%;
-        background: linear-gradient(top, #d6d7d7, #dee0e0);
-        border: 1px solid #a1a3a3;
-        border-radius: 4px;
-        box-shadow: 0 1px #fff;
-        box-sizing: border-box;
-        color: #696969;
-        height: 30px;
-        transition: box-shadow 0.3s;
-        width: 100%;
-    }
    #helpCameraSettings section {
        margin: 10px;
    }
@ -40,7 +30,7 @@
        margin: 0;
    }
    #helpCameraSettings button {
-        margin-top: 10px;
+        margin: 10px;
        background-color: black;
        color: white;
        border-radius: 7px;
--- a/front/dist/resources/html/loginScene.html
+++ b/front/dist/resources/html/loginScene.html
@ -1,12 +1,14 @@
 <style>
    #loginScene {
-        background: #eceeee;
-        border: 1px solid #42464b;
+        background: #000000;
+        border: 1px solid #ebeeee;
        border-radius: 6px;
        margin: 20px auto 0;
        width: 90%;
        max-width: 200px;
-        height: 200px;
+        color: #ebeeee;
+        max-height: 40vh;
+        overflow: scroll;
    }
    #loginScene h1 {
        background-image: linear-gradient(top, #f1f3f3, #d4dae0);
@ -42,9 +44,9 @@
        margin: 0;
    }
    #loginScene button {
-        margin-top: 10px;
-        background-color: black;
-        color: white;
+        margin: 10px;
+        background-color: #ebeeee;;
+        color: black;
        border-radius: 7px;
        padding-bottom: 4px;
        width: 100px;
@ -63,7 +65,7 @@
    #loginScene section a{
        font-size: 8px;
        text-decoration: underline;
-        color: black;
+        color: #ebeeee;
    }
    #loginScene section a:hover{
        font-weight: 700;
@ -84,9 +86,16 @@
    #loginScene section input#loginSceneLink{
        background-color: #a1a3a3;
    }
+    #loginScene section img{
+        width: 160px;
+        margin: 20px 0;
+    }
 </style>

 <form id="loginScene" hidden>
+    <section class="text-center">
+        <img src="resources/logos/logo.png">
+    </section>
    <section class="text-center">
        <h5>Enter your name</h5>
        <p class="info">9 chars maximum</p>
--- a/front/src/Phaser/Menu/HelpCameraSettingsScene.ts
+++ b/front/src/Phaser/Menu/HelpCameraSettingsScene.ts
@ -25,7 +25,7 @@ export class HelpCameraSettingsScene extends Phaser.Scene {
    }

    private createHelpCameraSettings() : void {
-        const middleX = (window.innerWidth / 3) - (370*0.85);
+        const middleX = this.getMiddleX();
        this.helpCameraSettingsElement = this.add.dom(middleX, -800, undefined, {overflow: 'scroll'}).createFromCache(helpCameraSettings);
        this.revealMenusAfterInit(this.helpCameraSettingsElement, helpCameraSettings);
        this.helpCameraSettingsElement.addListener('click');
@ -46,19 +46,13 @@ export class HelpCameraSettingsScene extends Phaser.Scene {
    private openHelpCameraSettingsOpened(): void{
        HtmlUtils.getElementByIdOrFail<HTMLDivElement>('webRtcSetup').style.display = 'none';
        this.helpCameraSettingsOpened = true;
-        let middleY = (window.innerHeight / 3) - (495);
-        if(middleY < 0){
-            middleY = 0;
-        }
-        let middleX =  (window.innerWidth / 3) - (370*0.85);
-        if(middleX < 0){
-            middleX = 0;
-        }
        if(window.navigator.userAgent.includes('Firefox')){
            HtmlUtils.getElementByIdOrFail<HTMLParagraphElement>('browserHelpSetting').innerHTML ='<img src="/resources/objects/help-setting-camera-permission-firefox.png"/>';
        }else if(window.navigator.userAgent.includes('Chrome')){
            HtmlUtils.getElementByIdOrFail<HTMLParagraphElement>('browserHelpSetting').innerHTML ='<img src="/resources/objects/help-setting-camera-permission-chrome.png"/>';
        }
+        const middleY = this.getMiddleY();
+        const middleX = this.getMiddleX();
        this.tweens.add({
            targets: this.helpCameraSettingsElement,
            y: middleY,
@ -70,6 +64,7 @@ export class HelpCameraSettingsScene extends Phaser.Scene {
    }

    private closeHelpCameraSettingsOpened(): void{
+        const middleX = this.getMiddleX();
        const helpCameraSettingsInfo = this.helpCameraSettingsElement.getChildByID('helpCameraSettings') as HTMLParagraphElement;
        helpCameraSettingsInfo.innerText = '';
        helpCameraSettingsInfo.style.display = 'none';
@ -77,6 +72,7 @@ export class HelpCameraSettingsScene extends Phaser.Scene {
        this.tweens.add({
            targets: this.helpCameraSettingsElement,
            y: -400,
+            x: middleX,
            duration: 1000,
            ease: 'Power3',
            overflow: 'scroll'
@ -91,5 +87,48 @@ export class HelpCameraSettingsScene extends Phaser.Scene {
        }, 250);
    }

+    update(time: number, delta: number): void {
+        const middleX = this.getMiddleX();
+        const middleY = this.getMiddleY();
+        this.tweens.add({
+            targets: this.helpCameraSettingsElement,
+            x: middleX,
+            y: middleY,
+            duration: 1000,
+            ease: 'Power3'
+        });
+    }
+
+    public onResize(ev: UIEvent): void {
+        const middleX = this.getMiddleX();
+        const middleY = this.getMiddleY();
+        this.tweens.add({
+            targets: this.helpCameraSettingsElement,
+            x: middleX,
+            y: middleY,
+            duration: 1000,
+            ease: 'Power3'
+        });
+    }
+
+    private getMiddleX() : number{
+        const middleX = ((window.innerWidth) - ((
+            this.helpCameraSettingsElement
+            && this.helpCameraSettingsElement.node
+            && this.helpCameraSettingsElement.node.getBoundingClientRect().width > 0
+                ? this.helpCameraSettingsElement.node.getBoundingClientRect().width : 300 /*FIXME to use a const will be injected in HTMLElement*/)*2)) / 2;
+        return (middleX > 0 ? middleX / 2 : 0);
+    }
+
+    private getMiddleY() : number{
+        console.log('this.helpCameraSettingsElement.node.getBoundingClientRect()', this.helpCameraSettingsElement.node.getBoundingClientRect());
+        const middleY = ((window.innerHeight) - (
+            (this.helpCameraSettingsElement
+            && this.helpCameraSettingsElement.node
+            && this.helpCameraSettingsElement.node.getBoundingClientRect().height > 0
+                ? this.helpCameraSettingsElement.node.getBoundingClientRect().height : 400 /*FIXME to use a const will be injected in HTMLElement*/)*2)) / 2;
+        return (middleY > 0 ? middleY / 2 : 0);
+    }
+
 }

--- a/front/src/Phaser/Menu/MenuScene.ts
+++ b/front/src/Phaser/Menu/MenuScene.ts
@ -16,7 +16,7 @@ const gameMenuIconKey = 'gameMenuIcon';
 const gameSettingsMenuKey = 'gameSettingsMenu';
 const gameShare = 'gameShare';

-const closedSideMenuX = -200;
+const closedSideMenuX = -400;
 const openedSideMenuX = 0;

 /**