accounts-frontend/packages/app/components/ui/bsod/Box.ts

import Point from './Point';

const shadowLength = 2000; // TODO: should be calculated

export default class Box {
  public position: Point;
  private angle: number;
  public color: string;
  private readonly shadowColor: string;

  private _size: number;
  private _halfSize: number;

  constructor(
    size: number,
    position: Point,
    startRotate: number,
    color: string,
    shadowColor: string,
  ) {
    this.size = size;
    this.position = position;
    this.color = color;
    this.angle = startRotate;
    this.shadowColor = shadowColor;
  }

  public get size(): number {
    return this._size;
  }

  public set size(size: number) {
    this._size = size;
    this._halfSize = Math.floor(size / 2);
  }

  public get halfSize(): number {
    return this._halfSize;
  }

  get points(): { p1: Point; p2: Point; p3: Point; p4: Point } {
    const full = (Math.PI * 2) / 4;

    const p1: Point = {
      x: this.position.x + this._halfSize * Math.sin(this.angle),
      y: this.position.y + this._halfSize * Math.cos(this.angle),
    };

    const p2: Point = {
      x: this.position.x + this._halfSize * Math.sin(this.angle + full),
      y: this.position.y + this._halfSize * Math.cos(this.angle + full),
    };

    const p3: Point = {
      x: this.position.x + this._halfSize * Math.sin(this.angle + full * 2),
      y: this.position.y + this._halfSize * Math.cos(this.angle + full * 2),
    };

    const p4: Point = {
      x: this.position.x + this._halfSize * Math.sin(this.angle + full * 3),
      y: this.position.y + this._halfSize * Math.cos(this.angle + full * 3),
    };

    return { p1, p2, p3, p4 };
  }

  rotate(): void {
    const speed = (60 - this._halfSize) / 20;
    this.angle += speed * 0.002;
    this.position.x += speed;
    this.position.y += speed;
  }

  draw(ctx: CanvasRenderingContext2D): void {
    const { points } = this;
    ctx.beginPath();
    ctx.moveTo(points.p1.x, points.p1.y);
    ctx.lineTo(points.p2.x, points.p2.y);
    ctx.lineTo(points.p3.x, points.p3.y);
    ctx.lineTo(points.p4.x, points.p4.y);
    ctx.fillStyle = this.color;
    ctx.fill();
  }

  drawShadow(ctx: CanvasRenderingContext2D, light: Point): void {
    const boxPoints = this.points;
    const points: Array<{
      startX: number;
      startY: number;
      endX: number;
      endY: number;
    }> = [];

    Object.values(boxPoints).forEach(point => {
      const angle = Math.atan2(light.y - point.y, light.x - point.x);
      const endX = point.x + shadowLength * Math.sin(-angle - Math.PI / 2);
      const endY = point.y + shadowLength * Math.cos(-angle - Math.PI / 2);
      points.push({
        startX: point.x,
        startY: point.y,
        endX,
        endY,
      });
    });

    for (let i = points.length - 1; i >= 0; i--) {
      const n = i === 3 ? 0 : i + 1;
      ctx.beginPath();
      ctx.moveTo(points[i].startX, points[i].startY);
      ctx.lineTo(points[n].startX, points[n].startY);
      ctx.lineTo(points[n].endX, points[n].endY);
      ctx.lineTo(points[i].endX, points[i].endY);
      ctx.fillStyle = this.shadowColor;
      ctx.fill();
    }
  }
}