131 lines
4.0 KiB
JavaScript
131 lines
4.0 KiB
JavaScript
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();
|