Show loading percentage

Author: Sekqies

src/index.html

@@ -5,7 +5,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Complex Plotter</title>
-<style>
+  <style>
     body, html {
       margin: 0;
       padding: 0;
@@ -27,7 +27,7 @@
     }
     #loading-overlay {
       position: absolute;
-      width:100%;
+      width: 100%;
       height: 100%;
       inset: 0;
       background-color: #1e1e1e;
@@ -56,12 +56,14 @@
 
   <div id="loading-overlay">
     <div class="spinner"></div>
-    <h2>Loading...</h2>
+    <h2 id="progress-text">Loading...</h2>
   </div>
 
   <canvas id="canvas" oncontextmenu="event.preventDefault()" tabindex="-1"></canvas>
   <script type="text/javascript">
     const canvas = document.getElementById('canvas');
+    const progressText = document.getElementById('progress-text');
+
     canvas.addEventListener("webglcontextlost", (e) => {
       alert('Error with WebGL. Please reload the page');
       e.preventDefault();
@@ -77,11 +79,35 @@ <h2>Loading...</h2>
         if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
         console.error(text);
       },
+      
+      setStatus: function(text) {
+        if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
+        if (text === Module.setStatus.last.text) return;
+
+        const m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
+        if (m) {
+          const loaded = parseInt(m[2]);
+          const total = parseInt(m[4]);
+          const progress = Math.round((loaded / total) * 100);
+          progressText.innerText = `Loading... ${progress}%`;
+        } else {
+          if (text) progressText.innerText = text;
+        }
+      },
+      
+      totalDependencies: 0,
+      monitorRunDependencies: function(left) {
+        this.totalDependencies = Math.max(this.totalDependencies, left);
+        Module.setStatus(left ? `Preparing... (${this.totalDependencies - left}/${this.totalDependencies})` : 'All downloads complete.');
+      },
+
       onRuntimeInitialized: function() {
         document.getElementById('loading-overlay').style.display = 'none';
         canvas.focus();
       }
-  };
+    };
+
+    Module.setStatus('Downloading...');
   </script>
   <textarea id="clipping" style="position:absolute; width:0; height:0; border:0; opacity:0; pointer-events:none;" aria-hidden="true"></textarea>