tilesy/script.js

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

// 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 spanTileNamePreview    = el("tile-name-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() {
        textareaGameDataInput.value = load_default_game_data();
        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;
            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"
        }, "image");
    });

    function handleTilePrefix() {
        if (inputPrefix.value) {
            spanTileNamePreview.innerText = `'${this.value} 1' etc.`
        } else {
            spanTileNamePreview.innerText = "'forest 1' etc."
        }
    }

    inputPrefix.addEventListener("keyup", handleTilePrefix);
    inputPrefix.addEventListener("change", handleTilePrefix);
    handleTilePrefix();

    function addTiles() {
        let image    = imagePreview.getAttribute("src");
        let gameData = textareaGameDataInput.value;
        let prefix   = inputPrefix.value;

        textareaGameDataOutput.value = add_tiles(
            gameData,
            image,
            prefix,
            checkboxInvertTiles.checked,
            checkboxFlipTiles.checked,
            checkboxMirrorTiles.checked,
            checkboxRotateTiles.checked
        );
    }

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

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

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

run();