tilesy/script.js

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

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 addImageButton        = document.getElementById("add");
    const buttonGameDataProceed = document.getElementById("game-data-next");
    const gameDataInput         = document.getElementById("game-data");
    const importButton          = document.getElementById("import");
    const load_game_button      = document.getElementById("load");
    const new_game_button       = document.getElementById("new");
    const output                = document.getElementById("output");
    const preview               = document.getElementById("preview");
    const resetButton           = document.getElementById("reset");

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

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

    function new_game() {
        gameDataInput.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() {
        gameDataInput.value = "";
    }

    new_game_button.addEventListener("click", new_game);
    new_game_button.addEventListener("touchend", new_game);
    load_game_button.addEventListener("click", clear_game);
    load_game_button.addEventListener("touchend", clear_game);

    // handle game data and image

    document.getElementById("game").addEventListener("change", function() {
        readFile(this, function (e) {
            gameDataInput.value = e.target.result;
            checkGameData();
        }, "text");
    });

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

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

    preview.style.display = "none";

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

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

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

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

    function addImage() {
        gameDataInput.value = output.value;
        output.value = "";
    }

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

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

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

run();