let JS handle the DOM; rearrange code

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

src/lib.rs

@@ -7,11 +7,8 @@ use wasm_bindgen::prelude::*;
 const SD: u32 = 8;
 
 #[wasm_bindgen]
-pub fn load_default_game_data() {
+pub fn load_default_game_data() -> String {
-    let window = web_sys::window().expect("no global `window` exists");
+    bitsy_parser::mock::game_default().to_string()
-    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());
 }
 
 fn tile_name(prefix: &str, index: &u32) -> Option<String> {