tilesy/script.js

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

async function run() {
    await init();

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

    document.getElementById("start").style.display = "block";

    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";
        }
    }

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

    const gameDataInput         = document.getElementById("game-data");
    const buttonGameDataProceed = document.getElementById("game-data-next");

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

    let new_game_button = document.getElementById("new");
    new_game_button.addEventListener("click", new_game);
    new_game_button.addEventListener("touchend", new_game);
    let load_game_button = document.getElementById("load");
    load_game_button.addEventListener("click", clear_game);
    load_game_button.addEventListener("touchend", clear_game);

    // handle game data and image

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

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

    const preview = document.getElementById("preview");
    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").innerHTML;
        let prefix   = document.getElementById("prefix").value;
        document.getElementById("output").innerHTML = add_tiles(gameData, image, prefix);
    }

    const importButton = document.getElementById("import");
    importButton.addEventListener("click",    addTiles);
    importButton.addEventListener("touchend", addTiles);

    function reset() {
        gameDataInput.innerHTML = '';
        preview.removeAttribute("src");
    }

    let resetButton = document.getElementById("reset");

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

run();