Convert reaction conditions to a prettier table

src/scripts/index.ts

@@ -10,7 +10,7 @@ import { welcomeScript } from "./pages/welcome";
 export const PAGE_VERSIONS = {
   Infections: "fcebeda2fddb46d924f4538cd9c0daeb55aa4c9b",
   Guide_to_food_and_drinks: "131e010df66ed689d31df53c3ca17ad16635a827",
-  Guide_to_chemistry: "20971ee185888fd37128bdc1c097a740982e94b2",
+  Guide_to_chemistry: "8583fc3b707920eb5cc3a814ec934cfff88803a5",
   $DEFAULT: "bb7abd544a19369d4b6b7e3dde3eb3cc34c023d4",
 };
 

src/scripts/pages/chemistry.ts

@@ -123,7 +123,7 @@ export function processChemistry(root: HTMLElement): void {
         content += `<p>${desc.innerHTML}</p>`;
       }
       if (ph) {
-        content += `<p class="ph">${ph.innerHTML}</p>`;
+        content += `<div class="ph">${ph.innerHTML}</div>`;
       }
       title.classList.add("reagent-ext");
       title.innerHTML = content;
@@ -191,12 +191,7 @@ export function chemistryScript(root: HTMLElement): void {
       "table.wikitable > tbody > tr:not(:first-child)"
     )
   );
-  const test = el
-    .map((element, id) => [
-      element,
-      element.querySelector("th .reagent-header"),
-    ])
-    .filter(([a, b]) => !b);
+
   registerSearchEntries(
     el.map((element, id) => ({
       page: "Guide_to_chemistry",
@@ -251,6 +246,52 @@ export function chemistryScript(root: HTMLElement): void {
       }
     }
   });
+
+  // Prettify reaction conditions
+  const reactionPropertyRegexp = /<b>(.+):<\/b>(.+)/i;
+  el.forEach((element, id) => {
+    element.querySelectorAll<HTMLElement>(".ph").forEach((ph) => {
+      // Prepare table
+      const extras = [];
+      const table = document.createElement("table");
+      const tableHeaderRow = document.createElement("tr");
+      const tableValueRow = document.createElement("tr");
+      table.appendChild(tableHeaderRow);
+      table.appendChild(tableValueRow);
+
+      // Parse parameters
+      ph.innerHTML.split("<br>").forEach((prop) => {
+        if (prop.trim() === "N/A") {
+          return;
+        }
+
+        const matcher = reactionPropertyRegexp.exec(prop);
+        if (!matcher) {
+          extras.push(prop);
+          return;
+        }
+
+        const [reactionProperty, propValue] = matcher
+          .slice(1)
+          .map((s) => s.trim());
+
+        const header = document.createElement("th");
+        header.appendChild(document.createTextNode(reactionProperty));
+        tableHeaderRow.appendChild(header);
+        const value = document.createElement("td");
+        value.appendChild(document.createTextNode(propValue));
+        tableValueRow.append(value);
+      });
+
+      // Clear and re-add prettified data
+      ph.innerHTML = "";
+      if (tableHeaderRow.children.length > 0) {
+        ph.appendChild(table);
+      }
+      ph.innerHTML += `<p>${extras.join("<br>")}</p>`;
+      ph.classList.add("ph-ext");
+    });
+  });
 }
 
 export default { chemistryScript, processChemistry };

style/pages/chemistry.scss

@@ -14,7 +14,11 @@ div[data-tab="Guide_to_chemistry"] {
   div.tooltiptext {
     display: none;
     border: 1px solid #384e68;
-        background: linear-gradient(to bottom, darken(#384e68, 20%), darken(#384e68, 25%));
+    background: linear-gradient(
+      to bottom,
+      darken(#384e68, 20%),
+      darken(#384e68, 25%)
+    );
   }
 
   span.bgus_nested_element:not(.bgus_collapsed) + div.tooltiptext {
@@ -133,4 +137,26 @@ div[data-tab="Guide_to_chemistry"] {
       content: "Addiction at ";
     }
   }
+
+  .ph-ext {
+    p {
+      font-size: 9pt;
+    }
+    table {
+      margin: 0.5rem 0.7rem;
+      background-color: $nanotrasen !important;
+      border: 0;
+      td,
+      th {
+        font-size: 8pt;
+        padding: 0.2rem 0.3rem;
+        line-height: 1rem;
+      }
+      td {
+        background-color: darken($nanotrasen, 10%) !important;
+        text-align: center;
+        font-weight: normal;
+      }
+    }
+  }
 }