tilesy/script.js

import init, {load_default_game_data, add_tiles} from './pkg/bitsy_tiles.js';

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 buttonGameDataProceed  = el("game-data-next");
    const textareaGameDataInput  = el("game-data");
    const buttonImportGame       = el("import");
    const buttonLoadGame         = el("load");
    const buttonNewGame          = el("new");
    const textareaGameDataOutput = el("output");
    const preview                = el("preview");
    const resetButton            = el("reset");

    // 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() {
        textareaGameDataInput.value = load_default_game_data();
        // 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 = "";
    }

    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;
            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);

    preview.style.display = "none";

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

    function addTiles() {
        let image    = el("preview").getAttribute("src");
        let gameData = el("game-data").value;
        let prefix   = el("prefix").value;

        textareaGameDataOutput.value = add_tiles(gameData, image, prefix);
    }

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

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

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

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

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

run();