ujs/src/objects.js

class DefaultObject {
  constructor(x, y, w, h) {
    this.x = x;
    this.y = y;
    this.width = w;
    this.height = h;
    this.ticker = null;
  }
}

export class Empty {
  constructor() {
    this.ticker = null;
  }
}

export class Rect extends DefaultObject {
  constructor(x, y, w, h, fillColor = 'white') {
    super(x, y, w, h);

    this.fillColor = fillColor;
  }

  draw(context, debug = false) {
    context.fillStyle = this.fillColor;
    context.fillRect(this.x, this.y, this.width, this.height);

    if (debug) {
      drawDebug(context, this.x, this.y, this.width, this.height);
    }
  }
}

export class StrokeRect extends Rect {
  constructor(x, y, w, h, fillColor = 'white', strokeColor = 'black', strokeWidth = 1) {
    super(x, y, w, h, fillColor);

    this.strokeWidth = strokeWidth;
    this.strokeColor = strokeColor;
  }

  draw(context, debug = false) {
    context.fillStyle = this.fillColor;
    context.fillRect(this.x, this.y, this.width, this.height);

    context.lineWidth = this.strokeWidth;
    context.strokeStyle = this.strokeColor;
    context.strokeRect(this.x, this.y, this.width, this.height);

    if (debug) {
      drawDebug(context, this.x, this.y, this.width, this.height);
    }
  }
}

export class Sprite {
  #loaded;
  #image;

  constructor(src = null, x, y) {
    this.x = x;
    this.y = y;
    this.width = null;
    this.height = null;
    this.angle = 0;
    this.src = src;
    this.srcOld = this.src;
    this.ticker = null;

    this.loaded = false;

    this.#image = new Image();
    this.#image.onload = this.#onload();

    this.#image.src = this.src;
  }

  #onload() {
    this.width = this.#image.width;
    this.height = this.#image.height;

    this.loaded = true;
  }

  image() {
    return this.#image;
  }

  draw(context, debug = false) {
    if (this.loaded != true) {
      return -1;
    }

    if (this.srcOld != this.src) {
      this.srcOld = this.src;
      this.#image.src = this.src;
    }

    context.save();
    context.translate(this.x + this.#image.width / 2, this.y + this.#image.height / 2);
    context.rotate((this.angle * Math.PI) / 180);
    context.drawImage(this.#image, -this.#image.width / 2, -this.#image.height / 2);
    context.restore();

    if (debug) {
      drawDebug(context, this.x, this.y, this.#image.width, this.#image.height);
    }
  }
}

export class TiledSprite extends Sprite {
  #image;

  constructor(src = null, x, y, only = null) {
    super(src, x, y);

    this.src = src;
    this.srcOld = this.src;

    this.only = only;
  }

  draw(context, debug = false) {
    if (this.loaded != true) {
      return -1;
    }

    if (this.srcOld != this.src) {
      this.srcOld = this.src;
      this.#image.src = this.src;
    }

    // draw single image
    context.drawImage(this.image(), this.x, this.y);

    let copyUpByY = Math.ceil(this.y / this.image().height);
    let copyUpByX = Math.ceil(this.y / this.image().width);
    let copyDownByY = Math.ceil(
      (context.canvas.height - this.y - this.image().height) / this.image().height
    );
    let copyDownByX = Math.ceil(
      (context.canvas.width - this.y - this.image().width) / this.image().width
    );

    for (let iy = 0; iy <= copyUpByY; iy++) {
      if (copyUpByY === Infinity) {
        break;
      }

      for (let ix = 0; ix <= copyUpByX + 1; ix++) {
        if (copyUpByX === Infinity) {
          break;
        }

        switch (this.only) {
          case 'y':
            context.drawImage(this.image(), this.x, this.y - this.image().height * iy);
            break;
          case 'x':
            context.drawImage(this.image(), this.x - this.image().width * ix, this.y);
            break;
          case null:
          default:
            context.drawImage(
              this.image(),
              this.x + this.image().width * ix,
              this.y - this.image().height * iy
            );
            context.drawImage(
              this.image(),
              this.x - this.image().width * ix,
              this.y - this.image().height * iy
            );
            break;
        }
      }
    }

    for (let iy = 0; iy <= copyDownByY; iy++) {
      if (copyDownByY === Infinity) {
        break;
      }

      for (let ix = 0; ix <= copyUpByX + 1; ix++) {
        if (copyUpByX === Infinity) {
          break;
        }

        switch (this.only) {
          case 'y':
            context.drawImage(this.image(), this.x, this.y + this.image().height * iy);
            break;
          case 'x':
            context.drawImage(this.image(), this.x + this.image().width * ix, this.y);
            break;
          case null:
          default:
            context.drawImage(
              this.image(),
              this.x + this.image().width * ix,
              this.y + this.image().height * iy
            );
            context.drawImage(
              this.image(),
              this.x - this.image().width * ix,
              this.y + this.image().height * iy
            );
            break;
        }
      }
    }
  }
}

function drawDebug(context, x, y, w, h) {
  context.font = '16px Monogram';
  context.fillStyle = '#ffffff';
  context.fillText(`${x}x${y}`, x + 1, y - 2);
  context.fillStyle = '#000000';
  context.fillText(`${x}x${y}`, x, y - 3);
  context.lineWidth = 1;
  context.strokeStyle = 'blue';
  context.strokeRect(x, y, w, h);
}