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; } }