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

// @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));
});