From 8f9a13e81288f064817af21441b1caa0cb05d355 Mon Sep 17 00:00:00 2001
From: lsauer <lukas.sauer@ionos.com>
Date: Tue, 13 Feb 2024 13:30:29 +0100
Subject: [PATCH] magic values be gone!!!

---
 src/scene/title-scene.ts | 17 ++++++++++++++---
 src/ui/input-field.ts    |  6 +++---
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/scene/title-scene.ts b/src/scene/title-scene.ts
index 85d698b..865ffa3 100644
--- a/src/scene/title-scene.ts
+++ b/src/scene/title-scene.ts
@@ -61,9 +61,20 @@ export default class TitleScene extends BaseScene<TitleSceneController> {
         const centerX = WIDTH / 2;
         const centerY = HEIGHT / 2;
 
-        this.lobbyInputField = this.add.existing(new AzNopolyInput(this, centerX - 200, centerY, 300, 55));
-        this.add.existing(new AzNopolyButton(this, 'Join',        centerX + 100, centerY, 100, 55, this.controller.onJoinRoomClick.bind(this.controller)));
-        this.add.existing(new AzNopolyButton(this, 'Create Lobby',centerX - 200, centerY + 75, 400, 55, this.controller.onCreateRoom.bind(this.controller)));
+        const widthInputField = 300;
+        const widthJoinButton = 100;
+        const widthCreateButton = widthInputField + widthJoinButton;
+
+        const heightInputField = 55;
+        const heightJoinButton = 55;
+        const heightCreateButton = 55;
+
+        this.lobbyInputField = this.add.existing(
+            new AzNopolyInput(this, centerX - (widthInputField+widthJoinButton) / 2, centerY, widthInputField, heightInputField));
+        this.add.existing(new AzNopolyButton(this, 'Join', centerX + ((widthInputField/2) - (widthJoinButton/2)), centerY, widthJoinButton,
+            heightJoinButton, this.controller.onJoinRoomClick.bind(this.controller)));
+        this.add.existing(new AzNopolyButton(this, 'Create Lobby',centerX - widthCreateButton / 2, centerY + 75, widthCreateButton,
+            heightCreateButton, this.controller.onCreateRoom.bind(this.controller)));
 
 
         const graphics = this.add.graphics();
diff --git a/src/ui/input-field.ts b/src/ui/input-field.ts
index e1116e5..3dae7f4 100644
--- a/src/ui/input-field.ts
+++ b/src/ui/input-field.ts
@@ -1,6 +1,6 @@
 
 
-const PADDING_H = 15;
+const PADDING_HORIZONTAL = 15;
 export default class AzNopolyInput extends Phaser.GameObjects.Container {
 
     static preload(scene: Phaser.Scene) {
@@ -24,9 +24,9 @@ export default class AzNopolyInput extends Phaser.GameObjects.Container {
         this.dom.node.id = "input-field-" + Math.random().toString(36).substring(7);
 
         this.dom.setOrigin(0, 0);
-        this.dom.setPosition(PADDING_H, height / 2);
+        this.dom.setPosition(PADDING_HORIZONTAL, height / 2);
         this.inputDom = this.dom.node.querySelector("input") as HTMLInputElement;
-        this.inputDom.style.width = (width - 2 * PADDING_H) + "px";
+        this.inputDom.style.width = (width - 2 * PADDING_HORIZONTAL) + "px";
         this.inputDom.style.fontSize = height * 0.5 + "px";
         
         this.add(this.dom);