diff --git a/src/js/objects.js b/src/js/objects.js new file mode 100644 index 0000000..ee54a8a --- /dev/null +++ b/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; + } +} diff --git a/src/js/scene.js b/src/js/scene.js index 84a36e9..141faa5 100644 --- a/src/js/scene.js +++ b/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 - this.#context.fillStyle = '#d44e52'; - this.#context.fillRect(this.#canvas.width / 2 - 50, this.#canvas.height / 2 - 50, 100, 100); + // 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}`); + } + }); + } + + #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) {