Use proper rexUI classes

src/frontend/containers/form.js

@@ -14,18 +14,15 @@
  */
 
 import Phaser from 'phaser';
+import Button from 'phaser3-rex-plugins/plugins/button.js';
+import InputText from 'phaser3-rex-plugins/plugins/inputtext.js';
 
 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};
-
+  constructor(scene, width, height, inputs = [], buttons = [], containerX = 0, containerY = 0, children = []) {
     super(scene, containerX, containerY, children);
     this.setSize(width, height);
 
+    this.inputs = {};
     let y = 0;
 
     inputs.forEach(input => {
@@ -33,25 +30,29 @@ class FormContainer extends Phaser.GameObjects.Container {
       label.setOrigin(0, 0);
       this.add(label);
 
-      let text = scene.add.text(this.width, y, '', options);
+      if (typeof input.config === 'undefined') {
+        input.config = {};
+      }
+      let text = new InputText(scene, this.width, y, 150, 36, input.config);
       text.setOrigin(1, 0);
-      text.setInteractive().on('pointerdown', function() {
-        scene.rexUI.edit(text);
-      });
+      scene.add.existing(text);
       this.add(text);
+      this.inputs[input.name] = text;
 
-      y += options.fixedHeight;
+      y += 36;
     });
 
     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;
+      if (typeof button.config === 'undefined') {
+        button.config = {};
+      }
+      let text = scene.add.text(0, y, button.label);
+      text.setOrigin(0, 0);
+      this.add(text);
+      let buttonOverlay = new Button(text, button.config);
+      buttonOverlay.on('click', button.callback);
+
+      y += 36;
     });
   }
 }

src/frontend/game.js

@@ -14,7 +14,6 @@
  */
 
 import Phaser from 'phaser';
-import RexUIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin';
 import SplashScene from './scenes/splash';
 import LoginScene from './scenes/login';
 import './game.css';
@@ -29,15 +28,6 @@ class Game extends Phaser.Game {
       dom: {
         createContainer: true
       },
-      plugins: {
-        scene: [
-          {
-            key: 'rexUI',
-            plugin: RexUIPlugin,
-            mapping: 'rexUI'
-          }
-        ]
-      },
       scale: {
         mode: Phaser.Scale.FIT,
         autoCenter: Phaser.Scale.CENTER_BOTH