Add FormContainer to generate grid-layout forms

src/frontend/containers/form.js

+/* Copyright 2021 Dominik George <nik@naturalnet.de>
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Phaser from 'phaser';
+
+class FormContainer extends Phaser.GameObjects.Container {
+  constructor(scene, width, height, inputs = [], buttons = [], options = {}, containerX = 0, containerY = 0, children = []) {
+    let defaultOptions = {
+      fixedWidth: width / 2,
+      fixedHeight: 36
+    };
+    options = {...defaultOptions, ...options};
+
+    super(scene, containerX, containerY, children);
+    this.setSize(width, height);
+
+    let y = 0;
+
+    inputs.forEach(input => {
+      let label = scene.add.text(0, y, input.label);
+      label.setOrigin(0, 0);
+      this.add(label);
+
+      let text = scene.add.text(this.width, y, '', options);
+      text.setOrigin(1, 0);
+      text.setInteractive().on('pointerdown', function() {
+        scene.rexUI.edit(text);
+      });
+      this.add(text);
+
+      y += options.fixedHeight;
+    });
+
+    buttons.forEach(button => {
+      let sprite = scene.add.sprite(0, y, 'button');
+      sprite.setOrigin(0, 0);
+      // button.setInteractive().on('pointerdown', function() {
+      //   console.log(this);
+      // }
+      this.add(sprite);
+
+      y += options.fixedHeight;
+    });
+  }
+}
+
+export default FormContainer;

src/frontend/scenes/login.js

@@ -14,6 +14,7 @@
  */
 
 import MenuScene from './menu';
+import FormContainer from '../containers/form';
 import loginbutton from '../../artwork/loginbutton.svg';
 
 class LoginScene extends MenuScene {
@@ -28,33 +29,17 @@ class LoginScene extends MenuScene {
     let height = this.containers[1].height;
     let margin = 20;
 
-    this.textUserName = this.add.text(width / 2, height / 2, 'Username', { fixedWidth: 150, fixedHeight: 36 });
-    this.textUserName.setOrigin(0.5, 0.5);
-    this.textUserName.setInteractive().on('pointerdown', function() {
-      this.scene.rexUI.edit(textUserName);
-    });
-    this.containers[1].add(this.textUserName);
-
-    this.textPassword = this.add.text(width / 2, height / 2 + 20, 'Password', { fixedWidth: 150, fixedHeight: 36 });
-    this.textPassword.setOrigin(0.5, 0.5);
-    this.textPassword.setInteractive().on('pointerdown', function() {
-      this.scene.rexUI.edit(this.textPassword);
-    });
-    this.containers[1].add(this.textPassword);
-
-    this.textServer = this.add.text(width / 2, height / 2 + 40, 'Homeserver', { fixedWidth: 150, fixedHeight: 36 });
-    this.textServer.setOrigin(0.5, 0.5);
-    this.textServer.setInteractive().on('pointerdown', function() {
-      this.scene.rexUI.edit(this.textServer);
-    });
-    this.containers[1].add(this.textServer);
-
-    this.button = this.add.sprite(width / 2, height / 2 +60, 'login');
-    this.button.setOrigin(0.5, 0);
-   // this.button.setInteractive().on('pointerdown', function() {
-     // console.log(this);
-    //   }
-    this.containers[1].add(this.button);
+    let inputs = [
+      {'label': 'Username', 'name': 'username'},
+      {'label': 'Password', 'name': 'password'},
+      {'label': 'Homeserver URL', 'name': 'homeserver'},
+    ];
+    let buttons = [
+      {'label': 'Login', 'callback': alert}
+    ];
+    let form = new FormContainer(this, this.containers[1].width, this.containers[1].height, inputs, buttons);
+    this.add.existing(form);
+    this.containers[1].add(form);
   }
 }