prime-map-generator/src/main/js/Main.ts

51 lines
1.5 KiB
TypeScript

// @ts-ignore
const {$, doAfterLoad, footer, header, nav} = window.fwdekker;
import {GridModel} from "./Model";
import {Painter} from "./Painter";
// Set up template
doAfterLoad(() => {
$("#nav").appendChild(nav("/Tools/Prime Map Generator/"));
$("#header").appendChild(header({
title: "Prime Map Generator",
description: "Visualizes prime numbers"
}));
$("#footer").appendChild(footer({
vcsURL: "https://git.fwdekker.com/tools/prime-map-generator/",
version: "v%%VERSION_NUMBER%%"
}));
$("main").classList.remove("hidden");
});
doAfterLoad(async () => {
const canvas = $("#canvas");
canvas.classList.remove("invisible");
const resize = () => {
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
};
window.addEventListener("resize", resize, false);
resize();
const painter = new Painter(canvas);
const model = new GridModel();
painter.model = model;
painter.startDrawLoop();
const gridCols = $("#gridCols");
gridCols.addEventListener("change", () => model.cols = parseInt(gridCols.value));
const gridScale = $("#gridScale");
gridScale.addEventListener("change", () => painter.scale = parseInt(gridScale.value));
const scrollX = $("#scrollX");
scrollX.addEventListener("change", () => model.scrollX = parseInt(scrollX.value));
const scrollY = $("#scrollY");
scrollY.addEventListener("change", () => model.scrollY = parseInt(scrollY.value));
});