From 645af32b4cc991b3e0828c71fb1dd412895ec2d9 Mon Sep 17 00:00:00 2001 From: GRL Date: Mon, 31 May 2021 10:20:30 +0200 Subject: [PATCH] correction of resize select character and companion --- front/dist/resources/html/CustomCharacterScene.html | 4 ++-- front/src/Phaser/Game/DirtyScene.ts | 2 +- front/src/Phaser/Game/Game.ts | 12 ++++++++++-- front/src/Phaser/Game/GameScene.ts | 4 ++-- front/src/Phaser/Login/CustomizeScene.ts | 4 ++-- front/src/Phaser/Login/LoginScene.ts | 2 +- front/src/Phaser/Login/ResizableScene.ts | 4 ++-- front/src/Phaser/Login/SelectCharacterScene.ts | 8 ++++---- front/src/Phaser/Login/SelectCompanionScene.ts | 6 +++--- front/src/Phaser/Menu/HelpCameraSettingsScene.ts | 6 ++++-- 10 files changed, 31 insertions(+), 21 deletions(-) diff --git a/front/dist/resources/html/CustomCharacterScene.html b/front/dist/resources/html/CustomCharacterScene.html index 0bc050ea..0bf3f753 100644 --- a/front/dist/resources/html/CustomCharacterScene.html +++ b/front/dist/resources/html/CustomCharacterScene.html @@ -10,8 +10,8 @@ color: #ebeeee; width: 42vw; height: 48vh; - /*max-width: 300px; - max-height: 48vh;*/ + max-width: 350px; + /*max-height: 48vh;*/ overflow: hidden; } #customizeScene h1 { diff --git a/front/src/Phaser/Game/DirtyScene.ts b/front/src/Phaser/Game/DirtyScene.ts index 2e94aa66..3e1f3cdf 100644 --- a/front/src/Phaser/Game/DirtyScene.ts +++ b/front/src/Phaser/Game/DirtyScene.ts @@ -69,7 +69,7 @@ export abstract class DirtyScene extends ResizableScene { return this.dirty || this.objectListChanged; } - public onResize(ev: UIEvent): void { + public onResize(): void { this.objectListChanged = true; } } diff --git a/front/src/Phaser/Game/Game.ts b/front/src/Phaser/Game/Game.ts index 01aecf9f..e267e80a 100644 --- a/front/src/Phaser/Game/Game.ts +++ b/front/src/Phaser/Game/Game.ts @@ -21,14 +21,22 @@ export class Game extends Phaser.Game { constructor(GameConfig: Phaser.Types.Core.GameConfig) { super(GameConfig); - window.addEventListener('resize', (event) => { + this.scale.on(Phaser.Scale.Events.RESIZE, () => { + for (const scene of this.scene.getScenes(true)) { + if (scene instanceof ResizableScene) { + scene.onResize(); + } + } + }) + + /*window.addEventListener('resize', (event) => { // Let's trigger the onResize method of any active scene that is a ResizableScene for (const scene of this.scene.getScenes(true)) { if (scene instanceof ResizableScene) { scene.onResize(event); } } - }); + });*/ } public step(time: number, delta: number) diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 4de5ffd9..2d34060f 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -1452,8 +1452,8 @@ ${escapedMessage} this.connection?.emitActionableEvent(itemId, eventName, state, parameters); } - public onResize(ev: UIEvent): void { - super.onResize(ev); + public onResize(): void { + super.onResize(); this.reposition(); // Send new viewport to server diff --git a/front/src/Phaser/Login/CustomizeScene.ts b/front/src/Phaser/Login/CustomizeScene.ts index 8b9a9a7a..1892813c 100644 --- a/front/src/Phaser/Login/CustomizeScene.ts +++ b/front/src/Phaser/Login/CustomizeScene.ts @@ -52,7 +52,7 @@ export class CustomizeScene extends AbstractCharacterScene { create() { this.customizeSceneElement = this.add.dom(-1000, 0).createFromCache(customizeSceneKey); - this.centerXDomElement(this.customizeSceneElement, 150); + this.centerXDomElement(this.customizeSceneElement, 350); MenuScene.revealMenusAfterInit(this.customizeSceneElement, customizeSceneKey); this.customizeSceneElement.addListener('click'); @@ -270,7 +270,7 @@ export class CustomizeScene extends AbstractCharacterScene { this.Rectangle.x = this.cameras.main.worldView.x + this.cameras.main.width / 2; this.Rectangle.y = this.cameras.main.worldView.y + this.cameras.main.height / 3; - this.centerXDomElement(this.customizeSceneElement, 150); + this.centerXDomElement(this.customizeSceneElement, 350); } private nextSceneToCamera(){ diff --git a/front/src/Phaser/Login/LoginScene.ts b/front/src/Phaser/Login/LoginScene.ts index 435592f2..661ddeb4 100644 --- a/front/src/Phaser/Login/LoginScene.ts +++ b/front/src/Phaser/Login/LoginScene.ts @@ -80,7 +80,7 @@ export class LoginScene extends ResizableScene { } - public onResize(ev: UIEvent): void { + public onResize(): void { this.centerXDomElement(this.loginSceneElement, 200); } } diff --git a/front/src/Phaser/Login/ResizableScene.ts b/front/src/Phaser/Login/ResizableScene.ts index 39e2d74b..d06cb66c 100644 --- a/front/src/Phaser/Login/ResizableScene.ts +++ b/front/src/Phaser/Login/ResizableScene.ts @@ -2,7 +2,7 @@ import {Scene} from "phaser"; import DOMElement = Phaser.GameObjects.DOMElement; export abstract class ResizableScene extends Scene { - public abstract onResize(ev: UIEvent): void; + public abstract onResize(): void; /** * Centers the DOM element on the X axis. @@ -17,7 +17,7 @@ export abstract class ResizableScene extends Scene { && object.node && object.node.getBoundingClientRect().width > 0 ? (object.node.getBoundingClientRect().width / 2 / this.scale.zoom) - : (300 / this.scale.zoom) + : (defaultWidth / this.scale.zoom) ); } } diff --git a/front/src/Phaser/Login/SelectCharacterScene.ts b/front/src/Phaser/Login/SelectCharacterScene.ts index ecbb9c64..998a62e6 100644 --- a/front/src/Phaser/Login/SelectCharacterScene.ts +++ b/front/src/Phaser/Login/SelectCharacterScene.ts @@ -51,7 +51,7 @@ export class SelectCharacterScene extends AbstractCharacterScene { create() { this.selectCharacterSceneElement = this.add.dom(-1000, 0).createFromCache(selectCharacterKey); - this.centerXDomElement(this.selectCharacterSceneElement, 150); + this.centerXDomElement(this.selectCharacterSceneElement, 300); MenuScene.revealMenusAfterInit(this.selectCharacterSceneElement, selectCharacterKey); this.selectCharacterSceneElement.addListener('click'); @@ -211,7 +211,7 @@ export class SelectCharacterScene extends AbstractCharacterScene { const {playerX, playerY, playerScale, playserOpactity, playerVisible} = this.defineSetupPlayer(numero); player.setBounce(0.2); - player.setCollideWorldBounds(true); + player.setCollideWorldBounds(false); player.setVisible( playerVisible ); player.setScale(playerScale, playerScale); player.setAlpha(playserOpactity); @@ -240,10 +240,10 @@ export class SelectCharacterScene extends AbstractCharacterScene { update(time: number, delta: number): void { } - public onResize(ev: UIEvent): void { + public onResize(): void { //move position of user this.moveUser(); - this.centerXDomElement(this.selectCharacterSceneElement, 150); + this.centerXDomElement(this.selectCharacterSceneElement, 300); } } diff --git a/front/src/Phaser/Login/SelectCompanionScene.ts b/front/src/Phaser/Login/SelectCompanionScene.ts index 203fd557..0e32108a 100644 --- a/front/src/Phaser/Login/SelectCompanionScene.ts +++ b/front/src/Phaser/Login/SelectCompanionScene.ts @@ -43,7 +43,7 @@ export class SelectCompanionScene extends ResizableScene { create() { this.selectCompanionSceneElement = this.add.dom(-1000, 0).createFromCache(selectCompanionSceneKey); - this.centerXDomElement(this.selectCompanionSceneElement, 150); + this.centerXDomElement(this.selectCompanionSceneElement, 300); MenuScene.revealMenusAfterInit(this.selectCompanionSceneElement, selectCompanionSceneKey); this.selectCompanionSceneElement.addListener('click'); @@ -126,10 +126,10 @@ export class SelectCompanionScene extends ResizableScene { this.selectedCompanion = this.companions[this.currentCompanion]; } - public onResize(ev: UIEvent): void { + public onResize(): void { this.moveCompanion(); - this.centerXDomElement(this.selectCompanionSceneElement, 150); + this.centerXDomElement(this.selectCompanionSceneElement, 300); } private updateSelectedCompanion(): void { diff --git a/front/src/Phaser/Menu/HelpCameraSettingsScene.ts b/front/src/Phaser/Menu/HelpCameraSettingsScene.ts index 6bc520c0..fcc7996a 100644 --- a/front/src/Phaser/Menu/HelpCameraSettingsScene.ts +++ b/front/src/Phaser/Menu/HelpCameraSettingsScene.ts @@ -109,8 +109,10 @@ export class HelpCameraSettingsScene extends DirtyScene { this.dirty = false; } - public onResize(ev: UIEvent): void { - super.onResize(ev); + public onResize(): void { + super.onResize( + + ); if (this.helpCameraSettingsOpened) { const middleX = this.getMiddleX(); const middleY = this.getMiddleY();