visual fixes

ui/button.js

@@ -1,6 +1,9 @@
-class Button {
+import UI from "./ui";
+
+class Button extends UI {
     constructor(image) {
-        this.element = document.createElement("button");
+        super(document.createElement("button"), 50, 50);
+
         this.element.classList.add("shadow");
         this.element.style.backgroundImage = "url(images/" + image + ".svg)";
         this._boundClick = this._onClick.bind(this);
@@ -11,7 +14,8 @@ class Button {
         this.element.removeEventListener("click", this._boundClick);
         delete this._boundClick;
         delete this._handlers;
-        delete this.element;
+
+        super.destructor();
     }
     addHandler(handler) {
         this._handlers.push(handler);

ui/canvas.js

@@ -0,0 +1,31 @@
+import UI from "./ui.js";
+
+class Canvas extends UI {
+    constructor(width, height) {
+        super(document.createElement("canvas"), width, height);
+        this._ctx = this.element.getContext("2d");
+    }
+    clear() {
+        this.resetStyle();
+        this._ctx.clearRect(0, 0, this._width, this._height);
+    }
+    setFillColor(color) {
+        this._ctx.fillStyle = color.rgba();
+    }
+    resetStyle() {
+        this._ctx.fillStyle = "";
+    }
+    draw(shape) {
+        this._ctx.fillStyle = shape.color.rgba();
+        shape.draw(this._ctx);
+        this.resetStyle();
+    }
+    setSize(width, height) {
+        super.setSize(width, height);
+
+        this.element.width = width;
+        this.element.height = height;
+    }
+}
+
+export default Canvas;

ui/panel.js

@@ -1,19 +1,14 @@
-class Panel {
+import UI from "./ui";
+
+class Panel extends UI {
     constructor(width, height) {
-        this._width = width;
-        this._height = height;
+        super(document.createElement("div"), width, height);
+
         this._hidden = true;
-        this.element = document.createElement("div");
         this.element.classList.add("shadow");
         this.element.classList.add("hidden");
     }
 
-    setPosition(x, y) {
-        this.element.style.position = "absolute";
-        this.element.style.top = y + "px";
-        this.element.style.left = x + "px";
-    }
-
     toggle() {
         if (this._hidden) {
             this.show();

ui/ui.js

@@ -0,0 +1,24 @@
+class UI {
+    constructor(el, width, height) {
+        this.element = el;
+        this.setSize(width, height);
+    }
+    destructor() {
+        delete this.element;
+    }
+
+    setPosition(x, y) {
+        this.element.style.position = "absolute";
+        this.element.style.top = y + "px";
+        this.element.style.left = x + "px";
+    }
+
+    setSize(width, height) {
+        this._width = width;
+        this._height = height;
+        this.element.style.width = width + "px";
+        this.element.style.height = height + "px";
+    }
+}
+
+export default UI;