make sure horizontal iPhoneX displays view properly

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

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 gridBackgroundWidth = (innerWidth + 10) / waScaleManager.getActualZoom();
-        const gridBackgroundHeight = 130;
+        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,
+                textColor: "#000000",
-                borderColor: 0xadafbc,
+                borderThickness: 3,
+                borderColor: 0xe7e7e7,
             },
             hover: {
-                color: 0xffffff,
+                color: 0xe7e7e7,
-                borderThickness: 1,
+                textColor: "#000000",
+                borderThickness: 3,
                 borderColor: 0xadafbc,
             },
             pressed: {
-                color: 0xffffff,
+                color: 0xadafbc,
-                borderThickness: 1,
+                textColor: "#000000",
+                borderThickness: 3,
                 borderColor: 0xadafbc,
             },
         });
@@ -248,19 +251,22 @@ export class CustomizeScene extends AbstractCharacterScene {
             width: 95,
             height: 50,
             idle: {
-                color: 0xffffff,
+                color: 0x209cee,
-                borderThickness: 1,
+                textColor: "#ffffff",
-                borderColor: 0xadafbc,
+                borderThickness: 3,
+                borderColor: 0x006bb3,
             },
             hover: {
-                color: 0xffffff,
+                color: 0x209cee,
-                borderThickness: 1,
+                textColor: "#ffffff",
-                borderColor: 0xadafbc,
+                borderThickness: 3,
+                borderColor: 0x006bb3,
             },
             pressed: {
-                color: 0xffffff,
+                color: 0x006bb3,
-                borderThickness: 1,
+                textColor: "#ffffff",
-                borderColor: 0xadafbc,
+                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,
         };