hopefully final bugfix, new shape - triangle, menu suppose to work now

main.js

@@ -13,9 +13,6 @@ document.body.innerHTML = "";
 const maxPanelWidth = 300;
 const panelPaddingTop = 90;
 
-let random = true;
-let amountOfShapes = 100;
-
 Shape.setBounding(window.innerWidth, window.innerHeight);
 let canvas = new Canvas(window.innerWidth, window.innerHeight);
 
@@ -37,12 +34,18 @@ clear.addHandler(canvas.clear.bind(canvas));
 window.addEventListener("resize", onWindowResize, false);
 
 let form = new Form(panelWidth, panelHeight - panelPaddingTop);
-let randomBox = new SwitchBox(random, 40, 60);
+let randomBox = new SwitchBox(true, 40, 20);
 let amountBox = new NumericBox(100, 30);
-amountBox.setValue(amountOfShapes);
+amountBox.setValue(100);
+let circlesBox = new SwitchBox(this, 40, 20);
+let rectanglesBox = new SwitchBox(this, 40, 20);
+let trianglesBox = new SwitchBox(this, 40, 20);
 
 form.addLine("random", "Random amount of shapes",randomBox);
 form.addLine("amount", "Amount of shapes", amountBox);
+form.addLine("circles", "Probability of circles", circlesBox);
+form.addLine("rectangles", "Probability of rectangles", rectanglesBox);
+form.addLine("triangles", "Probability of triangles", trianglesBox);
 
 panel.add(form);
 
@@ -65,11 +68,16 @@ function onWindowResize(e) {
 }
 
 function paint() {
+    factory.setCollection({
+        rectangle: rectanglesBox.value,
+        circle: circlesBox.value,
+        triangle: trianglesBox.value
+    });
     let amount;
-    if (random) {
-        amount = Math.floor(Math.random() * amountOfShapes);
+    if (randomBox.value) {
+        amount = Math.floor(Math.random() * amountBox.value);
     } else {
-        amount = amountOfShapes;
+        amount = amountBox.value;
     }
 
     for (let i = 0; i < amount; ++i) {
@@ -79,7 +87,7 @@ function paint() {
 }
 
 function adjustButtons(width) {
-    paintButton.setPosition(width / 4 - Button.width, 25);
-    settings.setPosition(width / 2 - Button.width / 2, 25);
-    clear.setPosition(width * 0.75, 25);
+    paintButton.setPosition(width / 4 - Button.width + 10, 25);
+    settings.setPosition(width / 2 - Button.width / 2 + 10, 25);
+    clear.setPosition(width * 0.75 + 10, 25);
 }

painting/factory.js

@@ -1,15 +1,31 @@
 import Rectangle from "./rectangle.js";
 import Circle from "./circle.js";
+import Triangle from "./triangle.js";
 
-const options = [
-    Rectangle,
-    Circle
+const options = {
+    rectangle: Rectangle,
+    circle   : Circle,
+    triangle : Triangle
+};
+
+let collection = [
+    Circle, Rectangle, Triangle
 ];
 
 export default {
     createRandomShape: function() {
-        let Shape = options[Math.floor(Math.random() * options.length)];
+        let Shape = collection[Math.floor(Math.random() * collection.length)];
 
         return Shape.fromOptions(Shape.randomOptions());
+    },
+    setCollection(obj) {
+        collection = [];
+        let keys = Object.keys(obj);
+        for (let i = 0; i < keys.length; ++i) {
+            let key = keys[i];
+            if (obj[key]) {
+                collection.push(options[key]);
+            }
+        }
     }
 };

painting/triangle.js

@@ -0,0 +1,37 @@
+import Shape from "./shape.js";
+
+class Triangle extends Shape {
+    constructor(x, y, color, x1, y1, x2, y2) {
+        super(x, y, color);
+
+        this._x1 = x1;
+        this._y1 = y1;
+        this._x2 = x2;
+        this._y2 = y2;
+    }
+    draw(ctx) {
+        ctx.beginPath();
+        ctx.moveTo(this._x, this._y);
+        ctx.lineTo(this._x1, this._y1);
+        ctx.lineTo(this._x2, this._y2);
+        ctx.fill();
+    }
+
+    static randomOptions() {
+        let opts = super.randomOptions();
+        let opts1 = super.randomOptions();
+        let opts2 = super.randomOptions();
+
+        opts.x1 = opts1.x;
+        opts.y1 = opts1.y;
+        opts.x2 = opts2.x;
+        opts.y2 = opts2.y;
+
+        return opts;
+    }
+    static fromOptions(o) {
+        return new Triangle(o.x, o.y, o.color, o.x1, o.y1, o.x2, o.y2);
+    }
+}
+
+export default Triangle;

style.css

@@ -88,6 +88,8 @@ button:hover {
     width: 100%;
     outline: none;
     color: #555555;
+    font-size: 16px;
+    text-align: center;
     -webkit-box-shadow: inset 0px 0px 0 #555555;
     -moz-box-shadow: inset 0px 0px 0 #555555;
     box-shadow: inset 0px 0px 0 #555555;
@@ -128,7 +130,7 @@ button:hover {
 }
 
 .form > table td {
-    vertical-align: center;
+    vertical-align: middle;
 }
 
 .form > table td:nth-child(1) {
@@ -137,4 +139,8 @@ button:hover {
 
 .form > table  td:nth-child(2) {
     width: 40%;
+}
+
+.form > table  td:nth-child(2) > * {
+    float: right;
 }