Allow dynamic loading of miniApp files

adgohar · adgohar · commit 25a0e7fd7596 · 2025-03-21T21:14:43.000+01:00
diff --git a/android/tremola4chrome/resources/tremola.html b/android/tremola4chrome/resources/tremola.html
@@ -16,10 +16,6 @@
   <script type="text/javascript" charset="UTF-8" src="../src/sketch.js"></script>
   <script type="text/javascript" charset="UTF-8" src="../src/miniAppHelper.js"></script>
   <script type="text/javascript" charset="UTF-8" src="../src/mini_apps.js"></script>
-  <!-- Import all miniapp files here (only for chrome)-->
-  <script type="text/javascript" charset="UTF-8" src="../miniApps/tictactoe/src/ttt.js"></script>
-  <script type="text/javascript" charset="UTF-8" src="../miniApps/tictactoe/src/ttt_ui.js"></script>
-  <link rel="stylesheet" type="text/css" href="../miniApps/tictactoe/resources/ttt.css" media="screen" />
 </head>
 <body style="background-image: url('../assets/splash-as-background.jpg'); background-size: cover; background-color: white; overflow: hidden" onload="backend('ready');">
 <div style="width: 100%; height: 100%; margin: 0px">
diff --git a/android/tremola4chrome/src/mini_apps.js b/android/tremola4chrome/src/mini_apps.js
@@ -65,22 +65,53 @@ function initializeMiniApps() {
 function handleManifestContent(content) {
     setTimeout(() => {
         const manifest = JSON.parse(content);
-        let htmlFile = "../miniApps/" + manifest.id + "/" + manifest.htmlFile;
+        let miniAppPath = "../miniApps/" + manifest.id + "/";
+
+        // Load and inject CSS file
+        if (manifest.cssFile) {
+            const cssFilePath = miniAppPath + manifest.cssFile;
+            fetch(cssFilePath)
+                .then(response => response.text())
+                .then(cssContent => {
+                    const styleEl = document.createElement('style');
+                    styleEl.innerText = cssContent;
+                    document.head.appendChild(styleEl);
+                    console.log("CSS content added to document head:", cssFilePath);
+                })
+                .catch(error => console.error("Error loading CSS:", error));
+        }
 
+        // Load and inject HTML file
+        let htmlFile = miniAppPath + manifest.htmlFile;
         fetch(htmlFile)
             .then(response => response.text())
             .then(text => {
                 (function () {
                     var coreDiv = document.getElementById('core');
                     if (coreDiv) {
-                        coreDiv.insertAdjacentHTML("beforeend", text); // ✅ Fix: Keeps existing elements
+                        coreDiv.insertAdjacentHTML("beforeend", text);
                         console.log("HTML content added to core div");
                     } else {
                         console.log("Core div not found");
                     }
                 })();
             })
             .catch(error => console.error("Error loading HTML:", error));
+        
+        // Load and inject JS files from the "scripts" array
+        const scripts = manifest.scripts || [];
+        scripts.forEach(scriptPath => {
+            let fullScriptPath = miniAppPath + scriptPath;
+            fetch(fullScriptPath)
+                .then(response => response.text())
+                .then(scriptContent => {
+                    const scriptEl = document.createElement('script');
+                    scriptEl.text = scriptContent;
+                    document.body.appendChild(scriptEl);
+                    console.log("JS file loaded and executed:", fullScriptPath);
+                })
+                .catch(error => console.error("Error loading JS:", error));
+        });
 
         // Process the manifest data (e.g., create buttons)
         const listElement = document.getElementById("lst:miniapps");
