embedding a phaser 3 game into an existing mithril website

Question

I have been trying to get phaser 3 to work in an existing mithril website. All of the existing phaser 3 examples seem to work 'by magic'. There is no javascript code that mounts the phaser game into your DOM. Searching gets me nowhere. Even the 'modern' tutorial seems to just load the js and boom there's a game.

How do I incorporate a phaser game into an existing mithril framework? I can mount a pixi canvas as simply as this:

import * as PIXI from 'pixi.js'

app = new PIXI.Application 800, 600,
  backgroundColor: 0x1099bb

basicText = new PIXI.Text('Basic text in pixi')
basicText.x = 30
basicText.y = 90

app.stage.addChild basicText

export class BPScreen
  view: ->
    m '#balloon-pop',
      oncreate: ({ dom })->
        dom.appendChild app.view

Can I accomplish this with Phaser 3?

Answer 1

In the config for the phaser game there is a property called parent where you can pass the id of a parent element, such as a div.

So an example config is:

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    ...
    [other config options]
};

then in the HTML you would have something like

<div id="gameDiv"></div>