centralize electron functions of screenshotpage to a runtime file

remove some set innerHTML instances.

5 files changed, 59 insertions, 29 deletions

diff --git a/src/main/manaplus/manaplus.ts b/src/main/manaplus/manaplus.ts
index 15a3282..3a4a6f5 100644
--- a/src/main/manaplus/manaplus.ts
+++ b/src/main/manaplus/manaplus.ts
@@ -115,19 +115,19 @@ please check you network connection first.",
   }
 }
 
-ipcMain.on("getScreenshots", (event: any, arg: string) => {
+ipcMain.handle("getScreenshots", async (_event: any, arg: string) => {
   const screenshotsDir = join(getUserDataPath(), "/screenshots/", `${arg}/`);
-  fs.existsSync(screenshotsDir) || fs.mkdirSync(screenshotsDir);
-  fs.readdir(screenshotsDir, (err, dir) => {
-    let screenshots: string[] = [];
-    for (var i = 0, path; (path = dir[i]); i++) {
-      screenshots.push(path);
-    }
-    event.sender.send("getScreenshots", {
-      dir: screenshotsDir,
-      screenshots: screenshots.reverse().slice(0, 24),
-    });
-  });
+  (await fs.existsSync(screenshotsDir)) || (await fs.mkdirSync(screenshotsDir));
+  const dir = await fs.readdir(screenshotsDir);
+
+  let screenshots: string[] = [];
+  for (var i = 0, path; (path = dir[i]); i++) {
+    screenshots.push(path);
+  }
+  return {
+    dir: screenshotsDir,
+    screenshots: screenshots.reverse().slice(0, 24),
+  };
 });
 
 EventEmitter.on("Mana:openScreenshotDir", () => {
diff --git a/src/renderer/gameserver/onlineCount.ts b/src/renderer/gameserver/onlineCount.ts
index b1c8271..3d5e75a 100644
--- a/src/renderer/gameserver/onlineCount.ts
+++ b/src/renderer/gameserver/onlineCount.ts
@@ -12,7 +12,9 @@ export async function makeOnlineCounterList(
     console.log(err);
     const OnlineCounterContainer = document.createElement("span");
     OnlineCounterContainer.classList.add("onlineCounter");
-    OnlineCounterContainer.innerHTML = `<i class="fas fa-times fa-xs"></i>Error:<br>${err}`;
+    OnlineCounterContainer.innerHTML =
+      '<i class="fas fa-times fa-xs"></i>Error:<br>';
+    OnlineCounterContainer.append(document.createTextNode(err));
     return OnlineCounterContainer;
   }
 }
@@ -33,7 +35,9 @@ function generateHTML(onlinePlayers: string[]): HTMLElement {
   displayed_players.forEach((playername) => {
     const PlayerItem = document.createElement("span");
     PlayerItem.classList.add("playerItem");
-    PlayerItem.innerHTML = `<i class="fas fa-circle fa-xs" data-fa-transform="shrink-8 left-2"></i>${playername}`;
+    PlayerItem.innerHTML =
+      '<i class="fas fa-circle fa-xs" data-fa-transform="shrink-8 left-2"></i>';
+    PlayerItem.append(document.createTextNode(playername));
     PlayerList.appendChild(PlayerItem);
   });
 
diff --git a/src/renderer/gameserver/serverView/screenshots.ts b/src/renderer/gameserver/serverView/screenshots.ts
index 3157365..b2c0abf 100644
--- a/src/renderer/gameserver/serverView/screenshots.ts
+++ b/src/renderer/gameserver/serverView/screenshots.ts
@@ -1,4 +1,4 @@
-import { ipcRenderer, shell } from "electron";
+import { ML_Runtime } from "../../runtime";
 import { GameServerPage } from "./serverPage";
 
 export class ServerScreenshotPage extends GameServerPage {
@@ -7,24 +7,28 @@ export class ServerScreenshotPage extends GameServerPage {
     screenshotContainer.classList.add("screenshotsContainer");
     screenshotContainer.id = "screenshots";
 
-    ipcRenderer.send("getScreenshots", this.server.profile.address);
+    ML_Runtime.getScreenshots(this.server.profile.address)
+      .then(this.dataLoadedCallback.bind(null, screenshotContainer))
+      .catch((err) => {
+        // handle this?
+        console.error(err);
+      });
 
     return screenshotContainer;
   }
-}
 
-ipcRenderer.on(
-  "getScreenshots",
-  (event: any, data: { dir: string; screenshots: string[] }) => {
+  private dataLoadedCallback(
+    screenshotContainer: HTMLDivElement,
+    data: { dir: string; screenshots: string[] }
+  ) {
     console.log(data);
-    const screenshots = document.getElementById("screenshots");
-    if (screenshots) {
+    if (screenshotContainer) {
       // Display screenshots if that tab is open
       if (data.screenshots.length !== 0) {
         data.screenshots.forEach((fileName: string) => {
           const screenshot = document.createElement("div");
           screenshot.classList.add("screenshot");
-          screenshots.appendChild(screenshot);
+          screenshotContainer.appendChild(screenshot);
           const img = document.createElement("img");
           img.src = data.dir + fileName;
           screenshot.appendChild(img);
@@ -34,7 +38,7 @@ ipcRenderer.on(
           // screenshot.appendChild(text);
           screenshot.addEventListener("dragstart", (event) => {
             event.preventDefault();
-            ipcRenderer.send("dragFileOut", data.dir + fileName);
+            ML_Runtime.dragFileOut(data.dir + fileName);
           });
         });
       } else {
@@ -43,15 +47,15 @@ ipcRenderer.on(
         nothingHere.innerText =
           "There is nothing here, yet. Make some screenshots in Game and come back here. The default key for snaping screenshots is 'P'.";
 
-        screenshots.appendChild(nothingHere);
+        screenshotContainer.appendChild(nothingHere);
       }
 
       const openFolderButton = document.createElement("button");
       openFolderButton.innerText = "Open folder to see all";
       openFolderButton.addEventListener("click", () => {
-        shell.openPath(data.dir);
+        ML_Runtime.openFolder(data.dir);
       });
-      screenshots.appendChild(openFolderButton);
+      screenshotContainer.appendChild(openFolderButton);
     }
   }
-);
+}
diff --git a/src/renderer/gameserver/socialLink.ts b/src/renderer/gameserver/socialLink.ts
index 9c7e353..2c0e256 100644
--- a/src/renderer/gameserver/socialLink.ts
+++ b/src/renderer/gameserver/socialLink.ts
@@ -13,7 +13,9 @@ export class socialLink {
     element.onclick = () => {
       this.open();
     };
-    element.innerHTML = `<i class="${this.icon}"></i>`;
+    const icon = document.createElement("i");
+    icon.className = this.icon;
+    element.append(icon);
     element.title = this.tooltip;
     return element;
   }
diff --git a/src/renderer/runtime.ts b/src/renderer/runtime.ts
new file mode 100644
index 0000000..9e4a887
--- /dev/null
+++ b/src/renderer/runtime.ts
@@ -0,0 +1,20 @@
+import { ipcRenderer, shell } from "electron";
+
+class Runtime {
+  async getScreenshots(
+    server_address: string
+  ): Promise<{ dir: string; screenshots: string[] }> {
+    return await ipcRenderer.invoke("getScreenshots", server_address);
+  }
+
+  /** used to drag n' drop screenshots out of the window */
+  dragFileOut(filepath: string): void {
+    ipcRenderer.send("dragFileOut", filepath);
+  }
+
+  openFolder(dir: string) {
+    shell.openPath(dir);
+  }
+}
+
+export const ML_Runtime = new Runtime();