all combat overlays !! #6

aymeric-giraudet · Nov 27, 2020 · ee65b92 · ee65b92
1 parent 3c87050
commit ee65b92
Show file tree

Hide file tree

Showing 21 changed files with 4,452 additions and 333 deletions.
diff --git a/combat/accessories.html b/combat/accessories.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <link
+      rel="stylesheet"
+      href="../node_modules/typeface-sawarabi-gothic/index.css"
+    />
+    <link rel="stylesheet" href="combat.css" />
+    <script src="combat.js"></script>
+    <script>
+      window.addEventListener("DOMContentLoaded", () => {
+        renderOverlay({
+          resourceName: "accessories",
+          rowTemplate: (accessory) => `
+            <td class="japanese">${accessory.japanese}</td>
+            <td>${accessory.english.replace(/\n/g, "<br>")}</td>
+            <td>${accessory.effects}</td>
+        `,
+        });
+      });
+    </script>
+  </head>
+  <body>
+    <div id="filters"></div>
+    <table>
+      <thead>
+        <tr>
+          <th scope="col">JAPANESE</th>
+          <th scope="col">ENGLISH</th>
+          <th scope="col">EFFECTS</th>
+        </tr>
+      </thead>
+      <tbody></tbody>
+    </table>
+  </body>
+</html>
diff --git a/combat/braveOrders.html b/combat/braveOrders.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <link
+      rel="stylesheet"
+      href="../node_modules/typeface-sawarabi-gothic/index.css"
+    />
+    <link rel="stylesheet" href="combat.css" />
+    <script src="combat.js"></script>
+    <script>
+      window.addEventListener("DOMContentLoaded", () => {
+        renderOverlay({
+          resourceName: "braveOrders",
+          rowTemplate: (braveOrder) => `
+            <td>${braveOrder.name}</td>
+            <td>${braveOrder.bpCost}</td>
+            <td>${braveOrder.turns}</td>
+            <td>${braveOrder.primaryEffect}</td>
+            <td>${braveOrder.secondaryEffect || ""}</td>
+        `,
+        });
+      });
+    </script>
+  </head>
+  <body>
+    <div id="filters"></div>
+    <table>
+      <thead>
+        <tr>
+          <th scope="col">ORDER</th>
+          <th scope="col">BP COST</th>
+          <th scope="col">TURNS</th>
+          <th scope="col">PRIMARY EFFECT</th>
+          <th scope="col">SECONDARY EFFECT</th>
+        </tr>
+      </thead>
+      <tbody></tbody>
+    </table>
+  </body>
+</html>
diff --git a/combat/combat.css b/combat/combat.css
@@ -0,0 +1,42 @@
+body {
+  margin: 0;
+  background-color: rgb(17, 17, 17);
+  color: white;
+  display: flex;
+  -webkit-app-region: drag;
+}
+
+#filters {
+  margin-top: 1.5rem;
+  width: 12%;
+  height: 90vh;
+  overflow-y: scroll;
+  overscroll-behavior: contain;
+}
+
+table {
+  display: block;
+  width: 88%;
+  height: 100vh;
+  overflow-y: scroll;
+}
+
+thead th {
+  position: sticky;
+  top: 0;
+  background-color: black;
+}
+
+table,
+td,
+th {
+  border: 1px solid #333;
+}
+
+tbody th {
+  text-align: left;
+}
+
+.japanese {
+  font-family: "Sawarabi Gothic";
+}
diff --git a/combat/combat.js b/combat/combat.js
@@ -0,0 +1,71 @@
+var tbody;
+var filters;
+var renderTable;
+var activeFilters = [];
+
+const colors = {
+  EARTH: "#EFCAA2",
+  WATER: "#A4C2F4",
+  FIRE: "#F4CCCC",
+  WIND: "#D9EAD3",
+  TIME: "#434343",
+  SPACE: "#FFF2CC",
+  MIRAGE: "#D9D9D9",
+  LOST: "#D5A6BD",
+};
+
+function renderOverlay({ resourceName, rowTemplate }) {
+  tbody = document.querySelector("tbody");
+  filters = document.getElementById("filters");
+  const resource = window.api.getResource(resourceName);
+  renderFilters(resource);
+  renderTable = function () {
+    tbody.innerHTML = "";
+    for (const category in resource) {
+      if (activeFilters.length > 0 && !activeFilters.includes(category)) {
+        continue;
+      }
+      renderHeader(category);
+      for (const row of resource[category]) {
+        const tr = document.createElement("tr");
+        tr.innerHTML = rowTemplate(row);
+        tbody.appendChild(tr);
+      }
+    }
+  };
+  renderTable();
+}
+
+function renderFilters(resource) {
+  for (const category in resource) {
+    const div = document.createElement("div");
+    const input = document.createElement("input");
+    input.type = "radio";
+    input.name = category;
+    div.appendChild(input);
+    const label = document.createElement("label");
+    label.textContent = category;
+    div.appendChild(label);
+    filters.appendChild(div);
+    div.addEventListener("click", () => {
+      if (input.checked) {
+        activeFilters = activeFilters.filter((filter) => filter !== category);
+        input.checked = false;
+      } else {
+        activeFilters = [...activeFilters, category];
+        input.checked = true;
+      }
+      renderTable();
+    });
+  }
+}
+
+function renderHeader(category) {
+  const tr = document.createElement("tr");
+  const th = document.createElement("th");
+  tr.style.backgroundColor = colors[category] ?? "black";
+  th.colSpan = document.querySelector("thead tr").childElementCount;
+  th.textContent = category;
+  tr.appendChild(th);
+  tbody.appendChild(tr);
+}
diff --git a/combat/crafts.html b/combat/crafts.html
@@ -2,77 +2,21 @@
 <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>
+    <link rel="stylesheet" href="combat.css" />
+    <script src="combat.js"></script>
     <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);
-        }
+      window.addEventListener("DOMContentLoaded", () => {
+        renderOverlay({
+          resourceName: "crafts",
+          rowTemplate: (craft) => `
+            <td>${craft.type}</td>
+            <td>${craft.name}</td>
+            <td>${craft.cpCost}</td>
+            <td>${craft.pbu}</td>
+            <td>${craft.aoe}</td>
+            <td>${craft.effects}</td>
+        `,
+        });
       });
     </script>
   </head>

diff --git a/combat/doors.html b/combat/doors.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <style>
+      body {
+        margin-top: 1.5rem;
+        background-color: rgb(17, 17, 17);
+        color: white;
+        -webkit-app-region: drag;
+      }
+      table {
+        display: block;
+        height: 88vh;
+        overflow-y: scroll;
+        overscroll-behavior: contain;
+      }
+      td,
+      th {
+        border: 1px solid #333;
+      }
+      th {
+        background-color: #444;
+      }
+    </style>
+    <script>
+      window.addEventListener("DOMContentLoaded", () => {
+        const resource = window.api.getResource("doors");
+        const tbody = document.querySelector("tbody");
+        for (const row of resource) {
+          const tr = document.createElement("tr");
+          tr.innerHTML = `
+            <td>${row.door}</td>
+            <td>${row.characters}</td>
+            <td>${row.lvl}</td>
+          `;
+          tbody.appendChild(tr);
+        }
+      });
+    </script>
+  </head>
+  <body>
+    <table>
+      <thead>
+        <tr>
+          <th scope="col">DOOR</th>
+          <th scope="col">CHARACTERS</th>
+          <th scope="col">LEVEL</th>
+        </tr>
+      </thead>
+      <tbody></tbody>
+    </table>
+  </body>
+</html>
diff --git a/combat/items.html b/combat/items.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <link
+      rel="stylesheet"
+      href="../node_modules/typeface-sawarabi-gothic/index.css"
+    />
+    <link rel="stylesheet" href="combat.css" />
+    <script src="combat.js"></script>
+    <script>
+      window.addEventListener("DOMContentLoaded", () => {
+        renderOverlay({
+          resourceName: "items",
+          rowTemplate: (item) => `
+            <td class="japanese">${item.japanese}</td>
+            <td>${item.english}</td>
+            <td>${item.effects}</td>
+        `,
+        });
+      });
+    </script>
+  </head>
+  <body>
+    <div id="filters"></div>
+    <table>
+      <thead>
+        <tr>
+          <th scope="col">JAPANESE</th>
+          <th scope="col">ENGLISH</th>
+          <th scope="col">EFFECTS</th>
+        </tr>
+      </thead>
+      <tbody></tbody>
+    </table>
+  </body>
+</html>