127 lines
4.1 KiB
JavaScript
127 lines
4.1 KiB
JavaScript
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);
|
|
resetButton.addEventListener("touchend", reset);
|
|
}
|
|
|
|
run();
|