ujs/src/js/scene.js

import { Pointer } from './pointer.js';
import { uLayer, uRect, uStrokeRect } from './objects.js';

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

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

    let layer = new uLayer('Entry', [
      new uRect(50, 50, 100, 100, 'red'),
      new uStrokeRect(150, 150, 40, 40, 'green', 'blue', 5),
    ]);

    this.addLayer(layer);

    this.init(width, height);
  }

  init(width, height) {
    this.setScreenSize(width, height);
  }

  #clearCanvas() {
    this.#context.clearRect(0, 0, this.#canvas.width, this.#canvas.height);
  }

  run() {
    // clear canvas
    this.#clearCanvas();
    this.#scene();
  }

  #scene() {
    // fill canvas
    this.#context.fillStyle = '#523c4e';
    this.#context.fillRect(0, 0, this.#canvas.width, this.#canvas.height);

    // draw border
    this.#context.strokeStyle = '#8bd0ba';
    this.#context.lineWidth = 1;
    this.#context.strokeRect(5, 5, this.#canvas.width - 10, this.#canvas.height - 10);

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

          case 'uStrokeRect':
            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, strokeWidth, strokeColor) {
    this.#drawRect(x, y, w, h, fillColor);

    this.#context.strokeWidth = 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;
  }
}