From 11a262b1787d5c70e441d2df6fc818dc9f4b4067 Mon Sep 17 00:00:00 2001 From: Piotr 'pwh' Hanusiak Date: Tue, 22 Mar 2022 13:37:41 +0100 Subject: [PATCH] make sure horizontal iPhoneX displays view properly --- front/src/Phaser/Components/Ui/Button.ts | 42 +++++++++++++++++++- front/src/Phaser/Login/CustomizeScene.ts | 50 +++++++++++++----------- 2 files changed, 69 insertions(+), 23 deletions(-) diff --git a/front/src/Phaser/Components/Ui/Button.ts b/front/src/Phaser/Components/Ui/Button.ts index 6fb39571..3c4f80da 100644 --- a/front/src/Phaser/Components/Ui/Button.ts +++ b/front/src/Phaser/Components/Ui/Button.ts @@ -7,6 +7,7 @@ export interface ButtonConfig { } export interface ButtonAppearanceConfig { + textColor: string; color: number; borderThickness: number; borderColor: number; @@ -18,20 +19,25 @@ export class Button extends Phaser.GameObjects.Container { private config: ButtonConfig; + private hovered: boolean = false; + private pressed: boolean = false; + constructor(scene: Phaser.Scene, x: number, y: number, config: ButtonConfig) { super(scene, x, y); this.config = config; this.background = this.scene.add.graphics(); - this.drawBackground(this.config.idle); this.text = this.scene.add.text(0, 0, "", { color: "0x000000" }).setOrigin(0.5); + this.drawBackground(this.config.idle); this.add([this.background, this.text]); this.setSize(this.config.width, this.config.height); this.setInteractive({ cursor: "pointer" }); + this.bindEventHandlers(); + this.scene.add.existing(this); } @@ -39,6 +45,18 @@ export class Button extends Phaser.GameObjects.Container { this.text.setText(text); } + private updateButtonAppearance(): void { + if (this.pressed) { + this.drawBackground(this.config.pressed); + return; + } + if (this.hovered) { + this.drawBackground(this.config.hover); + return; + } + this.drawBackground(this.config.idle); + } + private drawBackground(appearance: ButtonAppearanceConfig): void { this.background.clear(); this.background.fillStyle(appearance.color); @@ -49,5 +67,27 @@ export class Button extends Phaser.GameObjects.Container { this.background.fillRect(-w / 2, -h / 2, w, h); this.background.strokeRect(-w / 2, -h / 2, w, h); + + this.text.setColor(appearance.textColor); + } + + private bindEventHandlers(): void { + this.on(Phaser.Input.Events.POINTER_OVER, () => { + this.hovered = true; + this.updateButtonAppearance(); + }); + this.on(Phaser.Input.Events.POINTER_OUT, () => { + this.hovered = false; + this.pressed = false; + this.updateButtonAppearance(); + }); + this.on(Phaser.Input.Events.POINTER_DOWN, () => { + this.pressed = true; + this.updateButtonAppearance(); + }); + this.on(Phaser.Input.Events.POINTER_UP, () => { + this.pressed = false; + this.updateButtonAppearance(); + }); } } diff --git a/front/src/Phaser/Login/CustomizeScene.ts b/front/src/Phaser/Login/CustomizeScene.ts index 7dfb1fb2..40c25ec2 100644 --- a/front/src/Phaser/Login/CustomizeScene.ts +++ b/front/src/Phaser/Login/CustomizeScene.ts @@ -196,7 +196,7 @@ export class CustomizeScene extends AbstractCharacterScene { private drawGridBackground(gridPosition: { x: number; y: number }): void { const gridBackgroundWidth = innerWidth / waScaleManager.getActualZoom(); - const gridBackgroundHeight = 130; + const gridBackgroundHeight = 115; this.bodyPartsDraggableGridBackground.clear(); this.bodyPartsDraggableGridBackground.fillStyle(0xf9f9f9); this.bodyPartsDraggableGridBackground.fillRect( @@ -208,10 +208,10 @@ export class CustomizeScene extends AbstractCharacterScene { } private drawGridForeground(gridPosition: { x: number; y: number }): void { - const gridBackgroundWidth = innerWidth / waScaleManager.getActualZoom(); - const gridBackgroundHeight = 130; + const gridBackgroundWidth = (innerWidth + 10) / waScaleManager.getActualZoom(); + const gridBackgroundHeight = 115; this.bodyPartsDraggableGridForeground.clear(); - this.bodyPartsDraggableGridForeground.lineStyle(2, 0xadafbc); + this.bodyPartsDraggableGridForeground.lineStyle(4, 0xadafbc); this.bodyPartsDraggableGridForeground.strokeRect( gridPosition.x - gridBackgroundWidth / 2, gridPosition.y - gridBackgroundHeight / 2, @@ -226,17 +226,20 @@ export class CustomizeScene extends AbstractCharacterScene { height: 50, idle: { color: 0xffffff, - borderThickness: 1, - borderColor: 0xadafbc, + textColor: "#000000", + borderThickness: 3, + borderColor: 0xe7e7e7, }, hover: { - color: 0xffffff, - borderThickness: 1, + color: 0xe7e7e7, + textColor: "#000000", + borderThickness: 3, borderColor: 0xadafbc, }, pressed: { - color: 0xffffff, - borderThickness: 1, + color: 0xadafbc, + textColor: "#000000", + borderThickness: 3, borderColor: 0xadafbc, }, }); @@ -248,19 +251,22 @@ export class CustomizeScene extends AbstractCharacterScene { width: 95, height: 50, idle: { - color: 0xffffff, - borderThickness: 1, - borderColor: 0xadafbc, + color: 0x209cee, + textColor: "#ffffff", + borderThickness: 3, + borderColor: 0x006bb3, }, hover: { - color: 0xffffff, - borderThickness: 1, - borderColor: 0xadafbc, + color: 0x209cee, + textColor: "#ffffff", + borderThickness: 3, + borderColor: 0x006bb3, }, pressed: { - color: 0xffffff, - borderThickness: 1, - borderColor: 0xadafbc, + color: 0x006bb3, + textColor: "#ffffff", + borderThickness: 3, + borderColor: 0x006bb3, }, }); this.finishButton.setText("Finish"); @@ -281,7 +287,7 @@ export class CustomizeScene extends AbstractCharacterScene { private handleCustomWokaPreviewerOnResize(): void { this.customWokaPreviewer.x = this.cameras.main.worldView.x + this.cameras.main.width / 2; - this.customWokaPreviewer.y = this.customWokaPreviewer.displayHeight * 0.5 + 20; + this.customWokaPreviewer.y = this.customWokaPreviewer.displayHeight * 0.5 + 10; } private handleBodyPartSlotsOnResize(): void { @@ -335,7 +341,7 @@ export class CustomizeScene extends AbstractCharacterScene { } private handleBodyPartsDraggableGridOnResize(): void { - const gridHeight = 125; + const gridHeight = 110; const gridWidth = innerWidth / waScaleManager.getActualZoom(); const gridPos = { x: this.cameras.main.worldView.x + this.cameras.main.width / 2, @@ -386,7 +392,7 @@ export class CustomizeScene extends AbstractCharacterScene { color: 0xffffff, borderThickness: 1, borderColor: 0xadafbc, - borderSelectedColor: 0x00ffff, + borderSelectedColor: 0x209cee, offsetX: -4, offsetY: -3, };