tilesy/script.js

import init, {
    add_tiles,
    load_image,
    load_game,
    load_default_game,
    output,
    set_prefix,
    set_invert,
    set_flip,
    set_mirror,
    set_rotate
} from './pkg/tilesy.js';

if (typeof WebAssembly !== "object") {
    document.getElementById("start").innerText = "Sorry - your browser does not support WebAssembly";
}

// stolen from https://ourcodeworld.com/articles/read/189/how-to-create-a-file-and-generate-a-download-with-javascript-in-the-browser-without-a-server
function download(filename, text) {
    let element = document.createElement('a');

    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
    element.setAttribute('download', filename);
    element.style.display = 'none';
    document.body.appendChild(element);
    element.click();
    document.body.removeChild(element);
}

function el(id) {
    return document.getElementById(id);
}

function pagination(e) {
    const parent = e.target.parentNode;

    parent.style.display = "none";

    if (e.target.classList.contains("next")) {
        parent.nextSibling.style.display = "block";
    } else if (e.target.classList.contains("prev")) {
        parent.previousSibling.style.display = "block";
    } else if (e.target.classList.contains("start")) {
        document.getElementById("start").style.display = "block";
    }
}

function readFile(input, callback, type = "text") {
    if (input.files && input.files[0]) {
        let reader = new FileReader();
        reader.onload = callback;

        if (type === "text") {
            reader.readAsText(input.files[0]);
        } else {
            reader.readAsDataURL(input.files[0]);
        }
    }
}

async function run() {
    await init();

    const buttonAddImage         = el("add");
    const buttonBackToImage      = el("back-to-image");
    const buttonDownload         = el("download");
    const buttonGameDataProceed  = el("game-data-next");
    const buttonImportGame       = el("import");
    const buttonLoadGame         = el("load");
    const buttonNewGame          = el("new");
    const buttonReset            = el("reset");
    const checkboxInvertTiles    = el("invert");
    const checkboxFlipTiles      = el("flip");
    const checkboxMirrorTiles    = el("mirror");
    const checkboxRotateTiles    = el("rotate");
    const inputPrefix            = el("prefix");
    const imagePreview           = el("preview");
    const textareaGameDataInput  = el("game-data");
    const textareaGameDataOutput = el("output");

    // hide all pages except start page
    for (let page of document.getElementsByClassName('page')) {
        page.style.display = "none";
    }
    el("start").style.display = "block";

    for (let pageButton of document.getElementsByClassName("pagination")) {
        pageButton.addEventListener('click',    pagination);
        pageButton.addEventListener('touchend', pagination);
    }

    function new_game() {
        load_default_game();
        textareaGameDataInput.value = output();
        checkGameData();
        // we don't need to look at the default game data, so skip ahead to the image page
        buttonGameDataProceed.click();
    }

    function clear_game() {
        textareaGameDataInput.value = "";
        checkGameData();
    }

    buttonNewGame.addEventListener("click", new_game);
    buttonNewGame.addEventListener("touchend", new_game);
    buttonLoadGame.addEventListener("click", clear_game);
    buttonLoadGame.addEventListener("touchend", clear_game);

    // handle game data and image

    el("game").addEventListener("change", function() {
        readFile(this, function (e) {
            textareaGameDataInput.value = e.target.result;
            console.log(load_game(e.target.result));
            checkGameData();
        }, "text");
    });

    function checkGameData() {
        if (textareaGameDataInput.value.length > 0) {
            buttonGameDataProceed.removeAttribute("disabled");
        } else {
            buttonGameDataProceed.setAttribute("disabled", "disabled");
        }
    }

    textareaGameDataInput.addEventListener("change", checkGameData);
    textareaGameDataInput.addEventListener("keyup",  checkGameData);
    checkGameData();

    imagePreview.style.display = "none";

    el('image').addEventListener('change', function () {
        readFile(this, function (e) {
            imagePreview.src = e.target.result;
            imagePreview.style.display = "initial";
            console.log(load_image(imagePreview.getAttribute("src")));
        }, "image");
    });

    function addTiles() {
        console.log(add_tiles());
        textareaGameDataOutput.value = output();
    }

    buttonImportGame.addEventListener("click",    addTiles);
    buttonImportGame.addEventListener("touchend", addTiles);

    function handleDownload() {
        download("output.bitsy", textareaGameDataOutput.value);
    }

    buttonDownload.addEventListener("click",    handleDownload);
    buttonDownload.addEventListener("touchend", handleDownload);

    function addImage() {
        textareaGameDataInput.value = textareaGameDataOutput.value;
        textareaGameDataOutput.value = "";
        buttonBackToImage.click();
    }

    buttonAddImage.addEventListener("click",    addImage);
    buttonAddImage.addEventListener("touchend", addImage);

    inputPrefix.addEventListener("change", () => {
        set_prefix(inputPrefix.value);
    })

    checkboxInvertTiles.addEventListener("change", () => {
       set_invert(checkboxInvertTiles.checked);
    });

    checkboxFlipTiles.addEventListener("change", () => {
        set_flip(checkboxFlipTiles.checked);
    });

    checkboxMirrorTiles.addEventListener("change", () => {
        set_mirror(checkboxMirrorTiles.checked);
    });

    checkboxRotateTiles.addEventListener("change", () => {
        set_rotate(checkboxRotateTiles.checked);
    });

    function reset() {
        clear_game();
        imagePreview.removeAttribute("src");
    }

    buttonReset.addEventListener("click",    reset);
    buttonReset.addEventListener("touchend", reset);
}

run();