Armyfroge_Cards_Userscript/main.user.js

// ==UserScript==
// @name        Armyfroge Cards
// @namespace   https://git.euph.dev/Snoweuph
// @match       https://army-forge.onepagerules.com/view*
// @grant       none
// @version     1.0.6
// @author      Snoweuph
// @require https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js
// @require https://html2canvas.hertzen.com/dist/html2canvas.min.js
// ==/UserScript==

// Bind to Ctrl + S
document.addEventListener("keydown", (event) => {
  if (event.ctrlKey && event.key === "s") {
    event.preventDefault();
    generateCards();
    generateRules();
  }
});

function generateCards() {
  const cards_root =
    document.getElementsByClassName("MuiContainer-root")[0].firstElementChild;

  Array.from(cards_root.children).forEach((child) => {
    const card = child.firstElementChild;
    const header = card.firstElementChild;
    const title = getHeaderTitle(header);
    const unit_count = getUnitCount(title);

    const marker_section = document.createElement("div");
    marker_section.style.display = "grid";
    marker_section.style.gridTemplateColumns = "repeat(10, 1fr)";
    marker_section.style.gap = "0.5rem";
    marker_section.style.padding = "0.5rem";
    marker_section.style.marginBottom = "0.5rem";

    for (let i = 0; i < 10 * unit_count; i++) {
      const maker_space = document.createElement("div");
      maker_space.style.width = "3rem";
      maker_space.style.aspectRatio = "1";
      maker_space.style.borderRadius = "100%";
      maker_space.style.border = "dashed 1px lightgray";
      marker_section.appendChild(maker_space);
    }
    card.insertBefore(marker_section, header.nextSibling);

    html2canvas(card, { scale: 15, backgroundColor: null }).then((canvas) => {
      const link = document.createElement("a");
      link.download = title + ".png";
      link.href = canvas.toDataURL();
      document.body.appendChild(link);
      link.click();
    });
  });
}

function generateRules() {
  const rules_root =
    document.getElementsByClassName("MuiContainer-root")[0].lastElementChild;

  const rules_list =
    rules_root.firstElementChild.firstElementChild.firstElementChild
      .firstElementChild.lastElementChild.firstElementChild.firstElementChild
      .firstElementChil.firstElementChild.firstElementChild;

  rules_list.style.display = "flex";
  rules_list.style.flexDirection = "column";
  rules_list.style.gap = "1rem";

  html2canvas(rules_root, { scale: 15, backgroundColor: null }).then(
    (canvas) => {
      const link = document.createElement("a");
      link.download = "Rules.png";
      link.href = canvas.toDataURL();
      document.body.appendChild(link);
      link.click();
    },
  );
}

function getUnitCount(str) {
  const match = str.match(/^\d+/);
  return match ? parseInt(match[0], 10) : 1;
}

function getHeaderTitle(pElement) {
  let textContent = "";
  pElement.firstElementChild.firstElementChild.firstElementChild.childNodes.forEach(
    (node) => {
      if (node.nodeType === Node.TEXT_NODE) {
        textContent += node.textContent;
      }
    },
  );
  return textContent;
}