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/dist/resources/html/SelectCompanionScene.html b/front/dist/resources/html/SelectCompanionScene.html
index cffa7880..30c782cb 100644
--- a/front/dist/resources/html/SelectCompanionScene.html
+++ b/front/dist/resources/html/SelectCompanionScene.html
@@ -128,7 +128,7 @@
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();
diff --git a/front/src/Phaser/Services/WaScaleManager.ts b/front/src/Phaser/Services/WaScaleManager.ts
index ca8b668d..8ca4ad20 100644
--- a/front/src/Phaser/Services/WaScaleManager.ts
+++ b/front/src/Phaser/Services/WaScaleManager.ts
@@ -2,6 +2,7 @@ import {HdpiManager} from "./HdpiManager";
import ScaleManager = Phaser.Scale.ScaleManager;
import {coWebsiteManager} from "../../WebRtc/CoWebsiteManager";
import type {Game} from "../Game/Game";
+import {ResizableScene} from "../Login/ResizableScene";
class WaScaleManager {
@@ -30,13 +31,19 @@ class WaScaleManager {
const { game: gameSize, real: realSize } = this.hdpiManager.getOptimalGameSize({width: width * devicePixelRatio, height: height * devicePixelRatio});
this.actualZoom = realSize.width / gameSize.width / devicePixelRatio;
- this.scaleManager.setZoom(realSize.width / gameSize.width / devicePixelRatio);
+ this.scaleManager.setZoom(realSize.width / gameSize.width / devicePixelRatio)
this.scaleManager.resize(gameSize.width, gameSize.height);
// Override bug in canvas resizing in Phaser. Let's resize the canvas ourselves
const style = this.scaleManager.canvas.style;
style.width = Math.ceil(realSize.width / devicePixelRatio) + 'px';
style.height = Math.ceil(realSize.height / devicePixelRatio) + 'px';
+ // Note: onResize will be called twice (once here and once is Game.ts), but we have no better way.
+ for (const scene of this.game.scene.getScenes(true)) {
+ if (scene instanceof ResizableScene) {
+ scene.onResize();
+ }
+ }
this.game.markDirty();
}