magic values be gone!!!

Abstractolotl · Feb 13, 2024 · 8f9a13e · 8f9a13e
1 parent b41d680
commit 8f9a13e
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 6 deletions.
diff --git 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
@@ -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);