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

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

class Tile2 {
    constructor(board, x, y, tileType) {
        this.board = board
        this.scale = 1
        this.type = tileType
        this.position = new Point(x, y)
        this.isHovered = false
        this.isSelected = false
        this.baseColor = Object.values(Theme.Colors.TileColors)[this.type]
        this.currentColor = this.baseColor
        
    }

    draw(ctx) {
        ctx.fillStyle = this.currentColor

        ctx.save()
        ctx.translate(
            this.position.x * (Board.TILE_PADDING + Board.TILE_SIZE) + (Board.TILE_PADDING + Board.TILE_SIZE) / 2,
            this.position.y * (Board.TILE_PADDING + Board.TILE_SIZE) + (Board.TILE_PADDING + Board.TILE_SIZE) / 2)

        ctx.save()
        ctx.scale(this.scale, this.scale)
        ctx.beginPath()
        ctx.roundRect(-Board.TILE_SIZE / 2, -Board.TILE_SIZE / 2, Board.TILE_SIZE, Board.TILE_SIZE, 8)
        ctx.fill()

        if (this.isHovered || this.isSelected) {
            ctx.strokeStyle = Theme.Colors.ivory
            ctx.lineWidth = 4;
            ctx.beginPath()
            ctx.roundRect(-Board.TILE_SIZE / 2, -Board.TILE_SIZE / 2, Board.TILE_SIZE, Board.TILE_SIZE, 8)
            ctx.stroke()
        }

        ctx.restore()

        ctx.restore()
    }

    update(delta) {
    }

    onInputMove(position, isDown) {
        this.currentColor = this.baseColor
        if (this.isColliding(position)) {
            if(!this.isHovered) {
                this.onTileEnter()
            }
            document.body.style.cursor = "pointer"
            if (isDown) {
                this.board.selectTile(this)
            }
        } else {
            if(this.isHovered) {
                this.onTileLeave()
            }
        }
    }

    onTileEnter() {
        this.isHovered = true
    }

    onTileLeave() {
        this.isHovered = false
    }

    onInputDown(position) {
        if (this.isColliding(position)) {
            this.board.selectTile(this)
        }
    }

    onInputUp(position) {
        // if (this.isSelected && this.isColliding(position)) {
        //     this.board.deselectTile(this)
        // }
    }

    isColliding(position) {
        let top = this.position.y * (Board.TILE_SIZE + Board.TILE_PADDING)
        let left = this.position.x * (Board.TILE_SIZE + Board.TILE_PADDING)
        let bottom = top + Board.TILE_SIZE
        let right = left + Board.TILE_SIZE


        return position.x > left && position.x < right && position.y > top && position.y < bottom

    }
}

export default Tile2