correction of resize select character and companion by David

front/dist/resources/html/CustomCharacterScene.html

@@ -10,8 +10,8 @@
         color: #ebeeee;
         width: 42vw;
         height: 48vh;
-        /*max-width: 300px;
+        max-width: 350px;
-        max-height: 48vh;*/
+        /*max-height: 48vh;*/
         overflow: hidden;
     }
     #customizeScene h1 {

front/dist/resources/html/SelectCompanionScene.html

@@ -128,7 +128,7 @@
         <button class="selectCharacterButton" id="selectCharacterButtonRight"> > </button>
     </section>
     <section class="action">
-        <a herf="#" id="selectCompanionSceneFormBack">No companion</a>
+        <a href="#" id="selectCompanionSceneFormBack">No companion</a>
         <button type="submit" id="selectCompanionSceneFormSubmit">Continue</button>
     </section>
 </form>

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;
     }
 }

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)

front/src/Phaser/Game/GameScene.ts

@@ -1452,8 +1452,8 @@ ${escapedMessage}
         this.connection?.emitActionableEvent(itemId, eventName, state, parameters);
     }
 
-    public onResize(ev: UIEvent): void {
+    public onResize(): void {
-        super.onResize(ev);
+        super.onResize();
         this.reposition();
 
         // Send new viewport to server

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(){

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);
     }
 }

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)
             );
     }
 }

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);
     }
 }

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 {

front/src/Phaser/Menu/HelpCameraSettingsScene.ts

@@ -109,8 +109,10 @@ export class HelpCameraSettingsScene extends DirtyScene {
         this.dirty = false;
     }
 
-    public onResize(ev: UIEvent): void {
+    public onResize(): void {
-        super.onResize(ev);
+        super.onResize(
+
+        );
         if (this.helpCameraSettingsOpened) {
             const middleX = this.getMiddleX();
             const middleY = this.getMiddleY();

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();
     }