ujs/src/js/scene.js

import { Pointer } from './pointer.js';

export class Scene {
  #canvas;
  #context;
  #layers;

  constructor(canvas, context, width, height) {
    this.#canvas = canvas;
    this.#context = context;
    this.#layers = Array();

    this.setScreenSize(width, height);
  }

  run() {
    this.#update();
    this.#draw();
  }

  #update() {
    // read layers & draw items
    this.#layers.forEach((layer) => {
      layer.objects().forEach((item) => {
        if (typeof item.ticker == 'function') {
          item.ticker();
        }
      });
    });
  }

  #draw() {
    // read layers & draw items
    this.#layers.forEach((layer) => {
      layer.objects().forEach((item) => {
        switch (item.constructor.name) {
          case 'Rect':
            this.#drawRect(item.x, item.y, item.width, item.height, item.fillColor);
            break;

          case 'StrokeRect':
            this.#drawStrokeRect(
              item.x,
              item.y,
              item.width,
              item.height,
              item.fillColor,
              item.strokeColor,
              item.strokeWidth
            );
            break;

          default:
            console.log(`⛔ Error display '${item.constructor.name}' object.`);
        }
      });
    });
  }

  #drawRect(x, y, w, h, fillColor) {
    this.#context.fillStyle = fillColor;
    this.#context.fillRect(x, y, w, h);
  }

  #drawStrokeRect(x, y, w, h, fillColor, strokeColor, strokeWidth) {
    this.#drawRect(x, y, w, h, fillColor);

    this.#context.lineWidth = strokeWidth;
    this.#context.strokeStyle = strokeColor;
    this.#context.strokeRect(x, y, w, h);
  }

  addLayer(layer) {
    this.#layers.push(layer);
  }

  removeLayers() {
    this.#layers = Array();
  }

  setScreenSize(w, h) {
    this.#canvas.width = w;
    this.#canvas.height = h;
  }
}

export class SceneLayer {
  #objects;

  constructor(name, objects = Array()) {
    // TODO: check types
    this.#objects = Array();

    objects.forEach((object) => {
      this.#objects.push(object);
    });
  }

  add(object) {
    this.#objects.push(object);
  }

  objects() {
    return this.#objects;
  }
}