Kraut.World/server
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Making login scene responsive

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

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

@ -7,6 +7,7 @@ import Rectangle = Phaser.GameObjects.Rectangle;
import {PLAYER_RESOURCES, PlayerResourceDescriptionInterface} from "../Entity/Character";
import {cypressAsserter} from "../../Cypress/CypressAsserter";
import {SelectCharacterSceneName} from "./SelectCharacterScene";
import {ResizableScene} from "./ResizableScene";
//todo: put this constants in a dedicated file
export const LoginSceneName = "LoginScene";
@ -15,12 +16,12 @@ enum LoginTextures {
mainFont = "main_font"
}
export class LoginScene extends Phaser.Scene {
private nameInput: TextInput|null = null;
private textField: TextField|null = null;
private infoTextField: TextField|null = null;
private pressReturnField: TextField|null = null;
private logo: Image|null = null;
export class LoginScene extends ResizableScene {
private nameInput!: TextInput;
private textField!: TextField;
private infoTextField!: TextField;
private pressReturnField!: TextField;
private logo!: Image;
private name: string = '';
constructor() {
@ -93,4 +94,14 @@ export class LoginScene extends Phaser.Scene {
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;
}
}