Add navigation to dashboard of web UI

arthuro555 · arthuro555 · commit 414cc0db65a9 · 2020-06-08T16:47:38.000+02:00
diff --git a/Loader/gdmodext/html/menu.html b/Loader/gdmodext/html/menu.html
@@ -6,11 +6,41 @@
 	</head>
 	
 	<body>
-        <h1 class="uk-heading-medium" id="connecting">Connecting...</h1>
-        <h4>Choose the scene you want to load:</h2>
-        <div class="uk-child-width-1-3@m uk-grid-small uk-grid-match" id="scenes" uk-grid>
-            <p>Loading...</p>
-        </div>
+        <h1 class="uk-heading-medium" id="connecting">Connecting to game...</h1>
+		<ul class="uk-subnav uk-subnav-pill" uk-switcher>
+			<li><a href="#">Overview</a></li>
+			<li><a href="#">Mod Loader</a></li>
+			<li><a href="#">Scene switcher</a></li>
+			<li><a href="#">Settings</a></li>
+		</ul>
+		<ul class="uk-switcher uk-margin" uk-switcher="animation: uk-animation-fade">
+			<li id="overview">
+				<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 
+					<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>
+				<p class="uk-text-lead">Nothing here yet ;)</p>
+				<a href="#" uk-switcher-item="next">Go to Scene Switcher</a>
+			</li>
+			<li id="scenes">
+				<h2 class="uk-heading-small">Scene switcher</h2>
+				<h4>Chose the scene you want to load:</h2>
+				<div class="uk-child-width-1-3@m uk-grid-small uk-grid-match" id="scenelist" uk-grid>
+					<h5 class="uk-text-meta">Loading...</h5>
+				</div>
+			</li>
+			<li id="settings">
+				<h2 class="uk-heading-small">Settings</h2>
+				<p class="uk-text-lead">Nothing to configure yet ;)</p>
+				<a href="#" uk-switcher-item="previous">Go to Scene Switcher</a>
+			</li>
+		</ul>
 		
 		<!-- Additional Scripts -->
 		<script src="../vendor/uikit.min.js"></script>
diff --git a/Loader/gdmodext/js/injected.js b/Loader/gdmodext/js/injected.js
@@ -11,7 +11,7 @@ const debug = false;
 /**
  * The CDN to fetch the GDAPI files from
  */
-const CDN = "https://cdn.jsdelivr.net/gh/arthuro555/gdmod/API/";
+const CDN = "https://cdn.jsdelivr.net/gh/arthuro555/gdmod@latest/API/";
 
 /**
  * Flag telling if that page got patched already.
@@ -106,6 +106,8 @@ if(window.gdjs !== undefined) {
                 postToPopup("pong", true);
             } else if(event.data["message"] === "installAPI") {
                 installGDModAPI();
+            } else if(event.data["message"] === "connect") {
+                postToPopup("connected", gdjs.projectData.properties);
             } else if(event.data["message"] === "listScenes") {
                 let allScenes = [];
                 for (let scene of gdjs.projectData.layouts) allScenes.push(scene.name);
diff --git a/Loader/gdmodext/js/menu.js b/Loader/gdmodext/js/menu.js
@@ -36,20 +36,26 @@ chrome.tabs.query({active: true, currentWindow: false}, function(tabs) {
             if(event["id"] === "pong") {
                 console.log("pong")
             } else if(event["id"] === "listScenes") {
-                const scenes = document.getElementById("scenes");
+                const scenes = document.getElementById("scenelist");
                 scenes.innerHTML = "";
                 for(let sceneName of event.payload) {
                     scenes.appendChild(createCard(sceneName));
                 }
             } else if(event["id"] === "installedAPI") {
+                // TODO
+            } else if(event["id"] === "connected") {
                 // This means the game is connected and ready
                 document.title = "GDmod Scene Selector";
-                document.getElementById("connecting").innerHTML = "Connected!";
+                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)
             }
         }
     });
 
+    document.getElementById('mods').addEventListener('show', function () {
+        chrome.tabs.sendMessage(tabs[0].id, {message: "installAPI"});
+    });
+
     // Now that we opened the mod loader install the API into the game (the API is not crucial and is therefore only loaded when needed)
-    chrome.tabs.sendMessage(tabs[0].id, {message: "installAPI"});
+    chrome.tabs.sendMessage(tabs[0].id, {message: "connect"});
 });
diff --git a/Loader/gdmodext/js/popup.js b/Loader/gdmodext/js/popup.js
@@ -2,10 +2,6 @@ let patcherButton = document.getElementById("patcher-button");
 
 patcherButton.addEventListener("click", function() {
     if (!patcherButton.hasAttribute("disabled")) {
-        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
-            chrome.tabs.sendMessage(tabs[0].id, {message: "patch"});
-        });
-        patcherButton.setAttribute("disabled", true);
         chrome.windows.create({
             url: chrome.runtime.getURL("html/menu.html"),
             type: "popup"
