From 78d888ffaf9ba95d905a23776d202088db403c6e Mon Sep 17 00:00:00 2001
From: Gregoire Parant <g.parant@thecodingmachine.com>
Date: Wed, 21 Apr 2021 00:53:45 +0200
Subject: [PATCH] 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 @@
 <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>
diff --git a/front/dist/resources/html/gameMenuIcon.html b/front/dist/resources/html/gameMenuIcon.html
index 946cb60a..22fe9867 100644
--- 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>
diff --git a/front/dist/resources/html/gameQualityMenu.html b/front/dist/resources/html/gameQualityMenu.html
index dc818089..185b6853 100644
--- 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;
diff --git a/front/dist/resources/html/gameShare.html b/front/dist/resources/html/gameShare.html
index 60c2ee0f..404c8680 100644
--- 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;
diff --git a/front/dist/resources/html/helpCameraSettings.html b/front/dist/resources/html/helpCameraSettings.html
index 34b1502a..ec480f5c 100644
--- 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;
diff --git a/front/dist/resources/html/loginScene.html b/front/dist/resources/html/loginScene.html
index 7011227d..87ccf07b 100644
--- 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>
diff --git a/front/src/Phaser/Menu/HelpCameraSettingsScene.ts b/front/src/Phaser/Menu/HelpCameraSettingsScene.ts
index 6a5db25a..dd319015 100644
--- 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);
+    }
+
 }
 
diff --git a/front/src/Phaser/Menu/MenuScene.ts b/front/src/Phaser/Menu/MenuScene.ts
index 187f98c1..258dc190 100644
--- 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;
 
 /**