HTML not showing on game screen

Phaser 3
1

I’m trying to develop a simple arcade game on browser, I’m trying to make a login form and try to add it to my scene. The element is loaded (the html element), but It’s not displaying on screen.

loginFrom.html

<style>
    @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
    *{
        font-family: 'Press Start 2P', cursive; ;
    }
    .login{
        background: transparent;
        border: 1px solid white;
        height: 257px;
        margin: 20px auto 0;
        width: 298px;
    }
    input[type="password"], input[type="text"]{
        background-color: black;
        border: 1px solid white;
        box-sizing: border-box;
        height: 39px;
        margin: 25px;
        padding-left: 37px;
        width: 240px;
    }
    input[type="submit"]{
        color: white;
        background: transparent;
        width: 120px;
        height: 35px;
        display: block;
        font-size: 16px;
        text-decoration: none;
        text-transform: uppercase;
        text-align: center;
        padding-top: 6px;
        margin: 29px 0 0 29px;
        position: relative;
        cursor:pointer;
        border: 1px solid white;
    }
</style>
<div class="login">
    <input type="text"  placeholder="Username" id="username" name="username">
    <input type="password" placeholder="Password" id="password" name="password">
    <input type="submit" value="Sign in" name="loginButton"> 
</div>

HomeScene.js

const { Scene } = require("phaser");

module.exports = class HomeScene extends Scene {
  constructor() {
    super(
        {
            key: "home",
            active: true,
        }
    );
  }

  init() {
  }

  preload() {
    this.load.html("loginForm", "/assets/components/loginForm.html");
    this.load.image("srolocTitle", "/assets/SROLOC.svg")
    this.load.image("background_static", "/assets/StaticBackground.png");
  }

  create() {
    console.log(this.cache);
    this.background = this.add.image(400,300,"background_static");
    this.srolocTitle = this.add.image(400,100, "srolocTitle");
    var loginForm = this.add.dom(400,600).createFromCache("loginForm");

    console.log(loginForm);
  }

  update() {

  }
};

I’m I missing something?

2

Please check game config

var config = {
    // ...
    parent: divId,
    dom: {
        createContainer: true
    },
    // ...
}
var game = new Phaser.Game(config);
1 Like