fantasy/main.js

85 lines
2.4 KiB
JavaScript
Raw Normal View History

2018-11-18 18:04:50 +00:00
import factory from "./painting/factory.js";
import Shape from "./painting/shape.js";
2018-11-19 15:03:05 +00:00
import Canvas from "./ui/canvas.js";
2018-11-19 14:09:43 +00:00
import Button from "./ui/button.js";
2018-11-19 14:44:36 +00:00
import Panel from "./ui/panel.js";
2018-11-18 00:00:38 +00:00
import Form from "./ui/editors/form.js";
import NumericBox from "./ui/editors/numericBox.js";
import SwitchBox from "./ui/editors/switchBox.js";
2018-11-18 18:04:50 +00:00
document.body.innerHTML = "";
2018-11-19 15:03:05 +00:00
const maxPanelWidth = 300;
const panelPaddingTop = 90;
let random = true;
let amountOfShapes = 100;
2018-11-18 10:07:36 +00:00
Shape.setBounding(window.innerWidth, window.innerHeight);
let canvas = new Canvas(window.innerWidth, window.innerHeight);
2018-11-18 18:04:50 +00:00
let paintButton = new Button("paint");
paintButton.addHandler(paint);
2018-11-19 14:44:36 +00:00
let panelWidth = Math.min(maxPanelWidth ,window.innerWidth - 20);
let panelHeight = window.innerHeight - 20;
let panel = new Panel(panelWidth, panelHeight);
panel.element.style.paddingTop = panelPaddingTop + "px";
2018-11-19 15:03:05 +00:00
panel.setPosition(10, 10);
2018-11-19 14:44:36 +00:00
let settings = new Button("gear");
settings.addHandler(panel.toggle.bind(panel));
let clear = new Button("blank");
clear.addHandler(canvas.clear.bind(canvas));
2018-11-19 14:09:43 +00:00
window.addEventListener("resize", onWindowResize, false);
let form = new Form(panelWidth, panelHeight - panelPaddingTop);
let randomBox = new SwitchBox(random, 50, 30);
let amountBox = new NumericBox(50, 100);
amountBox.setValue(amountOfShapes);
form.addLine("random", "Random amount of shapes",randomBox);
form.addLine("amount", "Amount of shapes", amountBox);
panel.add(form);
2018-11-19 14:09:43 +00:00
document.body.appendChild(canvas.element);
2018-11-19 14:44:36 +00:00
document.body.appendChild(panel.element);
document.body.appendChild(paintButton.element);
2018-11-19 14:44:36 +00:00
document.body.appendChild(settings.element);
document.body.appendChild(clear.element);
adjustButtons(panelWidth);
2018-11-19 15:08:21 +00:00
paint();
2018-11-19 14:09:43 +00:00
function onWindowResize(e) {
Shape.setBounding(window.innerWidth, window.innerHeight);
2018-11-19 15:03:05 +00:00
canvas.setSize(window.innerWidth, window.innerHeight);
let panelWidth = Math.min(maxPanelWidth ,window.innerWidth - 20);
panel.setSize(panelWidth, window.innerHeight - 20);
adjustButtons(panelWidth);
2018-11-19 14:09:43 +00:00
}
function paint() {
let amount;
if (random) {
amount = Math.floor(Math.random() * amountOfShapes);
} else {
amount = amountOfShapes;
}
2018-11-19 14:09:43 +00:00
for (let i = 0; i < amount; ++i) {
let shape = factory.createRandomShape();
canvas.draw(shape);
}
}
function adjustButtons(width) {
paintButton.setPosition(width / 4, 25);
settings.setPosition(width / 2, 25);
clear.setPosition(width * 0.75, 25);
2018-11-19 14:09:43 +00:00
}