WIP: Update style for mobile (#942)

* Update style for mobile

 - Update style for mobile modale

* Fix overscroll

* Change css properties overflow

* Revert "Change css properties overflow"

This reverts commit 612fcc7e007fb03c7f72e5fa4b8a0604a184ae7d.

* rm image

* Update view mobile

* Fix CI

front/dist/resources/html/CustomCharacterScene.html

@@ -8,11 +8,11 @@
         border-radius: 6px;
         margin: 10px auto 0;
         color: #ebeeee;
-        overflow: scroll;
         width: 42vw;
-        height: 38vh;
-        /*max-width: 300px;*/
-        max-height: 40vh;
+        height: 48vh;
+        /*max-width: 300px;
+        max-height: 48vh;*/
+        overflow: hidden;
     }
     #customizeScene h1 {
         background-image: linear-gradient(top, #f1f3f3, #d4dae0);
@@ -130,6 +130,7 @@
     @media only screen and (max-width: 600px) {
         #customizeScene {
             max-width: 160px;
+            overflow-y: scroll;
         }
     }
     @media only screen and (max-height: 400px) {

front/dist/resources/html/EnableCameraScene.html

@@ -8,10 +8,10 @@
         border-radius: 6px;
         margin: 20px auto 0;
         color: #ebeeee;
-        max-height: 40vh;
+        max-height: 48vh;
         width: 42vw;
         max-width: 300px;
-        /*overflow: scroll;*/
+        overflow: hidden;
     }
     #enableCameraScene h1 {
         background-image: linear-gradient(top, #f1f3f3, #d4dae0);
@@ -48,7 +48,7 @@
         text-align: center;
         margin: 0;
         position: absolute;
-        top: 40vh;
+        top: 44vh;
         width: 100%;
     }
     #enableCameraScene button {
@@ -97,6 +97,12 @@
         width: 160px;
         margin: 20px 0;
     }
+    /*@media only screen and (max-width: 800px),
+            only screen and (max-height: 600px) {
+        #enableCameraScene{
+            overflow-y: scroll;
+        }
+    }*/
 </style>
 
 <form id="enableCameraScene" hidden>

front/dist/resources/html/SelectCompanionScene.html

@@ -9,9 +9,9 @@
         margin: 10px auto 0;
         color: #ebeeee;
         max-height: 40vh;
-        overflow: scroll;
         max-width: 300px;
         width: 40vw;
+        overflow: hidden;
     }
     #selectCompanionScene h1 {
         background-image: linear-gradient(top, #f1f3f3, #d4dae0);
@@ -113,6 +113,12 @@
         background-color: #ffd700;
         color: black;
     }
+    @media only screen and (max-width: 800px),
+            only screen and (max-height: 600px) {
+        #selectCompanionScene{
+            overflow-y: scroll;
+        }
+    }
 </style>
 
 <form id="selectCompanionScene" hidden>
@@ -122,7 +128,7 @@
         <button class="selectCharacterButton" id="selectCharacterButtonRight"> > </button>
     </section>
     <section class="action">
-        <a herf="#" id="selectCompanionSceneFormBack">Back</a>
+        <a herf="#" id="selectCompanionSceneFormBack">No companion</a>
         <button type="submit" id="selectCompanionSceneFormSubmit">Continue</button>
     </section>
 </form>

front/dist/resources/html/helpCameraSettings.html

@@ -8,9 +8,9 @@
         border-radius: 6px;
         margin: 25px auto 0;
         width: 400px;
-        max-height: calc(50vh - 25px);
-        overflow: scroll;
+        max-height: calc(48vh - 50px);
         max-width: 48vw;
+        overflow: hidden;
     }
     #helpCameraSettings h1 {
         background-image: linear-gradient(top, #f1f3f3, #d4dae0);
@@ -73,6 +73,12 @@
         width: 200px;
         margin-top: 10px;
     }
+    @media only screen and (max-width: 800px),
+            only screen and (max-height: 600px) {
+        #helpCameraSettings{
+            overflow-y: scroll;
+        }
+    }
 </style>
 
 <form id="helpCameraSettings" hidden>

front/dist/resources/html/loginScene.html

@@ -11,7 +11,7 @@
         max-width: 200px;
         color: #ebeeee;
         max-height: 40vh;
-        overflow: scroll;
+        overflow: hidden;
     }
     #loginScene h1 {
         background-image: linear-gradient(top, #f1f3f3, #d4dae0);
@@ -93,6 +93,12 @@
         width: 160px;
         margin: 20px 0;
     }
+    @media only screen and (max-width: 800px),
+            only screen and (max-height: 600px) {
+        #loginScene{
+            overflow-y: scroll;
+        }
+    }
 </style>
 
 <form id="loginScene" hidden>

front/dist/resources/html/selectCharacterScene.html

@@ -8,11 +8,10 @@
         border-radius: 6px;
         margin: 10px auto 0;
         color: #ebeeee;
-        max-height: 40vh;
-        overflow: scroll;
+        max-height: 48vh;
         max-width: 300px;
         width: 40vw;
-        overflow: unset;
+        overflow: hidden;
     }
     #selectCharacterScene h1 {
         background-image: linear-gradient(top, #f1f3f3, #d4dae0);
@@ -118,6 +117,9 @@
     }
     @media only screen and (max-width: 800px),
             only screen and (max-height: 600px) {
+        #selectCharacterScene{
+            overflow-y: scroll;
+        }
         #selectCharacterScene section button.selectCharacterButton#selectCharacterButtonRight{
             display: block;
         }

front/src/Phaser/Login/CustomizeScene.ts

@@ -11,6 +11,7 @@ import {AbstractCharacterScene} from "./AbstractCharacterScene";
 import {areCharacterLayersValid} from "../../Connexion/LocalUser";
 import { MenuScene } from "../Menu/MenuScene";
 import { SelectCharacterSceneName } from "./SelectCharacterScene";
+import { RESOLUTION } from "../../Enum/EnvironmentVariable";
 
 export const CustomizeSceneName = "CustomizeScene";
 
@@ -139,7 +140,7 @@ export class CustomizeScene extends AbstractCharacterScene {
 
         if(index === -1 && this.activeRow === 1){
             const button = this.customizeSceneElement.getChildByID('customizeSceneFormBack') as HTMLButtonElement;
-            button.innerText = `Back`;
+            button.innerText = `Return`;
         }
 
         if(index === 1 && this.activeRow === 0){
@@ -283,12 +284,12 @@ export class CustomizeScene extends AbstractCharacterScene {
      }
 
      protected getMiddleX() : number{
-        return (this.game.renderer.width / 2) -  
+        return (this.game.renderer.width / RESOLUTION) -  
         (
             this.customizeSceneElement
             && this.customizeSceneElement.node
             && this.customizeSceneElement.node.getBoundingClientRect().width > 0
-            ? (this.customizeSceneElement.node.getBoundingClientRect().width / 4)
+            ? (this.customizeSceneElement.node.getBoundingClientRect().width / (2*RESOLUTION))
             : 150
         );
     }

front/src/Phaser/Login/EnableCameraScene.ts

@@ -284,13 +284,13 @@ export class EnableCameraScene extends Phaser.Scene {
     }
 
     private getMiddleX() : number{
-        return (this.game.renderer.width / 2) -
+        return (this.game.renderer.width / RESOLUTION) -
         (
             this.enableCameraSceneElement
             && this.enableCameraSceneElement.node
             && this.enableCameraSceneElement.node.getBoundingClientRect().width > 0
-            ? (this.enableCameraSceneElement.node.getBoundingClientRect().width / 4)
-            : (300 / 2)
+            ? (this.enableCameraSceneElement.node.getBoundingClientRect().width / (2*RESOLUTION))
+            : (300 / RESOLUTION)
         );
     }
 }

front/src/Phaser/Login/LoginScene.ts

@@ -4,6 +4,7 @@ import {ResizableScene} from "./ResizableScene";
 import { localUserStore } from "../../Connexion/LocalUserStore";
 import {MenuScene} from "../Menu/MenuScene";
 import { isUserNameValid } from "../../Connexion/LocalUser";
+import { RESOLUTION } from "../../Enum/EnvironmentVariable";
 
 export const LoginSceneName = "LoginScene";
 
@@ -27,7 +28,7 @@ export class LoginScene extends ResizableScene {
 
     create() {
         const middleX = this.getMiddleX();
-        this.loginSceneElement = this.add.dom((middleX/2), 0).createFromCache(loginSceneKey);
+        this.loginSceneElement = this.add.dom(middleX, 0).createFromCache(loginSceneKey);
         MenuScene.revealMenusAfterInit(this.loginSceneElement, loginSceneKey);
 
         const pErrorElement = this.loginSceneElement.getChildByID('errorLoginScene') as HTMLInputElement;
@@ -80,7 +81,7 @@ export class LoginScene extends ResizableScene {
         const middleX = this.getMiddleX();
         this.tweens.add({
             targets: this.loginSceneElement,
-            x: (middleX/2),
+            x: middleX,
             duration: 1000,
             ease: 'Power3'
         });
@@ -90,7 +91,7 @@ export class LoginScene extends ResizableScene {
         const middleX = this.getMiddleX();
         this.tweens.add({
             targets: this.loginSceneElement,
-            x: (middleX/2),
+            x: middleX,
             duration: 1000,
             ease: 'Power3'
         });
@@ -98,6 +99,6 @@ export class LoginScene extends ResizableScene {
 
     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);
+        return (middleX > 0 ? (middleX / 2) : 0);
     }
 }

front/src/Phaser/Login/SelectCompanionScene.ts

@@ -10,6 +10,7 @@ import { getAllCompanionResources } from "../Companion/CompanionTexturesLoadingM
 import {touchScreenManager} from "../../Touch/TouchScreenManager";
 import {PinchManager} from "../UserInput/PinchManager";
 import { MenuScene } from "../Menu/MenuScene";
+import { RESOLUTION } from "../../Enum/EnvironmentVariable";
 
 export const SelectCompanionSceneName = "SelectCompanionScene";
 
@@ -125,7 +126,7 @@ export class SelectCompanionScene extends ResizableScene {
 
             companion.setInteractive().on("pointerdown", () => {
                 this.currentCompanion = i;
-                this.updateSelectedCompanion();
+                this.moveCompanion();
             });
 
             this.companions.push(companion);
@@ -240,12 +241,12 @@ export class SelectCompanionScene extends ResizableScene {
     }
 
     private getMiddleX() : number{
-        return (this.game.renderer.width / 2) -
+        return (this.game.renderer.width / RESOLUTION) -
         (
             this.selectCompanionSceneElement
             && this.selectCompanionSceneElement.node
             && this.selectCompanionSceneElement.node.getBoundingClientRect().width > 0
-            ? (this.selectCompanionSceneElement.node.getBoundingClientRect().width / 4)
+            ? (this.selectCompanionSceneElement.node.getBoundingClientRect().width / (2*RESOLUTION))
             : 150
         );
     }

front/src/Phaser/Menu/HelpCameraSettingsScene.ts

@@ -1,6 +1,7 @@
 import {mediaManager} from "../../WebRtc/MediaManager";
 import {HtmlUtils} from "../../WebRtc/HtmlUtils";
 import {localUserStore} from "../../Connexion/LocalUserStore";
+import { RESOLUTION } from "../../Enum/EnvironmentVariable";
 
 export const HelpCameraSettingsSceneName = 'HelpCameraSettingsScene';
 const helpCameraSettings = 'helpCameraSettings';
@@ -112,7 +113,7 @@ export class HelpCameraSettingsScene extends Phaser.Scene {
     }
 
     private getMiddleX() : number{
-        return (this.game.renderer.width / 2) -  
+        return (this.game.renderer.width / RESOLUTION) -  
         (
             this.helpCameraSettingsElement
             && this.helpCameraSettingsElement.node
@@ -128,7 +129,7 @@ export class HelpCameraSettingsScene extends Phaser.Scene {
             && 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);
+        return (middleY > 0 ? middleY / RESOLUTION : 0);
     }
 
 }

maps/Tuto/tutoV3.json

@@ -260,15 +260,15 @@
          "name":"floorLayer",
          "objects":[
                 {
-                 "height":199.667,
+                 "height":140,
                  "id":1,
                  "name":"Tutobubble",
                  "rotation":0,
                  "type":"",
                  "visible":true,
-                 "width":245.667,
-                 "x":1170,
-                 "y":350
+                 "width":185,
+                 "x":1022,
+                 "y":308
                 }, 
                 {
                  "height":86.9996666666667,
@@ -277,9 +277,9 @@
                  "rotation":0,
                  "type":"",
                  "visible":true,
-                 "width":245.667,
-                 "x":1171,
-                 "y":412
+                 "width":187,
+                 "x":1019,
+                 "y":361
                 }, 
                 {
                  "height":84.6667,
@@ -288,9 +288,9 @@
                  "rotation":0,
                  "type":"",
                  "visible":true,
-                 "width":210.667,
-                 "x":1030.5,
-                 "y":318.66665
+                 "width":184.5,
+                 "x":1023,
+                 "y":319
                 }, 
                 {
                  "height":99.6667,
@@ -299,9 +299,9 @@
                  "rotation":0,
                  "type":"",
                  "visible":true,
-                 "width":210.667,
-                 "x":1174,
-                 "y":400
+                 "width":185,
+                 "x":1021,
+                 "y":348
                 }],
          "opacity":1,
          "type":"objectgroup",