tghandbook/lib/userscript.ts

import { darken, ColorFmt, lighten } from "./darkmode";

const DEFAULT_OPTS = {
  alignment: "center",
};

export default function userscript(root: HTMLElement, docname: string): void {
  root.querySelectorAll(".mw-editsection").forEach((editLink) => {
    editLink.parentElement.removeChild(editLink);
  });

  // Darken bgcolor
  root.querySelectorAll("*[bgcolor]").forEach((td) => {
    let bgcolor = td.getAttribute("bgcolor");
    // Shitty way to detect if it's hex or not
    // Basically, none of the css colors long 6 letters only use hex letters
    // THANK FUCKING GOD
    if (bgcolor.length === 6 && Number.isNaN(parseInt(bgcolor, 16))) {
      bgcolor = `#${bgcolor}`;
    }
    td.setAttribute("bgcolor", darken(bgcolor, ColorFmt.HEX).slice(1));
  });
  root.querySelectorAll("*[style]").forEach((td: HTMLElement) => {
    if (td.style.backgroundColor !== "") {
      td.style.backgroundColor = darken(td.style.backgroundColor, ColorFmt.RGB);
    }
    if (td.style.background !== "") {
      td.style.backgroundColor = darken(td.style.background, ColorFmt.RGB);
    }
  });

  // Lighten fgcolors
  root.querySelectorAll("*[color]").forEach((td) => {
    let color = td.getAttribute("color");
    if (color.length === 6 && !Number.isNaN(parseInt(color, 16))) {
      color = `#${color}`;
    }
    td.setAttribute("color", lighten(color, ColorFmt.HEX).slice(1));
  });

  // Remove fixed widths
  root.querySelectorAll("table[width]").forEach((td) => {
    td.setAttribute("width", "100%");
  });
  root.querySelectorAll("table[style]").forEach((td: HTMLTableElement) => {
    if (td.style.width !== "") {
      td.style.width = "100%";
    }
  });

  // Group headers and content so stickies don't overlap
  root.querySelectorAll("h3,h2").forEach((h3) => {
    const parent = h3.parentNode;
    const div = document.createElement("div");
    parent.insertBefore(div, h3);
    while (h3.nextSibling && !h3.nextSibling.nodeName.startsWith("H")) {
      const sibling = h3.nextSibling;
      parent.removeChild(sibling);
      div.appendChild(sibling);
    }
    h3.parentNode.removeChild(h3);
    div.insertBefore(h3, div.firstChild);
    div.className = "mw-headline-cont";
  });

  root.querySelectorAll(".mw-headline").forEach((span: HTMLElement) => {
    // Find nearest container
    let parent = span.parentElement;
    while (parent !== null) {
      if (parent.classList.contains("mw-headline-cont")) {
        parent.id = span.id;
        span.id += "-span";
        parent.dataset.name = span.innerText;
      }
      parent = parent.parentElement;
    }
  });

  // Tell user that better chemistry is loading
  const postbody = root;
  const statusMessage = document.createElement("div");
  statusMessage.innerHTML = `
      <table style="background-color: black; margin-bottom:10px;" width="95%" align="center">
      <tbody><tr><td align="center">
      <b>Hang on...</b> Better guides is loading.
      </td></tr></tbody>
      </table>`;
  postbody.insertBefore(statusMessage, postbody.firstChild);

  // TODO Refactor this mess
  function searchBox(el, searchCandidate, options = DEFAULT_OPTS) {
    // Fuzzy search box
    const resultList = document.createElement("ul");
    const searchBoxElem = document.createElement("div");
    let selectedResult = null;
    let results = [];

    const jumpTo = (id) => {
      el[id].scrollIntoView({
        block: options.alignment,
        inline: "nearest",
        behavior: "auto",
      });
      document
        .querySelectorAll("table.wikitable .bgus_fz_selected")
        .forEach((sel) => sel.classList.remove("bgus_fz_selected"));
      el[id].parentElement.classList.add("bgus_fz_selected");
    };

    const setSelectedResult = (i) => {
      selectedResult = i;
      resultList
        .querySelectorAll(".selected")
        .forEach((sel) => sel.classList.remove("selected"));
      resultList.children[i].classList.add("selected");
      jumpTo(results[i].id);
    };

    const search = (str) => {
      if (!str) {
        return;
      }
      const regex = new RegExp(
        `^(.*?)([${str
          .split("")
          .map((c) => (c.includes(["\\", "]", "^"]) ? `\\${c}` : c))
          .join("])(.*?)([")}])(.*?)$`,
        "i"
      );
      const arr = searchCandidate
        .map((o) => {
          o.matches = (o.str.match(regex) || [])
            .slice(1)
            .reduce((list, group, i, or) => {
              // Initialize first placeholder (always empty) and first matching "sections"
              if (i < 2) {
                list.push([group]);
              }
              // If group is second match in a row join to previous section
              else if (or[i - 1] === "") {
                list[list.length - 1].push(group);
              }
              // If group is a match create a new section
              else if (group !== "") {
                list.push([group]);
              }
              return list;
            }, [])
            .map((cstr) => cstr.join(""));
          return o;
        })
        // Strike non-matching rows
        .filter((o) => o.matches.length > 0)
        .sort((oA, oB) => {
          const iA = oA.id,
            a = oA.matches;
          const iB = oB.id,
            b = oB.matches;

          // Exact match
          if (a.length === 1 && b.length !== 1) return -1;
          if (a.length !== 1 && b.length === 1) return 1;

          // Most complete groups (alphanumeric)
          const clean = (cel) => !/[^a-zA-Z0-9]*$/.test(cel);
          const cLen = a.filter(clean).length - b.filter(clean).length;
          if (cLen !== 0) return cLen;

          // Least distant first gropus
          for (let i = 0; i < Math.min(a.length, b.length) - 1; i += 2) {
            const gLen = a[i].length - b[i].length;
            if (gLen !== 0) return gLen;
          }

          // Most complete groups (raw)
          const len = a.length - b.length;
          if (len !== 0) return len;

          // Make the search stable since ECMAScript doesn't mandate it
          return iA - iB;
        });
      results = arr;
      window.requestAnimationFrame(() => {
        resultList.innerHTML = "";
        arr.forEach(({ matches, id }) => {
          const li = document.createElement("li");
          li.innerHTML = matches
            .map((c, i) => (i % 2 ? `<strong>${c}</strong>` : c))
            .join("");
          li.addEventListener("click", () => {
            jumpTo(id);
            searchBoxElem.classList.add("bgus_hidden");
          });
          resultList.appendChild(li);
        });
        if (results.length > 0) {
          setSelectedResult(0);
        }
      });
    };

    // Create fuzzy search box
    const sel = document.createElement("input");
    searchBoxElem.id = "bgus_fz_searchbox";
    searchBoxElem.classList.add("bgus_hidden");
    searchBoxElem.appendChild(sel);
    searchBoxElem.appendChild(resultList);
    root.appendChild(searchBoxElem);

    // Bind events
    let oldValue = "";
    sel.addEventListener("keyup", (event) => {
      switch (event.keyCode) {
        case 27: // Escape - Hide bar
          searchBoxElem.classList.add("bgus_hidden");
          return;
        case 13: // Enter - Jump to first result and hide bar
          if (results.length > 0) {
            jumpTo(results[selectedResult].id);
          }
          searchBoxElem.classList.add("bgus_hidden");
          return;
        case 40: // Down arrow - Select next result
          if (selectedResult < results.length - 1) {
            setSelectedResult(selectedResult + 1);
          }
          return;
        case 38: // Up arrow - Select previous result
          if (selectedResult > 0) {
            setSelectedResult(selectedResult - 1);
          }
          return;
        default:
          if (sel.value !== oldValue) {
            search(sel.value);
            oldValue = sel.value;
          }
      }
    });

    document.body.addEventListener("keyup", (ev) => {
      if (ev.keyCode === 83) {
        sel.focus();
      }
    });

    document.body.addEventListener("keydown", (ev) => {
      if (ev.shiftKey) {
        switch (ev.keyCode) {
          // SHIFT+S = Fuzzy search
          case 83: {
            searchBoxElem.classList.remove("bgus_hidden");
            sel.value = "";
            break;
          }
          default:
          // Do nothing
        }
      }
    });
  }

  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
    document
      .querySelectorAll(
        "table.wikitable > tbody > tr:not(:first-child) > td:nth-child(2), .tooltiptext"
      )
      .forEach((td) => {
        const tmp = td.cloneNode() as HTMLElement;
        // 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.
        Array.from(td.childNodes).forEach((el) => {
          if (el instanceof HTMLElement) {
            if (el.tagName === "P") {
              tmp.append(...el.childNodes);
            } else {
              tmp.append(el);
            }
          }
        });
        td.parentNode.replaceChild(tmp, td);
      });

    // Enrich "x part" with checkboxes and parts
    Array.from(document.querySelectorAll("td"))
      .filter((el) => el.innerText.indexOf(" part") >= 0)
      .forEach((el) => {
        el.innerHTML = el.innerHTML.replace(
          /((\d+)\s+(?:parts?|units?))(.*?(?:<\/a>|\n|$))/gi,
          (match, ...m) =>
            `<label class="bgus_part ${
              m[2].includes("</a>") ? "bgus_part_tooltip" : ""
            }" data-amount="${
              m[1]
            }"><input type="checkbox" class='bgus_checkbox bgus_hidden'/> <span class="bgus_part_label" data-src="${
              m[0]
            }">${m[0]}</span></label>${m[2].replace(
              /(<a .+?<\/a>)/gi,
              '<span class="bgus_nobreak bgus_nested_element">$1<span class="bgus_twistie"></span></span>'
            )}`
        );
      });
    // Add event to autofill child checkboxes
    root
      .querySelectorAll(".bgus_part_tooltip > .bgus_checkbox")
      .forEach((box: HTMLInputElement) => {
        const tooltip = box.parentElement.nextElementSibling;
        box.addEventListener("click", () => {
          tooltip
            .querySelectorAll(".bgus_checkbox")
            .forEach((el: HTMLInputElement) => {
              el.checked = box.checked;
            });
        });
      });

    // Add event to collapse subsections
    root.querySelectorAll(".bgus_nested_element").forEach((twistie) => {
      twistie.addEventListener("click", () => {
        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 = (
          parseInt(el.parentElement.dataset.parts, 10) +
          parseInt(el.dataset.amount, 10)
        ).toString();
      } else {
        el.parentElement.dataset.parts = el.dataset.amount;
      }
    });

    const setPartSize = (labels, ml) => {
      labels.forEach((el) => {
        const part = el.parentElement.dataset.amount;
        const total = el.parentElement.parentElement.dataset.parts;
        const amt = Math.ceil(ml * (part / total));
        el.innerHTML = `${amt} ml`;
        // Lookup tooltips
        let next = el.parentElement.nextElementSibling;
        while (next) {
          if (next.classList.contains("tooltip")) {
            const sublabels = [];
            next.querySelector(".tooltiptext").childNodes.forEach((ch) => {
              if (ch.classList && ch.classList.contains("bgus_part")) {
                sublabels.push(ch.querySelector(".bgus_part_label"));
              }
            });
            setPartSize(sublabels, amt);
          }
          if (next.classList.contains("bgus_part")) {
            // Done searching
            break;
          }
          next = next.nextElementSibling;
        }
      });
    };

    root.classList.add("bchem");
    // Init fuzzy search with elements
    const el = Array.from(
      root.querySelectorAll(
        "table.wikitable > tbody > tr:not(:first-child) > th"
      )
    );
    const name = el.map((elem) => {
      let partial = "";
      elem.childNodes.forEach((t) => {
        if (t instanceof Text) {
          partial += t.textContent;
        }
      });
      return partial.trim();
    });
    searchBox(
      el,
      name.map((e, i) => ({ id: i, str: e }))
    );

    // Remove "Removed medicines" section
    const remTable = root.querySelector(
      "#Non-craftable_Medicines + h4 + p + table"
    );
    remTable.parentElement.removeChild(remTable);

    root
      .querySelectorAll("div[data-name] .wikitable.sortable tr")
      .forEach((row: HTMLElement) => {
        let sectionEl = row.parentElement;
        while (!sectionEl.dataset.name) {
          sectionEl = sectionEl.parentElement;
        }
        const section = sectionEl.dataset.name;
        if (row.querySelector("td") === null) {
          // Remove unused rows if found
          const headers = row.querySelectorAll("th");
          headers.forEach((th, i) => {
            if (i < 2) {
              th.classList.add("table-head");
              return;
            }
            th.parentElement.removeChild(th);
          });
          return;
        }
        const rows = Array.from(row.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 = row.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", (ev) => {
      if (ev.shiftKey) {
        switch (ev.keyCode) {
          // SHIFT+C = Toggle checkboxes
          case 67: {
            root.classList.toggle("bgus_cbox");
            root
              .querySelectorAll(".bgus_checkbox:checked")
              .forEach((sel: HTMLInputElement) => {
                sel.checked = false;
              });
            break;
          }

          // SHIFT+B = Set whole size (beaker?) for parts/units
          case 66: {
            const size = parseInt(
              prompt("Write target ml (0 to reset)", "90"),
              10
            );
            if (Number.isNaN(size) || size <= 0) {
              // Reset to parts/unit
              root
                .querySelectorAll(".bgus_part_label")
                .forEach((sel: HTMLElement) => {
                  sel.innerHTML = sel.dataset.src;
                });
              return;
            }
            setPartSize(
              root.querySelectorAll("td > .bgus_part > .bgus_part_label"),
              +size
            );
            break;
          }

          default:
          // Do nothing
        }
      }
    });
  }

  function betterGeneric() {
    const el = Array.from(
      root.querySelectorAll("div.mw-headline-cont[id][data-name]")
    );
    const name = el.map((elem: HTMLDivElement) => elem.dataset.name.trim());

    // Init fuzzy search with headlines
    searchBox(
      el,
      name.map((e, i) => ({ id: i, str: e })),
      { alignment: "start" }
    );
  }

  switch (docname) {
    case "Guide_to_chemistry":
      betterChemistry();
      break;
    default:
      betterGeneric();
      break;
  }
  // Everything is loaded, remove loading bar
  statusMessage.innerHTML = "";
}