2023js13k/js/viewer/states/CreditsState.js

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

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

		this.textWrapper = new TextWrapper()
		this.headerFontSize = 48
		this.normalFontSize = 24
		this.debounce = 50
		this.alpha = 0
	}

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

	draw(ctx, scaledCanvas) {
		
		this.camera.draw(ctx, scaledCanvas, () => {
			ctx.fillStyle = Theme.Colors.ivory
			ctx.font = `${this.headerFontSize}px ${Theme.Fonts.Header}`
			ctx.textAlign = "center"
			this.textWrapper.fontSize = this.headerFontSize
			this.textWrapper.draw(ctx, `Game Over!`, {width: this.canvasBounds.width})
			ctx.save()
			ctx.translate(0, this.headerFontSize * 2)
			this.textWrapper.fontSize = this.normalFontSize
			ctx.font = `${this.normalFontSize}px ${Theme.Fonts.Header}`
			this.textWrapper.draw(ctx, `Developed By
			
			Midas
			and
			Nusha


			Thanks for Playing!

			js13k Games 2023 Entry
			`, {width: this.canvasBounds.width})
			ctx.restore()
		})

		// this.playButton.setPosition(this.canvasBounds.width / 2, this.canvasBounds.height * (7 / 8))
		// this.playButton.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) {
		if(this.debounce > 0) {
			this.debounce--
		}

		// this.camera.targetPosition.y = (this.canvasBounds.height / 2) - 100
		let fontScale = this.canvasBounds.width / 500
		this.headerFontSize = Math.min(Math.floor(48 * fontScale), 48)
		this.normalFontSize = Math.min(Math.floor(24 * fontScale), 24)
		this.camera.update(delta)

		AsyncTween.update()
	}

	enter() {
		this.alpha = 1
		this.registeredEvents = {}
		this.registeredEvents["keyup"] = this.onKeyUp.bind(this)
		this.registeredEvents["mouseup"] = this.onMouseUp.bind(this)

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

		this.debounce = 50
		// this.camera.targetPosition.y = 500
		this.camera.position.y = -500
		this.camera.targetPosition.y = -500

		AsyncTween.create(this, {alpha: 0}, 500, Easing.Quadratic.EaseOut).promise.then(() => {
			AsyncTween.create(this.camera, {position: {y: (this.canvasBounds.height / 2) - 100}, targetPosition: {y: (this.canvasBounds.height / 2) - 100}}, 4000, Easing.Linear.EaseNone).promise.then (() => {
				setTimeout(() => {
					this.stateMachine.transitionTo("mainmenu", true)
				}, 8000)
			})
		})
	}
	leave(target, leavingCallback) {
		for (let index in this.registeredEvents) {
			window.removeEventListener(index, this.registeredEvents[index])
		}
		AsyncTween.clear()
		AsyncTween.create(this, {alpha: 1}, 2000, Easing.Quadratic.EaseIn).promise.then(() => {
			leavingCallback()	
		})
	}

	onKeyUp(event) {
		if(this.debounce > 0) {
			return
		}
		this.stateMachine.transitionTo("mainmenu")
	}

	onMouseUp(event) {
		if(this.debounce > 0) {
			return
		}
		this.stateMachine.transitionTo("mainmenu")
	}
}