Merge branch 'master' into develop

front/dist/resources/html/gameMenuIcon.html

@@ -8,7 +8,7 @@
     }
     #menuIcon button img{
         width: 14px;
-        padding-top: 3px;
+        padding-top: 0;
         cursor: url('/resources/logos/cursor_pointer.png'), pointer;
     }
     #menuIcon section {

front/dist/resources/html/gameShare.html

@@ -5,7 +5,7 @@
         border-radius: 6px;
         margin: 20px auto 0;
         width: 298px;
-        height: 150px;
+        height: 160px;
     }
     #gameShare h1 {
         background-image: linear-gradient(top, #f1f3f3, #d4dae0);

front/dist/resources/style/style.css

@@ -44,13 +44,13 @@ body .message-info.warning{
 .video-container i{
     position: absolute;
     width: 100px;
-    height: 65px;
+    height: 100px;
     left: calc(50% - 50px);
     top: calc(50% - 50px);
     background-color: black;
     border-radius: 50%;
     text-align: center;
-    padding-top: 35px;
+    padding-top: 32px;
     font-size: 28px;
     color: white;
 }
@@ -58,8 +58,8 @@ body .message-info.warning{
 .video-container img{
     position: absolute;
     display: none;
-    width: 25px;
+    width: 40px;
-    height: 25px;
+    height: 40px;
     left: 5px;
     bottom: 5px;
     padding: 10px;
@@ -108,10 +108,12 @@ body .message-info.warning{
     margin: 0;
     padding: 0;
     cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    width: 25px;
+    height: 25px;
 }
 .video-container button.report span{
     position: absolute;
-    bottom: 8px;
+    bottom: 6px;
     left: 36px;
     color: white;
     font-size: 16px;
@@ -220,8 +222,8 @@ video#myCamVideo{
 .connecting-spinner {
       /*display: inline-block;*/
       position: absolute;
-      left: calc(50% - 68px);
+      left: calc(50% - 62px);
-      top: calc(50% - 68px);
+      top: calc(50% - 62px);
 
 
       width: 130px;
@@ -861,10 +863,10 @@ div.modal-report-user{
 
 .modal-report-user img{
     position: absolute;
-    height: 50px;
+    height: 24px;
-    width: 50px;
+    width: 24px;
     z-index: 999;
-    left: calc(50% - 25px);
+    left: calc(50% - 12px);
     top: 10px;
 }
 
@@ -1028,7 +1030,7 @@ div.modal-report-user{
     background-color: #2d2d2dba;
     right: 34px;
     margin: 0px;
-    padding: 6px 0px;
+    padding: 2px 0px;
     border-radius: 15px;
     border: none;
     color: white;
@@ -1084,18 +1086,18 @@ div.modal-report-user{
 .discussion .send-message{
     position: absolute;
     bottom: 45px;
-    width: 220px;
+    width: 200px;
     height: 26px;
     margin-bottom: 10px;
 }
 
 .discussion .send-message input{
     position: absolute;
-    width: calc(100% - 10px);
+    width: calc(100% - 20px);
-    height: 20px;
+    height: 30px;
     background-color: #171717;
     color: white;
-    border-radius: 15px;
+    border-radius: 10px;
     border: none;
     padding: 6px;
 }
@@ -1128,10 +1130,11 @@ div.action p.action-body{
     padding: 10px;
     background-color: #2d2d2dba;
     color: #fff;
-    font-size: 12px;
+    font-size: 14px;
+    font-weight: 500;
     text-align: center;
-    max-width: 150px;
+    max-width: 250px;
-    margin-left: calc(50% - 75px);
+    margin-left: calc(50% - 125px);
     border-radius: 15px;
 }
 .popUpElement{

front/src/Phaser/Game/GameScene.ts

@@ -468,9 +468,10 @@ export class GameScene extends ResizableScene implements CenterListener {
         this.openChatIcon = new OpenChatIcon(this, 2, this.game.renderer.height - 2)
 
         // FIXME: change this to use the UserInputManager class for input
-        this.input.keyboard.on('keyup-M', () => {
+        // FIXME: Comment this feature because when user write M key in report input, the layout change.
+        /*this.input.keyboard.on('keyup-M', () => {
             this.switchLayoutMode();
-        });
+        });*/
 
         this.reposition();
 

front/src/Phaser/Menu/MenuScene.ts

@@ -105,7 +105,12 @@ export class MenuScene extends Phaser.Scene {
     }
 
     public revealMenuIcon(): void {
-        (this.menuButton.getChildByID('menuIcon') as HTMLElement).hidden = false
+        //TODO fix me: add try catch because at the same time, 'this.menuButton' variable doesn't exist and there is error on 'getChildByID' function
+        try {
+            (this.menuButton.getChildByID('menuIcon') as HTMLElement).hidden = false;
+        } catch (err) {
+            console.error(err);
+        }
     }
 
     openSideMenu() {
@@ -322,7 +327,9 @@ export class MenuScene extends Phaser.Scene {
     }
 
     private gotToCreateMapPage() {
-        const sparkHost = 'https://'+window.location.host.replace('play.', '')+'/choose-map.html';
+        //const sparkHost = 'https://'+window.location.host.replace('play.', '')+'/choose-map.html';
+        //TODO fix me: this button can to send us on WorkAdventure BO.
+        const sparkHost = 'https://workadventu.re/getting-started';
         window.open(sparkHost, '_blank');
     }
 

front/src/Phaser/Menu/ReportMenu.ts

@@ -72,8 +72,8 @@ export class ReportMenu extends Phaser.GameObjects.DOMElement {
     }
 
     public close(): void {
+        gameManager.getCurrentGameScene(this.scene).userInputManager.restoreControls();
         this.opened = false;
-        gameManager.getCurrentGameScene(this.scene).userInputManager.initKeyBoardEvent();
         const mainEl = this.getChildByID('gameReport') as HTMLElement;
         this.scene.tweens.add({
             targets: this,