new draw logic

src/js/.gitignore

@@ -0,0 +1 @@
+game.js

src/js/objects.js

@@ -14,6 +14,15 @@ export class Rect extends Object {
 
     this.fillColor = fillColor;
   }
+
+  draw(context, debug = false) {
+    context.fillStyle = this.fillColor;
+    context.fillRect(this.x, this.y, this.width, this.height);
+
+    if (debug) {
+      drawDebug(context, this.x, this.y, this.width, this.height);
+    }
+  }
 }
 
 export class StrokeRect extends Rect {
@@ -23,4 +32,71 @@ export class StrokeRect extends Rect {
     this.strokeWidth = strokeWidth;
     this.strokeColor = strokeColor;
   }
+
+  draw(context, debug = false) {
+    context.fillStyle = this.fillColor;
+    context.fillRect(this.x, this.y, this.width, this.height);
+
+    context.lineWidth = this.strokeWidth;
+    context.strokeStyle = this.strokeColor;
+    context.strokeRect(this.x, this.y, this.width, this.height);
+
+    if (debug) {
+      drawDebug(context, this.x, this.y, this.width, this.height);
+    }
+  }
+}
+
+export class Sprite {
+  #loaded;
+  #image;
+
+  constructor(src = null, x, y) {
+    this.x = x;
+    this.y = y;
+    this.width = null;
+    this.height = null;
+
+    this.src = src;
+    this.loaded = false;
+
+    this.#image = new Image();
+    this.#image.onload = this.#onload();
+
+    this.#image.src = this.src;
+  }
+
+  #onload() {
+    this.width = this.#image.width;
+    this.height = this.#image.height;
+
+    this.loaded = true;
+  }
+
+  image() {
+    return this.#image;
+  }
+
+  draw(context, debug = false) {
+    if (this.loaded != true) {
+      return -1;
+    }
+
+    context.drawImage(this.image(), this.x, this.y);
+
+    if (debug) {
+      drawDebug(context, this.x, this.y, this.#image.width, this.#image.height);
+    }
+  }
+}
+
+function drawDebug(context, x, y, w, h) {
+  context.font = '14px serif';
+  context.fillStyle = '#ffffff';
+  context.fillText(`${x}x${y}`, x + 1, y - 2);
+  context.fillStyle = '#000000';
+  context.fillText(`${x}x${y}`, x, y - 3);
+  context.lineWidth = 1;
+  context.strokeStyle = 'blue';
+  context.strokeRect(x, y, w, h);
 }

src/js/scene.js

@@ -33,42 +33,60 @@ export class Scene {
     // 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:
+        if (typeof item.draw == 'function') {
+          item.draw(this.#context, true);
+        } else {
           console.log(`⛔ Error display '${item.constructor.name}' object.`);
         }
+
+        // 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;
+
+        //   case 'Sprite':
+        //     this.#drawSprite(item);
+        //     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);
-  }
+  // #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);
+  // #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);
-  }
+  //   this.#context.lineWidth = strokeWidth;
+  //   this.#context.strokeStyle = strokeColor;
+  //   this.#context.strokeRect(x, y, w, h);
+  // }
+
+  // #drawSprite(image) {
+  //   if (image.loaded != true) {
+  //     return -1;
+  //   }
+
+  //   this.#context.drawImage(image.image(), image.x, image.y);
+  // }
 
   addLayer(layer) {
     this.#layers.push(layer);