Making login scene responsive

This commit is contained in:
David Négrier 2020-10-07 18:03:34 +02:00
parent 8773989bbe
commit 79b5c5de93
4 changed files with 42 additions and 6 deletions

View File

@ -38,4 +38,16 @@ export class TextInput extends Phaser.GameObjects.BitmapText {
getText(): string { getText(): string {
return this.text; return this.text;
} }
setX(x: number): this {
super.setX(x);
this.underLine.x = x;
return this;
}
setY(y: number): this {
super.setY(y);
this.underLine.y = y+1;
return this;
}
} }

View File

@ -7,6 +7,7 @@ import Rectangle = Phaser.GameObjects.Rectangle;
import {PLAYER_RESOURCES, PlayerResourceDescriptionInterface} from "../Entity/Character"; import {PLAYER_RESOURCES, PlayerResourceDescriptionInterface} from "../Entity/Character";
import {cypressAsserter} from "../../Cypress/CypressAsserter"; import {cypressAsserter} from "../../Cypress/CypressAsserter";
import {SelectCharacterSceneName} from "./SelectCharacterScene"; import {SelectCharacterSceneName} from "./SelectCharacterScene";
import {ResizableScene} from "./ResizableScene";
//todo: put this constants in a dedicated file //todo: put this constants in a dedicated file
export const LoginSceneName = "LoginScene"; export const LoginSceneName = "LoginScene";
@ -15,12 +16,12 @@ enum LoginTextures {
mainFont = "main_font" mainFont = "main_font"
} }
export class LoginScene extends Phaser.Scene { export class LoginScene extends ResizableScene {
private nameInput: TextInput|null = null; private nameInput!: TextInput;
private textField: TextField|null = null; private textField!: TextField;
private infoTextField: TextField|null = null; private infoTextField!: TextField;
private pressReturnField: TextField|null = null; private pressReturnField!: TextField;
private logo: Image|null = null; private logo!: Image;
private name: string = ''; private name: string = '';
constructor() { constructor() {
@ -93,4 +94,14 @@ export class LoginScene extends Phaser.Scene {
this.scene.start(SelectCharacterSceneName); this.scene.start(SelectCharacterSceneName);
} }
public onResize(ev: UIEvent): void {
this.textField.x = this.game.renderer.width / 2;
this.nameInput.setX(this.game.renderer.width / 2 - 64);
this.pressReturnField.x = this.game.renderer.width / 2;
this.logo.x = this.game.renderer.width - 30;
this.logo.y = this.game.renderer.height - 20;
this.infoTextField.y = this.game.renderer.height - 35;
}
} }

View File

@ -0,0 +1,5 @@
import {Scene} from "phaser";
export abstract class ResizableScene extends Scene {
public abstract onResize(ev: UIEvent): void;
}

View File

@ -12,6 +12,7 @@ import {OutlinePipeline} from "./Phaser/Shaders/OutlinePipeline";
import {CustomizeScene} from "./Phaser/Login/CustomizeScene"; import {CustomizeScene} from "./Phaser/Login/CustomizeScene";
import {CoWebsiteManager} from "./WebRtc/CoWebsiteManager"; import {CoWebsiteManager} from "./WebRtc/CoWebsiteManager";
import {connectionManager} from "./Connexion/ConnectionManager"; import {connectionManager} from "./Connexion/ConnectionManager";
import {ResizableScene} from "./Phaser/Login/ResizableScene";
//CoWebsiteManager.loadCoWebsite('https://thecodingmachine.com'); //CoWebsiteManager.loadCoWebsite('https://thecodingmachine.com');
connectionManager.init(); connectionManager.init();
@ -55,6 +56,13 @@ window.addEventListener('resize', function (event) {
const {width, height} = CoWebsiteManager.getGameSize(); const {width, height} = CoWebsiteManager.getGameSize();
game.scale.resize(width / RESOLUTION, height / RESOLUTION); game.scale.resize(width / RESOLUTION, height / RESOLUTION);
// Let's trigger the onResize method of any active scene that is a ResizableScene
for (const scene of game.scene.getScenes(true)) {
if (scene instanceof ResizableScene) {
scene.onResize(event);
}
}
}); });
CoWebsiteManager.onStateChange(() => { CoWebsiteManager.onStateChange(() => {
const {width, height} = CoWebsiteManager.getGameSize(); const {width, height} = CoWebsiteManager.getGameSize();