primitive objects

src/js/objects.js

@@ -0,0 +1,25 @@
+class uObject {
+  constructor(x, y, w, h) {
+    this.x = x;
+    this.y = y;
+    this.width = w;
+    this.height = h;
+  }
+}
+
+export class uRect extends uObject {
+  constructor(x, y, w, h, fillColor = 'white') {
+    super(x, y, w, h);
+
+    this.fillColor = fillColor;
+  }
+}
+
+export class uStrokeRect extends uRect {
+  constructor(x, y, w, h, fillColor = 'white', strokeColor = 'black', strokeWidth = 1) {
+    super(x, y, w, h, fillColor);
+
+    this.strokeWidth = strokeWidth;
+    this.strokeColor = strokeColor;
+  }
+}

src/js/scene.js

@@ -1,17 +1,23 @@
 import { Pointer } from './pointer.js';
+import { uRect, uStrokeRect } from './objects.js';
 
 export class Scene {
   #canvas;
   #context;
-  #scene;
+  #layers;
 
   constructor(canvas, context, width, height) {
     this.#canvas = canvas;
     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));
+
     this.init(width, height);
   }
 
-  init = async (width, height) => {
+  init(width, height) {
     this.setScreenSize(width, height);
   }
 
@@ -35,9 +41,37 @@ export class Scene {
     this.#context.lineWidth = 1;
     this.#context.strokeRect(5, 5, this.#canvas.width - 10, this.#canvas.height - 10);
 
-    // draw rect in center
+    // draw item
-    this.#context.fillStyle = '#d44e52';
+    this.#layers.forEach((item) => {
-    this.#context.fillRect(this.#canvas.width / 2 - 50, this.#canvas.height / 2 - 50, 100, 100);
+      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}`);
+      }
+    });
+  }
+
+  #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);
+  }
+
+  addObject(object) {
+    this.#layers.push(object);
   }
 
   setScreenSize(w, h) {