Add mod loading and error modals

Author: arthuro555

API/GDApi.js

@@ -50,7 +50,8 @@ GDAPI.currentScene = null;
 GDAPI.game = null;
 
 /**
- * This is a function overriden by the loader that lets you send
+ * This is a function overriden by the loader that lets you send updates to the UI.
+ * Receiving and handling messages from the UI is handled by the loader.
  * @function
  * @param {string} id - The Identifier, aka the main message. This tells the IDE what you want to do.
  * @param {any} extraData - An object to pass to the UI with the message.

API/GDMod.js

@@ -162,10 +162,12 @@ GDAPI.loadZipMod = function(modAsZip) {
                     )
                 }
                 return Promise.all(promises);
-            });
+            })
+            .then(() => GDAPI.messageUI("modLoaded"));
         });
     }).catch((error) => {
         console.error("Error while loading mod file: " + error.toString());
+        GDAPI.messageUI("modLoadError", error);
     });
 };
 

Loader/gdmodext/html/menu.html

@@ -18,16 +18,15 @@ <h1 class="uk-heading-medium" id="connecting">Connecting to game...</h1>
 				<h2 class="uk-heading-small">Overview</h2>
 				<p class="uk-text-lead">
 					Welcome to the dashboard! Here you can control the game like you want.
-					Keep in mind that this tool is for modding, and the other tools are made for 
+					Keep in mind that this tool is for <br>modding</br>, and the other tools are made for 
 					<b>debugging mods</b>. You can use them for other purpose but 
 					while using them keep in mind that their main purpose is modding.
 				</p>
 			</li>
 			<li id="mods">
-				<h2 class="uk-heading-small">Mod Loader</h2>
+				<h2 class="uk-heading-small">Mod Manager</h2>
 				<button class="uk-button-primary" id="selectMod">Load Mod</button>
 				<input type="file" id="fileInput" hidden></input>
-				<a href="#" uk-switcher-item="next">Go to Scene Switcher</a>
 			</li>
 			<li id="scenes">
 				<h2 class="uk-heading-small">Scene switcher</h2>
@@ -42,6 +41,38 @@ <h2 class="uk-heading-small">Settings</h2>
 				<a href="#" uk-switcher-item="previous">Go to Scene Switcher</a>
 			</li>
 		</ul>
+
+		<!-- Modals For Modloading -->
+		<div id="modload-modal" class="uk-modal-full uk-background-muted" esc-close="false" bg-close="false" uk-modal>
+			<div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical">
+				<div class="uk-grid-collapse uk-child-width-1-2@s uk-flex-middle" uk-grid>
+					<div class="uk-padding-large">
+						<h1>Mod Loading...</h1>
+						<p id="modload-currentAction" class="uk-center">Loading mod...</p>
+						<progress id="modload-progress" class="uk-progress" value="0" max="3"></progress>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<div id="modload-error-modal" class="uk-modal-full uk-background-muted" uk-modal>
+			<div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical">
+				<div class="uk-grid-collapse uk-child-width-1-2@s uk-flex-middle" uk-grid>
+					<div class="uk-padding-large">
+						<h2>Error While Loding Mod</h2>
+						<ul uk-accordion>
+							<li>
+								<a class="uk-accordion-title" href="#">Show Error</a>
+								<div class="uk-accordion-content">
+									<p id="modload-error">Error.</p>
+								</div>
+							</li>
+						</ul>
+						<button class="uk-modal-close">Ok</button>
+					</div>
+				</div>
+			</div>
+		</div>
 
 		<!-- Additional Scripts -->
 		<script src="../vendor/uikit.min.js"></script>

Loader/gdmodext/js/injected.js

@@ -11,8 +11,8 @@ const debug = false;
 /**
  * The CDN to fetch the GDAPI files from
  */
-const CDN = "https://cdn.jsdelivr.net/gh/arthuro555/gdmod@0.0.1-preview/API/";
-//const CDN = "http://localhost:5000/";
+//const CDN = "https://cdn.jsdelivr.net/gh/arthuro555/gdmod@0.0.1-preview/API/";
+const CDN = "http://localhost:5000/";
 
 /**
  * Flag telling if that page got patched already.
@@ -150,6 +150,7 @@ if(window.gdjs !== undefined) {
                 GDAPI.currentScene.getGame()._sceneStack.replace(event.data.scene, true);
             } else if(event.data["message"] === "loadMod") {
                 const mod = dataURItoBlob(event.data["mod"]);
+                postToPopup("modReceived");
                 GDAPI.loadZipMod(mod);
             }
         }

Loader/gdmodext/js/menu.js

@@ -49,15 +49,31 @@ chrome.tabs.query({active: true, currentWindow: false}, function(tabs) {
                     document.title = "GDmod Scene Selector";
                     document.getElementById("connecting").innerHTML = "Dashboard for GD game " + event.payload.name;
                     chrome.tabs.sendMessage(tabs[0].id, {message: "listScenes"}); // Get list of scenes (will be moved)
+                } else if(event["id"] === "modReceived") {
+                    document.getElementById("modload-currentAction").innerText = "Loading Mod...";
+                    document.getElementById("modload-progress").setAttribute("value","2");
+                }
+            } else if(event["origin"] === "GDAPI") {
+                if(event["id"] === "modLoaded") {
+                    document.getElementById("modload-progress").setAttribute("value","3");
+                    UIkit.modal(document.getElementById("modload-modal")).hide();
+                } else if(event["id"] === "modLoadError") {
+                    UIkit.modal(document.getElementById("modload-modal")).hide();
+                    document.getElementById("modload-error").innerText = event.payload;
+                    UIkit.modal(document.getElementById("modload-error-modal")).show();
                 }
             }
         }
     });
 
     const fileElement = document.getElementById("fileInput");
     fileElement.addEventListener('change', function () {
+        UIkit.modal(document.getElementById("modload-modal")).show();
+
         var reader = new FileReader();
         reader.onloadend = function() {
+            document.getElementById("modload-currentAction").innerText = "Uploading Mod to the game...";
+            document.getElementById("modload-progress").setAttribute("value","1");
             chrome.tabs.sendMessage(tabs[0].id, {message: "loadMod", mod: reader.result});
         }
         reader.readAsDataURL(fileElement.files[0]);