correction of resize select character and companion by David

This commit is contained in:
GRL 2021-05-31 10:20:30 +02:00
parent 474323b95f
commit 1ac108a9b8
12 changed files with 40 additions and 23 deletions

View File

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

View File

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

View File

@ -69,7 +69,7 @@ export abstract class DirtyScene extends ResizableScene {
return this.dirty || this.objectListChanged; return this.dirty || this.objectListChanged;
} }
public onResize(ev: UIEvent): void { public onResize(): void {
this.objectListChanged = true; this.objectListChanged = true;
} }
} }

View File

@ -21,14 +21,22 @@ export class Game extends Phaser.Game {
constructor(GameConfig: Phaser.Types.Core.GameConfig) { constructor(GameConfig: Phaser.Types.Core.GameConfig) {
super(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 // Let's trigger the onResize method of any active scene that is a ResizableScene
for (const scene of this.scene.getScenes(true)) { for (const scene of this.scene.getScenes(true)) {
if (scene instanceof ResizableScene) { if (scene instanceof ResizableScene) {
scene.onResize(event); scene.onResize(event);
} }
} }
}); });*/
} }
public step(time: number, delta: number) public step(time: number, delta: number)

View File

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

View File

@ -52,7 +52,7 @@ export class CustomizeScene extends AbstractCharacterScene {
create() { create() {
this.customizeSceneElement = this.add.dom(-1000, 0).createFromCache(customizeSceneKey); this.customizeSceneElement = this.add.dom(-1000, 0).createFromCache(customizeSceneKey);
this.centerXDomElement(this.customizeSceneElement, 150); this.centerXDomElement(this.customizeSceneElement, 350);
MenuScene.revealMenusAfterInit(this.customizeSceneElement, customizeSceneKey); MenuScene.revealMenusAfterInit(this.customizeSceneElement, customizeSceneKey);
this.customizeSceneElement.addListener('click'); 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.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.Rectangle.y = this.cameras.main.worldView.y + this.cameras.main.height / 3;
this.centerXDomElement(this.customizeSceneElement, 150); this.centerXDomElement(this.customizeSceneElement, 350);
} }
private nextSceneToCamera(){ private nextSceneToCamera(){

View File

@ -80,7 +80,7 @@ export class LoginScene extends ResizableScene {
} }
public onResize(ev: UIEvent): void { public onResize(): void {
this.centerXDomElement(this.loginSceneElement, 200); this.centerXDomElement(this.loginSceneElement, 200);
} }
} }

View File

@ -2,7 +2,7 @@ import {Scene} from "phaser";
import DOMElement = Phaser.GameObjects.DOMElement; import DOMElement = Phaser.GameObjects.DOMElement;
export abstract class ResizableScene extends Scene { export abstract class ResizableScene extends Scene {
public abstract onResize(ev: UIEvent): void; public abstract onResize(): void;
/** /**
* Centers the DOM element on the X axis. * Centers the DOM element on the X axis.
@ -17,7 +17,7 @@ export abstract class ResizableScene extends Scene {
&& object.node && object.node
&& object.node.getBoundingClientRect().width > 0 && object.node.getBoundingClientRect().width > 0
? (object.node.getBoundingClientRect().width / 2 / this.scale.zoom) ? (object.node.getBoundingClientRect().width / 2 / this.scale.zoom)
: (300 / this.scale.zoom) : (defaultWidth / this.scale.zoom)
); );
} }
} }

View File

@ -51,7 +51,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
create() { create() {
this.selectCharacterSceneElement = this.add.dom(-1000, 0).createFromCache(selectCharacterKey); this.selectCharacterSceneElement = this.add.dom(-1000, 0).createFromCache(selectCharacterKey);
this.centerXDomElement(this.selectCharacterSceneElement, 150); this.centerXDomElement(this.selectCharacterSceneElement, 300);
MenuScene.revealMenusAfterInit(this.selectCharacterSceneElement, selectCharacterKey); MenuScene.revealMenusAfterInit(this.selectCharacterSceneElement, selectCharacterKey);
this.selectCharacterSceneElement.addListener('click'); this.selectCharacterSceneElement.addListener('click');
@ -211,7 +211,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
const {playerX, playerY, playerScale, playserOpactity, playerVisible} = this.defineSetupPlayer(numero); const {playerX, playerY, playerScale, playserOpactity, playerVisible} = this.defineSetupPlayer(numero);
player.setBounce(0.2); player.setBounce(0.2);
player.setCollideWorldBounds(true); player.setCollideWorldBounds(false);
player.setVisible( playerVisible ); player.setVisible( playerVisible );
player.setScale(playerScale, playerScale); player.setScale(playerScale, playerScale);
player.setAlpha(playserOpactity); player.setAlpha(playserOpactity);
@ -240,10 +240,10 @@ export class SelectCharacterScene extends AbstractCharacterScene {
update(time: number, delta: number): void { update(time: number, delta: number): void {
} }
public onResize(ev: UIEvent): void { public onResize(): void {
//move position of user //move position of user
this.moveUser(); this.moveUser();
this.centerXDomElement(this.selectCharacterSceneElement, 150); this.centerXDomElement(this.selectCharacterSceneElement, 300);
} }
} }

View File

@ -43,7 +43,7 @@ export class SelectCompanionScene extends ResizableScene {
create() { create() {
this.selectCompanionSceneElement = this.add.dom(-1000, 0).createFromCache(selectCompanionSceneKey); this.selectCompanionSceneElement = this.add.dom(-1000, 0).createFromCache(selectCompanionSceneKey);
this.centerXDomElement(this.selectCompanionSceneElement, 150); this.centerXDomElement(this.selectCompanionSceneElement, 300);
MenuScene.revealMenusAfterInit(this.selectCompanionSceneElement, selectCompanionSceneKey); MenuScene.revealMenusAfterInit(this.selectCompanionSceneElement, selectCompanionSceneKey);
this.selectCompanionSceneElement.addListener('click'); this.selectCompanionSceneElement.addListener('click');
@ -126,10 +126,10 @@ export class SelectCompanionScene extends ResizableScene {
this.selectedCompanion = this.companions[this.currentCompanion]; this.selectedCompanion = this.companions[this.currentCompanion];
} }
public onResize(ev: UIEvent): void { public onResize(): void {
this.moveCompanion(); this.moveCompanion();
this.centerXDomElement(this.selectCompanionSceneElement, 150); this.centerXDomElement(this.selectCompanionSceneElement, 300);
} }
private updateSelectedCompanion(): void { private updateSelectedCompanion(): void {

View File

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

View File

@ -2,6 +2,7 @@ import {HdpiManager} from "./HdpiManager";
import ScaleManager = Phaser.Scale.ScaleManager; import ScaleManager = Phaser.Scale.ScaleManager;
import {coWebsiteManager} from "../../WebRtc/CoWebsiteManager"; import {coWebsiteManager} from "../../WebRtc/CoWebsiteManager";
import type {Game} from "../Game/Game"; import type {Game} from "../Game/Game";
import {ResizableScene} from "../Login/ResizableScene";
class WaScaleManager { class WaScaleManager {
@ -30,13 +31,19 @@ class WaScaleManager {
const { game: gameSize, real: realSize } = this.hdpiManager.getOptimalGameSize({width: width * devicePixelRatio, height: height * devicePixelRatio}); const { game: gameSize, real: realSize } = this.hdpiManager.getOptimalGameSize({width: width * devicePixelRatio, height: height * devicePixelRatio});
this.actualZoom = realSize.width / gameSize.width / 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); this.scaleManager.resize(gameSize.width, gameSize.height);
// Override bug in canvas resizing in Phaser. Let's resize the canvas ourselves // Override bug in canvas resizing in Phaser. Let's resize the canvas ourselves
const style = this.scaleManager.canvas.style; const style = this.scaleManager.canvas.style;
style.width = Math.ceil(realSize.width / devicePixelRatio) + 'px'; style.width = Math.ceil(realSize.width / devicePixelRatio) + 'px';
style.height = Math.ceil(realSize.height / 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(); this.game.markDirty();
} }