2023js13k/js/viewer/states/MatchThreeState2.js

import { Camera } from "../../libraries/Camera.js"
import { Point } from "../../libraries/spatial/Point.js"
import { Theme } from "../../libraries/components/Theme.js"
import { Save } from "../../libraries/Save.js"
import "../../libraries/RoundRectPolyfill.js"
import AsyncTween from "../../libraries/AsyncTween.js"
import { Easing } from "../../libraries/Easing.js"
import Board from "../../libraries/components/matchthree/Board.js"

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

        this.save = new Save()
        this.debug = true

        this.mousePosition = new Point(0, 0)
        this.mouseButton = -1

        this.alpha = 1

        this.board = new Board()
    }

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

        this.buttonCount = 6
        
    }

    enter() {
        this.registeredEvents = {}
        this.registeredEvents["resize"] = this.onResize.bind(this)
        this.registeredEvents["keydown"] = this.onKeyDown.bind(this)
        this.registeredEvents["keyup"] = this.onKeyUp.bind(this)
        this.registeredEvents["mousedown"] = this.onMouseDown.bind(this)
        this.registeredEvents["mousemove"] = this.onMouseMove.bind(this)
        this.registeredEvents["mouseup"] = this.onMouseUp.bind(this)
        this.registeredEvents["touchstart"] = this.onTouchStart.bind(this)
        this.registeredEvents["touchmove"] = this.onTouchMove.bind(this)
        this.registeredEvents["touchend"] = this.onTouchEnd.bind(this)

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

        this.camera.targetPosition.x = 0
        this.camera.targetPosition.y = 0
        this.camera.position.x = 0
        this.camera.position.y = 0

        this.board.init(this.canvasBounds)
        this.alpha = 1
        AsyncTween.create(this, { alpha: 0 }, 500, Easing.Quadratic.EaseOut)
    }

    leave(target, leavingCallback) {
        for (let index in this.registeredEvents) {
            window.removeEventListener(index, this.registeredEvents[index])
        }

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

    draw(ctx, scaledCanvas) {
        this.canvasBounds = scaledCanvas.bounds
        ctx.fillStyle = Theme.Colors.black
        ctx.fillRect(0, 0, this.canvasBounds.width, this.canvasBounds.height)

        this.camera.draw(ctx, scaledCanvas, () => {
            if (this.debug) {
                ctx.strokeStyle = Theme.Colors.seagreen
                ctx.beginPath()
                ctx.moveTo(0, -this.canvasBounds.height)
                ctx.lineTo(0, this.canvasBounds.height)
                ctx.stroke()

                ctx.beginPath()
                ctx.moveTo(-this.canvasBounds.width, 0)
                ctx.lineTo(this.canvasBounds.width, 0)
                ctx.stroke()

                ctx.beginPath()
                ctx.moveTo(-this.canvasBounds.width / 4, -this.canvasBounds.height / 4)
                ctx.lineTo(this.canvasBounds.width / 4, -this.canvasBounds.height / 4)
                ctx.stroke()

                ctx.beginPath()
                ctx.moveTo(-this.canvasBounds.width / 4, this.canvasBounds.height / 4)
                ctx.lineTo(this.canvasBounds.width / 4, this.canvasBounds.height / 4)
                ctx.stroke()

                this.board.draw(ctx)

                ctx.fillStyle = "rgba(120, 120, 120, 0.5)"
                ctx.strokeStyle = "rgba(120, 120, 120, 0.9)"
                ctx.strokeWidth = 2
                ctx.beginPath()
                ctx.arc(this.mousePosition.x, this.mousePosition.y, 10, 0, 2 * Math.PI)
                ctx.fill()
                ctx.stroke()
            }
        })

        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.camera.update(delta)
        this.board.update(delta)
        AsyncTween.update()
    }

    sceneComplete() {
        this.stateMachine.transitionTo("credits", true)
    }

    onResize() {
        this.board.onResize(this.canvasBounds)
    }

    onKeyDown(event) {
    }

    onKeyUp(event) {
        switch (event.code) {
            case "Escape":
                this.stateMachine.transitionTo("mainmenu", true)
                break
            case "Digit0":
                this.stateMachine.transitionTo("credits", true)
                break
        }
    }
    onMouseDown(event) {
        this.mouseButton = event.button
        this.onInputDown()
    }

    onMouseMove(event) {
        let position = this.camera.screenToWorld({ x: event.clientX, y: event.clientY })
        this.mousePosition.x = position.x
        this.mousePosition.y = position.y
        this.onInputMove(this.mouseButton != -1)
    }

    onMouseUp(event) {
        this.mouseButton = -1
        this.onInputUp()
    }

    onTouchStart(event) {
        let touch = event.touches[0]
        let position = this.camera.screenToWorld({ x: touch.clientX, y: touch.clientY })
        this.mousePosition.x = position.x
        this.mousePosition.y = position.y
        this.onInputDown()
        this.onInputMove(true)
    }

    onTouchEnd(event) {
        let touch = event.touches[0]
        let position = this.camera.screenToWorld({ x: touch.clientX, y: touch.clientY })
        this.mousePosition.x = position.x
        this.mousePosition.y = position.y
        this.onInputUp()
    }

    onTouchMove(event) {
        let touch = event.touches[0]
        let position = this.camera.screenToWorld({ x: touch.clientX, y: touch.clientY })
        this.mousePosition.x = position.x
        this.mousePosition.y = position.y
        this.onInputMove(true)
    }

    onInputDown() {
        this.board.onInputDown(this.mousePosition)
    }

    onInputUp() {
        this.board.onInputUp(this.mousePosition)
    }

    onInputMove(isDown) {
        document.body.style.cursor = "default"
        this.board.onInputMove(this.mousePosition, isDown)
    }
}