Call a function in Phaser from external HTML

[Gravix]

Hello, I'm fairly new to development with Phaser (TypeScript).

I've made a simple login screen in HTML, and I'm trying to make the "Log In" button which is in the external HTML call a function in my Phaser game.

This is the button that will call the function:

<button onclick="login()">Log In</button>

 

Where in my project should I write the function "login", and how can I call it when I click the button? Any help would be greatly appreciated. ?

I'm using this as a base for my project (I purchased his book): https://github.com/code0wl/Multiplayer-Phaser-game

[Fenopiù]

I've created the button via DOM in Phaser/Typescript.

In theory, you can put your function "login" wherever you want... but it have to exist BEFORE the browser see "<button onclick="login()">Log In</button>".

That's why I've followed the DOM solution.

[s4m_ur4i]

As Fenoliù said
You can call JS functions everywhere in Phaser if they were defined global and executed before your phaser game runs.

if you got a Phaser.Button and have a click event on it, just call a method like:

 

myButtonClickMethod() {

  login();
}

if your "login" function is available, it will execute it.

greetings.

[Gravix]

Thanks for the help, appreciate it! This has been resolved.

I forgot that I could just use the click events... Oops.

My solution was quite simple, in case anyone else has the same question:

this.loginButton = document.getElementById('login-btn') as HTMLLinkElement;
this.loginButton.addEventListener('click', (e) => this.login(e));