Fix tooltips

lib/App.tsx

@@ -5,8 +5,8 @@ import { useState } from "react";
 
 export default function App() {
   const [tabs, setTabs] = useState<TabListItem[]>([
-    { page: "Guide_to_medicine" },
     { page: "Guide_to_chemistry" },
+    { page: "Guide_to_medicine" },
   ]);
   const [activeTab, setActiveTab] = useState(0);
   return (

lib/userscript.ts

@@ -263,33 +263,30 @@ export default function (root: HTMLElement, docname: string) {
   function betterChemistry() {
     // Fix inconsistencies with <p> on random parts
     // Ideally I'd like a <p> or something on every part, wrapping it completely, but for now let's just kill 'em
-    new Set(
+    document
-      Array.from(
+      .querySelectorAll(
-        root.querySelectorAll(
+        "table.wikitable > tbody > tr:not(:first-child) > td:nth-child(2)"
-          "table.wikitable > tbody > tr:not(:first-child) > td:nth-child(2) p"
       )
-      ).map((p) => p.parentNode)
+      .forEach((td) => {
-    ).forEach((parent) => {
+        const tmp = td.cloneNode();
-      const tmp = parent.cloneNode();
+        // The cast to Array is necessary because, while childNodes's NodeList technically has a forEach method, it's a live list and operations mess with its lenght in the middle of the loop.
-      // The cast to Array is necessary because, while childNodes's NodeList technically has a forEach method, it's a live list and operations mess with its lenght in the middle of the loop
+        // Nodes can only have one parent so append removes them from the original NodeList and shifts the following one back into the wrong index.
-      // Nodes can only have one parent so append removes them from the original NodeList and shifts the following one back into the wrong index
+        Array.from(td.childNodes).forEach((el) => {
-      Array.from(parent.childNodes).forEach((el: HTMLElement) => {
           if (el.tagName === "P") {
             tmp.append(...el.childNodes);
           } else {
             tmp.append(el);
           }
         });
-      parent.parentNode.replaceChild(tmp, parent);
+        td.parentNode.replaceChild(tmp, td);
       });
 
     // Enrich "x part" with checkboxes and parts
-    Array.from(root.querySelectorAll("td"))
+    Array.from(document.querySelectorAll("td"))
       .filter((el) => el.innerText.indexOf(" part") >= 0)
-      .map((el) => [el, el.innerHTML])
+      .forEach((el) => {
-      .forEach(([el, innerHTML]) => {
+        el.innerHTML = el.innerHTML.replace(
-        el.innerHTML = innerHTML.replace(
+          /((\d+)\s+(?:parts?|units?))(.*?(?:<\/a>|\n|$))/gi,
-          /((\d+)\s+(?:parts?|units?))(.*?(?:<\s*(\/\s*a|br\s*\/?)\s*>|\n|$))/gi,
           (match, ...m) =>
             `<label class="bgus_part ${
               m[2].includes("</a>") ? "bgus_part_tooltip" : ""
@@ -303,34 +300,31 @@ export default function (root: HTMLElement, docname: string) {
             )}`
         );
       });
-    Array.from(root.querySelectorAll(".bgus_nested_element")).forEach((el) => {
-      el.parentElement.classList.add("bgus_collapsable");
-    });
     // Add event to autofill child checkboxes
-    document
+    root
       .querySelectorAll(".bgus_part_tooltip > .bgus_checkbox")
       .forEach((box) => {
         const tooltip = box.parentElement.nextElementSibling;
         box.addEventListener("click", function () {
           tooltip
             .querySelectorAll(".bgus_checkbox")
-            .forEach((el: HTMLInputElement) => (el.checked = this.checked));
+            .forEach((el) => (el.checked = this.checked));
         });
       });
 
     // Add event to collapse subsections
     root.querySelectorAll(".bgus_nested_element").forEach((twistie) => {
       twistie.addEventListener("click", function (evt) {
-        twistie.parentElement.classList.toggle("bgus_collapsed");
+        twistie.classList.toggle("bgus_collapsed");
       });
     });
 
     // Wrap every recipe with extra metadata
     root.querySelectorAll(".bgus_part").forEach((el: HTMLElement) => {
       if ("parts" in el.parentElement.dataset) {
-        el.parentElement.dataset.parts = (
+        el.parentElement.dataset.parts =
-          parseInt(el.parentElement.dataset.parts) + parseInt(el.dataset.amount)
+          parseInt(el.parentElement.dataset.parts) +
-        ).toString();
+          parseInt(el.dataset.amount);
       } else {
         el.parentElement.dataset.parts = el.dataset.amount;
       }

style/bgus.scss

@@ -14,7 +14,8 @@
   flex-direction: column;
   z-index: 9999;
   color: #fff;
-  input {
+}
+#bgus_fz_searchbox input {
   font-size: 14pt;
   padding: 5pt 8pt;
   border: 1px solid #555;
@@ -22,22 +23,20 @@
   margin-bottom: 0;
   background-color: #111;
   color: #fff;
-  }
+}
-  ul {
+#bgus_fz_searchbox ul {
   list-style: none;
   margin: 5px;
-    padding: 0;
+}
-    li {
+#bgus_fz_searchbox li {
   padding: 5px;
   cursor: pointer;
-      &:hover {
+}
+#bgus_fz_searchbox li:hover {
   background-color: rgba(100, 100, 100, 0.5);
-      }
+}
-      &.selected {
+#bgus_fz_searchbox li.selected {
   border-left: 3px solid white;
-      }
-    }
-  }
 }
 .bgus_twistie:after {
   color: red;
@@ -46,62 +45,59 @@
   margin-left: 0.2em;
   content: "⯆";
 }
-.bgus_collapsed > .bgus_nested_element > .bgus_twistie:after {
+.bgus_collapsed > .bgus_twistie:after {
   content: "⯈";
 }
-:not(.bgus_collapsed) > .bgus_nested_element + .tooltiptext {
+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;
-  background: transparent;
+  margin-left: 5px;
-  margin: 5px;
+  margin-top: 5px;
-  margin-right: 0px;
   font-size: 8pt;
   padding: 5px 8px;
   line-height: 10pt;
 }
-.bgus_collapsable:not(.bgus_collapsed) + br {
-  display: none;
-}
 table.wikitable > tbody > tr > td:nth-child(2) {
   min-width: 30%;
   padding: 10px;
 }
-.bchem .bgus_fz_selected {
+.bgus_fz_selected {
-  background-color: #525242;
+  border: 3px solid yellow;
 }
-input[type="checkbox"] + span[data-src] {
+body.bgus_cbox input[type="checkbox"] + span[data-src]:before {
-  font-weight: bold;
-  cursor: text;
-  &:before {
   display: inline-block;
-    width: 1.5em; /* Prevent autoscroll with sudden line wraps when revealing checkboxes */
+  width: 1.5em;
-    text-align: center;
-    content: "•";
-  }
-}
-.bgus_cbox {
-  input[type="checkbox"] + span[data-src]:before {
   content: "[_]";
-    margin-right: 0.5em;
+}
-  }
+body.bgus_cbox input[type="checkbox"]:checked + span[data-src]:before {
-  input[type="checkbox"]:checked + span[data-src]:before {
+  content: "[X]";
-    content: "[X]";
+}
-    margin-right: 0.5em;
+body.bgus_cbox input[type="checkbox"]:checked + span[data-src] {
-  }
+  text-decoration: line-through;
-  input[type="checkbox"]:checked + span[data-src] {
+}
-    text-decoration: line-through;
+body.bgus_cbox input[type="checkbox"] + span[data-src] {
-  }
+  cursor: pointer;
-  input[type="checkbox"] + span[data-src] {
+}
-    cursor: pointer;
+body.bgus_cbox input[type="checkbox"] + span[data-src]:before,
-  }
+body.bgus_cbox input[type="checkbox"] + span[data-src] {
-  input[type="checkbox"] + span[data-src] {
+  color: orange;
-    color: orange;
+  font-weight: bold;
-  }
+}
-  input[type="checkbox"]:checked + span[data-src] {
+body.bgus_cbox input[type="checkbox"]:checked + span[data-src]:before,
-    color: green;
+body.bgus_cbox input[type="checkbox"]:checked + span[data-src] {
-  }
+  color: green;
 }

wiki-styles.css

@@ -1,3 +0,0 @@
-a[href] {
-  color: white;
-}