let JS handle the DOM; rearrange code

script.js

@@ -1,17 +1,5 @@
 import init, {load_default_game_data, add_tiles} from './pkg/bitsy_tiles.js';
 
-async function run() {
-    await init();
-
-    const output = document.getElementById("output");
-
-    // 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;
 
@@ -26,33 +14,6 @@ async function run() {
     }
 }
 
-    for (let pageButton of document.getElementsByClassName("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();
-        // we don't need to look at the default game data, so skip ahead to the image page
-        buttonGameDataProceed.click();
-    }
-
-    function clear_game() {
-        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();
@@ -66,6 +27,47 @@ async function run() {
     }
 }
 
+async function run() {
+    await init();
+
+    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";
+
+    for (let pageButton of document.getElementsByClassName("pagination")) {
+        pageButton.addEventListener('click',    pagination);
+        pageButton.addEventListener('touchend', pagination);
+    }
+
+    function new_game() {
+        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();
+    }
+
+    function clear_game() {
+        gameDataInput.value = "";
+    }
+
+    new_game_button.addEventListener("click", new_game);
+    new_game_button.addEventListener("touchend", new_game);
+    load_game_button.addEventListener("click", clear_game);
+    load_game_button.addEventListener("touchend", clear_game);
+
+    // handle game data and image
+
     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);
 }
 

src/lib.rs

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