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) } }