diff --git a/front/dist/resources/html/gameMenuIcon.html b/front/dist/resources/html/gameMenuIcon.html index f7f5e9aa..7ae5cbd0 100644 --- a/front/dist/resources/html/gameMenuIcon.html +++ b/front/dist/resources/html/gameMenuIcon.html @@ -9,7 +9,7 @@ margin: 10px; } -
+
diff --git a/front/src/Phaser/Game/GameManager.ts b/front/src/Phaser/Game/GameManager.ts index dc0218c4..3b87472e 100644 --- a/front/src/Phaser/Game/GameManager.ts +++ b/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 - setTimeout(() => scenePlugin.launch(MenuSceneName), 1000); + scenePlugin.launch(MenuSceneName); + } + + 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 - setTimeout(() => scene.scene.launch(MenuSceneName), 1000); + scene.scene.wake(MenuSceneName); } else { scene.scene.run(fallbackSceneName) } diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 9f707da7..a5248ff7 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/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(); diff --git a/front/src/Phaser/Login/LoginScene.ts b/front/src/Phaser/Login/LoginScene.ts index 64baac81..b6afa993 100644 --- a/front/src/Phaser/Login/LoginScene.ts +++ b/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 { diff --git a/front/src/Phaser/Login/SelectCharacterScene.ts b/front/src/Phaser/Login/SelectCharacterScene.ts index 0c0a3536..c09d2d92 100644 --- a/front/src/Phaser/Login/SelectCharacterScene.ts +++ b/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 { diff --git a/front/src/Phaser/Menu/MenuScene.ts b/front/src/Phaser/Menu/MenuScene.ts index 7e1c0d33..644de09b 100644 --- a/front/src/Phaser/Menu/MenuScene.ts +++ b/front/src/Phaser/Menu/MenuScene.ts @@ -1,5 +1,5 @@ -import {LoginSceneName} from "../Login/LoginScene"; -import {SelectCharacterSceneName} from "../Login/SelectCharacterScene"; +import {LoginScene, LoginSceneName} from "../Login/LoginScene"; +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,14 +152,14 @@ export class MenuScene extends Phaser.Scene { case 'changeNameButton': this.closeSideMenu(); this.closeGameQualityMenu(); - gameManager.leaveGame(this, LoginSceneName); + gameManager.leaveGame(this, LoginSceneName, new LoginScene()); 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();