WIP crafts combat overlay, see #6

aymeric-giraudet · Nov 26, 2020 · 3c87050 · 3c87050
1 parent 10b40b2
commit 3c87050
Show file tree

Hide file tree

Showing 9 changed files with 1,942 additions and 3 deletions.
diff --git a/combat/crafts.html b/combat/crafts.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <style>
+      body {
+        margin: 0;
+        background-color: rgb(17, 17, 17);
+        color: white;
+        margin-top: 1.8rem;
+        display: flex;
+      }
+      table {
+        width: 80%;
+        height: 100vh;
+        overflow-y: scroll;
+      }
+      table,
+      td {
+        border: 1px solid #333;
+      }
+      #filters {
+        width: 20%;
+        height: 100vh;
+        overflow-y: scroll;
+        overscroll-behavior: none;
+      }
+      .characterName {
+        text-align: left;
+      }
+    </style>
+    <script>
+      const crafts = window.api.getCrafts();
+      window.addEventListener("DOMContentLoaded", (event) => {
+        const filters = document.getElementById("filters");
+        const tbody = document.querySelector("tbody");
+
+        for (const character in crafts) {
+          renderFilter(character);
+          renderHeader(character);
+          for (const craft of crafts[character]) {
+            const tr = document.createElement("tr");
+            tr.innerHTML = `
+              <td>C</td>
+              <td>${craft.name}</td>
+              <td>${craft.cpCost}</td>
+              <td>${craft.pbu}</td>
+              <td>${craft.aoe}</td>
+              <td>${craft.effects}</td>
+            `;
+            tbody.appendChild(tr);
+          }
+        }
+
+        function renderFilter(character) {
+          const div = document.createElement("div");
+          const input = document.createElement("input");
+          input.type = "radio";
+          input.name = character;
+          div.appendChild(input);
+          const label = document.createElement("label");
+          label.textContent = character;
+          div.appendChild(label);
+          filters.appendChild(div);
+        }
+
+        function renderHeader(character) {
+          const tr = document.createElement("tr");
+          const th = document.createElement("th");
+          th.colSpan = 6;
+          th.classList.add("characterName");
+          th.textContent = character;
+          tr.appendChild(th);
+          tbody.appendChild(tr);
+        }
+      });
+    </script>
+  </head>
+  <body>
+    <div id="filters"></div>
+    <table>
+      <thead>
+        <tr>
+          <th scope="col"></th>
+          <th scope="col">CRAFT</th>
+          <th scope="col">CP</th>
+          <th scope="col">POWER/BREAK/UNBALANCE</th>
+          <th scope="col">AREA</th>
+          <th scope="col">EFFECTS</th>
+        </tr>
+      </thead>
+      <tbody></tbody>
+    </table>
+  </body>
+</html>
diff --git a/index.html b/index.html
@@ -41,6 +41,7 @@
           <option value="10">Fast</option>
           <option value="0">Immediate</option>
         </select>
+        <button type="button" id="test">Open battle overlay</button>
         <button type="button" id="update">Update translations</button>
       </div>
     </div>

diff --git a/main.js b/main.js
@@ -15,7 +15,7 @@ function createWindow() {
     webPreferences: {
       nodeIntegration: false,
       contextIsolation: true,
-      enableRemoteModule: false,
+      enableRemoteModule: true,
       preload: path.join(__dirname, "preload.js"),
     },
   });

diff --git a/parseCombat.js b/parseCombat.js
@@ -0,0 +1,42 @@
+const xlsx = require("xlsx");
+const fs = require("fs");
+const https = require("follow-redirects").https;
+const concat = require("concat-stream");
+
+function download(url, cb) {
+  const concatStream = concat(cb);
+  https.get(url, function (response) {
+    response.pipe(concatStream);
+  });
+}
+
+function downloadAndParseCombat() {
+  download(
+    "https://docs.google.com/spreadsheets/d/1gyoxZ5oLcQW4tt5dzFmJ1sqGwP_NxUuM947C5cVAJzE/export?format=xlsx",
+    function xlsxToJson(buffer) {
+      const file = xlsx.read(buffer, { type: "buffer" });
+      const crafts = xlsx.utils
+        .sheet_to_json(file.Sheets.Crafts, {
+          header: ["name", "cpCost", "pbu", "aoe", "effects"],
+        })
+        .reduce((acc, line) => {
+          if (Object.keys(line).length === 1) {
+            return { ...acc, [line.name]: [] };
+          }
+          const currentCharacter = Object.keys(acc)[
+            Object.keys(acc).length - 1
+          ];
+          return {
+            ...acc,
+            [currentCharacter]: [...acc[currentCharacter], line],
+          };
+        }, {});
+      fs.writeFileSync(
+        "resources/crafts.json",
+        JSON.stringify(crafts, null, 2)
+      );
+    }
+  );
+}
+
+downloadAndParseCombat();
diff --git a/preload.js b/preload.js
@@ -1,4 +1,5 @@
-const { contextBridge } = require("electron");
+const { contextBridge, remote } = require("electron");
+const BrowserWindow = remote.BrowserWindow;
 const downloadAndParseTranslations = require("./parseXlsx");
 const getAppDataPath = require("./getAppDataPath");
 const fs = require("fs");
@@ -8,11 +9,27 @@ contextBridge.exposeInMainWorld("api", {
   getTranslations: () => {
     const file = path.join(getAppDataPath(), "translation.json");
     if (!fs.existsSync(file)) {
-      return require("./translation.json");
+      return require("./resources/translation.json");
     }
     const translations = fs.readFileSync(file);
     return JSON.parse(translations);
   },
   updateTranslations: downloadAndParseTranslations,
   getPlatform: () => process.platform,
+  openCombatOverlay: (section) => {
+    const win = new BrowserWindow({
+      width: 910,
+      height: 300,
+      titleBarStyle: "hidden",
+      webPreferences: {
+        nodeIntegration: false,
+        contextIsolation: true,
+        enableRemoteModule: true,
+        preload: path.join(__dirname, "preload.js"),
+      },
+    });
+
+    win.loadFile(`combat/${section}.html`);
+  },
+  getCrafts: () => require("./resources/crafts.json"),
 });