Phaser3でSvelteのコンポーネントを表示する

以前Phaser3で作ったブロック崩しでは、
ゲームオーバーとクリア画面の要素をDOMで表示してるよ

ブロック崩し | ネモラムネ

nemoramune.com

その時にDOMを扱いやすくするために
Svelteを使いたいなと思って、PhaserのDOMElementのカスタムクラスを作ってみたよ

Phaser3で作ったdivをターゲットにしてSvelteのコンポーネントを表示しているよ

import type { ComponentProps, ComponentType } from 'svelte'

export class SvelteDOMElement<T extends ComponentType> extends Phaser.GameObjects.DOMElement {
	constructor(
		scene: Phaser.Scene,
		component: T,
		props: ComponentProps<InstanceType<T>>,
		x?: number,
		y?: number,
		style?: any
	) {
		const canvas = scene.game.canvas
		const centerX = canvas.width / 2
		const centerY = canvas.height / 2
		super(scene, x ?? centerX, y ?? centerY, 'div', style ?? 'width: 100%; height: 100%')
		scene.add.existing(this)
		new component({
			target: this.node,
			props: props
		})
	}
}

こんな風に呼び出してるよ

new SvelteDOMElement(
  this, 
  ResultView, 
  {
	  text: 'ゲームオーバー',
	  onClick: () => { this.scene.start('main') }
  }
)