add layers

src/js/objects.js

@@ -1,3 +1,30 @@
+export class uLayer {
+  #name;
+  #objects;
+
+  constructor(name, objects) {
+    // TODO: check types
+    this.#name = name;
+    this.#objects = Array();
+
+    objects.forEach((object) => {
+      this.#objects.push(object);
+    });
+  }
+
+  add(object) {
+    this.#objects.push(object);
+  }
+
+  getName() {
+    return this.#name;
+  }
+
+  objects() {
+    return this.#objects;
+  }
+}
+
 class uObject {
   constructor(x, y, w, h) {
     this.x = x;

src/js/scene.js

@@ -1,5 +1,5 @@
 import { Pointer } from './pointer.js';
-import { uRect, uStrokeRect } from './objects.js';
+import { uLayer, uRect, uStrokeRect } from './objects.js';
 
 export class Scene {
   #canvas;
@@ -11,8 +11,12 @@ export class Scene {
     this.#context = context;
     this.#layers = Array();
 
-    this.addObject(new uRect(50, 50, 100, 100, 'red'));
-    this.addObject(new uStrokeRect(150, 150, 40, 40, 'green', 'blue', 5));
+    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);
   }
@@ -41,19 +45,23 @@ export class Scene {
     this.#context.lineWidth = 1;
     this.#context.strokeRect(5, 5, this.#canvas.width - 10, this.#canvas.height - 10);
 
-    // draw item
-    this.#layers.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(`=> ${item.constructor.name}`);
-      }
+    // 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.`);
+        }
+      });
     });
   }
 
@@ -63,15 +71,19 @@ export class Scene {
   }
 
   #drawStrokeRect(x, y, w, h, fillColor, strokeWidth, strokeColor) {
-      this.#drawRect(x, y, w, h, fillColor);
+    this.#drawRect(x, y, w, h, fillColor);
 
-      this.#context.strokeWidth = strokeWidth;
-      this.#context.strokeStyle = strokeColor;
-      this.#context.strokeRect(x, y, w, h);
+    this.#context.strokeWidth = strokeWidth;
+    this.#context.strokeStyle = strokeColor;
+    this.#context.strokeRect(x, y, w, h);
   }
 
-  addObject(object) {
-    this.#layers.push(object);
+  addLayer(layer) {
+    this.#layers.push(layer);
+  }
+
+  removeLayers() {
+    this.#layers = Array();
   }
 
   setScreenSize(w, h) {