pixsy/script.js

290 lines
8.9 KiB
JavaScript
Raw Normal View History

2020-11-04 15:38:43 +00:00
import init, {
2020-11-04 16:11:44 +00:00
add_room,
2020-11-05 18:48:22 +00:00
get_palettes,
get_preview,
2020-11-04 15:38:43 +00:00
load_image,
load_game,
load_default_game,
output,
set_brightness,
2020-11-05 18:48:22 +00:00
set_dither,
2020-11-06 12:47:26 +00:00
set_palette,
2020-11-04 16:11:44 +00:00
set_room_name,
2020-11-04 15:38:43 +00:00
} from './pkg/pixsy.js';
2020-10-30 17:50:03 +00:00
// 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);
}
2021-07-03 10:29:59 +00:00
function copyToClipboard() {
const button = el("clipboard");
el("output").select();
document.execCommand("copy");
button.innerText = "copied!";
setTimeout(() => {
button.innerText = "copy to clipboard";
}, 2000);
}
2020-10-30 17:50:03 +00:00
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() {
if (typeof WebAssembly !== "object") {
window.location = "http://tinybird.info/image-to-bitsy/old/"
}
2020-10-30 17:50:03 +00:00
await init();
const buttonAddImage = el("add");
const buttonBackToImage = el("back-to-image");
2021-07-03 10:29:59 +00:00
const buttonCopyToClipboard = el("clipboard")
2020-10-30 17:50:03 +00:00
const buttonDownload = el("download");
const buttonGameDataProceed = el("game-data-next");
2020-11-05 18:48:22 +00:00
const buttonImageProceed = el("image-next");
const buttonRoomProceed = el("room-next");
2020-10-30 17:50:03 +00:00
const buttonLoadGame = el("load");
const buttonNewGame = el("new");
const buttonReset = el("reset");
2020-11-05 18:48:22 +00:00
const checkboxDither = el("dither");
2020-11-08 20:45:10 +00:00
const divCroppie = el("crop");
const divNewPalette = el("new-palette");
const inputBrightness = el("brightness");
const inputColourBackground = el("colour-background");
const inputColourForeground = el("colour-foreground");
2020-11-05 18:48:22 +00:00
const inputRoomName = el("room-name");
const selectPalette = el("palette");
2020-10-30 17:50:03 +00:00
const textareaGameDataInput = el("game-data");
const textareaGameDataOutput = el("output");
2020-11-08 20:45:10 +00:00
const croppie = new Croppie(divCroppie, {
viewport: {width: 128, height: 128, type: 'square'},
boundary: {width: 256, height: 256},
enableZoom: true,
});
2020-11-05 09:52:14 +00:00
2020-10-30 17:50:03 +00:00
// 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);
}
2020-11-08 20:45:10 +00:00
// croppie needs to be on screen to work;
// halt pagination until we're finished gathering the results
buttonImageProceed.removeEventListener("click", pagination);
2020-10-30 17:50:03 +00:00
function new_game() {
2020-11-08 17:33:39 +00:00
load_default_game();
2020-11-04 15:38:43 +00:00
textareaGameDataInput.value = output();
2020-10-30 17:50:03 +00:00
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");
});
2020-11-05 18:48:22 +00:00
function setPaletteDropdown() {
2020-11-07 11:00:07 +00:00
const palettes = JSON.parse(get_palettes());
2020-11-05 18:48:22 +00:00
selectPalette.innerHTML = "";
palettes.push({
id: "NEW_PALETTE",
name: "new palette"
});
2020-11-05 18:48:22 +00:00
for (let palette of palettes) {
let option = document.createElement("option");
option.value = palette.id;
option.innerText = palette.name;
selectPalette.appendChild(option);
}
}
2020-10-30 17:50:03 +00:00
function checkGameData() {
let result = load_game(textareaGameDataInput.value)
if (result === "Loaded game") {
2020-10-30 17:50:03 +00:00
buttonGameDataProceed.removeAttribute("disabled");
2020-11-05 18:48:22 +00:00
setPaletteDropdown();
2020-10-30 17:50:03 +00:00
} else {
buttonGameDataProceed.setAttribute("disabled", "disabled");
}
}
textareaGameDataInput.addEventListener("change", checkGameData);
textareaGameDataInput.addEventListener("keyup", checkGameData);
checkGameData();
el('image').addEventListener('change', function () {
readFile(this, function (e) {
2020-11-08 20:46:58 +00:00
croppie.bind({url: e.target.result, zoom: 0});
2020-11-08 20:45:10 +00:00
divCroppie.style.display = "block";
buttonImageProceed.removeAttribute("disabled");
2020-10-30 17:50:03 +00:00
}, "image");
});
2020-11-05 18:48:22 +00:00
function loadPreview() {
el("preview").setAttribute("src", get_preview());
}
function handleImage() {
2020-11-08 20:45:10 +00:00
croppie.result({
type: "base64",
size: "viewport",
format: "png",
}).then((result) => {
console.log("Loading image: " + load_image(result));
el("page-image").style.display = "none";
el("page-room" ).style.display = "block";
loadPreview();
});
2020-11-05 18:48:22 +00:00
}
buttonImageProceed.addEventListener("click", handleImage);
buttonImageProceed.addEventListener("touchend", handleImage);
2020-11-06 12:47:26 +00:00
selectPalette.addEventListener("change", () => {
set_palette(selectPalette.value, inputColourBackground.value, inputColourForeground.value);
if (selectPalette.value === "NEW_PALETTE") {
divNewPalette.style.display = "block";
} else {
divNewPalette.style.display = "none";
}
2020-11-06 12:47:26 +00:00
loadPreview();
});
function updateCustomPalette() {
set_palette(selectPalette.value, inputColourBackground.value, inputColourForeground.value);
loadPreview();
}
inputColourForeground.addEventListener("change", updateCustomPalette);
inputColourBackground.addEventListener("change", updateCustomPalette);
2020-11-05 18:48:22 +00:00
checkboxDither.addEventListener("change", () => {
set_dither(checkboxDither.checked);
loadPreview();
2020-11-05 18:48:22 +00:00
});
inputRoomName.addEventListener("change", () => {
set_room_name(inputRoomName.value);
});
inputBrightness.addEventListener("input", () => {
set_brightness(inputBrightness.value);
loadPreview();
});
2020-11-05 18:48:22 +00:00
function addRoom() {
2020-11-08 20:07:42 +00:00
el("added").innerText = add_room();
2020-11-04 15:38:43 +00:00
textareaGameDataOutput.value = output();
2020-10-30 17:50:03 +00:00
}
2020-11-05 18:48:22 +00:00
buttonRoomProceed.addEventListener("click", addRoom);
buttonRoomProceed.addEventListener("touchend", addRoom);
2020-10-30 17:50:03 +00:00
function handleDownload() {
download("output.bitsy", textareaGameDataOutput.value);
}
2021-07-03 10:29:59 +00:00
buttonCopyToClipboard.addEventListener("click", copyToClipboard);
buttonCopyToClipboard.addEventListener("touchend", copyToClipboard);
2020-10-30 17:50:03 +00:00
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);
2020-11-08 10:09:04 +00:00
// would it be easier just to reload the page? lol
2020-10-30 17:50:03 +00:00
function reset() {
clear_game();
2020-11-08 10:09:04 +00:00
// todo clear file inputs
inputBrightness.value = 0;
inputRoomName.value = "";
selectPalette.innerHTML = "";
divNewPalette.style.display = "none";
2020-11-08 20:53:52 +00:00
inputColourBackground.value = "#000000";
inputColourForeground.value = "#ffffff";
2020-11-08 10:09:04 +00:00
checkboxDither.checked = true;
2020-10-30 17:50:03 +00:00
}
buttonReset.addEventListener("click", reset);
buttonReset.addEventListener("touchend", reset);
}
run();