2023js13k/js/viewer/states/MainMenuState.js

import { Camera } from "../../libraries/Camera.js"
import { Point } from "../../libraries/spatial/Point.js"
import { DomButton } from "../../libraries/components/DomButton.js"
import { Theme } from "../../libraries/components/Theme.js"
import { Save } from "../../libraries/Save.js"
import AsyncTween from "../../libraries/AsyncTween.js"
import { Easing } from "../../libraries/Easing.js"
import TextWrapper from "../../libraries/TextWrapper.js"

export default class MainMenuState {
	constructor(view) {
		this.view = view
		this.stateMachine = view.stateMachine
		this.canvasBounds = null
		this.camera = new Camera()
		this.camera.scale = new Point(1, 1)

		this.registeredEvents = {}

		this.playButton = new DomButton(50, 50, view.element, "begin")
		this.wasChanged = false
		this.save = new Save()
		this.textWrapper = new TextWrapper()

		this.deleteSaveButton = new DomButton(
			50,
			50,
			view.element,
			"delete save",
			"skipbutton"
		)

		this.muteButton = new DomButton(0, 0, view.element, "", "mutebutton")

		this.alpha = 0
	}

	init(scaledCanvas) {
		this.canvasBounds = scaledCanvas.bounds
	}

	draw(ctx, scaledCanvas) {
		let fontScale = this.canvasBounds.width / 500

		ctx.fillStyle = Theme.Colors.ivory
		const fontSize = Math.min(Math.floor(48 * fontScale), 48)
		ctx.font = `600 ${fontSize}px ${Theme.Fonts.Header}`
		ctx.textAlign = "center"
		this.camera.draw(ctx, scaledCanvas, () => {
			this.textWrapper.fontSize = fontSize
			ctx.save()
			ctx.translate(0, -this.canvasBounds.height / 2 + fontSize + 40)
			this.textWrapper.draw(ctx, "Marco Polo Returns", {width: this.canvasBounds.width})
			ctx.restore()
		})

		this.playButton.setPosition(
			this.canvasBounds.width / 2,
			this.canvasBounds.height - 200
		)
		this.playButton.draw(ctx, scaledCanvas)

		this.deleteSaveButton.setPosition(
			this.canvasBounds.width  / 2,
			this.canvasBounds.height - 100
		)
		this.deleteSaveButton.draw(ctx, scaledCanvas)

		this.muteButton.setPosition(this.canvasBounds.width - 20, 20)
		this.muteButton.draw(ctx, scaledCanvas)

		ctx.fillStyle = `rgb(0,0,0,${this.alpha})`
		ctx.beginPath()
		ctx.rect(0,0, this.canvasBounds.width, this.canvasBounds.height)
		ctx.fill()
	}

	update(delta) {
		this.playButton.update(delta)
		this.deleteSaveButton.update(delta)
		this.muteButton.update(delta)
		this.camera.update(delta)
		AsyncTween.update()
	}

	enter() {
		this.registeredEvents["resize"] = this.onResize.bind(this)
		this.registeredEvents["keyup"] = this.onKeyUp.bind(this)

		for (let index in this.registeredEvents) {
			window.addEventListener(index, this.registeredEvents[index])
		}

		this.playButton.attach()
		this.playButton.onClick(this.goToGame.bind(this))

		this.deleteSaveButton.attach()
		this.deleteSaveButton.onClick(this.deleteSave.bind(this))

		this.muteButton.attach()
		this.muteButton.onClick(this.mute.bind(this))
		AsyncTween.create(this, {alpha: 0}, 500, Easing.Quadratic.EaseOut)
	}
	leave(target, leavingCallback) {
		for (let index in this.registeredEvents) {
			window.removeEventListener(index, this.registeredEvents[index])
		}
		this.registeredEvents = {}

		AsyncTween.clear()
		AsyncTween.create(this, {alpha: 1, playButton: {alpha: 0}, deleteSaveButton: {alpha: 0}, muteButton: {alpha: 0}}, 500, Easing.Quadratic.EaseIn).promise.then(() => {
			this.playButton.remove()
			this.deleteSaveButton.remove()
			this.muteButton.remove()
			leavingCallback()
		})
	}

	onResize() { }

	onKeyUp(event) {
		switch (event.code) {
			case "Digit1":
				this.stateMachine.transitionTo("matchthree")
				break
			case "Digit2":
				this.stateMachine.transitionTo("matchthree2", true)
				break
			case "Digit0":
				this.stateMachine.transitionTo("credits", true)
				break
			case "Enter":
				this.goToGame()
				break
		}
	}

	goToGame() {
		this.stateMachine.transitionTo("matchthree2")
	}

	deleteSave() {
		if (confirm("Are you sure you want to delete your save data?")) {
			this.save.delete()
			alert("Save data deleted")
		}
	}

	mute() {
		if(this.muteButton.element.className == "mutebutton") {
			this.muteButton.element.className = "unmutebutton"
			this.view.isMuted = true
		} else {
			this.muteButton.element.className = "mutebutton"
			this.view.isMuted = false
		}

		
	}
}