let JS handle the DOM; rearrange code
This commit is contained in:
parent
ffd8a15eda
commit
3cdf52b5e2
80
script.js
80
script.js
|
@ -1,41 +1,58 @@
|
|||
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 output = document.getElementById("output");
|
||||
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";
|
||||
|
||||
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('click', pagination);
|
||||
pageButton.addEventListener('touchend', pagination);
|
||||
}
|
||||
|
||||
const gameDataInput = document.getElementById("game-data");
|
||||
const buttonGameDataProceed = document.getElementById("game-data-next");
|
||||
|
||||
function new_game() {
|
||||
load_default_game_data();
|
||||
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();
|
||||
}
|
||||
|
@ -44,28 +61,13 @@ async function run() {
|
|||
gameDataInput.value = "";
|
||||
}
|
||||
|
||||
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]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById("game").addEventListener("change", function() {
|
||||
readFile(this, function (e) {
|
||||
gameDataInput.value = e.target.result;
|
||||
|
@ -84,7 +86,6 @@ async function run() {
|
|||
gameDataInput.addEventListener("change", checkGameData);
|
||||
gameDataInput.addEventListener("keyup", checkGameData);
|
||||
|
||||
const preview = document.getElementById("preview");
|
||||
preview.style.display = "none";
|
||||
|
||||
document.getElementById('image').addEventListener('change', function () {
|
||||
|
@ -102,7 +103,6 @@ async function run() {
|
|||
output.value = add_tiles(gameData, image, prefix);
|
||||
}
|
||||
|
||||
const importButton = document.getElementById("import");
|
||||
importButton.addEventListener("click", addTiles);
|
||||
importButton.addEventListener("touchend", addTiles);
|
||||
|
||||
|
@ -111,8 +111,6 @@ async function run() {
|
|||
output.value = "";
|
||||
}
|
||||
|
||||
const addImageButton = document.getElementById("add");
|
||||
|
||||
addImageButton.addEventListener("click", addImage);
|
||||
addImageButton.addEventListener("touchend", addImage);
|
||||
|
||||
|
@ -121,8 +119,6 @@ async function run() {
|
|||
preview.removeAttribute("src");
|
||||
}
|
||||
|
||||
let resetButton = document.getElementById("reset");
|
||||
|
||||
resetButton.addEventListener("click", reset);
|
||||
}
|
||||
|
||||
|
|
|
@ -7,11 +7,8 @@ use wasm_bindgen::prelude::*;
|
|||
const SD: u32 = 8;
|
||||
|
||||
#[wasm_bindgen]
|
||||
pub fn load_default_game_data() {
|
||||
let window = web_sys::window().expect("no global `window` exists");
|
||||
let document = window.document().expect("should have a document on window");
|
||||
let game_data_input = document.get_element_by_id("game-data").expect("no game data input");
|
||||
game_data_input.set_inner_html(&bitsy_parser::mock::game_default().to_string());
|
||||
pub fn load_default_game_data() -> String {
|
||||
bitsy_parser::mock::game_default().to_string()
|
||||
}
|
||||
|
||||
fn tile_name(prefix: &str, index: &u32) -> Option<String> {
|
||||
|
|
Loading…
Reference in New Issue