Better chem tables

lib/components/WikiPage.tsx

@@ -48,9 +48,9 @@ export default function WikiPage({ page, visible }) {
           visibility: visible ? "" : "hidden",
         }}
       >
-        <p>You start skimming through the manual...</p>
         <div className="speen">
           <img src={speen} />
+          <p>You start skimming through the manual...</p>
         </div>
       </div>
     );

lib/userscript.ts

@@ -378,6 +378,81 @@ export default function (root: HTMLElement, docname: string) {
       name.map((e, i) => ({ id: i, str: e }))
     );
 
+    // Remove "Removed medicines" section
+    let remTable = root.querySelector(
+      "#Non-craftable_Medicines + h4 + p + table"
+    );
+    remTable.parentElement.removeChild(remTable);
+
+    root
+      .querySelectorAll("div[data-name] .wikitable.sortable tr")
+      .forEach((el: HTMLElement) => {
+        let sectionEl = el.parentElement;
+        while (!sectionEl.dataset.name) {
+          sectionEl = sectionEl.parentElement;
+        }
+        const section = sectionEl.dataset.name;
+        if (el.querySelector("td") === null) {
+          // Remove unused rows if found
+          const row = el.querySelectorAll("th");
+          row.forEach((th, i) => {
+            if (i < 2) {
+              return;
+            }
+            th.parentElement.removeChild(th);
+          });
+          return;
+        }
+        let rows = Array.from(el.querySelectorAll("td")).slice(1);
+        let treatment = null;
+        let desc = null;
+        let metabolism = null;
+        let overdose = null;
+        let addiction = null;
+        // Handle special cases
+        switch (section) {
+          case "Components":
+          case "Virology Recipes":
+            [desc] = rows;
+            break;
+          case "Narcotics":
+            [desc, metabolism, overdose, addiction] = rows;
+            break;
+          case "Explosive Strength":
+          case "Other Reagents":
+          case "Mutation Toxins":
+            [desc, metabolism] = rows;
+            break;
+          default:
+            // All fields
+            [treatment, desc, metabolism, overdose, addiction] = rows;
+        }
+        const title = el.querySelector("th");
+        let content = `<div class="reagent-header">${title.innerHTML}</div>`;
+        if (treatment) {
+          content += `<p class="treatment">${treatment.innerHTML}</p>`;
+        }
+        if (metabolism) {
+          content += `<p class="metabolism">${metabolism.innerHTML}</p>`;
+        }
+        if (addiction && addiction.innerHTML.trim() != "N/A") {
+          content += `<p class="addiction">${addiction.innerHTML}</p>`;
+        }
+        if (overdose && overdose.innerHTML.trim() != "N/A") {
+          content += `<p class="overdose">${overdose.innerHTML}</p>`;
+        }
+        if (desc) {
+          content += `<p>${desc.innerHTML}</p>`;
+        }
+        title.classList.add("reagent-ext");
+        title.innerHTML = content;
+        if (desc) desc.parentElement.removeChild(desc);
+        if (treatment) treatment.parentElement.removeChild(treatment);
+        if (metabolism) metabolism.parentElement.removeChild(metabolism);
+        if (overdose) overdose.parentElement.removeChild(overdose);
+        if (addiction) addiction.parentElement.removeChild(addiction);
+      });
+
     document.body.addEventListener("keydown", function (ev) {
       if (ev.shiftKey) {
         switch (ev.keyCode) {

style/bgus.scss

@@ -27,8 +27,10 @@
 #bgus_fz_searchbox ul {
   list-style: none;
   margin: 5px;
+  padding: 0;
 }
 #bgus_fz_searchbox li {
+  margin: 0;
   padding: 5px;
   cursor: pointer;
 }
@@ -71,8 +73,8 @@ span.bgus_nested_element:not(.bgus_collapsed) + div.tooltiptext {
   padding: 5px 8px;
   line-height: 10pt;
 }
-table.wikitable > tbody > tr > td:nth-child(2) {
+.bchem table.wikitable > tbody > tr > td:nth-child(2) {
-  min-width: 30%;
+  width: 45%;
   padding: 10px;
 }
 .bgus_fz_selected {
@@ -101,3 +103,39 @@ body.bgus_cbox input[type="checkbox"]:checked + span[data-src]:before,
 body.bgus_cbox input[type="checkbox"]:checked + span[data-src] {
   color: green;
 }
+
+.reagent-ext {
+  .reagent-header {
+    font-size: 12pt;
+    text-align: left;
+    padding: 10pt;
+    padding-bottom: 0;
+  }
+  p {
+    font-size: 8pt;
+    font-weight: 300;
+    line-height: 1.4em;
+    word-spacing: -0.1em;
+  }
+  .treatment {
+    font-size: 10pt;
+  }
+  .metabolism:before {
+    font-size: 9pt;
+    content: "Metabolism rate: ";
+    font-weight: bold;
+  }
+  .overdose,
+  .addiction {
+    font-size: 9pt;
+    font-weight: bold;
+  }
+  .overdose:before {
+    color: #ffae68;
+    content: "Overdose at ";
+  }
+  .addiction:before {
+    color: #ffdf97;
+    content: "Addiction at ";
+  }
+}

style/main.scss

@@ -76,18 +76,23 @@ body {
     grid-row: 1;
     grid-column: 1;
     &.waiting {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100vw;
+      height: 100vh;
+      overflow: hidden;
       display: flex;
       flex-direction: column;
       height: 100%;
       .speen {
         flex: 1;
         display: flex;
+        flex-direction: column;
         justify-content: center;
         align-items: center;
         img {
-          flex: 1;
+          width: 60vmin;
-          width: 50%;
-          height: 50%;
           opacity: 0.9;
         }
       }