Added main overlay's UI related JS

PRE-OVERHAUL/src/createTemplate.html

@@ -3,7 +3,7 @@
     <header>
       <div id="bm-bar-drag"></div>
       <h1>Create new template</h1>
-      <button id="close"><!-- Add cross icon --></button>
+      <button id="close">&#x2715;</button>
     </header>
     <hr />
     <form>

PRE-OVERHAUL/src/mainOverlay.html

@@ -3,7 +3,7 @@
     <header>
       <div id="bm-bar-drag"></div>
       <h1>Blue Marble</h1>
-      <button id="close"><!-- Add cross icon --></button>
+      <button id="close">&#x2715;</button>
     </header>
     <hr />
     <table>
@@ -16,8 +16,8 @@
         <td id="droplets"></td>
       </tr>
       <tr>
-        <td>Next level in... </td>
+        <td>Level: </td>
-        <td id="next-level"></td>
+        <td id="level"></td>
       </tr>
     </table>
     <div>

PRE-OVERHAUL/src/manageLinks.html

@@ -3,7 +3,7 @@
     <header>
       <div id="bm-bar-drag"></div>
       <h1>Links manager</h1>
-      <button id="close"><!-- Add cross icon --></button>
+      <button id="close">&#x2715;</button>
     </header>    
     <hr />
     <label>

package-lock.json

@@ -8,7 +8,6 @@
       "name": "wplace-bluemarble",
       "version": "0.81.0",
       "dependencies": {
-        "@types/greasemonkey": "^4.0.7",
         "zod": "^4.0.17"
       },
       "devDependencies": {
@@ -18,7 +17,6 @@
         "eslint": "^9.33.0",
         "globals": "^16.3.0",
         "jsdoc": "^4.0.4",
-        "minami": "^1.2.3",
         "prettier": "^3.6.2",
         "terser": "^5.43.1",
         "typescript-eslint": "^8.39.1"
@@ -980,12 +978,6 @@
         "@types/geojson": "*"
       }
     },
-    "node_modules/@types/greasemonkey": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/@types/greasemonkey/-/greasemonkey-4.0.7.tgz",
-      "integrity": "sha512-DuYBRf/T4zixO/xhQ3eicZCBjjOgbSSXuHP5XkLNf/UBayrJpBniP9il/AQaPy0lffl4Bco48zgHL+pZmQ6Q0A==",
-      "license": "MIT"
-    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -2503,12 +2495,6 @@
         "node": ">=8.6"
       }
     },
-    "node_modules/minami": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/minami/-/minami-1.2.3.tgz",
-      "integrity": "sha512-3f2QqqbUC1usVux0FkQMFYB73yd9JIxmHSn1dWQacizL6hOUaNu6mA3KxZ9SfiCc4qgcgq+5XP59+hP7URa1Dw==",
-      "dev": true
-    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",

src/main.ts

@@ -35,8 +35,8 @@ export const uiManager = new UIManager();
 const mainOverlay = document.querySelector("#bm-main-overlay");
 // If main overlay already exists that means another Blue Marble instance is already running
 if(!mainOverlay){ 
-    
     // Only run the code if this is the first Blue Marble instance
+    
     const params = new URLSearchParams(document.location.search); // Gets the url search query
     if (params.has("bmShare")) {
         try {

src/mainOverlay.ts

@@ -23,9 +23,51 @@ function openManLinks(){
     uiManager.open("bm-manage-links")
 }
 
+/**Updates the values in this window's UI
+ * @since 0.2.0-overhaul
+ */
+function updateUI(){
+
+    if(!charity.game.user.data){ return }
+
+    // Try to get elements and set the appropriate text
+    const nameTD = document.querySelector("#bm-main-overlay td#name");
+    if(nameTD && nameTD.nodeName.toLocaleUpperCase() === "TD"){
+        nameTD.textContent = charity.game.user.data.name;
+    }
+    const dropletsTD = document.querySelector("#bm-main-overlay td#droplets")
+    if(dropletsTD && dropletsTD.nodeName.toLocaleUpperCase() === "TD"){
+        dropletsTD.textContent = charity.game.user.data.droplets.toString();
+    }
+    const levelTD = document.querySelector("#bm-main-overlay td#level");
+    if(levelTD && levelTD.nodeName.toLocaleUpperCase() === "TD"){
+        levelTD.textContent = charity.game.user.data.level.toString();
+    }
+}
+
+
 /**Initialises this window's UI-related javascript (addEventListener hooks, ect)
  * @since 0.1.0-overhaul
 */
 export function initMainOverlay(){
+
+    // Try to get the close button and connect the appropriate function to the onClick listener
+    const closeBtn = document.querySelector("#bm-main-overlay button#close");
+    if(closeBtn && closeBtn.nodeName.toLocaleUpperCase() === "BUTTON"){
+        closeBtn.addEventListener("click", ()=>close());
+    }
+
+    updateUI()
+
+    // Try to get elements and connect the appropriate function to the onClick listener
+    const manageTemplatesBtn = document.querySelector("#bm-main-overlay button#manage-templates");
+    if(manageTemplatesBtn && manageTemplatesBtn.nodeName.toLocaleUpperCase() === "BUTTON"){
+        manageTemplatesBtn.addEventListener("click", ()=>openManTemplates())
+    }
+    const manageLinksBtn = document.querySelector("#bm-main-overlay button#manage-links");
+    if(manageLinksBtn && manageLinksBtn.nodeName.toLocaleUpperCase() === "BUTTON"){
+        manageLinksBtn.addEventListener("click", ()=>openManLinks())
+    }
+    
     // Add event listener hooks
 }