fantasy/main.js

import factory from "./painting/factory.js";
import Shape from "./painting/shape.js";

import Canvas from "./ui/canvas.js";
import Button from "./ui/button.js";
import Panel from "./ui/panel.js";

document.body.innerHTML = "";
const maxPanelWidth = 300;

Shape.setBounding(window.innerWidth, window.innerHeight);
let canvas = new Canvas(window.innerWidth, window.innerHeight);

let repaint = new Button("paint");
repaint.addHandler(canvas.clear.bind(canvas));
repaint.addHandler(paint);
repaint.setPosition(25, 25);

let panel = new Panel(Math.min(maxPanelWidth ,window.innerWidth - 20), window.innerHeight - 20);
panel.setPosition(10, 10);

let settings = new Button("gear");
settings.addHandler(panel.toggle.bind(panel));
settings.setPosition(100, 25);

window.addEventListener("resize", onWindowResize, false);

document.body.appendChild(canvas.element);
document.body.appendChild(panel.element);
document.body.appendChild(repaint.element);
document.body.appendChild(settings.element);

function onWindowResize(e) {
    Shape.setBounding(window.innerWidth, window.innerHeight);
    canvas.setSize(window.innerWidth, window.innerHeight);
    panel.setSize(Math.min(maxPanelWidth ,window.innerWidth - 20), window.innerHeight - 20)
}

function paint() {
    let amount = Math.floor(Math.random() * 100 + 50);

    for (let i = 0; i < amount; ++i) {
        let shape = factory.createRandomShape();
        canvas.draw(shape);
    }
}