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

@@ -1,136 +1,162 @@
 div[data-tab="Guide_to_chemistry"] {
-    .bgus_twistie:after {
-        color: red;
-        display: inline-block;
-        font-weight: bold;
-        margin-left: 0.2em;
-        content: "⯆";
-    }
+  .bgus_twistie:after {
+    color: red;
+    display: inline-block;
+    font-weight: bold;
+    margin-left: 0.2em;
+    content: "⯆";
+  }
 
-    .bgus_collapsed > .bgus_twistie:after {
-        content: "⯈";
-    }
+  .bgus_collapsed > .bgus_twistie:after {
+    content: "⯈";
+  }
+
+  div.tooltiptext {
+    display: none;
+    border: 1px solid #384e68;
+    background: linear-gradient(
+      to bottom,
+      darken(#384e68, 20%),
+      darken(#384e68, 25%)
+    );
+  }
+
+  span.bgus_nested_element:not(.bgus_collapsed) + div.tooltiptext {
+    z-index: unset;
+    visibility: inherit;
+    display: block;
+    opacity: 1;
+    position: relative;
+    width: auto;
+    border-left-width: 3px;
+    margin-left: 5px;
+    margin-top: 5px;
+    font-size: 8pt;
+    padding: 5px 8px;
+    line-height: 10pt;
 
     div.tooltiptext {
-        display: none;
-        border: 1px solid #384e68;
-        background: linear-gradient(to bottom, darken(#384e68, 20%), darken(#384e68, 25%));
+      margin-left: -5px;
     }
+  }
 
-    span.bgus_nested_element:not(.bgus_collapsed) + div.tooltiptext {
-        z-index: unset;
-        visibility: inherit;
-        display: block;
-        opacity: 1;
-        position: relative;
-        width: auto;
-        border-left-width: 3px;
-        margin-left: 5px;
-        margin-top: 5px;
-        font-size: 8pt;
-        padding: 5px 8px;
-        line-height: 10pt;
+  table.wikitable {
+    border: 0 !important;
 
-        div.tooltiptext {
-            margin-left: -5px;
-        }
+    .table-head {
+      text-align: center;
     }
 
-    table.wikitable {
-        border: 0 !important;
-
-        .table-head {
-            text-align: center;
-        }
+    th {
+      background-color: darken($nanotrasen, 5%) !important;
+    }
 
-        th {
-            background-color: darken($nanotrasen, 5%) !important;
-        }
+    & > tbody > tr > td:nth-child(2) {
+      width: 45%;
+      padding: 10px;
+    }
 
-        & > tbody > tr > td:nth-child(2) {
-            width: 45%;
-            padding: 10px;
-        }
+    .bgus_fz_selected {
+      background: $nanotrasen !important;
+      th,
+      td {
+        border-top: 2px solid lighten($nanotrasen, 20%);
+        border-bottom: 2px solid lighten($nanotrasen, 15%);
+      }
+      th {
+        background: lighten($nanotrasen, 5%) !important;
+      }
+      div.tooltiptext {
+        border-color: lighten($nanotrasen, 20%);
+        background: darken($nanotrasen, 10%);
+      }
+    }
+  }
 
-        .bgus_fz_selected {
-            background: $nanotrasen !important;
-            th,
-            td {
-                border-top: 2px solid lighten($nanotrasen, 20%);
-                border-bottom: 2px solid lighten($nanotrasen, 15%);
-            }
-            th {
-                background: lighten($nanotrasen, 5%) !important;
-            }
-            div.tooltiptext {
-                border-color: lighten($nanotrasen, 20%);
-                background: darken($nanotrasen, 10%);
-            }
-        }
+  body.bgus_cbox {
+    input[type="checkbox"] + span[data-src]:before {
+      display: inline-block;
+      width: 1.5em;
+      content: "[_]";
+    }
+    input[type="checkbox"]:checked + span[data-src]:before {
+      content: "[X]";
+    }
+    input[type="checkbox"]:checked + span[data-src] {
+      text-decoration: line-through;
     }
+    input[type="checkbox"] + span[data-src] {
+      cursor: pointer;
+    }
+    input[type="checkbox"] + span[data-src]:before,
+    input[type="checkbox"] + span[data-src] {
+      color: orange;
+      font-weight: bold;
+    }
+    input[type="checkbox"]:checked + span[data-src]:before,
+    input[type="checkbox"]:checked + span[data-src] {
+      color: green;
+    }
+  }
 
-    body.bgus_cbox {
-        input[type="checkbox"] + span[data-src]:before {
-            display: inline-block;
-            width: 1.5em;
-            content: "[_]";
-        }
-        input[type="checkbox"]:checked + span[data-src]:before {
-            content: "[X]";
-        }
-        input[type="checkbox"]:checked + span[data-src] {
-            text-decoration: line-through;
-        }
-        input[type="checkbox"] + span[data-src] {
-            cursor: pointer;
-        }
-        input[type="checkbox"] + span[data-src]:before,
-        input[type="checkbox"] + span[data-src] {
-            color: orange;
-            font-weight: bold;
-        }
-        input[type="checkbox"]:checked + span[data-src]:before,
-        input[type="checkbox"]:checked + span[data-src] {
-            color: green;
-        }
+  .reagent-ext {
+    .reagent-header {
+      font-size: 12pt;
+      text-align: left;
+      padding: 10pt;
+      padding-bottom: 0;
+      span:last-child {
+        margin-left: 0.5em;
+      }
+    }
+    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 ";
+    }
+  }
 
-    .reagent-ext {
-        .reagent-header {
-            font-size: 12pt;
-            text-align: left;
-            padding: 10pt;
-            padding-bottom: 0;
-            span:last-child {
-                margin-left: 0.5em;
-            }
-        }
-        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 ";
-        }
+  .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;
+      }
     }
+  }
 }