diff --git a/script.js b/script.js index b3fb918..f2f90e1 100644 --- a/script.js +++ b/script.js @@ -1,5 +1,9 @@ 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; @@ -30,21 +34,21 @@ function readFile(input, callback, type = "text") { 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"); + 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"; } - document.getElementById("start").style.display = "block"; + el("start").style.display = "block"; for (let pageButton of document.getElementsByClassName("pagination")) { pageButton.addEventListener('click', pagination); @@ -52,43 +56,43 @@ async function run() { } function new_game() { - gameDataInput.value = load_default_game_data(); + 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() { - gameDataInput.value = ""; + textareaGameDataInput.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); + 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 - document.getElementById("game").addEventListener("change", function() { + el("game").addEventListener("change", function() { readFile(this, function (e) { - gameDataInput.value = e.target.result; + textareaGameDataInput.value = e.target.result; checkGameData(); }, "text"); }); function checkGameData() { - if (gameDataInput.value.length > 0) { + if (textareaGameDataInput.value.length > 0) { buttonGameDataProceed.removeAttribute("disabled"); } else { buttonGameDataProceed.setAttribute("disabled", "disabled"); } } - gameDataInput.addEventListener("change", checkGameData); - gameDataInput.addEventListener("keyup", checkGameData); + textareaGameDataInput.addEventListener("change", checkGameData); + textareaGameDataInput.addEventListener("keyup", checkGameData); preview.style.display = "none"; - document.getElementById('image').addEventListener('change', function () { + el('image').addEventListener('change', function () { readFile(this, function (e) { preview.src = e.target.result; preview.style.display = "initial" @@ -96,23 +100,23 @@ async function run() { }); function addTiles() { - let image = document.getElementById("preview").getAttribute("src"); - let gameData = document.getElementById("game-data").value; - let prefix = document.getElementById("prefix").value; + let image = el("preview").getAttribute("src"); + let gameData = el("game-data").value; + let prefix = el("prefix").value; - output.value = add_tiles(gameData, image, prefix); + textareaGameDataOutput.value = add_tiles(gameData, image, prefix); } - importButton.addEventListener("click", addTiles); - importButton.addEventListener("touchend", addTiles); + buttonImportGame.addEventListener("click", addTiles); + buttonImportGame.addEventListener("touchend", addTiles); function addImage() { - gameDataInput.value = output.value; - output.value = ""; + textareaGameDataInput.value = textareaGameDataOutput.value; + textareaGameDataOutput.value = ""; } - addImageButton.addEventListener("click", addImage); - addImageButton.addEventListener("touchend", addImage); + buttonAddImage.addEventListener("click", addImage); + buttonAddImage.addEventListener("touchend", addImage); function reset() { clear_game();