diff --git a/front/src/Phaser/Components/TextInput.ts b/front/src/Phaser/Components/TextInput.ts index 7a549d1f..47f713e0 100644 --- a/front/src/Phaser/Components/TextInput.ts +++ b/front/src/Phaser/Components/TextInput.ts @@ -38,4 +38,16 @@ export class TextInput extends Phaser.GameObjects.BitmapText { getText(): string { 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; + } } diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 608d920b..f3381d5f 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -45,6 +45,7 @@ import {connectionManager} from "../../Connexion/ConnectionManager"; import {RoomConnection} from "../../Connexion/RoomConnection"; import {GlobalMessageManager} from "../../Administration/GlobalMessageManager"; import {ConsoleGlobalMessageManager} from "../../Administration/ConsoleGlobalMessageManager"; +import {ResizableScene} from "../Login/ResizableScene"; export enum Textures { @@ -86,7 +87,7 @@ interface DeleteGroupEventInterface { groupId: number } -export class GameScene extends Phaser.Scene implements CenterListener { +export class GameScene extends ResizableScene implements CenterListener { GameManager : GameManager; Terrains : Array; CurrentPlayer!: CurrentGamerInterface; @@ -132,7 +133,6 @@ export class GameScene extends Phaser.Scene implements CenterListener { private startLayerName: string|undefined; private presentationModeSprite!: Sprite; private chatModeSprite!: Sprite; - private onResizeCallback!: (this: Window, ev: UIEvent) => void; private gameMap!: GameMap; private actionableItems: Map = new Map(); // The item that can be selected by pressing the space key. @@ -271,7 +271,6 @@ export class GameScene extends Phaser.Scene implements CenterListener { this.scene.stop(this.scene.key); this.scene.remove(this.scene.key); - window.removeEventListener('resize', this.onResizeCallback); }) connection.onActionableEvent((message => { @@ -565,8 +564,6 @@ export class GameScene extends Phaser.Scene implements CenterListener { this.switchLayoutMode(); }); - this.onResizeCallback = this.onResize.bind(this); - window.addEventListener('resize', this.onResizeCallback); this.reposition(); // From now, this game scene will be notified of reposition events @@ -957,7 +954,6 @@ export class GameScene extends Phaser.Scene implements CenterListener { this.simplePeer.unregister(); this.scene.stop(); this.scene.remove(this.scene.key); - window.removeEventListener('resize', this.onResizeCallback); this.scene.start(nextSceneKey.key, { startLayerName: nextSceneKey.hash }); @@ -1156,7 +1152,7 @@ export class GameScene extends Phaser.Scene implements CenterListener { this.connection.emitActionableEvent(itemId, eventName, state, parameters); } - private onResize(): void { + public onResize(): void { this.reposition(); // Send new viewport to server diff --git a/front/src/Phaser/Login/CustomizeScene.ts b/front/src/Phaser/Login/CustomizeScene.ts index 50834bd1..4ada5026 100644 --- a/front/src/Phaser/Login/CustomizeScene.ts +++ b/front/src/Phaser/Login/CustomizeScene.ts @@ -6,6 +6,7 @@ import {LAYERS, loadAllLayers} from "../Entity/body_character"; import Sprite = Phaser.GameObjects.Sprite; import Container = Phaser.GameObjects.Container; import {gameManager} from "../Game/GameManager"; +import {ResizableScene} from "./ResizableScene"; export const CustomizeSceneName = "CustomizeScene"; @@ -16,7 +17,7 @@ enum CustomizeTextures{ arrowUp = "arrow_up", } -export class CustomizeScene extends Phaser.Scene { +export class CustomizeScene extends ResizableScene { private textField!: TextField; private enterField!: TextField; @@ -35,8 +36,6 @@ export class CustomizeScene extends Phaser.Scene { private containersRow: Array> = new Array>(); private activeRow = 0; - private repositionCallback!: (this: Window, ev: UIEvent) => void; - constructor() { super({ key: CustomizeSceneName @@ -144,10 +143,6 @@ export class CustomizeScene extends Phaser.Scene { this.moveLayers(); } }); - - this.repositionCallback = this.reposition.bind(this); - window.addEventListener('resize', this.repositionCallback); - } update(time: number, delta: number): void { super.update(time, delta); @@ -249,7 +244,7 @@ export class CustomizeScene extends Phaser.Scene { } } - private reposition() { + public onResize(): void { this.moveLayers(); this.Rectangle.x = this.cameras.main.worldView.x + this.cameras.main.width / 2; diff --git a/front/src/Phaser/Login/LoginScene.ts b/front/src/Phaser/Login/LoginScene.ts index 308ba3ae..6e6bf291 100644 --- a/front/src/Phaser/Login/LoginScene.ts +++ b/front/src/Phaser/Login/LoginScene.ts @@ -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; + } + } diff --git a/front/src/Phaser/Login/ResizableScene.ts b/front/src/Phaser/Login/ResizableScene.ts new file mode 100644 index 00000000..82123e2b --- /dev/null +++ b/front/src/Phaser/Login/ResizableScene.ts @@ -0,0 +1,5 @@ +import {Scene} from "phaser"; + +export abstract class ResizableScene extends Scene { + public abstract onResize(ev: UIEvent): void; +} diff --git a/front/src/Phaser/Login/SelectCharacterScene.ts b/front/src/Phaser/Login/SelectCharacterScene.ts index 8d3c7ab1..e5df0a0d 100644 --- a/front/src/Phaser/Login/SelectCharacterScene.ts +++ b/front/src/Phaser/Login/SelectCharacterScene.ts @@ -5,6 +5,7 @@ import Rectangle = Phaser.GameObjects.Rectangle; import {PLAYER_RESOURCES, PlayerResourceDescriptionInterface} from "../Entity/Character"; import {EnableCameraSceneName} from "./EnableCameraScene"; import {CustomizeSceneName} from "./CustomizeScene"; +import {ResizableScene} from "./ResizableScene"; //todo: put this constants in a dedicated file @@ -17,7 +18,7 @@ enum LoginTextures { customizeButtonSelected = "customize_button_selected" } -export class SelectCharacterScene extends Phaser.Scene { +export class SelectCharacterScene extends ResizableScene { private readonly nbCharactersPerRow = 4; private textField!: TextField; private pressReturnField!: TextField; @@ -242,4 +243,26 @@ export class SelectCharacterScene extends Phaser.Scene { window.localStorage.setItem('selectedPlayer', String(playerNumber)); } } + + public onResize(ev: UIEvent): void { + this.textField.x = this.game.renderer.width / 2; + 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.customizeButton.x = this.game.renderer.width / 2; + this.customizeButtonSelected.x = this.game.renderer.width / 2; + + for (let i = 0; i { const {width, height} = CoWebsiteManager.getGameSize();