Merge branch 'develop' into notifOutSound

front/dist/resources/html/gameMenuIcon.html

@@ -18,7 +18,7 @@
         margin: 10px;
     }
 </style>
-<main id="menuIcon">
+<main id="menuIcon" hidden>
     <section>
         <button id="openMenuButton">
             <img src="/static/images/menu.svg">

front/src/Phaser/Game/GameManager.ts

@@ -1,7 +1,7 @@
 import {GameScene} from "./GameScene";
 import {connectionManager} from "../../Connexion/ConnectionManager";
 import {Room} from "../../Connexion/Room";
-import {MenuSceneName} from "../Menu/MenuScene";
+import {MenuScene, MenuSceneName} from "../Menu/MenuScene";
 import {LoginSceneName} from "../Login/LoginScene";
 import {SelectCharacterSceneName} from "../Login/SelectCharacterScene";
 import {EnableCameraSceneName} from "../Login/EnableCameraScene";
@@ -74,20 +74,28 @@ export class GameManager {
     public goToStartingMap(scenePlugin: Phaser.Scenes.ScenePlugin): void {
         console.log('starting '+ (this.currentGameSceneName || this.startRoom.id))
         scenePlugin.start(this.currentGameSceneName || this.startRoom.id);
-        //the menu scene launches faster than the gameScene, so we delay it to not have menu buttons on a black screen
+        scenePlugin.launch(MenuSceneName);
-        setTimeout(() => scenePlugin.launch(MenuSceneName), 1000);
+    }
+    
+    public gameSceneIsCreated(scene: GameScene) {
+        this.currentGameSceneName = scene.scene.key;
+        const menuScene: MenuScene = scene.scene.get(MenuSceneName) as MenuScene;
+        menuScene.revealMenuIcon();
     }
 
     /**
      * Temporary leave a gameScene to go back to the loginScene for example.
      * This will close the socket connections and stop the gameScene, but won't remove it.
      */
-    leaveGame(scene: Phaser.Scene, targetSceneName: string): void {
+    leaveGame(scene: Phaser.Scene, targetSceneName: string, sceneClass: Phaser.Scene): void {
         if (this.currentGameSceneName === null) throw 'No current scene id set!';
         const gameScene: GameScene = scene.scene.get(this.currentGameSceneName) as GameScene;
         gameScene.cleanupClosingScene();
         scene.scene.stop(this.currentGameSceneName);
-        scene.scene.stop(MenuSceneName);
+        scene.scene.sleep(MenuSceneName);
+        if (!scene.scene.get(targetSceneName)) {
+            scene.scene.add(targetSceneName, sceneClass, false);
+        }
         scene.scene.run(targetSceneName);
     }
 
@@ -97,8 +105,7 @@ export class GameManager {
     tryResumingGame(scene: Phaser.Scene, fallbackSceneName: string) {
         if (this.currentGameSceneName) {
             scene.scene.start(this.currentGameSceneName);
-            //the menu scene launches faster than the gameScene, so we delay it to not have menu buttons on a black screen
+            scene.scene.wake(MenuSceneName);
-            setTimeout(() => scene.scene.launch(MenuSceneName), 1000);
         } else {
             scene.scene.run(fallbackSceneName)
         }

front/src/Phaser/Game/GameScene.ts

@@ -311,7 +311,7 @@ export class GameScene extends ResizableScene implements CenterListener {
 
     //hook create scene
     create(): void {
-        gameManager.currentGameSceneName = this.scene.key;
+        gameManager.gameSceneIsCreated(this);
         urlManager.pushRoomIdToUrl(this.room);
         this.startLayerName = urlManager.getStartLayerNameFromUrl();
 

front/src/Phaser/Login/LoginScene.ts

@@ -84,8 +84,9 @@ export class LoginScene extends ResizableScene {
     private login(name: string): void {
         gameManager.setPlayerName(name);
 
-        this.scene.sleep(LoginSceneName)
+        this.scene.stop(LoginSceneName)
         gameManager.tryResumingGame(this, SelectCharacterSceneName);
+        this.scene.remove(LoginSceneName)
     }
 
     public onResize(ev: UIEvent): void {

front/src/Phaser/Login/SelectCharacterScene.ts

@@ -116,13 +116,14 @@ export class SelectCharacterScene extends ResizableScene {
     }
 
     private nextScene(): void {
-        this.scene.sleep(SelectCharacterSceneName);
+        this.scene.stop(SelectCharacterSceneName);
         if (this.selectedPlayer !== null) {
             gameManager.setCharacterLayers([this.selectedPlayer.texture.key]);
             gameManager.tryResumingGame(this, EnableCameraSceneName);
         } else {
             this.scene.run(CustomizeSceneName);
         }
+        this.scene.remove(SelectCharacterSceneName);
     }
 
     createCurrentPlayer(): void {

front/src/Phaser/Menu/MenuScene.ts

@@ -1,5 +1,5 @@
-import {LoginSceneName} from "../Login/LoginScene";
+import {LoginScene, LoginSceneName} from "../Login/LoginScene";
-import {SelectCharacterSceneName} from "../Login/SelectCharacterScene";
+import {SelectCharacterScene, SelectCharacterSceneName} from "../Login/SelectCharacterScene";
 import {gameManager} from "../Game/GameManager";
 import {localUserStore} from "../../Connexion/LocalUserStore";
 import {mediaManager} from "../../WebRtc/MediaManager";
@@ -40,22 +40,22 @@ export class MenuScene extends Phaser.Scene {
     create() {
         this.menuElement = this.add.dom(closedSideMenuX, 30).createFromCache(gameMenuKey);
         this.menuElement.setOrigin(0);
-        this.revealAfterInit(this.menuElement, 'gameMenu');
+        this.revealMenusAfterInit(this.menuElement, 'gameMenu');
 
         this.gameQualityMenuElement = this.add.dom(300, -400).createFromCache(gameSettingsMenuKey);
-        this.revealAfterInit(this.gameQualityMenuElement, 'gameQuality');
+        this.revealMenusAfterInit(this.gameQualityMenuElement, 'gameQuality');
         
         this.input.keyboard.on('keyup-TAB', () => {
             this.sideMenuOpened ? this.closeSideMenu() : this.openSideMenu();
         });
-        this.menuButton = this.add.dom(35, 20).createFromCache(gameMenuIconKey);
+        this.menuButton = this.add.dom(0, 0).createFromCache(gameMenuIconKey);
         this.menuButton.addListener('click');
         this.menuButton.on('click', () => {
             this.sideMenuOpened ? this.closeSideMenu() : this.openSideMenu();
         });
     }
     
-    private revealAfterInit(menuElement: Phaser.GameObjects.DOMElement, rootDomId: string) {
+    private revealMenusAfterInit(menuElement: Phaser.GameObjects.DOMElement, rootDomId: string) {
         //Dom elements will appear inside the viewer screen when creating before being moved out of it, which create a flicker effect.
         //To prevent this, we put a 'hidden' attribute on the root element, we remove it only after the init is done.
         setTimeout(() => {
@@ -63,6 +63,10 @@ export class MenuScene extends Phaser.Scene {
         }, 250);
     }
     
+    public revealMenuIcon(): void {
+        (this.menuButton.getChildByID('menuIcon') as HTMLElement).hidden = false
+    }
+    
     openSideMenu() {
         if (this.sideMenuOpened) return;
         this.sideMenuOpened = true;
@@ -148,15 +152,14 @@ export class MenuScene extends Phaser.Scene {
         switch ((event?.target as HTMLInputElement).id) {
             case 'changeNameButton':
                 this.closeSideMenu();
-                this.closeGameQualityMenu();
+                gameManager.leaveGame(this, LoginSceneName, new LoginScene());
-                gameManager.leaveGame(this, LoginSceneName);
                 break;
             case 'sparkButton':
                 this.goToSpark();
                 break;
             case 'changeSkinButton':
                 this.closeSideMenu();
-                gameManager.leaveGame(this, SelectCharacterSceneName);
+                gameManager.leaveGame(this, SelectCharacterSceneName, new SelectCharacterScene());
                 break;
             case 'closeButton':
                 this.closeSideMenu();
@@ -194,6 +197,6 @@ export class MenuScene extends Phaser.Scene {
 
     private goToSpark() {
         const sparkHost = 'https://'+window.location.host.replace('play.', 'admin.')+'/register';
-        window.location.assign(sparkHost);
+        window.open(sparkHost, '_blank');
     }
 }