error/success handling (user feedback)

index.js

@@ -8,12 +8,24 @@ async function run() {
     const output       = document.getElementById('c');
     const merge_button = document.getElementById('merge');
 
+    function handleResult(inputElement, message) {
+        console.log(message);
+        let messageBox = inputElement.nextSibling;
+        messageBox.innerText = message;
+        messageBox.style.display = "block"
+        setTimeout(() => {messageBox.style.display = "none"}, 4000);
+    }
+
     main.addEventListener('change', () => {
-        console.debug(load_main(main.value));
+        if (main.value) {
+            handleResult(main, load_main(main.value));
+        }
     });
 
     additional.addEventListener('change', () => {
-        console.debug(load_additional(additional.value));
+        if (additional.value) {
+            handleResult(additional, load_additional(additional.value));
+        }
     });
 
     function mix() {

index.pug

@@ -15,9 +15,11 @@ html(lang="en-gb")
                 #main.square.left
                     h2 main
                     textarea#a(placeholder="Paste your main game data here...")
+                    p.result
                 #additional.square.left
                     h2 additional
                     textarea#b(placeholder="Paste additional game data here...")
+                    p.result
             .row.middle
                 img.centre(src="merge.png" alt="")
                 button#merge.centre mix!

src/lib.rs

@@ -41,6 +41,11 @@ pub fn load_additional(game_data: String) -> String {
 #[wasm_bindgen]
 pub fn merge() -> String {
     let state = STATE.lock().unwrap();
+
+    if state.main.is_none() || state.additional.is_none() {
+        return "".to_string();
+    }
+
     let mut main = state.main.clone().unwrap();
     let additional = state.additional.clone().unwrap();
     main.merge(additional);

style.css

@@ -72,6 +72,12 @@ textarea {
     float: left;
 }
 
+.result {
+    position: relative;
+    background: var(--bg);
+    color: var(--inverse);
+}
+
 .row {
     width: 100%;
     height: calc(82vmin / 3);
@@ -81,4 +87,4 @@ textarea {
     width: 50vmin;
     height: 100%;
     padding: 0.5em;
-}
+}