tilesy/script.js

182 lines
5.8 KiB
JavaScript

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