2023js13k/js/libraries/components/matchthree/Button.js

import { Theme } from "../Theme.js"
import Tile from "./Tile.js"
import { Point } from "../../spatial/Point.js"

class Button {
    constructor(scene, position) {
        this.scene = scene
        this.position = position
        this.offset = { x: 0, y: 0 }
        this.baseColor = Theme.Colors.ivory
        this.currentColor = Theme.Colors.ivory
        this.hoverColor = Theme.Colors.darkred
        this.activatedColor = Theme.Colors.tangerine
        this.wasClickedOn = false
    }

    setOffset(offset) {
        this.offset = offset
    }

    setButtonCount(count) {
        this.buttonCount = count
    }


    draw(ctx) {
        ctx.fillStyle = this.currentColor
        ctx.save()
        ctx.translate(this.offset.x, this.offset.y)

        ctx.beginPath()
        if (!this.isVertical) {
            ctx.arc(0, this.position.x * (Button.Size + Button.PADDING), Button.Size / 2, 0, 2 * Math.PI)
        } else {
            ctx.arc(this.position.x * (Button.Size + Button.PADDING), 0, Button.Size / 2, 0, 2 * Math.PI)
        }
        ctx.fill()

        ctx.restore()
    }

    setButtonSize(newSize) {
        if(Button.Size != newSize) {
            Button.Size = newSize
        }
    }

    onInputMove(position, isDown) {
        if(this.currentColor == this.activatedColor) {
            return
        } else {
            this.currentColor = this.baseColor
        }
        if(this.isColliding(position)) {
            this.currentColor = this.hoverColor
            document.body.style.cursor = "pointer"
            if(isDown) {
                this.currentColor = this.activatedColor
            }
        }
    }

    onInputDown(position) {
        if(this.isColliding(position)) {
            this.wasClickedOn = true
            this.currentColor = this.activatedColor
        }
    }

    onInputUp(position) {
        if(this.isColliding(position)) {
            this.currentColor = this.hoverColor
        } else if(this.wasClickedOn) {
            this.currentColor = this.baseColor
        }
        this.wasClickedOn = false
    }

    isColliding(position) {
        let centerX = this.offset.x + this.position.x * (Button.Size + Button.PADDING)
        let centerY = this.offset.y
        let radius = Button.Size / 2
        if(!this.isVertical) {
            centerX = this.offset.x
            centerY = this.offset.y + this.position.x * (Button.Size + Button.PADDING)
        }
        let distance = new Point(centerX, centerY).distanceTo(new Point(position.x, position.y))

        return distance <= radius
    }

    onResize(canvasBounds, boardSize) {
        let narrowest = canvasBounds.width
        this.isVertical = true
        if (canvasBounds.width > canvasBounds.height) {
            narrowest = canvasBounds.height
            this.isVertical = false
        }

        this.setButtonSize(Math.min(72, Math.max(48, Math.floor((narrowest - boardSize.x * 4) / boardSize.x))))
        const buttonOffset = {
            x: -(this.buttonCount / 2 - 0.5) * (Button.Size + Button.PADDING),
            y: -2.5 * (Tile.Size + Tile.PADDING) + (Button.Size + Button.PADDING) / 2 + canvasBounds.height / 2
        }
        if (!this.isVertical) {
            buttonOffset.x = 3.5 * (Tile.PADDING + Tile.Size) - canvasBounds.width / 2 - (1.5 * (Button.Size / 2 + Button.PADDING))
            buttonOffset.y = -2.5 * (Button.Size + Button.PADDING)
        }
        this.setOffset(buttonOffset)
        
    }
}

Button.PADDING = 4
Button.Size = 72

export default Button