lbehm/workadventure
1
0
Fork 0
Code Issues Pull requests Releases Activity

correction of resize select character and companion by David

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

4
front/dist/resources/html/CustomCharacterScene.html vendored
View file

@ -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 {

2
front/dist/resources/html/SelectCompanionScene.html vendored
View file

@ -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>

2
front/src/Phaser/Game/DirtyScene.ts
View file

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

12
front/src/Phaser/Game/Game.ts
View file

@ -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)

4
front/src/Phaser/Game/GameScene.ts
View file

@ -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

4
front/src/Phaser/Login/CustomizeScene.ts
View file

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

2
front/src/Phaser/Login/LoginScene.ts
View file

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

4
front/src/Phaser/Login/ResizableScene.ts
View file

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

8
front/src/Phaser/Login/SelectCharacterScene.ts
View file

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

6
front/src/Phaser/Login/SelectCompanionScene.ts
View file

@ -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 {

6
front/src/Phaser/Menu/HelpCameraSettingsScene.ts
View file

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

9
front/src/Phaser/Services/WaScaleManager.ts
View file

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