carpentry/client/js/game/Piece.js

import { Point } from "../libraries/spatial/Point.js";
import { Rectangle } from "../libraries/spatial/Rectangle.js";
import { Tween, Easing } from "../libraries/Tween.js";

export class Piece {
    constructor(state, type, x = 0, y = 0){
        this.position = new Point(x, y);
        this.state = state;
        this.type = type;
        this.rotation = 0
        this.targetRotation = 0
        this.flip = 1;
        this.targetFlip = 1;
        this.rotationTweenId = -1;
        this.flipTweenId = -1;
    }

    update(delta) {
    }

    draw(ctx) {
        ctx.fillStyle = "magenta"
        ctx.save();
        ctx.translate(this.position.x, this.position.y)
        ctx.rotate(this.rotation);
        ctx.scale(this.flip, 1)
        switch(this.type) {
            case "L":
                this.drawLShape(ctx)
                break;
            case "S":
                this.drawSShape(ctx)
                break;
            case "U":
                this.drawUShape(ctx)
                break;
        }
        ctx.restore();
    }

    drawLShape(ctx) {
        //L Piece
        
        ctx.beginPath();
        ctx.rect(-1 * this.state.tileWidth, -2 * this.state.tileWidth, this.state.tileWidth, this.state.tileWidth)
        ctx.fill();
        ctx.beginPath();
        ctx.rect(-1 * this.state.tileWidth, -1 * this.state.tileWidth, this.state.tileWidth, this.state.tileWidth)
        ctx.fill();
        ctx.beginPath();
        ctx.rect(-1 * this.state.tileWidth, 0, this.state.tileWidth, this.state.tileWidth)
        ctx.fill();
        ctx.beginPath();
        ctx.rect(-1 * this.state.tileWidth, 1 * this.state.tileWidth, this.state.tileWidth, this.state.tileWidth)
        ctx.fill();
        ctx.beginPath();
        ctx.rect(0, 1 * this.state.tileWidth, this.state.tileWidth, this.state.tileWidth)
        ctx.fill();
    }

    drawSShape(ctx) {
        //S Piece
        ctx.save();
        ctx.translate(- this.state.tileWidth / 2, - this.state.tileWidth / 2)
        ctx.beginPath();
        ctx.rect(-1 * this.state.tileWidth, -1 * this.state.tileWidth, this.state.tileWidth, this.state.tileWidth)
        ctx.fill();
        ctx.beginPath();
        ctx.rect(0, -1 * this.state.tileWidth, this.state.tileWidth, this.state.tileWidth)
        ctx.fill();
        ctx.beginPath();
        ctx.rect(0, 0, this.state.tileWidth, this.state.tileWidth)
        ctx.fill();
        ctx.beginPath();
        ctx.rect(0, 1 * this.state.tileWidth, this.state.tileWidth, this.state.tileWidth)
        ctx.fill();
        ctx.beginPath();
        ctx.rect(1 * this.state.tileWidth, 1 * this.state.tileWidth, this.state.tileWidth, this.state.tileWidth)
        ctx.fill();
        ctx.restore();
    }

    drawUShape(ctx) {
        //U Piece
        ctx.save();
        ctx.translate(- this.state.tileWidth / 2, 0)
        ctx.beginPath();
        ctx.rect(-1 * this.state.tileWidth, -1 * this.state.tileWidth, this.state.tileWidth, this.state.tileWidth)
        ctx.fill();
        ctx.beginPath();
        ctx.rect(-1 * this.state.tileWidth, 0, this.state.tileWidth, this.state.tileWidth)
        ctx.fill();
        ctx.beginPath();
        ctx.rect(0, 0, this.state.tileWidth, this.state.tileWidth)
        ctx.fill();
        ctx.beginPath();
        ctx.rect(1 * this.state.tileWidth, 0, this.state.tileWidth, this.state.tileWidth)
        ctx.fill();
        ctx.beginPath();
        ctx.rect(1 * this.state.tileWidth, -1 * this.state.tileWidth, this.state.tileWidth, this.state.tileWidth)
        ctx.fill();
        ctx.restore();
    }

    triggerFlip(tweenManager) {
        this.targetFlip *= -1;
        let tween = new Tween(this, {flip: this.targetFlip}, 300, Easing.Cubic.EaseOut, () => {
            this.flip = this.targetFlip;
        });
        tweenManager.cancel(this.flipTweenId)
        this.flipTweenId = tweenManager.add(tween);
    }

    triggerRotate(tweenManager) {
        this.targetRotation ++;

        let tween = new Tween(this, {rotation: this.targetRotation * Math.PI / 2}, 300, Easing.Cubic.EaseOut, () => {
            this.targetRotation %= 4;
            this.rotation = this.targetRotation * (Math.PI / 2)
        });
        tweenManager.cancel(this.rotationTweenId)
        this.rotationTweenId = tweenManager.add(tween);
    }

    mouseDown(event, mousePoint, tweenManager) {
        let centerBounds = new Rectangle(
            this.position.x - this.state.tileWidth,
            this.position.y - this.state.tileWidth,
            this.state.tileWidth * 2,
            this.state.tileWidth * 2,
            )

        let wideBounds = new Rectangle(
            this.position.x - this.state.tileWidth * 2,
            this.position.y - this.state.tileWidth * 2,
            this.state.tileWidth * 4,
            this.state.tileWidth * 4,
            )
        if(centerBounds.pointWithin(mousePoint)) {
            this.triggerRotate(tweenManager)
        } else if (wideBounds.pointWithin(mousePoint)) {
            this.triggerFlip(tweenManager);
        }
    }

    pointWithin(point) {
        let centerBounds = new Rectangle(
            this.position.x - this.state.tileWidth,
            this.position.y - this.state.tileWidth,
            this.state.tileWidth * 2,
            this.state.tileWidth * 2,
            )

        return centerBounds.pointWithin(point)
    }
}