ujs/src/js/objects.js

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

export class Rect extends Object {
  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.src = src;
    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;
    }

    context.drawImage(this.image(), this.x, this.y);

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

function drawDebug(context, x, y, w, h) {
  context.font = '14px serif';
  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);
}