_Bastler/partey_workadventure
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

make sure horizontal iPhoneX displays view properly

Browse Source
This commit is contained in:
Piotr 'pwh' Hanusiak 2022-03-22 13:37:41 +01:00
parent d971c7e064
commit 11a262b178
2 changed files with 69 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
front/src/Phaser/Components/Ui/Button.ts
View File

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

50
front/src/Phaser/Login/CustomizeScene.ts
View File

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