let JS handle the DOM; rearrange code

This commit is contained in:
Max Bradbury 2020-07-19 22:36:36 +01:00
parent ffd8a15eda
commit 3cdf52b5e2
2 changed files with 40 additions and 47 deletions

View File

@ -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);
}

View File

@ -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> {