87 lines
2.9 KiB
JavaScript
87 lines
2.9 KiB
JavaScript
|
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);
|
||
|
|
}
|
||
|
|
|
||
|
|
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
|
||
|
|
document.getElementById("game-data-next").click();
|
||
|
|
}
|
||
|
|
|
||
|
|
function clear_game() {
|
||
|
|
document.getElementById("game-data").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]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const preview = document.getElementById("preview");
|
||
|
|
preview.style.display = "none";
|
||
|
|
|
||
|
|
document.getElementById('image').addEventListener('change', function (e) {
|
||
|
|
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);
|
||
|
|
}
|
||
|
|
|
||
|
|
run();
|