// @ts-ignore
const {$, doAfterLoad, footer, header, nav} = window.fwdekker;

import {Display, GridPainter} from "./Display";


// 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 display = new Display(canvas);
    const gridPainter = new GridPainter();
    display.painter = gridPainter;
    display.startDrawLoop();

    const gridCols = $("#gridCols");
    gridCols.addEventListener("change", () => {
        gridPainter.cols = gridCols.value;
        display.reloadPainter();
    });

    const gridMax = $("#gridMax");
    gridMax.addEventListener("change", () => {
        gridPainter.max = gridMax.value;
        display.reloadPainter();
    });

    const gridScale = $("#gridScale");
    gridScale.addEventListener("change", () => {
        gridPainter.scale = gridScale.value;
        display.reloadPainter();
    });
});