import "./index.css"

import cabin from "./assets/cabin.webp"
import lounge from "./assets/lounge.webp"
import { DissolveTransition, PhaserBGEngine } from "../src"

// create a canvas
const canvas = document.createElement("canvas")
canvas.style.display = "none"
document.body.appendChild(canvas)

// alternate example, where there isn't an existing Phaser game.
const engine = new PhaserBGEngine(
	{
		cabin,
		lounge,
	},
	{
		type: Phaser.WEBGL,
		autoResizeGame: true,
		autoResizeBGs: true,
		canvas,
		onLoaded: () => {
			canvas.style.display = "block"
		},
	}
)

window.addEventListener("keydown", (e) => {
	if (e.key === "a") {
		engine.transition("cabin", {
			duration: 500,
		})
	} else if (e.key === "d") {
		engine.transition("lounge", DissolveTransition(engine.scene, 500))
	} else if (e.key === "s") {
		engine.transitionColor(0xffffff, {
			duration: 500,
		})
	} else if (e.key === "w") {
		engine.transitionColor(0x000000, DissolveTransition(engine.scene, 500))
	}
})